Tweaks, generating icons
This commit is contained in:
Dan
parent
38cf394916
commit
3757454f3a
9 changed files with 718 additions and 356 deletions
401
index.html
401
index.html
|
|
@ -1,147 +1,274 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="description" content="Post status updates to status.lol">
|
||||
<meta name="theme-color" content="#7c3aed" media="(prefers-color-scheme: light)">
|
||||
<meta name="theme-color" content="#a78bfa" media="(prefers-color-scheme: dark)">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Status Poster">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Status Poster</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="app">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<div class="logo-mark">✦</div>
|
||||
Status Poster
|
||||
</div>
|
||||
<button class="settings-btn" id="settings-btn" aria-label="Open settings">⚙</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Emoji picker -->
|
||||
<div class="emoji-section">
|
||||
<div
|
||||
class="emoji-display"
|
||||
id="emoji-display"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Current emoji — click to change"
|
||||
>
|
||||
<span id="emoji-show">📝</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="emoji-input"
|
||||
class="emoji-picker-input"
|
||||
placeholder="Type or paste an emoji…"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
aria-label="Emoji input"
|
||||
>
|
||||
<span class="emoji-hint" id="emoji-hint">Click to change emoji</span>
|
||||
</div>
|
||||
|
||||
<!-- Status text -->
|
||||
<div class="field">
|
||||
<label for="status-text">Status</label>
|
||||
<textarea
|
||||
id="status-text"
|
||||
placeholder="What's on your mind?"
|
||||
maxlength="5000"
|
||||
rows="4"
|
||||
aria-label="Status text"
|
||||
></textarea>
|
||||
<div class="char-count" id="char-count" aria-live="polite">0 / 5000</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional URL -->
|
||||
<div class="field">
|
||||
<label for="status-url">
|
||||
Link <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:0.88em">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="status-url"
|
||||
placeholder="https://example.com"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Post button -->
|
||||
<button class="post-btn" id="post-btn">
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<span class="btn-label">Post Status</span>
|
||||
</button>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
|
||||
|
||||
<!-- Settings modal -->
|
||||
<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
|
||||
<div class="modal">
|
||||
<div class="modal-grip" aria-hidden="true"></div>
|
||||
|
||||
<div class="modal-header">
|
||||
<span class="modal-title" id="modal-title">Settings</span>
|
||||
<button class="close-btn" id="modal-close" aria-label="Close settings">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="privacy-notice" role="note">
|
||||
<span class="privacy-icon">🔒</span>
|
||||
<span>
|
||||
Your username and API key are stored <strong>only in this browser's local storage</strong>
|
||||
and are never sent anywhere except <strong>api.omg.lol</strong> when you post a status.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="s-username">omg.lol username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="s-username"
|
||||
placeholder="yourname"
|
||||
autocomplete="username"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="description" content="Post status updates to status.lol" />
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#ad7f58"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#ad7f58"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="Status Poster" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<link rel="apple-touch-icon" href="icon-192.png" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Post → status.lol</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<img
|
||||
src="icon.svg"
|
||||
class="logo-mark"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
width="30"
|
||||
height="30"
|
||||
/>
|
||||
Post → status.lol
|
||||
</div>
|
||||
<button
|
||||
class="settings-btn"
|
||||
id="settings-btn"
|
||||
aria-label="Open settings"
|
||||
>
|
||||
</div>
|
||||
⚙
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="field">
|
||||
<label for="s-apikey">API key</label>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
type="password"
|
||||
id="s-apikey"
|
||||
placeholder="Your omg.lol API key"
|
||||
autocomplete="current-password"
|
||||
spellcheck="false"
|
||||
<main>
|
||||
<!-- Emoji picker -->
|
||||
<div class="emoji-section">
|
||||
<div
|
||||
class="emoji-display"
|
||||
id="emoji-display"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Current emoji — click to change"
|
||||
>
|
||||
<button class="eye-btn" id="eye-btn" aria-label="Show API key">👁</button>
|
||||
<span id="emoji-show">💬</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="emoji-input"
|
||||
class="emoji-picker-input"
|
||||
placeholder="Type or paste an emoji…"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
aria-label="Emoji input"
|
||||
/>
|
||||
<span class="emoji-hint" id="emoji-hint">Click to change emoji</span>
|
||||
</div>
|
||||
|
||||
<!-- Status text -->
|
||||
<div class="field">
|
||||
<label for="status-text">Status</label>
|
||||
<textarea
|
||||
id="status-text"
|
||||
placeholder="What's on your mind?"
|
||||
maxlength="5000"
|
||||
rows="4"
|
||||
aria-label="Status text"
|
||||
></textarea>
|
||||
<div class="char-count" id="char-count" aria-live="polite">
|
||||
0 / 5000
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional URL -->
|
||||
<div class="field">
|
||||
<label for="status-url">
|
||||
Link
|
||||
<span
|
||||
style="
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-size: 0.88em;
|
||||
"
|
||||
>(optional)</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="status-url"
|
||||
placeholder="https://example.com"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mastodon toggle -->
|
||||
<div class="field toggle-row">
|
||||
<label class="toggle-label" for="mastodon-toggle">
|
||||
<input type="checkbox" id="mastodon-toggle" />
|
||||
Post to Mastodon
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Post button -->
|
||||
<button class="post-btn" id="post-btn">
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<span class="btn-label">Post Status</span>
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<button class="footer-link" id="privacy-link" type="button">🔒 Privacy</button>
|
||||
<a class="footer-link" href="https://git.bkr.im/ritual/status-poster" target="_blank" rel="noopener">🧑💻 Source Code</a>
|
||||
<a class="footer-link" href="https://ritual.sh" target="_blank" rel="noopener">🖥️ By Ritual</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Privacy modal -->
|
||||
<div
|
||||
class="overlay"
|
||||
id="privacy-overlay"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="privacy-modal-title"
|
||||
>
|
||||
<div class="modal">
|
||||
<div class="modal-grip" aria-hidden="true"></div>
|
||||
<div class="modal-header">
|
||||
<span class="modal-title" id="privacy-modal-title">Privacy</span>
|
||||
<button
|
||||
class="close-btn"
|
||||
id="privacy-modal-close"
|
||||
aria-label="Close privacy notice"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p style="font-size: 0.95rem; line-height: 1.7; margin: 0">
|
||||
This app stores your <strong>omg.lol username</strong> and
|
||||
<strong>API key</strong>
|
||||
only in your browser's local storage. They are never sent to any
|
||||
server other than
|
||||
<strong>api.omg.lol</strong> at the moment you post a status.
|
||||
</p>
|
||||
<p style="font-size: 0.95rem; line-height: 1.7; margin: 0">
|
||||
No analytics, no tracking, no third-party requests. The
|
||||
<a href="https://git.bkr.im/ritual/status-poster"
|
||||
>source code is available online</a
|
||||
>
|
||||
and you can take it and host your version if you want!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="save-btn" id="save-btn">Save Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<!-- Toast notification -->
|
||||
<div id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
|
||||
|
||||
</body>
|
||||
<!-- Settings modal -->
|
||||
<div
|
||||
class="overlay"
|
||||
id="overlay"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
<div class="modal">
|
||||
<div class="modal-grip" aria-hidden="true"></div>
|
||||
|
||||
<div class="modal-header">
|
||||
<span class="modal-title" id="modal-title">Settings</span>
|
||||
<button
|
||||
class="close-btn"
|
||||
id="modal-close"
|
||||
aria-label="Close settings"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="field">
|
||||
<label for="s-username">omg.lol username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="s-username"
|
||||
placeholder="username"
|
||||
autocomplete="username"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="s-apikey">API key</label>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
type="password"
|
||||
id="s-apikey"
|
||||
placeholder="Your omg.lol API key"
|
||||
autocomplete="current-password"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<button class="eye-btn" id="eye-btn" aria-label="Show API key">
|
||||
👁
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Appearance</label>
|
||||
<div
|
||||
class="theme-toggle"
|
||||
id="theme-toggle"
|
||||
role="group"
|
||||
aria-label="Color theme"
|
||||
>
|
||||
<button
|
||||
class="theme-btn"
|
||||
data-theme="light"
|
||||
type="button"
|
||||
aria-pressed="false"
|
||||
>
|
||||
☀ Light
|
||||
</button>
|
||||
<button
|
||||
class="theme-btn"
|
||||
data-theme="auto"
|
||||
type="button"
|
||||
aria-pressed="true"
|
||||
>
|
||||
Auto
|
||||
</button>
|
||||
<button
|
||||
class="theme-btn"
|
||||
data-theme="dark"
|
||||
type="button"
|
||||
aria-pressed="false"
|
||||
>
|
||||
☾ Dark
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="save-btn" id="save-btn">Save Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue