<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rakugaki</title> <link rel="stylesheet" href="{{ static 'base.css' }}"> <link rel="stylesheet" href="{{ static 'fonts.css' }}"> <link rel="stylesheet" href="{{ static 'index.css' }}"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="importmap">{{{ include_static 'import_map.json' }}}</script> <script> const HAKU_WASM_PATH = "{{{ static 'wasm/haku.wasm' }}}"; </script> <script type="module"> import "rkgk/live-reload.js"; import "rkgk/brush-editor.js"; import "rkgk/canvas-renderer.js"; import "rkgk/connection-status.js"; import "rkgk/framework.js"; import "rkgk/resize-handle.js"; import "rkgk/reticle-renderer.js"; import "rkgk/session.js"; import "rkgk/throbber.js"; import "rkgk/viewport.js"; import "rkgk/welcome.js"; import "rkgk/index.js"; </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" data-min-size="128"></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>