183 lines
9.3 KiB
HTML
183 lines
9.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Dewemoji</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<meta name="theme-color" content="#0b1220" />
|
||
<link rel="preconnect" href="https://twemoji.maxcdn.com" crossorigin />
|
||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
|
||
<link href="app.css" rel="stylesheet" />
|
||
</head>
|
||
<body class="theme-dark">
|
||
<header class="hdr">
|
||
<h1 class="ttl">Find Your Emoji <span id="dewemoji-status" class="tag free">Guest</span></h1>
|
||
<div class="bar">
|
||
<input id="q" class="inp" type="search" placeholder="Search (e.g. love)" aria-label="Search emojis" />
|
||
<button id="clear" class="btn icon" title="Clear" aria-label="Clear">✕</button>
|
||
<button id="theme" class="btn icon" title="Toggle theme" aria-label="Toggle theme">🌙</button>
|
||
<button id="settings" class="btn icon" title="Settings" aria-label="Settings">⚙️</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="filters">
|
||
<select id="cat" class="sel" aria-label="Category filter">
|
||
<option value="">All categories</option>
|
||
</select>
|
||
<select id="sub" class="sel" aria-label="Subcategory filter" disabled>
|
||
<option value="">All subcategories</option>
|
||
</select>
|
||
</section>
|
||
|
||
<main id="list" class="grid" aria-live="polite"></main>
|
||
<div id="autoload-sentinel" class="autoload-sentinel" aria-hidden="true"></div>
|
||
|
||
<footer class="ft">
|
||
<button id="more" class="btn w">Load more</button>
|
||
<span id="count" class="muted nowrap">0 items</span>
|
||
<span id="ver" class="badge nowrap">APK</span>
|
||
</footer>
|
||
|
||
<div id="sheet-backdrop" class="backdrop" hidden></div>
|
||
<aside id="settings-sheet" class="sheet" hidden role="dialog" aria-modal="true" aria-labelledby="settings-title">
|
||
<div class="sheet-head">
|
||
<h3 id="settings-title">Settings</h3>
|
||
<button id="sheet-close" class="btn icon" title="Close" aria-label="Close">✕</button>
|
||
</div>
|
||
|
||
<div class="sheet-body">
|
||
<div class="tabs" role="tablist" aria-label="Settings tabs">
|
||
<button class="tab active" data-tab="general" role="tab" aria-selected="true">General</button>
|
||
<button class="tab" data-tab="account" role="tab" aria-selected="false">Account</button>
|
||
<button class="tab" data-tab="bubble" role="tab" aria-selected="false">Bubble</button>
|
||
</div>
|
||
|
||
<section id="tab-general" class="tabpane active" role="tabpanel">
|
||
<div class="field">
|
||
<label class="lbl">Instant Access</label>
|
||
<p class="hint muted">Tap an emoji to copy. Then switch back and paste in the app you are typing in.</p>
|
||
</div>
|
||
<div class="field">
|
||
<label class="lbl">Current Session</label>
|
||
<div class="diagbox" id="session-summary">Guest mode. Public keywords only.</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="lbl">Grid display</label>
|
||
<label class="radio row-inline" for="show-emoji-names-toggle">
|
||
<input id="show-emoji-names-toggle" type="checkbox" />
|
||
<span>Show emoji names under each emoji</span>
|
||
</label>
|
||
<p class="hint muted">Off by default for larger emoji and faster scanning.</p>
|
||
</div>
|
||
<div class="field">
|
||
<label class="lbl">Skin tone</label>
|
||
<label class="radio row-inline" for="tone-lock-toggle">
|
||
<input id="tone-lock-toggle" type="checkbox" />
|
||
<span>Use preferred skin tone on tap (tone lock)</span>
|
||
</label>
|
||
<div class="row row-block" style="margin-top:8px;">
|
||
<div id="preferred-skin-tone-radios" class="tone-pref-group" role="radiogroup" aria-label="Preferred skin tone">
|
||
<label class="tone-swatch" title="Default (no tone)">
|
||
<input type="radio" name="preferredSkinTone" value="0" aria-label="Default (no tone)" />
|
||
<span class="tone-circle tone-default" aria-hidden="true"></span>
|
||
</label>
|
||
<label class="tone-swatch" title="Light skin tone">
|
||
<input type="radio" name="preferredSkinTone" value="1" aria-label="Light skin tone" />
|
||
<span class="tone-circle tone-1" aria-hidden="true"></span>
|
||
</label>
|
||
<label class="tone-swatch" title="Medium-light skin tone">
|
||
<input type="radio" name="preferredSkinTone" value="2" aria-label="Medium-light skin tone" />
|
||
<span class="tone-circle tone-2" aria-hidden="true"></span>
|
||
</label>
|
||
<label class="tone-swatch" title="Medium skin tone">
|
||
<input type="radio" name="preferredSkinTone" value="3" aria-label="Medium skin tone" />
|
||
<span class="tone-circle tone-3" aria-hidden="true"></span>
|
||
</label>
|
||
<label class="tone-swatch" title="Medium-dark skin tone">
|
||
<input type="radio" name="preferredSkinTone" value="4" aria-label="Medium-dark skin tone" />
|
||
<span class="tone-circle tone-4" aria-hidden="true"></span>
|
||
</label>
|
||
<label class="tone-swatch" title="Dark skin tone">
|
||
<input type="radio" name="preferredSkinTone" value="5" aria-label="Dark skin tone" />
|
||
<span class="tone-circle tone-5" aria-hidden="true"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<p class="hint muted">Long press an emoji with skin tones to choose a tone quickly.</p>
|
||
</div>
|
||
<div class="field">
|
||
<label class="lbl">Refresh catalog</label>
|
||
<div class="row row-inline">
|
||
<button id="refresh" class="btn">Refresh</button>
|
||
<span id="api-status" class="muted">Loading…</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tab-account" class="tabpane" role="tabpanel">
|
||
<div class="field">
|
||
<label class="lbl">Account</label>
|
||
<div id="account-connect-form">
|
||
<div class="row row-block">
|
||
<input id="account-email" class="inp" placeholder="Email" type="email" autocomplete="username" />
|
||
</div>
|
||
<div class="row row-block" style="margin-top:6px;">
|
||
<input id="account-password" class="inp" placeholder="Password" type="password" autocomplete="current-password" />
|
||
</div>
|
||
<div class="row row-inline" style="margin-top:8px;">
|
||
<button id="account-login" class="btn">Connect</button>
|
||
</div>
|
||
<div class="row row-inline" style="margin-top:6px;">
|
||
<span id="account-status" class="muted">Not connected. Public keywords only.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="account-connected" style="display:none;">
|
||
<div class="row row-inline">
|
||
<span id="account-greeting" class="muted">Connected.</span>
|
||
</div>
|
||
<div class="row row-inline" style="margin-top:8px;">
|
||
<button id="account-logout" class="btn ghost">Logout</button>
|
||
</div>
|
||
<div class="row row-inline" style="margin-top:6px;">
|
||
<span class="muted">Private keyword matches appear in search when available.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tab-bubble" class="tabpane" role="tabpanel">
|
||
<div class="field">
|
||
<label class="lbl">Floating bubble (quick search + copy)</label>
|
||
<p class="hint muted">Use Dewemoji bubble to quickly search and copy emoji while using other apps. Paste manually in the app you’re typing in.</p>
|
||
</div>
|
||
|
||
<div class="bubble-grid">
|
||
<div class="bubble-kv"><span class="muted">Platform</span><span id="bubble-platform-status">Checking…</span></div>
|
||
<div class="bubble-kv"><span class="muted">Overlay permission</span><span id="bubble-overlay-status">Checking…</span></div>
|
||
<div class="bubble-kv"><span class="muted">Notifications</span><span id="bubble-notify-status">Checking…</span></div>
|
||
<div class="bubble-kv"><span class="muted">Bubble service</span><span id="bubble-running-status">Checking…</span></div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="row row-wrap">
|
||
<button id="bubble-enable-btn" class="btn">Enable bubble</button>
|
||
<button id="bubble-disable-btn" class="btn ghost">Disable bubble</button>
|
||
</div>
|
||
<div class="row row-wrap" style="margin-top:8px;">
|
||
<button id="bubble-overlay-settings-btn" class="btn ghost">Grant overlay permission</button>
|
||
<button id="bubble-notify-settings-btn" class="btn ghost">Open notification settings</button>
|
||
</div>
|
||
<div class="diagbox" id="bubble-help" style="margin-top:8px;">Bubble is off by default. It opens Dewemoji for quick search and copy.</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</aside>
|
||
|
||
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
||
|
||
<script src="twemoji-lite.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|