feat: Initial prototype

index.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#849979">
+    <meta name="description" content="Make and copy ASCII art, entirely offline.">
+    <title>ascii!</title>
+    <script src="./appearance.js"></script>
+    <link rel="icon" href="./icons/ascii.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
+    <link rel="manifest" href="./manifest.webmanifest">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./app.js"></script>
+</head>
+<body>
+    <main>
+        <header>
+            <a class="logo" href="./" aria-label="ascii homepage">
+                <img src="./icons/ascii.svg" width="64" height="64" alt="">
+                <h1>ascii!</h1>
+            </a>
+        </header>
+        <form id="render-form">
+            <label for="text" data-i18n="textLabel">your text</label>
+            <textarea id="text" name="text" rows="2" maxlength="500" spellcheck="false">hello world</textarea>
+            <div class="controls">
+                <label><span data-i18n="styleLabel">lettering</span>
+                    <select id="style" name="font">
+                        <option value="Standard">Standard</option>
+                    </select>
+                </label>
+                <div class="font-navigation">
+                    <button id="prev-font" type="button" data-i18n="prev">prev</button>
+                    <button id="next-font" type="button">next font: 3-D</button>
+                </div>
+            </div>
+        </form>
+        <div class="output-heading">
+            <p data-i18n="preview">your ASCII art</p>
+            <div class="actions">
+                <button id="copy" type="button" data-i18n="copy">copy</button>
+                <button id="download" type="button" data-i18n="download">download .txt</button>
+                <button id="share" type="button" data-i18n="share">copy link</button>
+            </div>
+        </div>
+        <pre id="output" tabindex="0" aria-label="ASCII art"></pre>
+        <p class="note" data-i18n="glyphNote">Character support varies by font.</p>
+        <p id="status" role="status" aria-live="polite"></p>
+        <footer>
+            <div class="preferences">
+                <label><span data-i18n="theme">appearance</span>
+                    <select id="theme">
+                        <option value="system" data-i18n="system">system</option>
+                        <option value="dark" data-i18n="dark">dark</option>
+                        <option value="light" data-i18n="light">light</option>
+                    </select>
+                </label>
+                <label><span data-i18n="language">language</span>
+                    <select id="language"><option value="en">English</option><option value="tr">Türkçe</option></select>
+                </label>
+            </div>
+            <div class="install-controls">
+                <button id="install" type="button" hidden data-i18n="install">install app</button>
+                <button id="update" type="button" hidden data-i18n="update">update app</button>
+                <details id="install-guide">
+                    <summary data-i18n="install">install app</summary>
+                    <p data-i18n="installGuide">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
+                </details>
+            </div>
+        </footer>
+    </main>
+</body>
+</html>