247 lines
12 KiB
HTML
247 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
<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." />
|
|
<link rel="stylesheet" href="/screen.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="snowflakes" aria-hidden="true" translated>
|
|
<div class="snowflake">
|
|
❅
|
|
</div>
|
|
<div class="snowflake">
|
|
❅
|
|
</div>
|
|
<div class="snowflake">
|
|
❆
|
|
</div>
|
|
<div class="snowflake">
|
|
❄
|
|
</div>
|
|
<div class="snowflake">
|
|
❅
|
|
</div>
|
|
<div class="snowflake">
|
|
❆
|
|
</div>
|
|
<div class="snowflake">
|
|
❄
|
|
</div>
|
|
<div class="snowflake">
|
|
❅
|
|
</div>
|
|
<div class="snowflake">
|
|
❆
|
|
</div>
|
|
<div class="snowflake">
|
|
❄
|
|
</div>
|
|
</div>
|
|
<div id="chat">
|
|
<ul translated></ul>
|
|
<input id="chat-input" placeholder="You can chat with this thing." maxlength="512"
|
|
autocomplete="off" />
|
|
</div>
|
|
|
|
<div id="room-notice"></div>
|
|
|
|
<div id="names"></div>
|
|
|
|
<div id="piano"></div>
|
|
|
|
<div id="cursors"></div>
|
|
|
|
<a href="https://mpp.community/" title="MPPNet Community Forum" target="_blank">
|
|
<button class="mppcommunity-button icon-button top-button" aria-hidden="true">
|
|
<img src="/mppcommunity.ico" style="vertical-align: middle;">
|
|
</button>
|
|
</a>
|
|
<a href="https://github.com/mppnet/frontend" title="MPPNet Frontend Repo" target="_blank">
|
|
<button class="github-button icon-button top-button" aria-hidden="true">
|
|
<img src="/github.ico" style="vertical-align: middle;">
|
|
</button>
|
|
</a>
|
|
<a href="https://www.reddit.com/r/multiplayerpianonet/" title="MPPNet Reddit" target="_blank">
|
|
<button class="reddit-button icon-button top-button" aria-hidden="true">
|
|
<img src="/reddit.ico" style="vertical-align: middle;">
|
|
</button>
|
|
</a>
|
|
<a href="https://discord.gg/338D2xMufC" title="MPPNet Discord" target="_blank">
|
|
<button class="discord-button icon-button top-button" aria-hidden="true">
|
|
<img src="/discord.ico" style="vertical-align: middle;">
|
|
</button>
|
|
</a>
|
|
<a href="https://docs.google.com/document/d/1wQvGwQdaI8PuEjSWxKDDThVIoAlCYIxQOyfyi4o6HcM/edit?usp=sharing" title="Multiplayer Piano Rules" target="_blank">
|
|
<button class="mpp-rules-button top-button" aria-hidden="true">
|
|
Rules
|
|
</button>
|
|
</a>
|
|
|
|
<noscript translated>
|
|
<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>
|
|
|
|
<div id="bottom">
|
|
<div class="relative">
|
|
<div id="room">
|
|
<div class="info"></div>
|
|
<div class="expand"></div>
|
|
<div class="more">
|
|
<div class="new">New Room...</div>
|
|
</div>
|
|
</div>
|
|
<div class="buttons" id="buttons">
|
|
<div id="new-room-btn" class="ugly-button">New Room...</div>
|
|
<div id="play-alone-btn" class="ugly-button">Play Alone</div>
|
|
<div id="midi-btn" class="ugly-button">MIDI In/Out</div>
|
|
<div id="sound-btn" class="ugly-button">Sound Select</div>
|
|
<div id="synth-btn" class="ugly-button">Synth</div>
|
|
<div id="client-settings-btn" class="ugly-button">Client Settings</div>
|
|
<div id="account-btn" class="ugly-button">Account</div>
|
|
<div id="room-settings-btn" class="ugly-button">Room Settings</div>
|
|
<div id="clearchat-btn" class="ugly-button" style="display: none;">Clear Chat</div>
|
|
<div id="getcrown-btn" class="ugly-button" style="display: none;">Get Crown</div>
|
|
<div id="vanish-btn" class="ugly-button" style="display: none;">Vanish</div>
|
|
</div>
|
|
<div id="status"></div>
|
|
<div id="volume">
|
|
<input type="range" id="volume-slider" min="0.0" max="1.0" step="0.01">
|
|
</div>
|
|
<label id="volume-label" for="volume-slider">volume</label>
|
|
<div id="quota">
|
|
<div class="value"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal">
|
|
<div class="bg"></div>
|
|
<div id="modals">
|
|
<div id="motd" class="dialog">
|
|
<p id="motd-text"></p>
|
|
<button class="submit">PLAY</button>
|
|
</div>
|
|
<div id="new-room" class="dialog">
|
|
<p><input type="text" name="name" placeholder="room name" class="text" maxlength="512" /></p>
|
|
<p><label><input type="checkbox" name="visible" class="checkbox" checked>Visible (open to everyone)</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" checked>Visible (open to everyone)</label></p>
|
|
<p><label><input type="checkbox" name="chat" class="checkbox" checked>Enable Chat</label></p>
|
|
<p><label><input type="checkbox" name="crownsolo" class="checkbox">Only Owner can Play</label></p>
|
|
<p><label><input type="checkbox" name="nocussing" class="checkbox">No Cussing</label></p>
|
|
<p><label><input type="checkbox" name="noindex" class="checkbox">Ask bots not to index this room</label></p>
|
|
<p><label>Inner color: <input type="color" name="color" placeholder="" maxlength="7" class="color"></label></p>
|
|
<p><label>Outer color: <input type="color" name="color2" placeholder="" maxlength="7" class="color"></label></p>
|
|
<p><label>Player limit: <input type="text" name="limit" maxlength="2" value="50"></label></p>
|
|
<button class="submit">APPLY</button>
|
|
</div>
|
|
<div id="rename" class="dialog">
|
|
<p><input type="text" name="name" placeholder="My Fancy New Name" maxlength="40" class="text" />
|
|
<input type="color" name="color" placeholder="" maxlength="7" class="color" />
|
|
</p>
|
|
<button class="submit">USER SET</button>
|
|
</div>
|
|
<div id="siteban" class="dialog">
|
|
<p><label>User ID: <input type="text" name="id" placeholder="User's ID" maxlength="24" class="text" /></label></p>
|
|
<p><label>Reason: <select name="reasonSelect" translated>
|
|
<option value="Discrimination against others">Discrimination</option>
|
|
<option value="Discussion of inappropriate topics through chat or names">Inappropriate discussion</option>
|
|
<option value="Sharing or advertising inappropriate content">Sharing inappropriate content</option>
|
|
<option value="Discussing self-harm or very negative topics">Discussing self-harm</option>
|
|
<option value="Spamming the piano in lobbies">Piano spam in lobbies</option>
|
|
<option value="Spamming chat in lobbies">Chat spam in lobbies</option>
|
|
<option value="Evading site-wide punishments">Evading site-wide punishments</option>
|
|
<option value="Evading user's mutes or kickbans">Evading mutes or kickbans</option>
|
|
<option value="Exploiting bugs">Exploiting bugs</option>
|
|
<option value="Phishing or IP grabbing">Phishing/IP grabbing</option>
|
|
<option value="Abusing bots or scripts">Abusing bots or scripts</option>
|
|
<option value="Promoting violence or illegal activities">Promoting violence/illegal activities</option>
|
|
<option value="Promoting breaking the rules">Promoting breaking the rules</option>
|
|
<option value="Giving out another user's personal information without their consent">Giving other user's personal information</option>
|
|
<option value="Sending similar messages throughout multiple rooms">Sending the same message in many rooms</option>
|
|
<option value="Spamming the piano throughout multiple rooms to annoy users">Spamming the piano in many rooms</option>
|
|
<option value="Holding the crown in a room that does not belong to you">Holding the crown in someone else's room</option>
|
|
<option value="Abusing permissions or higher quotas">Abusing permissions/quotas</option>
|
|
<option value="Misleading others through impersonation">Impersonation</option>
|
|
<option value="Lying about users on the site in a way that negatively affects them">Lying about other users</option>
|
|
<option value="custom">Custom...</option>
|
|
</select>
|
|
<input type="text" name="reasonText" placeholder="Ban reason..." maxlength="512" class="text" style="width: 100%;" /></label>
|
|
</label></p>
|
|
<p><label>Duration: <br><input type="number" name="durationNumber" placeholder="Amount of unit..." value="5" class="text" style="width: 60%" />
|
|
<select name="durationUnit">
|
|
<option value="seconds">Seconds</option>
|
|
<option value="minutes">Minutes</option>
|
|
<option value="hours">Hours</option>
|
|
<option value="days">Days</option>
|
|
<option value="weeks">Weeks</option>
|
|
<option value="months">Months</option>
|
|
<option value="years">Years</option>
|
|
<option value="permanent">Permanent</option>
|
|
</select>
|
|
</label>
|
|
</label>
|
|
</p>
|
|
<p><label>Note: <textarea name="note" cols="49" rows="5" maxlength="512" placeholder="Optional note for staff..."></textarea></label></p>
|
|
<p name="errorText" style="color:red; font-size: 16px;"></p>
|
|
<button class="submit">BAN</button>
|
|
</div>
|
|
<div id="account" class="dialog">
|
|
<p>
|
|
<label>Log in: <div class="ugly-button login-discord">Discord</div></label>
|
|
</p>
|
|
<div id="account-info">
|
|
<div id="logged-in-text" class="text logged-in-text">Logged in as</div>
|
|
<img id="avatar-image" class="avatar-image"></img>
|
|
<div id="logged-in-user-text" class="logged-in-user-text"></div>
|
|
</div>
|
|
<div id="logout-btn" class="ugly-button logout-btn">Log out</div>
|
|
</div>
|
|
<div id="client-settings" class="dialog">
|
|
<div class="client-settings-tablink client-settings-button" onclick="changeClientSettingsTab(event, 'Chat')">Chat</div>
|
|
<div class="client-settings-tablink client-settings-button" onclick="changeClientSettingsTab(event, 'MIDI')">MIDI</div>
|
|
<div class="client-settings-tablink client-settings-button" onclick="changeClientSettingsTab(event, 'Piano')">Piano</div>
|
|
<div class="client-settings-tablink client-settings-button" onclick="changeClientSettingsTab(event, 'Misc')">Misc</div>
|
|
<br>
|
|
<div id="client-settings-content"></div>
|
|
<div id="client-settings-ok-btn" class="client-settings-button">Ok</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/jquery.min.js"></script>
|
|
<script src="/util.js"></script>
|
|
<script src="/Client.js"></script>
|
|
<script src="/NoteQuota.js"></script>
|
|
<script src="/Color.js"></script>
|
|
<!--<script src="/ebsprite.js"></script>-->
|
|
<script src="https://unpkg.com/i18nextify@^3.2.1" id="i18nextify" fallbacklng="en"></script>
|
|
<script src="/script.js"></script>
|
|
</body>
|
|
|
|
</html>
|