From 3d6b74b873e71147b46f0528b89580d2d644e58f Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Sun, 21 Jun 2026 21:38:40 +0200
Subject: [PATCH] feat(ui): new equalizer logo, favicon link, fix star vertical
 alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- icon.svg: replaced music-note with 5-bar equalizer waveform (gold
  gradient on dark bg) — works well as favicon and app icon at all sizes
- index.html: add <link rel="icon"> so browsers pick up the favicon;
  move #btn-star-current out of the title row and into player-track so
  player-track's align-items:center centers it with the full info block
- styles.css: add flex:1 to .player-info base rule; remove stale mobile
  overrides that assumed the star was inside player-info (position:absolute,
  padding-right hack)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html      | 11 +++++------
 public/icon.svg | 35 +++++++++++++++++++----------------
 styles.css      |  6 ++----
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 7e70310..40a4d16 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="apple-mobile-web-app-title" content="NovaSonic">
 <link rel="manifest" href="manifest.json">
+<link rel="icon" href="icon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="icon.svg">
 <title>NovaSonic</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -471,12 +472,7 @@
     <div class="player-track">
       <div class="player-art" id="player-art" style="cursor:pointer" title="Jetzt läuft öffnen"><div class="no-art">♪</div></div>
       <div class="player-info">
-        <div style="display:flex;align-items:center;gap:6px">
-          <div class="player-title" id="player-title">Kein Titel</div>
-          <button id="btn-star-current" onclick="starCurrent()" title="Favorit" style="background:none;border:none;cursor:pointer;padding:2px;flex-shrink:0;display:flex;align-items:center">
-            <svg id="star-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text3)" stroke-width="2" style="transition:fill .2s,stroke .2s"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-          </button>
-        </div>
+        <div class="player-title" id="player-title">Kein Titel</div>
         <div class="player-artist">
           <span id="player-album-name" onclick="playerBarGoAlbum()" style="cursor:pointer" title="Zum Album"></span>
         </div>
@@ -488,6 +484,9 @@
           <span class="status-badge badge-repeat" id="badge-repeat">🔁 Repeat</span>
         </div>
       </div>
+      <button id="btn-star-current" onclick="starCurrent()" title="Favorit" style="background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;display:flex;align-items:center;color:var(--text3)">
+        <svg id="star-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition:fill .2s,stroke .2s"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+      </button>
     </div>
     <div class="player-controls">
       <div class="ctrl-buttons">
diff --git a/public/icon.svg b/public/icon.svg
index 42b0a97..d2e0d0b 100644
--- a/public/icon.svg
+++ b/public/icon.svg
@@ -1,22 +1,25 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <rect width="512" height="512" rx="90" fill="#07070f"/>
-  <rect width="512" height="512" rx="90" fill="url(#bg)"/>
   <defs>
-    <radialGradient id="bg" cx="30%" cy="40%" r="80%">
-      <stop offset="0%" stop-color="#1a1a2e"/>
+    <radialGradient id="bg" cx="40%" cy="35%" r="72%">
+      <stop offset="0%" stop-color="#1c1c30"/>
       <stop offset="100%" stop-color="#07070f"/>
     </radialGradient>
+    <linearGradient id="bar" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#f5b83a"/>
+      <stop offset="100%" stop-color="#c07515"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#e8a020" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="#e8a020" stop-opacity="0"/>
+    </radialGradient>
   </defs>
-  <!-- Music note -->
-  <g fill="#e8a020">
-    <!-- Note head 1 -->
-    <ellipse cx="180" cy="340" rx="48" ry="36" transform="rotate(-15 180 340)"/>
-    <!-- Note head 2 -->
-    <ellipse cx="332" cy="300" rx="48" ry="36" transform="rotate(-15 332 300)"/>
-    <!-- Stem -->
-    <rect x="218" y="160" width="18" height="185" rx="9"/>
-    <rect x="370" y="120" width="18" height="185" rx="9"/>
-    <!-- Beam -->
-    <rect x="218" y="160" width="170" height="22" rx="11"/>
-  </g>
+  <rect width="512" height="512" rx="90" fill="#07070f"/>
+  <rect width="512" height="512" rx="90" fill="url(#bg)"/>
+  <ellipse cx="256" cy="256" rx="210" ry="160" fill="url(#glow)"/>
+  <!-- Equalizer bars: 5 bars, varying heights, vertically centered -->
+  <rect x="103" y="196" width="50" height="120" rx="25" fill="url(#bar)"/>
+  <rect x="167" y="151" width="50" height="210" rx="25" fill="url(#bar)"/>
+  <rect x="231" y="111" width="50" height="290" rx="25" fill="url(#bar)"/>
+  <rect x="295" y="166" width="50" height="180" rx="25" fill="url(#bar)"/>
+  <rect x="359" y="206" width="50" height="100" rx="25" fill="url(#bar)"/>
 </svg>
diff --git a/styles.css b/styles.css
index 837b3ee..ac02626 100644
--- a/styles.css
+++ b/styles.css
@@ -276,7 +276,7 @@ button:focus{outline:none}
 .player-art::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px rgba(255,255,255,.15);pointer-events:none;opacity:0;transition:opacity .3s}
 .player-art.spinning::after{opacity:1}
 @keyframes spin{to{transform:rotate(360deg)}}
-.player-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
+.player-info{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
 .player-title{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;margin-bottom:2px}
 #player-artist-name{color:var(--accent)}
 #player-artist-name span:hover{color:var(--accent)}
@@ -919,11 +919,9 @@ button:focus{outline:none}
   }
   .player .player-art{width:46px!important;height:46px!important;border-radius:50%!important;flex-shrink:0}
   .player-track{max-width:none!important;width:100%!important;gap:8px}
-  .player-info{flex:1;min-width:0;position:relative}
-  .player-info>div:first-child{justify-content:flex-start!important;padding-right:24px}
+  .player-info{flex:1;min-width:0}
   .player-title{flex:1;min-width:0;font-size:12px!important}
   .player-artist{font-size:10px!important;margin-top:1px}
-  #btn-star-current{position:absolute;right:0;top:50%;transform:translateY(-50%);flex-shrink:0}
   .player-status-row{display:none}
   /* Controls: horizontal row with only prev/play/next */
   .player-controls{display:flex!important;flex-direction:row!important;width:auto!important;padding:0!important;gap:0!important;align-items:center;flex-shrink:0;min-width:0!important}