75 lines
3.5 KiB
HTML
75 lines
3.5 KiB
HTML
<!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>
|