Hugging Face's logo

Spaces:
ColamanAI
/
hark1
Running

App Files Community
ColamanAI commited on
Commit
6a48d7f
·
verified ·
1 Parent(s): 76b86c0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +776 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hark1
3
- emoji: 🌍
4
- colorFrom: pink
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hark1
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,776 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>数字黑客 - 个人主页</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
11
+
12
+ :root {
13
+ --primary-color: #00ff00;
14
+ --secondary-color: #00aaff;
15
+ --bg-color: #0a0a0a;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Share Tech Mono', monospace;
20
+ background-color: var(--bg-color);
21
+ color: var(--primary-color);
22
+ overflow-x: hidden;
23
+ min-height: 100vh;
24
+ }
25
+
26
+ .hacker-text {
27
+ text-shadow: 0 0 5px var(--primary-color);
28
+ }
29
+
30
+ .glitch {
31
+ position: relative;
32
+ }
33
+
34
+ .glitch::before, .glitch::after {
35
+ content: attr(data-text);
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ width: 100%;
40
+ height: 100%;
41
+ opacity: 0.8;
42
+ }
43
+
44
+ .glitch::before {
45
+ color: var(--secondary-color);
46
+ animation: glitch-effect 3s infinite;
47
+ }
48
+
49
+ .glitch::after {
50
+ color: #ff00ff;
51
+ animation: glitch-effect 2s infinite reverse;
52
+ }
53
+
54
+ @keyframes glitch-effect {
55
+ 0% { transform: translate(0); }
56
+ 20% { transform: translate(-3px, 3px); }
57
+ 40% { transform: translate(-3px, -3px); }
58
+ 60% { transform: translate(3px, 3px); }
59
+ 80% { transform: translate(3px, -3px); }
60
+ 100% { transform: translate(0); }
61
+ }
62
+
63
+ .matrix-rain {
64
+ position: fixed;
65
+ top: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 100%;
69
+ z-index: -1;
70
+ opacity: 0.1;
71
+ }
72
+
73
+ .hexagon {
74
+ position: relative;
75
+ width: 60px;
76
+ height: 34.64px;
77
+ background-color: var(--primary-color);
78
+ margin: 17.32px 0;
79
+ box-shadow: 0 0 10px var(--primary-color);
80
+ }
81
+
82
+ .hexagon:before,
83
+ .hexagon:after {
84
+ content: "";
85
+ position: absolute;
86
+ width: 0;
87
+ border-left: 30px solid transparent;
88
+ border-right: 30px solid transparent;
89
+ }
90
+
91
+ .hexagon:before {
92
+ bottom: 100%;
93
+ border-bottom: 17.32px solid var(--primary-color);
94
+ }
95
+
96
+ .hexagon:after {
97
+ top: 100%;
98
+ border-top: 17.32px solid var(--primary-color);
99
+ }
100
+
101
+ .hexagon-container {
102
+ display: flex;
103
+ justify-content: center;
104
+ align-items: center;
105
+ animation: float 6s ease-in-out infinite;
106
+ }
107
+
108
+ @keyframes float {
109
+ 0% { transform: translateY(0px); }
110
+ 50% { transform: translateY(-20px); }
111
+ 100% { transform: translateY(0px); }
112
+ }
113
+
114
+ .skill-bar {
115
+ height: 20px;
116
+ background-color: #111;
117
+ border-radius: 10px;
118
+ overflow: hidden;
119
+ position: relative;
120
+ }
121
+
122
+ .skill-progress {
123
+ height: 100%;
124
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
125
+ border-radius: 10px;
126
+ position: relative;
127
+ overflow: hidden;
128
+ }
129
+
130
+ .skill-progress::after {
131
+ content: '';
132
+ position: absolute;
133
+ top: 0;
134
+ left: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ background: linear-gradient(90deg,
138
+ rgba(255,255,255,0.1) 0%,
139
+ rgba(255,255,255,0.3) 50%,
140
+ rgba(255,255,255,0.1) 100%);
141
+ background-size: 200% 100%;
142
+ animation: shine 2s infinite;
143
+ }
144
+
145
+ @keyframes shine {
146
+ 0% { background-position: 200% 0; }
147
+ 100% { background-position: -200% 0; }
148
+ }
149
+
150
+ .project-card {
151
+ background: rgba(10, 10, 10, 0.7);
152
+ border: 1px solid var(--primary-color);
153
+ border-radius: 8px;
154
+ transition: all 0.3s ease;
155
+ position: relative;
156
+ overflow: hidden;
157
+ }
158
+
159
+ .project-card:hover {
160
+ transform: translateY(-10px);
161
+ box-shadow: 0 10px 20px rgba(0, 255, 0, 0.3);
162
+ }
163
+
164
+ .project-card::before {
165
+ content: '';
166
+ position: absolute;
167
+ top: 0;
168
+ left: -100%;
169
+ width: 100%;
170
+ height: 100%;
171
+ background: linear-gradient(
172
+ 90deg,
173
+ transparent,
174
+ rgba(0, 255, 0, 0.2),
175
+ transparent
176
+ );
177
+ transition: 0.5s;
178
+ }
179
+
180
+ .project-card:hover::before {
181
+ left: 100%;
182
+ }
183
+
184
+ .contact-input {
185
+ background: transparent;
186
+ border: 1px solid var(--primary-color);
187
+ color: var(--primary-color);
188
+ padding: 10px;
189
+ width: 100%;
190
+ margin-bottom: 15px;
191
+ transition: all 0.3s;
192
+ }
193
+
194
+ .contact-input:focus {
195
+ outline: none;
196
+ box-shadow: 0 0 10px var(--primary-color);
197
+ }
198
+
199
+ .submit-btn {
200
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
201
+ color: black;
202
+ border: none;
203
+ padding: 10px 20px;
204
+ cursor: pointer;
205
+ font-weight: bold;
206
+ transition: all 0.3s;
207
+ }
208
+
209
+ .submit-btn:hover {
210
+ transform: scale(1.05);
211
+ box-shadow: 0 0 15px var(--primary-color);
212
+ }
213
+
214
+ .nav-link {
215
+ position: relative;
216
+ padding: 5px 0;
217
+ }
218
+
219
+ .nav-link::after {
220
+ content: '';
221
+ position: absolute;
222
+ bottom: 0;
223
+ left: 0;
224
+ width: 0;
225
+ height: 2px;
226
+ background-color: var(--primary-color);
227
+ transition: width 0.3s ease;
228
+ }
229
+
230
+ .nav-link:hover::after {
231
+ width: 100%;
232
+ }
233
+
234
+ .active-nav::after {
235
+ width: 100%;
236
+ }
237
+
238
+ .hacker-cursor {
239
+ animation: blink 1s step-end infinite;
240
+ }
241
+
242
+ @keyframes blink {
243
+ from, to { opacity: 1; }
244
+ 50% { opacity: 0; }
245
+ }
246
+
247
+ .binary-clock {
248
+ font-size: 0.8rem;
249
+ letter-spacing: 2px;
250
+ }
251
+
252
+ .binary-digit {
253
+ display: inline-block;
254
+ width: 10px;
255
+ height: 10px;
256
+ margin: 0 2px;
257
+ border-radius: 50%;
258
+ background-color: #333;
259
+ transition: all 0.3s;
260
+ }
261
+
262
+ .binary-digit.active {
263
+ background-color: var(--primary-color);
264
+ box-shadow: 0 0 5px var(--primary-color);
265
+ }
266
+
267
+ /* 响应式调整 */
268
+ @media (max-width: 768px) {
269
+ .hexagon-container {
270
+ margin-bottom: 2rem;
271
+ }
272
+
273
+ .binary-clock {
274
+ font-size: 0.6rem;
275
+ }
276
+
277
+ .project-card {
278
+ margin-bottom: 1.5rem;
279
+ }
280
+ }
281
+ </style>
282
+ </head>
283
+ <body>
284
+ <!-- Matrix Rain 背景 -->
285
+ <canvas id="matrix" class="matrix-rain"></canvas>
286
+
287
+ <!-- 主容器 -->
288
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
289
+ <!-- 导航栏 -->
290
+ <nav class="flex flex-wrap items-center justify-between mb-12">
291
+ <div class="text-2xl hacker-text glitch" data-text="0xDEADBEEF">0xDEADBEEF</div>
292
+ <div class="flex space-x-1 md:space-x-6">
293
+ <a href="#about" class="nav-link text-sm md:text-base">关于我</a>
294
+ <a href="#skills" class="nav-link text-sm md:text-base">技能</a>
295
+ <a href="#projects" class="nav-link text-sm md:text-base">项目</a>
296
+ <a href="#contact" class="nav-link text-sm md:text-base">联系</a>
297
+ </div>
298
+ </nav>
299
+
300
+ <!-- 头部区域 -->
301
+ <header class="flex flex-col md:flex-row items-center justify-between mb-20">
302
+ <div class="md:w-1/2 mb-10 md:mb-0">
303
+ <h1 class="text-4xl md:text-6xl font-bold mb-4 hacker-text glitch" data-text="数字黑客">
304
+ 数字黑客<span class="hacker-cursor">_</span>
305
+ </h1>
306
+ <p class="text-lg mb-6 opacity-80">
307
+ 网络安全专家 | 全栈开发者 | 数字世界探索者
308
+ </p>
309
+ <div class="flex space-x-4">
310
+ <a href="#contact" class="px-6 py-2 border border-green-500 text-green-500 hover:bg-green-500 hover:text-black transition duration-300">
311
+ 联系我
312
+ </a>
313
+ <a href="#projects" class="px-6 py-2 bg-green-500 text-black hover:bg-green-400 transition duration-300">
314
+ 查看项目
315
+ </a>
316
+ </div>
317
+ <div class="mt-8 binary-clock">
318
+ <div class="flex justify-between mb-2">
319
+ <span>当前时间:</span>
320
+ <span id="normal-time"></span>
321
+ </div>
322
+ <div class="flex justify-between">
323
+ <span>二进制时间:</span>
324
+ <span id="binary-time"></span>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ <div class="hexagon-container md:w-1/2">
329
+ <div class="hexagon"></div>
330
+ </div>
331
+ </header>
332
+
333
+ <!-- 关于我部分 -->
334
+ <section id="about" class="mb-20">
335
+ <h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="关于我">关于我</h2>
336
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
337
+ <div>
338
+ <p class="mb-4 opacity-80 leading-relaxed">
339
+ 我是数字黑客，一名专注于网络安全和前沿技术的开发者。拥有10年以上的行业经验，致力于构建安全、高效的数字解决方案。
340
+ </p>
341
+ <p class="mb-4 opacity-80 leading-relaxed">
342
+ 我的工作涵盖从渗透测试到区块链开发，从机器学习到物联网安全。我相信技术应该用于创造价值，同时保护用户的隐私和安全。
343
+ </p>
344
+ <p class="opacity-80 leading-relaxed">
345
+ 当我不在代码世界中遨游时，我喜欢研究密码学、参加CTF比赛，以及探索数字艺术的可能性。
346
+ </p>
347
+ </div>
348
+ <div class="flex flex-col space-y-4">
349
+ <div class="flex items-center">
350
+ <i class="fas fa-map-marker-alt mr-3 text-green-500"></i>
351
+ <span>位置: 数字空间</span>
352
+ </div>
353
+ <div class="flex items-center">
354
+ <i class="fas fa-envelope mr-3 text-green-500"></i>
355
+ <span>邮箱: [email protected]</span>
356
+ </div>
357
+ <div class="flex items-center">
358
+ <i class="fas fa-shield-alt mr-3 text-green-500"></i>
359
+ <span>专长: 网络安全、加密技术</span>
360
+ </div>
361
+ <div class="flex items-center">
362
+ <i class="fas fa-code mr-3 text-green-500"></i>
363
+ <span>编程语言: Python, JavaScript, Rust</span>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- 技能部分 -->
370
+ <section id="skills" class="mb-20">
371
+ <h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="我的技能">我的技能</h2>
372
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
373
+ <div>
374
+ <h3 class="text-xl mb-4">技术技能</h3>
375
+ <div class="mb-6">
376
+ <div class="flex justify-between mb-2">
377
+ <span>网络安全</span>
378
+ <span>95%</span>
379
+ </div>
380
+ <div class="skill-bar">
381
+ <div class="skill-progress" style="width: 95%"></div>
382
+ </div>
383
+ </div>
384
+ <div class="mb-6">
385
+ <div class="flex justify-between mb-2">
386
+ <span>Python 开发</span>
387
+ <span>90%</span>
388
+ </div>
389
+ <div class="skill-bar">
390
+ <div class="skill-progress" style="width: 90%"></div>
391
+ </div>
392
+ </div>
393
+ <div class="mb-6">
394
+ <div class="flex justify-between mb-2">
395
+ <span>JavaScript/Node.js</span>
396
+ <span>85%</span>
397
+ </div>
398
+ <div class="skill-bar">
399
+ <div class="skill-progress" style="width: 85%"></div>
400
+ </div>
401
+ </div>
402
+ <div class="mb-6">
403
+ <div class="flex justify-between mb-2">
404
+ <span>区块链技术</span>
405
+ <span>80%</span>
406
+ </div>
407
+ <div class="skill-bar">
408
+ <div class="skill-progress" style="width: 80%"></div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ <div>
413
+ <h3 class="text-xl mb-4">其他技能</h3>
414
+ <div class="mb-6">
415
+ <div class="flex justify-between mb-2">
416
+ <span>渗透测试</span>
417
+ <span>90%</span>
418
+ </div>
419
+ <div class="skill-bar">
420
+ <div class="skill-progress" style="width: 90%"></div>
421
+ </div>
422
+ </div>
423
+ <div class="mb-6">
424
+ <div class="flex justify-between mb-2">
425
+ <span>密码学</span>
426
+ <span>88%</span>
427
+ </div>
428
+ <div class="skill-bar">
429
+ <div class="skill-progress" style="width: 88%"></div>
430
+ </div>
431
+ </div>
432
+ <div class="mb-6">
433
+ <div class="flex justify-between mb-2">
434
+ <span>机器学习</span>
435
+ <span>75%</span>
436
+ </div>
437
+ <div class="skill-bar">
438
+ <div class="skill-progress" style="width: 75%"></div>
439
+ </div>
440
+ </div>
441
+ <div class="mb-6">
442
+ <div class="flex justify-between mb-2">
443
+ <span>物联网安全</span>
444
+ <span>82%</span>
445
+ </div>
446
+ <div class="skill-bar">
447
+ <div class="skill-progress" style="width: 82%"></div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </section>
453
+
454
+ <!-- 项目部分 -->
455
+ <section id="projects" class="mb-20">
456
+ <h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="精选项目">精选项目</h2>
457
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
458
+ <!-- 项目1 -->
459
+ <div class="project-card p-6">
460
+ <div class="flex items-center mb-4">
461
+ <i class="fas fa-lock text-green-500 mr-3 text-xl"></i>
462
+ <h3 class="text-xl font-bold">安全通信协议</h3>
463
+ </div>
464
+ <p class="text-sm opacity-80 mb-4">一个基于量子加密原理的安全通信协议，提供端到端加密，防止中间人攻击。</p>
465
+ <div class="flex flex-wrap gap-2 mb-4">
466
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">Python</span>
467
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">加密</span>
468
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">网络安全</span>
469
+ </div>
470
+ <a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a>
471
+ </div>
472
+
473
+ <!-- 项目2 -->
474
+ <div class="project-card p-6">
475
+ <div class="flex items-center mb-4">
476
+ <i class="fas fa-network-wired text-green-500 mr-3 text-xl"></i>
477
+ <h3 class="text-xl font-bold">智能合约审计工具</h3>
478
+ </div>
479
+ <p class="text-sm opacity-80 mb-4">自动化智能合约安全审计工具，可检测常见漏洞和潜在攻击向量。</p>
480
+ <div class="flex flex-wrap gap-2 mb-4">
481
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">Solidity</span>
482
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">区块链</span>
483
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">安全审计</span>
484
+ </div>
485
+ <a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a>
486
+ </div>
487
+
488
+ <!-- 项目3 -->
489
+ <div class="project-card p-6">
490
+ <div class="flex items-center mb-4">
491
+ <i class="fas fa-bug text-green-500 mr-3 text-xl"></i>
492
+ <h3 class="text-xl font-bold">渗透测试框架</h3>
493
+ </div>
494
+ <p class="text-sm opacity-80 mb-4">模块化渗透测试框架，集成了多种漏洞扫描和利用工具。</p>
495
+ <div class="flex flex-wrap gap-2 mb-4">
496
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">Python</span>
497
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">安全测试</span>
498
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">自动化</span>
499
+ </div>
500
+ <a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a>
501
+ </div>
502
+
503
+ <!-- 项目4 -->
504
+ <div class="project-card p-6">
505
+ <div class="flex items-center mb-4">
506
+ <i class="fas fa-eye text-green-500 mr-3 text-xl"></i>
507
+ <h3 class="text-xl font-bold">AI 安全监控</h3>
508
+ </div>
509
+ <p class="text-sm opacity-80 mb-4">基于机器学习的网络异常检测系统，实时监控和预警潜在威胁。</p>
510
+ <div class="flex flex-wrap gap-2 mb-4">
511
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">TensorFlow</span>
512
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">AI</span>
513
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">网络安全</span>
514
+ </div>
515
+ <a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a>
516
+ </div>
517
+
518
+ <!-- 项目5 -->
519
+ <div class="project-card p-6">
520
+ <div class="flex items-center mb-4">
521
+ <i class="fas fa-key text-green-500 mr-3 text-xl"></i>
522
+ <h3 class="text-xl font-bold">密码管理器</h3>
523
+ </div>
524
+ <p class="text-sm opacity-80 mb-4">零知识证明密码管理器，本地加密存储，支持多设备同步。</p>
525
+ <div class="flex flex-wrap gap-2 mb-4">
526
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">Rust</span>
527
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">加密</span>
528
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">隐私</span>
529
+ </div>
530
+ <a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a>
531
+ </div>
532
+
533
+ <!-- 项目6 -->
534
+ <div class="project-card p-6">
535
+ <div class="flex items-center mb-4">
536
+ <i class="fas fa-robot text-green-500 mr-3 text-xl"></i>
537
+ <h3 class="text-xl font-bold">自动化安全机器人</h3>
538
+ </div>
539
+ <p class="text-sm opacity-80 mb-4">自动化安全响应系统，可自主分析并应对网络攻击。</p>
540
+ <div class="flex flex-wrap gap-2 mb-4">
541
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">Go</span>
542
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">AI</span>
543
+ <span class="text-xs px-2 py-1 bg-gray-800 rounded">自动化</span>
544
+ </div>
545
+ <a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a>
546
+ </div>
547
+ </div>
548
+ </section>
549
+
550
+ <!-- 联系部分 -->
551
+ <section id="contact" class="mb-20">
552
+ <h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="联系我">联系我</h2>
553
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
554
+ <div>
555
+ <p class="mb-6 opacity-80">
556
+ 如果您有任何问题或合作机会，请随时联系我。我通常会在24小时内回复。
557
+ </p>
558
+ <div class="flex flex-col space-y-4">
559
+ <div class="flex items-center">
560
+ <i class="fas fa-envelope mr-3 text-green-500"></i>
561
+ <span>[email protected]</span>
562
+ </div>
563
+ <div class="flex items-center">
564
+ <i class="fas fa-phone mr-3 text-green-500"></i>
565
+ <span>+1 (555) 123-4567</span>
566
+ </div>
567
+ <div class="flex items-center">
568
+ <i class="fas fa-map-marker-alt mr-3 text-green-500"></i>
569
+ <span>数字空间，互联网</span>
570
+ </div>
571
+ </div>
572
+ <div class="mt-8">
573
+ <h3 class="text-xl mb-4">社交媒体</h3>
574
+ <div class="flex space-x-4">
575
+ <a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-github"></i></a>
576
+ <a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-twitter"></i></a>
577
+ <a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-linkedin"></i></a>
578
+ <a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-discord"></i></a>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ <div>
583
+ <form id="contact-form" class="flex flex-col">
584
+ <input type="text" class="contact-input" placeholder="您的姓名" required>
585
+ <input type="email" class="contact-input" placeholder="您的邮箱" required>
586
+ <input type="text" class="contact-input" placeholder="主题">
587
+ <textarea class="contact-input" rows="5" placeholder="您的消息" required></textarea>
588
+ <button type="submit" class="submit-btn mt-4">发送消息</button>
589
+ </form>
590
+ </div>
591
+ </div>
592
+ </section>
593
+
594
+ <!-- 页脚 -->
595
+ <footer class="border-t border-gray-800 pt-8 pb-4">
596
+ <div class="flex flex-col md:flex-row justify-between items-center">
597
+ <div class="mb-4 md:mb-0">
598
+ <div class="text-xl hacker-text">0xDEADBEEF</div>
599
+ <p class="text-sm opacity-60">数字世界的守护者</p>
600
+ </div>
601
+ <div class="flex space-x-6">
602
+ <a href="#about" class="text-sm">关于</a>
603
+ <a href="#skills" class="text-sm">技能</a>
604
+ <a href="#projects" class="text-sm">项目</a>
605
+ <a href="#contact" class="text-sm">联系</a>
606
+ </div>
607
+ </div>
608
+ <div class="mt-8 text-center text-sm opacity-60">
609
+ © 2023 数字黑客. 保留所有权利. 由量子比特驱动.
610
+ </div>
611
+ </footer>
612
+ </div>
613
+
614
+ <script>
615
+ // Matrix Rain 效果
616
+ const canvas = document.getElementById('matrix');
617
+ const ctx = canvas.getContext('2d');
618
+
619
+ canvas.width = window.innerWidth;
620
+ canvas.height = window.innerHeight;
621
+
622
+ const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
623
+ const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
624
+ const nums = '0123456789';
625
+ const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
626
+
627
+ const alphabet = katakana + latin + nums + symbols;
628
+
629
+ const fontSize = 16;
630
+ const columns = canvas.width / fontSize;
631
+
632
+ const rainDrops = [];
633
+
634
+ for (let x = 0; x < columns; x++) {
635
+ rainDrops[x] = 1;
636
+ }
637
+
638
+ const draw = () => {
639
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
640
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
641
+
642
+ ctx.fillStyle = '#0F0';
643
+ ctx.font = fontSize + 'px monospace';
644
+
645
+ for (let i = 0; i < rainDrops.length; i++) {
646
+ const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
647
+ ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
648
+
649
+ if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
650
+ rainDrops[i] = 0;
651
+ }
652
+ rainDrops[i]++;
653
+ }
654
+ };
655
+
656
+ setInterval(draw, 30);
657
+
658
+ // 响应式调整
659
+ window.addEventListener('resize', () => {
660
+ canvas.width = window.innerWidth;
661
+ canvas.height = window.innerHeight;
662
+ });
663
+
664
+ // 二进制时钟
665
+ function updateBinaryClock() {
666
+ const now = new Date();
667
+ const hours = now.getHours().toString().padStart(2, '0');
668
+ const minutes = now.getMinutes().toString().padStart(2, '0');
669
+ const seconds = now.getSeconds().toString().padStart(2, '0');
670
+
671
+ document.getElementById('normal-time').textContent = `${hours}:${minutes}:${seconds}`;
672
+
673
+ // 转换为二进制
674
+ const binaryHours = parseInt(hours, 10).toString(2).padStart(6, '0');
675
+ const binaryMinutes = parseInt(minutes, 10).toString(2).padStart(6, '0');
676
+ const binarySeconds = parseInt(seconds, 10).toString(2).padStart(6, '0');
677
+
678
+ let binaryDisplay = '';
679
+
680
+ // 小时
681
+ for (let i = 0; i < binaryHours.length; i++) {
682
+ binaryDisplay += `<span class="binary-digit ${binaryHours[i] === '1' ? 'active' : ''}"></span>`;
683
+ }
684
+
685
+ binaryDisplay += ' ';
686
+
687
+ // 分钟
688
+ for (let i = 0; i < binaryMinutes.length; i++) {
689
+ binaryDisplay += `<span class="binary-digit ${binaryMinutes[i] === '1' ? 'active' : ''}"></span>`;
690
+ }
691
+
692
+ binaryDisplay += ' ';
693
+
694
+ // 秒
695
+ for (let i = 0; i < binarySeconds.length; i++) {
696
+ binaryDisplay += `<span class="binary-digit ${binarySeconds[i] === '1' ? 'active' : ''}"></span>`;
697
+ }
698
+
699
+ document.getElementById('binary-time').innerHTML = binaryDisplay;
700
+ }
701
+
702
+ setInterval(updateBinaryClock, 1000);
703
+ updateBinaryClock();
704
+
705
+ // 表单提交
706
+ document.getElementById('contact-form').addEventListener('submit', function(e) {
707
+ e.preventDefault();
708
+ alert('消息已发送！我会尽快回复您。');
709
+ this.reset();
710
+ });
711
+
712
+ // 平滑滚动
713
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
714
+ anchor.addEventListener('click', function (e) {
715
+ e.preventDefault();
716
+
717
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
718
+ behavior: 'smooth'
719
+ });
720
+
721
+ // 更新导航栏活动状态
722
+ document.querySelectorAll('.nav-link').forEach(link => {
723
+ link.classList.remove('active-nav');
724
+ });
725
+ this.classList.add('active-nav');
726
+ });
727
+ });
728
+
729
+ // 滚动时更新导航栏活动状态
730
+ window.addEventListener('scroll', function() {
731
+ const scrollPosition = window.scrollY;
732
+
733
+ document.querySelectorAll('section').forEach(section => {
734
+ const sectionTop = section.offsetTop - 100;
735
+ const sectionBottom = sectionTop + section.offsetHeight;
736
+
737
+ if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
738
+ const id = section.getAttribute('id');
739
+ document.querySelectorAll('.nav-link').forEach(link => {
740
+ link.classList.remove('active-nav');
741
+ if (link.getAttribute('href') === `#${id}`) {
742
+ link.classList.add('active-nav');
743
+ }
744
+ });
745
+ }
746
+ });
747
+ });
748
+
749
+ // 随机字符效果
750
+ const hackerTextElements = document.querySelectorAll('.hacker-text');
751
+
752
+ hackerTextElements.forEach(element => {
753
+ const originalText = element.textContent;
754
+ let iterations = 0;
755
+
756
+ const interval = setInterval(() => {
757
+ element.textContent = originalText
758
+ .split('')
759
+ .map((letter, index) => {
760
+ if (index < iterations) {
761
+ return originalText[index];
762
+ }
763
+ return alphabet[Math.floor(Math.random() * alphabet.length)];
764
+ })
765
+ .join('');
766
+
767
+ if (iterations >= originalText.length) {
768
+ clearInterval(interval);
769
+ }
770
+
771
+ iterations += 1 / 3;
772
+ }, 30);
773
+ });
774
+ </script>
775
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ColamanAI/hark1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
776
+ </html>