diff options
| author | Indrajith K L | 2025-06-30 02:37:28 +0530 |
|---|---|---|
| committer | Indrajith K L | 2025-06-30 02:37:28 +0530 |
| commit | ae44e79a15b2257c3034b272ccdf2d69b01c6455 (patch) | |
| tree | 6f12ddf42914cbc68a9467b946d37083458510e3 /index.html | |
| parent | c708bb42da85c880fd472217d853a5c99189b6b5 (diff) | |
| download | retrowave-player-ae44e79a15b2257c3034b272ccdf2d69b01c6455.tar.gz retrowave-player-ae44e79a15b2257c3034b272ccdf2d69b01c6455.tar.bz2 retrowave-player-ae44e79a15b2257c3034b272ccdf2d69b01c6455.zip | |
New Features and Cosmetics
* Adds option to toggle fullscreen
* Adds option to hide controls and hide music player(just visualization only)
* Font Changes
* Adds Stylized tooltips
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 156 |
1 files changed, 111 insertions, 45 deletions
@@ -1,62 +1,128 @@ <!DOCTYPE html> <html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Retrowave Player</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> <script src="https://unpkg.com/hydra-synth"></script> - <link rel="stylesheet" href="hg.css"> - <link rel="icon" href="/favicon.ico"> - <link rel="icon" type="image/svg+xml" href="/favicon.svg"> -</head> + <link rel="stylesheet" href="hg.css" /> + <link rel="icon" href="/favicon.ico" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + </head> -<body> + <body> <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> - <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> - <button class="modal-close modal-exit" id="initButton">X</button> - </div> + <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> + <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> + <button class="modal-close modal-exit" id="initButton">X</button> + </div> </div> <div id="app"> - <div class="music-player"> - <div class="no-pause refresh">🔃</div> - <div class="title-content"> - <div class="intro">Now Playing</div> - <hr> - <h3 id="track-name">Retrowave Player</h3> - </div> - <div class="gradient-overlay"></div> - <div class="color-overlay"></div> - <div class="footer"> - <div id="history" class="no-pause footer-items">history</div> - <div id="source"><a class="no-pause footer-items" href="https://git.indrajith.dev/retrowave-player/" - target="_blank">source code</a></div> - <div id="retrowaveru" class="no-pause"><a class="no-pause footer-items" href="http://retrowave.ru/" - target="_blank">retrowave.ru</a></div> - <div id="guestbook" class="no-pause"><a class="no-pause footer-items" href="https://indrajith.atabook.org/" - target="_blank">guestbook</a></div> - </div> - <!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> --> + <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> + <div class="no-pause buttons refresh toggleable" title="NEXT TRACK">🔃</div> + <div class="title-content"> + <div class="intro">Now Playing</div> + <hr /> + <h3 id="track-name">Retrowave Player</h3> </div> + <div class="gradient-overlay"></div> + <div class="color-overlay"></div> + <div class="footer toggleable"> + <div title="DOWNLOAD YOUR PLAYLIST HISTORY" id="history" class="no-pause footer-items">history</div> + <div id="source"> + <a + title="SOURCE CODE" + class="no-pause footer-items" + href="https://git.indrajith.dev/retrowave-player/" + target="_blank" + >source code</a + > + </div> + <div id="retrowaveru" class="no-pause"> + <a + title="RETROWAVE.RU" + class="no-pause footer-items" + href="http://retrowave.ru/" + target="_blank" + >retrowave.ru</a + > + </div> + <div id="guestbook" class="no-pause"> + <a + title="SIGN MY GUESTBOOK" + class="no-pause footer-items" + href="https://indrajith.atabook.org/" + target="_blank" + >guestbook</a + > + </div> + </div> + <!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> --> + </div> </div> <div id="codef-canvas"></div> + <div class="OVR hidden"></div> <input id="file-upload" type="file" accept="application/json" /> <!-- <script src="libs/codef_core.js"></script> <script src="libs/codef_starfield.js"></script> <script src="libs/codef_3d.js"></script> --> <script src="player.js"></script> -</body> - -</html>
\ No newline at end of file + </body> +</html> |