Indrajith K L
6241c28c0e
* Adds sample Hydra Effects * Adds Option to Rotate Hydra Effects * Adds Warning for Strobing lights
131 lines
5.6 KiB
HTML
131 lines
5.6 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" />
|
|
<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>
|
|
<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="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>
|
|
<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>
|