diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 123 |
1 files changed, 49 insertions, 74 deletions
@@ -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">>_</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> |