94 lines
5.4 KiB
HTML
94 lines
5.4 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>
|
||
(() => {
|
||
let theme = 'system';
|
||
let language = navigator.language.startsWith('tr') ? 'tr' : 'en';
|
||
try {
|
||
const storedTheme = localStorage.getItem('ascii-pwa-theme');
|
||
const storedLanguage = localStorage.getItem('ascii-pwa-language');
|
||
if (['system', 'light', 'dark'].includes(storedTheme)) theme = storedTheme;
|
||
if (['en', 'tr'].includes(storedLanguage)) language = storedLanguage;
|
||
} catch { /* Preferences remain available without persistent storage. */ }
|
||
document.documentElement.dataset.theme = theme;
|
||
document.documentElement.lang = language;
|
||
})();
|
||
</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 x-data="asciiApp" x-cloak>
|
||
<header>
|
||
<a class="logo" href="./" :aria-label="t('homeLabel')">
|
||
<img src="./icons/ascii.svg" width="64" height="64" alt="">
|
||
<h1>ascii!</h1>
|
||
</a>
|
||
</header>
|
||
<form id="render-form" @submit.prevent="draw()">
|
||
<label for="text" x-text="t('textLabel')">your text</label>
|
||
<textarea id="text" name="text" rows="2" maxlength="500" spellcheck="false" x-model="text"></textarea>
|
||
<div class="controls">
|
||
<label><span x-text="t('styleLabel')">lettering</span>
|
||
<span class="select-control"><select id="style" name="font" x-model="font">
|
||
<template x-for="name in styles" :key="name">
|
||
<option :value="name" :selected="name === font" x-text="name"></option>
|
||
</template>
|
||
</select></span>
|
||
</label>
|
||
<div class="font-navigation">
|
||
<button id="prev-font" type="button" @click="cycleFont(-1)" x-text="t('prev')">prev</button>
|
||
<button id="next-font" type="button" @click="cycleFont(1)" :title="t('nextFont').replace('{name}', nextFont)" x-text="t('nextFont').replace('{name}', nextFont)"></button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="output-heading">
|
||
<p x-text="t('preview')">your ASCII art</p>
|
||
<div class="actions">
|
||
<button id="copy" type="button" @click="copy()" :disabled="!canCopy" x-text="t('copy')">copy</button>
|
||
<button id="download" type="button" @click="download()" :disabled="!canCopy" x-text="t('download')">download .txt</button>
|
||
<button id="share" type="button" @click="share()" x-text="t('share')">copy link</button>
|
||
</div>
|
||
</div>
|
||
<pre id="output" x-ref="output" tabindex="0" :aria-label="t('outputLabel')" :aria-busy="busy" x-text="ascii"></pre>
|
||
<p class="note" x-text="t('glyphNote')">Character support varies by font.</p>
|
||
<p id="status" role="status" aria-live="polite" x-text="statusKey ? t(statusKey) : ''"></p>
|
||
<footer>
|
||
<div class="preferences">
|
||
<label><span x-text="t('theme')">appearance</span>
|
||
<span class="select-control"><select id="theme" x-model="theme">
|
||
<option value="system" x-text="t('system')">system</option>
|
||
<option value="dark" x-text="t('dark')">dark</option>
|
||
<option value="light" x-text="t('light')">light</option>
|
||
</select></span>
|
||
</label>
|
||
<label><span x-text="t('language')">language</span>
|
||
<span class="select-control"><select id="language" x-model="language"><option value="en">🇬🇧 English</option><option value="tr">🇹🇷 Türkçe</option></select></span>
|
||
</label>
|
||
</div>
|
||
<div class="install-controls">
|
||
<button id="install" type="button" x-show="installAvailable" @click="install()" x-text="t('install')">install app</button>
|
||
<button id="update" type="button" x-show="updateAvailable" @click="update()" x-text="t('update')">update app</button>
|
||
<button id="install-help" type="button" x-show="!installed && !installAvailable" @click="$refs.installGuide.showModal()" x-text="t('install')">install app</button>
|
||
</div>
|
||
</footer>
|
||
<dialog id="install-guide" x-ref="installGuide" aria-labelledby="install-guide-title" aria-describedby="install-guide-text" @click.self="$refs.installGuide.close()">
|
||
<div class="dialog-content">
|
||
<h2 id="install-guide-title" x-text="t('install')">install app</h2>
|
||
<p id="install-guide-text" x-text="t('installGuide')">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
|
||
<form method="dialog"><button autofocus x-text="t('close')">close</button></form>
|
||
</div>
|
||
</dialog>
|
||
</main>
|
||
</body>
|
||
</html>
|