d689249f3f
- Remove swatch modal → replaced with inline tone row UX - Add active card highlight and tone selection row spanning 4 columns - Apply tone immediately on click (copy/insert according to settings) - Add tooltip on hover for names (replacing marquee on hover) - Enable marquee animation only for overflowed text when active - Integrate forbid & non-toneable filters matching site policy (LGBT & fantasy exclusions) - Sync tone whitelist (roles like technologist, scientist, firefighter, etc.) - Sync tone blacklist (e.g. merman, mermaid, deaf man/woman, woman beard, men with bunny ears) - Add overflow-y hidden toggle when settings modal shown - Move inline styles to style.css for cleaner structure - Refactor panel.js for maintainable tone row injection logic
144 lines
7.4 KiB
HTML
144 lines
7.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">
|
|
<style>
|
|
.modal { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; z-index: 1000; }
|
|
.modal[hidden] { display:none; }
|
|
.modal-card { background: var(--c-bg, #0b1220); color: var(--c-fg, #e5e7eb); border: 1px solid var(--c-border, rgba(255,255,255,.1)); border-radius: 14px; width: min(420px, 92vw); padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
|
|
.theme-light .modal-card { background: #fff; color: #111827; border-color: rgba(0,0,0,.08); }
|
|
.modal-head { display:flex; align-items:center; gap:12px; margin-bottom: 8px; }
|
|
.modal-logo { width: 28px; height: 28px; border-radius: 6px; }
|
|
.modal-body { font-size: 14px; opacity: .9; margin: 8px 0 14px; }
|
|
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
|
|
</style>
|
|
<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)" 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">
|
|
<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" aria-describedby="license-status">
|
|
<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" autocomplete="off">
|
|
<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.
|
|
<br><a href="https://dewemoji.com/pricing" target="_blank" class="cta-link" style="margin-left:6px; text-decoration: underline; font-weight: 500;">
|
|
🔓 Upgrade to Pro
|
|
</a>
|
|
</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>
|
|
|
|
<!-- Branded confirm modal -->
|
|
<div id="confirm-backdrop" class="backdrop" hidden></div>
|
|
<div id="confirm-modal" class="modal" hidden role="dialog" aria-modal="true" aria-labelledby="confirm-title" aria-describedby="confirm-message">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<img src="assets/icon-128.png" alt="Dewemoji" class="modal-logo" />
|
|
<h3 id="confirm-title">Confirm</h3>
|
|
</div>
|
|
<div id="confirm-message" class="modal-body">Are you sure?</div>
|
|
<div class="modal-actions">
|
|
<button id="confirm-cancel" class="btn ghost">Cancel</button>
|
|
<button id="confirm-ok" class="btn">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
<script src="panel.js?ver=1.0.1"></script>
|
|
</body>
|
|
</html> |