113 lines
5.4 KiB
HTML
113 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Emoji Widget</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="styles.css" rel="stylesheet">
|
|
<script src="vendor/twemoji.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<header class="hdr">
|
|
<h1 class="ttl">Find Your Emoji <span id="dewemoji-status" class="tag free">Free</span></h1>
|
|
<div class="bar">
|
|
<input id="q" class="inp" type="text" placeholder="Search (e.g. love)" />
|
|
<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">
|
|
<option value="">All categories</option>
|
|
</select>
|
|
<select id="sub" class="sel" disabled>
|
|
<option value="">All subcategories</option>
|
|
</select>
|
|
</section>
|
|
|
|
<main id="list" class="grid"></main>
|
|
|
|
<footer class="ft">
|
|
<button id="more" class="btn w">Load more</button>
|
|
<span id="count" class="muted nowrap"></span>
|
|
<span id="ver" class="badge nowrap"></span>
|
|
</footer>
|
|
|
|
<!-- Settings sheet -->
|
|
<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">
|
|
<button class="tab active" data-tab="general">General</button>
|
|
<button class="tab" data-tab="pro">Pro</button>
|
|
</div>
|
|
|
|
<div id="tab-general" class="tabpane active">
|
|
<!-- Action mode -->
|
|
<div class="field">
|
|
<label class="lbl">Action on emoji click</label>
|
|
<div class="radios" id="mode-group">
|
|
<label class="radio">
|
|
<input type="radio" name="actionMode" value="copy" checked>
|
|
<span>Copy to clipboard</span>
|
|
<span class="tag free">Free</span>
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="actionMode" value="insert">
|
|
<span>Insert to input</span>
|
|
<span class="tag pro">Pro</span>
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="actionMode" value="auto">
|
|
<span>Automatic</span>
|
|
<span class="tag pro">Pro</span>
|
|
</label>
|
|
</div>
|
|
<p class="hint muted">Automatic tries to insert at the last caret; if not possible, it copies instead.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-pro" class="tabpane">
|
|
<!-- License (first) -->
|
|
<div class="field">
|
|
<label class="lbl">License</label>
|
|
<div class="row">
|
|
<input id="license-key" class="inp" placeholder="Enter license key" type="password">
|
|
<button id="license-activate" class="btn">Activate</button>
|
|
<button id="license-deactivate" class="btn ghost">Deactivate</button>
|
|
</div>
|
|
<div class="row" style="margin-top:6px;">
|
|
<button id="license-edit" class="link" style="width: fit-content">Change key</button>
|
|
<button id="license-cancel-edit" class="link" style="display:none;width: fit-content">Cancel</button>
|
|
<span id="license-status" class="muted">Free mode — Pro features locked.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tone settings are injected here by panel.js -->
|
|
|
|
<!-- Diagnostics (hidden for debugging) -->
|
|
<div class="field" style="display:none;">
|
|
<label class="lbl">Diagnostics</label>
|
|
<div class="row">
|
|
<button id="diag-run" class="btn">Run diagnostics</button>
|
|
<span id="diag-spin" class="muted" style="display:none;">Running…</span>
|
|
</div>
|
|
<div id="diag-out" class="diagbox muted"></div>
|
|
<p class="hint muted">Tip: Click in a text box on the page first, then run diagnostics.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
<script src="panel.js"></script>
|
|
</body>
|
|
</html> |