watch-party/frontend/index.html

85 lines
2.4 KiB
HTML
Raw Permalink Normal View History

2021-10-24 22:48:10 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>watch party :D</title>
2022-04-29 22:25:31 +00:00
<link rel="stylesheet" href="/styles.css?v=bfdcf2" />
2021-10-24 22:48:10 +00:00
</head>
<body>
<noscript>
This site will <em>not</em> work without JavaScript, and there's not
really any way around that :(
</noscript>
<div id="pre-join-controls">
<form id="join-session-form">
<h2>Join a session</h2>
2021-11-11 17:26:30 +00:00
<p id="post-create-message">
Your session has been created successfully. Copy the current url or
the Session ID below and share it with your friends. :)
</p>
2021-11-11 15:47:43 +00:00
<label for="join-session-nickname">Nickname:</label>
2021-10-25 01:59:52 +00:00
<input
type="text"
id="join-session-nickname"
placeholder="Nickname"
maxlength="50"
2021-10-25 01:59:52 +00:00
required
/>
2022-02-13 17:23:20 +00:00
2022-04-29 22:41:33 +00:00
<label id="join-session-colour-label" for="join-session-colour">
Personal Colour:
</label>
2022-04-29 22:24:37 +00:00
<input type="color" id="join-session-colour" value="#ffffff" required />
2021-10-25 01:59:52 +00:00
2021-11-11 15:47:43 +00:00
<label for="join-session-id">Session ID:</label>
2021-10-24 22:48:10 +00:00
<input
type="text"
id="join-session-id"
placeholder="123e4567-e89b-12d3-a456-426614174000"
required
/>
2021-12-03 19:37:16 +00:00
<button id="join-session-button">Join</button>
2021-10-24 22:48:10 +00:00
2022-02-15 22:19:48 +00:00
<p>
2022-02-16 00:30:22 +00:00
No session to join?
<a href="/create.html">Create a session</a> instead.
2022-02-15 22:19:48 +00:00
</p>
</form>
2021-10-24 22:48:10 +00:00
</div>
2021-10-25 01:59:52 +00:00
<div id="video-container"></div>
2021-11-05 13:07:21 +00:00
<div id="chatbox-container">
2022-02-13 17:23:20 +00:00
<div id="viewer-list"></div>
2021-11-05 13:07:21 +00:00
<div id="chatbox"></div>
<form id="chatbox-send">
2022-02-16 00:30:22 +00:00
<input
type="text"
placeholder="Message... (/help for commands)"
list="emoji-autocomplete"
/>
<div id="emoji-autocomplete"></div>
<!-- DO NOT ADD SPACING INSIDE THE TAG IT WILL BREAK THE CSS kthxbye -->
2021-11-05 13:07:21 +00:00
</form>
</div>
2021-10-25 01:59:52 +00:00
2022-04-29 22:25:31 +00:00
<script type="module" src="/main.mjs?v=bfdcf2"></script>
2022-04-29 22:41:33 +00:00
<script>
const updateColourLabel = () => {
const colour = document.querySelector("#join-session-colour").value;
document.querySelector(
"#join-session-colour-label"
).textContent = `Personal Colour: ${colour}`;
};
document
.querySelector("#join-session-colour")
.addEventListener("input", updateColourLabel);
updateColourLabel();
</script>
2021-10-24 22:48:10 +00:00
</body>
</html>