indrajith/retrowave-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ac588b9dbc2f21e9183d7dcdf48e45fe84ef1fbf
retrowave-player/index.html
Indrajith K L aeb139536b Feature Updates 
* Terminal Window in Mobile devices updates
2025-06-30 18:31:30 +05:30

167 lines
7.7 KiB
HTML
Raw Blame History

<!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, maximum-scale=1.0, user-scalable=no" />
<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>
<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>
<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>
</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>
<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 />
<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="terminal-overlay" class="terminal-overlay hidden">
<div class="terminal-window">
<div class="terminal-header">
<span class="terminal-title">Retrowave Terminal</span>
<span class="terminal-close">□</span>
</div>
<div class="terminal-content">
<div id="terminal-output">
<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>
<input type="text" id="terminal-input" class="terminal-input" autocomplete="off" spellcheck="false">
</div>
</div>
</div>
</div>
<div id="codef-canvas"></div>
<div class="OVR hidden"></div>
<div class="ERRORS 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>
Reference in New Issue View Git Blame Copy Permalink