Update templates/room.html

templates/room.html

@@ -23,16 +23,17 @@
     .track-title { text-align:center; margin-top:12px; font-family:'Doto',sans-serif; font-size:20px; }
     .track-artist { text-align:center; color:var(--text-secondary); margin-top:4px; font-size:14px; }
     .controls { display:flex; justify-content:center; gap:20px; margin-top:18px; align-items:center; }
-    .control-btn { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--bg-surface); border:none; }
-    .control-btn.primary { background:var(--accent); color:white; width:72px; height:72px; font-size:20px; }
+    .control-btn { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--bg-surface); border:none; font-size:18px; transition:transform .18s ease, box-shadow .18s ease; }
+    .control-btn.primary { background:var(--accent); color:white; width:72px; height:72px; font-size:22px; border-radius:14px; }
+    .control-btn.primary.playing { transform:scale(1.03); box-shadow:0 8px 20px rgba(51,102,153,0.12); }
     .progress { margin-top:14px; padding:0 20px; }
     .progress .times { display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); }
     .playlist { margin-top:12px; }
     .list-row { display:flex; align-items:center; justify-content:space-between; padding:12px; border-radius:10px; background:transparent; }
     .list-row.current { background:var(--bg-surface); }
     .mini { font-size:13px; color:var(--text-secondary); }
-    .fab-upload { position: fixed; right:18px; bottom:24px; border-radius:14px; padding:12px 14px; background:var(--accent); color:white; font-weight:600; box-shadow:0 8px 20px rgba(51,102,153,0.12); }
-    .enable-audio { position:fixed; left:14px; bottom:22px; background:rgba(17,17,17,0.03); padding:8px 10px; border-radius:10px; font-size:13px; color:var(--text-secondary); }
+    .fab-upload { position: fixed; right:18px; bottom:24px; border-radius:14px; padding:12px 14px; background:var(--accent); color:white; font-weight:600; box-shadow:0 8px 20px rgba(51,102,153,0.12); z-index:30; }
+    .enable-audio { position:fixed; left:14px; bottom:22px; background:rgba(17,17,17,0.03); padding:8px 10px; border-radius:10px; font-size:13px; color:var(--text-secondary); z-index:30; }
     /* responsive tweaks */
     @media(min-width:520px){ .container { max-width:520px; } }
   </style>
@@ -66,7 +67,7 @@
       <section id="tab-now" class="panel">
         <div class="album-wrap">
           <div id="album" class="album">
-            <img id="album-img" src="/static/img/placeholder-music.svg" alt="album art" style="width:100%; height:100%; object-fit:cover;" />
+            <img id="album-img" src="https://cdn.dribbble.com/userupload/23374753/file/original-090a6e986e1faa15b0929d0bd3960318.gif" alt="album art" style="width:100%; height:100%; object-fit:cover;" />
           </div>
         </div>
 
@@ -79,9 +80,9 @@
         </div>
 
         <div class="controls">
-          <button id="btn-prev" class="control-btn" title="Previous"><span>&#9664;&#9664;</span></button>
-          <button id="btn-play" class="control-btn primary" title="Play/Pause">▶</button>
-          <button id="btn-next" class="control-btn" title="Next"><span>&#9654;&#9654;</span></button>
+          <button id="btn-prev" class="control-btn" title="Previous" aria-label="Previous">&#9664;&#9664;</button>
+          <button id="btn-play" class="control-btn primary" title="Play/Pause" aria-label="Play/Pause">▶</button>
+          <button id="btn-next" class="control-btn" title="Next" aria-label="Next">&#9654;&#9654;</button>
         </div>
       </section>