This repository has been archived by the owner on Feb 6, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoptions.html
310 lines (285 loc) · 14.1 KB
/
options.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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animal Crossing Music - Options</title>
<link rel="stylesheet" href="css/chrome-bootstrap.css">
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/options.css">
<script src="scripts/options/zepto.min.js"></script>
<script src="scripts/options/navigation.js"></script>
<script src="scripts/global/tune_player.js"></script>
<script src="scripts/options/tune_editor.js"></script>
<script src="scripts/options/options.js"></script>
<script src="scripts/options/contributors.js"></script>
<style>
.chrome-bootstrap .frame .view {
-webkit-margin-start: 180px;
}
</style>
</head>
<body class="chrome-bootstrap">
<div class="frame">
<div class="navigation">
<h1 style="color: #5C6166;">Animal Crossing Music</h1>
<ul class="menu" style="margin-top: 4em;">
<li class="selected">
<a href="#options">Options</a>
</li>
<li class="town-tune-link" id ="town-tune-button">
<a href="#town-tune">Town Tune Editor</a>
</li>
<li class="help-link">
<a href="#about">About</a>
</li>
<li class="changelog-link">
<a href="#changelog">Changelog</a>
</li>
</ul>
<table class="nav-buttons">
<td><a target="_blank" href="https://chrome.google.com/webstore/detail/animal-crossing-music/fcedlaimpcfgpnfdgjbmmfibkklpioop"><button type="button" class="nav-button" title="Chrome Webstore"><img src="img/social/webstore.png" /></button></a></td>
<td><a target="_blank" href="https://discord.gg/4FMrEF8"><button type="button" class="nav-button" title="Discord Server"><img src="img/social/discord.png" /></button></a></td>
<td><a target="_blank" href="https://github.com/PikaDude/ac-music-extension-revived"><button type="button" class="nav-button" title="GitHub"><img src="img/social/github.png" /></button></a></td>
</table>
<table class="nav-buttons nav-buttons-2">
<td><a target="_blank" href="https://twitter.com/ac_music_ext"><button type="button" class="nav-button" title="Twitter"><img src="img/social/twitter.png" /></button></a></td>
<td><a target="_blank" href="https://animal-crossing-music-extension.github.io"><button type="button" class="nav-button" title="Website"><img src="img/social/website.png" /></button></a></td>
</table>
</div>
<div class="mainview view">
<div id="options" class="selected">
<header>
<h1>Options</h1>
</header>
<div class="content">
<section>
<h3>Volume</h3>
<p>Adjust the volume that the extension's music plays at</p>
<span class="checkbox">
<label>
<input aria-label="Volume" id="volume" type="range" min="0" max="1" step="0.01">
</label>
</span>
<span id="volumeText"></span>
</section>
<section id="music-selection"> <h3>Music</h3>
<p>Select which game's music you wish to listen to</p>
<div class="radio">
<input id="animal-crossing" name="music-choice" type="radio"><label for="animal-crossing"><span><span></span></span>Animal Forest/Animal Crossing</label>
</div>
<div class="radio">
<input id="wild-world" name="music-choice" type="radio"><label for="wild-world"><span><span></span></span>Wild World/City Folk/Let's Go to the City</label>
</div>
<div class="radio">
<input id="new-leaf" name="music-choice" type="radio"><label for="new-leaf"><span><span></span></span>New Leaf</label>
</div>
<div class="radio">
<input id="game-random" name="music-choice" type="radio"><label for="game-random"><span><span></span></span>Random!</label>
</div>
</section>
<section id="weather-selection"> <h3>Weather</h3>
<p>Select the weather variation you wish to listen to</p>
<div class="radio">
<input id="sunny" name="weather-choice" type="radio"><label for="sunny"><span><span></span></span>Sunny/Normal</label>
</div>
<div class="radio">
<input id="snowing" name="weather-choice" type="radio"><label for="snowing"><span><span></span></span>Snowing</label>
</div>
<div class="radio">
<input id="raining" name="weather-choice" type="radio"><label for="raining"><span><span></span></span>Raining</label>
</div>
<div class="radio">
<input id="live" name="weather-choice" type="radio"><label for="live"><span><span></span></span>Live Weather <a href="#live-weather-location" id="live-weather-location-link" class="exclamation">!</a></label>
</div>
<div class="radio">
<input id="weather-random" name="weather-choice" type="radio"><label for="weather-random"><span><span></span></span>Random!</label>
</div>
</section>
<section>
<h3>K.K. Slider</h3>
<p>Customize K.K. Slider's behaviour</p>
<h4>Play Times</h4>
<div class="radio">
<input id="no-kk" name="enable-kk" type="radio"><label for="no-kk"><span><span></span></span>Do not play K.K. Slider songs</label>
</div>
<div class="radio">
<input id="enable-kk" name="enable-kk" type="radio"><label for="enable-kk"><span><span></span></span>Play K.K. Slider songs on Saturdays from
8pm–12am</label>
</div>
<div class="radio">
<input id="always-kk" name="enable-kk" type="radio"><label for="always-kk"><span><span></span></span>Play K.K. Slider songs at all times</label>
</div>
</section>
<section id="kk-version-selection">
<h4>Version Choice</h4>
<div class="radio">
<input id="kk-version-live" name="kk-version" type="radio"><label for="kk-version-live"><span><span></span></span>Live</label>
</div>
<div class="radio">
<input id="kk-version-aircheck" name="kk-version" type="radio"><label for="kk-version-aircheck"><span><span></span></span>Aircheck</label>
</div>
<div class="radio">
<input id="kk-version-both" name="kk-version" type="radio"><label for="kk-version-both"><span><span></span></span>Both</label>
</div>
</section>
<section>
<h3>Town Tune <a id="town-tune-button-link" class="exclamation">!</a></h3>
<p>Customize your custom town tune's behaviour</p>
<div class="checkbox">
<input id="enable-town-tune" type="checkbox"><label for="enable-town-tune"><span></span>Play your custom town tune on the hour</label>
</div>
<div class="checkbox">
<input id="absolute-town-tune" type="checkbox"><label for="absolute-town-tune"><span></span>Play your custom town tune regardless if the music is paused</label>
</div>
</section>
<section>
<h3>Notifications</h3>
<p>Customize desktop notification behaviour</p>
<div class="checkbox">
<input id="enable-notifications" type="checkbox"><label for="enable-notifications"><span></span>Enable Chrome notifications on song change</label>
</div>
<div class="checkbox">
<input id="enable-badge" type="checkbox"><label for="enable-badge"><span></span>Display text on badge</label>
</div>
</section>
<section>
<h3>Tab Audio Behaviour</h3>
<p>Control what the extension does while a tab is playing audio</p>
<div class="radio" style="height: 21px">
<input id="tab-audio-reduce" name="tab-audio" type="radio"><label for="tab-audio-reduce" style="line-height: unset"><span
style="vertical-align: middle;"><span></span></span>Reduce the extension's music by <input id="tab-audio-reduce-value" name="tab-audio" type="number"
max="100" min="0">%</label>
</div>
<div class="radio">
<input id="tab-audio-pause" name="tab-audio" type="radio"><label for="tab-audio-pause"><span><span></span></span>Pause the extension's music</label>
</div>
<div class="radio">
<input id="tab-audio-nothing" name="tab-audio" type="radio"><label for="tab-audio-nothing"><span><span></span></span>Do nothing</label>
</div>
</section>
<section id="live-weather-location">
<h3>Live Weather Location</h3>
<p>Select the location to fetch the live weather information from. The live weather synchronizes with the extension's music</p>
<div class="text">
<input type="text" id="zip-code" aria-label="Zip Code" value="98052" placeholder="Zip Code">
<input type="text" id="country-code" aria-label="Country Code" value="US" placeholder="Country Code">
<button type="button" id="update-location">Update Location</button>
<label>(First box is <a href="http://www.geonames.org/postal-codes/" target="_blank">zip code</a>, second is <a href="https://countrycode.org/"
target="_blank">country code</a>)</label>
<p id="weather-response"></p>
</div>
</section>
</div>
</div>
<div id="town-tune">
<header>
<h1>Town Tune Editor</h1>
</header>
<div class="content">
<section>
<p>Compose a tune to be played every hour on the hour</p>
<div class="pitch-template hidden">
<input class="pitch-name" type="text" maxlength="2" size="2">
<input class="pitch-slider" type="range" min="0" max="14" step="1" orient="vertical">
</div>
<div class="staff staff1"></div>
<div class="staff staff2"></div>
</section>
<header>
<div style="padding: 0; margin: 0; height:18px;"></div>
<div class="controls">
<button class="play-tune">Play!</button>
<div class="spacer"></div>
<button class="save-tune">Save</button>
</div>
</header>
</div>
</div>
<div id="about">
<header>
<h1>About</h1>
</header>
<div class="content">
<div class="image-container">
<img src="img/icons/icon/128.png" width="48" height="48">
<div class="image-container-text">
<h2>Animal Crossing Music</h2>
<span>Play Animal Crossing's smooth background music in real-time throughout your day.</span>
<br />
<span id="version-number"></span>
</div>
</div>
<div>
<a target="_blank" href="https://discord.gg/4FMrEF8"><button role="link">Join our Discord Server to get help using this extension</button></a>
<a target="_blank" href="https://github.com/PikaDude/ac-music-extension-revived/issues"><button role="link">Report an issue</button></a>
<a target="_blank" href="https://github.com/PikaDude/ac-music-extension-revived"><button role="link">GitHub Repository</button></a>
</div>
<br />
<h3>Contributors</h3>
<p>These people have helped make the extension possible!</p>
<p id="contributors-failed">Failed to load contributors :(</p>
<table>
<tbody id="contributors-table"></tbody>
</table>
<br />
<p>Extension originally created by <a href="https://www.neogaf.com/members/andrex.20593/">Andrex</a> from <a href="https://www.neogaf.com/threads/real-time-animal-crossing-music.473164/post-37661922">NeoGAF</a>.</p>
<p>Extension improved by <a href="https://www.neogaf.com/members/blazescorch2.142800/">blazescorch2</a>.</p>
<p>Idea for extension taken from <a href="http://tane.us/ac/">tane.us</a>.</p>
<p>This options page uses <a href="https://github.com/roykolak/chrome-bootstrap">Chrome Bootstrap</a> by Roy Kolak under the MIT License.</p>
</div>
</div>
<div id="changelog">
<header>
<h1>Changelog</h1>
</header>
<div class="content">
<h3>Version 4.0.0<span class="changelog-date"> - ??th of February 2020</span></h3>
<ul class="changelog-list">
<li>Added Wild World/City Folk/Let's Go to the City Snowing and Raining weather alternatives</li>
<li>Made time checker more accurate</li>
<li>Made Town Tune Editor look nicer</li>
<li>Added Live Weather option</li>
<li>Decreased volume step amount</li>
<li>Add option to toggle badge text</li>
<li>Use Chrome Bootstrap on the options page</li>
<li>Made weather and game options separate</li>
<li>Added Animal Crossing Snowing weather alternative</li>
<li>Updated extension icon</li>
<li>Added more extension badges</li>
<li>Updated K.K. Slider icon to a New Leaf render</li>
<li>Removed white background on hourly notification icon</li>
<li>Added K.K. Slider Aircheck and Live version choices</li>
<li>Updated badge text to show full hour (E.g. 8pm rather than 8p)</li>
<li>Added support for Chrome's Media Session service</li>
<li>Added support for remote streaming for music rather than bundling music with the extension</li>
<li>Updated every song to be of the highest possible quality, removing any static where possible, bad loops and lowering any excessively high bitrates</li>
<li>Added every single K.K. Slider song (all 91 songs)</li>
<li>Reorganised extension's file structure</li>
<li>Added dynamic Contributors/Credits list</li>
<li>Added credit links to original authors</li>
<li>Added support for more desktop notifications</li>
<li>Added dynamic loop times function</li>
<li>Added an option to pause or reduce music volume while a tab is playing audio</li>
<li>Added an option to play the town tune regardless if the extension's music is paused</li>
<li>Added better error handling</li>
<li>Polished options page</li>
<li>Many other various additions, bug fixes, code refactors and changes to make Animal Crossing Music Extension the BEST Animal Crossing extension ever!</li>
</ul>
</div>
</div>
</div>
</div>
<div id="tabAudioModal" class="modal">
<div class="modal-content">
<p class="modal-title">Note!</p>
<p>The "Tab Audio Behaviour" option requires additional permissions to function, specifically the "Tabs" permission. Due to a quirk in Chromium, this permission is defined
as "Read your browsing history". This permission does NOT give the extension permission to view your actual browsing history, but allows it to see what tabs you currently
have open, which we use ONLY to check to see if any tabs are playing audio. If you are okay with that, press "Allow" on the next dialogue.</p>
<a target="_blank" href="https://developer.chrome.com/extensions/permission_warnings#view_warnings">For more info, refer to the Chrome Developer Docs.</a>
<br />
<br />
<button id="tabAudioModalDismiss">Understood!</button>
</div>
</div>
</body>
</html>