293 lines
8.3 KiB
HTML
293 lines
8.3 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="Post → status.lol" />
|
|
<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"
|
|
aria-expanded="false"
|
|
>
|
|
<span id="emoji-show">💬</span>
|
|
</div>
|
|
<emoji-picker id="emoji-picker"></emoji-picker>
|
|
</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. The emoji picker loads its library and
|
|
data from <strong>cdn.jsdelivr.net</strong> - no personal data is
|
|
sent there, and the data is cached locally after the first load. 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="polite-notice">
|
|
<span class="privacy-icon">🔒</span>
|
|
<span
|
|
>Your username and API key are stored
|
|
<strong>only in this browser</strong> and are never sent anywhere
|
|
except <strong>api.omg.lol</strong> when you post.</span
|
|
>
|
|
</div>
|
|
|
|
<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
|
|
type="module"
|
|
src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"
|
|
></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|