blob: 3d90137e0d6df00c91fd1fd26b6a96389d540dd3 (
plain)
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
|
<!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">>_</span>
</div>
<div class="no-pause buttons refresh" title="NEXT TRACK">
<span class="retro-icon">▶▶</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="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>
|
