2024-08-10 23:10:03 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2024-08-24 20:09:52 +02:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
2024-08-10 23:13:20 +02:00
|
|
|
<title>rakugaki</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="static/index.css">
|
|
|
|
|
|
2024-08-10 23:10:03 +02:00
|
|
|
<script src="static/live-reload.js" type="module"></script>
|
2024-08-10 23:13:20 +02:00
|
|
|
|
|
|
|
|
<script src="static/brush-editor.js" type="module"></script>
|
|
|
|
|
<script src="static/canvas-renderer.js" type="module"></script>
|
2024-08-24 20:09:52 +02:00
|
|
|
<script src="static/connection-status.js" type="module"></script>
|
2024-08-10 23:13:20 +02:00
|
|
|
<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>
|
|
|
|
|
|
2024-08-24 20:09:52 +02:00
|
|
|
<script src="static/index.js" type="module" defer></script>
|
2024-08-10 23:10:03 +02:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
2024-08-24 20:09:52 +02:00
|
|
|
<rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
|
|
|
|
|
<rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
|
2024-08-10 23:13:20 +02:00
|
|
|
<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>
|
2024-08-24 20:09:52 +02:00
|
|
|
|
|
|
|
|
<rkgk-connection-status>
|
|
|
|
|
<dialog name="logging-in-dialog">
|
|
|
|
|
<rkgk-throbber class="loading"></rkgk-throbber><p>Logging in...</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!
|
|
|
|
|
</p>
|
|
|
|
|
</noscript>
|
|
|
|
|
</div>
|
2024-08-10 23:10:03 +02:00
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
