Hugging Face's logo

Spaces:
Firebred45
/
hacker-mode-simulator
Running

App Files Community
1
Firebred45 commited on
Commit
cb4f2a4
Β·
verified Β·
1 Parent(s): d8335fc

it shouldn't be a hacker terminal make it look like I'm coding and creating a basic AI tool

Browse files
Files changed (3) hide show
  1. index.html +48 -43
  2. script.js +17 -18
  3. style.css +2 -3
index.html CHANGED
@@ -3,8 +3,8 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Hacker Mode Simulator</title>
7
- <link rel="stylesheet" href="style.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
@@ -13,70 +13,75 @@
13
  theme: {
14
  extend: {
15
  colors: {
16
- matrix: {
17
- 50: '#e8f5e9',
18
- 100: '#c8e6c9',
19
- 200: '#a5d6a7',
20
- 300: '#81c784',
21
- 400: '#66bb6a',
22
- 500: '#4caf50',
23
- 600: '#43a047',
24
- 700: '#388e3c',
25
- 800: '#2e7d32',
26
- 900: '#1b5e20',
27
  }
28
  }
29
  }
30
  }
31
  }
32
- </script>
33
  </head>
34
- <body class="bg-black text-matrix-400 font-mono overflow-hidden">
35
  <div class="container mx-auto px-4 h-screen flex flex-col">
36
- <!-- Terminal Header -->
37
- <div class="flex items-center justify-between bg-matrix-900 p-2 rounded-t-lg border-b border-matrix-700">
38
  <div class="flex items-center space-x-2">
39
  <div class="w-3 h-3 rounded-full bg-red-500"></div>
40
  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
41
  <div class="w-3 h-3 rounded-full bg-green-500"></div>
42
  </div>
43
- <div class="text-sm">hacker@terminal:~</div>
44
- <div class="w-6"></div>
 
 
 
 
45
  </div>
46
 
47
- <!-- Terminal Body -->
48
- <div class="flex-grow bg-matrix-950 p-4 overflow-y-auto terminal-content">
49
  <div class="typing-animation">
50
- <p class="text-matrix-300 mb-4">$ sudo rm -rf /* --no-preserve-root</p>
51
- <p class="text-matrix-300 mb-4">Accessing root filesystem...</p>
52
- <p class="text-matrix-300 mb-4">Bypassing security protocols...</p>
53
- <p class="text-matrix-300 mb-4">Establishing connection to mainframe...</p>
54
- <p class="text-matrix-300 mb-4">Injecting payload...</p>
55
- <p class="text-matrix-300 mb-4">Compromising firewall...</p>
56
- <p class="text-matrix-300 mb-4">Decrypting encrypted files...</p>
57
- <p class="text-matrix-300 mb-4">Overriding system permissions...</p>
58
- <p class="text-matrix-300 mb-4">Executing zero-day exploit...</p>
59
- <p class="text-matrix-300 mb-4">Establishing backdoor access...</p>
60
- <p class="text-matrix-300 mb-4">Covering tracks...</p>
61
- <p class="text-matrix-300 mb-4">System compromised successfully.</p>
62
- <p class="text-matrix-300 mb-4">$ <span class="cursor-blink">β–ˆ</span></p>
 
63
  </div>
64
  </div>
65
 
66
- <!-- Fake Status Bar -->
67
- <div class="bg-matrix-900 p-2 text-xs flex justify-between items-center rounded-b-lg">
68
  <div class="flex space-x-4">
69
- <span>SSH: active</span>
70
- <span>ROOT: enabled</span>
71
- <span>ENCRYPTION: AES-256</span>
72
  </div>
73
  <div class="flex space-x-4">
74
- <span>CPU: 98%</span>
75
- <span>MEM: 87%</span>
76
- <span>CONN: 127.0.0.1</span>
77
  </div>
78
  </div>
79
- </div>
80
 
81
  <script src="script.js"></script>
82
  <script>feather.replace();</script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Development Terminal</title>
7
+ <link rel="stylesheet" href="style.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
 
13
  theme: {
14
  extend: {
15
  colors: {
16
+ blue: {
17
+ 50: '#f0f9ff',
18
+ 100: '#e0f2fe',
19
+ 200: '#bae6fd',
20
+ 300: '#7dd3fc',
21
+ 400: '#38bdf8',
22
+ 500: '#0ea5e9',
23
+ 600: '#0284c7',
24
+ 700: '#0369a1',
25
+ 800: '#075985',
26
+ 900: '#0c4a6e',
27
  }
28
  }
29
  }
30
  }
31
  }
32
+ </script>
33
  </head>
34
+ <body class="bg-gray-900 text-blue-400 font-mono overflow-hidden">
35
  <div class="container mx-auto px-4 h-screen flex flex-col">
36
+ <!-- IDE Header -->
37
+ <div class="flex items-center justify-between bg-gray-800 p-2 rounded-t-lg border-b border-gray-700">
38
  <div class="flex items-center space-x-2">
39
  <div class="w-3 h-3 rounded-full bg-red-500"></div>
40
  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
41
  <div class="w-3 h-3 rounded-full bg-green-500"></div>
42
  </div>
43
+ <div class="text-sm">dev@ai-tool:~/project</div>
44
+ <div class="flex space-x-4 text-xs">
45
+ <span>main.py</span>
46
+ <span>app.py</span>
47
+ <span>README.md</span>
48
+ </div>
49
  </div>
50
 
51
+ <!-- IDE Body -->
52
+ <div class="flex-grow bg-gray-950 p-4 overflow-y-auto terminal-content">
53
  <div class="typing-animation">
54
+ <p class="text-blue-300 mb-4">$ git init</p>
55
+ <p class="text-blue-300 mb-4">Initialized empty Git repository</p>
56
+ <p class="text-blue-300 mb-4">$ pip install numpy pandas tensorflow</p>
57
+ <p class="text-blue-300 mb-4">Installing dependencies...</p>
58
+ <p class="text-blue-300 mb-4">$ python main.py --train-model</p>
59
+ <p class="text-blue-300 mb-4">Loading training data...</p>
60
+ <p class="text-blue-300 mb-4">Preprocessing 10,000 samples...</p>
61
+ <p class="text-blue-300 mb-4">Training neural network (epoch 1/10)...</p>
62
+ <p class="text-blue-300 mb-4">Accuracy: 92.4%</p>
63
+ <p class="text-blue-300 mb-4">$ python app.py</p>
64
+ <p class="text-blue-300 mb-4">Starting AI service on http://localhost:5000</p>
65
+ <p class="text-blue-300 mb-4">API endpoints ready:</p>
66
+ <p class="text-blue-300 mb-4">POST /predict - Accepts JSON input</p>
67
+ <p class="text-blue-300 mb-4">$ <span class="cursor-blink">β–ˆ</span></p>
68
  </div>
69
  </div>
70
 
71
+ <!-- Status Bar -->
72
+ <div class="bg-gray-800 p-2 text-xs flex justify-between items-center rounded-b-lg">
73
  <div class="flex space-x-4">
74
+ <span>Python 3.9.7</span>
75
+ <span>TensorFlow 2.8.0</span>
76
+ <span>Git: main</span>
77
  </div>
78
  <div class="flex space-x-4">
79
+ <span>CPU: 45%</span>
80
+ <span>GPU: NVIDIA RTX 3090</span>
81
+ <span>PORT: 5000</span>
82
  </div>
83
  </div>
84
+ </div>
85
 
86
  <script src="script.js"></script>
87
  <script>feather.replace();</script>
script.js CHANGED
@@ -8,9 +8,8 @@ document.addEventListener('DOMContentLoaded', function() {
8
  const ctx = canvas.getContext('2d');
9
  canvas.width = window.innerWidth;
10
  canvas.height = window.innerHeight;
11
-
12
- const characters = "01をむウエγ‚ͺγ‚«γ‚­γ‚―γ‚±γ‚³γ‚΅γ‚·γ‚Ήγ‚»γ‚½γ‚Ώγƒγƒ„γƒ†γƒˆγƒŠγƒ‹γƒŒγƒγƒŽγƒγƒ’γƒ•γƒ˜γƒ›γƒžγƒŸγƒ γƒ‘γƒ’γƒ€γƒ¦γƒ¨γƒ©γƒͺルレロワヲン";
13
- const fontSize = 14;
14
  const columns = canvas.width / fontSize;
15
  const drops = [];
16
 
@@ -21,9 +20,8 @@ document.addEventListener('DOMContentLoaded', function() {
21
  function draw() {
22
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
23
  ctx.fillRect(0, 0, canvas.width, canvas.height);
24
-
25
- ctx.fillStyle = '#4caf50';
26
- ctx.font = fontSize + 'px monospace';
27
 
28
  for (let i = 0; i < drops.length; i++) {
29
  const text = characters.charAt(Math.floor(Math.random() * characters.length));
@@ -61,19 +59,20 @@ document.addEventListener('DOMContentLoaded', function() {
61
  setTimeout(() => {
62
  const terminal = document.querySelector('.typing-animation');
63
  const commands = [
64
- "$ scanning network...",
65
- "$ found 23 vulnerable hosts",
66
- "$ launching brute force attack...",
67
- "$ credentials acquired: admin:password123",
68
- "$ escalating privileges...",
69
- "$ root access obtained",
70
- "$ downloading sensitive data...",
71
- "$ wiping logs...",
72
- "$ planting false evidence...",
73
- "$ mission complete"
 
 
74
  ];
75
-
76
- let delay = 25000; // Start after initial animation
77
 
78
  commands.forEach(cmd => {
79
  setTimeout(() => {
 
8
  const ctx = canvas.getContext('2d');
9
  canvas.width = window.innerWidth;
10
  canvas.height = window.innerHeight;
11
+ const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
12
+ const fontSize = 14;
 
13
  const columns = canvas.width / fontSize;
14
  const drops = [];
15
 
 
20
  function draw() {
21
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
22
  ctx.fillRect(0, 0, canvas.width, canvas.height);
23
+ ctx.fillStyle = '#0ea5e9';
24
+ ctx.font = fontSize + 'px monospace';
 
25
 
26
  for (let i = 0; i < drops.length; i++) {
27
  const text = characters.charAt(Math.floor(Math.random() * characters.length));
 
59
  setTimeout(() => {
60
  const terminal = document.querySelector('.typing-animation');
61
  const commands = [
62
+ "$ git add .",
63
+ "$ git commit -m 'Add model training script'",
64
+ "$ python test.py",
65
+ "Running unit tests...",
66
+ "12 tests passed",
67
+ "$ tensorboard --logdir=logs",
68
+ "TensorBoard running at http://localhost:6006",
69
+ "$ docker build -t ai-tool .",
70
+ "Building Docker image...",
71
+ "Successfully built 1a2b3c4d5e6f",
72
+ "$ docker run -p 5000:5000 ai-tool",
73
+ "AI service started successfully"
74
  ];
75
+ let delay = 25000; // Start after initial animation
 
76
 
77
  commands.forEach(cmd => {
78
  setTimeout(() => {
style.css CHANGED
@@ -4,10 +4,9 @@ body {
4
  font-family: 'Source Code Pro', monospace;
5
  background-color: #000;
6
  }
7
-
8
  .terminal-content {
9
- background-image: radial-gradient(rgba(76, 175, 80, 0.1) 1px, transparent 1px);
10
- background-size: 20px 20px;
11
  }
12
 
13
  .cursor-blink {
 
4
  font-family: 'Source Code Pro', monospace;
5
  background-color: #000;
6
  }
 
7
  .terminal-content {
8
+ background-image: radial-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px);
9
+ background-size: 20px 20px;
10
  }
11
 
12
  .cursor-blink {