Hugging Face's logo

Spaces:
ColamanAI
/
hacker
Running

App Files Community
ColamanAI commited on
Commit
de0e0fe
·
verified ·
1 Parent(s): 48a5108

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +927 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hacker
3
- emoji: 🔥
4
- colorFrom: red
5
- colorTo: purple
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: hacker
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,927 @@
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=Major+Mono+Display&family=Share+Tech+Mono&display=swap');
11
+
12
+ :root {
13
+ --neon-green: #39ff14;
14
+ --neon-blue: #00f7ff;
15
+ --neon-pink: #ff00e4;
16
+ --neon-purple: #b400ff;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Share Tech Mono', monospace;
21
+ background-color: #0a0a0a;
22
+ color: var(--neon-green);
23
+ overflow-x: hidden;
24
+ line-height: 1.6;
25
+ }
26
+
27
+ .hacker-font {
28
+ font-family: 'Major Mono Display', monospace;
29
+ }
30
+
31
+ .cyber-terminal {
32
+ background-color: rgba(5, 5, 15, 0.9);
33
+ border: 1px solid var(--neon-green);
34
+ box-shadow: 0 0 30px rgba(57, 255, 20, 0.3),
35
+ 0 0 60px rgba(0, 247, 255, 0.1);
36
+ position: relative;
37
+ overflow: hidden;
38
+ }
39
+
40
+ .cyber-terminal::before {
41
+ content: "";
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ right: 0;
46
+ bottom: 0;
47
+ background:
48
+ linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px),
49
+ linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px);
50
+ background-size: 30px 30px;
51
+ pointer-events: none;
52
+ }
53
+
54
+ .terminal-header {
55
+ background: linear-gradient(90deg, #001010, #000a15);
56
+ border-bottom: 1px solid var(--neon-green);
57
+ padding: 0.75rem;
58
+ }
59
+
60
+ .cursor {
61
+ display: inline-block;
62
+ width: 8px;
63
+ height: 16px;
64
+ background-color: var(--neon-green);
65
+ animation: blink 1s step-end infinite;
66
+ vertical-align: middle;
67
+ }
68
+
69
+ @keyframes blink {
70
+ from, to { opacity: 1; }
71
+ 50% { opacity: 0; }
72
+ }
73
+
74
+ .command {
75
+ color: var(--neon-blue);
76
+ }
77
+
78
+ .response {
79
+ color: var(--neon-green);
80
+ margin-bottom: 1.5rem;
81
+ }
82
+
83
+ .error {
84
+ color: #ff0033;
85
+ }
86
+
87
+ .success {
88
+ color: var(--neon-green);
89
+ }
90
+
91
+ .warning {
92
+ color: #ffcc00;
93
+ }
94
+
95
+ .info {
96
+ color: var(--neon-blue);
97
+ }
98
+
99
+ .neon-text {
100
+ text-shadow: 0 0 5px currentColor;
101
+ }
102
+
103
+ .neon-box {
104
+ box-shadow: 0 0 10px currentColor;
105
+ }
106
+
107
+ .holographic-bg {
108
+ position: fixed;
109
+ top: 0;
110
+ left: 0;
111
+ width: 100%;
112
+ height: 100%;
113
+ z-index: -1;
114
+ opacity: 0.1;
115
+ }
116
+
117
+ .social-icon {
118
+ transition: all 0.3s ease;
119
+ }
120
+
121
+ .social-icon:hover {
122
+ transform: scale(1.3);
123
+ filter: drop-shadow(0 0 8px currentColor);
124
+ }
125
+
126
+ /* 头像样式 */
127
+ .avatar {
128
+ width: 120px;
129
+ height: 120px;
130
+ border-radius: 50%;
131
+ border: 3px solid var(--neon-purple);
132
+ box-shadow: 0 0 20px var(--neon-purple);
133
+ object-fit: cover;
134
+ transition: all 0.5s ease;
135
+ }
136
+
137
+ .avatar:hover {
138
+ transform: rotate(360deg);
139
+ border-color: var(--neon-pink);
140
+ box-shadow: 0 0 30px var(--neon-pink);
141
+ }
142
+
143
+ /* 自定义滚动条 */
144
+ ::-webkit-scrollbar {
145
+ width: 8px;
146
+ }
147
+
148
+ ::-webkit-scrollbar-track {
149
+ background: #001010;
150
+ }
151
+
152
+ ::-webkit-scrollbar-thumb {
153
+ background: var(--neon-green);
154
+ border-radius: 4px;
155
+ }
156
+
157
+ /* 移动端优化 */
158
+ @media (max-width: 640px) {
159
+ .cyber-terminal {
160
+ border-left: none;
161
+ border-right: none;
162
+ border-radius: 0;
163
+ max-height: 100vh;
164
+ }
165
+
166
+ .terminal-header {
167
+ padding: 0.5rem;
168
+ }
169
+
170
+ .terminal-body {
171
+ padding: 1rem;
172
+ }
173
+
174
+ .command-input {
175
+ font-size: 0.9rem;
176
+ }
177
+
178
+ .response {
179
+ font-size: 0.9rem;
180
+ }
181
+
182
+ .social-icons {
183
+ font-size: 1.5rem;
184
+ }
185
+
186
+ .avatar {
187
+ width: 80px;
188
+ height: 80px;
189
+ }
190
+ }
191
+
192
+ /* 打字机效果 */
193
+ .typewriter {
194
+ overflow: hidden;
195
+ white-space: nowrap;
196
+ margin: 0 auto;
197
+ letter-spacing: 1px;
198
+ }
199
+
200
+ /* 黑客卡片 */
201
+ .cyber-card {
202
+ border: 1px solid var(--neon-blue);
203
+ transition: all 0.3s ease;
204
+ position: relative;
205
+ overflow: hidden;
206
+ }
207
+
208
+ .cyber-card::before {
209
+ content: '';
210
+ position: absolute;
211
+ top: -50%;
212
+ left: -50%;
213
+ width: 200%;
214
+ height: 200%;
215
+ background: linear-gradient(
216
+ to bottom right,
217
+ rgba(0, 247, 255, 0) 0%,
218
+ rgba(0, 247, 255, 0.1) 50%,
219
+ rgba(0, 247, 255, 0) 100%
220
+ );
221
+ transform: rotate(30deg);
222
+ animation: shine 3s infinite;
223
+ }
224
+
225
+ @keyframes shine {
226
+ 0% { transform: rotate(30deg) translate(-30%, -30%); }
227
+ 100% { transform: rotate(30deg) translate(30%, 30%); }
228
+ }
229
+
230
+ .cyber-card:hover {
231
+ border-color: var(--neon-pink);
232
+ transform: translateY(-5px);
233
+ }
234
+
235
+ /* 黑客特效 */
236
+ .hacker-effect {
237
+ position: relative;
238
+ }
239
+
240
+ .hacker-effect::after {
241
+ content: attr(data-text);
242
+ position: absolute;
243
+ left: 2px;
244
+ top: 0;
245
+ color: var(--neon-pink);
246
+ background: #0a0a0a;
247
+ overflow: hidden;
248
+ clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
249
+ animation: glitch 2s infinite alternate-reverse;
250
+ }
251
+
252
+ @keyframes glitch {
253
+ 0% { transform: translate(0); }
254
+ 20% { transform: translate(-3px, 3px); }
255
+ 40% { transform: translate(-3px, -3px); }
256
+ 60% { transform: translate(3px, 3px); }
257
+ 80% { transform: translate(3px, -3px); }
258
+ 100% { transform: translate(0); }
259
+ }
260
+
261
+ /* 二进制雨 */
262
+ .binary-rain {
263
+ position: absolute;
264
+ top: 0;
265
+ left: 0;
266
+ width: 100%;
267
+ height: 100%;
268
+ z-index: -1;
269
+ opacity: 0.15;
270
+ }
271
+
272
+ /* 3D终端效果 */
273
+ .terminal-3d {
274
+ transform-style: preserve-3d;
275
+ perspective: 1000px;
276
+ }
277
+
278
+ .terminal-3d:hover {
279
+ transform: rotateX(5deg) rotateY(5deg);
280
+ }
281
+
282
+ /* 扫描线 */
283
+ .scanlines {
284
+ position: absolute;
285
+ top: 0;
286
+ left: 0;
287
+ width: 100%;
288
+ height: 100%;
289
+ background: linear-gradient(
290
+ to bottom,
291
+ rgba(0, 247, 255, 0.03) 0%,
292
+ rgba(0, 247, 255, 0.03) 50%,
293
+ transparent 50%
294
+ );
295
+ background-size: 100% 4px;
296
+ pointer-events: none;
297
+ }
298
+
299
+ /* 密码破解动画 */
300
+ .password-cracker {
301
+ border: 1px solid var(--neon-pink);
302
+ padding: 0.5rem;
303
+ font-family: monospace;
304
+ overflow: hidden;
305
+ }
306
+
307
+ .password-line {
308
+ animation: crack 5s linear infinite;
309
+ }
310
+
311
+ @keyframes crack {
312
+ 0% { transform: translateY(0); }
313
+ 100% { transform: translateY(-100%); }
314
+ }
315
+
316
+ /* 雷达扫描效果 */
317
+ .radar-scan {
318
+ position: relative;
319
+ width: 150px;
320
+ height: 150px;
321
+ border-radius: 50%;
322
+ border: 2px solid var(--neon-blue);
323
+ box-shadow: 0 0 10px var(--neon-blue);
324
+ overflow: hidden;
325
+ }
326
+
327
+ .radar-scan::before {
328
+ content: '';
329
+ position: absolute;
330
+ width: 50%;
331
+ height: 50%;
332
+ background: linear-gradient(45deg, transparent, rgba(0, 247, 255, 0.3));
333
+ top: 0;
334
+ left: 0;
335
+ border-radius: 100% 0 0 0;
336
+ transform-origin: bottom right;
337
+ animation: radar 4s linear infinite;
338
+ }
339
+
340
+ @keyframes radar {
341
+ 0% { transform: rotate(0deg); }
342
+ 100% { transform: rotate(360deg); }
343
+ }
344
+
345
+ /* 进度条 */
346
+ .progress-container {
347
+ width: 100%;
348
+ height: 20px;
349
+ background-color: #001010;
350
+ border: 1px solid var(--neon-green);
351
+ position: relative;
352
+ overflow: hidden;
353
+ }
354
+
355
+ .progress-bar {
356
+ height: 100%;
357
+ background: linear-gradient(90deg, var(--neon-green), var(--neon-blue));
358
+ position: relative;
359
+ animation: progress-pulse 2s infinite;
360
+ }
361
+
362
+ @keyframes progress-pulse {
363
+ 0% { opacity: 1; }
364
+ 50% { opacity: 0.7; }
365
+ 100% { opacity: 1; }
366
+ }
367
+
368
+ /* 黑客矩阵数字雨 */
369
+ .matrix-rain {
370
+ position: fixed;
371
+ top: 0;
372
+ left: 0;
373
+ width: 100%;
374
+ height: 100%;
375
+ z-index: -2;
376
+ opacity: 0.1;
377
+ }
378
+ </style>
379
+ </head>
380
+ <body>
381
+ <!-- 全息背景效果 -->
382
+ <div class="holographic-bg" id="hologram"></div>
383
+
384
+ <!-- 二进制雨效果 -->
385
+ <canvas id="binaryRain" class="binary-rain"></canvas>
386
+
387
+ <!-- 黑客矩阵数字雨 -->
388
+ <canvas id="matrixRain" class="matrix-rain"></canvas>
389
+
390
+ <div class="min-h-screen flex items-center justify-center p-2 sm:p-4">
391
+ <div class="cyber-terminal terminal-3d w-full max-w-4xl h-auto max-h-[95vh] flex flex-col">
392
+ <!-- 扫描线覆盖层 -->
393
+ <div class="scanlines"></div>
394
+
395
+ <!-- 终端头部 -->
396
+ <div class="terminal-header flex items-center justify-between">
397
+ <div class="flex items-center space-x-2">
398
+ <div class="w-3 h-3 rounded-full bg-red-500 neon-box"></div>
399
+ <div class="w-3 h-3 rounded-full bg-yellow-500 neon-box"></div>
400
+ <div class="w-3 h-3 rounded-full bg-green-500 neon-box"></div>
401
+ </div>
402
+ <div class="text-sm neon-text">root@darkhack:~</div>
403
+ <div class="text-xs neon-text">[安全连接已加密]</div>
404
+ </div>
405
+
406
+ <!-- 终端主体 -->
407
+ <div class="terminal-body flex-grow overflow-y-auto p-4">
408
+ <div class="mb-6">
409
+ <div class="typewriter text-xl sm:text-2xl font-bold mb-2 hacker-font">
410
+ <span class="command">$</span> whoami
411
+ <span class="cursor"></span>
412
+ </div>
413
+ <div class="response" id="whoami">
414
+ > 系统启动中...
415
+ </div>
416
+ </div>
417
+
418
+ <!-- 关于我部分 -->
419
+ <div class="mb-6 hidden" id="bio-section">
420
+ <div class="typewriter mb-2">
421
+ <span class="command">$</span> cat about.txt
422
+ <span class="cursor"></span>
423
+ </div>
424
+ <div class="response grid grid-cols-1 md:grid-cols-2 gap-4">
425
+ <div class="cyber-card p-4 flex flex-col items-center">
426
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
427
+ alt="黑客头像" class="avatar mb-3">
428
+ <div class="radar-scan my-2"></div>
429
+ <span class="text-xs text-gray-400">身份验证中...</span>
430
+ </div>
431
+ <div class="cyber-card p-4">
432
+ <span class="success">身份信息:</span><br>
433
+ > <span class="hacker-effect" data-text="暗夜黑客">暗夜黑客</span><br>
434
+ > 网络安全专家 & 渗透测试工程师<br>
435
+ > 数字取证分析师
436
+ </div>
437
+ <div class="cyber-card p-4">
438
+ <span class="success">认证资质:</span><br>
439
+ > OSCP | CEH | CISSP<br>
440
+ > 10+年网络安全经验<br>
441
+ > 100+系统安全加固
442
+ </div>
443
+ <div class="cyber-card p-4 col-span-1 md:col-span-2">
444
+ <span class="success">座右铭:</span><br>
445
+ > "唯一安全的系统是断电的、锁在保险箱里的、<br>
446
+ > 并且埋在地下20英尺深的系统。"
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- 技能可视化 -->
452
+ <div class="mb-6 hidden" id="skills-section">
453
+ <div class="typewriter mb-2">
454
+ <span class="command">$</span> visualize --skills
455
+ <span class="cursor"></span>
456
+ </div>
457
+ <div class="response">
458
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
459
+ <div class="cyber-card p-4">
460
+ <span class="success">渗透测试:</span>
461
+ <div class="progress-container mt-2">
462
+ <div class="progress-bar" style="width: 95%"></div>
463
+ </div>
464
+ <div class="flex justify-between text-xs mt-1">
465
+ <span>0%</span>
466
+ <span>95%</span>
467
+ <span>100%</span>
468
+ </div>
469
+ </div>
470
+ <div class="cyber-card p-4">
471
+ <span class="success">恶意软件分析:</span>
472
+ <div class="progress-container mt-2">
473
+ <div class="progress-bar" style="width: 90%"></div>
474
+ </div>
475
+ <div class="flex justify-between text-xs mt-1">
476
+ <span>0%</span>
477
+ <span>90%</span>
478
+ <span>100%</span>
479
+ </div>
480
+ </div>
481
+ <div class="cyber-card p-4">
482
+ <span class="success">密码学:</span>
483
+ <div class="progress-container mt-2">
484
+ <div class="progress-bar" style="width: 85%"></div>
485
+ </div>
486
+ <div class="flex justify-between text-xs mt-1">
487
+ <span>0%</span>
488
+ <span>85%</span>
489
+ <span>100%</span>
490
+ </div>
491
+ </div>
492
+ <div class="cyber-card p-4">
493
+ <span class="success">网络安全:</span>
494
+ <div class="progress-container mt-2">
495
+ <div class="progress-bar" style="width: 92%"></div>
496
+ </div>
497
+ <div class="flex justify-between text-xs mt-1">
498
+ <span>0%</span>
499
+ <span>92%</span>
500
+ <span>100%</span>
501
+ </div>
502
+ </div>
503
+ <div class="cyber-card p-4">
504
+ <span class="success">数字取证:</span>
505
+ <div class="progress-container mt-2">
506
+ <div class="progress-bar" style="width: 88%"></div>
507
+ </div>
508
+ <div class="flex justify-between text-xs mt-1">
509
+ <span>0%</span>
510
+ <span>88%</span>
511
+ <span>100%</span>
512
+ </div>
513
+ </div>
514
+ <div class="cyber-card p-4">
515
+ <span class="success">AI安全:</span>
516
+ <div class="progress-container mt-2">
517
+ <div class="progress-bar" style="width: 82%"></div>
518
+ </div>
519
+ <div class="flex justify-between text-xs mt-1">
520
+ <span>0%</span>
521
+ <span>82%</span>
522
+ <span>100%</span>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- 项目展示 -->
530
+ <div class="mb-6 hidden" id="projects-section">
531
+ <div class="typewriter mb-2">
532
+ <span class="command">$</span> access --projects --decrypt
533
+ <span class="cursor"></span>
534
+ </div>
535
+ <div class="response">
536
+ <div class="password-cracker mb-4 h-8">
537
+ <div class="password-line">
538
+ > 解密项目数据库...<br>
539
+ > 使用RSA-4096密钥...<br>
540
+ > 暴力破解密码...<br>
541
+ > 密码已找到: ********<br>
542
+ > 访问已授权!
543
+ </div>
544
+ </div>
545
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
546
+ <div class="cyber-card p-4">
547
+ <span class="success">安全通信系统/</span><br>
548
+ > 抗量子加密通讯平台<br>
549
+ > <span class="info">技术:</span> Rust, WebAssembly, PQ加密
550
+ </div>
551
+ <div class="cyber-card p-4">
552
+ <span class="success">红队工具集/</span><br>
553
+ > 高级渗透测试框架<br>
554
+ > <span class="info">技术:</span> Python, C++, 零日漏洞利用
555
+ </div>
556
+ <div class="cyber-card p-4">
557
+ <span class="success">区块链审计工具/</span><br>
558
+ > 智能合约漏洞扫描器<br>
559
+ > <span class="info">技术:</span> Solidity, EVM, 形式化验证
560
+ </div>
561
+ <div class="cyber-card p-4">
562
+ <span class="success">AI安全系统/</span><br>
563
+ > 对抗性机器学习防御系统<br>
564
+ > <span class="info">技术:</span> TensorFlow, PyTorch, FGSM
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <!-- 联系方式 -->
571
+ <div class="mb-6 hidden" id="contact-section">
572
+ <div class="typewriter mb-2">
573
+ <span class="command">$</span> ./contact.sh --encrypt
574
+ <span class="cursor"></span>
575
+ </div>
576
+ <div class="response">
577
+ <div class="cyber-card p-4 mb-4">
578
+ <span class="success">安全通信渠道:</span><br>
579
+ <div class="flex justify-center space-x-6 mt-3 text-2xl sm:text-3xl">
580
+ <a href="#" class="social-icon text-gray-300 hover:text-white"><i class="fab fa-github"></i></a>
581
+ <a href="#" class="social-icon text-blue-400 hover:text-blue-300"><i class="fab fa-linkedin"></i></a>
582
+ <a href="#" class="social-icon text-red-400 hover:text-red-300"><i class="fab fa-youtube"></i></a>
583
+ <a href="#" class="social-icon text-purple-400 hover:text-purple-300"><i class="fab fa-discord"></i></a>
584
+ <a href="#" class="social-icon text-blue-500 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
585
+ </div>
586
+ </div>
587
+
588
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
589
+ <div class="cyber-card p-4">
590
+ <span class="success">加密通信:</span><br>
591
+ > <span class="info">ProtonMail:</span> [email protected]<br>
592
+ > <span class="info">Signal:</span> +86 XXX-XXXX-XXXX<br>
593
+ > <span class="info">Session:</span> 05aabbccddeeff...
594
+ </div>
595
+ <div class="cyber-card p-4">
596
+ <span class="success">PGP密钥:</span><br>
597
+ <div class="text-xs overflow-x-auto">
598
+ -----BEGIN PGP PUBLIC KEY BLOCK-----<br>
599
+ mQINBF4wB/sBEAD... [点击展开]<br>
600
+ -----END PGP PUBLIC KEY BLOCK-----
601
+ </div>
602
+ <button class="text-xs mt-2 text-blue-400 hover:text-blue-300">显示完整密钥</button>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+
608
+ <!-- 系统状态 -->
609
+ <div class="mb-6 hidden" id="status-section">
610
+ <div class="typewriter mb-2">
611
+ <span class="command">$</span> system --status --visual
612
+ <span class="cursor"></span>
613
+ </div>
614
+ <div class="response">
615
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
616
+ <div class="cyber-card p-3 text-center">
617
+ <div class="text-sm mb-1">CPU负载</div>
618
+ <div class="radial-progress text-green-500" style="--value:78; --size:3rem;">78%</div>
619
+ </div>
620
+ <div class="cyber-card p-3 text-center">
621
+ <div class="text-sm mb-1">内存</div>
622
+ <div class="radial-progress text-blue-500" style="--value:65; --size:3rem;">65%</div>
623
+ </div>
624
+ <div class="cyber-card p-3 text-center">
625
+ <div class="text-sm mb-1">网络</div>
626
+ <div class="radial-progress text-pink-500" style="--value:92; --size:3rem;">92%</div>
627
+ </div>
628
+ <div class="cyber-card p-3 text-center">
629
+ <div class="text-sm mb-1">安全</div>
630
+ <div class="radial-progress text-green-500" style="--value:100; --size:3rem;">100%</div>
631
+ </div>
632
+ </div>
633
+ <div class="cyber-card p-4">
634
+ <span class="success">活跃威胁:</span> 3<br>
635
+ <span class="success">已修复漏洞:</span> 127<br>
636
+ <span class="success">加密通信:</span> 12<br>
637
+ <span class="success">系统运行时间:</span> 42天 7小时 23分钟
638
+ </div>
639
+ </div>
640
+ </div>
641
+
642
+ <!-- 帮助菜单 -->
643
+ <div class="mb-6 hidden" id="help-section">
644
+ <div class="typewriter mb-2">
645
+ <span class="command">$</span> help --all
646
+ <span class="cursor"></span>
647
+ </div>
648
+ <div class="response">
649
+ <div class="cyber-card p-4 mb-4">
650
+ <span class="success">可用命令:</span><br>
651
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2">
652
+ <div><span class="command">whoami</span> - 用户身份</div>
653
+ <div><span class="command">about</span> - 个人资料</div>
654
+ <div><span class="command">skills</span> - 技能展示</div>
655
+ <div><span class="command">projects</span> - 项目作品</div>
656
+ <div><span class="command">contact</span> - 联系方式</div>
657
+ <div><span class="command">status</span> - 系统状态</div>
658
+ <div><span class="command">clear</span> - 清空终端</div>
659
+ <div><span class="command">help</span> - 帮助菜单</div>
660
+ </div>
661
+ </div>
662
+ <div class="text-xs warning">
663
+ > 警告: 未经授权的访问将被追究法律责任<br>
664
+ > 本系统受《网络安全法》保护
665
+ </div>
666
+ </div>
667
+ </div>
668
+
669
+ <!-- 命令输入 -->
670
+ <div class="mt-6" id="command-input">
671
+ <div class="flex items-center">
672
+ <span class="command mr-2">$</span>
673
+ <div class="relative flex-grow">
674
+ <input type="text" class="command-input bg-transparent border-none outline-none w-full text-green-500"
675
+ placeholder="输入命令..." id="input-field" autocomplete="off" autocorrect="off"
676
+ autocapitalize="off" spellcheck="false" list="commands">
677
+ <datalist id="commands">
678
+ <option value="whoami">
679
+ <option value="about">
680
+ <option value="skills">
681
+ <option value="projects">
682
+ <option value="contact">
683
+ <option value="status">
684
+ <option value="clear">
685
+ <option value="help">
686
+ </datalist>
687
+ </div>
688
+ <span class="cursor ml-1"></span>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+
695
+ <script>
696
+ // 全息背景效果
697
+ const hologram = document.getElementById('hologram');
698
+ let angle = 0;
699
+
700
+ function updateHologram() {
701
+ angle += 0.5;
702
+ const x = 50 + 40 * Math.cos(angle * Math.PI / 180);
703
+ const y = 50 + 40 * Math.sin(angle * Math.PI / 180);
704
+
705
+ hologram.style.background = `
706
+ radial-gradient(circle at ${x}% ${y}%,
707
+ rgba(0, 247, 255, 0.1) 0%,
708
+ rgba(57, 255, 20, 0.05) 30%,
709
+ rgba(255, 0, 228, 0.03) 60%,
710
+ transparent 80%)
711
+ `;
712
+
713
+ requestAnimationFrame(updateHologram);
714
+ }
715
+
716
+ updateHologram();
717
+
718
+ // 二进制雨效果
719
+ const binaryCanvas = document.getElementById('binaryRain');
720
+ const binaryCtx = binaryCanvas.getContext('2d');
721
+
722
+ binaryCanvas.width = window.innerWidth;
723
+ binaryCanvas.height = window.innerHeight;
724
+
725
+ const binaryChars = "01";
726
+ const binaryCols = binaryCanvas.width / 20;
727
+ const binaryDrops = [];
728
+
729
+ for (let i = 0; i < binaryCols; i++) {
730
+ binaryDrops[i] = Math.random() * binaryCanvas.height;
731
+ }
732
+
733
+ function drawBinaryRain() {
734
+ binaryCtx.fillStyle = "rgba(0, 0, 0, 0.05)";
735
+ binaryCtx.fillRect(0, 0, binaryCanvas.width, binaryCanvas.height);
736
+
737
+ binaryCtx.fillStyle = "#39ff14";
738
+ binaryCtx.font = "16px monospace";
739
+
740
+ for (let i = 0; i < binaryDrops.length; i++) {
741
+ const text = binaryChars.charAt(Math.floor(Math.random() * binaryChars.length));
742
+ binaryCtx.fillText(text, i * 20, binaryDrops[i] * 20);
743
+
744
+ if (binaryDrops[i] * 20 > binaryCanvas.height && Math.random() > 0.975) {
745
+ binaryDrops[i] = 0;
746
+ }
747
+
748
+ binaryDrops[i]++;
749
+ }
750
+ }
751
+
752
+ setInterval(drawBinaryRain, 50);
753
+
754
+ // 黑客矩阵数字雨效果
755
+ const matrixCanvas = document.getElementById('matrixRain');
756
+ const matrixCtx = matrixCanvas.getContext('2d');
757
+
758
+ matrixCanvas.width = window.innerWidth;
759
+ matrixCanvas.height = window.innerHeight;
760
+
761
+ const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
762
+ const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
763
+ const nums = '0123456789';
764
+
765
+ const alphabet = katakana + latin + nums;
766
+
767
+ const fontSize = 16;
768
+ const columns = matrixCanvas.width / fontSize;
769
+
770
+ const rainDrops = [];
771
+
772
+ for (let x = 0; x < columns; x++) {
773
+ rainDrops[x] = 1;
774
+ }
775
+
776
+ const drawMatrixRain = () => {
777
+ matrixCtx.fillStyle = 'rgba(0, 0, 0, 0.05)';
778
+ matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
779
+
780
+ matrixCtx.fillStyle = '#0F0';
781
+ matrixCtx.font = fontSize + 'px monospace';
782
+
783
+ for (let i = 0; i < rainDrops.length; i++) {
784
+ const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
785
+ matrixCtx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
786
+
787
+ if (rainDrops[i] * fontSize > matrixCanvas.height && Math.random() > 0.975) {
788
+ rainDrops[i] = 0;
789
+ }
790
+ rainDrops[i]++;
791
+ }
792
+ };
793
+
794
+ setInterval(drawMatrixRain, 30);
795
+
796
+ // 终端功能
797
+ document.addEventListener('DOMContentLoaded', () => {
798
+ const whoamiElement = document.getElementById('whoami');
799
+ const inputField = document.getElementById('input-field');
800
+ const sections = {
801
+ about: document.getElementById('bio-section'),
802
+ skills: document.getElementById('skills-section'),
803
+ projects: document.getElementById('projects-section'),
804
+ contact: document.getElementById('contact-section'),
805
+ status: document.getElementById('status-section'),
806
+ help: document.getElementById('help-section')
807
+ };
808
+
809
+ // 初始打字动画
810
+ setTimeout(() => {
811
+ whoamiElement.innerHTML = `
812
+ > <span class="success">用户:</span> <span class="hacker-effect" data-text="暗夜黑客">暗夜黑客</span><br>
813
+ > <span class="success">权限:</span> 超级用户<br>
814
+ > <span class="success">位置:</span> [已加密]<br>
815
+ > <span class="success">任务:</span> 保护所有系统<br>
816
+ > <span class="success">状态:</span> <span class="text-green-500">运行中</span><br><br>
817
+ > 输入 <span class="command">help</span> 查看命令列表
818
+ `;
819
+
820
+ // 默认显示帮助部分
821
+ sections.help.classList.remove('hidden');
822
+ }, 1500);
823
+
824
+ // 处理命令输入
825
+ inputField.addEventListener('keydown', (e) => {
826
+ if (e.key === 'Enter') {
827
+ const command = inputField.value.trim().toLowerCase();
828
+ inputField.value = '';
829
+
830
+ // 首先隐藏所有部分
831
+ Object.values(sections).forEach(section => {
832
+ section.classList.add('hidden');
833
+ });
834
+
835
+ // 处理命令
836
+ switch(command) {
837
+ case 'about':
838
+ sections.about.classList.remove('hidden');
839
+ break;
840
+ case 'skills':
841
+ sections.skills.classList.remove('hidden');
842
+ break;
843
+ case 'projects':
844
+ sections.projects.classList.remove('hidden');
845
+ break;
846
+ case 'contact':
847
+ sections.contact.classList.remove('hidden');
848
+ break;
849
+ case 'status':
850
+ sections.status.classList.remove('hidden');
851
+ break;
852
+ case 'help':
853
+ sections.help.classList.remove('hidden');
854
+ break;
855
+ case 'clear':
856
+ document.querySelector('.terminal-body').scrollTo(0, 0);
857
+ setTimeout(() => {
858
+ document.querySelector('.terminal-body').innerHTML = `
859
+ <div class="mt-6" id="command-input">
860
+ <div class="flex items-center">
861
+ <span class="command mr-2">$</span>
862
+ <div class="relative flex-grow">
863
+ <input type="text" class="command-input bg-transparent border-none outline-none w-full text-green-500"
864
+ placeholder="输入命令..." id="input-field" autocomplete="off" autocorrect="off"
865
+ autocapitalize="off" spellcheck="false" list="commands">
866
+ <datalist id="commands">
867
+ <option value="whoami">
868
+ <option value="about">
869
+ <option value="skills">
870
+ <option value="projects">
871
+ <option value="contact">
872
+ <option value="status">
873
+ <option value="clear">
874
+ <option value="help">
875
+ </datalist>
876
+ </div>
877
+ <span class="cursor ml-1"></span>
878
+ </div>
879
+ </div>
880
+ `;
881
+ document.getElementById('input-field').focus();
882
+ }, 100);
883
+ break;
884
+ case 'whoami':
885
+ whoamiElement.scrollIntoView({ behavior: 'smooth' });
886
+ break;
887
+ default:
888
+ if (command) {
889
+ const response = document.createElement('div');
890
+ response.className = 'response error';
891
+ response.innerHTML = `> 未知命令: <span class="command">${command}</span><br>
892
+ > 输入 <span class="command">help</span> 查看可用命令`;
893
+ document.querySelector('.terminal-body').insertBefore(response, document.getElementById('command-input'));
894
+ }
895
+ break;
896
+ }
897
+
898
+ // 滚动到底部
899
+ setTimeout(() => {
900
+ document.querySelector('.terminal-body').scrollTo(0, document.querySelector('.terminal-body').scrollHeight);
901
+ }, 50);
902
+ }
903
+ });
904
+
905
+ // 页面加载时聚焦输入框
906
+ inputField.focus();
907
+
908
+ // 处理窗口大小变化
909
+ window.addEventListener('resize', () => {
910
+ binaryCanvas.width = window.innerWidth;
911
+ binaryCanvas.height = window.innerHeight;
912
+ matrixCanvas.width = window.innerWidth;
913
+ matrixCanvas.height = window.innerHeight;
914
+ });
915
+
916
+ // 鼠标移动时的3D效果
917
+ const terminal = document.querySelector('.terminal-3d');
918
+ document.addEventListener('mousemove', (e) => {
919
+ const x = e.clientX / window.innerWidth;
920
+ const y = e.clientY / window.innerHeight;
921
+
922
+ terminal.style.transform = `rotateX(${(0.5 - y) * 10}deg) rotateY(${(x - 0.5) * 10}deg)`;
923
+ });
924
+ });
925
+ </script>
926
+ <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/hacker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
927
+ </html>