Update app.py

app.py

@@ -240,13 +240,17 @@ html_template = '''
     }
     #gift {
         position: fixed;
-        bottom: 100px;
-        right: 20px;
         width: 60px;
         cursor: pointer;
         z-index: 9998;
-        transition: transform 0.5s;
-        animation: bounce 1.2s infinite;
+        animation: moveAround 10s infinite linear;
+    }
+    @keyframes moveAround {
+        0% { top: 10%; left: 10%; }
+        25% { top: 20%; left: 80%; }
+        50% { top: 70%; left: 60%; }
+        75% { top: 80%; left: 20%; }
+        100% { top: 10%; left: 10%; }
     }
     #popup, #popup2 {
         display: none;
@@ -283,36 +287,26 @@ html_template = '''
         0% { opacity: 1; }
         100% { opacity: 0; }
     }
-    #balloon {
+    .balloon {
         position: fixed;
-        top: 100%;
-        left: 50%;
-        width: 50px;
+        width: 60px;
         height: 80px;
-        background: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon.png") no-repeat center;
         background-size: contain;
-        animation: floatBalloon 10s linear infinite;
+        background-repeat: no-repeat;
         z-index: 9999;
+        animation: floatUp 12s linear infinite;
     }
-    @keyframes floatBalloon {
-        0% { transform: translate(-50%, 0); }
-        100% { transform: translate(-50%, -120vh); }
-    }
-    #music-toggle {
-        position: fixed;
-        bottom: 20px;
-        left: 20px;
-        padding: 8px 12px;
-        font-size: 14px;
-        background: rgba(255,255,255,0.7);
-        border-radius: 8px;
-        cursor: pointer;
-        z-index: 10000;
+    #balloon1 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon1.png"); left: 10%; animation-delay: 0s; }
+    #balloon2 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon2.png"); left: 30%; animation-delay: 2s; }
+    #balloon3 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon3.png"); left: 50%; animation-delay: 4s; }
+    #balloon4 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon4.png"); left: 70%; animation-delay: 6s; }
+    #balloon5 { background-image: url("https://huggingface.co/spaces/Ronaldo1111/Sophia/resolve/main/balloon5.png"); left: 90%; animation-delay: 8s; }
+    @keyframes floatUp {
+        0% { top: 100%; }
+        100% { top: -20%; }
     }
-    #next-track {
+    #music-toggle, #next-track {
         position: fixed;
-        bottom: 60px;
-        left: 20px;
         padding: 8px 12px;
         font-size: 14px;
         background: rgba(255,255,255,0.7);
@@ -320,6 +314,8 @@ html_template = '''
         cursor: pointer;
         z-index: 10000;
     }
+    #music-toggle { bottom: 20px; left: 20px; }
+    #next-track { bottom: 60px; left: 20px; }
 </style>
 <img id="sophia-avatar" src="{avatar_url}" />
 <img id="birthday-cake" src="{cake_url}" />
@@ -329,7 +325,11 @@ html_template = '''
 <div id="popup-close">×</div>
 <div id="music-toggle">⏸️音乐</div>
 <div id="next-track">🎵切歌</div>
-<div id="balloon"></div>
+<div id="balloon1" class="balloon"></div>
+<div id="balloon2" class="balloon"></div>
+<div id="balloon3" class="balloon"></div>
+<div id="balloon4" class="balloon"></div>
+<div id="balloon5" class="balloon"></div>
 <audio id="bg-music" autoplay loop>
     <source src="{music1}" type="audio/mpeg" />
 </audio>
@@ -345,7 +345,8 @@ html_template = '''
         audio.play();
     });
 
-    document.getElementById("music-toggle").addEventListener("click", () => {
+    const toggleBtn = document.getElementById("music-toggle");
+    toggleBtn.addEventListener("click", () => {
         if (audio.paused) {
             audio.play();
             toggleBtn.textContent = "⏸️音乐";