<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rakugaki</title>
<link rel="stylesheet" href="static/base.css">
<link rel="stylesheet" href="static/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/resize-handle.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>
<link rel="icon" sizes="16x16" href="/static/favicon/rkgk@1x.png">
<link rel="icon" sizes="32x32" href="/static/favicon/rkgk@2x.png">
<link rel="icon" sizes="64x64" href="/static/favicon/rkgk@4x.png">
<link rel="icon" sizes="128x128" href="/static/favicon/rkgk@8x.png">
<link rel="icon" sizes="256x256" href="/static/favicon/rkgk@16x.png">
<link rel="icon" sizes="512x512" href="/static/favicon/rkgk@32x.png">
<link rel="apple-touch-icon" sizes="16x16" href="/static/favicon/rkgk@1x.png">
<link rel="apple-touch-icon" sizes="32x32" href="/static/favicon/rkgk@2x.png">
<link rel="apple-touch-icon" sizes="64x64" href="/static/favicon/rkgk@4x.png">
<link rel="apple-touch-icon" sizes="128x128" href="/static/favicon/rkgk@8x.png">
<link rel="apple-touch-icon" sizes="256x256" href="/static/favicon/rkgk@16x.png">
<link rel="apple-touch-icon" sizes="512x512" href="/static/favicon/rkgk@32x.png">
</head>
<body>
<main>
<rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
<rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
<div class="panels fullscreen" id="panels-overlay">
<div class="rkgk-panel menu-bar">
<a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
<hr>
<a href="/docs/rkgk.html">Manual</a>
</div>
<div class="right">
<rkgk-resize-handle
data-direction="vertical"
data-target="panels-overlay"
data-target-property="--right-width"
data-init-size="384"></rkgk-resize-handle>
<rkgk-brush-editor></rkgk-brush-editor>
</div>
</div>
<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>