-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (87 loc) · 5.06 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GHS Color</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<canvas id="background-canvas"></canvas>
<div class="container">
<div class="top-bar">
<h1 data-en="GHS Color" data-zh="GHS Color">GHS Color</h1>
<button id="settingsBtn" class="settings-btn" data-en="Settings" data-zh="设置">Settings</button>
</div>
<div class="filter-options">
<button class="filter-btn active" data-filter="all" data-en="All Colors" data-zh="所有颜色">All Colors</button>
<button class="filter-btn" data-filter="favorites" data-en="My Favorites" data-zh="我的收藏">My
Favorites</button>
<button class="filter-btn" data-filter="warm" data-en="Warm Colors" data-zh="暖色">Warm Colors</button>
<button class="filter-btn" data-filter="cool" data-en="Cool Colors" data-zh="冷色">Cool Colors</button>
<button class="filter-btn" data-filter="neutral" data-en="Neutral Colors" data-zh="中性色">Neutral
Colors</button>
</div>
<div class="color-grid" id="colorGrid"></div>
</div>
<div id="colorModal" class="modal">
<div class="modal-content">
<span class="close"><svg t="1720690285720" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4582" width="256" height="256">
<path
d="M391.68 667.306667a34.133333 34.133333 0 0 1-24.132267-58.2656L464.571733 512l-97.024-97.041067a34.133333 34.133333 0 1 1 48.264534-48.264533l97.041066 97.041067 96.187734-96.170667a34.133333 34.133333 0 1 1 48.264533 48.264533l-96.1024 96.1024 96.017067 95.3344a34.133333 34.133333 0 1 1-48.093867 48.4352l-96.187733-95.505066-97.109334 97.109333c-6.673067 6.656-15.4112 10.001067-24.149333 10.001067z"
p-id="4583"></path>
</svg></span>
<div class="color-preview" id="modalColorPreview"></div>
<div class="color-info" id="modalColorInfo"></div>
</div>
</div>
<div id="contextMenu" class="context-menu">
<div class="context-menu-item" id="copyHex" data-en="Copy HEX" data-zh="复制 HEX">
<i class="fas fa-hashtag"></i><span>Copy HEX</span>
</div>
<div class="context-menu-item" id="copyRGB" data-en="Copy RGB" data-zh="复制 RGB">
<i class="fas fa-palette"></i><span>Copy RGB</span>
</div>
<div class="context-menu-item" id="copyHSL" data-en="Copy HSL" data-zh="复制 HSL">
<i class="fas fa-tint"></i><span>Copy HSL</span>
</div>
</div>
<div id="settingsModal" class="settings-modal">
<div class="settings-content">
<span class="close-settings"><svg t="1720690285720" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4582" width="256" height="256">
<path
d="M391.68 667.306667a34.133333 34.133333 0 0 1-24.132267-58.2656L464.571733 512l-97.024-97.041067a34.133333 34.133333 0 1 1 48.264534-48.264533l97.041066 97.041067 96.187734-96.170667a34.133333 34.133333 0 1 1 48.264533 48.264533l-96.1024 96.1024 96.017067 95.3344a34.133333 34.133333 0 1 1-48.093867 48.4352l-96.187733-95.505066-97.109334 97.109333c-6.673067 6.656-15.4112 10.001067-24.149333 10.001067z"
p-id="4583"></path>
</svg></span>
<h2 data-en="Settings" data-zh="设置">Settings</h2>
<div class="settings-group">
<label for="languageSelect" data-en="Language" data-zh="语言">Language</label>
<div class="custom-select">
<select id="languageSelect">
<option value="en" data-en="English" data-zh="英语">English</option>
<option value="zh" data-en="Chinese" data-zh="中文">中文</option>
</select>
</div>
</div>
<div class="settings-group">
<label for="themeSelect" data-en="Theme" data-zh="主题">主题</label>
<div class="custom-select">
<select id="themeSelect">
<option value="auto" data-en="Auto" data-zh="自动">自动</option>
<option value="light" data-en="Light" data-zh="亮色">亮色</option>
<option value="dark" data-en="Dark" data-zh="深色">暗色</option>
</select>
</div>
</div>
</div>
</div>
<footer>
<p id="footerText">© 2024 GHS Color. All rights reserved. Powered by <a href="https://www.ghs.red"
style="color: blue; text-decoration: none;">Garbage Human Studio</a>.</p>
</footer>
<script src="script.js"></script>
</body>
</html>