274 lines
7.9 KiB
HTML
274 lines
7.9 KiB
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="#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"
|
|
>
|
|
⚙
|
|
</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>
|
|
|
|
<!-- 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>
|
|
</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="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>
|