beautify html
This commit is contained in:
parent
b65bf920be
commit
d76069109b
319
index.html
319
index.html
|
|
@ -1,115 +1,230 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
<title>Multiplayer Piano</title>
|
<title>Multiplayer Piano</title>
|
||||||
<meta name="description" content="An online piano you can play alone or with others in real-time. MIDI support, 88 keys, velocity sensitive. You can show off your skill or chat while listening to others play."/>
|
<meta
|
||||||
<link rel="stylesheet" href="/screen.css"/>
|
name="description"
|
||||||
</head>
|
content="An online piano you can play alone or with others in real-time. MIDI support, 88 keys, velocity sensitive. You can show off your skill or chat while listening to others play."
|
||||||
<body>
|
/>
|
||||||
|
<link rel="stylesheet" href="/screen.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="social">
|
||||||
|
<div id="more-button"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="social">
|
<div id="chat">
|
||||||
<div id="more-button"></div>
|
<ul></ul>
|
||||||
</div>
|
<input
|
||||||
|
placeholder="You can chat with this thing."
|
||||||
|
class="translate"
|
||||||
|
maxlength="512"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="chat">
|
<div id="room-notice"></div>
|
||||||
<ul></ul>
|
|
||||||
<input placeholder="You can chat with this thing." class="translate" maxlength="512"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="room-notice"></div>
|
<div id="names"></div>
|
||||||
|
|
||||||
<div id="names"></div>
|
<div id="piano"></div>
|
||||||
|
|
||||||
<div id="piano"></div>
|
<div id="cursors"></div>
|
||||||
|
|
||||||
<div id="cursors"></div>
|
<noscript>
|
||||||
|
<center>
|
||||||
|
<p>
|
||||||
|
Multiplayer Piano is an online, full 88-key piano you can
|
||||||
|
play alone or with others in real-time. Plug up your MIDI
|
||||||
|
keyboard, MIDI in and out are supported. You should be able
|
||||||
|
to hear some seriously talented piano players performing
|
||||||
|
here! Join in or just chat and listen.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
For good performance, Chrome is highly recommended. Firefox
|
||||||
|
also supports the requisite Web Audio API, but performance
|
||||||
|
may not be as good. Chrome has Web MIDI.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Of course, first you need to
|
||||||
|
<a href="http://www.enable-javascript.com/" class="link"
|
||||||
|
>Enable Javascript</a
|
||||||
|
>
|
||||||
|
or it won't do anything...!
|
||||||
|
</p>
|
||||||
|
</center>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
<noscript>
|
<div id="bottom">
|
||||||
<center>
|
<div class="relative">
|
||||||
<p>
|
<div id="room">
|
||||||
Multiplayer Piano is an online, full 88-key piano you can play alone or with others in real-time. Plug up your MIDI keyboard, MIDI in and out are supported. You should be able to hear some seriously talented piano players performing here! Join in or just chat and listen.
|
<div class="info"></div>
|
||||||
</p>
|
<div class="expand"></div>
|
||||||
<p>
|
<div class="more">
|
||||||
For good performance, Chrome is highly recommended. Firefox also supports the requisite Web Audio API, but performance may not be as good. Chrome has Web MIDI.
|
<div class="new translate">New Room...</div>
|
||||||
</p>
|
</div>
|
||||||
<p>
|
</div>
|
||||||
Of course, first you need to <a href="http://www.enable-javascript.com/" class="link">Enable Javascript</a> or it won't do anything...!
|
<div id="new-room-btn" class="ugly-button translate">
|
||||||
</p>
|
New Room...
|
||||||
</center>
|
</div>
|
||||||
</noscript>
|
<div id="play-alone-btn" class="ugly-button">Play Alone</div>
|
||||||
|
<div id="room-settings-btn" class="ugly-button">
|
||||||
|
Room Settings
|
||||||
|
</div>
|
||||||
|
<div id="midi-btn" class="ugly-button translate">
|
||||||
|
MIDI In/Out
|
||||||
|
</div>
|
||||||
|
<div id="record-btn" class="ugly-button translate">
|
||||||
|
Record MP3
|
||||||
|
</div>
|
||||||
|
<div id="synth-btn" class="ugly-button translate">Synth</div>
|
||||||
|
<div id="sound-btn" class="ugly-button sound-btn">
|
||||||
|
Sound Select
|
||||||
|
</div>
|
||||||
|
<div id="status"></div>
|
||||||
|
<div id="volume">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="volume-slider"
|
||||||
|
min="0.0"
|
||||||
|
max="1.0"
|
||||||
|
step="0.01"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="volume-label">volume</div>
|
||||||
|
<div id="quota">
|
||||||
|
<div class="value"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="bottom">
|
<div id="modal">
|
||||||
<div class="relative">
|
<div class="bg"></div>
|
||||||
<div id="room">
|
<div id="modals">
|
||||||
<div class="info"></div>
|
<div id="sound-warning" class="dialog">
|
||||||
<div class="expand"></div>
|
<p>
|
||||||
<div class="more">
|
This site makes a lot of sound! You may want to adjust
|
||||||
<div class="new translate">New Room...</div>
|
the volume before continuing.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
<button class="submit">PLAY</button>
|
||||||
<div id="new-room-btn" class="ugly-button translate">New Room...</div>
|
</div>
|
||||||
<div id="play-alone-btn" class="ugly-button">Play Alone</div>
|
<div id="new-room" class="dialog">
|
||||||
<div id="room-settings-btn" class="ugly-button">Room Settings</div>
|
<p>
|
||||||
<div id="midi-btn" class="ugly-button translate">MIDI In/Out</div>
|
<input
|
||||||
<div id="record-btn" class="ugly-button translate">Record MP3</div>
|
type="text"
|
||||||
<div id="synth-btn" class="ugly-button translate">Synth</div>
|
name="name"
|
||||||
<div id="sound-btn" class="ugly-button sound-btn">Sound Select</div>
|
placeholder="room name"
|
||||||
<div id="status"></div>
|
class="text translate"
|
||||||
<div id="volume">
|
maxlength="512"
|
||||||
<input type="range" id="volume-slider" min="0.0" max="1.0" step="0.01">
|
/>
|
||||||
</div>
|
</p>
|
||||||
<div id="volume-label">volume</div>
|
<p>
|
||||||
<div id="quota">
|
<label
|
||||||
<div class="value"></div>
|
><input
|
||||||
</div>
|
type="checkbox"
|
||||||
</div>
|
name="visible"
|
||||||
</div>
|
class="checkbox translate"
|
||||||
|
checked
|
||||||
|
/>Visible (open to everyone)</label
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<button class="submit">go</button>
|
||||||
|
</div>
|
||||||
|
<div id="room-settings" class="dialog">
|
||||||
|
<div class="ugly-button drop-crown">Drop crown</div>
|
||||||
|
<p>
|
||||||
|
<label
|
||||||
|
><input
|
||||||
|
type="checkbox"
|
||||||
|
name="visible"
|
||||||
|
class="checkbox translate"
|
||||||
|
checked
|
||||||
|
/>Visible (open to everyone)</label
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label
|
||||||
|
><input
|
||||||
|
type="checkbox"
|
||||||
|
name="chat"
|
||||||
|
class="checkbox translate"
|
||||||
|
checked
|
||||||
|
/>Enable Chat</label
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label
|
||||||
|
><input
|
||||||
|
type="checkbox"
|
||||||
|
name="crownsolo"
|
||||||
|
class="checkbox"
|
||||||
|
/>Only Owner can Play</label
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<button class="submit">APPLY</button>
|
||||||
|
<p>
|
||||||
|
<label
|
||||||
|
>Background color: <input
|
||||||
|
type="color"
|
||||||
|
name="color"
|
||||||
|
placeholder=""
|
||||||
|
maxlength="7"
|
||||||
|
class="color"
|
||||||
|
/></label>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div id="rename" class="dialog">
|
||||||
|
<p>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="My Fancy New Name"
|
||||||
|
maxlength="40"
|
||||||
|
class="text"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
{% if usersConfig.enableColorChanging %}
|
||||||
|
<p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
name="color"
|
||||||
|
placeholder=""
|
||||||
|
maxlength="7"
|
||||||
|
class="color"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
<button class="submit">USER SET</button>
|
||||||
|
</div>
|
||||||
|
<div id="more">
|
||||||
|
<div class="header"></div>
|
||||||
|
<div class="items"></div>
|
||||||
|
<div class="footer">
|
||||||
|
Keep looking here for the eventual appearance of a blog,
|
||||||
|
help guide, etc. Also there are unofficial
|
||||||
|
(community-run)
|
||||||
|
<a href="http://www.reddit.com/r/multiplayerpiano"
|
||||||
|
>subreddit</a
|
||||||
|
>
|
||||||
|
and
|
||||||
|
<a href="http://www.youtube.com/MultiplayerPiano"
|
||||||
|
>youtube</a
|
||||||
|
>
|
||||||
|
pages. Thanks!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="modal">
|
<div id="config" style="display: none">{{base64config}}</div>
|
||||||
<div class="bg"></div>
|
|
||||||
<div id="modals">
|
|
||||||
<div id="sound-warning" class="dialog">
|
|
||||||
<p>This site makes a lot of sound! You may want to adjust the volume before continuing.</p>
|
|
||||||
<button class="submit">PLAY</button>
|
|
||||||
</div>
|
|
||||||
<div id="new-room" class="dialog">
|
|
||||||
<p><input type="text" name="name" placeholder="room name" class="text translate" maxlength="512"/></p>
|
|
||||||
<p><label><input type="checkbox" name="visible" class="checkbox translate" checked>Visible (open to everyone)</label></p>
|
|
||||||
</label></p>
|
|
||||||
<button class="submit">go</button>
|
|
||||||
</div>
|
|
||||||
<div id="room-settings" class="dialog">
|
|
||||||
<p><div class="ugly-button drop-crown">Drop crown</div></p>
|
|
||||||
<p><label><input type="checkbox" name="visible" class="checkbox translate" checked>Visible (open to everyone)</label></p>
|
|
||||||
</label></p>
|
|
||||||
<p><label><input type="checkbox" name="chat" class="checkbox translate" checked>Enable Chat</label></p>
|
|
||||||
<p><label><input type="checkbox" name="crownsolo" class="checkbox">Only Owner can Play<button class="submit">APPLY</button>
|
|
||||||
<p><label>Background color: <input type="color" name="color" placeholder="" maxlength="7" class="color"></label></p>
|
|
||||||
</div>
|
|
||||||
<div id="rename" class="dialog">
|
|
||||||
<p><input type="text" name="name" placeholder="My Fancy New Name" maxlength="40" class="text"/></p>
|
|
||||||
<!--<p><input type="color" name="color" placeholder="" maxlength="7" class="color"/></p>-->
|
|
||||||
<button class="submit">USER SET</button>
|
|
||||||
</div>
|
|
||||||
<div id="more">
|
|
||||||
<div class="header">
|
|
||||||
</div>
|
|
||||||
<div class="items"></div>
|
|
||||||
<div class="footer">
|
|
||||||
Keep looking here for the eventual appearance of a blog, help guide, etc. Also there are unofficial (community-run) <a href="https://web.archive.org/web/20150323065452/http://www.reddit.com/r/multiplayerpiano">subreddit</a> and <a href="https://web.archive.org/web/20150323065452/http://www.youtube.com/MultiplayerPiano">youtube</a> pages. Thanks!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/jquery.min.js"></script>
|
<script src="/jquery.min.js"></script>
|
||||||
<script src="/util.js"></script>
|
<script src="/util.js"></script>
|
||||||
<script src="/Client.js"></script>
|
<script src="/Client.js"></script>
|
||||||
<script src="/NoteQuota.js"></script>
|
<script src="/NoteQuota.js"></script>
|
||||||
<script src="/lame.min.js"></script>
|
<script src="/lame.min.js"></script>
|
||||||
<script src="/Color.js"></script>
|
<script src="/Color.js"></script>
|
||||||
<!--<script src="/ebsprite.js"></script>-->
|
<!--<script src="/ebsprite.js"></script>-->
|
||||||
<script src="/script.js"></script>
|
<script src="/script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue