1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
<!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>
|
