---
layout: default
title: Sunniesnow
head: _head.html
description: Sunniesnow is a web rhythm game
---

<h1>Sunniesnow</h1>
<div id="loading">Loading site resources...</div>

<div id="main-wrapper" style="display: none;" data-i18n="main">

<div id="main-settings" data-type="collection">

<fieldset>
	<legend id="level-file-category"></legend>

	<div>
		<input type="radio" id="level-file-online-radio" name="level-file" value="online" checked data-hooks="radio-input|zip" data-input="level-file-online" data-load-button="level-file-button">
		<input type="text" id="level-file-online" placeholder="sunniesnow-sample" data-prerequisite="level-file-online-radio" data-hooks="online(chart,.ssc)">
	</div>

	<div>
		<input type="radio" id="level-file-upload-radio" name="level-file" value="upload" data-input="level-file-upload">
		<input type="file" id="level-file-upload" accept=".ssc" data-prerequisite="level-file-upload-radio">
	</div>

	<button type="button" id="level-file-button"></button>
</fieldset>

<div>
	<select id="music-select" data-type="zip-entry" data-source="level-file" data-accept="audio/*|video/*" data-hooks="audio"></select>
	<select id="chart-select" data-type="zip-entry" data-source="level-file" data-accept=".json" data-hooks="json"></select>
</div>

<details>
	<summary id="judgement-settings"></summary>

	<fieldset>
		<legend id="judgement-windows-category"></legend>

		<div>
			<input type="radio" id="judgement-windows-loose-radio" name="judgement-windows" value="loose" checked>
		</div>

		<div>
			<input type="radio" id="judgement-windows-medium-radio" name="judgement-windows" value="medium">
		</div>

		<div>
			<input type="radio" id="judgement-windows-strict-radio" name="judgement-windows" value="strict">
		</div>

		<div>
			<input type="radio" id="judgement-windows-rigorous-radio" name="judgement-windows" value="rigorous">
		</div>

		<div>
			<input type="radio" id="judgement-windows-custom-radio" name="judgement-windows" value="custom">
			<div class="table-wrapper" data-prerequisite="judgement-windows-custom-radio">
				<table>
					<thead>
						<tr>
							<td></td>
							<th id="judgement-windows-custom-early-bad" scope="col"></th>
							<th id="judgement-windows-custom-early-good" scope="col"></th>
							<th id="judgement-windows-custom-early-perfect" scope="col"></th>
							<th id="judgement-windows-custom-late-perfect" scope="col"></th>
							<th id="judgement-windows-custom-late-good" scope="col"></th>
							<th id="judgement-windows-custom-late-bad" scope="col"></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th id="judgement-windows-custom-tap" scope="row"></th>
							<td><input type="number" id="judgement-windows-custom-tap-early-bad" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-tap-early-good" value="-300" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-tap-early-perfect" value="-120" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-tap-late-perfect" value="120" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-tap-late-good" value="300" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-tap-late-bad" value="400" step="10"></td>
						</tr>
						<tr>
							<th id="judgement-windows-custom-drag" scope="row"></th>
							<td><input type="number" id="judgement-windows-custom-drag-early-bad" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-early-good" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-early-perfect" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-late-perfect" value="400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-late-good" value="400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-late-bad" value="400" step="10"></td>
						</tr>
						<tr>
							<th id="judgement-windows-custom-flick" scope="row"></th>
							<td><input type="number" id="judgement-windows-custom-flick-early-bad" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-flick-early-good" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-flick-early-perfect" value="-300" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-flick-late-perfect" value="120" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-flick-late-good" value="300" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-flick-late-bad" value="400" step="10"></td>
						</tr>
						<tr>
							<th id="judgement-windows-custom-hold" scope="row"></th>
							<td><input type="number" id="judgement-windows-custom-hold-early-bad" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-hold-early-good" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-hold-early-perfect" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-hold-late-perfect" value="400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-hold-late-good" value="400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-hold-late-bad" value="400" step="10"></td>
						</tr>
						<tr>
							<th id="judgement-windows-custom-hold-end" scope="row"></th>
							<td></td>
							<td><input type="number" id="judgement-windows-custom-hold-end-early-good" value="0.4" step="0.1" max="1"></td>
							<td><input type="number" id="judgement-windows-custom-hold-end-early-perfect" value="0.7" step="0.1" max="1"></td>
						</tr>
						<tr>
							<th id="judgement-windows-custom-drag-flick" scope="row"></th>
							<td><input type="number" id="judgement-windows-custom-drag-flick-early-bad" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-flick-early-good" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-flick-early-perfect" value="-300" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-flick-late-perfect" value="120" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-flick-late-good" value="300" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-drag-flick-late-bad" value="400" step="10"></td>
						</tr>
						<tr>
							<th id="judgement-windows-custom-head-only-hold" scope="row"></th>
							<td><input type="number" id="judgement-windows-custom-head-only-hold-early-bad" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-head-only-hold-early-good" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-head-only-hold-early-perfect" value="-400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-head-only-hold-late-perfect" value="400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-head-only-hold-late-good" value="400" step="10"></td>
							<td><input type="number" id="judgement-windows-custom-head-only-hold-late-bad" value="400" step="10"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</fieldset>

	<fieldset>
		<legend id="note-hit-size-category"></legend>

		<div class="table-wrapper">
			<table>
				<thead>
					<tr>
						<td></td>
						<th id="note-hit-size-prior" scope="col"></th>
						<th id="note-hit-size-normal" scope="col"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th id="note-hit-size-tap-th" scope="row"></th>
						<td><input type="number" id="note-hit-size-tap-prior" value="0" min="0" step="0.1"></td>
						<td><input type="number" id="note-hit-size-tap" value="3.2" min="0" step="0.1"></td>
					</tr>
					<tr>
						<th id="note-hit-size-drag-th" scope="row"></th>
						<td><input type="number" id="note-hit-size-drag-prior" value="0" min="0" step="0.1"></td>
						<td><input type="number" id="note-hit-size-drag" value="3.2" min="0" step="0.1"></td>
					</tr>
					<tr>
						<th id="note-hit-size-flick-th" scope="row"></th>
						<td><input type="number" id="note-hit-size-flick-prior" value="0" min="0" step="0.1"></td>
						<td><input type="number" id="note-hit-size-flick" value="3.2" min="0" step="0.1"></td>
					</tr>
					<tr>
						<th id="note-hit-size-hold-th" scope="row"></th>
						<td><input type="number" id="note-hit-size-hold-prior" value="0" min="0" step="0.1"></td>
						<td><input type="number" id="note-hit-size-hold" value="3.2" min="0" step="0.1"></td>
					</tr>
					<tr>
						<th id="note-hit-size-drag-flick-th" scope="row"></th>
						<td><input type="number" id="note-hit-size-drag-flick-prior" value="0" min="0" step="0.1"></td>
						<td><input type="number" id="note-hit-size-drag-flick" value="3.2" min="0" step="0.1"></td>
					</tr>
					<tr>
						<th id="note-hit-size-head-only-hold-th" scope="row"></th>
						<td><input type="number" id="note-hit-size-head-only-hold-prior" value="0" min="0" step="0.1"></td>
						<td><input type="number" id="note-hit-size-head-only-hold" value="3.2" min="0" step="0.1"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</fieldset>

	<fieldset>
		<legend id="offset-category"></legend>

		<div>
			<input type="number" id="offset" value="0" step="10" data-multiplier="0.001">
		</div>
	</fieldset>

	<fieldset>
		<legend id="flick-mechanics-category"></legend>

		<div>
			<input type="number" id="min-flick-distance" value="0.4" min="0" step="0.1">
		</div>

		<div>
			<!-- It is later found that, in Lyrica, this value is actually effectively infinity.
			If I knew that when developing this, this options wouldn't have existed at all.
			However, now it is kept just because it is good to have customizability. -->
			<input type="number" id="max-flick-distance" value="999" min="0" step="0.1">
		</div>

		<div>
			<!-- The multiplier is pi/180 -->
			<input type="number" id="flick-angle-range" value="45" min="0" max="180" step="5" data-multiplier="0.01745329252">
		</div>

		<div>
			<input type="checkbox" id="overlapping-flick-fix">
		</div>
	</fieldset>

	<fieldset>
		<legend id="hold-mechanics-category"></legend>

		<div>
			<input type="number" id="hold-keep-size" value="999" min="0" step="0.1">
		</div>

		<div>
			<input type="number" id="hold-switch-tap-size" value="0" min="0" step="0.1">
		</div>

		<div>
			<input type="number" id="hold-switch-swipe-size" value="0" min="0" step="0.1">
		</div>

		<div>
			<input type="number" id="hold-screening-size" value="0" min="0" step="0.1">
		</div>

		<div>
			<input type="number" id="hold-release-leniency" value="0" min="0" step="10" data-multiplier="0.001">
		</div>
	</fieldset>

	<fieldset>
		<legend id="drag-mechanics-category"></legend>

		<div>
			<input type="checkbox" id="no-early-drag">
		</div>
	</fieldset>

	<fieldset>
		<legend id="miscellaneous-judgement-category"></legend>

		<div>
			<input type="checkbox" id="lyrica-5" checked>
		</div>

		<div>
			<input type="number" id="touch-screening-distance" value="0" min="0" step="0.1">
		</div>

		<div>
			<input type="number" id="same-priority-time-window" value="10" min="0" step="5" data-multiplier="0.001">
		</div>
	</fieldset>
</details>

<details>
	<summary id="visual-settings"></summary>

	<fieldset>
		<legend id="speed-category"></legend>

		<div>
			<input type="number" id="speed" value="2" min="0" step="0.1">
		</div>

		<div>
			<input type="number" id="tip-point-speed" value="1" min="0" step="0.1">
		</div>

		<div>
			<input type="number" id="tip-point-distance" value="1" step="0.1">
		</div>
	</fieldset>

	<fieldset>
		<legend id="note-size-category"></legend>

		<div>
			<input type="number" id="note-size-tap" value="0.95" min="0" step="0.05">
		</div>

		<div>
			<input type="number" id="note-size-drag" value="0.65" min="0" step="0.05">
		</div>

		<div>
			<input type="number" id="note-size-flick" value="0.95" min="0" step="0.05">
		</div>

		<div>
			<input type="number" id="note-size-hold" value="0.95" min="0" step="0.05">
		</div>

		<div>
			<input type="number" id="note-size-drag-flick" value="0.65" min="0" step="0.05">
		</div>

		<div>
			<input type="number" id="note-size-head-only-hold" value="0.95" min="0" step="0.05">
		</div>

		<div>
			<input type="number" id="note-size-bg-note" value="0.95" min="0" step="0.05">
		</div>
	</fieldset>

	<fieldset>
		<legend id="background-category"></legend>

		<div>
			<input type="radio" id="background-none-radio" name="background" value="none" data-hooks="avoid-null|radio-input|texture">
		</div>

		<div>
			<input type="radio" id="background-online-radio" name="background" value="online" data-input="background-online">
			<input type="text" id="background-online" value="default.svg" data-prerequisite="background-online-radio" data-hooks="online(background)">
		</div>

		<div>
			<input type="radio" id="background-from-level-radio" name="background" value="from-level" checked data-input="background-from-level">
			<select id="background-from-level" data-prerequisite="background-from-level-radio" data-type="zip-entry" data-source="level-file" data-accept="image/*"></select>
		</div>

		<div>
			<input type="radio" id="background-upload-radio" name="background" value="upload" data-input="background-upload">
			<input type="file" id="background-upload" accept="image/*" data-prerequisite="background-upload-radio">
		</div>
	</fieldset>

	<fieldset>
		<legend id="background-settings-category"></legend>

		<div>
			<input type="range" id="background-blur" value="20" min="0" max="100" step="1" data-output="background-blur-value">
			<output id="background-blur-value" for="background-blur"></output>
		</div>

		<div>
			<input type="range" id="background-brightness" value="0.5" min="0" max="1" step="0.05" data-output="background-brightness-value">
			<output id="background-brightness-value" for="background-brightness"></output>
		</div>
	</fieldset>

	<fieldset>
		<legend id="fx-category"></legend>

		<div>
			<input type="radio" id="fx-default-radio" name="fx" value="default" checked data-hooks="radio-input|zip">
		</div>

		<div>
			<input type="radio" id="fx-online-radio" name="fx" value="online" data-input="fx-online">
			<input type="text" id="fx-online" placeholder="empty" data-prerequisite="fx-online-radio" data-hooks="online(fx,.ssp)">
		</div>

		<div>
			<input type="radio" id="fx-upload-radio" name="fx" value="upload" data-input="fx-upload">
			<input type="file" id="fx-upload" accept=".ssp" data-prerequisite="fx-upload-radio">
		</div>
	</fieldset>

	<fieldset>
		<legend id="skin-category"></legend>

		<div>
			<input type="radio" id="skin-default-radio" name="skin" value="default" checked data-hooks="radio-input|zip">
		</div>

		<div>
			<input type="radio" id="skin-online-radio" name="skin" value="online" data-input="skin-online">
			<input type="text" id="skin-online" placeholder="empty" data-prerequisite="skin-online-radio" data-hooks="online(skin,.ssp)">
		</div>

		<div>
			<input type="radio" id="skin-upload-radio" name="skin" value="upload" data-input="skin-upload">
			<input type="file" id="skin-upload" accept=".ssp" data-prerequisite="skin-upload-radio">
		</div>
	</fieldset>

	<fieldset>
		<legend id="hud-category"></legend>

		<div>
			<select id="hud-top-center">
				<option id="hud-top-center-none" value="none">None</option>
				<option id="hud-top-center-title" value="title">Title</option>
				<option id="hud-top-center-difficulty-name" value="difficulty-name">Difficulty name</option>
				<option id="hud-top-center-difficulty" value="difficulty">Difficulty</option>
				<option id="hud-top-center-difficulty-and-name" value="difficulty-and-name">Difficulty name and difficulty</option>
				<option id="hud-top-center-combo" value="combo" selected>Combo</option>
				<option id="hud-top-center-score" value="score">Score</option>
				<option id="hud-top-center-accuracy" value="accuracy">Accuracy</option>
			</select>
		</div>

		<div>
			<select id="hud-top-left">
				<option id="hud-top-left-none" value="none">None</option>
				<option id="hud-top-left-title" value="title" selected>Title</option>
				<option id="hud-top-left-difficulty-name" value="difficulty-name">Difficulty name</option>
				<option id="hud-top-left-difficulty" value="difficulty">Difficulty</option>
				<option id="hud-top-left-difficulty-and-name" value="difficulty-and-name">Difficulty name and difficulty</option>
				<option id="hud-top-left-combo" value="combo">Combo</option>
				<option id="hud-top-left-score" value="score">Score</option>
				<option id="hud-top-left-accuracy" value="accuracy">Accuracy</option>
			</select>
		</div>

		<div>
			<select id="hud-top-right">
				<option id="hud-top-right-none" value="none">None</option>
				<option id="hud-top-right-title" value="title">Title</option>
				<option id="hud-top-right-difficulty-name" value="difficulty-name">Difficulty name</option>
				<option id="hud-top-right-difficulty" value="difficulty">Difficulty</option>
				<option id="hud-top-right-difficulty-and-name" value="difficulty-and-name">Difficulty name and difficulty</option>
				<option id="hud-top-right-combo" value="combo">Combo</option>
				<option id="hud-top-right-score" value="score" selected>Score</option>
				<option id="hud-top-right-accuracy" value="accuracy">Accuracy</option>
			</select>
		</div>
	</fieldset>

	<fieldset>
		<legend id="simultaneity-hints-category"></legend>

		<div>
			<span id="simultaneity-hints-introducer"></span>
			<input type="checkbox" id="double-line-tap" checked>
			<input type="checkbox" id="double-line-hold">
			<input type="checkbox" id="double-line-drag">
			<input type="checkbox" id="double-line-flick">
			<input type="checkbox" id="double-line-drag-flick">
			<input type="checkbox" id="double-line-head-only-hold">
		</div>

		<div>
			<input type="checkbox" id="force-double-line">
		</div>
	</fieldset>

	<fieldset>
		<legend id="opacity-category"></legend>

		<div>
			<input type="range" id="opacity-fake" value="1" step="0.05" min="0" max="1" data-output="opacity-fake-value">
			<output id="opacity-fake-value" for="opacity-fake"></output>
		</div>
	</fieldset>

	<fieldset>
		<legend id="fx-options-category"></legend>

		<div>
			<input type="checkbox" id="hide-fx-in-front">
		</div>

		<div>
			<input type="checkbox" id="hide-fx-perfect">
		</div>

		<div>
			<input type="checkbox" id="hide-fx-hold-start">
		</div>

		<div>
			<input type="checkbox" id="hide-fx-head-only-hold-start">
		</div>

		<div>
			<input type="checkbox" id="always-update-fx">
		</div>
	</fieldset>

	<fieldset>
		<legend id="scroll-visual-category"></legend>

		<div>
			<input type="number" id="scroll-judgement-line" value="0.8" step="0.05" data-prerequisite="scroll">
		</div>

		<div>
			<input type="number" id="scroll-distance" value="1" step="0.1" data-prerequisite="scroll">
		</div>
	</fieldset>

	<fieldset>
		<legend id="hide-category"></legend>

		<div>
			<input type="checkbox" id="hide-tip-points">
		</div>
		<div>
			<input type="checkbox" id="hide-notes">
		</div>
		<div>
			<input type="checkbox" id="hide-circles">
		</div>
		<div>
			<input type="checkbox" id="hide-bg-notes">
		</div>
		<div>
			<input type="checkbox" id="hide-fx">
		</div>
		<div>
			<input type="checkbox" id="hide-bg-pattern">
		</div>

	</fieldset>

	<fieldset>
		<legend id="fading-category"></legend>

		<div>
			<input type="number" id="fading-start" value="1" step="0.1" min="0" max="1">
		</div>

		<div>
			<input type="number" id="fading-duration" value="0.2" step="0.1" min="0">
		</div>
	</fieldset>

	<fieldset>
		<legend id="quality-category"></legend>

		<div>
			<input type="number" id="quality-big-text" value="1" step="0.1" min="0.1" max="1">
		</div>
	</fieldset>

	<fieldset>
		<legend id="misc-visual-category"></legend>

		<div>
			<input type="checkbox" id="touch-effects">
		</div>

		<div>
			<input type="checkbox" id="reverse-note-order">
		</div>

		<div>
			<input type="checkbox" id="circle-moves-with-note">
		</div>

		<div>
			<input type="checkbox" id="disable-ornament">
		</div>
	</fieldset>

</details>

<details>
	<summary id="audio-settings"></summary>

	<fieldset>
		<legend id="se-category"></legend>

		<div>
			<input type="radio" id="se-default-radio" name="se" value="default" checked data-hooks="radio-input|zip">
		</div>

		<div>
			<input type="radio" id="se-online-radio" name="se" value="online" data-input="se-online">
			<input type="text" id="se-online" placeholder="empty" data-prerequisite="se-online-radio" data-hooks="online(se,.ssp)">
		</div>

		<div>
			<input type="radio" id="se-upload-radio" name="se" value="upload" data-input="se-upload">
			<input type="file" id="se-upload" accept=".ssp" data-prerequisite="se-upload-radio">
		</div>
	</fieldset>

	<fieldset>
		<legend id="volume-category"></legend>

		<div>
			<input type="range" id="volume-se" min="0" max="2" step="0.05" value="1" data-output="volume-se-value">
			<output id="volume-se-value" for="volume-se"></output>
		</div>

		<div>
			<input type="range" id="volume-music" min="0" max="2" step="0.05" value="1" data-output="volume-music-value">
			<output id="volume-music-value" for="volume-music"></output>
		</div>
	</fieldset>

	<fieldset>
		<legend id="se-with-music-category"></legend>

		<div>
			<input type="checkbox" id="se-with-music">
		</div>
	</fieldset>

	<fieldset>
		<legend id="delay-category"></legend>

		<div>
			<input type="number" id="delay" value="0" step="10" data-multiplier="0.001">
		</div>
	</fieldset>

	<fieldset>
		<legend id="latency-hint-category"></legend>

		<div>
			<input type="radio" name="latency-hint" value="balanced" id="latency-hint-balanced-radio">
		</div>

		<div>
			<input type="radio" name="latency-hint" value="interactive" id="latency-hint-interactive-radio" checked>
		</div>

		<div>
			<input type="radio" name="latency-hint" value="playback" id="latency-hint-playback-radio">
		</div>

		<div>
			<input type="radio" name="latency-hint" value="value" id="latency-hint-value-radio">
			<input type="number" id="latency-hint-value" value="10" step="10" min="0" data-multiplier="0.001" data-prerequisite="latency-hint-value-radio">
		</div>
	</fieldset>

	<fieldset>
		<legend id="audio-time-category"></legend>

		<div>
			<input type="radio" name="audio-time" value="current-time" id="audio-time-current-time-radio" checked>
		</div>

		<div>
			<input type="radio" name="audio-time" value="get-output-timestamp" id="audio-time-get-output-timestamp-radio">
		</div>

		<div>
			<input type="radio" name="audio-time" value="output-latency" id="audio-time-output-latency-radio">
		</div>

		<div>
			<input type="radio" name="audio-time" value="worklet-processor" id="audio-time-worklet-processor-radio">
		</div>
	</fieldset>
</details>

<details>
	<summary id="haptic-settings"></summary>

	<fieldset>
		<legend id="vibration-category"></legend>

		<div>
			<input type="checkbox" id="vibration-with-music">
		</div>

		<div>
			<input type="number" id="vibration-delay" step="10" value="0">
		</div>

		<div>
			<input type="number" id="tap-vibration-time" min="0" step="10" value="0">
		</div>

		<div>
			<input type="number" id="drag-vibration-time" min="0" step="10" value="0">
		</div>

		<div>
			<input type="number" id="flick-vibration-time" min="0" step="10" value="0">
		</div>

		<div>
			<input type="number" id="hold-vibration-time" min="0" step="10" value="0">
		</div>

		<div>
			<input type="number" id="hold-vibration-period" min="0" step="100" value="300">
		</div>

		<div>
			<input type="range" id="hold-vibration-duty-cycle" min="0" max="1" step="0.05" value="0" data-output="hold-vibration-duty-cycle-value">
			<output id="hold-vibration-duty-cycle-value" for="hold-vibration-duty-cycle"></output>
		</div>

		<div>
			<input type="number" id="drag-flick-vibration-time" min="0" step="10" value="0">
		</div>

		<div>
			<input type="number" id="head-only-hold-vibration-time" min="0" step="10" value="0">
		</div>

		<div>
			<input type="checkbox" id="vibrate-during-head-only-hold">
		</div>
	</fieldset>
</details>

<details>
	<summary id="game-settings"></summary>

	<fieldset>
		<legend id="playfield-category"></legend>

		<div>
			<input type="number" id="playfield-width" min="0" step="25" value="250">
		</div>

		<div>
			<input type="number" id="playfield-height" min="0" step="25" value="150">
		</div>
	</fieldset>

	<fieldset>
		<legend id="scroll-category"></legend>

		<div>
			<input type="checkbox" id="scroll">
		</div>
	</fieldset>

	<fieldset>
		<legend id="autoplay-category"></legend>

		<div>
			<input type="checkbox" id="autoplay">
		</div>

		<div>
			<input type="checkbox" id="progress-adjustable" data-prerequisite="autoplay">
		</div>
	</fieldset>

	<fieldset>
		<legend id="chart-offset-category"></legend>

		<div>
			<input type="number" id="chart-offset" value="0" step="10" data-multiplier="0.001">
		</div>
	</fieldset>

	<fieldset>
		<legend id="game-speed-category"></legend>

		<div>
			<input type="number" id="game-speed" min="0.1" step="0.1" value="1">
		</div>
	</fieldset>

	<fieldset>
		<legend id="mirror-category"></legend>

		<div>
			<input type="checkbox" id="horizontal-flip">
		</div>

		<div>
			<input type="checkbox" id="vertical-flip">
		</div>
	</fieldset>

	<fieldset>
		<legend id="start-and-end-category"></legend>

		<div>
			<input type="number" id="start" step="0.01" value="0">
		</div>

		<div>
			<input type="number" id="end" step="0.01" value="1">
		</div>
	</fieldset>

	<fieldset>
		<legend id="preparation-time-category"></legend>

		<div>
			<input type="number" id="resume-preparation-time" min="0" value="1" step="0.5">
		</div>

		<div>
			<input type="number" id="beginning-preparation-time" min="0" value="1" step="0.5">
		</div>
	</fieldset>

	<fieldset>
		<legend id="pause-category"></legend>

		<div>
			<input type="number" id="pause-double-time" min="0" value="0" step="0.5">
		</div>

		<div>
			<input type="checkbox" id="notes-priority-over-pause">
		</div>

		<div>
			<input type="checkbox" id="pause-fullscreen" checked>
		</div>

		<div>
			<input type="checkbox" id="pause-blur" checked>
		</div>

		<div>
			<input type="checkbox" id="hide-pause-ui">
		</div>

		<div>
			<input type="checkbox" id="pause-finish">
		</div>

		<div>
			<span id="second-pause-introducer"></span>
			<input type="radio" name="second-pause" value="disabled" id="second-pause-disabled-radio">
			<input type="radio" name="second-pause" value="resume" id="second-pause-resume-radio" checked>
			<input type="radio" name="second-pause" value="toggle-ui" id="second-pause-toggle-ui-radio">
		</div>
	</fieldset>
</details>

<details>
	<summary id="control-settings"></summary>

	<fieldset>
		<legend id="keyboard-category"></legend>

		<div>
			<input type="checkbox" id="enable-keyboard" checked>
		</div>

		<div>
			<input type="checkbox" id="keyboard-whole-screen" data-prerequisite="enable-keyboard">
		</div>

		<div>
			<input type="text" id="exclude-keys" value="Escape PrintScreen Alt Control Fn Meta F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12" data-prerequisite="enable-keyboard" data-hooks="space-list(Spacebar)">
		</div>

		<div>
			<input type="text" id="pause-keys" value="`" data-prerequisite="enable-keyboard" data-hooks="space-list(Spacebar)">
		</div>

		<div>
			<input type="checkbox" id="keyboard-pause" data-prerequisite="enable-keyboard">
		</div>
	</fieldset>

	<fieldset>
		<legend id="mouse-category"></legend>

		<div>
			<input type="checkbox" id="enable-mouse" checked>
		</div>

		<div>
			<input type="checkbox" id="mouse-whole-screen" data-prerequisite="enable-mouse">
		</div>

		<div>
			<input type="text" id="exclude-buttons" value="" data-prerequisite="enable-mouse" data-hooks="space-list">
		</div>

		<div>
			<input type="text" id="pause-buttons" value="" data-prerequisite="enable-mouse" data-hooks="space-list">
		</div>

		<div>
			<input type="checkbox" id="mouse-pause" checked data-prerequisite="enable-mouse">
		</div>
	</fieldset>

	<fieldset>
		<legend id="touchscreen-category"></legend>

		<div>
			<input type="checkbox" id="enable-touchscreen" checked>
		</div>

		<div>
			<input type="checkbox" id="touchscreen-whole-screen" data-prerequisite="enable-touchscreen">
		</div>

		<div>
			<input type="checkbox" id="touch-pause" checked data-prerequisite="enable-touchscreen">
		</div>
	</fieldset>
</details>

<details>
	<summary id="profile-settings"></summary>

	<fieldset>
		<legend id="nickname-category"></legend>

		<div>
			<input type="text" id="nickname" placeholder="Kat" value="New Poet">
		</div>
	</fieldset>

	<fieldset>
		<legend id="avatar-category"></legend>

		<div>
			<input type="radio" id="avatar-none-radio" name="avatar" value="none" data-hooks="radio-input|texture">
		</div>

		<div>
			<input type="radio" id="avatar-online-radio" name="avatar" value="online" checked data-input="avatar-online">
			<input type="text" id="avatar-online" value="default.svg" data-prerequisite="avatar-online-radio" data-hooks="online(avatar)">
		</div>

		<div>
			<input type="radio" id="avatar-upload-radio" name="avatar" value="upload" data-input="avatar-upload">
			<input type="file" id="avatar-upload" accept="image/*" data-prerequisite="avatar-upload-radio">
		</div>

		<div>
			<input type="radio" id="avatar-gravatar-radio" name="avatar" value="gravatar" data-input="avatar-gravatar">
			<input type="email" id="avatar-gravatar" placeholder="email@example.com" data-prerequisite="avatar-gravatar-radio" data-hooks="sha256|online(https://gravatar.com/avatar)">
		</div>

		<div>
			<input type="radio" id="avatar-weavatar-radio" name="avatar" value="weavatar" data-input="avatar-weavatar">
			<input type="email" id="avatar-weavatar" placeholder="email@example.com" data-prerequisite="avatar-weavatar-radio" data-hooks="sha256|online(https://weavatar.com/avatar)">
		</div>
	</fieldset>
</details>

<details>
	<summary id="integration-settings"></summary>

	<fieldset>
		<legend id="sscharter-category"></legend>

		<div>
			<input type="checkbox" id="sscharter">
		</div>

		<div>
			<input type="checkbox" id="sscharter-live-restart" data-prerequisite="sscharter">
		</div>
	</fieldset>

	<fieldset>
		<legend id="discord-category"></legend>

		<div>
			<input type="checkbox" id="discord-presence">
		</div>

		<div>
			<input type="password" id="discord-token" placeholder="Y0uRD1ScOrDToK3n" autocomplete="off" data-prerequisite="discord-presence">
		</div>

		<div>
			<input type="checkbox" id="watching-instead-of-playing" checked data-prerequisite="discord-presence">
		</div>
	</fieldset>

	<fieldset>
		<legend id="imgur-category"></legend>

		<div>
			<input type="text" id="imgur-client-id" value="28c34d2d6d4ec58">
		</div>
	</fieldset>
</details>

<details>
	<summary id="system-settings"></summary>

	<fieldset>
		<legend id="interface-category"></legend>

		<div>
			<input type="number" id="width" min="1" value="1920">
		</div>

		<div>
			<input type="number" id="height" min="1" value="1080">
		</div>

		<div>
			<input type="checkbox" id="popup">
		</div>
	</fieldset>

	<fieldset>
		<legend id="fullscreen-category"></legend>

		<div>
			<input type="checkbox" id="fullscreen-on-start" checked>
		</div>

		<div>
			<input type="checkbox" id="float-as-fullscreen">
		</div>
	</fieldset>

	<fieldset>
		<legend id="fonts-category"></legend>

		<div>
			<input type="checkbox" id="avoid-downloading-fonts">
		</div>
	</fieldset>

	<fieldset>
		<legend id="context-menu-category"></legend>

		<div>
			<input type="checkbox" id="context-menu-play">
		</div>

		<div>
			<input type="checkbox" id="context-menu-pause" checked>
		</div>

		<div>
			<input type="checkbox" id="context-menu-no-modifier" checked>
		</div>
	</fieldset>

	<fieldset>
		<legend id="plugins-category"></legend>

		<div id="plugin-list" data-type="list" data-list-template="plugin-list-item-" data-list-buttons="plugin-list-buttons">
			<div id="plugin-list-item-" data-type="collection" data-list-item-buttons="plugin-list-item-buttons-" data-i18n="plugin" data-i18n-suffix="-">
				<div>
					<input type="radio" id="plugin-online-radio-" name="plugin-" value="online" checked data-hooks="radio-input|zip" data-input="plugin-online-" data-load-button="plugin-button-">
					<input type="text" id="plugin-online-" placeholder="empty" data-prerequisite="plugin-online-radio-" data-hooks="online(plugin,.ssp)">
				</div>

				<div>
					<input type="radio" id="plugin-upload-radio-" name="plugin-" value="upload" data-input="plugin-upload-">
					<input type="file" id="plugin-upload-" accept=".ssp" data-prerequisite="plugin-upload-radio-">
				</div>

				<button type="button" id="plugin-button-"></button>

				<div id="plugin-list-item-buttons-"></div>

				<hr>
			</div>
			<div id="plugin-list-buttons"></div>
		</div>
	</fieldset>

	<fieldset>
		<legend id="renderer-category"></legend>

		<div>
			<input type="radio" id="renderer-canvas-radio" name="renderer" value="canvas">
		</div>

		<div>
			<input type="radio" id="renderer-webgl-radio" name="renderer" value="webgl" checked>
		</div>

		<div>
			<input type="radio" id="renderer-webgpu-radio" name="renderer" value="webgpu">
		</div>
	</fieldset>

	<fieldset>
		<legend id="webgl-category"></legend>

		<div>
			<span id="gl-version-introducer"></span>
			<input type="radio" id="gl-version-1-radio" name="gl-version" value="1" data-prerequisite="renderer-webgl-radio">
			<input type="radio" id="gl-version-2-radio" name="gl-version" value="2" checked data-prerequisite="renderer-webgl-radio">
		</div>

		<div>
			<input type="checkbox" id="gl-antialias" checked data-prerequisite="renderer-webgl-radio">
		</div>

		<div>
			<span id="gl-power-preference-introducer"></span>
			<input type="radio" id="gl-power-preference-default-radio" name="gl-power-preference" value="default" checked data-prerequisite="renderer-webgl-radio">
			<input type="radio" id="gl-power-preference-low-power-radio" name="gl-power-preference" value="low-power" data-prerequisite="renderer-webgl-radio">
			<input type="radio" id="gl-power-preference-high-performance-radio" name="gl-power-preference" value="high-performance" data-prerequisite="renderer-webgl-radio">
		</div>
	</fieldset>

	<fieldset>
		<legend id="webgpu-category"></legend>

		<div>
			<input type="checkbox" id="gpu-antialias" checked data-prerequisite="renderer-webgpu-radio">
		</div>

		<div>
			<span id="gpu-power-preference-introducer"></span>
			<input type="radio" id="gpu-power-preference-low-power-radio" name="gpu-power-preference" value="low-power" data-prerequisite="renderer-webgpu-radio">
			<input type="radio" id="gpu-power-preference-high-performance-radio" name="gpu-power-preference" value="high-performance" checked data-prerequisite="renderer-webgpu-radio">
		</div>
	</fieldset>

	<fieldset>
		<legend id="debug-category"></legend>

		<div>
			<input type="checkbox" id="debug">
		</div>

		<div>
			<input type="checkbox" id="hide-debug-except-pause" data-prerequisite="debug">
		</div>

		<div>
			<input type="checkbox" id="suppress-warnings">
		</div>
	</fieldset>
</details>

</div>

<details>
	<summary id="operations-settings"></summary>

	<fieldset>
		<legend id="webpage-category"></legend>
		<div>
			<button type="button" id="refresh" onclick="location.reload(true);"></button>
		</div>
		<div>
			<select id="lang-select"></select>
		</div>
	</fieldset>

	<fieldset>
		<legend id="settings-category"></legend>
		<div>
			<button type="button" id="delete-settings" onclick="Sunniesnow.Settings.deleteSavedSettings();"></button>
		</div>
		<div>
			<span id="export-import-settings-introducer"></span>
			<button type="button" id="export-settings" onclick="Sunniesnow.Settings.exportSavedSettings();"></button>
			<button type="button" id="import-settings" onclick="Sunniesnow.Settings.importSettings();"></button>
		</div>
		<div>
			<textarea id="settings-input" data-hooks="json"></textarea>
			<button type="button" id="copy-settings" onclick="Sunniesnow.Settings.copySettings();"></button>
		</div>
	</fieldset>

	<fieldset>
		<legend id="offsets-category"></legend>
		<div>
			<button type="button" id="delete-chart-offsets" onclick="Sunniesnow.Settings.deleteSavedChartOffsets();"></button>
		</div>
		<div>
			<span id="export-import-chart-offsets-introducer"></span>
			<button type="button" id="export-chart-offsets" onclick="Sunniesnow.Settings.exportSavedChartOffsets();"></button>
			<button type="button" id="import-chart-offsets" onclick="Sunniesnow.Settings.importChartOffsets();"></button>
		</div>
		<div>
			<textarea id="chart-offsets-input" data-hooks="json"></textarea>
			<button type="button" id="copy-chart-offsets" onclick="Sunniesnow.Settings.copyChartOffsets();"></button>
		</div>
		<div>
			<button type="button" id="offset-wizard" onclick="Sunniesnow.Game.offsetWizard();"></button>
		</div>
	</fieldset>

	<fieldset>
		<legend id="service-worker-category"></legend>

		<div>
			<span id="online-caches-introducer"></span>
			<button type="button" id="list-online-caches" onclick="Sunniesnow.CacheManager.listOnlineCaches();"></button>
			<button type="button" id="delete-online-caches" onclick="Sunniesnow.CacheManager.deleteOnlineCaches();"></button>
		</div>
		<div class="caches-list-wrapper">
			<table>
				<tbody id="online-caches-list"></tbody>
			</table>
		</div>

		<div>
			<span id="site-caches-introducer"></span>
			<button type="button" id="list-site-caches" onclick="Sunniesnow.CacheManager.listSiteCaches();"></button>
			<button type="button" id="delete-site-caches" onclick="Sunniesnow.CacheManager.deleteSiteCaches();"></button>
		</div>
		<div class="caches-list-wrapper">
			<table>
				<tbody id="site-caches-list"></tbody>
			</table>
		</div>

		<div>
			<span id="external-caches-introducer"></span>
			<button type="button" id="list-external-caches" onclick="Sunniesnow.CacheManager.listExternalCaches();"></button>
			<button type="button" id="delete-external-caches" onclick="Sunniesnow.CacheManager.deleteExternalCaches();"></button>
		</div>
		<div class="caches-list-wrapper">
			<table>
				<tbody id="external-caches-list"></tbody>
			</table>
		</div>
	</fieldset>

	<fieldset>
		<legend id="logs-category"></legend>

		<div>
			<button type="button" id="logs-clear" onclick="Sunniesnow.Logs.clear();"></button>
		</div>
	</fieldset>

	<fieldset>
		<legend id="operations-debug-category"></legend>

		<div>
			<button type="button" id="vconsole-setup" onclick="Sunniesnow.VConsole.setup();"></button>
			<button type="button" id="vconsole-hide" onclick="Sunniesnow.VConsole.hide();"></button>
			<button type="button" id="vconsole-destroy" onclick="Sunniesnow.VConsole.destroy();"></button>
		</div>
	</fieldset>

	<fieldset>
		<legend id="cover-category"></legend>

		<div>
			<input type="number" id="cover-theme-image-x" placeholder="x">
			<input type="number" id="cover-theme-image-y" placeholder="y">
			<input type="number" id="cover-theme-image-width" placeholder="width">
			<button type="button" id="cover-generate" onclick="Sunniesnow.CoverGenerator.download();"></button>
		</div>
	</fieldset>

	<fieldset>
		<legend id="screenshot-category"></legend>
		<div>
			<button type="button" id="screenshot-copy" onclick="Sunniesnow.ScreenshotManager.copyScreenshot();"></button>
			<button type="button" id="screenshot-save" onclick="Sunniesnow.ScreenshotManager.saveScreenshot();"></button>
		</div>
	</fieldset>

	<fieldset>
		<legend id="game-category"></legend>

		<div>
			<button type="button" id="game-start" onclick="Sunniesnow.Game.run();"></button>
			<button type="button" id="game-stop" onclick="Sunniesnow.game?.terminate();"></button>
		</div>

		<div>
			<button type="button" id="game-pause" onclick="Sunniesnow.game?.pause();"></button>
			<button type="button" id="game-resume" onclick="Sunniesnow.game?.resume();"></button>
			<button type="button" id="game-retry" onclick="Sunniesnow.game?.retry();"></button>
			<button type="button" id="game-fullscreen" onclick="Sunniesnow.FullscreenManager.toggle();"></button>
			<button type="button" id="game-toggle-pause-ui" onclick="Sunniesnow.game?.togglePauseUi();"></button>
		</div>
	</fieldset>
</details>

<button type="button" id="start-button" onclick="Sunniesnow.Game.run();"></button>
<button type="button" id="stop-button" onclick="Sunniesnow.game?.terminate();"></button>
<a href="help.html" target="_blank" id="help"></a>

<div id="loading-progress"></div>
<div id="logs"></div>

<canvas id="main-canvas" width="1920" height="1080"></canvas>

<div>
<input type="text" id="pinned-coordinates-input" placeholder="x,y">
<span id="pinned-coordinates"></span>
</div>

<details>
	<summary id="level-readme-settings"></summary>
	<div id="level-readme" class="readme"></div>
</details>
<div id="plugins-readme"></div>

<hr>

<div id="footer">
	<span id="footer-last-update"></span><a href="https://github.com/sunniesnow/sunniesnow/commit/{% commit_hash %}" target="_blank">{% commit_date %}</a><br>
	{% assign github_run_id = 'GITHUB_RUN_ID' | env -%}
	<span id="footer-last-build"></span>
	{%- if github_run_id -%}
		<a href="{{ site.git_repo }}/actions/runs/{{ github_run_id }}" target="_blank">{{ "now" | date: "%FT%T%:z" }}</a><br>
	{%- else -%}
		{{ "now" | date: "%FT%T%:z" }}<br>
	{% endif -%}
	<span id="footer-source-codes"></span><a href="https://github.com/sunniesnow/sunniesnow" target="_blank">GitHub</a><br>
	<span id="footer-license"></span><a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank" rel="license">AGPL-3.0</a><br>
	<span id="footer-author"></span>{{ site.author }} &lt;<a href="mailto:{{ site.author }} <{{ site.email }}>">{{ site.email }}</a>&gt;<br>
	<a href="{{ site.social_links.discord }}" target="_blank" id="footer-discord-invite"></a>
</div>

</div>