Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
147 lines (143 loc) · 18.5 KB
/
Copy pathindex.html
File metadata and controls
147 lines (143 loc) · 18.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#f7f2fa" />
<meta name="description" content="HUE — 全屏色彩工作台。探索颜色、自由缩放、收藏灵感。" data-i18n-content="HUE — 全屏色彩工作台。探索颜色、自由缩放、收藏灵感。" />
<title>Hue by AstrBot</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='12' fill='%23795EA8'/%3E%3Ccircle cx='15' cy='16' r='8' fill='%23EADDFF'/%3E%3Ccircle cx='25' cy='24' r='8' fill='%23D0BCFF'/%3E%3C/svg%3E" />
</head>
<body>
<main class="app">
<section class="picker" aria-label="颜色选择器" data-i18n-aria-label="颜色选择器">
<canvas id="color-plane" tabindex="0" role="application" aria-label="饱和度与明度取色区。方向键调整颜色，Shift 加速；滚轮缩放，空格加拖动平移。" data-i18n-aria-label="饱和度与明度取色区。方向键调整颜色，Shift 加速；滚轮缩放，空格加拖动平移。"></canvas>
<div id="selection" class="selection" aria-hidden="true"><span id="selection-label">#8B7AE8</span></div>
<div id="hover-color" class="hover-color" aria-hidden="true"><i></i><span></span></div>
<button id="mobile-sidebar" class="mobile-sidebar" aria-label="打开颜色面板" data-i18n-aria-label="打开颜色面板" data-icon="panel"></button>
<div class="picker-dock">
<div id="mobile-color-slot" class="mobile-color-slot"></div>
<div class="hub" aria-label="色相与缩放控制" data-i18n-aria-label="色相与缩放控制">
<div class="hue-row hue-hub">
<label for="hue" data-i18n="色相">色相</label>
<input id="hue" class="hue-slider" type="range" min="0" max="360" step="0.1" value="249.3" aria-label="色相" data-i18n-aria-label="色相" />
<output id="hue-value" for="hue">249°</output>
</div>
<div class="zoom-hub">
<div class="zoom-controls">
<md-icon-button id="zoom-out" aria-label="缩小" data-i18n-aria-label="缩小" title="缩小（−）" data-i18n-title="缩小（−）"><span data-icon="minus"></span></md-icon-button>
<button id="zoom-reset" title="重置视图（0）" data-i18n-title="重置视图（0）" aria-label="重置缩放" data-i18n-aria-label="重置缩放">100<span>%</span></button>
<md-icon-button id="zoom-in" aria-label="放大" data-i18n-aria-label="放大" title="放大（+）" data-i18n-title="放大（+）"><span data-icon="plus"></span></md-icon-button>
<span class="control-divider"></span>
<md-icon-button id="fullscreen" aria-label="进入全屏" data-i18n-aria-label="进入全屏" title="全屏" data-i18n-title="全屏"><span data-icon="expand"></span></md-icon-button>
</div>
</div>
</div>
</div>
</section>
<aside class="sidebar" aria-label="当前颜色与配色灵感" data-i18n-aria-label="当前颜色与配色灵感">
<header class="brand-row">
<div class="brand"><span class="brand-mark"><i></i><i></i></span><span>hue</span></div>
<md-icon-button id="language-toggle" aria-label="Switch to English" title="Switch to English"><span data-icon="globe"></span></md-icon-button>
<md-icon-button id="theme-toggle" aria-label="切换深色模式" data-i18n-aria-label="切换深色模式" title="切换深色模式" data-i18n-title="切换深色模式"><span data-icon="moon"></span></md-icon-button>
<md-icon-button id="close-sidebar" aria-label="关闭颜色面板" data-i18n-aria-label="关闭颜色面板"><span data-icon="close"></span></md-icon-button>
</header>
<div class="sidebar-content">
<section class="current-section" aria-label="当前颜色" data-i18n-aria-label="当前颜色">
<div id="color-card" class="color-card">
<div class="swatch-top"><button id="color-family" class="color-name" title="在颜色大全中探索" data-i18n-title="在颜色大全中探索" data-i18n="匹配颜色名称">匹配颜色名称</button><div class="swatch-actions"><button id="share-color" aria-label="分享与导出" data-i18n-aria-label="分享与导出" title="分享与导出" data-i18n-title="分享与导出" data-icon="share"></button><button id="save-color" aria-label="收藏当前颜色" data-i18n-aria-label="收藏当前颜色" title="收藏当前颜色" data-i18n-title="收藏当前颜色" data-icon="bookmark"></button></div></div>
<div class="swatch-bottom"><strong id="hero-hex">#8B7AE8</strong><button id="mobile-copy-color" aria-label="复制 HEX 色值" data-i18n-aria-label="复制 HEX 色值" title="复制 HEX" data-i18n-title="复制 HEX" data-icon="copy"></button><span id="swatch-flower" aria-hidden="true">✳</span></div>
</div>
<div class="hex-field">
<label for="hex-input">HEX</label>
<input id="hex-input" value="#8B7AE8" maxlength="7" spellcheck="false" autocomplete="off" aria-label="输入 HEX 色值" data-i18n-aria-label="输入 HEX 色值" />
<md-icon-button id="copy-hex" aria-label="复制 HEX 色值" data-i18n-aria-label="复制 HEX 色值" title="复制 HEX" data-i18n-title="复制 HEX"><span data-icon="copy"></span></md-icon-button>
</div>
<div class="color-values">
<div class="value-field"><label for="rgb-value">RGB</label><input id="rgb-value" value="139,122,232" aria-label="输入 RGB 色值" data-i18n-aria-label="输入 RGB 色值" title="R,G,B，各项为 0–255 的整数" data-i18n-title="R,G,B，各项为 0–255 的整数" spellcheck="false" autocomplete="off" maxlength="48" /><button id="copy-rgb" title="复制 RGB" data-i18n-title="复制 RGB" aria-label="复制 RGB 色值" data-i18n-aria-label="复制 RGB 色值" data-icon="copy"></button></div>
<div class="value-field"><label for="hsl-value">HSL</label><input id="hsl-value" value="249°,71%,69%" aria-label="输入 HSL 色值" data-i18n-aria-label="输入 HSL 色值" title="H,S%,L%，色相 0–360，饱和度与亮度 0–100" data-i18n-title="H,S%,L%，色相 0–360，饱和度与亮度 0–100" spellcheck="false" autocomplete="off" maxlength="48" /><button id="copy-hsl" title="复制 HSL" data-i18n-title="复制 HSL" aria-label="复制 HSL 色值" data-i18n-aria-label="复制 HSL 色值" data-icon="copy"></button></div>
</div>
<div class="picker-actions">
<span class="mobile-tools-label" data-i18n="色彩工具">色彩工具</span>
<md-filled-tonal-button id="eyedropper"><span slot="icon" data-icon="pipette"></span><span data-i18n="从屏幕取色">从屏幕取色</span></md-filled-tonal-button>
<md-icon-button id="tools-toggle" aria-haspopup="menu" aria-controls="tools-menu" aria-expanded="false" aria-label="色彩工具" data-i18n-aria-label="色彩工具" title="色彩工具" data-i18n-title="色彩工具"><span data-icon="menu"></span></md-icon-button>
<md-menu id="tools-menu" anchor="tools-toggle" positioning="popover" anchor-corner="end-end" menu-corner="start-end" aria-label="色彩工具" data-i18n-aria-label="色彩工具">
<md-menu-item data-tool="image"><span slot="start" data-icon="image"></span><span slot="headline" data-i18n="从图片提取">从图片提取</span></md-menu-item>
<md-menu-item data-tool="harmony"><span slot="start" data-icon="sparkles"></span><span slot="headline" data-i18n="生成配色">生成配色</span></md-menu-item>
<md-menu-item data-tool="scale"><span slot="start" data-icon="scale"></span><span slot="headline" data-i18n="明暗色阶">明暗色阶</span></md-menu-item>
</md-menu>
</div>
</section>
<section class="studio-tools" aria-label="色彩工具" data-i18n-aria-label="色彩工具">
<div id="shared-palette" class="shared-palette" hidden>
<h2 data-i18n="共享配色">共享配色</h2>
<div id="shared-swatches" class="tool-swatches"></div>
<div class="tool-actions"><button id="save-shared" data-i18n="收藏配色">收藏配色</button><button id="export-shared" data-i18n="分享与导出">分享与导出</button></div>
</div>
<section id="image-tool" class="tool-panel" aria-labelledby="image-heading" hidden>
<div class="active-tool-heading"><h2 id="image-heading" data-i18n="从图片提取">从图片提取</h2><button data-close-tool aria-label="收起工具" data-i18n-aria-label="收起工具" title="收起工具" data-i18n-title="收起工具" data-icon="close"></button></div>
<div class="tool-body">
<button id="choose-image" class="image-drop"><span data-icon="image"></span><strong data-i18n="拖入图片，或点击选择">拖入图片，或点击选择</strong><span data-i18n="也可粘贴截图 · 图片仅在本地处理">也可粘贴截图 · 图片仅在本地处理</span></button>
<input id="image-file" type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" hidden />
<p class="tool-note" data-i18n="PNG、JPG、WebP、GIF、AVIF · 最大 20 MB">PNG、JPG、WebP、GIF、AVIF · 最大 20 MB</p>
<img id="image-preview" class="image-preview" alt="待提取配色的图片" data-i18n-alt="待提取配色的图片" hidden />
<div class="tool-option-row"><span data-i18n="颜色数量">颜色数量</span><div class="tool-chips" role="group" aria-label="颜色数量" data-i18n-aria-label="颜色数量"><button data-count="5" aria-pressed="false">5</button><button data-count="6" aria-pressed="true">6</button><button data-count="7" aria-pressed="false">7</button><button data-count="8" aria-pressed="false">8</button></div></div>
<p id="image-status" class="tool-note" role="status" aria-live="polite"></p>
<div id="image-swatches" class="tool-swatches"></div>
<div class="tool-actions"><button id="save-image" disabled data-i18n="收藏配色">收藏配色</button><button id="export-image" disabled data-i18n="分享与导出">分享与导出</button></div>
</div>
</section>
<section id="harmony-tool" class="tool-panel" aria-labelledby="harmony-heading" hidden>
<div class="active-tool-heading"><h2 id="harmony-heading" data-i18n="生成配色">生成配色</h2><button data-close-tool aria-label="收起工具" data-i18n-aria-label="收起工具" title="收起工具" data-i18n-title="收起工具" data-icon="close"></button></div>
<div class="tool-body">
<div class="tool-chips harmony-modes" role="group" aria-label="配色关系" data-i18n-aria-label="配色关系"><button data-harmony="complementary" aria-pressed="true" data-i18n="互补色">互补色</button><button data-harmony="analogous" aria-pressed="false" data-i18n="邻近色">邻近色</button><button data-harmony="triadic" aria-pressed="false" data-i18n="三角色">三角色</button><button data-harmony="monochrome" aria-pressed="false" data-i18n="同色系">同色系</button></div>
<p class="tool-note" data-i18n="围绕当前颜色生成，锁定喜欢的颜色再换一组。">围绕当前颜色生成，锁定喜欢的颜色再换一组。</p>
<div id="harmony-swatches" class="tool-swatches"></div>
<div class="tool-actions"><button id="regenerate" data-i18n="重新生成">重新生成</button><button id="save-harmony" data-i18n="收藏配色">收藏配色</button><button id="export-harmony" data-i18n="分享与导出">分享与导出</button></div>
</div>
</section>
<section id="scale-tool" class="tool-panel" aria-labelledby="scale-heading" hidden>
<div class="active-tool-heading"><h2 id="scale-heading" data-i18n="明暗色阶">明暗色阶</h2><button data-close-tool aria-label="收起工具" data-i18n-aria-label="收起工具" title="收起工具" data-i18n-title="收起工具" data-icon="close"></button></div>
<div class="tool-body">
<p class="tool-note" data-i18n="从浅到深的 11 级色阶，点击任意色阶取色。">从浅到深的 11 级色阶，点击任意色阶取色。</p>
<div id="scale-swatches" class="scale-swatches"></div>
<div class="tool-actions"><button id="save-scale" data-i18n="收藏配色">收藏配色</button><button id="export-scale" data-i18n="分享与导出">分享与导出</button></div>
</div>
</section>
</section>
<section class="inspiration-section" aria-labelledby="inspiration-heading">
<div class="section-title"><h2 id="inspiration-heading" data-i18n="配色灵感">配色灵感</h2><md-icon-button id="shuffle-palettes" aria-label="换一组配色" data-i18n-aria-label="换一组配色" title="换一组" data-i18n-title="换一组"><span data-icon="shuffle"></span></md-icon-button></div>
<div class="palette-tabs" role="group" aria-label="配色分类" data-i18n-aria-label="配色分类"><button id="curated-tab" class="active" aria-pressed="true" data-i18n="精选配色">精选配色</button><button id="saved-tab" aria-pressed="false"><span data-i18n="我的收藏">我的收藏</span> <span id="saved-count">0</span></button></div>
<div id="palette-filter-row" class="palette-filter-row" role="group" aria-label="配色风格" data-i18n-aria-label="配色风格"><button data-style="all" class="active" aria-pressed="true" data-i18n="全部">全部</button><button data-style="自然" aria-pressed="false" data-i18n="自然">自然</button><button data-style="柔和" aria-pressed="false" data-i18n="柔和">柔和</button><button data-style="鲜明" aria-pressed="false" data-i18n="鲜明">鲜明</button><button data-style="复古" aria-pressed="false" data-i18n="复古">复古</button><button data-style="深色" aria-pressed="false" data-i18n="深色">深色</button><button data-style="极简" aria-pressed="false" data-i18n="极简">极简</button></div>
<div id="palettes" class="palettes"></div>
<div id="palette-pagination" class="palette-pagination"><span id="palette-page" aria-live="polite"></span><div><md-icon-button id="palette-prev" aria-label="上一页配色" data-i18n-aria-label="上一页配色"><span data-icon="chevron-left"></span></md-icon-button><md-icon-button id="palette-next" aria-label="下一页配色" data-i18n-aria-label="下一页配色"><span data-icon="chevron-right"></span></md-icon-button></div></div>
</section>
<section class="recent-section" aria-labelledby="recent-heading"><div class="section-label"><h2 id="recent-heading" data-i18n="最近探索">最近探索</h2><button id="clear-recent" data-i18n="清空">清空</button></div><div id="recent-colors" class="recent-colors"></div></section>
</div>
</aside>
</main>
<md-dialog id="color-library" aria-label="颜色大全" data-i18n-aria-label="颜色大全">
<div slot="headline" class="library-heading"><span data-i18n="颜色大全">颜色大全</span><md-icon-button id="close-library" aria-label="关闭颜色大全" data-i18n-aria-label="关闭颜色大全"><span data-icon="close"></span></md-icon-button></div>
<div slot="content" class="library-content">
<label class="library-search"><span data-icon="search"></span><input id="color-search" type="search" placeholder="搜索名称、拼音或 HEX" data-i18n-placeholder="搜索名称、拼音或 HEX" aria-label="搜索颜色" data-i18n-aria-label="搜索颜色" autocomplete="off" autofocus /></label>
<div class="library-filters" role="group" aria-label="颜色来源" data-i18n-aria-label="颜色来源"><button class="active" data-group="all" aria-pressed="true" data-i18n="全部">全部</button><button data-group="chinese" aria-pressed="false" data-i18n="中国传统色">中国传统色</button><button data-group="css" aria-pressed="false" data-i18n="CSS 标准色">CSS 标准色</button><span id="library-results-count" aria-live="polite"></span></div>
<div id="library-grid" class="library-grid"></div>
<md-text-button id="library-more" data-i18n="显示更多">显示更多</md-text-button>
</div>
<div slot="actions" class="library-sources"><a href="https://zhongguose.com/" target="_blank" rel="noopener" data-i18n="中国色">中国色</a><span>·</span><a href="https://github.com/zerosoul/chinese-colors" target="_blank" rel="noopener">Chinese Colors</a><span>·</span><a href="https://www.w3.org/TR/css-color-4/#named-colors" target="_blank" rel="noopener">CSS Color 4</a></div>
</md-dialog>
<md-dialog id="export-dialog" aria-label="分享与导出" data-i18n-aria-label="分享与导出">
<div slot="headline" class="library-heading"><span data-i18n="分享与导出">分享与导出</span><md-icon-button id="close-export" aria-label="关闭" data-i18n-aria-label="关闭"><span data-icon="close"></span></md-icon-button></div>
<div slot="content" class="export-content">
<div id="export-swatches" class="export-swatches"></div>
<div class="tool-chips export-formats" role="group" aria-label="导出格式" data-i18n-aria-label="导出格式"><button data-format="link" aria-pressed="true" data-i18n="分享链接">分享链接</button><button data-format="css" aria-pressed="false">CSS</button><button data-format="hex" aria-pressed="false">HEX</button></div>
<textarea id="export-text" readonly spellcheck="false" aria-label="导出内容" data-i18n-aria-label="导出内容"></textarea>
<p class="tool-note" data-i18n="链接包含色值，打开即可还原；不会包含原始图片。">链接包含色值，打开即可还原；不会包含原始图片。</p>
</div>
<div slot="actions" class="export-actions"><md-text-button id="download-text" data-i18n="下载文本">下载文本</md-text-button><md-text-button id="download-png" data-i18n="导出图片">导出图片</md-text-button><md-filled-tonal-button id="copy-export" data-i18n="复制">复制</md-filled-tonal-button></div>
</md-dialog>
<div id="drop-overlay" class="drop-overlay" hidden><span data-icon="image"></span><strong data-i18n="松开以提取配色">松开以提取配色</strong></div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>