zzstoatzz.io
draw things
doodl.waow.tech
draw
atproto
3.4 kB
81 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="tools">
43 <div class="tool-actions">
44 <button id="color-btn" class="picker-btn" title="color" aria-label="color"></button>
45 <button id="stroke-btn" class="picker-btn" title="stroke" aria-label="stroke"></button>
46 </div>
47 <span class="spacer"></span>
48 <div class="tool-actions">
49 <button id="undo" title="undo (⌘/ctrl+z)">undo</button>
50 <button id="clear">clear</button>
51 <button id="save">save</button>
52 </div>
53 </div>
54 <div class="canvas-wrap">
55 <canvas id="pad" width="1024" height="1024"></canvas>
56 </div>
57 <div class="draw-foot">
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 <div class="mode-banner" id="mode-banner" hidden></div>
63 </div>
64 <p id="status"></p>
65 </section>
66 <section id="view-explore" hidden>
67 <div id="gallery"></div>
68 </section>
69 <section id="view-settings" hidden></section>
70 <section id="view-mine" hidden></section>
71 </main>
72 <footer>
73 <a href="https://tangled.org/zzstoatzz.io/doodl" target="_blank" rel="noreferrer">source code</a>
74 <span class="dot">·</span>
75 powered by
76 <a href="https://microcosm.blue" target="_blank" rel="noreferrer">microcosm</a>
77 </footer>
78 <div id="sheet" class="sheet" hidden></div>
79 <script type="module" src="./src/boot.ts"></script>
80 </body>
81</html>