リキ萌
0ddc42c00f
switch the app from floating panels to a static sidebar on the right with resizable tools expect more layout bugs from now on
180 lines
7.9 KiB
HTML
180 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<title>rakugaki</title>
|
|
|
|
<link rel="stylesheet" href="{{ static 'base.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' }}}";
|
|
const HAKU2_WASM_PATH = "{{{ static 'wasm/haku2.wasm' }}}";
|
|
</script>
|
|
|
|
<script type="module" async>
|
|
import "rkgk/live-reload.js";
|
|
|
|
import "rkgk/brush-box.js";
|
|
import "rkgk/brush-cost.js";
|
|
import "rkgk/brush-editor.js";
|
|
import "rkgk/brush-preview.js";
|
|
import "rkgk/canvas-renderer.js";
|
|
import "rkgk/code-editor.js";
|
|
import "rkgk/connection-status.js";
|
|
import "rkgk/context-menu.js";
|
|
import "rkgk/framework.js";
|
|
import "rkgk/haku.js";
|
|
import "rkgk/online-users.js";
|
|
import "rkgk/painter.js";
|
|
import "rkgk/random.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/wall.js";
|
|
import "rkgk/welcome.js";
|
|
import "rkgk/zoom-indicator.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>
|
|
<!-- We shouldn't consider these stylesheets render-blocking.
|
|
About the only render-blocking thing on the page is the throbber. -->
|
|
<link rel="stylesheet" href="{{ static 'fonts.css' }}">
|
|
<link rel="stylesheet" href="{{ static 'index.css' }}">
|
|
|
|
<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="left">
|
|
<rkgk-zoom-indicator class="rkgk-panel"></rkgk-zoom-indicator>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<rkgk-resize-handle
|
|
data-direction="vertical"
|
|
data-inverse
|
|
data-target="panels-overlay"
|
|
data-target-property="--right-width"
|
|
data-init-size="528"
|
|
data-min-size="256"></rkgk-resize-handle>
|
|
<div class="docked">
|
|
<menu class="menu-bar">
|
|
<li class="icon icon-rkgk-grayscale"></li>
|
|
<hr>
|
|
<li><a href="/docs/rkgk.html">Manual</a></li>
|
|
</menu>
|
|
|
|
<rkgk-brush-box id="brush-box"></rkgk-brush-box>
|
|
|
|
<rkgk-resize-handle
|
|
class="always-visible"
|
|
data-direction="horizontal"
|
|
data-target="brush-box"
|
|
data-target-property="--height"
|
|
data-init-size="168"
|
|
data-min-size="96"></rkgk-resize-handle>
|
|
|
|
<rkgk-brush-editor id="brush-editor"></rkgk-brush-editor>
|
|
</div>
|
|
</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>
|
|
|
|
<rkgk-context-menu-space class="fullscreen"></rkgk-context-menu-space>
|
|
|
|
<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>
|
|
|