guge123 commited on
Commit
1ee9bc8
1 Parent(s): ef4f19d

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +252 -78
public/index.html CHANGED
@@ -1,89 +1,263 @@
1
- <!doctype html>
2
- <html lang="zh" class="no-js">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <title>GT-Manual</title>
8
- <link rel="icon" href="./favicon.ico" sizes="16x16">
9
- <meta name="Description" content="Home Page of iissnan">
10
- <meta name="color-scheme" content="dark light">
11
- <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
12
- <link rel="stylesheet" type="text/css" href="assets/css/main.css"/>
13
- </head>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
- <body>
16
- <div class="vi">
17
- <h1 class="animate-slide-in-down">GT-Manual</h1>
18
- <P>恭喜你,你成功部署了GT-Manual在Huggingface上</P>
19
- <div class="quote">
20
- <span class="quote-line quote-line-start animate-slide-in-left"></span>
21
- <span class="quote-icon quote-icon-start animate-slide-in-down">
22
- <i class="icon icon-quotes-left"></i>
23
- </span>
24
- <p class="quote-content animate-slide-in-down">不积跬步,无以至千里。不积小流,无以成江海。</p>
25
- <p class="quote-author animate-slide-in-down">《劝学篇》—— <em>荀子</em></p>
26
- <span class="quote-icon quote-icon-end animate-slide-in-up">
27
- <i class="icon icon-quotes-right"></i>
28
- </span>
29
- <span class="quote-line quote-line-end animate-slide-in-right"></span>
30
- </div>
31
- </div>
 
 
 
 
 
 
32
 
33
- <script src="assets/vendors/jquery-3.3.1.min.js"></script>
34
- <script>
35
- $(function () {
36
- var SLIDE_IN_DOWN = { opacity: 1, top: 0 };
37
- var SLIDE_IN_UP = { opacity: 1, bottom: 0 };
38
- var SLIDE_IN_LEFT = { left: 0 };
39
- var SLIDE_IN_RIGHT = { right: 0 };
40
 
41
- registerCheatCode();
42
- executeAnimations();
 
43
 
44
- function executeAnimations() {
45
- $.when()
46
- .then(animateTitle)
47
- .then(animateQuote)
48
- .then(animateLinks)
49
- .then(animateLocation);
50
- }
 
 
 
 
 
51
 
52
- function animateTitle() {
53
- return animate('h1', SLIDE_IN_DOWN);
54
  }
55
 
56
- function animateQuote() {
57
- return $.when(
58
- animate('.quote-line-start', SLIDE_IN_LEFT),
59
- animate('.quote-line-end',SLIDE_IN_RIGHT),
60
- animate('.quote-icon-start', SLIDE_IN_DOWN),
61
- animate('.quote-icon-end', SLIDE_IN_UP)
62
- )
63
- .then(function () {
64
- return animate('.quote-content', SLIDE_IN_DOWN);
65
- })
66
- .then(function () {
67
- return animate('.quote-author', SLIDE_IN_DOWN);
68
- });
69
- }
70
- function animate(selector, properties, delay, options) {
71
- delay = delay || 0;
72
- return $(selector).delay(delay)
73
- .animate(properties, options)
74
- .promise();
75
- }
76
- function registerCheatCode() {
77
- $(document.body).on('keydown', function (event) {
78
- var KEY_B = 66;
 
 
 
 
 
 
 
 
79
 
80
- if (event.which === KEY_B) {
81
- $('.relocate-location').text('Bookmark Page');
82
- $('.relocating').css('opacity', 1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
- });
85
  }
86
- });
87
- </script>
88
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  </html>
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title></title>
5
+ <style>
6
+ * {
7
+ margin: 0;
8
+ padding: 0;
9
+ font-family: '微软雅黑';
10
+ }
11
+ body {
12
+ background-color: #000;
13
+ }
14
+ ul,
15
+ li {
16
+ list-style: none;
17
+ }
18
+ ul {
19
+ position: fixed;
20
+ left: 0;
21
+ right: 0;
22
+ top: 0;
23
+ bottom: 0;
24
+ margin: auto;
25
+ background-color: #f40;
26
+ width: 0px;
27
+ height: 0px;
28
+ }
29
+ li {
30
+ text-align: right; /*background-color: #f30;*/
31
+ transform-origin: left 50%;
32
+ position: absolute;
33
+ left: 0;
34
+ top: 50%;
35
+ margin-top: -50%;
36
+ transition: all ease 0.5s;
37
+ color: #666;
38
+ user-select: none;
39
+ }
40
+ .s li {
41
+ width: 420px;
42
+ }
43
+ .m li {
44
+ width: 350px;
45
+ }
46
+ .h li {
47
+ width: 280px;
48
+ }
49
+ .sx li {
50
+ width: 210px;
51
+ }
52
+ .d li {
53
+ width: 170px;
54
+ }
55
+ .M li {
56
+ width: 100px;
57
+ }
58
+ .Y li {
59
+ left: 0%;
60
+ transform: translate(-50%);
61
+ word-break: keep-all;
62
+ color: #fff;
63
+ }
64
+ </style>
65
+ <script
66
+ type="text/javascript"
67
+ src="https://unpkg.com/jquery.min.js"
68
+ ></script>
69
+ </head>
70
+ <body>
71
+ <ul class="Y">
72
+ <li>2019年</li>
73
+ </ul>
74
+ <ul class="s"></ul>
75
+ <ul class="m"></ul>
76
+ <ul class="h"></ul>
77
+ <ul class="sx"></ul>
78
+ <ul class="d"></ul>
79
+ <ul class="M"></ul>
80
+ <script type="text/javascript">
81
+ var chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
82
+ var chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
83
+ var chnUnitChar = ['', '十', '百', '千'];
84
 
85
+ function SectionToChinese(section) {
86
+ var strIns = '',
87
+ chnStr = '';
88
+ var unitPos = 0;
89
+ var zero = true;
90
+ while (section > 0) {
91
+ var v = section % 10;
92
+ if (v === 0) {
93
+ if (!zero) {
94
+ zero = true;
95
+ chnStr = chnNumChar[v] + chnStr;
96
+ }
97
+ } else {
98
+ zero = false;
99
+ strIns = chnNumChar[v];
100
+ strIns += chnUnitChar[unitPos];
101
+ chnStr = strIns + chnStr;
102
+ }
103
+ unitPos++;
104
+ section = Math.floor(section / 10);
105
+ }
106
+ return chnStr;
107
+ }
108
 
109
+ function NumberToChinese(num) {
110
+ var unitPos = 0;
111
+ var strIns = '',
112
+ chnStr = '';
113
+ var needZero = false;
 
 
114
 
115
+ if (num === 0) {
116
+ return chnNumChar[0];
117
+ }
118
 
119
+ while (num > 0) {
120
+ var section = num % 10000;
121
+ if (needZero) {
122
+ chnStr = chnNumChar[0] + chnStr;
123
+ }
124
+ strIns = SectionToChinese(section);
125
+ strIns += section !== 0 ? chnUnitSection[unitPos] : chnUnitSection[0];
126
+ chnStr = strIns + chnStr;
127
+ needZero = section < 1000 && section > 0;
128
+ num = Math.floor(num / 10000);
129
+ unitPos++;
130
+ }
131
 
132
+ return chnStr;
 
133
  }
134
 
135
+ function mGetDate(year, month) {
136
+ var d = new Date(year, month, 0);
137
+ return d.getDate();
138
+ }
139
+ </script>
140
+ <script type="text/javascript">
141
+ function rotate(selector, t) {
142
+ t = +t;
143
+ var lis = $(selector);
144
+ for (var i = 0; i < lis.length; i++) {
145
+ var rotate = lis.length - i + t;
146
+ lis.eq(i).css('transform', 'rotate(' + (rotate * 360) / lis.length + 'deg)');
147
+ rotate % lis.length == 0 &&
148
+ lis.eq(i).css('color', '#fff').siblings().css('color', '#666');
149
+ }
150
+ // 归零
151
+ if (t == lis.length - 1) {
152
+ setTimeout(function () {
153
+ lis.css('transition', 'unset');
154
+ for (var i = 0; i < lis.length; i++) {
155
+ var rotate = lis.length - i - 1;
156
+ lis.eq(i).css('transform', 'rotate(' + (rotate * 360) / lis.length + 'deg)');
157
+ rotate % lis.length == 0 &&
158
+ lis.eq(i).css('color', '#fff').siblings().css('color', '#666');
159
+ }
160
+ setTimeout(function () {
161
+ lis.css('transition', 'all ease .5s');
162
+ }, 200);
163
+ }, 500);
164
+ }
165
+ }
166
 
167
+ function init(selector, num, label, len) {
168
+ num = +num;
169
+ for (var i = 0; i < len; i++) {
170
+ showNum = label === '午' ? (i == 1 ? '上' : '下') : NumberToChinese(i);
171
+ showNum = label == '月' && i == 0 ? NumberToChinese(len) : showNum;
172
+ showNum = label == '号' && i == 0 ? NumberToChinese(len) : showNum;
173
+ showNum = label == '点' && i == 0 ? NumberToChinese(len) : showNum;
174
+ var rotate = num == len - 1 ? len - i - 1 : len - i + num;
175
+ if (rotate % len == 0) {
176
+ $(selector).append(
177
+ '<li style="color:#fff;transform: rotate(' +
178
+ (rotate * 360) / len +
179
+ 'deg);">' +
180
+ showNum +
181
+ label +
182
+ '</li>'
183
+ );
184
+ } else {
185
+ $(selector).append(
186
+ '<li style="transform: rotate(' +
187
+ (rotate * 360) / len +
188
+ 'deg);">' +
189
+ showNum +
190
+ label +
191
+ '</li>'
192
+ );
193
  }
194
+ }
195
  }
196
+
197
+ function getNow() {
198
+ var date = new Date();
199
+ var str = date.toLocaleString();
200
+ var s = date.getSeconds();
201
+ var m = date.getMinutes();
202
+ var h = date.getHours();
203
+ var sx = h < 12 ? 1 : 0;
204
+ h = h > 12 ? h - 12 : h;
205
+ var d = date.getDate();
206
+ var M = date.getMonth() + 1;
207
+ var y = date.getFullYear();
208
+ // 归零
209
+ d = d == mGetDate(y, M) ? 0 : d;
210
+ M = M == '12' ? 0 : M;
211
+ h = h == '12' ? 0 : h;
212
+ return { s: s, m: m, h: h, d: d, M: M, sx: sx, y: y };
213
+ }
214
+
215
+ var start = getNow();
216
+ $('.Y li').text(start.y + '年');
217
+ init('.s', start.s, '秒', 60);
218
+ init('.m', start.m, '分', 60);
219
+ init('.h', start.h, '点', 12);
220
+ init('.sx', start.sx, '午', 2);
221
+ init('.d', start.d, '号', mGetDate(start.y, start.M));
222
+ init('.M', start.M, '月', 12);
223
+
224
+ setInterval(function () {
225
+ var now = getNow();
226
+ if (start.s != now.s) {
227
+ rotate('.s li', now.s);
228
+ start.s = now.s;
229
+ }
230
+ if (start.m != now.m) {
231
+ rotate('.m li', now.m);
232
+ start.m = now.m;
233
+ }
234
+ if (start.h != now.h) {
235
+ rotate('.h li', now.h);
236
+ start.h = now.h;
237
+ }
238
+ if (start.sx != now.sx) {
239
+ rotate('.sx li', now.sx);
240
+ start.sx = now.sx;
241
+ }
242
+ if (start.d != now.d) {
243
+ rotate('.d li', now.d);
244
+ start.d = now.d;
245
+ }
246
+ if (start.M != now.M) {
247
+ // 月份变更时更新日期
248
+ setTimeout(function () {
249
+ $('.d li').remove();
250
+ init('.d', now.d, '号', mGetDate(now.y, now.M));
251
+ }, 500);
252
+ rotate('.M li', now.M);
253
+ start.M = now.M;
254
+ }
255
+ if (start.y != now.y) {
256
+ $('.Y li').text(now.y + '年');
257
+ start.y = now.y;
258
+ }
259
+ }, 1000);
260
+ </script>
261
+ </body>
262
  </html>
263
+