143 lines
7.1 KiB
HTML
143 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;" />
|
||
<title>Clipboard</title>
|
||
<!-- tokens 必须在 fonts 之前：两者都定义 --font-ui/--font-mono，同特异性
|
||
后加载的赢。fonts 在后才能让 Inter/JetBrains Mono 进字体栈（tokens
|
||
注释「fonts.css 会覆盖这两个」的前提）；fonts 加载失败时 tokens 的
|
||
系统字体栈自然兜底。 -->
|
||
<link rel="stylesheet" href="themes/tokens.css" />
|
||
<link rel="stylesheet" href="themes/fonts.css" />
|
||
<link rel="stylesheet" href="themes/themes.css" />
|
||
<link rel="stylesheet" href="themes/accents.css" />
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<script src="theme-boot.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="root">
|
||
<!-- 拖动区 -->
|
||
<header id="drag-bar">
|
||
<img id="app-icon" alt="" />
|
||
<h1 id="title">Clipboard</h1>
|
||
<span id="ipc-status" class="ipc-dot" title="IPC 订阅状态" aria-label="IPC 状态"></span>
|
||
<span class="spacer"></span>
|
||
<button id="refresh-btn" class="icon-btn" title="刷新 (F5)" aria-label="刷新">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M14 8a6 6 0 0 0-10.5-4L2 5.5"/>
|
||
<polyline points="2 2 2 5.5 5.5 5.5"/>
|
||
<path d="M2 8a6 6 0 0 0 10.5 4L14 10.5"/>
|
||
<polyline points="14 14 14 10.5 10.5 10.5"/>
|
||
</svg>
|
||
</button>
|
||
<button id="settings-btn" class="icon-btn" title="设置" aria-label="设置">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M12.33 10.5L14.4 9.1L14.4 6.9L12.33 5.5L12.2 3L10.2 1.9L8 3L5.8 1.9L3.8 3L3.7 5.5L1.6 6.9L1.6 9.1L3.7 10.5L3.8 13L5.8 14.1L8 13L10.2 14.1L12.2 13Z"/>
|
||
<circle cx="8" cy="8" r="2"/>
|
||
</svg>
|
||
</button>
|
||
<button id="pin-btn" class="icon-btn" title="窗口置顶" aria-label="窗口置顶" aria-pressed="true">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<line x1="8" y1="11.3" x2="8" y2="14.7"/>
|
||
<path d="M3.3 11.3h9.4v-1.2a1.3 1.3 0 0 0-.7-1.2l-1.2-.6a1.3 1.3 0 0 1-.7-1.2V4a1.7 1.7 0 0 0-3.4 0v3.1a1.3 1.3 0 0 1-.7 1.2l-1.2.6a1.3 1.3 0 0 0-.7 1.2Z"/>
|
||
</svg>
|
||
</button>
|
||
<button id="close-btn" class="icon-btn" title="关闭 (Esc)" aria-label="关闭">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M3.5 3.5l9 9M12.5 3.5l-9 9"/>
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
|
||
<!-- Tab 栏 -->
|
||
<nav id="tabs">
|
||
<button class="tab active" data-tab="history" type="button">历史<span class="tab-count" id="history-count">0</span></button>
|
||
<button class="tab" data-tab="favorites" type="button">收藏<span class="tab-count" id="fav-count">0</span></button>
|
||
</nav>
|
||
|
||
<!-- 搜索 -->
|
||
<div id="search-row">
|
||
<div id="search-wrap">
|
||
<svg id="search-icon" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<circle cx="7" cy="7" r="4.5"/>
|
||
<path d="m13.5 13.5-3-3"/>
|
||
</svg>
|
||
<input id="search" type="text" placeholder="搜索剪贴板内容…" autocomplete="off" spellcheck="false" />
|
||
<button id="search-clear" type="button" title="清空搜索" aria-label="清空搜索">
|
||
<svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<circle cx="8" cy="8" r="6"/>
|
||
<path d="M5.5 5.5l5 5M10.5 5.5l-5 5"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 列表 -->
|
||
<main id="list-wrap">
|
||
<ul id="list"></ul>
|
||
<div id="empty" class="hidden">
|
||
<svg class="empty-icon" viewBox="0 0 64 64" width="56" height="56" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<rect x="22" y="12" width="20" height="8" rx="2"/>
|
||
<rect x="14" y="18" width="36" height="34" rx="4"/>
|
||
<path d="M22 30h20M22 36h14M22 42h10"/>
|
||
</svg>
|
||
<p class="empty-title">还没有剪贴板记录</p>
|
||
<p class="muted">复制一段文本或图片，就会自动出现在这里</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 状态栏 -->
|
||
<footer id="status">
|
||
<span id="status-left">就绪</span>
|
||
<span class="shortcuts">
|
||
<kbd>↑</kbd><kbd>↓</kbd> 选择
|
||
<span class="dot">·</span>
|
||
<kbd>1</kbd>–<kbd>9</kbd> / <kbd>Enter</kbd> 复制
|
||
<span class="dot">·</span>
|
||
<kbd>Esc</kbd> 关闭
|
||
</span>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 图片大图预览：点缩略图弹出，Esc / 点击任意处关闭 -->
|
||
<div id="lightbox" class="hidden" role="dialog" aria-modal="true" aria-label="图片大图预览" tabindex="-1">
|
||
<img id="lightbox-img" alt="图片大图预览" />
|
||
</div>
|
||
|
||
<!-- 单条卡片模板 -->
|
||
<template id="card-tpl">
|
||
<li class="card" tabindex="0">
|
||
<div class="card-head">
|
||
<span class="slot hidden"></span>
|
||
<span class="time"></span>
|
||
<span class="badge type"></span>
|
||
<span class="spacer"></span>
|
||
<button class="action fav" title="收藏" aria-label="收藏">
|
||
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M8 1.8l1.95 4.05 4.45.6-3.25 3.1.8 4.45L8 11.9l-3.95 2.1.8-4.45L1.6 6.45l4.45-.6z"/>
|
||
</svg>
|
||
</button>
|
||
<button class="action copy" title="复制 (Enter)" aria-label="复制">
|
||
<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<rect x="5" y="5" width="8" height="9" rx="1.5"/>
|
||
<path d="M3 11V3.5A1.5 1.5 0 0 1 4.5 2H10"/>
|
||
</svg>
|
||
<span>复制</span>
|
||
</button>
|
||
<button class="action delete" title="删除" aria-label="删除">
|
||
<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M3 4.5h10M6.5 4.5V3a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1.5M4.5 4.5l.6 9a1.5 1.5 0 0 0 1.5 1.4h2.8a1.5 1.5 0 0 0 1.5-1.4l.6-9"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="text-preview"></p>
|
||
<img class="image-preview hidden" alt="" />
|
||
</div>
|
||
</li>
|
||
</template>
|
||
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
</html> |