147 lines
4.3 KiB
HTML
147 lines
4.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="#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"
|
|
>
|
|
</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>
|
|
|
|
<button class="save-btn" id="save-btn">Save Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
|
|
</body>
|
|
</html>
|