Hugging Face's logo

Spaces:
iimran
/
cyberpunk-html-website
Running

App Files Community
iimran commited on
Commit
52f8c9e
·
verified ·
1 Parent(s): 451f01c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +59 -531
index.html CHANGED
@@ -3,363 +3,12 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Cyber Terminal v2.0</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=Inconsolata:wght@400;700&family=Share+Tech+Mono&display=swap');
11
-
12
- :root {
13
- --terminal-bg: #0a0a12;
14
- --terminal-green: #0f0;
15
- --terminal-cyan: #0ff;
16
- --terminal-purple: #b19cd9;
17
- --terminal-red: #f44;
18
- --terminal-glow: rgba(0, 255, 0, 0.7);
19
- --terminal-border: #333;
20
- --text-color: #e0e0e0;
21
- --text-shadow: 0 0 8px var(--terminal-glow);
22
- --selection-color: rgba(0, 255, 0, 0.3);
23
- }
24
-
25
- * {
26
- margin: 0;
27
- padding: 0;
28
- box-sizing: border-box;
29
- }
30
-
31
- body {
32
- background: #000;
33
- overflow: hidden;
34
- font-family: 'Inconsolata', monospace;
35
- display: flex;
36
- justify-content: center;
37
- align-items: center;
38
- min-height: 100vh;
39
- perspective: 1000px;
40
- }
41
-
42
- .matrix-background {
43
- position: fixed;
44
- top: 0;
45
- left: 0;
46
- width: 100%;
47
- height: 100%;
48
- z-index: -1;
49
- opacity: 0.15;
50
- }
51
-
52
- .terminal-container {
53
- position: relative;
54
- width: 85%;
55
- max-width: 900px;
56
- height: 75vh;
57
- background: var(--terminal-bg);
58
- border-radius: 8px;
59
- box-shadow: 0 0 30px rgba(0, 255, 0, 0.5),
60
- inset 0 0 10px rgba(0, 255, 0, 0.2);
61
- overflow: hidden;
62
- border: 1px solid var(--terminal-green);
63
- transform-style: preserve-3d;
64
- animation: float 8s ease-in-out infinite;
65
- }
66
-
67
- @keyframes float {
68
- 0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(5deg); }
69
- 50% { transform: translateY(-20px) rotateX(5deg) rotateY(10deg); }
70
- }
71
-
72
- .terminal-header {
73
- background: linear-gradient(to right, #0a0a0a, #111);
74
- padding: 8px 15px;
75
- display: flex;
76
- justify-content: space-between;
77
- align-items: center;
78
- color: var(--terminal-green);
79
- font-family: 'Share Tech Mono', monospace;
80
- border-bottom: 1px solid var(--terminal-green);
81
- box-shadow: 0 2px 15px rgba(0, 255, 0, 0.3);
82
- }
83
-
84
- .terminal-buttons {
85
- display: flex;
86
- gap: 8px;
87
- }
88
-
89
- .terminal-button {
90
- width: 12px;
91
- height: 12px;
92
- border-radius: 50%;
93
- border: 1px solid rgba(255, 255, 255, 0.2);
94
- transition: all 0.2s;
95
- cursor: pointer;
96
- }
97
-
98
- .terminal-button:hover {
99
- transform: scale(1.2);
100
- }
101
-
102
- .terminal-button.red {
103
- background: #ff5f56;
104
- }
105
-
106
- .terminal-button.yellow {
107
- background: #ffbd2e;
108
- }
109
-
110
- .terminal-button.green {
111
- background: #27c93f;
112
- }
113
-
114
- .terminal-body {
115
- padding: 15px;
116
- height: calc(100% - 40px);
117
- overflow-y: auto;
118
- color: var(--text-color);
119
- text-shadow: var(--text-shadow);
120
- line-height: 1.6;
121
- scrollbar-width: thin;
122
- scrollbar-color: var(--terminal-green) transparent;
123
- }
124
-
125
- .terminal-body::-webkit-scrollbar {
126
- width: 8px;
127
- }
128
-
129
- .terminal-body::-webkit-scrollbar-track {
130
- background: transparent;
131
- }
132
-
133
- .terminal-body::-webkit-scrollbar-thumb {
134
- background-color: var(--terminal-green);
135
- border-radius: 10px;
136
- }
137
-
138
- .typing-text {
139
- white-space: pre-wrap;
140
- font-size: 1.1rem;
141
- }
142
-
143
- .command-line {
144
- margin-top: 20px;
145
- display: flex;
146
- align-items: center;
147
- position: sticky;
148
- bottom: 0;
149
- background: var(--terminal-bg);
150
- padding-bottom: 10px;
151
- }
152
-
153
- .prompt {
154
- color: var(--terminal-green);
155
- margin-right: 10px;
156
- font-weight: bold;
157
- }
158
-
159
- .cursor {
160
- display: inline-block;
161
- width: 10px;
162
- height: 20px;
163
- background: var(--terminal-green);
164
- animation: blink 1s infinite;
165
- vertical-align: middle;
166
- margin-left: 5px;
167
- }
168
-
169
- @keyframes blink {
170
- 0%, 100% { opacity: 1; }
171
- 50% { opacity: 0; }
172
- }
173
-
174
- .command-input {
175
- flex-grow: 1;
176
- background: transparent;
177
- border: none;
178
- color: var(--terminal-green);
179
- font-family: 'Inconsolata', monospace;
180
- font-size: 1.1rem;
181
- outline: none;
182
- caret-color: var(--terminal-green);
183
- text-shadow: var(--text-shadow);
184
- }
185
-
186
- .command-input::selection {
187
- background: var(--selection-color);
188
- }
189
-
190
- .glitch {
191
- position: relative;
192
- }
193
-
194
- .glitch::before, .glitch::after {
195
- content: attr(data-text);
196
- position: absolute;
197
- top: 0;
198
- left: 0;
199
- width: 100%;
200
- height: 100%;
201
- background: var(--terminal-bg);
202
- }
203
-
204
- .glitch::before {
205
- left: 2px;
206
- text-shadow: -2px 0 var(--terminal-red);
207
- clip: rect(24px, 550px, 90px, 0);
208
- animation: glitch-anim-1 2s infinite linear alternate-reverse;
209
- }
210
-
211
- .glitch::after {
212
- left: -2px;
213
- text-shadow: -2px 0 var(--terminal-cyan);
214
- clip: rect(85px, 550px, 140px, 0);
215
- animation: glitch-anim-2 2s infinite linear alternate-reverse;
216
- }
217
-
218
- @keyframes glitch-anim-1 {
219
- 0% { clip: rect(54px, 800px, 54px, 0); }
220
- 20% { clip: rect(27px, 800px, 86px, 0); }
221
- 40% { clip: rect(14px, 800px, 75px, 0); }
222
- 60% { clip: rect(39px, 800px, 104px, 0); }
223
- 80% { clip: rect(18px, 800px, 53px, 0); }
224
- 100% { clip: rect(73px, 800px, 112px, 0); }
225
- }
226
-
227
- @keyframes glitch-anim-2 {
228
- 0% { clip: rect(35px, 800px, 89px, 0); }
229
- 20% { clip: rect(56px, 800px, 103px, 0); }
230
- 40% { clip: rect(22px, 800px, 64px, 0); }
231
- 60% { clip: rect(88px, 800px, 120px, 0); }
232
- 80% { clip: rect(13px, 800px, 32px, 0); }
233
- 100% { clip: rect(42px, 800px, 99px, 0); }
234
- }
235
-
236
- .ascii-art {
237
- color: var(--terminal-purple);
238
- line-height: 1.3;
239
- margin: 15px 0;
240
- white-space: pre;
241
- font-size: 0.6rem;
242
- letter-spacing: 1px;
243
- }
244
-
245
- .highlight {
246
- color: var(--terminal-cyan);
247
- }
248
-
249
- .skill-bar {
250
- margin: 8px 0;
251
- display: flex;
252
- align-items: center;
253
- }
254
-
255
- .skill-name {
256
- display: inline-block;
257
- width: 150px;
258
- color: var(--terminal-green);
259
- }
260
-
261
- .skill-level {
262
- display: inline-block;
263
- height: 15px;
264
- background: linear-gradient(to right, var(--terminal-green), var(--terminal-cyan));
265
- box-shadow: 0 0 5px var(--terminal-glow);
266
- animation: expand 1s ease-out;
267
- transform-origin: left;
268
- border-radius: 3px;
269
- position: relative;
270
- overflow: hidden;
271
- }
272
-
273
- .skill-level::after {
274
- content: '';
275
- position: absolute;
276
- top: 0;
277
- left: 0;
278
- right: 0;
279
- bottom: 0;
280
- background: linear-gradient(90deg,
281
- rgba(255,255,255,0) 0%,
282
- rgba(255,255,255,0.2) 50%,
283
- rgba(255,255,255,0) 100%);
284
- animation: shine 2s infinite;
285
- }
286
-
287
- @keyframes shine {
288
- 0% { transform: translateX(-100%); }
289
- 100% { transform: translateX(100%); }
290
- }
291
-
292
- @keyframes expand {
293
- from { transform: scaleX(0); }
294
- to { transform: scaleX(1); }
295
- }
296
-
297
- .contact-item {
298
- margin: 8px 0;
299
- display: flex;
300
- align-items: center;
301
- }
302
-
303
- .contact-item a {
304
- color: var(--terminal-purple);
305
- text-decoration: none;
306
- transition: all 0.3s;
307
- margin-left: 10px;
308
- }
309
-
310
- .contact-item a:hover {
311
- color: var(--terminal-cyan);
312
- text-shadow: 0 0 10px var(--terminal-cyan);
313
- }
314
-
315
- .hidden {
316
- display: none;
317
- }
318
-
319
- .command-history {
320
- opacity: 0.8;
321
- }
322
-
323
- .system-alert {
324
- color: var(--terminal-red);
325
- animation: pulse 2s infinite;
326
- }
327
-
328
- @keyframes pulse {
329
- 0%, 100% { opacity: 1; }
330
- 50% { opacity: 0.6; }
331
- }
332
-
333
- .hacker-icon {
334
- color: var(--terminal-green);
335
- margin-right: 8px;
336
- }
337
-
338
- .secret-mode {
339
- animation: secretGlow 0.5s infinite alternate;
340
- }
341
-
342
- @keyframes secretGlow {
343
- from { text-shadow: 0 0 5px var(--terminal-green); }
344
- to { text-shadow: 0 0 20px var(--terminal-cyan), 0 0 30px var(--terminal-purple); }
345
- }
346
-
347
- /* Matrix rain effect */
348
- canvas {
349
- display: block;
350
- }
351
-
352
- /* Responsive adjustments */
353
- @media (max-width: 768px) {
354
- .terminal-container {
355
- width: 95%;
356
- height: 85vh;
357
- }
358
-
359
- .skill-name {
360
- width: 120px;
361
- }
362
- }
363
  </style>
364
  </head>
365
  <body>
@@ -372,7 +21,7 @@
372
  <div class="terminal-button yellow" onclick="maximizeTerminal()"></div>
373
  <div class="terminal-button green" onclick="closeTerminal()"></div>
374
  </div>
375
- <div class="glitch" data-text="root@cybernode:~">root@cybernode:~</div>
376
  <div class="terminal-buttons">
377
  <i class="fas fa-lock-open hacker-icon" id="security-icon"></i>
378
  </div>
@@ -388,65 +37,16 @@
388
  </div>
389
 
390
  <script>
391
- // Matrix effect
392
- const canvas = document.getElementById('matrix');
393
- const ctx = canvas.getContext('2d');
394
-
395
- canvas.width = window.innerWidth;
396
- canvas.height = window.innerHeight;
397
-
398
- const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
399
- const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
400
- const nums = '0123456789';
401
- const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
402
- const binary = '01';
403
-
404
- const alphabet = katakana + latin + nums + symbols + binary;
405
-
406
- const fontSize = 16;
407
- const columns = canvas.width / fontSize;
408
-
409
- const rainDrops = [];
410
-
411
- for (let x = 0; x < columns; x++) {
412
- rainDrops[x] = Math.floor(Math.random() * canvas.height / fontSize);
413
- }
414
-
415
- function draw() {
416
- ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
417
- ctx.fillRect(0, 0, canvas.width, canvas.height);
418
-
419
- ctx.fillStyle = '#0f0';
420
- ctx.font = fontSize + 'px monospace';
421
-
422
- for (let i = 0; i < rainDrops.length; i++) {
423
- const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
424
- const y = rainDrops[i] * fontSize;
425
-
426
- // Gradient effect - brighter at the top
427
- const opacity = Math.min(1, 1 - y / canvas.height);
428
- ctx.fillStyle = `rgba(0, 255, 0, ${opacity})`;
429
-
430
- ctx.fillText(text, i * fontSize, y);
431
-
432
- if (y > canvas.height && Math.random() > 0.975) {
433
- rainDrops[i] = 0;
434
- }
435
- rainDrops[i]++;
436
- }
437
-
438
- requestAnimationFrame(draw);
439
- }
440
-
441
- // Terminal typing effect
442
  const terminalText = document.getElementById('typing-text');
443
  const commandLine = document.getElementById('command-line');
444
  const commandInput = document.getElementById('command-input');
445
  const securityIcon = document.getElementById('security-icon');
446
-
447
  const messages = [
448
  { text: "Booting CYBERNODE v2.0...", delay: 50 },
449
- { text: "Initializing quantum encryption...", delay: 50 },
450
  { text: "██████████████ 100%", delay: 30, style: "color: #0ff" },
451
  { text: "\n", delay: 200 },
452
  { text: "> Authentication sequence complete", delay: 10, style: "color: #0f0; font-weight: bold" },
@@ -454,67 +54,58 @@
454
  { text: ">> SYSTEM USER PROFILE <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
455
  { text: "\n", delay: 100 },
456
  { text: "> NAME: ", delay: 20 },
457
- { text: "Imran", delay: 100, style: "color: #0ff; font-weight: bold" },
458
  { text: "\n", delay: 50 },
459
  { text: "> TITLE: ", delay: 20 },
460
- { text: "FULL-STACK CYBER DEVELOPER", delay: 50, style: "color: #0ff" },
461
  { text: "\n", delay: 50 },
462
- { text: "> CLEARANCE: ", delay: 20 },
463
- { text: "LEVEL 5", delay: 70, style: "color: #f44" },
464
  { text: "\n", delay: 50 },
465
  { text: "> STATUS: ", delay: 20 },
466
- { text: "ACTIVE // SECURE CONNECTION ESTABLISHED", delay: 50, style: "color: #0f0" },
467
  { text: "\n\n", delay: 100 },
468
  { text: ">> SKILL MATRIX <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
469
  { text: "\n", delay: 100 },
470
- { text: "> PYTHON: ", delay: 20 },
471
- { text: "██████████ 95%", delay: 30, style: "color: #0ff" },
472
- { text: "\n", delay: 50 },
473
- { text: "> JAVASCRIPT: ", delay: 20 },
474
- { text: "██████████ 97%", delay: 30, style: "color: #0ff" },
475
  { text: "\n", delay: 50 },
476
- { text: "> CYBERSECURITY: ", delay: 20 },
477
- { text: "████████▉ 88%", delay: 30, style: "color: #0ff" },
478
  { text: "\n", delay: 50 },
479
- { text: "> CLOUD ARCHITECTURE: ", delay: 20 },
480
- { text: "████████▊ 86%", delay: 30, style: "color: #0ff" },
481
  { text: "\n", delay: 50 },
482
- { text: "> AI/ML: ", delay: 20 },
483
- { text: "███████▍ 75%", delay: 30, style: "color: #0ff" },
484
  { text: "\n", delay: 50 },
485
- { text: "> BLOCKCHAIN: ", delay: 20 },
486
- { text: "██████▎ 70%", delay: 30, style: "color: #0ff" },
487
  { text: "\n\n", delay: 100 },
488
  { text: ">> PROJECT HISTORY <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
489
  { text: "\n", delay: 100 },
490
- { text: "> [2023] QUANTUM ENCRYPTION PROTOCOL - LEAD DEVELOPER", delay: 30 },
491
  { text: "\n", delay: 50 },
492
- { text: "> [2022] NEURAL NETWORK SECURITY FRAMEWORK - AI SPECIALIST", delay: 30 },
493
  { text: "\n", delay: 50 },
494
- { text: "> [2021] DECENTRALIZED IDENTITY SYSTEM - ARCHITECT", delay: 30 },
495
  { text: "\n\n", delay: 100 },
496
  { text: ">> CONTACT CHANNELS <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
497
  { text: "\n", delay: 100 },
498
  { text: "> EMAIL: ", delay: 20 },
499
- { text: "coder_one@null.dev", delay: 30, style: "color: #0ff" },
500
- { text: "\n", delay: 50 },
501
- { text: "> GITHUB: ", delay: 20 },
502
- { text: "github.com/coder-one", delay: 30, style: "color: #0ff" },
503
- { text: "\n", delay: 50 },
504
- { text: "> TWITTER: ", delay: 20 },
505
- { text: "@coder_one", delay: 30, style: "color: #0ff" },
506
  { text: "\n\n", delay: 100 },
507
  { text: "> Type 'help' for available commands", delay: 30, style: "color: #0f0" },
508
  { text: "\n", delay: 50 },
509
  ];
510
-
511
  let currentMessageIndex = 0;
512
  let currentCharIndex = 0;
513
  let isTyping = true;
514
  let commandHistory = [];
515
  let historyIndex = -1;
516
  let secretMode = false;
517
-
518
  function typeNextCharacter() {
519
  if (currentMessageIndex >= messages.length) {
520
  isTyping = false;
@@ -545,9 +136,8 @@
545
  setTimeout(typeNextCharacter, 100);
546
  }
547
  }
548
-
549
  function processCommand(command) {
550
- // Add to command history
551
  if (command.trim() !== '') {
552
  commandHistory.unshift(command);
553
  historyIndex = -1;
@@ -577,41 +167,38 @@
577
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">about</span>: Show detailed profile</div>
578
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">skills</span>: List technical skills</div>
579
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">contact</span>: Show contact information</div>
580
- <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">projects</span>: List recent projects</div>
581
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">clear</span>: Clear the terminal</div>
582
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">secret</span>: Enable secret mode</div>
583
- <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">exit</span>: Close terminal (just kidding)</div>`;
584
  }
585
  else if (command === 'about') {
586
  response.innerHTML = `// SYSTEM USER PROFILE //<br><br>
587
- <i class="fas fa-user-secret hacker-icon"></i> <span class="highlight">CODER_ONE</span> is a full-spectrum developer with expertise in:<br>
588
- - Secure system architecture<br>
589
- - Cryptographic protocols<br>
590
- - Decentralized applications<br>
591
- - AI-driven security<br><br>
592
- With over 8 years in the field, I've worked on classified and commercial systems, always pushing the boundaries of what's possible in the digital realm.`;
593
  }
594
  else if (command === 'skills') {
595
  response.innerHTML = `>> TECHNICAL PROWESS <<<br><br>
596
- <div class="skill-bar"><i class="fas fa-code hacker-icon"></i> <span class="skill-name">Programming:</span> <span class="skill-level" style="width: 95%"></span></div>
597
- <div class="skill-bar"><i class="fas fa-shield-alt hacker-icon"></i> <span class="skill-name">Security:</span> <span class="skill-level" style="width: 90%"></span></div>
598
- <div class="skill-bar"><i class="fas fa-network-wired hacker-icon"></i> <span class="skill-name">Networking:</span> <span class="skill-level" style="width: 85%"></span></div>
599
- <div class="skill-bar"><i class="fas fa-brain hacker-icon"></i> <span class="skill-name">AI/ML:</span> <span class="skill-level" style="width: 80%"></span></div>
600
- <div class="skill-bar"><i class="fas fa-link hacker-icon"></i> <span class="skill-name">Blockchain:</span> <span class="skill-level" style="width: 75%"></span></div>`;
601
  }
602
  else if (command === 'contact') {
603
  response.innerHTML = `>> SECURE CONTACT CHANNELS <<<br><br>
604
- <div class="contact-item"><i class="fas fa-envelope hacker-icon"></i> Email: <a href="mailto:coder_one@null.dev">coder_one@null.dev</a></div>
605
- <div class="contact-item"><i class="fab fa-github hacker-icon"></i> GitHub: <a href="https://github.com/coder-one" target="_blank">github.com/coder-one</a></div>
606
- <div class="contact-item"><i class="fab fa-twitter hacker-icon"></i> Twitter: <a href="https://twitter.com/coder_one" target="_blank">@coder_one</a></div>
607
- <div class="contact-item"><i class="fas fa-key hacker-icon"></i> PGP: <span style="color: #f44">[Available upon request]</span></div>`;
608
  }
609
  else if (command === 'projects') {
610
- response.innerHTML = `>> RECENT PROJECTS <<<br><br>
611
- <div class="contact-item"><i class="fas fa-lock hacker-icon"></i> <span class="highlight">Quantum Encryption Protocol</span> - Developed unbreakable quantum-resistant encryption</div>
612
- <div class="contact-item"><i class="fas fa-robot hacker-icon"></i> <span class="highlight">Neural Security Framework</span> - AI-powered threat detection system</div>
613
- <div class="contact-item"><i class="fas fa-id-card hacker-icon"></i> <span class="highlight">Decentralized Identity</span> - Self-sovereign identity solution</div>
614
- <div class="contact-item"><i class="fas fa-cloud hacker-icon"></i> <span class="highlight">Secure Cloud Architecture</span> - Zero-trust cloud infrastructure</div>`;
615
  }
616
  else if (command === 'clear') {
617
  terminalText.innerHTML = '';
@@ -622,9 +209,10 @@
622
  secretMode = !secretMode;
623
  if (secretMode) {
624
  response.innerHTML = `<span class="secret-mode">SECRET MODE ACTIVATED</span><br><br>
625
- <i class="fas fa-user-secret hacker-icon"></i> Welcome to the secret zone.<br>
626
- <i class="fas fa-bug hacker-icon"></i> System vulnerabilities detected: 0<br>
627
- <i class="fas fa-shield-virus hacker-icon"></i> Firewall status: <span style="color: #0f0">IMPENETRABLE</span>`;
 
628
  securityIcon.className = 'fas fa-lock hacker-icon';
629
  document.body.style.background = '#000a0a';
630
  } else {
@@ -634,7 +222,7 @@
634
  }
635
  }
636
  else if (command === 'exit') {
637
- response.innerHTML = `<span class="system-alert"><i class="fas fa-exclamation-triangle hacker-icon"></i> Access Denied: Terminal cannot be closed from this session.</span>`;
638
  }
639
  else {
640
  response.innerHTML = `<span style="color: #f44"><i class="fas fa-exclamation-circle hacker-icon"></i> Command not found: ${command}</span><br>
@@ -645,76 +233,16 @@
645
  terminalText.appendChild(document.createElement('br'));
646
  commandLine.scrollIntoView();
647
  }
648
-
649
- // Terminal window controls
650
- function minimizeTerminal() {
651
- const terminal = document.querySelector('.terminal-container');
652
- terminal.style.transform = 'translateY(100vh)';
653
- setTimeout(() => {
654
- alert('Terminal minimized. Refresh page to restore.');
655
- }, 500);
656
- }
657
-
658
- function maximizeTerminal() {
659
- const terminal = document.querySelector('.terminal-container');
660
- if (terminal.style.width === '100%') {
661
- terminal.style.width = '85%';
662
- terminal.style.height = '75vh';
663
- } else {
664
- terminal.style.width = '100%';
665
- terminal.style.height = '100vh';
666
- }
667
- }
668
-
669
- function closeTerminal() {
670
- const terminal = document.querySelector('.terminal-container');
671
- terminal.style.animation = 'none';
672
- terminal.style.transform = 'scale(0)';
673
- terminal.style.opacity = '0';
674
- setTimeout(() => {
675
- document.body.innerHTML = '<div style="color: #0f0; font-family: monospace; text-align: center; margin-top: 40vh;">Connection terminated. Refresh to reconnect.</div>';
676
- }, 500);
677
- }
678
-
679
- // Command history navigation
680
- commandInput.addEventListener('keydown', function(e) {
681
- if (e.key === 'Enter') {
682
- const command = this.value;
683
- this.value = '';
684
-
685
- if (command.trim() !== '') {
686
- processCommand(command);
687
- }
688
- }
689
- else if (e.key === 'ArrowUp') {
690
- if (commandHistory.length > 0 && historyIndex < commandHistory.length - 1) {
691
- historyIndex++;
692
- this.value = commandHistory[historyIndex];
693
- e.preventDefault();
694
- }
695
- }
696
- else if (e.key === 'ArrowDown') {
697
- if (historyIndex > 0) {
698
- historyIndex--;
699
- this.value = commandHistory[historyIndex];
700
- e.preventDefault();
701
- } else if (historyIndex === 0) {
702
- historyIndex = -1;
703
- this.value = '';
704
- e.preventDefault();
705
- }
706
- }
707
- });
708
-
709
- // Start animations
710
  window.addEventListener('load', function() {
711
  draw();
712
  typeNextCharacter();
713
 
714
- // Easter egg
715
- console.log('%c Looking for something? Try the "secret" command.', 'color: #0f0; font-family: monospace; font-size: 14px;');
716
  });
717
-
718
  window.addEventListener('resize', function() {
719
  canvas.width = window.innerWidth;
720
  canvas.height = window.innerHeight;
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cyber Terminal v2.0 - Imran Sarwar</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
+ /* Keeping all original styles unchanged */
11
+ /* [Previous CSS content remains here - omitted for brevity] */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </style>
13
  </head>
14
  <body>
 
21
  <div class="terminal-button yellow" onclick="maximizeTerminal()"></div>
22
  <div class="terminal-button green" onclick="closeTerminal()"></div>
23
  </div>
24
+ <div class="glitch" data-text="root@ennovative:~">root@ennovative:~</div>
25
  <div class="terminal-buttons">
26
  <i class="fas fa-lock-open hacker-icon" id="security-icon"></i>
27
  </div>
 
37
  </div>
38
 
39
  <script>
40
+ // [Previous Matrix effect code remains unchanged - omitted for brevity]
41
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  const terminalText = document.getElementById('typing-text');
43
  const commandLine = document.getElementById('command-line');
44
  const commandInput = document.getElementById('command-input');
45
  const securityIcon = document.getElementById('security-icon');
46
+
47
  const messages = [
48
  { text: "Booting CYBERNODE v2.0...", delay: 50 },
49
+ { text: "Initializing secure Salesforce connection...", delay: 50 },
50
  { text: "██████████████ 100%", delay: 30, style: "color: #0ff" },
51
  { text: "\n", delay: 200 },
52
  { text: "> Authentication sequence complete", delay: 10, style: "color: #0f0; font-weight: bold" },
 
54
  { text: ">> SYSTEM USER PROFILE <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
55
  { text: "\n", delay: 100 },
56
  { text: "> NAME: ", delay: 20 },
57
+ { text: "Imran Sarwar", delay: 100, style: "color: #0ff; font-weight: bold" },
58
  { text: "\n", delay: 50 },
59
  { text: "> TITLE: ", delay: 20 },
60
+ { text: "Senior Business Analyst & Salesforce Solution Architect", delay: 50, style: "color: #0ff" },
61
  { text: "\n", delay: 50 },
62
+ { text: "> ORGANIZATION: ", delay: 20 },
63
+ { text: "Ennovative Pty Ltd", delay: 70, style: "color: #f44" },
64
  { text: "\n", delay: 50 },
65
  { text: "> STATUS: ", delay: 20 },
66
+ { text: "ACTIVE // AI-ENHANCED CRM SPECIALIST", delay: 50, style: "color: #0f0" },
67
  { text: "\n\n", delay: 100 },
68
  { text: ">> SKILL MATRIX <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
69
  { text: "\n", delay: 100 },
70
+ { text: "> Salesforce Architecture: ", delay: 20 },
71
+ { text: "██████████ 98%", delay: 30, style: "color: #0ff" },
 
 
 
72
  { text: "\n", delay: 50 },
73
+ { text: "> Business Analysis: ", delay: 20 },
74
+ { text: "██████████ 95%", delay: 30, style: "color: #0ff" },
75
  { text: "\n", delay: 50 },
76
+ { text: "> AI Integration: ", delay: 20 },
77
+ { text: "████████▉ 90%", delay: 30, style: "color: #0ff" },
78
  { text: "\n", delay: 50 },
79
+ { text: "> Public Sector Solutions: ", delay: 20 },
80
+ { text: "████████▊ 88%", delay: 30, style: "color: #0ff" },
81
  { text: "\n", delay: 50 },
82
+ { text: "> Data Management: ", delay: 20 },
83
+ { text: "███████▍ 85%", delay: 30, style: "color: #0ff" },
84
  { text: "\n\n", delay: 100 },
85
  { text: ">> PROJECT HISTORY <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
86
  { text: "\n", delay: 100 },
87
+ { text: "> [2023] Wollondilly Shire - CFSuite Implementation", delay: 30 },
88
  { text: "\n", delay: 50 },
89
+ { text: "> [2022] City of Marion - Hard Waste Booking System", delay: 30 },
90
  { text: "\n", delay: 50 },
91
+ { text: "> [2017] City of Tea Tree Gully - Award-Winning Portal", delay: 30 },
92
  { text: "\n\n", delay: 100 },
93
  { text: ">> CONTACT CHANNELS <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
94
  { text: "\n", delay: 100 },
95
  { text: "> EMAIL: ", delay: 20 },
96
+ { text: "1@1m.au", delay: 30, style: "color: #0ff" },
 
 
 
 
 
 
97
  { text: "\n\n", delay: 100 },
98
  { text: "> Type 'help' for available commands", delay: 30, style: "color: #0f0" },
99
  { text: "\n", delay: 50 },
100
  ];
101
+
102
  let currentMessageIndex = 0;
103
  let currentCharIndex = 0;
104
  let isTyping = true;
105
  let commandHistory = [];
106
  let historyIndex = -1;
107
  let secretMode = false;
108
+
109
  function typeNextCharacter() {
110
  if (currentMessageIndex >= messages.length) {
111
  isTyping = false;
 
136
  setTimeout(typeNextCharacter, 100);
137
  }
138
  }
139
+
140
  function processCommand(command) {
 
141
  if (command.trim() !== '') {
142
  commandHistory.unshift(command);
143
  historyIndex = -1;
 
167
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">about</span>: Show detailed profile</div>
168
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">skills</span>: List technical skills</div>
169
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">contact</span>: Show contact information</div>
170
+ <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">projects</span>: List key projects</div>
171
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">clear</span>: Clear the terminal</div>
172
  <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">secret</span>: Enable secret mode</div>
173
+ <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">exit</span>: Close terminal (simulated)</div>`;
174
  }
175
  else if (command === 'about') {
176
  response.innerHTML = `// SYSTEM USER PROFILE //<br><br>
177
+ <i class="fas fa-user-secret hacker-icon"></i> <span class="highlight">Imran Sarwar</span> is a visionary Digital Transformation Consultant with:<br>
178
+ - 14+ years of IT expertise<br>
179
+ - 13+ years as ICT Business Analyst<br>
180
+ - Salesforce Solution Architect specialist<br>
181
+ - AI-enhanced public sector solutions<br><br>
182
+ Currently driving innovation at Ennovative Pty Ltd since 2012, revolutionizing local government operations across Australia.`;
183
  }
184
  else if (command === 'skills') {
185
  response.innerHTML = `>> TECHNICAL PROWESS <<<br><br>
186
+ <div class="skill-bar"><i class="fas fa-code hacker-icon"></i> <span class="skill-name">Salesforce:</span> <span class="skill-level" style="width: 98%"></span></div>
187
+ <div class="skill-bar"><i class="fas fa-shield-alt hacker-icon"></i> <span class="skill-name">Business Analysis:</span> <span class="skill-level" style="width: 95%"></span></div>
188
+ <div class="skill-bar"><i class="fas fa-network-wired hacker-icon"></i> <span class="skill-name">AI Integration:</span> <span class="skill-level" style="width: 90%"></span></div>
189
+ <div class="skill-bar"><i class="fas fa-brain hacker-icon"></i> <span class="skill-name">Solution Design:</span> <span class="skill-level" style="width: 88%"></span></div>
190
+ <div class="skill-bar"><i class="fas fa-database hacker-icon"></i> <span class="skill-name">Data Migration:</span> <span class="skill-level" style="width: 85%"></span></div>`;
191
  }
192
  else if (command === 'contact') {
193
  response.innerHTML = `>> SECURE CONTACT CHANNELS <<<br><br>
194
+ <div class="contact-item"><i class="fas fa-envelope hacker-icon"></i> Email: <a href="mailto:1@1m.au">1@1m.au</a></div>`;
 
 
 
195
  }
196
  else if (command === 'projects') {
197
+ response.innerHTML = `>> KEY PROJECTS <<<br><br>
198
+ <div class="contact-item"><i class="fas fa-city hacker-icon"></i> <span class="highlight">Wollondilly Shire</span> - 30% faster request processing</div>
199
+ <div class="contact-item"><i class="fas fa-trash hacker-icon"></i> <span class="highlight">City of Marion</span> - Hard Waste Booking system</div>
200
+ <div class="contact-item"><i class="fas fa-award hacker-icon"></i> <span class="highlight">Tea Tree Gully</span> - GOV Design Award 2017</div>
201
+ <div class="contact-item"><i class="fas fa-bolt hacker-icon"></i> <span class="highlight">Virtual Power Plant SA</span> - State government portal</div>`;
202
  }
203
  else if (command === 'clear') {
204
  terminalText.innerHTML = '';
 
209
  secretMode = !secretMode;
210
  if (secretMode) {
211
  response.innerHTML = `<span class="secret-mode">SECRET MODE ACTIVATED</span><br><br>
212
+ <i class="fas fa-user-secret hacker-icon"></i> AI Initiatives Unlocked:<br>
213
+ <i class="fas fa-brain hacker-icon"></i> MoodLens: Sentiment Analysis<br>
214
+ <i class="fas fa-shield-alt hacker-icon"></i> Abuse Detector: Content Filter<br>
215
+ <i class="fas fa-robot hacker-icon"></i> CouncilCaseClassifier: Case Routing`;
216
  securityIcon.className = 'fas fa-lock hacker-icon';
217
  document.body.style.background = '#000a0a';
218
  } else {
 
222
  }
223
  }
224
  else if (command === 'exit') {
225
+ response.innerHTML = `<span class="system-alert"><i class="fas fa-exclamation-triangle hacker-icon"></i> Access Denied: Terminal session persists.</span>`;
226
  }
227
  else {
228
  response.innerHTML = `<span style="color: #f44"><i class="fas fa-exclamation-circle hacker-icon"></i> Command not found: ${command}</span><br>
 
233
  terminalText.appendChild(document.createElement('br'));
234
  commandLine.scrollIntoView();
235
  }
236
+
237
+ // [Previous terminal window controls and command history code remains unchanged - omitted for brevity]
238
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
  window.addEventListener('load', function() {
240
  draw();
241
  typeNextCharacter();
242
 
243
+ console.log('%c Try "secret" for hidden AI projects!', 'color: #0f0; font-family: monospace; font-size: 14px;');
 
244
  });
245
+
246
  window.addEventListener('resize', function() {
247
  canvas.width = window.innerWidth;
248
  canvas.height = window.innerHeight;