zzstoatzz.io
draw things
doodl.waow.tech
draw
atproto
3.2 kB
76 lines
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta
6 name="viewport"
7 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
8 />
9 <title>doodl</title>
10 <meta name="description" content="draw something, save it, and share it." />
11 <meta property="og:title" content="doodl" />
12 <meta property="og:description" content="draw something, save it, and share it." />
13 <meta property="og:type" content="website" />
14 <meta property="og:image" content="https://doodl.waow.tech/icon.png?v=2" />
15 <meta property="og:image:width" content="512" />
16 <meta property="og:image:height" content="512" />
17 <meta name="twitter:card" content="summary" />
18 <meta name="twitter:image" content="https://doodl.waow.tech/icon.png?v=2" />
19 <!-- PWA / installable, native-feel -->
20 <link rel="manifest" href="/manifest.webmanifest" />
21 <meta name="theme-color" content="#fafaf8" media="(prefers-color-scheme: light)" />
22 <meta name="theme-color" content="#15151a" media="(prefers-color-scheme: dark)" />
23 <meta name="mobile-web-app-capable" content="yes" />
24 <meta name="apple-mobile-web-app-capable" content="yes" />
25 <meta name="apple-mobile-web-app-status-bar-style" content="default" />
26 <meta name="apple-mobile-web-app-title" content="doodl" />
27 <link rel="apple-touch-icon" href="/icon.png?v=2" />
28 <link rel="icon" type="image/png" href="/favicon.png?v=2" />
29 <link rel="stylesheet" href="./src/style.css" />
30 </head>
31 <body>
32 <header>
33 <h1>doodl</h1>
34 <nav>
35 <button id="nav-draw" class="active">draw</button>
36 <button id="nav-explore">explore</button>
37 </nav>
38 <span id="session"></span>
39 </header>
40 <main>
41 <section id="view-draw">
42 <div class="mode-banner" id="mode-banner" hidden></div>
43 <div class="tools">
44 <div class="tool-actions">
45 <button id="color-btn" class="picker-btn" title="color" aria-label="color"></button>
46 <button id="stroke-btn" class="picker-btn" title="stroke" aria-label="stroke"></button>
47 </div>
48 <span class="spacer"></span>
49 <div class="tool-actions">
50 <button id="undo" title="undo (⌘/ctrl+z)">undo</button>
51 <button id="clear">clear</button>
52 <button id="save">save</button>
53 </div>
54 </div>
55 <div class="canvas-wrap">
56 <canvas id="pad" width="1024" height="1024"></canvas>
57 </div>
58 <label class="explore-toggle" title="show this drawing in doodl's explore">
59 <input type="checkbox" id="explore-this" checked />
60 <span>show in explore</span>
61 </label>
62 <p id="status"></p>
63 </section>
64 <section id="view-explore" hidden>
65 <div id="gallery"></div>
66 </section>
67 <section id="view-settings" hidden></section>
68 </main>
69 <footer>
70 powered by
71 <a href="https://microcosm.blue" target="_blank" rel="noreferrer">microcosm</a>
72 </footer>
73 <div id="sheet" class="sheet" hidden></div>
74 <script type="module" src="./src/boot.ts"></script>
75 </body>
76</html>