73 lines
2.3 KiB
HTML
73 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Piano</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
|
|
<link href="style.css" rel="stylesheet">
|
|
<script src="main.js"></script>
|
|
<script src="midiParser.js"></script>
|
|
<script src="midiPlayer.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="playspace">
|
|
<div id="chat">
|
|
<ul id="chat-messages"></ul>
|
|
<div id="chat-box">
|
|
<input id="chat-input" placeholder="Type something here">
|
|
</div>
|
|
</div>
|
|
<ul id="users"></ul>
|
|
<div id="piano-container">
|
|
<canvas id="piano"></canvas>
|
|
</div>
|
|
</div>
|
|
<div id="user-menu">
|
|
<span id="user-uid"></span>
|
|
<label class="nick">Nick <input id="user-nick" type="text"></label>
|
|
<label><input id="user-mute-notes" type="checkbox"> Mute notes</label>
|
|
<button id="user-kick">Kick</button>
|
|
</div>
|
|
<div id="dimmer"></div>
|
|
<div id="midi-player-menu">
|
|
<input id="midi-upload" type="file" accept="audio/midi">
|
|
<button id="midi-play">Play</button>
|
|
<button id="midi-pause">Pause</button>
|
|
</div>
|
|
<div id="settings-menu">
|
|
<ul class="tabs">
|
|
<li id="tab-general-button" class="active">General</li>
|
|
<li id="tab-midi-button">MIDI</li>
|
|
<li id="tab-input-button">Input</li>
|
|
<li id="tab-audio-button">Audio</li>
|
|
</ul>
|
|
<div id="tab-general" class="tab active">
|
|
<label>Scale: <select id="setting-scale"></select></label>
|
|
</div>
|
|
<div id="tab-midi" class="tab">
|
|
MIDI
|
|
</div>
|
|
<div id="tab-input" class="tab">
|
|
Keybinds
|
|
</div>
|
|
<div id="tab-audio" class="tab">
|
|
<label title="Only causes minor artifacts when playing with sustain.">Performance mode: <input id="setting-performance" type="checkbox"></label>
|
|
<label>Override piano sound: <select id="setting-sounds"></select></label>
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
<button id="room-settings-button">Room settings</button>
|
|
<button id="midi-player-button">Midi player</button>
|
|
|
|
<div class="right">
|
|
<button id="settings-button">Settings</button>
|
|
<span id="volume-indicator" class="low"></span>
|
|
<input id="volume" type="range" orient="vertical" min="0" max="1" step="0.01" value="0.5">
|
|
</div>
|
|
</div>
|
|
<div id="autoplay-notice" class="notice">
|
|
<span>Please interact with the page in order to enable audio.</span>
|
|
</div>
|
|
</body>
|
|
</html>
|