liquidex
0d831698e2
error handling shows you the error and offers the ability to reload; disconnect handling shows you that the page will reload in a few seconds. it uses exponential backoff with some random sprinkled into it to prevent overwhelming the server once people's clients decide to reconnect.
104 lines
4.5 KiB
HTML
104 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<title>rakugaki</title>
|
|
|
|
<link rel="stylesheet" href="static/index.css">
|
|
|
|
<script src="static/live-reload.js" type="module"></script>
|
|
|
|
<script src="static/brush-editor.js" type="module"></script>
|
|
<script src="static/canvas-renderer.js" type="module"></script>
|
|
<script src="static/connection-status.js" type="module"></script>
|
|
<script src="static/framework.js" type="module"></script>
|
|
<script src="static/reticle-renderer.js" type="module"></script>
|
|
<script src="static/session.js" type="module"></script>
|
|
<script src="static/throbber.js" type="module"></script>
|
|
<script src="static/viewport.js" type="module"></script>
|
|
<script src="static/welcome.js" type="module"></script>
|
|
|
|
<script src="static/index.js" type="module" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
|
|
<rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
|
|
<rkgk-brush-editor></rkgk-brush-editor>
|
|
|
|
<rkgk-welcome>
|
|
<dialog name="welcome-dialog" class="rkgk-panel">
|
|
<form method="dialog">
|
|
<h3>
|
|
My name is
|
|
<input
|
|
name="nickname"
|
|
type="text"
|
|
required minlength="1" maxlength="32"
|
|
placeholder="... (type here!)"
|
|
autocomplete="off"
|
|
autofocus></input>
|
|
</h3>
|
|
<p>This name will be visible to any friends drawing along with you, so choose something recognizable!<br>
|
|
Keep in mind you can always change it later.</p>
|
|
|
|
<div style="display: flex; flex-direction: row; align-items: center; justify-content: end; gap: 8px;">
|
|
<rkgk-throbber name="register-progress"></rkgk-throbber>
|
|
<button name="register">Register</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</rkgk-welcome>
|
|
|
|
<rkgk-connection-status>
|
|
<dialog name="logging-in-dialog">
|
|
<rkgk-throbber class="loading"></rkgk-throbber><p>Logging in…</p>
|
|
</dialog>
|
|
|
|
<dialog name="error-dialog" class="rkgk-panel">
|
|
<h1>owie! >_<</h1>
|
|
<p><i>Uh oh. Seems like the pipe cracked again… There's water everywhere.<br>The basement's half full already. God dammit.</i></p>
|
|
|
|
<p>Super sorry about this! But rakugaki encountered an error and has to restart.</p>
|
|
<p><b>Rest assured your drawings are safe and sound.</b></p>
|
|
<p>Either way… try refreshing the page and see if it helps. If not, please report a bug with the following details.</p>
|
|
|
|
<details>
|
|
<summary>Show error details</summary>
|
|
<textarea name="error-text" rows="10" readonly></textarea>
|
|
</details>
|
|
|
|
<p>Thank you from the mountain!</p>
|
|
|
|
<div style="display: flex; flex-direction: row; align-items: center; justify-content: end;">
|
|
<button name="refresh">Refresh</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog name="disconnected-dialog">
|
|
<rkgk-throbber class="loading"></rkgk-throbber>
|
|
<p>Connection lost. Attempting to reconnect in <span name="reconnect-duration"></span>…</p>
|
|
</dialog>
|
|
</rkgk-connection-status>
|
|
|
|
<div class="fullscreen" id="js-loading">
|
|
<rkgk-throbber class="loading"></rkgk-throbber>
|
|
|
|
<noscript>
|
|
<style>
|
|
#js-loading>rkgk-throbber { display: none; }
|
|
</style>
|
|
<p>
|
|
rakugaki is a web app and does not work without JavaScript :(<br>
|
|
but I swear it's a very lightweight and delightful web app!
|
|
You won't regret trying it out.
|
|
</p>
|
|
</noscript>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|