142 lines
7.0 KiB
HTML
Executable File
142 lines
7.0 KiB
HTML
Executable File
<!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">Guest</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="account-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">Account</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 free">Available</span>
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="actionMode" value="auto">
|
|
<span>Automatic</span>
|
|
<span class="tag free">Available</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">
|
|
<div class="field">
|
|
<label class="lbl">Account</label>
|
|
<div id="account-connect-form">
|
|
<div class="row">
|
|
<input id="account-email" class="inp" placeholder="Email" type="email" autocomplete="username">
|
|
</div>
|
|
<div class="row" style="margin-top:6px;">
|
|
<input id="account-password" class="inp" placeholder="Password" type="password" autocomplete="current-password">
|
|
</div>
|
|
<div class="row">
|
|
<button id="account-login" class="btn">Connect</button>
|
|
</div>
|
|
<div class="row" 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">
|
|
<span id="account-greeting" class="muted">Connected.</span>
|
|
</div>
|
|
<div class="row" style="margin-top:8px;">
|
|
<button id="account-logout" class="btn ghost">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tone settings are injected here by panel.js -->
|
|
|
|
</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.1.0"></script>
|
|
</body>
|
|
</html>
|