🚀 update

README.md

@@ -196,6 +196,27 @@
             <img src="https://cdn.jsdelivr.net/gh/sun0225SUN/Awesome-Love-Code/assets/img/web/027.jpg"/>
         </a>
     </td>
+    </tr>
+        <!-- 第九行 -->
+    <tr>
+    <td valign="top">
+        <a href="https://sun0225sun.github.io/Awesome-Love-Code/Web/028-i_love_you">
+            <p align="center">028-i_love_you</p>
+            <img src="https://cdn.jsdelivr.net/gh/sun0225SUN/Awesome-Love-Code/assets/img/web/028.jpg"/>
+        </a>
+    </td>
+    <td valign="top">
+        <a href="https://sun0225sun.github.io/Awesome-Love-Code/Web/029-Valentines_Day">
+            <p align="center">029-Valentines_Day</p>
+            <img src="https://cdn.jsdelivr.net/gh/sun0225SUN/Awesome-Love-Code/assets/img/web/029.jpg"/>
+        </a>
+    </td>
+    <td valign="top">
+        <a href="https://sun0225sun.github.io/Awesome-Love-Code/Web/030-miss_you">
+            <p align="center">030-miss_you</p>
+            <img src="https://cdn.jsdelivr.net/gh/sun0225SUN/Awesome-Love-Code/assets/img/web/030.jpg"/>
+        </a>
+    </td>
     </tr>
 </table>
 

Web/028-i_love_you/css/index.css

+html {
+  height: 100%;
+}
+body {
+  margin:0;
+  padding:0;
+  font-family: sans-serif;
+  background: linear-gradient(#141e30, #243b55);
+}
+
+.login-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1100px;
+  padding: 50px;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,.5);
+  box-sizing: border-box;
+  box-shadow: 0 15px 25px rgba(0,0,0,.6);
+  border-radius: 10px;
+}
+
+.login-box h2 {
+  margin: 0 0 30px;
+  padding: 0;
+  color: #fff;
+  text-align: center;
+}
+
+.login-box .user-box {
+  position: relative;
+}
+
+.login-box .user-box input {
+  width: 100%;
+  padding: 10px 0;
+  font-size: 16px;
+  color: #fff;
+  margin-bottom: 30px;
+  border: none;
+  border-bottom: 1px solid #fff;
+  outline: none;
+  background: transparent;
+}
+.login-box .user-box label {
+  position: absolute;
+  top:0;
+  left: 0;
+  padding: 10px 0;
+  font-size: 16px;
+  color: #fff;
+  pointer-events: none;
+  transition: .5s;
+}
+
+.login-box .user-box input:focus ~ label,
+.login-box .user-box input:valid ~ label {
+  top: -20px;
+  left: 0;
+  color: #03e9f4;
+  font-size: 12px;
+}
+
+.login-box form a {
+  position: relative;
+  display: inline-block;
+  padding: 10px 20px;
+  color: #03e9f4;
+  font-size: 16px;
+  text-decoration: none;
+  text-transform: uppercase;
+  overflow: hidden;
+  transition: .5s;
+  margin-top: 40px;
+  letter-spacing: 4px
+}
+
+.login-box a:hover {
+  background: #03e9f4;
+  color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #03e9f4,
+              0 0 25px #03e9f4,
+              0 0 50px #03e9f4,
+              0 0 100px #03e9f4;
+}
+
+.login-box a span {
+  position: absolute;
+  display: block;
+}
+
+.login-box a span:nth-child(1) {
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #03e9f4);
+  animation: btn-anim1 1s linear infinite;
+}
+
+@keyframes btn-anim1 {
+  0% {
+    left: -100%;
+  }
+  50%,100% {
+    left: 100%;
+  }
+}
+
+.login-box a span:nth-child(2) {
+  top: -100%;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, #03e9f4);
+  animation: btn-anim2 1s linear infinite;
+  animation-delay: .25s
+}
+
+@keyframes btn-anim2 {
+  0% {
+    top: -100%;
+  }
+  50%,100% {
+    top: 100%;
+  }
+}
+
+.login-box a span:nth-child(3) {
+  bottom: 0;
+  right: -100%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(270deg, transparent, #03e9f4);
+  animation: btn-anim3 1s linear infinite;
+  animation-delay: .5s
+}
+
+@keyframes btn-anim3 {
+  0% {
+    right: -100%;
+  }
+  50%,100% {
+    right: 100%;
+  }
+}
+
+.login-box a span:nth-child(4) {
+  bottom: -100%;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(360deg, transparent, #03e9f4);
+  animation: btn-anim4 1s linear infinite;
+  animation-delay: .75s
+}
+
+@keyframes btn-anim4 {
+  0% {
+    bottom: -100%;
+  }
+  50%,100% {
+    bottom: 100%;
+  }
+}

Web/028-i_love_you/css/style.css

+* {
+    margin: 0;
+    padding: 0
+}
+
+body {
+    background-color: #FFF;
+    background-image: linear-gradient(180deg, #CBCFFC, #FFF);
+    background-repeat: no-repeat
+}
+
+@font-face {
+    font-family: xbc;
+    src: url("../fonts/a.ttf")
+}
+
+#ti {
+    font: 13px xbc, Arial, sans-serif;
+    font-size: 200%;
+    margin: 30px 10px 0px;
+    text-shadow: 5px 5px 5px #909090
+}
+
+#hitokoto {
+    font-size: 80%;
+    margin: 13px 10px
+}
+
+h4 {
+    font-family: xbc;
+    padding-left: 10px
+}
+
+#content {
+    width: 95%;
+    max-width: 430px;
+    height: 600px;
+    margin: 0 auto;
+}
+
+.box-box {
+    text-align: center
+}
+
+.box-top {
+    margin: 5px 5px 25px
+}
+
+.box {
+    text-align: center;
+    margin: 5px 5px 10px;
+    padding: 5px;
+    border-radius: 10px;
+    background: #FFF;
+    box-shadow: 2px 2px 5px #CBCFFC, -3px -3px 5px #FFF
+}
+
+.newweb hr {
+    margin-left: 25px
+}
+
+.main {
+    width: auto;
+    height: 150px;
+    padding: 2% 0
+}
+
+.main-1 {
+    width: 40%;
+    height: auto;
+    float: left
+}
+
+.main-2 {
+    width: 57%;
+    height: auto;
+    float: left;
+    padding-left: 3%
+}
+
+center {
+    margin: 13px;
+    font-size: 80%
+}
+
+.img {
+    width: 65%;
+    height: 65%;
+    margin: 0 auto;
+    display: block;
+    border-radius: 10em;
+    box-shadow: 3px 3px 8px 1px silver;
+    margin-top: 1em;
+    align-content: center
+}
+
+.box-foot {
+    clear: both;
+    margin-top: 50px
+}
+
+.boxbox {
+    margin: 0 auto;
+    width: 80%;
+    border-radius: 20px;
+    background: #FFF;
+    box-shadow: inset 2px 2px 5px #CBCFFC, inset -3px -3px 5px #FFF
+}
+
+.box-box font {
+    text-align: center;
+    padding: 8px;
+    border-radius: 50%;
+    background: #FFF;
+    box-shadow: inset 3px 3px 5px #CBCFFC, inset -5px -5px 5px #FFF
+}
+
+font.zuobiao i {
+    line-height: 1.8;
+    margin-right: 6px;
+    vertical-align: middle;
+    background-image: url(../img/zuobiao.svg);
+    background-size: 100%;
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    margin-top: -2px
+}
+
+.newweb {
+    font-size: 13px
+}
+
+font.newweb i {
+    line-height: 1.8;
+    margin: 0 6px 0;
+    vertical-align: middle;
+    background-image: url(../img/web.svg);
+    background-size: 100%;
+    width: 15px;
+    height: 15px;
+    display: inline-block
+}
+
+font.qq i {
+    line-height: 1.8;
+    vertical-align: middle;
+    background-image: url(../img/qq.svg);
+    background-size: 100%;
+    width: 20px;
+    height: 20px;
+    display: inline-block
+}
+
+font.admin i {
+    line-height: 1.8;
+    margin-right: 6px;
+    vertical-align: middle;
+    background-image: url(../img/admin.svg);
+    background-size: 100%;
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    margin-top: -2px
+}
+
+font.zfb i {
+    line-height: 1.8;
+    vertical-align: middle;
+    background-image: url(../img/zfb.svg);
+    background-size: 100%;
+    width: 20px;
+    height: 20px;
+    display: inline-block
+}
+
+font.github i {
+    line-height: 1.8;
+    vertical-align: middle;
+    background-image: url(../img/github.svg);
+    background-size: 100%;
+    width: 20px;
+    height: 20px;
+    display: inline-block
+}
+
+font.vx i {
+    line-height: 1.8;
+    vertical-align: middle;
+    background-image: url(../img/vx.svg);
+    background-size: 100%;
+    width: 20px;
+    height: 20px;
+    display: inline-block
+}
+
+.ju {
+    text-align: center
+}
+
+.foot {
+    padding: 12px;
+    margin-top: 25px;
+    border-radius: 250px;
+    background: #FFF;
+    box-shadow: inset 3px 3px 5px #CBCFFC, inset -3px -3px 5px #FFF;
+    text-align: center
+}
+
+.foot font {
+    padding: 5px;
+    margin: 0 5px 0 0;
+    border-radius: 250px;
+    background: #FFF;
+    box-shadow: 2px 2px 5px #CBCFFC, -3px -3px 5px #FFF;
+    -webkit-transition-duration: 0.6s;
+    transition-duration: 0.6s
+}
+
+.foot font:hover {
+    background-color: #FFF;
+    box-shadow: inset 2px 2px 3px #CBCFFC, inset -3px -3px 3px #FFF
+}
+
+.foot font i {
+    line-height: 1.8;
+    margin: -5px 6px 0;
+    vertical-align: middle;
+    background-image: url(../img/footweb.svg);
+    background-size: 100%;
+    width: 15px;
+    height: 15px;
+    display: inline-block
+}
+
+a {
+    text-decoration: none;
+    margin-right: 5px
+}
+
+a:link {
+    color: #000000
+}
+
+a:visited {
+    color: #000000
+}
+
+a:hover {
+    color: #CBCFFC
+}
+
+a:active {
+    color: #CBCFFC
+}
+
+.footer {
+    width: 300px;
+    margin: 35px auto;
+    font-size: 11px;
+    text-align: center;
+    bottom: 10px
+}
+
+.custom {
+    /*min-height: 70px;
+	text-align: center;*/
+    margin: 20px 0;
+}
+
+#app-cover {
+    /*position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;*/
+    max-width: 430px;
+    min-width: 100%;
+    height: auto;
+    /*margin: -4px auto;*/
+    margin-top: 100px;
+}
+
+#bg-artwork {
+    position: fixed;
+    top: -30px;
+    right: -30px;
+    bottom: -30px;
+    left: -30px;
+    background-image: url(http://k003.kiwi6.com/hotlink/8msy543338/1.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50%;
+    filter: blur(40px);
+    -webkit-filter: blur(40px);
+    z-index: 1;
+}
+
+#bg-layer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    opacity: 0.51;
+    z-index: 2;
+}
+
+#player {
+    position: relative;
+    height: 100%;
+    z-index: 3;
+}
+
+#player-track {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    left: 15px;
+    padding: 13px 22px 10px 184px;
+    background-color: #fff7f7;
+    border-radius: 15px 15px 0 0;
+    transition: 0.3s ease top;
+    z-index: 1;
+}
+
+#player-track.active {
+    top: -92px;
+}
+
+#album-name {
+    color: #54576f;
+    font-size: 17px;
+    font-weight: bold;
+}
+
+#track-name {
+    color: #acaebd;
+    font-size: 13px;
+    margin: 2px 0 13px 0;
+}
+
+#track-time {
+    height: 12px;
+    margin-bottom: 3px;
+    overflow: hidden;
+}
+
+#current-time {
+    float: left;
+}
+
+#track-length {
+    float: right;
+}
+
+#current-time,
+#track-length {
+    color: transparent;
+    font-size: 11px;
+    background-color: #ffe8ee;
+    border-radius: 10px;
+    transition: 0.3s ease all;
+}
+
+#track-time.active #current-time,
+#track-time.active #track-length {
+    color: #f86d92;
+    background-color: transparent;
+}
+
+#s-area,
+#seek-bar {
+    position: relative;
+    height: 4px;
+    border-radius: 4px;
+}
+
+#s-area {
+    background-color: #ffe8ee;
+    cursor: pointer;
+}
+
+#ins-time {
+    position: absolute;
+    top: -29px;
+    color: #fff;
+    font-size: 12px;
+    white-space: pre;
+    padding: 5px 6px;
+    border-radius: 4px;
+    display: none;
+}
+
+#s-hover {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.2;
+    z-index: 2;
+}
+
+#ins-time,
+#s-hover {
+    background-color: #3b3d50;
+}
+
+#seek-bar {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    background-color: #fd6d94;
+    transition: 0.2s ease width;
+    z-index: 1;
+}
+
+#player-content {
+    position: relative;
+    height: 100%;
+    background-color: #fff;
+    box-shadow: 0 30px 80px #656565;
+    border-radius: 15px;
+    z-index: 2;
+}
+
+#album-art {
+    position: absolute;
+    top: -40px;
+    width: 115px;
+    height: 115px;
+    margin-left: 40px;
+    -webkit-transform: rotateZ(0);
+    transform: rotateZ(0);
+    transition: 0.3s ease all;
+    box-shadow: 0 0 0 10px #fff;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+#album-art.active {
+    top: -60px;
+    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
+}
+
+#album-art:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    margin: -10px auto 0 auto;
+    background-color: #d6dee7;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px #fff;
+    z-index: 2;
+}
+
+#album-art img {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: -1;
+}
+
+#album-art img.active {
+    opacity: 1;
+    z-index: 1;
+}
+
+#album-art.active img.active {
+    z-index: 1;
+    -webkit-animation: rotateAlbumArt 3s linear 0s infinite forwards;
+    animation: rotateAlbumArt 3s linear 0s infinite forwards;
+}
+
+@-webkit-keyframes rotateAlbumArt {
+    0% {
+        -webkit-transform: rotateZ(0);
+        transform: rotateZ(0);
+    }
+
+    100% {
+        -webkit-transform: rotateZ(360deg);
+        transform: rotateZ(360deg);
+    }
+}
+
+@keyframes rotateAlbumArt {
+    0% {
+        -webkit-transform: rotateZ(0);
+        transform: rotateZ(0);
+    }
+
+    100% {
+        -webkit-transform: rotateZ(360deg);
+        transform: rotateZ(360deg);
+    }
+}
+
+#buffer-box {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    height: 13px;
+    color: #1f1f1f;
+    font-size: 13px;
+    font-family: Helvetica;
+    text-align: center;
+    font-weight: bold;
+    line-height: 1;
+    padding: 6px;
+    margin: -12px auto 0 auto;
+    background-color: rgba(255, 255, 255, 0.19);
+    opacity: 0;
+    z-index: 2;
+}
+
+#album-art img,
+#buffer-box {
+    transition: 0.1s linear all;
+}
+
+#album-art.buffering img {
+    opacity: 0.25;
+}
+
+#album-art.buffering img.active {
+    opacity: 0.8;
+    filter: blur(2px);
+    -webkit-filter: blur(2px);
+}
+
+#album-art.buffering #buffer-box {
+    opacity: 1;
+}
+
+#player-controls {
+    width: 250px;
+    height: 100%;
+    margin: 0 5px 0 141px;
+    float: right;
+    overflow: hidden;
+}
+
+.control {
+    width: 33.333%;
+    float: left;
+    padding: 12px 0;
+}
+
+.button {
+    width: 26px;
+    height: 26px;
+    padding: 25px;
+    background-color: #fff;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.button i {
+    display: block;
+    color: #d6dee7;
+    font-size: 26px;
+    text-align: center;
+    line-height: 1;
+}
+
+.button,
+.button i {
+    transition: 0.2s ease all;
+}
+
+.button:hover {
+    background-color: #d6d6de;
+}
+
+.button:hover i {
+    color: #fff;
+}
+
+#follow-me-link {
+    top: 10px;
+    font-size: 13px;
+    padding: 5px 7px;
+    background-color: #f86d92;
+    border-radius: 2px;
+}
+
+#share-link {
+    top: 45px;
+    width: 16px;
+    height: 16px;
+    padding: 10px;
+    font-size: 16px;
+    background-color: #7dca24;
+    border-radius: 50%;
+}
+
+#follow-me-link,
+#share-link {
+    position: fixed;
+    right: 10px;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    z-index: 125;
+}
\ No newline at end of file

Web/028-i_love_you/img/admin.svg

+<svg t="1630931109441" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3286" width="200" height="200"><path d="M369.792 491.136a54.442667 54.442667 0 0 1-54.826667-54.826667c0-30.634667 24.192-54.869333 54.826667-54.869333 30.592 0 54.826667 24.234667 54.826667 54.869333 0 30.592-24.234667 54.826667-54.826667 54.826667z m284.416 0a54.442667 54.442667 0 0 1-54.826667-54.826667c0-30.634667 24.234667-54.869333 54.826667-54.869333 30.634667 0 54.826667 24.234667 54.826667 54.869333 0 30.592-24.192 54.826667-54.826667 54.826667z m-363.093333 328.704l30.506666-18.602667a170.666667 170.666667 0 0 1 115.413334-22.869333c9.045333 1.408 16.469333 2.517333 22.186666 3.242667 17.322667 2.304 34.986667 3.456 52.778667 3.456 188.586667 0 337.066667-128.938667 337.066667-281.6S700.586667 221.866667 512 221.866667s-337.066667 128.938667-337.066667 281.6c0 58.282667 21.333333 114.048 61.098667 161.322666 2.048 2.432 5.12 5.845333 9.130667 10.026667a170.666667 170.666667 0 0 1 46.976 132.352l-1.066667 12.672z m-26.88 116.352a42.666667 42.666667 0 0 1-65.152-39.68l8.021333-96.426667a85.333333 85.333333 0 0 0-23.466667-66.176A298.368 298.368 0 0 1 170.666667 719.701333c-50.944-60.629333-81.066667-135.381333-81.066667-216.234666 0-202.666667 189.098667-366.933333 422.4-366.933334s422.4 164.266667 422.4 366.933334-189.098667 366.933333-422.4 366.933333c-21.76 0-43.093333-1.408-63.957333-4.181333a1007.36 1007.36 0 0 1-24.277334-3.584 85.333333 85.333333 0 0 0-57.728 11.434666l-101.845333 62.122667z" p-id="3287" fill="#8992c8"></path></svg>
\ No newline at end of file

Web/028-i_love_you/img/footweb.svg

+<svg t="1630970240414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2111" width="200" height="200"><path d="M765.333333 625.536c11.093333-21.930667 41.365333-23.424 54.826667-3.776l1.664 2.688 166.144 298.666667a32 32 0 0 1-25.173333 47.445333L960 970.666667h-170.666667v-64h116.245334l-110.4-198.464-62.634667 123.605333-57.088-28.928 89.877333-177.344z" fill="#BED5FF" p-id="2112"></path><path d="M356.266667 368l-320 554.666667A32 32 0 0 0 64 970.666667h725.333333c26.197333 0 41.28-29.738667 25.834667-50.88l-405.333333-554.666667a32 32 0 0 0-53.546667 2.88z m30.869333 74.56L726.293333 906.666667H119.381333l267.754667-464.106667z" fill="#2674FD" p-id="2113"></path><path d="M414.229333 373.525333l192.298667 554.666667-60.458667 20.949333-192.298666-554.666666z" fill="#2674FD" p-id="2114"></path><path d="M192 192m-149.333333 0a149.333333 149.333333 0 1 0 298.666666 0 149.333333 149.333333 0 1 0-298.666666 0Z" fill="#39EAC2" p-id="2115"></path></svg>
\ No newline at end of file

Web/028-i_love_you/img/github.svg

+<svg t="1630926146565" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" width="200" height="200"><path d="M251.008 795.861333c-12.8-8.533333-23.808-19.413333-36.693333-34.816a2146.986667 2146.986667 0 0 1-19.882667-24.704c-19.754667-24.533333-32.213333-35.84-45.098667-40.490666a42.666667 42.666667 0 0 1 28.842667-80.341334c32.085333 11.52 53.802667 31.36 83.072 67.754667-4.010667-4.992 14.506667 18.218667 18.474667 22.997333 8.106667 9.685333 14.08 15.573333 18.773333 18.688 8.704 5.845333 25.045333 8.362667 49.066667 5.973334 0.981333-16.298667 4.010667-32.128 8.618666-46.72C229.546667 653.226667 157.866667 571.562667 157.866667 411.306667c0-52.906667 15.786667-100.522667 45.141333-140.458667-9.301333-38.144-7.893333-84.266667 12.885333-136.192a42.666667 42.666667 0 0 1 26.88-24.832c3.456-1.024 5.418667-1.493333 8.874667-2.005333 34.261333-5.248 82.645333 7.253333 145.706667 46.762666A500.522667 500.522667 0 0 1 512 141.44c38.912 0 77.568 4.437333 114.517333 13.141333 63.018667-39.808 111.488-52.309333 146.005334-46.762666 3.626667 0.554667 6.698667 1.28 9.301333 2.133333a42.666667 42.666667 0 0 1 26.282667 24.746667c20.778667 51.882667 22.186667 98.005333 12.885333 136.106666 29.482667 39.936 45.141333 87.253333 45.141333 140.501334 0 160.298667-71.424 241.706667-198.058666 272.725333 5.333333 17.706667 8.106667 37.504 8.106666 58.88a12820.992 12820.992 0 0 1-0.512 115.882667 42.666667 42.666667 0 0 1-0.810666 83.541333c-48.597333 9.728-84.608-22.698667-84.608-65.066667l0.085333-19.029333 0.213333-30.08c0.213333-30.208 0.298667-57.088 0.298667-85.248 0-29.738667-7.808-49.152-18.133333-58.026667-28.202667-24.32-13.909333-70.613333 23.04-74.752 126.592-14.208 185.045333-63.232 185.045333-198.826666 0-40.746667-13.312-74.410667-38.954667-102.570667a42.666667 42.666667 0 0 1-8.106666-44.586667c7.082667-17.664 10.112-40.832 4.096-68.864l-0.426667 0.128c-20.949333 5.930667-47.36 18.773333-79.274667 40.490667a42.666667 42.666667 0 0 1-35.541333 5.76A410.709333 410.709333 0 0 0 512 226.773333c-37.973333 0-75.605333 5.077333-110.592 14.933334a42.666667 42.666667 0 0 1-35.413333-5.717334c-32.085333-21.632-58.624-34.432-79.701334-40.405333-6.144 27.861333-3.114667 50.944 3.925334 68.565333a42.666667 42.666667 0 0 1-8.064 44.586667C256.682667 336.64 243.2 370.944 243.2 411.306667c0 135.338667 58.496 184.661333 184.405333 198.826666 36.906667 4.138667 51.242667 50.218667 23.210667 74.581334-8.192 7.168-18.304 31.232-18.304 58.197333v134.4c0 42.069333-35.626667 73.6-83.626667 65.194667a42.666667 42.666667 0 0 1-1.706666-83.712v-42.24c-38.826667 2.602667-70.912-3.754667-96.170667-20.693334z" p-id="2672" fill="#8992c8"></path></svg>
\ No newline at end of file

Web/028-i_love_you/img/qq.svg

+<svg t="1630925938068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3027" width="200" height="200"><path d="M748.16 533.930667l-29.696-76.629334c0-0.896 0.426667-16 0.426667-23.808C718.848 302.421333 659.029333 170.666667 512 170.666667s-206.848 131.754667-206.848 262.826666c0 7.808 0.384 22.912 0.426667 23.808l-29.696 76.629334c-8.106667 21.973333-16.213333 44.8-22.058667 64.426666-28.032 93.397333-18.944 132.053333-12.032 132.906667 14.848 1.834667 57.770667-70.314667 57.770667-70.314667 0 41.813333 20.821333 96.341333 65.792 135.68-16.810667 5.418667-37.461333 13.653333-50.688 23.765334-11.946667 9.130667-10.453333 18.389333-8.277334 22.186666 9.386667 16.426667 161.706667 10.453333 205.653334 5.333334 43.946667 5.12 196.224 11.093333 205.653333-5.376 2.133333-3.754667 3.626667-13.013333-8.277333-22.144-13.269333-10.112-33.92-18.346667-50.773334-23.722667 45.013333-39.381333 65.792-93.952 65.792-135.722667 0 0 42.965333 72.149333 57.813334 70.314667 6.912-0.853333 16.128-39.594667-12.074667-132.949333-5.973333-19.754667-13.866667-42.410667-22.016-64.384z m43.562667 351.018666c-15.914667 27.818667-35.541333 38.058667-61.354667 45.098667a209.493333 209.493333 0 0 1-33.877333 5.888c-18.773333 1.92-42.069333 2.773333-68.821334 2.730667a1417.813333 1417.813333 0 0 1-115.626666-4.949334c-29.525333 2.773333-76.16 4.864-115.626667 4.949334a685.653333 685.653333 0 0 1-68.864-2.730667 210.261333 210.261333 0 0 1-33.834667-5.888c-25.813333-6.997333-45.44-17.28-61.44-45.184a97.024 97.024 0 0 1-10.197333-70.485333c-25.258667-5.632-42.709333-20.608-54.570667-38.869334a103.68 103.68 0 0 1-13.184-30.293333 171.861333 171.861333 0 0 1-4.949333-47.189333c0.554667-33.493333 7.978667-75.178667 22.698667-124.245334 5.973333-19.882667 13.952-43.008 24.234666-70.613333l23.594667-61.013333a661.162667 661.162667 0 0 1-0.085333-8.661334C219.818667 239.146667 323.754667 85.333333 512 85.333333c188.288 0 292.181333 153.813333 292.181333 348.16l-0.042666 8.661334 23.594666 61.013333 0.426667 1.109333c9.6 25.856 17.621333 49.194667 23.722667 69.376 14.848 49.066667 22.272 90.837333 22.826666 124.416 0.298667 17.365333-1.28 33.109333-5.034666 47.274667-2.816 10.496-6.869333 20.48-13.226667 30.208-11.776 18.218667-29.184 33.109333-54.485333 38.826667 5.546667 23.637333 2.346667 48.64-10.24 70.570666z" p-id="3028" fill="#8992c8"></path></svg>
\ No newline at end of file

Web/028-i_love_you/img/vx.svg

+<svg t="1630925985489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3230" width="200" height="200"><path d="M792.490667 585.002667a38.826667 38.826667 0 0 0 38.314666-38.314667c0-21.248-17.024-38.314667-38.314666-38.314667s-38.314667 17.066667-38.314667 38.314667c0 21.333333 17.066667 38.314667 38.314667 38.314667z m-188.8 0a38.826667 38.826667 0 0 0 38.314666-38.314667c0-21.248-17.066667-38.314667-38.314666-38.314667-21.333333 0-38.314667 17.066667-38.314667 38.314667 0 21.333333 17.024 38.314667 38.314667 38.314667z m280.192 215.04a14.805333 14.805333 0 0 0-7.338667 15.786666c0 2.048 0 4.138667 1.066667 6.272 4.181333 17.792 12.544 46.122667 12.544 47.189334 0 3.114667 1.066667 5.205333 1.066666 7.338666a9.386667 9.386667 0 0 1-9.429333 9.386667c-2.133333 0-3.157333-1.024-5.248-2.048l-61.824-35.669333a34.090667 34.090667 0 0 0-14.677333-4.181334c-3.114667 0-6.272 0-8.362667 1.024-29.354667 8.405333-59.733333 12.586667-92.202667 12.586667-156.16 0-281.898667-104.832-281.898666-234.88 0-130.005333 125.738667-234.88 281.898666-234.88 156.117333 0 281.856 104.874667 281.856 234.88 0 70.272-37.717333 134.229333-97.450666 177.237333zM711.381333 345.557333a388.48 388.48 0 0 0-11.946666-0.213333c-178.090667 0-324.522667 122.026667-324.522667 277.546667 0 23.637333 3.413333 46.506667 9.728 68.266666h-3.797333a425.088 425.088 0 0 1-110.250667-15.701333c-3.157333-1.066667-6.314667-1.066667-9.472-1.066667a35.498667 35.498667 0 0 0-17.834667 5.248l-74.581333 42.88c-2.133333 1.066667-4.224 2.133333-6.314667 2.133334a11.648 11.648 0 0 1-11.52-11.52c0-3.157333 1.024-5.248 2.090667-8.405334 1.024-1.024 10.496-35.584 15.744-56.490666 0-2.133333 1.024-5.248 1.024-7.338667a23.722667 23.722667 0 0 0-9.429333-18.858667C87.808 570.709333 42.666667 494.336 42.666667 409.514667 42.666667 253.653333 194.986667 128 381.866667 128c160.64 0 295.68 92.544 329.514666 217.514667z m-219.904 17.834667c24.448 0 43.776-20.352 43.776-43.776 0-24.448-19.328-43.776-43.776-43.776s-43.776 19.328-43.776 43.776 19.328 43.776 43.776 43.776z m-224.426666 0c24.448 0 43.818667-20.352 43.818666-43.776 0-24.448-19.370667-43.776-43.818666-43.776-24.405333 0-43.776 19.328-43.776 43.776s19.370667 43.776 43.776 43.776z" p-id="3231" fill="#8992c8"></path></svg>
\ No newline at end of file

Web/028-i_love_you/img/web.svg

+<svg t="1630932355800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7888" width="200" height="200"><path d="M256 405.333333c0 98.133333 85.333333 213.333333 256 345.6 170.666667-132.266667 256-247.466667 256-345.6C768 345.6 721.066667 298.666667 661.333333 298.666667S554.666667 345.6 554.666667 405.333333h-85.333334C469.333333 345.6 422.4 298.666667 362.666667 298.666667S256 345.6 256 405.333333z m-85.333333 0C170.666667 298.666667 256 213.333333 362.666667 213.333333c59.733333 0 115.2 29.866667 149.333333 72.533334 34.133333-42.666667 89.6-72.533333 149.333333-72.533334C768 213.333333 853.333333 298.666667 853.333333 405.333333c0 140.8-115.2 290.133333-341.333333 448-226.133333-157.866667-341.333333-307.2-341.333333-448z" fill="#8992c8" p-id="7889"></path></svg>
\ No newline at end of file

Web/028-i_love_you/img/zfb.svg

+<svg t="1630925851241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2820" width="200" height="200"><path d="M785.408 716.373333c-92.714667-40.533333-158.72-70.229333-197.973333-89.002666-59.733333 72.362667-122.538667 116.053333-216.746667 116.053333S213.333333 685.397333 220.842667 614.058667c5.12-46.762667 37.205333-123.221333 176.128-109.909334 73.386667 6.826667 106.837333 20.48 166.912 40.277334 15.36-28.330667 28.330667-59.733333 37.888-92.842667H336.213333v-26.282667h131.072V378.197333H307.2v-29.013333h160.085333V281.258667s1.365333-10.581333 13.312-10.581334H546.133333v78.848h170.666667v29.013334h-170.666667v47.104h139.264a529.493333 529.493333 0 0 1-56.32 141.653333c21.76 7.765333 89.472 28.842667 203.093334 63.274667a341.333333 341.333333 0 1 0-46.762667 85.845333zM512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m-152.234667-240.298667c61.44 0 120.490667-37.205333 168.96-100.352-68.608-33.109333-125.610667-49.493333-189.44-49.493333-55.637333 0-84.650667 34.133333-89.770666 60.416-5.12 26.282667 10.581333 89.429333 110.250666 89.429333z" p-id="2821" fill="#8992c8"></path></svg>
\ No newline at end of file

Web/028-i_love_you/img/zuobiao.svg

+<svg t="1630925210688" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1800" width="200" height="200"><path d="M848.85 289.71a365.08 365.08 0 1 0-583.61 410.52L490.8 948.47a30 30 0 0 0 22.2 9.82h0.08a30 30 0 0 0 22.23-9.94l216.61-241a365.34 365.34 0 0 0 96.93-417.61zM512.54 581.79c-82.71 0-150-67.29-150-150s67.29-150 150-150 150 67.29 150 150-67.29 150-150 150z" p-id="1801" fill="#8992c8"></path></svg>
\ No newline at end of file

Web/028-i_love_you/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=100%, initial-scale=1">
+  <title>小孙同学</title>
+  <!--字体图标样式-->
+  <link rel="stylesheet" href="css/solid.css">
+  <link rel="stylesheet" href="css/fontawesome.css">
+  <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
+  <link rel="stylesheet" href="css/style.css">
+  <script src="js/jquery.min.js" defer=""></script>
+  <script src="js/index.js" defer=""></script>
+</head>
+
+<body>
+  <div id="content">
+    <div id="ti">
+      春风十里不如你！
+    </div>
+    <div id="hitokoto">
+      <script>
+        hitokoto()
+      </script>
+    </div>
+    <div class="custom">
+      <div class="box">
+        <font><span id="runtime_span"></span>
+          <script type="text/javascript">function show_runtime() {
+              window.setTimeout("show_runtime()", 1000); X = new
+                Date("@02/25/2001 12:22:00");
+              Y = new Date(); T = (Y.getTime() - X.getTime()); M = 24 * 60 * 60 * 1000;
+              a = T / M; A = Math.floor(a); b = (a - A) * 24; B = Math.floor(b); c = (b - B) * 60; C = Math.floor((b - B) * 60); D = Math.floor((c - C) * 60);
+              runtime_span.innerHTML = "我们已经相爱了: " + A + "天" + B + "小时" + C + "分" + D + "秒"
+            } show_runtime();</script>
+          <span id="span_dt"></span>
+        </font>
+      </div>
+    </div>
+    <div class="box-box">
+      <div class="box-top">
+        <a href="http://wpa.qq.com/msgrd?v=3&uin=2516943693&site=qq&menu=yes" target="_blank">
+          <font class="qq"><i></i></font>
+        </a>
+        <a href="https://github.com/sun0225SUN" target="_blank">
+          <font class="github"><i></i></font>
+        </a>
+        <a href="https://gitee.com/sun0225/photos/raw/master/img/202201112153280.jpg" target="_blank">
+          <font class="vx"><i></i></font>
+        </a>
+      </div>
+      <div class="box">
+        ❤️ Love you three thousand times ❤️</div>
+    </div>
+    <div class="main">
+      <div class="main-1">
+        <div class="box">
+          <img class="img" src="img/boy.jpg">
+          <div class="boxbox">
+            <center>
+              <font class="admin"><i></i>小孙同学</font>
+            </center>
+          </div>
+        </div>
+      </div>
+      <div class="main-2">
+        <div class="box ju">
+          <h4>
+            <font class="zuobiao"><i></i>中国 · 安徽</font>
+            <div>CHINA ANHUI</div>
+          </h4>
+        </div>
+        <div class="box">
+          <font class="newweb"><i></i>愿出一家之言，以结两姓之好!<i></i>
+          </font>
+        </div>
+        <div class="box ">你好，能不能借一生说话🎉
+        </div>
+      </div>
+    </div>
+    <div class="foot">
+      <font><a href="./wa/index.html" target="_blank"><i></i>秘密</a></font>
+      <!-- <font><a href="./xc/index.html" target="_blank"><i></i>相册</a></font>
+      <font><a href="./jl/demo.html" target="_blank"><i></i>纪录</a></font> -->
+
+      <font><a href="https://sunguoqi.com/about/" target="_blank"><i></i>关于我</a></font>
+      <font><a href="https://sunguoqi.com/comments/" target="_blank"><i></i>留言板</a></font>
+    </div>
+    <div class="main">
+      <div class="main-1">
+        <div class="box">
+          <img class="img" src="img/girl.jpg">
+          <div class="boxbox">
+            <center>
+              <font class="admin"><i></i>小爱同学</font>
+            </center>
+          </div>
+        </div>
+      </div>
+      <div class="main-2">
+        <div class="box ju">
+          <h4>
+            <font class="zuobiao"><i></i>中国 · 未知</font>
+            <div>CHINA WEIZHI</div>
+          </h4>
+        </div>
+        <div class="box">
+          <font class="newweb"><i></i>但愿我和你，是一支唱不完的歌。<i></i>
+          </font>
+        </div>
+        <div class="box">遇见你是所有故事的开始🎉</div>
+      </div>
+    </div>
+
+    <div class="footer">
+
+      <a href="https://sunguoqi.com"><br><b>Copyright © 2022 By 小孙同学</b><br> </a>
+    </div>
+    <audio autoplay>
+      <source src="https://api.uomg.com/api/rand.music?sort=热歌榜" type="audio/mpeg">
+    </audio>
+</body>
+
+</html>
\ No newline at end of file

Web/028-i_love_you/jl/demo.html

+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>爱情纪录手册</title>
+
+<style>
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font: normal 16px/1.5 'Titillium Web', sans-serif;
+  background: linear-gradient(54deg, #9164ff, #8bfff4);
+  color: #3c3f64;
+  overflow-x: hidden;
+  padding-bottom: 50px;
+}
+
+.timeline ul li {
+  list-style-type: none;
+  position: relative;
+  width: 6px;
+  margin: 0 auto;
+  padding-top: 50px;
+  background: #fff;
+}
+.timeline ul li::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%) rotate(45deg);
+  width: 20px;
+  height: 20px;
+  z-index: 2;
+  background: #eee;
+}
+.timeline ul li div {
+  position: relative;
+  bottom: 0;
+  width: 400px;
+  padding: 20px;
+  background: #fff;
+  box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+}
+.timeline ul li div time {
+  position: absolute;
+  background: #f5af19;
+  width: 80px;
+  height: 30px;
+  top: -15px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  letter-spacing: 2px;
+}
+.timeline ul li div div {
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.timeline ul li div div p {
+  text-align: center;
+}
+.timeline ul li div .discovery {
+  margin-right: 10px;
+}
+.timeline ul li:nth-of-type(odd) > div {
+  left: 45px;
+}
+.timeline ul li:nth-of-type(even) > div {
+  left: -439px;
+}
+
+.timeline ul li div {
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.5s ease-in-out;
+}
+.timeline ul li:nth-of-type(odd) div {
+  transform: translate3d(100px, -10px, 0) rotate(10deg);
+}
+.timeline ul li:nth-of-type(even) div {
+  transform: translate3d(-100px, -10px, 0) rotate(10deg);
+}
+.timeline ul li.in-view div {
+  transform: none;
+  visibility: visible;
+  opacity: 1;
+}
+
+@media screen and (max-width: 900px) {
+  .timeline ul li div {
+    width: 250px;
+    flex-direction: column;
+  }
+  .timeline ul li div div {
+    width: 80%;
+    margin: 10px;
+  }
+  .timeline ul li:nth-of-type(even) > div {
+    left: -289px;
+  }
+}
+@media screen and (max-width: 600px) {
+  body {
+    background: #8bfff4;
+  }
+
+  .timeline ul li {
+    margin-left: 20px;
+  }
+  .timeline ul li div {
+    width: calc(100vw - 91px);
+  }
+  .timeline ul li:nth-of-type(even) > div {
+    left: 45px;
+  }
+}
+</style>
+</head>
+<body>
+<section class="timeline">
+    <ul>
+        <li>
+            <div>
+                <time>2020,8,28</time>
+                <div class="discovery">
+                    <h1>我们第一次相遇</h1>
+                    <p>
+                        Laws of motion
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Newton</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>2020,8,30</time>
+                <div class="discovery">
+                    <h1>我们在一起了</h1>
+                    <p>
+                        Law of electrosta
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Coulomb</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1827</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Law of Electric Resistance
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>G.S Ohm</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1831</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Electromagnetic Induction
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Michael Faraday</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1867</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Dynamite
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Alfred Nobel</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1895</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        X Rays
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Roentgen</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1897</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Electron
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>J.J.Thomson</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1898</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Radium
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Madam Curie</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1900</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Quantum Theory
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Max Plank</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1905</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Principle of Relativity
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Albert Einstein</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1905</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Photo electric effect
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Albert Einstein</span>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div>
+                <time>1942</time>
+                <div class="discovery">
+                    <h1>Discovery</h1>
+                    <p>
+                        Nuclear Reactor
+                    </p>
+                </div>
+                <div class="scientist">
+                    <h1>Scientist</h1>
+                    <span>Anrico Fermi</span>
+                </div>
+            </div>
+        </li>
+    </ul>
+</section>
+
+<script>
+var items = document.querySelectorAll(".timeline li");
+
+function isElementInViewport(el) {
+  var rect = el.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+function callbackFunc() {
+  for (var i = 0; i < items.length; i++) {
+    if (isElementInViewport(items[i])) {
+      if(!items[i].classList.contains("in-view")){
+        items[i].classList.add("in-view");
+      }
+    } else if(items[i].classList.contains("in-view")) {
+        items[i].classList.remove("in-view");
+    }
+  }
+}
+ 
+window.addEventListener("load", callbackFunc);
+window.addEventListener("scroll", callbackFunc);
+</script>
+
+</body>
+</html>

Web/028-i_love_you/js/index.js

+(function hitokoto() { var hitokoto = "我是0225号宇航员 守护未知星球的小行星"; var dom = document.querySelector('#hitokoto'); Array.isArray(dom) ? dom[0].innerText = hitokoto : dom.innerText = hitokoto; })()
+$(function () {
+    var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"), i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = ['Dawn', 'Me & You', 'Electro Boy', 'Home', 'Proxy (Original Mix)'], trackNames = ['Skylike - Dawn', 'Alex Skrindo - Me & You', 'Kaaze - Electro Boy', 'Jordan Schor - Home', 'Martin Garrix - Proxy'], albumArtworks = ['_1', '_2', '_3', '_4', '_5'], trackUrl = ['mp3/1.mp3', 'mp3/2.mp3', 'mp3/1.mp3', 'mp3/2.mp3', 'mp3/1.mp3'], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;
+
+    function playPause() {
+        setTimeout(function () {
+            if (audio.paused) {
+                playerTrack.addClass('active');
+                albumArt.addClass('active');
+                checkBuffering();
+                i.attr('class', 'fas fa-pause');
+                audio.play();
+            }
+            else {
+                playerTrack.removeClass('active');
+                albumArt.removeClass('active');
+                clearInterval(buffInterval);
+                albumArt.removeClass('buffering');
+                i.attr('class', 'fas fa-play');
+                audio.pause();
+            }
+        }, 300);
+    }
+
+
+    function showHover(event) {
+        seekBarPos = sArea.offset();
+        seekT = event.clientX - seekBarPos.left;
+        seekLoc = audio.duration * (seekT / sArea.outerWidth());
+
+        sHover.width(seekT);
+
+        cM = seekLoc / 60;
+
+        ctMinutes = Math.floor(cM);
+        ctSeconds = Math.floor(seekLoc - ctMinutes * 60);
+
+        if ((ctMinutes < 0) || (ctSeconds < 0))
+            return;
+
+        if ((ctMinutes < 0) || (ctSeconds < 0))
+            return;
+
+        if (ctMinutes < 10)
+            ctMinutes = '0' + ctMinutes;
+        if (ctSeconds < 10)
+            ctSeconds = '0' + ctSeconds;
+
+        if (isNaN(ctMinutes) || isNaN(ctSeconds))
+            insTime.text('--:--');
+        else
+            insTime.text(ctMinutes + ':' + ctSeconds);
+
+        insTime.css({ 'left': seekT, 'margin-left': '-21px' }).fadeIn(0);
+
+    }
+
+    function hideHover() {
+        sHover.width(0);
+        insTime.text('00:00').css({ 'left': '0px', 'margin-left': '0px' }).fadeOut(0);
+    }
+
+    function playFromClickedPos() {
+        audio.currentTime = seekLoc;
+        seekBar.width(seekT);
+        hideHover();
+    }
+
+    function updateCurrTime() {
+        nTime = new Date();
+        nTime = nTime.getTime();
+
+        if (!tFlag) {
+            tFlag = true;
+            trackTime.addClass('active');
+        }
+
+        curMinutes = Math.floor(audio.currentTime / 60);
+        curSeconds = Math.floor(audio.currentTime - curMinutes * 60);
+
+        durMinutes = Math.floor(audio.duration / 60);
+        durSeconds = Math.floor(audio.duration - durMinutes * 60);
+
+        playProgress = (audio.currentTime / audio.duration) * 100;
+
+        if (curMinutes < 10)
+            curMinutes = '0' + curMinutes;
+        if (curSeconds < 10)
+            curSeconds = '0' + curSeconds;
+
+        if (durMinutes < 10)
+            durMinutes = '0' + durMinutes;
+        if (durSeconds < 10)
+            durSeconds = '0' + durSeconds;
+
+        if (isNaN(curMinutes) || isNaN(curSeconds))
+            tProgress.text('00:00');
+        else
+            tProgress.text(curMinutes + ':' + curSeconds);
+
+        if (isNaN(durMinutes) || isNaN(durSeconds))
+            tTime.text('00:00');
+        else
+            tTime.text(durMinutes + ':' + durSeconds);
+
+        if (isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds))
+            trackTime.removeClass('active');
+        else
+            trackTime.addClass('active');
+
+
+        seekBar.width(playProgress + '%');
+
+        if (playProgress == 100) {
+            i.attr('class', 'fa fa-play');
+            seekBar.width(0);
+            tProgress.text('00:00');
+            albumArt.removeClass('buffering').removeClass('active');
+            clearInterval(buffInterval);
+        }
+    }
+
+    function checkBuffering() {
+        clearInterval(buffInterval);
+        buffInterval = setInterval(function () {
+            if ((nTime == 0) || (bTime - nTime) > 1000)
+                albumArt.addClass('buffering');
+            else
+                albumArt.removeClass('buffering');
+
+            bTime = new Date();
+            bTime = bTime.getTime();
+
+        }, 100);
+    }
+
+    function selectTrack(flag) {
+        if (flag == 0 || flag == 1)
+            ++currIndex;
+        else
+            --currIndex;
+
+        if ((currIndex > -1) && (currIndex < albumArtworks.length)) {
+            if (flag == 0)
+                i.attr('class', 'fa fa-play');
+            else {
+                albumArt.removeClass('buffering');
+                i.attr('class', 'fa fa-pause');
+            }
+
+            seekBar.width(0);
+            trackTime.removeClass('active');
+            tProgress.text('00:00');
+            tTime.text('00:00');
+
+            currAlbum = albums[currIndex];
+            currTrackName = trackNames[currIndex];
+            currArtwork = albumArtworks[currIndex];
+
+            audio.src = trackUrl[currIndex];
+
+            nTime = 0;
+            bTime = new Date();
+            bTime = bTime.getTime();
+
+            if (flag != 0) {
+                audio.play();
+                playerTrack.addClass('active');
+                albumArt.addClass('active');
+
+                clearInterval(buffInterval);
+                checkBuffering();
+            }
+
+            albumName.text(currAlbum);
+            trackName.text(currTrackName);
+            albumArt.find('img.active').removeClass('active');
+            $('#' + currArtwork).addClass('active');
+
+            bgArtworkUrl = $('#' + currArtwork).attr('src');
+
+            bgArtwork.css({ 'background-image': 'url(' + bgArtworkUrl + ')' });
+        }
+        else {
+            if (flag == 0 || flag == 1)
+                --currIndex;
+            else
+                ++currIndex;
+        }
+    }
+
+    function initPlayer() {
+        audio = new Audio();
+
+        selectTrack(0);
+
+        audio.loop = false;
+
+        playPauseButton.on('click', playPause);
+
+        sArea.mousemove(function (event) { showHover(event); });
+
+        sArea.mouseout(hideHover);
+
+        sArea.on('click', playFromClickedPos);
+
+        $(audio).on('timeupdate', updateCurrTime);
+
+        playPreviousTrackButton.on('click', function () { selectTrack(-1); });
+        playNextTrackButton.on('click', function () { selectTrack(1); });
+    }
+
+    initPlayer();
+});
\ No newline at end of file

Web/028-i_love_you/wa/index.html

+<!doctype html>
+<html>
+
+<head>
+    <meta http-equiv="refresh" content="17;url=./zhl-2.html">
+    <meta charset="utf-8">
+    <title>我爱你</title>
+    <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+            box-sizing: border-box;
+            color: inherit;
+        }
+
+        body {
+            background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
+            height: 100vh;
+        }
+
+        h1 {
+            font-size: 45vw;
+            text-align: center;
+            position: fixed;
+            width: 100vw;
+            z-index: 1;
+            color: #ffffff26;
+            text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+            font-family: "Montserrat", monospace;
+        }
+
+        div {
+            background: rgba(0, 0, 0, 0);
+            width: 70vw;
+            position: relative;
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+            margin: 0 auto;
+            padding: 30px 30px 10px;
+            box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
+            z-index: 3;
+        }
+
+        P {
+            font-family: "Share Tech Mono", monospace;
+            color: #f5f5f5;
+            margin: 0 0 20px;
+            font-size: 17px;
+            line-height: 1.2;
+        }
+
+        span {
+            color: #f0c674;
+        }
+
+        i {
+            color: #8abeb7;
+        }
+
+        div a {
+            text-decoration: none;
+        }
+
+        b {
+            color: #81a2be;
+        }
+
+        a.avatar {
+            position: fixed;
+            bottom: 15px;
+            right: -100px;
+            -webkit-animation: slide 0.5s 4.5s forwards;
+            animation: slide 0.5s 4.5s forwards;
+            display: block;
+            z-index: 4
+        }
+
+        a.avatar img {
+            border-radius: 100%;
+            width: 44px;
+            border: 2px solid white;
+        }
+
+        @-webkit-keyframes slide {
+            from {
+                right: -100px;
+                -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+                opacity: 0;
+            }
+
+            to {
+                right: 15px;
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+                opacity: 1;
+            }
+        }
+
+        @keyframes slide {
+            from {
+                right: -100px;
+                -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+                opacity: 0;
+            }
+
+            to {
+                right: 15px;
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <h1></h1>
+    <div>
+        <p> <span>[root@VM-0-9-centos ~]# </span>: "<i> cd /关于Ta的记忆/ </i>"</p>
+        <p> <span>[root@VM-0-9-centos ~]#</span>: "<i>加载成功</i>"</p>
+        <p> <span>[root@VM-0-9-centos ~]#</span>: <b>文件备份自动启用中...</span>: <a href="/">备份成功</a></p>
+        <p>
+            <span>[root@VM-0-9-centos ~]# </span>:"<i>文件碎片正在加载...</i>"
+        </p>
+        <p>
+            <span>[root@VM-0-9-centos ~]# </span>:"<i>加载成功 正在打开...</i>"
+        </p>
+    </div>
+
+
+    <script>
+        var str = document.getElementsByTagName('div')[0].innerHTML.toString();
+        var i = 0;
+        document.getElementsByTagName('div')[0].innerHTML = "";
+
+        setTimeout(function () {
+            var se = setInterval(function () {
+                i++;
+                document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
+                if (i == str.length) {
+                    clearInterval(se);
+                    document.getElementsByTagName('div')[0].innerHTML = str;
+                }
+            }, 30);
+        }, 0);
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file

Web/028-i_love_you/wa/static/css/zhl.css

+* {
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    font: 16px/1.4 'Lato', sans-serif;
+    color: #fefeff;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+body {
+    background: rgb(8,5,16);
+    overflow: hidden;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+h1 {
+    font: 2.75em 'Cinzel', serif;
+    font-weight: 400;
+    letter-spacing: 0.35em;
+    text-shadow: 0 0 25px rgba(254,254,255,0.85);
+}
+
+h2 {
+    font: 1.45em 'Cinzel', serif;
+    font-weight: 400;
+    letter-spacing: 0.5em;
+    text-shadow: 0 0 25px rgba(254,254,255,0.85);
+    text-transform: lowercase;
+}
+
+[class^="letter"] {
+    -webkit-transition: opacity 3s ease;
+    -moz-transition: opacity 3s ease;
+    transition: opacity 3s ease;
+}
+
+.letter-0 {
+    transition-delay: 0.2s;
+}
+
+.letter-1 {
+    transition-delay: 0.4s;
+}
+
+.letter-2 {
+    transition-delay: 0.6s;
+}
+
+.letter-3 {
+    transition-delay: 0.8s;
+}
+
+.letter-4 {
+    transition-delay: 1.0s;
+}
+
+.letter-5 {
+    transition-delay: 1.2s;
+}
+
+.letter-6 {
+    transition-delay: 1.4s;
+}
+
+.letter-7 {
+    transition-delay: 1.6s;
+}
+
+.letter-8 {
+    transition-delay: 1.8s;
+}
+
+.letter-9 {
+    transition-delay: 2.0s;
+}
+
+.letter-10 {
+    transition-delay: 2.2s;
+}
+
+.letter-11 {
+    transition-delay: 2.4s;
+}
+
+.letter-12 {
+    transition-delay: 2.6s;
+}
+
+.letter-13 {
+    transition-delay: 2.8s;
+}
+
+.letter-14 {
+    transition-delay: 3.0s;
+}
+
+h1, h2 {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+    h1.transition-in,
+    h2.transition-in {
+        visibility: visible;
+    }
+
+    h1 [class^="letter"],
+    h2 [class^="letter"] {
+        opacity: 0;
+    }
+
+    h1.transition-in [class^="letter"],
+    h2.transition-in [class^="letter"] {
+        opacity: 1;
+    }
+
+#hovertreecontainer {
+    display: table;
+    position: absolute;
+    z-index: 20;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    cursor: none;
+    left: 15px;
+}
+
+    #hovertreecontainer > div {
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    #hovertreecontainer p {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 25px;
+        font-size: 0.8em;
+        letter-spacing: 0.1em;
+        font-weight: 300;
+        color: #76747a;
+        -webkit-font-smoothing: subpixel-antialiased;
+        font-smoothing: subpixel-antialiased;
+    }
+
+        #hovertreecontainer p strong {
+            color: #b3abc5;
+            font-size: 5em;
+        }
+
+        #hovertreecontainer p span {
+            font-size: 0.75em;
+            padding: 0 2px;
+        }
+
+#canvas {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: none;
+}
+
+#stats {
+    position: absolute;
+    z-index: 10;
+    left: 10px;
+    top: 10px;
+}
+
+.dg.ac {
+    z-index: 100 !important;
+}
+
+#hovertreecontainer div p strong a {
+    color: #999;
+    font-size: 0.5em;
+}
+
+body, td, th {
+    font-family: Lato, sans-serif;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:visited {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a:active {
+    text-decoration: none;
+}
\ No newline at end of file

Web/028-i_love_you/wa/static/js/zhl.js

+var Stats = function () { var e = Date.now(), t = e, i = 0, n = 1 / 0, r = 0, s = 0, o = 1 / 0, a = 0, l = 0, h = 0, c = document.createElement("div"); c.id = "stats", c.addEventListener("mousedown", function (e) { e.preventDefault(), v(++h % 2) }, !1), c.style.cssText = "width:80px;opacity:0.9;cursor:pointer"; var u = document.createElement("div"); u.id = "fps", u.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", c.appendChild(u); var d = document.createElement("div"); d.id = "fpsText", d.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", d.innerHTML = "FPS", u.appendChild(d); var p = document.createElement("div"); for (p.id = "fpsGraph", p.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff", u.appendChild(p) ; 74 > p.children.length;) { var f = document.createElement("span"); f.style.cssText = "width:1px;height:30px;float:left;background-color:#113", p.appendChild(f) } var m = document.createElement("div"); m.id = "ms", m.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none", c.appendChild(m); var g = document.createElement("div"); g.id = "msText", g.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", g.innerHTML = "MS", m.appendChild(g); var y = document.createElement("div"); for (y.id = "msGraph", y.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0", m.appendChild(y) ; 74 > y.children.length;) { var f = document.createElement("span"); f.style.cssText = "width:1px;height:30px;float:left;background-color:#131", y.appendChild(f) } var v = function (e) { switch (h = e) { case 0: u.style.display = "block", m.style.display = "none"; break; case 1: u.style.display = "none", m.style.display = "block" } }, b = function (e, t) { var i = e.appendChild(e.firstChild); i.style.height = t + "px" }; return { REVISION: 11, domElement: c, setMode: v, begin: function () { e = Date.now() }, end: function () { var h = Date.now(); return i = h - e, n = Math.min(n, i), r = Math.max(r, i), g.textContent = i + " MS (" + n + "-" + r + ")", b(y, Math.min(30, 30 - 30 * (i / 200))), l++, h > t + 1e3 && (s = Math.round(1e3 * l / (h - t)), o = Math.min(o, s), a = Math.max(a, s), d.textContent = s + " FPS (" + o + "-" + a + ")", b(p, Math.min(30, 30 - 30 * (s / 100))), t = h, l = 0), h }, update: function () { e = this.end() } } };
\ No newline at end of file

Web/028-i_love_you/wa/zhl-2.html

+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<title>我爱你</title>
+	<link href="static/css/zhl.css" type="text/css" rel="stylesheet" />
+	<link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
+</head>
+
+<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false"
+	onselectstart="event.returnValue=false">
+
+	<div id="hovertreecontainer">
+
+		<div>
+			<h1 id="h1">遇见你，真幸运 </h1>
+			<h2 id="h2"> 我想要的很简单：兜里有糖，肚里有墨，手里有活，卡里有钱，未来有你。</h2>
+			<p style="color:white;font-size:20px">往后，愿你余生，都是你</p>
+
+			<p>&nbsp;</p>
+			<p>&nbsp;</p>
+			<p>&nbsp;</p>
+			<p>&nbsp;</p>
+		</div>
+
+	</div>
+
+	<canvas id="canvas"></canvas>
+
+	<script type="text/javascript" src="static/js/zhl.js">
+	</script>
+	<script type="text/javascript">
+
+		; (function (window) {
+
+			var ctx,
+				hue,
+				logo,
+				form,
+				buffer,
+				target = {},
+				tendrils = [],
+				settings = {};
+
+			settings.debug = true;
+			settings.friction = 0.5;
+			settings.trails = 20;
+			settings.size = 50;
+			settings.dampening = 0.25;
+			settings.tension = 0.98;
+
+			Math.TWO_PI = Math.PI * 2;
+
+			function Oscillator(options) {
+				this.init(options || {});
+			}
+
+			Oscillator.prototype = (function () {
+
+				var value = 0;
+
+				return {
+
+					init: function (options) {
+						this.phase = options.phase || 0;
+						this.offset = options.offset || 0;
+						this.frequency = options.frequency || 0.001;
+						this.amplitude = options.amplitude || 1;
+					},
+
+					update: function () {
+						this.phase += this.frequency;
+						value = this.offset + Math.sin(this.phase) * this.amplitude;
+						return value;
+					},
+
+					value: function () {
+						return value;
+					}
+				};
+
+			})();
+
+			function Tendril(options) {
+				this.init(options || {});
+			}
+
+			Tendril.prototype = (function () {
+
+				function Node() {
+					this.x = 0;
+					this.y = 0;
+					this.vy = 0;
+					this.vx = 0;
+				}
+
+				return {
+
+					init: function (options) {
+
+						this.spring = options.spring + (Math.random() * 0.1) - 0.05;
+						this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
+						this.nodes = [];
+
+						for (var i = 0, node; i < settings.size; i++) {
+
+							node = new Node();
+							node.x = target.x;
+							node.y = target.y;
+
+							this.nodes.push(node);
+						}
+					},
+
+					update: function () {
+
+						var spring = this.spring,
+							node = this.nodes[0];
+
+						node.vx += (target.x - node.x) * spring;
+						node.vy += (target.y - node.y) * spring;
+
+						for (var prev, i = 0, n = this.nodes.length; i < n; i++) {
+
+							node = this.nodes[i];
+
+							if (i > 0) {
+
+								prev = this.nodes[i - 1];
+
+								node.vx += (prev.x - node.x) * spring;
+								node.vy += (prev.y - node.y) * spring;
+								node.vx += prev.vx * settings.dampening;
+								node.vy += prev.vy * settings.dampening;
+							}
+
+							node.vx *= this.friction;
+							node.vy *= this.friction;
+							node.x += node.vx;
+							node.y += node.vy;
+
+							spring *= settings.tension;
+						}
+					},
+
+					draw: function () {
+
+						var x = this.nodes[0].x,
+							y = this.nodes[0].y,
+							a, b;
+
+						ctx.beginPath();
+						ctx.moveTo(x, y);
+
+						for (var i = 1, n = this.nodes.length - 2; i < n; i++) {
+
+							a = this.nodes[i];
+							b = this.nodes[i + 1];
+							x = (a.x + b.x) * 0.5;
+							y = (a.y + b.y) * 0.5;
+
+							ctx.quadraticCurveTo(a.x, a.y, x, y);
+						}
+
+						a = this.nodes[i];
+						b = this.nodes[i + 1];
+
+						ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
+						ctx.stroke();
+						ctx.closePath();
+					}
+				};
+
+			})();
+
+
+			function init(event) {
+
+				document.removeEventListener('mousemove', init);
+				document.removeEventListener('touchstart', init);
+
+				document.addEventListener('mousemove', mousemove);
+				document.addEventListener('touchmove', mousemove);
+				document.addEventListener('touchstart', touchstart);
+
+				mousemove(event);
+				reset();
+				loop();
+			}
+
+			function reset() {
+
+				tendrils = [];
+
+				for (var i = 0; i < settings.trails; i++) {
+
+					tendrils.push(new Tendril({
+						spring: 0.45 + 0.025 * (i / settings.trails)
+					}));
+				}
+			}
+
+			function loop() {
+
+				if (!ctx.running) return;
+
+				ctx.globalCompositeOperation = 'source-over';
+				ctx.fillStyle = 'rgba(8,5,16,0.4)';
+				ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+				ctx.globalCompositeOperation = 'lighter';
+				ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
+				ctx.lineWidth = 1;
+
+				if (ctx.frame % 60 == 0) {
+					console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
+				}
+
+				for (var i = 0, tendril; i < settings.trails; i++) {
+					tendril = tendrils[i];
+					tendril.update();
+					tendril.draw();
+				}
+
+				ctx.frame++;
+				ctx.stats.update();
+				requestAnimFrame(loop);
+			}
+
+			function resize() {
+				ctx.canvas.width = window.innerWidth;
+				ctx.canvas.height = window.innerHeight;
+			}
+
+			function start() {
+				if (!ctx.running) {
+					ctx.running = true;
+					loop();
+				}
+			}
+
+			function stop() {
+				ctx.running = false;
+			}
+
+			function mousemove(event) {
+				if (event.touches) {
+					target.x = event.touches[0].pageX;
+					target.y = event.touches[0].pageY;
+				} else {
+					target.x = event.clientX
+					target.y = event.clientY;
+				}
+				event.preventDefault();
+			}
+
+			function touchstart(event) {
+				if (event.touches.length == 1) {
+					target.x = event.touches[0].pageX;
+					target.y = event.touches[0].pageY;
+				}
+			}
+
+			function keyup(event) {
+
+				switch (event.keyCode) {
+					case 32:
+						save();
+						break;
+					default:
+
+				}
+			}
+
+			function letters(id) {
+
+				var el = document.getElementById(id),
+					letters = el.innerHTML.replace('&amp;', '&').split(''),
+					heading = '';
+
+				for (var i = 0, n = letters.length, letter; i < n; i++) {
+					letter = letters[i].replace('&', '&amp');
+					heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : '&nbsp;';
+				}
+
+				el.innerHTML = heading;
+				setTimeout(function () {
+					el.className = 'transition-in';
+				}, (Math.random() * 500) + 500);
+			}
+
+			function save() {
+
+				if (!buffer) {
+
+					buffer = document.createElement('canvas');
+					buffer.width = screen.availWidth;
+					buffer.height = screen.availHeight;
+					buffer.ctx = buffer.getContext('2d');
+
+					form = document.createElement('form');
+					form.method = 'post';
+					form.input = document.createElement('input');
+					form.input.type = 'hidden';
+					form.input.name = 'data';
+					form.appendChild(form.input);
+
+					document.body.appendChild(form);
+				}
+
+				buffer.ctx.fillStyle = 'rgba(8,5,16)';
+				buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);
+
+				buffer.ctx.drawImage(canvas,
+					Math.round(buffer.width / 2 - canvas.width / 2),
+					Math.round(buffer.height / 2 - canvas.height / 2)
+				);
+
+				buffer.ctx.drawImage(logo,
+					Math.round(buffer.width / 2 - logo.width / 4),
+					Math.round(buffer.height / 2 - logo.height / 4),
+					logo.width / 2,
+					logo.height / 2
+				);
+
+				window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);
+
+			}
+
+			window.requestAnimFrame = (function () {
+				return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) };
+			})();
+
+			window.onload = function () {
+
+				ctx = document.getElementById('canvas').getContext('2d');
+				ctx.stats = new Stats();
+				ctx.running = true;
+				ctx.frame = 1;
+
+				logo = new Image();
+				logo.src = 'ht' + 'tp://ho' + 'vertree.c' + 'om/themes/hvtimages/hvtlogo.p' + 'ng';
+
+				hue = new Oscillator({
+					phase: Math.random() * Math.TWO_PI,
+					amplitude: 85,
+					frequency: 0.0015,
+					offset: 285
+				});
+
+				letters('h1');
+				letters('h2');
+
+				document.addEventListener('mousemove', init);
+				document.addEventListener('touchstart', init);
+				document.body.addEventListener('orientationchange', resize);
+				window.addEventListener('resize', resize);
+				window.addEventListener('keyup', keyup);
+				window.addEventListener('focus', start);
+				window.addEventListener('blur', stop);
+
+				resize();
+
+				if (window.DEBUG) {
+
+					var gui = new dat.GUI();
+
+					settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
+					settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
+					settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
+					settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
+					settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);
+
+					document.body.appendChild(ctx.stats.domElement);
+				}
+			};
+
+		})(window);
+
+	</script>
+	<audio autoplay>
+		<source src="https://api.uomg.com/api/rand.music?sort=热歌榜" type="audio/mpeg">
+	</audio>
+</body>
+
+</html>
\ No newline at end of file

Web/028-i_love_you/xc/css/style.css

+body {
+  background: #222;
+  font-family: "Fira Sans", sans-serif;
+  padding-right: 2rem;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  overflow: hidden;
+  max-width: 1300px;
+  margin: auto;
+}
+.gallery__strip {
+  min-height: 100vh;
+}
+.gallery__strip__wrapper {
+  flex: 0 0 100%;
+  justify-content: flex-end;
+  background: #222;
+  border-right: 2px solid #333;
+  position: relative;
+}
+
+@media (min-width: 500px) {
+  .gallery__strip__wrapper {
+    flex: 0 0 50%;
+  }
+}
+@media (min-width: 950px) {
+  .gallery {
+    height: 100vh;
+  }
+  .gallery__strip.one {
+    animation: 60s move-it ease alternate infinite 5s;
+    transform: translateY(2%);
+  }
+  .gallery__strip.three {
+    animation: 70s move-it ease alternate infinite 6s;
+    transform: translateY(2%);
+  }
+  .gallery__strip.two {
+    animation: 58s move-it-2 ease alternate infinite 5s;
+    transform: translateY(-50%);
+  }
+  .gallery__strip.four {
+    animation: 65s move-it-2 ease alternate infinite 5.5s;
+    transform: translateY(-50%);
+  }
+  .gallery__strip:hover {
+    animation-play-state: paused;
+  }
+  .gallery__strip__wrapper {
+    flex: 0 0 25%;
+  }
+}
+.photo {
+  position: relative;
+  text-align: right;
+  padding-bottom: 3rem;
+}
+.photo__image img {
+  width: 90%;
+  transform: translateX(30%);
+  transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
+}
+.photo__name {
+  text-transform: uppercase;
+  font-size: 40px;
+  letter-spacing: 2px;
+  color: transparent;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: white;
+  margin-top: -25px;
+  transition: 0.4s ease-in-out 0.4s;
+  position: relative;
+  width: 100%;
+}
+.photo:hover .photo__image img {
+  transform: translateX(0%);
+}
+.photo:hover .photo__name {
+  color: #fff;
+}
+
+@keyframes move-it {
+  0%,
+ 90%,
+ 100% {
+    transform: translateY(2%);
+  }
+  45% {
+    transform: translateY(-50%);
+  }
+}
+@keyframes move-it-2 {
+  0%,
+ 90%,
+ 100% {
+    transform: translateY(-50%);
+  }
+  45% {
+    transform: translateY(5%);
+  }
+}
\ No newline at end of file

Web/028-i_love_you/xc/index.html

+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="UTF-8">
+<title>爱情纪录相册</title>
+
+<link href="https://fonts.googleapis.com/css?family=Fira+Sans:800&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+
+<div class="gallery">
+  <div class="gallery__strip__wrapper">
+    <div class="gallery__strip one">
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-kyoto.jpg"/></div>
+        <div class="photo__name">Kyoto</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-austria.jpg"/></div>
+        <div class="photo__name">Halstatt</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-peru.jpg"/></div>
+        <div class="photo__name">Peru</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-rio.jpg"/></div>
+        <div class="photo__name">Rio</div>
+      </div>
+    </div>
+  </div>
+  <div class="gallery__strip__wrapper">
+    <div class="gallery__strip two">
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-italy.jpg"/></div>
+        <div class="photo__name">Italy</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-osaka.jpg"/></div>
+        <div class="photo__name">Osaka</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-bali.jpg"/></div>
+        <div class="photo__name">Bali</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-paris2.jpg"/></div>
+        <div class="photo__name">Paris</div>
+      </div>
+    </div>
+  </div>
+  <div class="gallery__strip__wrapper">
+    <div class="gallery__strip three">
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-cusco.jpg"/></div>
+        <div class="photo__name">Cusco</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-rome.jpg"/></div>
+        <div class="photo__name">Rome</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-paris.jpg"/></div>
+        <div class="photo__name">Paris</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-bali2.jpg"/></div>
+        <div class="photo__name">Bali</div>
+      </div>
+    </div>
+  </div>
+  <div class="gallery__strip__wrapper">
+    <div class="gallery__strip four">
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-milan.jpg"/></div>
+        <div class="photo__name">Milan</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-budapest.jpg"/></div>
+        <div class="photo__name">Budapest</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-vienna.jpg"/></div>
+        <div class="photo__name">Vienna</div>
+      </div>
+      <div class="photo">
+        <div class="photo__image"><img src="img/gg-mexico.jpg"/></div>
+        <div class="photo__name">Mexico</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

Web/029-Valentines_Day/.gitignore

+/.idea
\ No newline at end of file

Web/029-Valentines_Day/CNAME

+love.cuiqingcai.com
\ No newline at end of file

Web/029-Valentines_Day/css/default.css

+body {
+    margin: 0;
+    padding: 0;
+    background: #fdc9d1;
+    font-size: 12px;
+    overflow: auto
+}
+
+#mainDiv {
+    width: 100%;
+    height: 100%
+}
+
+#loveHeart {
+    float: left;
+    width: 670px;
+    height: 620px;
+    position: relative;
+}
+
+#garden {
+    width: 100%;
+    height: 100%
+}
+
+#elapseClock {
+    text-align: right;
+    font-size: 18px;
+    margin-top: 10px;
+    margin-bottom: 10px
+}
+
+#words {
+    font-family: "sans-serif";
+    width: 500px;
+    font-size: 24px;
+    color: #666
+}
+
+#messages {
+    display: none
+}
+
+#elapseClock .digit {
+    font-family: "digit";
+    font-size: 36px
+}
+
+#loveu {
+    padding: 5px;
+    font-size: 22px;
+    margin-top: 80px;
+    margin-right: 120px;
+    text-align: right;
+    display: none
+}
+
+#loveu .signature {
+    margin-top: 10px;
+    font-size: 20px;
+}
+
+#clickSound {
+    display: none
+}
+
+#code {
+    float: left;
+    width: 440px;
+    margin-top: 60px !important;
+    height: 400px;
+    color: #333;
+    font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
+    font-size: 12px
+}
+
+#code .string {
+    color: #2a36ff
+}
+
+#code .keyword {
+    color: #7f0055;
+    font-weight: bold
+}
+
+#code .placeholder {
+    margin-left: 15px
+}
+
+#code .space {
+    margin-left: 7px
+}
+
+#code .comments {
+    color: #3f7f5f
+}
+
+#copyright {
+    margin-top: 40px;
+    text-align: center;
+    width: 100%;
+    color: #666
+}
+
+#errorMsg {
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
+    position: absolute;
+    top: 100px;
+    left: 0
+}
+
+#copyright a {
+    color: #666
+}

Web/029-Valentines_Day/index.html

+<!DOCTYPE HTML>
+<html>
+
+<head>
+	<meta name="title" content="小孙同学">
+	<meta name="github" content="https://github.com/sun0225SUN/Awesome-Love-Code">
+	<meta name="describe" content="收集不易，您的star是我坚持的动力，同时也欢迎各位PR哦! ">
+	<link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+	<style type="text/css">
+		@font-face {
+			font-family: digit;
+			src: url('digital.ttf') format("truetype");
+		}
+	</style>
+	<link href="css/default.css" type="text/css" rel="stylesheet">
+	<script type="text/javascript" src="js/jquery.js"></script>
+	<script type="text/javascript" src="js/garden.js"></script>
+	<script type="text/javascript" src="js/functions.js"></script>
+</head>
+
+<body>
+	<div id="mainDiv">
+		<div id="content">
+			<div id="code">
+				<span class="comments">##</span><br />
+				<span class="comments"># I am a programmer,</span><br />
+				<span class="comments"># so I write code to celebrate Valentine's Day in coder's way.</span><br />
+				<span class="comments">##</span><br />
+				i = Boy(<span class="string">"小孙同学"</span>);<br />
+				u = Girl(<span class="string">"小爱同学"</span>);<br />
+				<span class="comments"># 2 14, 2021, I meet you because of PyCon 2022. </span><br />
+				i.meet(u)<br />
+				<span class="comments"># Afterwards, I confessed to you. </span><br />
+				i.confess(u)<br />
+				<span class="comments"># 2 14, 2022, You became my girlfriend.</span><br />
+				u.accepted(i)<br />
+				<span class="comments"># Since then, we spent harmony happiness life every day.</span><br />
+				happy(u, i)<br />
+				<span class="comments"># We enjoy studying together.</span><br />
+				study(u, i)<br />
+				<span class="comments"># We enjoy cuisine together.</span><br />
+				dine(u, i)<br />
+				<span class="comments"># We enjoy appointment together.</span><br />
+				appoint(u, i)<br />
+				<span class="comments"># We enjoy vacation together.</span><br />
+				vacation(u, i)<br />
+				<span class="comments"># Sometimes there are a few conflicts between us.</span><br />
+				conflict(u, i, sometimes=<span class="keyword">True</span>)<br />
+				<span class="comments"># But we are getting more and more in harmony together.</span><br />
+				u.in_harmony_with(i) <br />
+				i.in_harmony_with(u) <br />
+				<span class="comments"># You are the greatest love of my life.</span><br />
+				while <span class="keyword">True</span>:<br />
+				<span class="placeholder"></span><span class="keyword">if</span> u.with(i):<br />
+				<span class="placeholder"></span><span class="placeholder"></span>u = everything<br />
+				<span class="placeholder"></span><span class="keyword">else</span>:<br />
+				<span class="placeholder"></span><span class="placeholder"></span>everything = u<br />
+				<span class="comments"># Waiting me marries you, we will be the happiest couple in the
+					world.</span><br />
+				i.marry(u, in_the_future=<span class="keyword">True</span>)<br />
+				i.live_happily_forever_with(u)<br />
+				<span class="comments"># I love you forever.</span><br />
+			</div>
+			<div id="loveHeart">
+				<canvas id="garden"></canvas>
+				<div id="words">
+					<div id="messages">
+						Qian, I have fallen in love with you for
+						<div id="elapseClock"></div>
+					</div>
+					<div id="loveu">
+						Love u forever and ever.<br />
+						<div class="signature"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="copyright">
+			Copyright © 2020 <a href='http://sunguoqi.com'>sunguoqi.com</a> 2021-2022
+		</div>
+	</div>
+	<script type="text/javascript">
+		var offsetX = $("#loveHeart").width() / 2;
+		var offsetY = $("#loveHeart").height() / 2 - 55;
+		var together = new Date();
+		// 此处月份介于 0 ~ 11 之间。用本地时间表示，如 8 月要用 7 表示。
+		together.setFullYear(2018, 10, 5);
+		together.setHours(15);
+		together.setMinutes(0);
+		together.setSeconds(0);
+		together.setMilliseconds(0);
+
+		if (!document.createElement('canvas').getContext) {
+			var msg = document.createElement("div");
+			msg.id = "errorMsg";
+			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
+			document.body.appendChild(msg);
+			$("#code").css("display", "none")
+			$("#copyright").css("position", "absolute");
+			$("#copyright").css("bottom", "10px");
+			document.execCommand("stop");
+		} else {
+			setTimeout(function () {
+				startHeartAnimation();
+			}, 5000);
+
+			timeElapse(together);
+			setInterval(function () {
+				timeElapse(together);
+			}, 500);
+
+			adjustCodePosition();
+			$("#code").typewriter();
+		}
+	</script>
+</body>
+
+</html>
\ No newline at end of file

Web/029-Valentines_Day/js/functions.js

+var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;
+var clientWidth = $(window).width();
+var clientHeight = $(window).height();
+$(function () {
+	$loveHeart = $("#loveHeart");
+	var a = $loveHeart.width() / 2;
+	var b = $loveHeart.height() / 2 - 55;
+	$garden = $("#garden");
+	gardenCanvas = $garden[0];
+	gardenCanvas.width = $("#loveHeart").width();
+	gardenCanvas.height = $("#loveHeart").height();
+	gardenCtx = gardenCanvas.getContext("2d");
+	gardenCtx.globalCompositeOperation = "lighter";
+	garden = new Garden(gardenCtx, gardenCanvas);
+	$("#content").css("width", $loveHeart.width() + $("#code").width());
+	$("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));
+	$("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2 - 50, 10));
+	$("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));
+	setInterval(function () {
+		garden.render()
+	}, Garden.options.growSpeed)
+});
+$(window).resize(function () {
+	var b = $(window).width();
+	var a = $(window).height();
+	if (b != clientWidth && a != clientHeight) {
+		location.replace(location)
+	}
+});
+
+function getHeartPoint(c) {
+	var b = c / Math.PI;
+	var a = 19.5 * (16 * Math.pow(Math.sin(b), 3));
+	var d = -20 * (13 * Math.cos(b) - 5 * Math.cos(2 * b) - 2 * Math.cos(3 * b) - Math.cos(4 * b));
+	return new Array(offsetX + a, offsetY + d)
+}
+
+function startHeartAnimation() {
+	var c = 50;
+	var d = 10;
+	var b = new Array();
+	var a = setInterval(function () {
+		var h = getHeartPoint(d);
+		var e = true;
+		for (var f = 0; f < b.length; f++) {
+			var g = b[f];
+			var j = Math.sqrt(Math.pow(g[0] - h[0], 2) + Math.pow(g[1] - h[1], 2));
+			if (j < Garden.options.bloomRadius.max * 1.3) {
+				e = false;
+				break
+			}
+		}
+		if (e) {
+			b.push(h);
+			garden.createRandomBloom(h[0], h[1])
+		}
+		if (d >= 30) {
+			clearInterval(a);
+			showMessages()
+		} else {
+			d += 0.2
+		}
+	}, c)
+}
+
+(function (a) {
+	a.fn.typewriter = function () {
+		this.each(function () {
+			var d = a(this), c = d.html(), b = 0;
+			d.html("");
+			var e = setInterval(function () {
+				var f = c.substr(b, 1);
+				if (f == "<") {
+					b = c.indexOf(">", b) + 1
+				} else {
+					b++
+				}
+				d.html(c.substring(0, b) + (b & 1 ? "_" : ""));
+				if (b >= c.length) {
+					clearInterval(e)
+				}
+			}, 75)
+		});
+		return this
+	}
+})(jQuery);
+
+function timeElapse(c) {
+	var e = Date();
+	var f = (Date.parse(e) - Date.parse(c)) / 1000;
+	var g = Math.floor(f / (3600 * 24));
+	f = f % (3600 * 24);
+	var b = Math.floor(f / 3600);
+	if (b < 10) {
+		b = "0" + b
+	}
+	f = f % 3600;
+	var d = Math.floor(f / 60);
+	if (d < 10) {
+		d = "0" + d
+	}
+	f = f % 60;
+	if (f < 10) {
+		f = "0" + f
+	}
+	var a = '<span class="digit">' + g + '</span> days <span class="digit">' + b + '</span> hours <span class="digit">' + d + '</span> minutes <span class="digit">' + f + "</span> seconds";
+	$("#elapseClock").html(a)
+}
+
+function showMessages() {
+	adjustWordsPosition();
+	$("#messages").fadeIn(5000, function () {
+		showLoveU()
+	})
+}
+
+function adjustWordsPosition() {
+	$("#words").css("position", "absolute");
+	$("#words").css("top", $("#garden").position().top + 195);
+	$("#words").css("left", $("#garden").position().left + 70)
+}
+
+function adjustCodePosition() {
+	$("#code").css("margin-top", ($("#garden").height() - $("#code").height()) / 2)
+}
+
+function showLoveU() {
+	$("#loveu").fadeIn(3000)
+};
\ No newline at end of file

Web/029-Valentines_Day/js/garden.js

+function Vector(a, b) {
+	this.x = a;
+	this.y = b
+}
+
+Vector.prototype = {
+	rotate: function (b) {
+		var a = this.x;
+		var c = this.y;
+		this.x = Math.cos(b) * a - Math.sin(b) * c;
+		this.y = Math.sin(b) * a + Math.cos(b) * c;
+		return this
+	}, mult: function (a) {
+		this.x *= a;
+		this.y *= a;
+		return this
+	}, clone: function () {
+		return new Vector(this.x, this.y)
+	}, length: function () {
+		return Math.sqrt(this.x * this.x + this.y * this.y)
+	}, subtract: function (a) {
+		this.x -= a.x;
+		this.y -= a.y;
+		return this
+	}, set: function (a, b) {
+		this.x = a;
+		this.y = b;
+		return this
+	}
+};
+
+function Petal(a, f, b, e, c, d) {
+	this.stretchA = a;
+	this.stretchB = f;
+	this.startAngle = b;
+	this.angle = e;
+	this.bloom = d;
+	this.growFactor = c;
+	this.r = 1;
+	this.isfinished = false
+}
+
+Petal.prototype = {
+	draw: function () {
+		var a = this.bloom.garden.ctx;
+		var e, d, c, b;
+		e = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle));
+		d = e.clone().rotate(Garden.degrad(this.angle));
+		c = e.clone().mult(this.stretchA);
+		b = d.clone().mult(this.stretchB);
+		a.strokeStyle = this.bloom.c;
+		a.beginPath();
+		a.moveTo(e.x, e.y);
+		a.bezierCurveTo(c.x, c.y, b.x, b.y, d.x, d.y);
+		a.stroke()
+	}, render: function () {
+		if (this.r <= this.bloom.r) {
+			this.r += this.growFactor;
+			this.draw()
+		} else {
+			this.isfinished = true
+		}
+	}
+};
+
+function Bloom(e, d, f, a, b) {
+	this.p = e;
+	this.r = d;
+	this.c = f;
+	this.pc = a;
+	this.petals = [];
+	this.garden = b;
+	this.init();
+	this.garden.addBloom(this)
+}
+
+Bloom.prototype = {
+	draw: function () {
+		var c, b = true;
+		this.garden.ctx.save();
+		this.garden.ctx.translate(this.p.x, this.p.y);
+		for (var a = 0; a < this.petals.length; a++) {
+			c = this.petals[a];
+			c.render();
+			b *= c.isfinished
+		}
+		this.garden.ctx.restore();
+		if (b == true) {
+			this.garden.removeBloom(this)
+		}
+	}, init: function () {
+		var c = 360 / this.pc;
+		var b = Garden.randomInt(0, 90);
+		for (var a = 0; a < this.pc; a++) {
+			this.petals.push(new Petal(Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), b + a * c, c, Garden.random(Garden.options.growFactor.min, Garden.options.growFactor.max), this))
+		}
+	}
+};
+
+function Garden(a, b) {
+	this.blooms = [];
+	this.element = b;
+	this.ctx = a
+}
+
+Garden.prototype = {
+	render: function () {
+		for (var a = 0; a < this.blooms.length; a++) {
+			this.blooms[a].draw()
+		}
+	}, addBloom: function (a) {
+		this.blooms.push(a)
+	}, removeBloom: function (a) {
+		var d;
+		for (var c = 0; c < this.blooms.length; c++) {
+			d = this.blooms[c];
+			if (d === a) {
+				this.blooms.splice(c, 1);
+				return this
+			}
+		}
+	}, createRandomBloom: function (a, b) {
+		this.createBloom(a, b, Garden.randomInt(Garden.options.bloomRadius.min, Garden.options.bloomRadius.max), Garden.randomrgba(Garden.options.color.rmin, Garden.options.color.rmax, Garden.options.color.gmin, Garden.options.color.gmax, Garden.options.color.bmin, Garden.options.color.bmax, Garden.options.color.opacity), Garden.randomInt(Garden.options.petalCount.min, Garden.options.petalCount.max))
+	}, createBloom: function (a, f, d, e, b) {
+		new Bloom(new Vector(a, f), d, e, b, this)
+	}, clear: function () {
+		this.blooms = [];
+		this.ctx.clearRect(0, 0, this.element.width, this.element.height)
+	}
+};
+Garden.options = {
+	petalCount: {min: 8, max: 15},
+	petalStretch: {min: 0.1, max: 3},
+	growFactor: {min: 0.1, max: 1},
+	bloomRadius: {min: 8, max: 10},
+	density: 10,
+	growSpeed: 1000 / 60,
+	color: {rmin: 128, rmax: 255, gmin: 0, gmax: 128, bmin: 0, bmax: 128, opacity: 0.1},
+	tanAngle: 60
+};
+Garden.random = function (b, a) {
+	return Math.random() * (a - b) + b
+};
+Garden.randomInt = function (b, a) {
+	return Math.floor(Math.random() * (a - b + 1)) + b
+};
+Garden.circle = 2 * Math.PI;
+Garden.degrad = function (a) {
+	return Garden.circle / 360 * a
+};
+Garden.raddeg = function (a) {
+	return a / Garden.circle * 360
+};
+Garden.rgba = function (f, e, c, d) {
+	return "rgba(" + f + "," + e + "," + c + "," + d + ")"
+};
+Garden.randomrgba = function (i, n, h, m, l, d, k) {
+	var c = Math.round(Garden.random(i, n));
+	var f = Math.round(Garden.random(h, m));
+	var j = Math.round(Garden.random(l, d));
+	var e = 5;
+	if (Math.abs(c - f) <= e && Math.abs(f - j) <= e && Math.abs(j - c) <= e) {
+		return Garden.rgba(i, n, h, m, l, d, k)
+	} else {
+		return Garden.rgba(c, f, j, k)
+	}
+};
\ No newline at end of file

Web/030-miss_you/debug.log

+[0816/172055.892:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/172055.892:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/172055.892:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/172124.063:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/172124.063:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/172124.063:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/173104.953:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/173104.957:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/173104.961:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/174334.077:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/174334.077:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/174334.077:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/175057.450:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/175057.450:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/175057.450:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/214921.130:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/214921.147:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/214921.150:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/223430.354:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/223430.361:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/223430.364:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/223553.786:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/223553.788:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/223553.788:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/225419.258:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/225419.258:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/225419.258:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/225951.768:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/225951.768:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/225951.784:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/230328.773:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/230328.778:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/230328.781:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/233101.412:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/233101.422:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/233101.422:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/233742.046:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/233742.052:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/233742.055:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234035.256:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234035.272:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/234035.272:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234048.826:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234048.826:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/234048.841:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234349.344:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234349.349:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/234349.351:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234636.244:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/234636.249:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/234636.252:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/235258.017:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/235258.017:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/235258.017:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/235627.832:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0816/235627.837:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0816/235627.840:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/000644.258:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/000644.263:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0817/000644.266:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/000651.286:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/000651.290:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0817/000651.292:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/000841.173:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/000841.179:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0817/000841.182:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/001624.259:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/001624.263:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0817/001624.266:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/001704.523:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/001704.527:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0817/001704.529:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/002648.440:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)
+[0817/002648.444:ERROR:registration_protocol_win.cc(84)] TransactNamedPipe: 管道已?束。 (0x6D)
+[0817/002648.447:ERROR:file_io_win.cc(179)] CreateFile C:\Users\asus\AppData\Local\Google\Chrome\User Data\Crashpad\settings.dat: 拒???。 (0x5)

Web/030-miss_you/index.html

+<!doctype html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="title" content="小孙同学">
+  <meta name="github" content="https://github.com/sun0225SUN/Awesome-Love-Code">
+  <meta name="describe" content="收集不易，您的star是我坚持的动力，同时也欢迎各位PR哦! ">
+  <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
+
+  <!-- build:css styles/main.css -->
+  <link rel="stylesheet" href="styles/main.css">
+  <!-- endbuild -->
+
+</head>
+
+<body>
+  <div class="container">
+    <div class="content">
+      <canvas id="universe"></canvas>
+      <canvas id="canvas"></canvas>
+      <iframe src="audio/[No Copyright Music] Unconditionally - Broken Elegance.mp3" allow="autoplay"
+        style="display:none" id="iframeAudio"></iframe>
+      <audio autoplay loop>
+        <source src="audio/[No Copyright Music] Unconditionally - Broken Elegance.mp3" type="audio/mpeg">
+      </audio>
+      <div id="footer" class="">
+        <svg id="scene" x="0%" y="0%" width="300%" height="100%">
+          <path id="ground" d="M0,316.4209c0,0,157.7119-35.416,469-56c7.3833-0.4883,23.7876-3.5488,31.3335-4.0166
+            c3.7681-0.2334,19.4302,0.9424,28.3335,0.3506c17.1494-1.1396,30.9072-4.2734,38.333-4.6836
+            c7.5972-0.4189,18.4058,0.3799,27.6665-0.9834c5.7075-0.8408,10.1318-4.042,14.9248-4.2705
+            c7.8369-0.373,24.5693,3.6084,34.4087,4.2705c11.0586,0.7432,15.2656-1.8135,24.3335-2.1523c10.0576-0.376,20.4629,1.3867,28.6665,0
+            c3.5957-0.6074,4.4194,0.4209,7.7227-0.7715c1.4927-0.5391,5.8179-3.5693,6.9438-4.2432c3.8335,0.667,6.1426-1.0732,9.917-1.167
+            c2.2739-0.0566,3.9673-0.9072,6.249-0.9609c2.2725-0.0537,5.5547-1.2383,7.8345-1.2881c2.25-0.0498,3.498,1.0352,5.7554,0.9883
+            c2.9648-0.0615,7.9341,0.3164,10.9111,0.2607c2.2461-0.042,2.4976-0.5195,4.7505-0.5586c2.9663-0.0518,2.1045-0.5615,5.0825-0.6074
+            c1.5811-0.0244,6.9976,0.4131,8.582,0.3896c0.8887-0.0127,2.6113,0.373,3.5015,0.3604c1.5527-0.0215,2.2739-0.4404,3.8296-0.4609
+            c1.416-0.0186,2.0854-0.8555,3.5039-0.873c1.0835-0.0127,2.9155,0.7939,4.0005,0.7813c1.1104-0.0127,3.5542,0.4805,4.666,0.4688
+            c1.3047-0.0137,1.2773-0.5332,2.584-0.5459c1.415-0.0137,1.165-0.4414,2.5825-0.4541c0.916-0.0078,3.499,0.3984,4.416,0.3906
+            c1.499-0.0127,1.833,0.6221,3.3345,0.6104c1.3296-0.0098,3.8267-0.666,5.1587-0.6748c1.3335-0.0088,2.8389-0.6514,4.1743-0.6592
+            c1.3335-0.0078,2.4971,0.6191,3.8325,0.6123c2.5518-0.0127,7.3579,0.3965,9.9175,0.3877c5.3169-0.0176,5.5796-0.4063,10.9297-0.4063
+            c1.8379,0,6.7031,1.3184,8.3203,1.2402c2.1055-0.1016,3.7139-1.6572,5.5283-1.7969c3.9541-0.3037,7.3262-0.5732,10.5986-0.2598
+            c6.248,0.5977,12.1973-0.8125,21.207-0.7539c1.7266,0.0107,15.7813,3.085,17.5,3.0977c3.4014,0.0254,6.6191-1.3398,9.9971-1.3066
+            c4.1221,0.041,8.2275,1.2529,12.3369,1.3066c2.0752,0.0273,4.1543-1.1084,6.2314-1.0771c3.3662,0.0498,4.5547,1.0166,7.9346,1.0771
+            c2.1104,0.0381,6.4063-0.834,8.5264-0.792c2.7021,0.0537,4.4766-1.6729,7.2002-1.6113c2.9277,0.0654,7.6465,3.1641,10.6074,3.2393
+            c4.8359,0.123,8.8809-0.9854,13.832-0.8359c2.5029,0.0752,11.8818,2.0498,14.375,2.1289c1.8398,0.0586,2.499-1.2188,4.334-1.1582
+            c2.1689,0.0713,4.5049,1.209,6.666,1.2832c2.6699,0.0908,4.3398-0.916,6.998-0.8203c3.3379,0.1201,6.0566,1.3193,9.377,1.4453
+            c4.001,0.1514,4.7764-1.1602,8.75-1c3.1836,0.1289,16.834,1.9912,20,2.125c4.0059,0.1699,4.0029-0.9004,7.9814-0.7227
+            c6.8594,0.3076,7.9102,1.7656,14.6855,2.0977c8.916,0.4365,23.5254-0.2432,32.293,0.2344
+            c6.7168,0.3662,13.3896,0.7432,20.0186,1.1318C1458.8545,268.4941,1680,316.4209,1680,316.4209H0z" />
+          <path id="stone1" d="M680.3335,250.7549c7.3335,0.333,13.6665-1.2549,6-6.4609s-14.333-7.1221-18.6665,0.8359
+            S680.3335,250.7549,680.3335,250.7549z" />
+          <path id="stone2"
+            d="M750.5,243.1709c3.25,0,2.5-3.707-1.75-4.2285s-5,3.7285-3,4.2285S750.5,243.1709,750.5,243.1709z" />
+          <path id="stone3" d="M988.4893,243.8242c2.8857,0.3467,4.8438,1.2627,3.0107-2.0703s-7.3955,1.3555-5.2031,1.7129
+            S988.4893,243.8242,988.4893,243.8242z" />
+          <path id="stone4"
+            d="M697,248.9355c2.0142-0.2021,2.1665-2.0156,1-2.1816s-9.1543,1.8398-5.9937,2.6699S697,248.9355,697,248.9355z" />
+          <g id="greens" transform="translate(850, 180)">
+            <g>
+              <path d="M36.3877,59.4268C33.0576,18.9482,6.4658,4.522,6.4658,4.522s22.4834,16.1426,24.4414,54.2251
+    C32.8657,96.8311,36.3877,59.4268,36.3877,59.4268z" />
+              <path d="M41.8496,83.1641C31.1572,43.98,2.3711,34.6738,2.3711,34.6738s25.063,11.7471,33.9668,48.8271
+    C45.2441,120.5791,41.8496,83.1641,41.8496,83.1641z" />
+              <path d="M31.3955,60.7207C23.7139,25.7979,2.5381,16.9541,2.5381,16.9541s18.4165,10.9277,24.7925,43.9502
+    C33.7061,93.9258,31.3955,60.7207,31.3955,60.7207z" />
+              <path d="M40.4517,62.0068C47.9473,21.6187,25.4009,0.1914,25.4009,0.1914s18.0098,21.9634,9.7896,59.6357
+    C26.9722,97.499,40.4517,62.0068,40.4517,62.0068z" />
+              <path d="M41.9414,69.4316c13.0313-38.9565-6.3218-63.3062-6.3218-63.3062s14.7856,24.251,1.4141,60.4185
+    C23.6621,102.709,41.9414,69.4316,41.9414,69.4316z" />
+              <path d="M29.4976,87.9092c27.4097-30.5938,19.2993-60.6226,19.2993-60.6226s3.958,28.1255-22.6606,56.0249
+    C-0.4775,111.2109,29.4976,87.9092,29.4976,87.9092z" />
+              <animateTransform attributeName="transform" type="skewX" values="0;10;0" begin="0s" dur="5.5s"
+                fill="freeze" repeatCount="indefinite" />
+              <animateMotion type="translate" values="0,0;-10,0;0,0" begin="0s" dur="5.5s" fill="freeze"
+                repeatCount="indefinite" />
+            </g>
+            <g>
+              <path d="M34.9995,60.4189C56.0713,30.6665,46.1133,5.4014,46.1133,5.4014S52.2559,29.4746,31.6235,56.79
+    C10.9917,84.1035,34.9995,60.4189,34.9995,60.4189z" />
+              <path d="M36.3047,64.5391c28.4629-23.4443,25.3262-51.189,25.3262-51.189s-0.293,25.4971-27.6851,46.6538
+    C6.5552,81.1631,36.3047,64.5391,36.3047,64.5391z" />
+              <path d="M33.0449,70.502c31.4424-19.2637,32.1875-47.1748,32.1875-47.1748s-3.8291,25.208-33.897,42.3584
+    C1.271,82.833,33.0449,70.502,33.0449,70.502z" />
+              <path d="M13.8237,76.0244c36.5039-5.2158,48.2563-30.543,48.2563-30.543S48.5693,67.1045,14.168,70.9248
+    C-20.2324,74.749,13.8237,76.0244,13.8237,76.0244z" />
+              <animateTransform attributeName="transform" type="skewX" values="0;15;0" begin="0s" dur="5s" fill="freeze"
+                repeatCount="indefinite" />
+              <animateMotion type="translate" values="0,0;-15,0;0,0" begin="0s" dur="5s" fill="freeze"
+                repeatCount="indefinite" />
+            </g>
+          </g>
+          <g id="sign" transform="translate(700, 180)">
+            <polygon points="21.2168,1.1143 20.6665,1.5459 19.7593,1.4473 19.229,1.4209 18.9707,1.6274 18.6665,1.9004 17.6865,1.9219
+    37.3516,87.8877 40.8828,87.0791   " />
+            <polygon points="45.4111,9.5537 2.4258,18.7158 1.563,18.498 1.4585,17.2114 0.8291,15.583 0.9165,14.3364 0.0908,12.6548
+    0.2085,12.0864 -0.1924,11.5308 -0.3296,9.271 43.3408,-0.0376 43.4766,0.5015 43.334,0.9629 43.6533,1.2046 43.8232,1.8784
+    43.8965,2.7754 44.2217,3.459 44.625,5.0576 45.041,7.5459 45.2637,7.5962 45.6191,9.0073  " />
+            <polygon points="47.0078,20.8545 4.2368,29.5503 3.5933,28.5903 3.3965,26.9746 2.4683,24.5137 2.8398,24.1372 2.2676,23.7847
+    1.9834,22.7563 2.2417,22.3394 1.7388,21.8706 1.2627,20.1426 44.8281,11.2852 45.082,12.4014 45.0723,12.9517 45.3281,13.481
+    45.752,15.3369 46.0273,17.7524 46.4219,18.2803  " />
+            <polygon points="47.666,31.168 4.7803,39.4023 4.251,37.4004 4.4429,36.1895 3.6465,35.1123 3.0142,32.7178 3.2754,32.1025
+    2.7461,31.7046 2.2676,29.8945 45.9268,21.5107 46.0762,22.2007 45.9512,22.8423 46.2783,23.1372 46.6777,24.9795 46.5234,25.4795
+    47.3027,27.8667 47.8086,30.2017   " />
+          </g>
+          <g id="boy_1_">
+            <g id="boy">
+              <path d="M800.7324,167.6929c0,0-7.9688-6.5039-9.7197-8.041c-1.751-1.5366-7.9331-6.5039-8.7197-13.0435
+    c-0.7861-6.5396,6.0752-15.188,17.7969-16.1885c11.7207-1.0005,12.9727,1.0366,14.1514,2.7163
+    c1.1787,1.6792,5.7178,11.1494,5.0752,18.6538c-0.6445,7.5049-5.6826,10.1133-9.7559,13.3652
+    C805.4863,168.4072,800.7324,167.6929,800.7324,167.6929z" />
+              <path
+                d="M810.7031,169.2109c-1.0723-1.3037-1.3574-2.9556-1.1426-4.0645c0.2139-1.1084-8.041,0.1128-8.8281,2.542
+    c1.6445,1.6787,0.751,3.146-0.5,4.1108c-1.25,0.9648-1.6797,1.502-1.9297,1.8237c0.0361,0.5361,0,0.9653,0,0.9653
+    s-1.4297,1.7153-2.2871,6.5396s-0.6787,6.79-0.9648,8.3267c-0.2852,1.5366-1.4648,5.9678-1.751,10.292s0,4.5742,0,4.5742
+    s1.251,1.7153,1.1436,4.0742s-1.2705,5.6099-1.2705,5.6099s0.2344,1.8945,1.8779,2.252c1.6445,0.3574,2.3594-0.6436,2.3594-0.6436
+    s1.0713,1.3223,1.75,4.0742c0.6797,2.752,0.6436,6.79,1.8945,7.9688c1.251,1.1797,1.6074,0.3223,1.6074,0.3223
+    s0.4648,3.3975-0.9277,6.6855c-1.3945,3.2881-4.1465,6.7568-4.1465,6.7568h11.0781c0,0,1.5723-3.5234-7.1113-2.2363
+    c3.252-4.0742,3.8955-6.1934,4.0391-11.125c1.8223,0.5,4.252,0.6738,4.9316-0.3271c0.5352,1.3223,2.4297,2.1787,3.3584,1.7139
+    c-0.2139,3.7168-1.0713,12.1846-1.0713,12.1846l9.0049,0.2852c0,0-0.751-3.2168-6.29-1.4307
+    c1.001-6.7891,1.3584-11.5068,1.3584-11.5068s1.3584,0.1074,1.8584-0.3926c0.5-0.501,0.6787-5.3252-0.4648-9.9346
+    c-1.1436-4.6104-0.5-4.4678-0.5-4.4678s1.75-0.8213,1.5-2.8584s-0.8574-3.6807-1.5352-5.5391
+    c0.4639-0.1074,1-0.7861-0.6797-2.7158c-0.2148-2.5015-0.9648-6.3242-0.6436-7.6465s0.2148-2.8232-0.1787-4.3599
+    c0-2.4302,0.7148-13.1509-1.25-17.0103c-1.9658-3.8594-2.5371-3.5737-2.5371-3.5737S812.5977,169.0142,810.7031,169.2109z" />
+            </g>
+            <g transform="translate(783, 122)">
+              <g>
+                <path d="M35.3506,17.9644c2.9834-3.71,5.9824-15.2095-3.1846-18.3765c2.668,3.833,1.168,5.6665,1.168,5.6665
+    S32,1.2549,28.666-0.4121c1.5,3.1665,0,5,0,5S20.5,8.9209,24.5,13.2544S35.3506,17.9644,35.3506,17.9644z" />
+                <animateTransform attributeName="transform" type="skewX" values="0;30;0" begin="0s" dur="4s"
+                  fill="freeze" repeatCount="indefinite" />
+                <animateMotion type="translate" values="0,0;-10,0;0,0" begin="0s" dur="4s" fill="freeze"
+                  repeatCount="indefinite" />
+              </g>
+              <g>
+                <path d="M27.125,6.2334c-1.8125-0.625-2.0625-1.9375-4.375-2.25c1,0.8125,1.125,1.6875,1.125,1.6875S21.5,4.3584,19.0625,3.9834
+    c1.3125,0.75,2,1.875,2,1.875s-3.25-0.75-5.875-0.75c1.125,0.3125,1.125,0.6875,1.125,0.6875S10.75,5.8584,8.6875,7.4834
+    c1,0.125,0.9375,0.6714,0.9375,0.6714s-4.25,1.5786-5.375,3.7661c0.875-0.4375-0.8125,1.8125-0.8125,1.8125s0.75,1.375-0.3125,1.125
+    S0.5,14.1084,0.5,12.5459c-0.5,2.1875,0.6924,2.5767,1.4375,3.3125c-0.0625,1-0.9375,2.6494-1.25,2.106s0.8594,0.4282,0.0547,2.4731
+    c-0.8047,2.0459-1.1533,3.7432-0.5103,6.5195s2.7056,4.5264,3.5181,6.2139s0.5-1.6875,0.5-1.6875L27.125,6.2334z" />
+              </g>
+            </g>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <!-- build:js scripts/main.js -->
+  <script src="scripts/universe.js"></script>
+  <script src="scripts/main.js"></script>
+  <!-- endbuild -->
+</body>
+
+</html>
\ No newline at end of file

Web/030-miss_you/scripts/main.js

+;(function (window) {
+  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
+
+  const FRAME_RATE = 60
+  const PARTICLE_NUM = 2000
+  const RADIUS = Math.PI * 2
+  const CANVASWIDTH = 500
+  const CANVASHEIGHT = 150
+  const CANVASID = 'canvas'
+
+  let texts = ['MY DEAR', 'LOOK UP AT THE', 'STARRY SKY', 'ARE YOU', 'LOOKING AT THE', 'SAME STAR', 'WITH ME ?', 'HAPPY', 'CHINESE', 'VALENTINE\'S', 'DAY', 'I MISS YOU']
+
+  let canvas,
+    ctx,
+    particles = [],
+    quiver = true,
+    text = texts[0],
+    textIndex = 0,
+    textSize = 70
+
+  function draw () {
+    ctx.clearRect(0, 0, CANVASWIDTH, CANVASHEIGHT)
+    ctx.fillStyle = 'rgb(255, 255, 255)'
+    ctx.textBaseline = 'middle'
+    ctx.fontWeight = 'bold'
+    ctx.font = textSize + 'px \'SimHei\', \'Avenir\', \'Helvetica Neue\', \'Arial\', \'sans-serif\''
+    ctx.fillText(text, (CANVASWIDTH - ctx.measureText(text).width) * 0.5, CANVASHEIGHT * 0.5)
+
+    let imgData = ctx.getImageData(0, 0, CANVASWIDTH, CANVASHEIGHT)
+
+    ctx.clearRect(0, 0, CANVASWIDTH, CANVASHEIGHT)
+
+    for (let i = 0, l = particles.length; i < l; i++) {
+      let p = particles[i]
+      p.inText = false
+    }
+    particleText(imgData)
+
+    window.requestAnimationFrame(draw)
+  }
+
+  function particleText (imgData) {
+    // 点坐标获取
+    var pxls = []
+    for (var w = CANVASWIDTH; w > 0; w -= 3) {
+      for (var h = 0; h < CANVASHEIGHT; h += 3) {
+        var index = (w + h * (CANVASWIDTH)) * 4
+        if (imgData.data[index] > 1) {
+          pxls.push([w, h])
+        }
+      }
+    }
+
+    var count = pxls.length
+    var j = parseInt((particles.length - pxls.length) / 2, 10)
+    j = j < 0 ? 0 : j
+
+    for (var i = 0; i < pxls.length && j < particles.length; i++, j++) {
+      try {
+        var p = particles[j],
+          X,
+          Y
+
+        if (quiver) {
+          X = (pxls[i - 1][0]) - (p.px + Math.random() * 10)
+          Y = (pxls[i - 1][1]) - (p.py + Math.random() * 10)
+        } else {
+          X = (pxls[i - 1][0]) - p.px
+          Y = (pxls[i - 1][1]) - p.py
+        }
+        var T = Math.sqrt(X * X + Y * Y)
+        var A = Math.atan2(Y, X)
+        var C = Math.cos(A)
+        var S = Math.sin(A)
+        p.x = p.px + C * T * p.delta
+        p.y = p.py + S * T * p.delta
+        p.px = p.x
+        p.py = p.y
+        p.inText = true
+        p.fadeIn()
+        p.draw(ctx)
+      } catch (e) {}
+    }
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i]
+      if (!p.inText) {
+        p.fadeOut()
+
+        var X = p.mx - p.px
+        var Y = p.my - p.py
+        var T = Math.sqrt(X * X + Y * Y)
+        var A = Math.atan2(Y, X)
+        var C = Math.cos(A)
+        var S = Math.sin(A)
+
+        p.x = p.px + C * T * p.delta / 2
+        p.y = p.py + S * T * p.delta / 2
+        p.px = p.x
+        p.py = p.y
+
+        p.draw(ctx)
+      }
+    }
+  }
+
+  function setDimensions () {
+    canvas.width = CANVASWIDTH
+    canvas.height = CANVASHEIGHT
+    canvas.style.position = 'absolute'
+    canvas.style.left = '0%'
+    canvas.style.top = '0%'
+    canvas.style.bottom = '0%'
+    canvas.style.right = '0%'
+    canvas.style.marginTop = window.innerHeight * .15 + 'px'
+  }
+
+  function event () {
+    document.addEventListener('click', function (e) {
+      textIndex++
+      if (textIndex >= texts.length) {
+        textIndex--
+        return
+      }
+      text = texts[textIndex]
+      console.log(textIndex)
+    }, false)
+
+    document.addEventListener('touchstart', function (e) {
+      textIndex++
+      if (textIndex >= texts.length) {
+        textIndex--
+        return
+      }
+      text = texts[textIndex]
+      console.log(textIndex)
+    }, false)
+  }
+
+  function init () {
+    canvas = document.getElementById(CANVASID)
+    if (canvas === null || !canvas.getContext) {
+      return
+    }
+    ctx = canvas.getContext('2d')
+    setDimensions()
+    event()
+
+    for (var i = 0; i < PARTICLE_NUM; i++) {
+      particles[i] = new Particle(canvas)
+    }
+
+    draw()
+  }
+
+  class Particle {
+    constructor (canvas) {
+      let spread = canvas.height
+      let size = Math.random() * 1.2
+      // 速度
+      this.delta = 0.06
+      // 现在的位置
+      this.x = 0
+      this.y = 0
+      // 上次的位置
+      this.px = Math.random() * canvas.width
+      this.py = (canvas.height * 0.5) + ((Math.random() - 0.5) * spread)
+      // 记录点最初的位置
+      this.mx = this.px
+      this.my = this.py
+      // 点的大小
+      this.size = size
+      // this.origSize = size
+      // 是否用来显示字
+      this.inText = false
+      // 透明度相关
+      this.opacity = 0
+      this.fadeInRate = 0.005
+      this.fadeOutRate = 0.03
+      this.opacityTresh = 0.98
+      this.fadingOut = true
+      this.fadingIn = true
+    }
+    fadeIn () {
+      this.fadingIn = this.opacity > this.opacityTresh ? false : true
+      if (this.fadingIn) {
+        this.opacity += this.fadeInRate
+      }else {
+        this.opacity = 1
+      }
+    }
+    fadeOut () {
+      this.fadingOut = this.opacity < 0 ? false : true
+      if (this.fadingOut) {
+        this.opacity -= this.fadeOutRate
+        if (this.opacity < 0) {
+          this.opacity = 0
+        }
+      }else {
+        this.opacity = 0
+      }
+    }
+    draw (ctx) {
+      ctx.fillStyle = 'rgba(226,225,142, ' + this.opacity + ')'
+      ctx.beginPath()
+      ctx.arc(this.x, this.y, this.size, 0, RADIUS, true)
+      ctx.closePath()
+      ctx.fill()
+    }
+  }
+  
+  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    if(!isChrome){
+      $('#iframeAudio').remove()
+  }
+  
+  // setTimeout(() => {
+    init()  
+  // }, 4000);
+  // mp3.play()
+})(window)

Web/030-miss_you/scripts/universe.js

+window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var starDensity = .216;
+var speedCoeff = .05;
+var width;
+var height;
+var starCount;
+var circleRadius;
+var circleCenter;
+var first = true;
+var giantColor = '180,184,240';
+var starColor = '226,225,142';
+var cometColor = '226,225,224';
+var canva = document.getElementById('universe');
+var stars = [];
+var universe;
+
+windowResizeHandler();
+window.addEventListener('resize', windowResizeHandler, false);
+
+createUniverse();
+
+function createUniverse() {
+  universe = canva.getContext('2d');
+
+  for (var i = 0; i < starCount; i++) {
+    stars[i] = new Star();
+    stars[i].reset();
+  }
+
+  draw();
+}
+
+function draw() {
+  universe.clearRect(0, 0, width, height);
+
+  var starsLength = stars.length;
+
+  for (var i = 0; i < starsLength; i++) {
+    var star = stars[i];
+    star.move();
+    star.fadeIn();
+    star.fadeOut();
+    star.draw();
+  }
+
+  window.requestAnimationFrame(draw);
+}
+
+function Star() {
+
+  this.reset = function() {
+    this.giant = getProbability(3);
+    this.comet = this.giant || first ? false : getProbability(10);
+    this.x = getRandInterval(0, width - 10);
+    this.y = getRandInterval(0, height);
+    this.r = getRandInterval(1.1, 2.6);
+    this.dx = getRandInterval(speedCoeff, 6 * speedCoeff) + (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120) + speedCoeff * 2;
+    this.dy = -getRandInterval(speedCoeff, 6 * speedCoeff) - (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120);
+    this.fadingOut = null;
+    this.fadingIn = true;
+    this.opacity = 0;
+    this.opacityTresh = getRandInterval(.2, 1 - (this.comet + 1 - 1) * .4);
+    this.do = getRandInterval(0.0005, 0.002) + (this.comet + 1 - 1) * .001;
+  };
+
+  this.fadeIn = function() {
+    if (this.fadingIn) {
+      this.fadingIn = this.opacity > this.opacityTresh ? false : true;
+      this.opacity += this.do;
+    }
+  };
+
+  this.fadeOut = function() {
+    if (this.fadingOut) {
+      this.fadingOut = this.opacity < 0 ? false : true;
+      this.opacity -= this.do / 2;
+      if (this.x > width || this.y < 0) {
+        this.fadingOut = false;
+        this.reset();
+      }
+    }
+  };
+
+  this.draw = function() {
+    universe.beginPath();
+
+    if (this.giant) {
+      universe.fillStyle = 'rgba(' + giantColor + ',' + this.opacity + ')';
+      universe.arc(this.x, this.y, 2, 0, 2 * Math.PI, false);
+    } else if (this.comet) {
+      universe.fillStyle = 'rgba(' + cometColor + ',' + this.opacity + ')';
+      universe.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false);
+
+      //comet tail
+      for (var i = 0; i < 30; i++) {
+        universe.fillStyle = 'rgba(' + cometColor + ',' + (this.opacity - (this.opacity / 20) * i) + ')';
+        universe.rect(this.x - this.dx / 4 * i, this.y - this.dy / 4 * i - 2, 2, 2);
+        universe.fill();
+      }
+    } else {
+      universe.fillStyle = 'rgba(' + starColor + ',' + this.opacity + ')';
+      universe.rect(this.x, this.y, this.r, this.r);
+    }
+
+    universe.closePath();
+    universe.fill();
+  };
+
+  this.move = function() {
+    this.x += this.dx;
+    this.y += this.dy;
+    if (this.fadingOut === false) {
+      this.reset();
+    }
+    if (this.x > width - (width / 4) || this.y < 0) {
+      this.fadingOut = true;
+    }
+  };
+
+  (function() {
+    setTimeout(function() {
+      first = false;
+    }, 50)
+  })()
+}
+
+function getProbability(percents) {
+  return ((Math.floor(Math.random() * 1000) + 1) < percents * 10);
+}
+
+function getRandInterval(min, max) {
+  return (Math.random() * (max - min) + min);
+}
+
+function windowResizeHandler() {
+  width = window.innerWidth;
+  height = window.innerHeight;
+  starCount = width * starDensity;
+  // console.log(starCount)
+  circleRadius = (width > height ? height / 2 : width / 2);
+  circleCenter = {
+    x: width / 2,
+    y: height / 2
+  }
+
+  canva.setAttribute('width', width);
+  canva.setAttribute('height', height);
+}
\ No newline at end of file

Web/030-miss_you/styles/main.css

+*{
+    margin:0;
+    padding:0;
+}
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+body {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-filter: contrast(120%);
+    filter: contrast(120%);
+    background-color: black;
+    position: relative;
+}
+
+.container {
+    width: 100%;
+    height: 99.74%;
+    background-image: radial-gradient(2000px at 10% 130%, rgba(33, 39, 80, 1) 10%, #020409 100%);
+
+}
+
+.content {
+    width: 100% auto;
+    height: 100% auto;
+}
+
+#universe {
+    width: 100% auto;
+    height: 100% auto;
+}
+
+#footerContent {
+    font-family: sans-serif;
+    font-size: 110%;
+    color: rgba(200, 220, 255, .3);
+    width: 100%;
+    position: fixed;
+    bottom: 0%;
+    padding: 20%;
+    text-align: center;
+    z-index: 20;
+}
+
+#footer {
+    position: absolute;
+    bottom: 0%;
+    height: 300px;
+    width: 100%;
+}
+
+#scene {
+    height: 100%;
+    position: absolute;
+    left: 50%;
+    margin-left: -768px;
+}
+
+a {
+    text-decoration: none;
+    color: rgba(200, 220, 255, 1);
+    opacity: .4;
+    -webkit-transition: opacity .4s ease;
+    transition: opacity .4s ease;
+}
+
+a:hover {
+    opacity: 1;
+}
+
+.txt {
+    color: hsla(0, 0%, 0%, 0);
+    text-shadow: #fff 0 0 10px;
+    transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
+}
+
+@-moz-document url-prefix() {
+    .txt {
+        text-shadow: #fff 0 0 20px;
+    }
+}
+
+#canvas{
+    margin: 0 auto;
+}
\ No newline at end of file