New Features

* Retrowave Styles (Partially AI generated)

1 files changed, 49 insertions, 74 deletions

diff --git a/index.html b/index.html
index 9828d48..33a800c 100644
--- a/index.html
+++ b/index.html
@@ -16,72 +16,60 @@
     <div class="modal" id="intro-modal">
       <div class="modal-bg modal-exit"></div>
       <div class="modal-container">
-        <h3 class="text-center">WELCOME TO RETROWAVE PLAYER</h3>
-        <p class="mt-5">HERE ARE THE CONTROLS:</p>
-        <h4 class="mt-5">
-          PLAY/PAUSE <span class="controls">SPACE OR CLICK OR TOUCH</span>
-        </h4>
-        <h4 class="mt-5">
-          VOLUME UP <span class="controls">W OR SWIPE UP</span>
-        </h4>
-        <h4 class="mt-5">
-          VOLUME DOWN <span class="controls">S OR SWIPE DOWN</span>
-        </h4>
-        <h4 class="mt-5">
-          NEXT TRACK<span class="controls"> N OR PRESS THE REFRESH BUTTON</span>
-        </h4>
-        <h4 class="mt-5">
-          TOGGLE CONTROLS<span class="controls"> H</span>
-        </h4>
-        <h4 class="mt-5">
-          OPEN TERMINAL<span class="controls"> T</span>
-        </h4>
-        <p class="mt-5">
-          (YOU CAN DOWNLOAD THE MUSIC HISTORY OF YOUR CURRENT BROWSER BY
-          CLICKING THE HISTORY LINK ON THE PLAYER)
-        </p>
-        <p class="mt-5">ALL THE MUSIC IS FETCHED FROM RETROWAVE.RU</p>
-        <div id="warning">⚠️ WARNING: THIS APPLICATION CONTAINS STROBING/FLASHING LIGHTS</div>
-        <button class="modal-close modal-exit" id="initButton">X</button>
+        <h3 class="text-center">RETROWAVE PLAYER</h3>
+
+        <div id="warning">⚠️ CONTAINS STROBING LIGHTS</div>
+
+        <div class="compact-controls">
+          <div class="controls-section">
+            <h4 class="section-title">KEYBOARD</h4>
+            <div class="control-grid">
+              <span class="control-item">SPACE<small>Play</small></span>
+              <span class="control-item">W/S<small>Volume</small></span>
+              <span class="control-item">N<small>Next</small></span>
+              <span class="control-item">H<small>Hide</small></span>
+              <span class="control-item">T<small>Terminal</small></span>
+            </div>
+          </div>
+
+          <div class="controls-section">
+            <h4 class="section-title">TOUCH</h4>
+            <div class="touch-grid">
+              <span class="control-item">TAP<small>Play</small></span>
+              <span class="control-item">SWIPE<small>Volume</small></span>
+              <span class="control-item">🔃<small>Next</small></span>
+            </div>
+          </div>
+        </div>
+
+        <div class="features-compact">
+          <p>• Download history • Terminal controls • Fullscreen mode</p>
+        </div>
+
+        <div class="credit-compact">
+          <small>Music from RETROWAVE.RU</small>
+        </div>
+
+        <button class="modal-close modal-exit" id="initButton">✕</button>
       </div>
     </div>
     <div id="app">
       <div class="music-player">
-        <div title="FULLSCREEN" class="no-pause buttons fullscreen toggleable">
-          <svg
-            class="no-pause"
-            width="800px"
-            height="800px"
-            fill="#000000"
-            version="1.1"
-            viewBox="0 0 384.97 384.97"
-            xml:space="preserve"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g style="fill: #f9f9f9">
-              <g id="Fullscreen" style="fill: #f9f9f9">
-                <path
-                  d="m384.97 12.03c0-6.713-5.317-12.03-12.03-12.03h-108.09c-6.833 0-11.922 5.39-11.934 12.223 0 6.821 5.101 11.838 11.934 11.838h96.062l-0.193 96.519c0 6.833 5.197 12.03 12.03 12.03 6.833-0.012 12.03-5.197 12.03-12.03l0.193-108.37c0-0.036-0.012-0.06-0.012-0.084 1e-3 -0.037 0.013-0.061 0.013-0.097z"
-                  style="fill: #f9f9f9"
-                />
-                <path
-                  d="M120.496,0H12.403c-0.036,0-0.06,0.012-0.096,0.012C12.283,0.012,12.247,0,12.223,0C5.51,0,0.192,5.317,0.192,12.03    L0,120.399c0,6.833,5.39,11.934,12.223,11.934c6.821,0,11.838-5.101,11.838-11.934l0.192-96.339h96.242    c6.833,0,12.03-5.197,12.03-12.03C132.514,5.197,127.317,0,120.496,0z"
-                  style="fill: #f9f9f9"
-                />
-                <path
-                  d="m120.12 360.91h-96.062v-96.242c0-6.833-5.197-12.03-12.03-12.03s-12.031 5.196-12.031 12.03v108.09c0 0.036 0.012 0.06 0.012 0.084 0 0.036-0.012 0.06-0.012 0.096 0 6.713 5.317 12.03 12.03 12.03h108.09c6.833 0 11.922-5.39 11.934-12.223 1e-3 -6.82-5.1-11.837-11.933-11.837z"
-                  style="fill: #f9f9f9"
-                />
-                <path
-                  d="m372.75 252.91c-6.833 0-11.85 5.101-11.838 11.934v96.062h-96.242c-6.833 0-12.03 5.197-12.03 12.03s5.197 12.03 12.03 12.03h108.09c0.036 0 0.06-0.012 0.084-0.012 0.036-0.012 0.06 0.012 0.096 0.012 6.713 0 12.03-5.317 12.03-12.03v-108.09c1e-3 -6.833-5.389-11.934-12.222-11.934z"
-                  style="fill: #f9f9f9"
-                />
-              </g>
-            </g>
-          </svg>
+        <div class="player-controls toggleable">
+          <div class="control-group">
+            <div title="FULLSCREEN" class="no-pause buttons fullscreen">
+              <span class="retro-icon">⛶</span>
+            </div>
+          </div>
+          <div class="control-group">
+            <div class="no-pause buttons terminal-btn" title="OPEN TERMINAL">
+              <span class="retro-icon">&gt;_</span>
+            </div>
+            <div class="no-pause buttons refresh" title="NEXT TRACK">
+              <span class="retro-icon">▶▶</span>
+            </div>
+          </div>
         </div>
-        <div class="no-pause buttons refresh toggleable" title="NEXT TRACK">🔃</div>
-        <div class="no-pause buttons terminal-btn toggleable" title="OPEN TERMINAL">⌨️</div>
         <div class="title-content">
           <div class="intro">NOW PLAYING</div>
           <hr />
@@ -133,19 +121,6 @@
             <div class="terminal-line">Welcome to Retrowave Terminal</div>
             <div class="terminal-line">Type 'help' for available commands</div>
             <div class="terminal-line"></div>
-            <div class="terminal-line">Available commands:</div>
-            <div class="terminal-line">  help          - Show this help message</div>
-            <div class="terminal-line">  play          - Start/resume playback</div>
-            <div class="terminal-line">  pause         - Pause playback</div>
-            <div class="terminal-line">  next          - Skip to next track</div>
-            <div class="terminal-line">  volume [0-10] - Set volume (0-10)</div>
-            <div class="terminal-line">  status        - Show current track info</div>
-            <div class="terminal-line">  history       - Download playlist history</div>
-            <div class="terminal-line">  effect        - Change visual effect</div>
-            <div class="terminal-line">  fullscreen    - Toggle fullscreen mode</div>
-            <div class="terminal-line">  clear         - Clear terminal</div>
-            <div class="terminal-line">  exit          - Close terminal</div>
-            <div class="terminal-line"></div>
           </div>
           <div class="terminal-input-line">
             <span class="terminal-prompt">indrajith@retrowave:$ </span>