-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
124 lines (123 loc) · 5.01 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stem Player Online</title>
<meta name="description" content="An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player" />
<meta name="theme-color" content="#2c2f33"/>
<link rel="stylesheet" type="text/css" href="main.css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" type="application/manifest+json; charset=utf-8" href="manifest.json">
<link rel="icon" href="img/logo-512.png">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JNJPG2RFK2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JNJPG2RFK2');
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script>
window.addEventListener("load", () => {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("service-worker.js");
}
});
</script>
</head>
<body>
<div id="loading"></div>
<div id="topBar">
<div id="folderSelectGroup">
<input id="folderSelectField" type="file" webkitdirectory directory multiple >
<img id="folderSelectIcon" src="img/folder.svg" alt="Folder Select"/>
<p id="folderSelectLabel">Select folder with stems</p>
</div>
<div id="colorIcons">
<input type="color" id="color4Input" class="colorInput" value="#4349e3">
<div id="color4Icon" class="colorIcon"></div>
<input type="color" id="color1Input" class="colorInput" value="#f5440a">
<div id="color1Icon" class="colorIcon"></div>
</div>
</div>
<div id="content">
<div id="playerContainer">
<div id="player">
<div id="upperPlayer" class="playerSection"> <div id="topSlider" class="slider">
<div id="top_1" class="light topLight light1"></div>
<div id="top_2" class="light topLight light2"></div>
<div id="top_3" class="light topLight light3"></div>
<div id="top_4" class="light topLight light4"></div>
</div>
</div>
<div id="middlePlayer" class="playerSection">
<div id="leftSlider" class="slider">
<div id="left_1" class="light leftLight light1"></div>
<div id="left_2" class="light leftLight light2"></div>
<div id="left_3" class="light leftLight light3"></div>
<div id="left_4" class="light leftLight light4"></div>
</div>
<div id="centerButton"></div>
<div id="rightSlider" class="slider">
<div id="right_1" class="light rightLight light1"></div>
<div id="right_2" class="light rightLight light2"></div>
<div id="right_3" class="light rightLight light3"></div>
<div id="right_4" class="light rightLight light4"></div>
</div>
</div>
<div id="lowerPlayer" class="playerSection">
<div id="bottomSlider" class="slider">
<div id="bottom_1" class="light bottomLight light1"></div>
<div id="bottom_2" class="light bottomLight light2"></div>
<div id="bottom_3" class="light bottomLight light3"></div>
<div id="bottom_4" class="light bottomLight light4"></div>
</div>
</div>
</div>
<div id="playerButtons">
<div id="menuButton" class="playerButton"></div>
<div id="volumeButtons" class="playerButton">
<div id="plusButton" class="halfButton">
<div id="plusIconVertical"></div>
<div id="plusIconHorizontal"></div>
</div>
<div id="minusButton" class="halfButton">
<div id="minusIcon"></div>
</div>
</div>
<div id="selectButtons" class="playerButton">
<div id="leftDotButton" class="halfButton">
<div id="leftDotIcon" class="dotIcon"></div>
</div>
<div id="rightDotButton" class="halfButton">
<div id="rightDotIcon" class="dotIcon"></div>
</div>
</div>
</div>
<div id="playlistViewer">
<div class="playlistViewerItem">Hurricane</div>
<div class="playlistViewerItem">Jail</div>
<div class="playlistViewerItem">Jail pt 2</div>
<div class="playlistViewerItem">Jesus Lord</div>
<div class="playlistViewerItem">Jesus Lord pt 2</div>
</div>
</div>
</div>
<div id="externalLinks">
<a href="https://github.com/lukew3/stemPlayerOnline"><img src="img/githubIcon.svg" alt="Github"/></a>
<a href="https://discord.gg/jfnFhggJGZ"><img src="img/discordIcon.svg" alt="Discord"/></a>
</div>
<div style="position: absolute; bottom: 20px; right: 20px;"><a href="https://stemplayeronline.com">Test the beta version</a></div>
<script>const $ = (id) => { return document.getElementById(id) };</script>
<script src="js/lightColors.js"></script>
<script src="js/data.js"></script>
<script src="js/audio.js"></script>
<script src="js/app.js"></script>
<script src="js/loop.js"></script>
<script src="js/maxVolume.js"></script>
<script src="js/interface.js"></script>
<script src="js/keyboardControls.js"></script>
</body>