liquidex
5e6b84bed5
for faster load times, and seamless updates. because for some reason ServeDir can't do it correctly, and it tells the client "yeah hey nothing changed" even if something changed
146 lines
6.5 KiB
HTML
146 lines
6.5 KiB
HTML
<!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>
|
|
|