mpp-dev-but-mppnet/public/index.html

247 lines
12 KiB
HTML
Raw Permalink Normal View History

2024-02-04 02:23:40 +01:00
<!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: &nbsp;<input type="color" name="color" placeholder="" maxlength="7" class="color"></label></p>
<p><label>Outer color: &nbsp;<input type="color" name="color2" placeholder="" maxlength="7" class="color"></label></p>
<p><label>Player limit: &nbsp;<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>