81 lines
5.4 KiB
HTML
81 lines
5.4 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>设置</title>
|
|
<link rel="stylesheet" href="themes/fonts.css" />
|
|
<link rel="stylesheet" href="themes/tokens.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">设置</h1><span class="spacer"></span><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>
|
|
<nav id="tab-bar" role="tablist" aria-label="设置分类">
|
|
<button class="tab" role="tab" id="tab-appearance" aria-controls="panel-appearance" aria-selected="true" tabindex="0">外观</button>
|
|
<button class="tab" role="tab" id="tab-general" aria-controls="panel-general" aria-selected="false" tabindex="-1">通用</button>
|
|
<button class="tab" role="tab" id="tab-about" aria-controls="panel-about" aria-selected="false" tabindex="-1">关于</button>
|
|
</nav>
|
|
<main id="settings-body">
|
|
<section class="tab-panel" role="tabpanel" id="panel-appearance" aria-labelledby="tab-appearance">
|
|
<div class="setting-row column">
|
|
<div class="setting-label">主题</div>
|
|
<div id="theme-grid" class="theme-grid"></div>
|
|
</div>
|
|
<div class="setting-row">
|
|
<label class="setting-label" for="opt-follow-system">跟随系统主题</label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="opt-follow-system" />
|
|
<span class="slider-track"></span>
|
|
</label>
|
|
</div>
|
|
<div class="setting-row">
|
|
<div class="setting-label">强调色</div>
|
|
<div id="accent-grid" class="accent-grid"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="tab-panel" role="tabpanel" id="panel-general" aria-labelledby="tab-general" hidden>
|
|
<div class="setting-row"><label class="setting-label" for="opt-hotkey">唤起面板快捷键</label><select id="opt-hotkey"><option value="Ctrl+Alt+V">Ctrl + Alt + V</option><option value="Ctrl+Shift+V">Ctrl + Shift + V</option><option value="Alt+Shift+V">Alt + Shift + V</option><option value="Ctrl+Alt+C">Ctrl + Alt + C</option><option value="">禁用</option></select></div>
|
|
<div class="setting-row"><label class="setting-label" for="opt-autolaunch">开机自启动</label><label class="switch"><input type="checkbox" id="opt-autolaunch" /><span class="slider-track"></span></label></div>
|
|
<div class="setting-row"><label class="setting-label" for="opt-maxitems">最大保留条数</label><select id="opt-maxitems"><option value="0">不限制</option><option value="200">200</option><option value="500">500</option><option value="1000">1000</option></select></div>
|
|
<div class="setting-row"><label class="setting-label" for="opt-displaylimit">界面显示条数</label><select id="opt-displaylimit"><option value="100">100</option><option value="300">300</option><option value="500">500</option><option value="1000">1000</option></select></div>
|
|
<div class="setting-row"><label class="setting-label" for="opt-pollms">轮询间隔</label><select id="opt-pollms"><option value="500">500 ms</option><option value="1000">1000 ms</option><option value="2000">2000 ms</option></select></div>
|
|
<div class="setting-row column"><div class="setting-label">数据保存位置</div><div class="path-box"><span id="opt-datadir" class="path-text"></span></div><div class="btn-row"><button id="btn-change-dir" class="btn">更改…</button><button id="btn-open-dir" class="btn">打开文件夹</button></div></div>
|
|
<div class="setting-row column danger-zone"><div class="setting-label">清空历史（保留置顶）</div><button id="btn-clear" class="btn btn-danger">清空历史</button></div>
|
|
</section>
|
|
|
|
<section class="tab-panel" role="tabpanel" id="panel-about" aria-labelledby="tab-about" hidden>
|
|
<div class="about-head">
|
|
<div class="about-icon">
|
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<rect x="8" y="3" width="8" height="3" rx="1"/>
|
|
<rect x="5" y="5" width="14" height="16" rx="2"/>
|
|
<path d="M9 11h6M9 14.5h6M9 18h3"/>
|
|
</svg>
|
|
</div>
|
|
<div class="about-name">剪贴板</div>
|
|
<div class="about-tagline">简洁的剪贴板管理器</div>
|
|
</div>
|
|
<div class="setting-row column">
|
|
<div class="setting-label">开发者</div>
|
|
<div class="about-devline">
|
|
<span class="about-dev">关济寰</span>
|
|
<a class="ext-link" href="https://www.guanjihuan.com/about" target="_blank" rel="noopener">https://www.guanjihuan.com/about</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer id="status"><span id="status-left">就绪</span></footer>
|
|
</div>
|
|
<script src="settings.js"></script>
|
|
</body>
|
|
</html>
|