-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout-color.html
325 lines (321 loc) · 16.7 KB
/
about-color.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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE HTML>
<html lang="en" xmlns:dc="http://www.w3.org/1999/xhtml">
<head>
<title>Recommand Color</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="style/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<!-- 引入预定义CSS动态效果 -->
<link href="style/animate.css" rel="stylesheet"/>
<!-- 引入自定义main -->
<link href="style/main.css" rel="stylesheet" />
<!---引入自定义about -->
<link href="style/about.css" rel="stylesheet"/>
</head>
<body>
<header class="recommend about-color">
<nav id="nav">
<span>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 6C14.06 6 6 14.06 6 24s8.06 18 18 18c1.66 0 3-1.34 3-3 0-.78-.29-1.48-.78-2.01-.47-.53-.75-1.22-.75-1.99 0-1.66 1.34-3 3-3H32c5.52 0 10-4.48 10-10 0-8.84-8.06-16-18-16zM13 24c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm6-8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm10 0c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm6 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>
</span>
<ul class="row">
<li class="underline li1">
<a href="index.html">自选配色</a>
</li>
<li class="underline li2">
<a href="recommend-color.html">推荐配色</a>
</li>
<li class="underline li3">
<a href="serial.html">系列配色</a>
</li>
<li class="underline li4">
<a href="about-color.html">了解配色</a>
</li>
</ul>
<div class="header-user-entrance">
<a data-toggle="modal" data-target="#loginModal">
<span class="glyphicon glyphicon-user"></span>登陆
</a>
<span>|</span>
<a data-toggle="modal" data-target="#registerModal">
<span class="glyphicon glyphicon-log-in"></span>注册
</a>
</div>
<div class="heading user-entrance after-login" hidden>
<span class="user-profile">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path
d="M24 24c4.42 0 8-3.59 8-8 0-4.42-3.58-8-8-8s-8 3.58-8 8c0 4.41 3.58 8 8 8zm0 4c-5.33 0-16 2.67-16 8v4h32v-4c0-5.33-10.67-8-16-8z"></path></svg>
</span>
<span class="user-name">
</span>
<span class="glyphicon glyphicon-log-out log-out"></span>
</div>
</nav>
</header>
<div class="main-content">
<div class="content-tips">
<div class="color-introduction">
<div class="text-introduction">
<h3>色彩调和</h3>
<ul>
<li>互补色</li>
<li>三色系</li>
<li>四色系</li>
<li>类似色</li>
<li>中性色</li>
</ul>
<h3>色度\色彩\色调</h3>
<ul>
<li>色度</li>
<li>色彩</li>
<li>色调</li>
</ul>
</div>
<h3 class="know-rgb">认识RGB</h3>
<h3 class="know-hsv">认识HSV</h3>
</div>
</div>
<div class="introduction-zone content-zone" >
<div class="color-introduction">
<section class="header-section">
<h3>色彩调和</h3>
<p>
色彩调和是两种或两种以上颜色从其在色轮上的关系衍生而来的令人非常愉悦的组合。色彩调和，也称为色彩和弦，可以用来探究一种调色板，或可作为一种独立的色彩方案。
</p>
</section>
<section class="content">
<h4>互补色</h4>
<p>
色轮上互相正对着的颜色被称为互补色。互补色有很高的对比度，配合更为中性的调色板使用时，作为重点色的效果非常好。
<div class="images">
<img class="img-left img-responsive"
src="images/html-color-codes-color-wheel-complementary-8a2cae80.svg"/>
<img class="img-right img-responsive"
src="images/html-color-codes-color-wheels-complementary-f8379f59.svg"/>
</div>
</p>
</section>
<section class="content">
<h4>三色系</h4>
<p>
三合一色彩和谐由三种在色轮上互相之间距离相等的颜色组成。与互补色类似，三合一方案通常非常明亮，对比度较高，一种颜色作为主导时效果最佳。
<div class="images">
<img class="img-left img-responsive"
src="images/html-color-codes-color-wheel-triadic-bd73abc7.svg"/>
<img class="img-right img-responsive"
src="images/html-color-codes-color-wheels-triadic-f2238b53.svg"/>
</div>
</p>
</section>
<section class="content">
<h4>四色系</h4>
<p>
四色色彩和谐由色轮上相隔60度的两组对比色形成。四色系对创建调色板来说是非常好的起点；使用色度、色彩和色调进行微调。
<div class="images">
<img class="img-left img-responsive"
src="images/html-color-codes-color-wheel-tetradic-b1ebdc49.svg"/>
<img class="img-right img-responsive"
src="images/html-color-codes-color-wheels-tetradic-fd6bc86b.svg"/>
</div>
</p>
</section>
<section class="content">
<h4>类似色</h4>
<p>
类似色色彩和谐是通过选择与所选颜色直接相邻的颜色创建而成。类似色方案在网页设计很常见，与互补色搭配使用实现对比，非常具有通用性。
<div class="images">
<img class="img-left img-responsive"
src="images/html-color-codes-color-wheel-analogous-920e8f13.svg"/>
<img class="img-right img-responsive"
src="images/html-color-codes-color-wheels-analogous-c5bdfb35.svg"/>
</div>
</p>
</section>
<section class="content">
<h4>中性色</h4>
<p>
与类似色色彩和谐一样，中性色方案通过选择与所选颜色两侧形成，但距离只有一半。类似色方案通常使用30度间隔的颜色，但中性色系使用15度间隔的颜色。
<div class="images">
<img class="img-left img-responsive"
src="images/html-color-codes-color-wheel-neutral-920e8f13.svg"/>
<img class="img-right img-responsive"
src="images/html-color-codes-color-wheels-neutral-c5bdfb35.svg"/>
</div>
</p>
</section>
<section class="header-section">
<h3>色度\色彩\色调</h3>
<p>
色度、色彩和色调是通过分别添加黑色、白色和灰色到所选颜色中而形成。它们在背景和排版等网页设计中非常有用，通常与互补色配对使用以形成对比。
</p>
</section>
<section class="content">
<h4>色度</h4>
<p>
将不同等级的黑色加入到一种颜色中，产生该特定颜色逐渐变暗的变体，或称为“色度”。色度用于链接悬停效果或作为页脚和页眉背景效果较好。
<div class="images">
<img class="img-responsive" src="images/html-color-codes-color-shades-9d0efa0b.svg"/>
</div>
</p>
</section>
<section class="content">
<h4>色彩</h4>
<p>
色彩是将白色加入到一种颜色中，得到越来越浅的版本。色彩也可用于CSS悬停效果，作为模态背景效果也比较好。
<div class="images">
<img class="img-responsive" src="images/html-color-codes-color-tints-eb0738d4.svg"/>
</div>
</p>
</section>
<section class="content">
<h4>色调</h4>
<p>
色调是将灰色加入到一种颜色中，根据所使用的灰色等级不同几乎可以产生无穷无尽的不同色彩。色调较少见于网页设计，在评论、引言或重点突出文字等排版元素中会比较有用。
<div class="images">
<img class="img-responsive" src="images/html-color-codes-color-tones-f141a793.svg"/>
</div>
</p>
</section>
</div>
</div>
<div class="rgb game content-zone" hidden>
<div class="headingContainer">
<h1>RGB Color Game</h1>
<h1 class="colorDisplay text-center"></h1>
</div>
<div class="buttonContainer">
<button class="reset">New Colors</button>
<span class="color-message"></span>
<button class="easyBtn">Easy</button>
<button class="hardBtn selected">Hard</button>
</div>
<div class="square-container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
<div class="hsv game content-zone" hidden>
<div class="headingContainer">
<h1>HSV Color Game</h1>
<h1 class="colorDisplay text-center"></h1>
</div>
<div class="buttonContainer">
<button class="reset">New Colors</button>
<span class="color-message"></span>
<button class="easyBtn">Easy</button>
<button class="hardBtn selected">Hard</button>
</div>
<div class="square-container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</div>
<!-- BEGIN: modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-logo">
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 6C14.06 6 6 14.06 6 24s8.06 18 18 18c1.66 0 3-1.34 3-3 0-.78-.29-1.48-.78-2.01-.47-.53-.75-1.22-.75-1.99 0-1.66 1.34-3 3-3H32c5.52 0 10-4.48 10-10 0-8.84-8.06-16-18-16zM13 24c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm6-8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm10 0c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm6 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>
<span>C-color</span>
</div>
</div>
<div class="modal-body">
<div class="input-group">
<span class="glyphicon glyphicon-user input-group-addon"></span>
<input type="text" class="form-control" name="login-name" id="login-name" placeholder="用户名"/>
</div>
<div class="input-group">
<span class="glyphicon glyphicon-pencil input-group-addon"></span>
<input type="password" class="form-control" name="login-pwd" id="login-pwd" placeholder="您的密码" />
</div>
<div class="error-message login" hidden></div>
</div>
<div class="modal-footer">
<div class="modal-btn-footer" id="login_btn">登陆</div>
</div>
</div><!-- END: /.modal-content -->
</div><!-- END: login-modal -->
</div>
<div class="modal fade" id="registerModal" tabindex="-2" role="dialog" aria-labelledby="registerLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-logo">
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 6C14.06 6 6 14.06 6 24s8.06 18 18 18c1.66 0 3-1.34 3-3 0-.78-.29-1.48-.78-2.01-.47-.53-.75-1.22-.75-1.99 0-1.66 1.34-3 3-3H32c5.52 0 10-4.48 10-10 0-8.84-8.06-16-18-16zM13 24c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm6-8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm10 0c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm6 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>
<span>C-color</span>
</div>
</div>
<div class="modal-body">
<div class="input-group">
<span class="glyphicon glyphicon-user input-group-addon"></span>
<input type="text" class="form-control" name="register-name" id="register-name" placeholder="用户名"/>
</div>
<div class="input-group">
<span class="glyphicon glyphicon-pencil input-group-addon"></span>
<input type="password" class="form-control" name="register-pwd" id="register-pwd" placeholder="您的密码"/>
</div>
<div class="input-group">
<span class="glyphicon glyphicon-ok input-group-addon"></span>
<input type="password" class="form-control" name="registser-re-pwd" id="register-re-pwd" placeholder="请确认您的密码" />
</div>
<div class="error-message register" hidden></div>
</div>
<div class="modal-footer">
<div class="modal-btn-footer" id="register_btn">注册</div>
</div>
</div><!-- END: modal-content -->
</div>
</div><!-- END: register modal -->
<!-- END: modal -->
<!-- 引入jQuery -->
<script src="script/jquery-3.2.1.min.js"></script>
<!-- 引入bootstrap插件 -->
<script src="style/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!-- 引入color.js -->
<script src="script/color.js"></script>
<!-- color-game.js -->
<script src="script/color-game.js"></script>
<!-- 引入main.js -->
<script src="script/main.js"></script>
<script>
$("#login_btn").click(function () {
var name = $("input#login-name").val();
var pass = $("input#login-pwd").val();
login(name, pass);
});
$("#register_btn").click(function () {
var name = $("#register-name").val();
var password = $("#register-pwd").val();
var repass = $("#register-re-pwd").val();
if (name && password && password === repass) {
$.ajax({
'url': 'http://localhost:3000/register',
'method': 'POST',
'data': {
username: name,
password: password,
repassword: repass
},
'success': function (data) {
login(name, password);
$("#registerModal").modal('hide');
}
})
}
});
</script>
</body>
</html>