8.5

themes/Ying/layouts/partials/footer.html

@@ -53,6 +53,31 @@
     }
   });
 </script>
+<div class="sakana-box-l sakana-box" style="transform: translateY(0px) scale(0.5);"><canvas width="750" height="1200" style="width: 500px; height: 800px;"></canvas><div class="sakana-character" data-character="takina" style="transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"></div><div class="sakana-bed"></div></div>
+    <div class="sakana-box-r sakana-box" style="transform: translateY(0px) scale(0.5);"><canvas width="750" height="1200" style="width: 500px; height: 800px;"></canvas><div class="sakana-character" data-character="chisato" style="transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"></div><div class="sakana-bed"></div></div>
+    <script src="/js/sakana.js"></script>
+    <script>
+      Sakana.setMute(false);
+      Sakana.init({
+        el:         '.sakana-box-l', 
+        scale:      .9, 
+        character:'takina',
+        canSwitchCharacter: false, 
+                  inertia: 0.001,
+                  decay: 1
+      });
+      </script>
+      <script>
+        Sakana.setMute(false);
+        Sakana.init({
+          el:         '.sakana-box-r', 
+          scale:      .9, 
+          character:'chisato',
+          canSwitchCharacter: false, 
+                    inertia: 0.001,
+                    decay: 1
+        });
+        </script>
 </body>
 
 </html>

themes/Ying/static/css/main.css

@@ -1796,7 +1796,7 @@ input[type=submit] {
 
 .barrage .header-avatar {
     -webkit-border-radius: 50%;
-            border-radius: 50%;
+    border-radius: 50%;
     position: relative;
     right: 7px;
     display: flex;
@@ -1807,10 +1807,108 @@ input[type=submit] {
 .barrage .header-avatar img {
     width: 100%;
     height: 100%;
-    object-fit: cover; /* 使头像充满容器并保持比例 */
+    object-fit: cover;
+    /* 使头像充满容器并保持比例 */
 }
 
 .pause {
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
+}
+
+
+/* sakana */
+.sakana-box-l {
+    position: fixed !important;
+    inset: auto auto -1rem -5rem;
+    z-index: 555;
+}
+
+.sakana-box-r {
+    position: fixed !important;
+    inset: auto -5rem -1rem auto;
+    z-index: 555;
+}
+
+@media (max-width: 650px) {
+
+    .sakana-box-l,
+    .sakana-box-r {
+        display: none;
+    }
+}
+
+@media (max-width: 1120px) {
+
+    .sakana-box-l,
+    .sakana-box-r {
+        transform: translateY(0px) scale(0.25) !important;
+    }
+
+    .sakana-box-l {
+        inset: auto auto -1rem -10rem;
+    }
+
+    .sakana-box-r {
+        inset: auto -10rem -1rem auto;
+    }
+}
+
+.sakana-box {
+    width: 500px;
+    height: 800px;
+    position: relative;
+    transform-origin: 50% 100%;
+    pointer-events: none
+}
+
+.sakana-box canvas {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none
+}
+
+.sakana-box .sakana-character {
+    width: 300px;
+    height: 300px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    bottom: 260px;
+    cursor: pointer;
+    pointer-events: auto;
+    transform-origin: 50% 400px;
+    background: no-repeat 50% 50%;
+    background-size: cover
+}
+
+.sakana-box .sakana-character[data-character=chisato] {
+    background-image: url(https://t.tutu.to/img/BMuY5)!important
+}
+
+.sakana-box .sakana-character[data-character=takina] {
+    background-image: url(https://t.tutu.to/img/BMn86)!important
+}
+
+.sakana-box .sakana-bed {
+    width: 160px;
+    height: 20px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    bottom: 0;
+    background: rgba(255, 255, 255, .5) no-repeat 50% 50%;
+    border-radius: 2px;
+    cursor: pointer;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC);
+    background-size: 20px 20px;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, .05)
+}
+
+.sakana-box[data-can-switch-character=true] .sakana-bed {
+    pointer-events: auto
 }

themes/Ying/static/js/sakana.js

@@ -0,0 +1 @@
+const Sakana=(t=>{const a=document.createElement("style");a.innerHTML=".sakana-box{width:500px;height:800px;position:relative;transform-origin:50% 100%;pointer-events:none}.sakana-box canvas{position:absolute;left:0;right:0;bottom:0;pointer-events:none}.sakana-box .sakana-character{width:300px;height:300px;position:absolute;left:0;right:0;margin:0 auto;bottom:260px;cursor:pointer;pointer-events:auto;transform-origin:50% 400px;background:no-repeat 50% 50%;background-size:cover}.sakana-box .sakana-character[data-character=chisato]{background-image:url(data:image/png;base64,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 truncated