152 lines
5.8 KiB
HTML
152 lines
5.8 KiB
HTML
<!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">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 class="player-controls toggleable">
|
|
<div class="control-group">
|
|
<div title="FULLSCREEN" class="no-pause buttons fullscreen">
|
|
<span class="retro-icon no-pause">⛶</span>
|
|
</div>
|
|
</div>
|
|
<div class="control-group no-pause">
|
|
<div class="no-pause buttons terminal-btn" title="OPEN TERMINAL">
|
|
<span class="retro-icon no-pause">>_</span>
|
|
</div>
|
|
<div class="no-pause buttons refresh" title="NEXT TRACK">
|
|
<span class="retro-icon no-pause">▶▶</span>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<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="progress-bar-container" class="progress-bar-container">
|
|
<div class="progress-info">
|
|
<span id="current-time">00:00</span>
|
|
<span id="total-time">00:00</span>
|
|
</div>
|
|
<div id="progress-bar" class="progress-bar">
|
|
<div id="progress-fill" class="progress-fill"></div>
|
|
<div id="progress-handle" class="progress-handle"></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>
|