forked from thoseSkyModders/SkyMusic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
276 lines (263 loc) · 18.8 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
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html manifest="webCache.appcache">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-166077524-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-166077524-1');
</script>
<meta name="theme-color" content="#2196F3">
<meta name="description" content="Play/Practice/Share Sky songs with many instruments,keys and functions!">
<meta name="keywords" content="Sky,Music,piano,harp,xylophone,drum,guitar,horn,bell,record,share,midi">
<meta name="author" content="thoseSkyModders">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Sky Music">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="Sky.png">
<meta property="og:image" content="https://repository-images.githubusercontent.com/261796811/08f6ec80-9ce7-11ea-8bf1-800c977cfaf1">
<meta property="og:site_name" content="Sky Music">
<meta property="og:title" content="Sky Music App!">
<meta property="og:url" content="https://sky-music.herokuapp.com/">
<meta property="og:description" content="Play/Practice/Share Sky songs with many instruments,keys and functions!">
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" href="/favicon.png?v=2" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<title>Sky Music</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body style="touch-action: pan-x pan-y;">
<div id="setScale" align=center>
<h2 id="welcome-text">Welcome to Sky Music!</h2>
<div id="scale-text">
Press + and - to change how the page looks!<br>
You can always change this in the settings<br>
</div>
<button class="skyButton" style="width: 30px;" onclick="changeScale(-1)">-</button>
<div type="number" id="scaleNumber" >100</div>%
<button class="skyButton" style="width: 30px;" onclick="changeScale(1)">+</button><br>
<button class="skyButton" id="confirm-scale" onclick="confirmScale()" style="width: 90%;">CONFIRM</button>
</div>
<!--https://www.flaticon.com/free-icon/rotate-smartphone_81564?term=rotate%20phone&page=1&position=22-->
<div id="rotateDevice" onclick="this.style.display = 'none'">
<button onclick="ignoreRotation()"class="skyButton" id="ignore-button-rotation" style=" position:absolute; left: 0;">Never show again</button>
<img src="icons/rotate.svg" width="50%" height="50%">
<h1 style="margin:0.5em;" id="rotate-device-text">The website is better used in Landscape, please rotate your device.</h1>
<h2 class="bottom" id="click-to-close-rotation"style="color: rgba(235, 0, 27, 1)">Click anywhere to close</h2>
</div>
<!--https://www.flaticon.com/free-icon/fullscreen_483332?term=exit%20fullscreen&page=1&position=2-->
<img id="exitFullScreenBtn"src="icons/exitFullScreen.png" onclick="exitFullScreen()">
<div class="secondPage" id="secondPage" onclick="$('#icon-bar').fadeOut(200),menuButton.style.display = 'block'">
<div id="login">
<div id="loginContainer">
<h1 id="account-tab-text">Account</h1>
<div>
<label id="email-text-login" class="formLabel"><b>EMAIL</b></label>
<input type="text" placeholder="Enter email" class="formInput" id="emailLogin">
<label id="password-text-login" class="formLabel"><b>PASSWORD</b></label>
<input type="password" placeholder="Enter Password" class="formInput" id="passwordLogin">
<button id="login-button" onclick = "login(false)">LOGIN</button>
<span onclick="toggleRegister()"><a id="create-account-button" href="#">Create account</a></span><span id="forgotLink" onclick="toggleReset()"><a id="forgot-password-text" href="#">Forgot password?</a></span>
</div>
</div>
</div>
<div id="register">
<div id="registerContainer">
<h1 id="register-tab-text">Register to Sky Music!</h1>
<div>
<label id="email-text-register" class="formLabel"><b>EMAIL</b></label>
<input type="text" placeholder="Enter Email" class="formInput" id="emailRegister">
<label id="password-text-register" class="formLabel"><b>PASSWORD</b></label>
<input type="password" placeholder="Enter Password" class="formInput" id="passwordRegister">
<label id="confirm-password-text-register" class="formLabel"><b>CONFIRM PASSWORD</b></label>
<input type="password" placeholder="Enter again Password" class="formInput" id="passwordRegister2">
<button id="register-button" class="submitButton" onclick = "register()">REGISTER</button>
<span onclick="resetPages()"><a id="go-back-register" href="#">Go back</a></span>
</div>
</div>
</div>
<div id="confirmRegistration">
<div id="confirmContainer">
<h1 id="confirm-register-tab-text" >Register to Sky Music!</h1>
<div>
<label id="code-text-confirm" class="formLabel"><b>CODE</b></label>
<input type="password" placeholder="Enter code" class="formInput" id="codeConfirmation">
<button id="confirm-button-confirm" class="submitButton" onclick = "confirmEmail()">CONFIRM</button>
<span id="go-back-confirm" onclick="resetPages()"><a href="#">Go back</a></span>
</div>
</div>
</div>
<div id="resetPassword">
<div id="resetContainer">
<h1 id="reset-tab-text" >Reset Password!</h1>
<div>
<label id="email-text-reset" class="formLabel"><b>EMAIL</b></label>
<input type="text" placeholder="Enter Email" class="formInput" id="emailReset">
<button id="submit-text-reset" class="submitButton" onclick = "resetPassword()">SUBMIT</button>
<span id="go-back-reset" onclick="resetPages()"><a href="#">Go back</a></span>
</div>
</div>
</div>
<div id="verifyPasswordAndCode">
<div id="resetContainer">
<h1 id="verify-tab-text" >Reset Password!</h1>
<div>
<label id="code-text-verify" class="formLabel"><b>RESET CODE</b></label>
<input type="text" placeholder="Enter reset code" class="formInput" id="resetcodeConfirmation">
<label id="password1-text-verify" class="formLabel"><b>NEW PASSWORD</b></label>
<input type="password" placeholder="Enter your new password" class="formInput" id="newpassword">
<label id="password2-text-verify"class="formLabel"><b>CONFIRM NEW PASSWORD</b></label>
<input type="password" placeholder="Re-enter your new password" class="formInput" id="newpasswordconfirm">
<button id="submit-button-verify" class="submitButton" onclick = "checkResetCode()">SUBMIT</button>
<span id="go-back-verify" onclick="resetPages()"><a href="#">Go back</a></span>
</div>
</div>
</div>
<div id="settings">
<div id="settingsContainer">
<h1 id="settings-tab-text" >Settings</h1>
<div style="overflow-y:scroll; height: 72vh; margin-bottom: 1em;">
<select name="Language" onchange="changeLanguage(this.value)"id="language-selector">
<option id="language-selector-text" selected disabled>Select language</option>
<option>English</option>
<option>Traditional_chinese_繁體中文</option>
<option>Italiano</option>
<option>Français</option>
<option>Português_Brasileiro</option>
<option>Deutsch</option>
<option>Русский</option>
<option>한국어</option>
<option>Română</option>
<option>Español</option>
</select>
<button onclick = "toggleScaleDiv()" id="change-zoom-button" >Change website zoom</button>
<button onclick = "toggleFullScreenSetting()" id="turnOffFullscreen">Turn off auto fullscreen</button>
<button onclick = "changeSettings(this)" id="Disable-next-key-practice">Disable next key practice</button>
<button onclick = "changeSettings(this)" id="Hide-practice-note-animation">Hide practice note animation</button>
<button onclick = "changeSettings(this)" id="Display-Note-Names">Display Note Names</button>
<button onclick = "checkMidiAccess()" id="check-midi-button" >Check MIDI support</button>
<button onclick = "resetLocalStorage()" id="reset-all-button" >Reset all songs and settings</button>
<button onclick = "togglecompatibilityMode()" id="change-button-input-mode" >Turn on compability mode</button>
</div>
<span id="go-back-settings" onclick="resetPages()"><a href="#">Go back</a></span>
</div>
</div>
</div>
<div id="savedSongsDivWrapper" class="floatingDiv">
<div class="tab">
<button id="localStoredBtn" class="tablinks active" onclick="openSonglist(event, 'localSongs')">My songs</button>
<button id="accountBtn" class="tablinks" onclick="openSonglist(event, 'dbSongs')">Account songs</button>
</div>
<!--Local Songs-->
<div id="localSongs" class="tabcontent">
<h3 id="local-tab-text">Here are all your songs!</h3>
<div id="savedSongsDiv" class="topSavedSongsDiv"></div>
<div class = "bottomSavedSongsDiv">
<button id="import-button" class="skyButton" onclick="importSongs()">Import songs</button>
<button id="download-songs-button" class="skyButton" onclick="downloadSongs()">Download songs</button>
<input type=file style="display:none;" id="filePicker">
</div>
</div>
<!--Database Songs-->
<div id="dbSongs" class="tabcontent">
<h3 id="account-songs-tab-text" >Here are all the songs saved in your account!</h3>
<div id="dbSongsDiv" class="topSavedSongsDiv"></div>
<div class = "bottomSavedSongsDiv">
<button id="reload-button" class="skyButton" onclick="syncDB()">Reload</button>
<button id="store-all-button" class="skyButton" onclick="storeSongsLocally()">Store all songs locally</button>
</div>
</div>
</div>
<div class="videoWrapper video">
<div class="vsc-controller" data-vscid="jvm0gu2z7"></div>
<video id="video1"preload="auto" playsinline="" muted autoplay loop data-vscid="jvm0gu2z7">
<source src="./AnimatedBG/skygame-banner2.mp4" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2"">
</video>
</div>
<div id="promptDiv">
<div id="promptMessage">Write song name</div>
<input type="text" id="promptInput" placeholder="Song name"><br>
<input class="skyButton" id="promptCancel" type="button" value="Cancel">
<input class="skyButton" id="promptOK" type="button" value="OK">
</div>
<div id="firstPage">
<button id="menu" style="display: block;"onclick="showMenu()"></button>
<div id="icon-bar" style="height: 200vh;">
<button class="skyButton_2" onclick='resetPages(),showMenu(),document.getElementById("login").style.display = "none"'><p id="main-page-text-menu" class="texts">Main page</p></button>
<button class="skyButton_2" onclick="toggleLogin()"><p id="account-text-menu" class="texts">Account</p></button>
<button class="skyButton_2" onclick="toggleSettings()"><p id="settings-text-menu" class="texts">Settings</p></button>
<button class="skyButton_2" onclick='window.open("songComposer.html")'><p id="song-composer-text-menu" class="texts">Song composer</p></button>
<button class="skyButton_2" onclick='window.open("songLibrary.html")'><p id="library-text-menu" class="texts">Song Library</p></button>
<button class="skyButton_2" onclick='window.open("help.html")'><p id="help-text-menu" class="texts">Need help?</p></button>
<button class="skyButton_2" onclick='window.open("sheetDisplayer.html")'><p id="sheet-displayer-text-menu" class="texts">Sheet displayer</p></button>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="MFTNUQL2Z8UWW" />
<input style="width: 60%; position:absolute; margin-top:15vh; margin-left:20%;" type="image" src="https://cdn.discordapp.com/attachments/705815759879798824/709162406168756314/paypal-donate-button.png" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
<div class="menuDiv">
<button class="skyButton" id="manageRecordingsBtn" onclick="toggleSavedSongs()">Manage Recordings</button>
<button class="skyButton" id="toggleRecordBtn" onclick="toggleRecord()"> Start/Stop recording</button>
<button class="musicButton" id="toggleInstruments" onclick="toggleInstrumentList()"></button>
<button class="pitchButton" id="togglePitchList" onclick="togglePitchList()">Key</button>
<button class="pitchButton" id="toggleReverbBtn" style="font-size: 1.3em; background-image: url(./icons/reverb.png);" onclick="toggleReverb()"></button>
<button id="stopSong" onclick="stopSong()"></button>
</div>
<div id=touch>
<div class="Row1" id="row1"></div>
<div class="Row2" id="row2"></div>
<div class="Row3" id="row3"></div>
</div>
<div id="instrumentsNew" class="instrumentsWrapper">
<button type="button" id="pianoBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/piano.png);"></button>
<button type="button" id="harpBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/harp.png);"></button>
<button type="button" id="guitarBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/guitar.png);"></button>
<button type="button" id="fluteBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/flute.png);"></button>
<button type="button" id="xylophoneBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/xylophone.png);"></button>
<button type="button" id="hornBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/horn.png);"></button>
<button type="button" id="drumBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/drum.png);"></button>
<button type="button" id="bellBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/bell.png);"></button>
<!--<button type="button" id="bassBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/bass.png);"/></button>
<button type="button" id="winterPiano" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/winterPiano.png);"/></button>
<button type="button" id="banjoBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/banjoBtn.png);"/></button>
<button type="button" id="panfluteBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/panflute.png);"/></button>
TO REMOVE ONCE NEW INSTRUMENTS ARE ADDED
-->
<div id="old-text" style="color: rgba(235, 0, 27, 1); font-weight: bold; margin-top: 15px; margin-bottom: 5px;">
OLD
</div>
<button type="button" id="oldHarpBtn" class="instrumentButton" onclick="changeInstrument(this)" style="background-image: url(./images/harp.png);"/>
</div>
<div id="pitchTab" class="instrumentsWrapper">
<button class="pitchSelection" onclick="changePitch(this)">1</button>
<button class="pitchSelection" onclick="changePitch(this)">2</button>
<button class="pitchSelection" onclick="changePitch(this)">3</button>
<button class="pitchSelection" onclick="changePitch(this)">4</button>
<button class="pitchSelection" onclick="changePitch(this)">5</button>
<button class="pitchSelection" onclick="changePitch(this)">6</button>
<button class="pitchSelection" onclick="changePitch(this)">7</button>
<button class="pitchSelection" onclick="changePitch(this)">8</button>
<button class="pitchSelection" onclick="changePitch(this)">9</button>
<button class="pitchSelection" onclick="changePitch(this)">10</button>
<button class="pitchSelection" onclick="changePitch(this)">11</button>
<button class="pitchSelection" onclick="changePitch(this)" style="border:none;">12</button>
</div>
<div id="songRange" class="songRange">
<input type="number" id="startingNoteRange" value="0"><br>
<input id="rangePicker" type="range" max="10" min="0" orient="vertical" ><br>
<input type="button" style="background-color: transparent; border: none; font-size: 1.5em; outline: none;" onclick="retry()" value="🔄">
</div>
</div>
<div id="floatingMessage" class="floatingMessage"> placeholder text </div>
</body>
<input type="sleeping" placeholder="username" style="display: none"> <!-- Easter egg-->
<script type="text/javascript" src="app.js"></script>
</html>