Hugging Face's logo

Spaces:
themurat
/
jarvis
Running

App Files Community
themurat commited on
Commit
56e1855
·
verified ·
1 Parent(s): 2155b49

ironman filmindeki JARVIS yapay zeka sına benzer bir UI tasarlamanı istiyorum hacker tarzı bilgi akan ekranlar vs ekleyebilirsin - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +402 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Jarvis
3
- emoji: 🌍
4
- colorFrom: purple
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: jarvis
3
+ emoji: 🐳
4
+ colorFrom: pink
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,402 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>JARVIS AI Interface</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=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;500&display=swap');
11
+
12
+ body {
13
+ font-family: 'Roboto Mono', monospace;
14
+ background-color: #0a0a0a;
15
+ color: #00ff41;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .hacker-text {
20
+ font-family: 'Roboto Mono', monospace;
21
+ color: #00ff41;
22
+ text-shadow: 0 0 5px #00ff41;
23
+ }
24
+
25
+ .jarvis-pulse {
26
+ animation: pulse 2s infinite;
27
+ }
28
+
29
+ @keyframes pulse {
30
+ 0% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7); }
31
+ 70% { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); }
32
+ 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); }
33
+ }
34
+
35
+ .data-stream {
36
+ position: relative;
37
+ overflow: hidden;
38
+ }
39
+
40
+ .data-stream::before {
41
+ content: "";
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ background: linear-gradient(transparent 0%, rgba(0, 255, 65, 0.1) 50%, transparent 100%);
48
+ animation: stream 5s linear infinite;
49
+ }
50
+
51
+ @keyframes stream {
52
+ 0% { transform: translateY(-100%); }
53
+ 100% { transform: translateY(100%); }
54
+ }
55
+
56
+ .code-line {
57
+ animation: typing 3s steps(40) 1s 1 normal both;
58
+ white-space: nowrap;
59
+ overflow: hidden;
60
+ }
61
+
62
+ @keyframes typing {
63
+ from { width: 0 }
64
+ to { width: 100% }
65
+ }
66
+
67
+ .glow {
68
+ text-shadow: 0 0 8px #00ff41;
69
+ }
70
+
71
+ .terminal-cursor {
72
+ animation: blink 1s step-end infinite;
73
+ }
74
+
75
+ @keyframes blink {
76
+ from, to { opacity: 1 }
77
+ 50% { opacity: 0 }
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="min-h-screen bg-black">
82
+ <div class="container mx-auto px-4 py-8">
83
+ <!-- Header Section -->
84
+ <header class="flex flex-col md:flex-row justify-between items-center mb-8 border-b border-green-500 pb-4">
85
+ <div class="flex items-center mb-4 md:mb-0">
86
+ <div class="w-16 h-16 rounded-full bg-black border-2 border-green-500 flex items-center justify-center jarvis-pulse mr-4">
87
+ <i class="fas fa-robot text-3xl text-green-500"></i>
88
+ </div>
89
+ <div>
90
+ <h1 class="text-3xl md:text-4xl font-bold hacker-text glow">J.A.R.V.I.S.</h1>
91
+ <p class="text-sm text-green-300">Just A Rather Very Intelligent System</p>
92
+ </div>
93
+ </div>
94
+ <div class="flex space-x-4">
95
+ <div class="text-center">
96
+ <p class="text-green-300">STATUS</p>
97
+ <p class="text-green-500 font-bold">ONLINE</p>
98
+ </div>
99
+ <div class="text-center">
100
+ <p class="text-green-300">VERSION</p>
101
+ <p class="text-green-500 font-bold">4.2.7</p>
102
+ </div>
103
+ <div class="text-center">
104
+ <p class="text-green-300">POWER</p>
105
+ <p class="text-green-500 font-bold">98%</p>
106
+ </div>
107
+ </div>
108
+ </header>
109
+
110
+ <!-- Main Content -->
111
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
112
+ <!-- Left Panel - Command Interface -->
113
+ <div class="lg:col-span-2 bg-black bg-opacity-50 border border-green-500 rounded-lg p-6">
114
+ <div class="flex items-center mb-4">
115
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
116
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
117
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div>
118
+ <p class="text-green-400">TERMINAL_INTERFACE</p>
119
+ </div>
120
+
121
+ <div class="data-stream bg-black p-4 rounded mb-6 h-48 overflow-y-auto">
122
+ <p class="text-green-400 mb-2">> Initializing J.A.R.V.I.S. systems...</p>
123
+ <p class="text-green-400 mb-2">> Checking security protocols...</p>
124
+ <p class="text-green-400 mb-2">> Connecting to Stark Industries network...</p>
125
+ <p class="text-green-400 mb-2">> Scanning global threat assessment...</p>
126
+ <p class="text-green-400 mb-2">> Analyzing environmental data...</p>
127
+ <p class="text-green-400 mb-2">> Synchronizing with Iron Man armor systems...</p>
128
+ <p class="text-green-400 mb-2">> Establishing satellite uplink...</p>
129
+ <p class="text-green-400 mb-2">> All systems nominal. Ready for commands.</p>
130
+ <p class="text-green-400 mb-2">> <span class="terminal-cursor">|</span></p>
131
+ </div>
132
+
133
+ <div class="flex items-center">
134
+ <span class="text-green-500 mr-2">JARVIS></span>
135
+ <input type="text" class="flex-grow bg-transparent border-b border-green-500 text-green-400 outline-none hacker-text" placeholder="Enter command...">
136
+ <button class="ml-4 px-4 py-2 bg-green-500 bg-opacity-20 border border-green-500 text-green-400 rounded hover:bg-opacity-40 transition">
137
+ <i class="fas fa-paper-plane"></i>
138
+ </button>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Right Panel - Status -->
143
+ <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-6">
144
+ <h2 class="text-xl font-bold hacker-text mb-4 flex items-center">
145
+ <i class="fas fa-chart-line mr-2"></i> SYSTEM STATUS
146
+ </h2>
147
+
148
+ <div class="space-y-4">
149
+ <div>
150
+ <div class="flex justify-between mb-1">
151
+ <span class="text-green-300">CPU Usage</span>
152
+ <span class="text-green-500">78%</span>
153
+ </div>
154
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
155
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 78%"></div>
156
+ </div>
157
+ </div>
158
+
159
+ <div>
160
+ <div class="flex justify-between mb-1">
161
+ <span class="text-green-300">Memory Allocation</span>
162
+ <span class="text-green-500">64%</span>
163
+ </div>
164
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
165
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 64%"></div>
166
+ </div>
167
+ </div>
168
+
169
+ <div>
170
+ <div class="flex justify-between mb-1">
171
+ <span class="text-green-300">Network Bandwidth</span>
172
+ <span class="text-green-500">42%</span>
173
+ </div>
174
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
175
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 42%"></div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="mt-6">
180
+ <h3 class="text-lg font-bold hacker-text mb-2">ACTIVE SYSTEMS</h3>
181
+ <ul class="space-y-2">
182
+ <li class="flex items-center">
183
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
184
+ <span class="text-green-400">Weapons Systems</span>
185
+ </li>
186
+ <li class="flex items-center">
187
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
188
+ <span class="text-green-400">Flight Navigation</span>
189
+ </li>
190
+ <li class="flex items-center">
191
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
192
+ <span class="text-green-400">Life Support</span>
193
+ </li>
194
+ <li class="flex items-center">
195
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
196
+ <span class="text-green-400">Defense Protocols</span>
197
+ </li>
198
+ </ul>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Data Streams Section -->
205
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
206
+ <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-4 data-stream">
207
+ <h3 class="text-lg font-bold hacker-text mb-2 flex items-center">
208
+ <i class="fas fa-satellite-dish mr-2"></i> NETWORK TRAFFIC
209
+ </h3>
210
+ <div class="h-40 overflow-hidden">
211
+ <p class="text-green-400 text-sm code-line">> Packet received from 192.168.1.105</p>
212
+ <p class="text-green-400 text-sm code-line">> Establishing secure connection to Stark HQ</p>
213
+ <p class="text-green-400 text-sm code-line">> Uploading diagnostics (3.7MB/s)</p>
214
+ <p class="text-green-400 text-sm code-line">> Scanning for intrusions...</p>
215
+ <p class="text-green-400 text-sm code-line">> Firewall active - no threats detected</p>
216
+ <p class="text-green-400 text-sm code-line">> Bandwidth utilization: 340Mbps</p>
217
+ <p class="text-green-400 text-sm code-line">> Latency: 12ms</p>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-4 data-stream">
222
+ <h3 class="text-lg font-bold hacker-text mb-2 flex items-center">
223
+ <i class="fas fa-shield-alt mr-2"></i> SECURITY ALERTS
224
+ </h3>
225
+ <div class="h-40 overflow-hidden">
226
+ <p class="text-green-400 text-sm code-line">> Running deep system scan...</p>
227
+ <p class="text-green-400 text-sm code-line">> 0 critical vulnerabilities found</p>
228
+ <p class="text-green-400 text-sm code-line">> 3 low priority updates available</p>
229
+ <p class="text-green-400 text-sm code-line">> Encryption protocols active</p>
230
+ <p class="text-green-400 text-sm code-line">> Biometric authentication required</p>
231
+ <p class="text-green-400 text-sm code-line">> Unauthorized access attempt blocked</p>
232
+ <p class="text-green-400 text-sm code-line">> Security level: MAXIMUM</p>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-4 data-stream">
237
+ <h3 class="text-lg font-bold hacker-text mb-2 flex items-center">
238
+ <i class="fas fa-microchip mr-2"></i> ARMOR SYSTEMS
239
+ </h3>
240
+ <div class="h-40 overflow-hidden">
241
+ <p class="text-green-400 text-sm code-line">> Mark XLII systems online</p>
242
+ <p class="text-green-400 text-sm code-line">> Power core at 97% capacity</p>
243
+ <p class="text-green-400 text-sm code-line">> Repulsors charged and ready</p>
244
+ <p class="text-green-400 text-sm code-line">> Flight systems nominal</p>
245
+ <p class="text-green-400 text-sm code-line">> Weapon systems armed</p>
246
+ <p class="text-green-400 text-sm code-line">> Life support functioning optimally</p>
247
+ <p class="text-green-400 text-sm code-line">> All systems green</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Voice Interface -->
253
+ <div class="mt-8 bg-black bg-opacity-50 border border-green-500 rounded-lg p-6">
254
+ <h2 class="text-xl font-bold hacker-text mb-4 flex items-center">
255
+ <i class="fas fa-microphone mr-2"></i> VOICE INTERFACE
256
+ </h2>
257
+
258
+ <div class="flex flex-col md:flex-row items-center">
259
+ <div class="relative mb-4 md:mb-0 md:mr-6">
260
+ <div class="w-32 h-32 rounded-full border-4 border-green-500 flex items-center justify-center">
261
+ <div class="w-24 h-24 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center">
262
+ <i class="fas fa-microphone text-3xl text-green-500"></i>
263
+ </div>
264
+ </div>
265
+ <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-green-900 text-green-300 px-3 py-1 rounded-full text-xs">
266
+ LISTENING
267
+ </div>
268
+ </div>
269
+
270
+ <div class="flex-grow">
271
+ <div class="bg-black p-4 rounded mb-4 h-24 overflow-y-auto">
272
+ <p class="text-green-400">> Ready for voice commands, Sir.</p>
273
+ <p class="text-green-400">> Current recognition accuracy: 98.7%</p>
274
+ </div>
275
+
276
+ <div class="flex space-x-4">
277
+ <button class="flex-grow px-4 py-2 bg-green-500 bg-opacity-20 border border-green-500 text-green-400 rounded hover:bg-opacity-40 transition flex items-center justify-center">
278
+ <i class="fas fa-comment mr-2"></i> Text Input
279
+ </button>
280
+ <button class="flex-grow px-4 py-2 bg-green-500 bg-opacity-20 border border-green-500 text-green-400 rounded hover:bg-opacity-40 transition flex items-center justify-center">
281
+ <i class="fas fa-microphone mr-2"></i> Voice Command
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <script>
290
+ // Simulate data stream updates
291
+ function updateDataStreams() {
292
+ const streams = document.querySelectorAll('.data-stream');
293
+ const messages = [
294
+ "> Analyzing satellite imagery...",
295
+ "> Calculating optimal flight path...",
296
+ "> Monitoring global news feeds...",
297
+ "> Updating threat database...",
298
+ "> Synchronizing with Stark Industries mainframe...",
299
+ "> Running diagnostics on repulsor tech...",
300
+ "> Scanning for life signs...",
301
+ "> Adjusting environmental controls...",
302
+ "> Optimizing energy consumption...",
303
+ "> Checking weather patterns...",
304
+ "> Verifying biometric data...",
305
+ "> Encrypting sensitive communications..."
306
+ ];
307
+
308
+ streams.forEach(stream => {
309
+ const randomMessage = messages[Math.floor(Math.random() * messages.length)];
310
+ const newLine = document.createElement('p');
311
+ newLine.className = 'text-green-400 text-sm';
312
+ newLine.textContent = randomMessage;
313
+
314
+ if(stream.scrollHeight - stream.scrollTop === stream.clientHeight) {
315
+ stream.scrollTop = stream.scrollHeight;
316
+ }
317
+
318
+ stream.appendChild(newLine);
319
+
320
+ // Keep only last 10 lines
321
+ if(stream.children.length > 10) {
322
+ stream.removeChild(stream.children[0]);
323
+ }
324
+ });
325
+
326
+ // Update status numbers randomly
327
+ document.querySelectorAll('.text-green-500.font-bold').forEach(el => {
328
+ if(el.textContent.includes('%')) {
329
+ const current = parseInt(el.textContent);
330
+ const change = Math.floor(Math.random() * 5) - 2; // -2 to +2
331
+ const newVal = Math.min(100, Math.max(0, current + change));
332
+ el.textContent = newVal + '%';
333
+
334
+ // Update progress bar width
335
+ if(el.parentElement.previousElementSibling && el.parentElement.previousElementSibling.querySelector('.bg-green-500')) {
336
+ const progressBar = el.parentElement.previousElementSibling.querySelector('.bg-green-500');
337
+ progressBar.style.width = newVal + '%';
338
+ }
339
+ }
340
+ });
341
+ }
342
+
343
+ // Update every 2-5 seconds
344
+ setInterval(updateDataStreams, Math.random() * 3000 + 2000);
345
+
346
+ // Initial update
347
+ updateDataStreams();
348
+
349
+ // Simulate typing effect
350
+ document.addEventListener('DOMContentLoaded', () => {
351
+ const terminalInput = document.querySelector('input[type="text"]');
352
+ const commands = [
353
+ "run diagnostics",
354
+ "scan perimeter",
355
+ "activate defense protocols",
356
+ "calculate trajectory",
357
+ "initiate launch sequence",
358
+ "access satellite feed",
359
+ "run facial recognition",
360
+ "analyze threat level"
361
+ ];
362
+
363
+ let currentCommand = 0;
364
+ let typing = false;
365
+
366
+ function typeCommand() {
367
+ if(typing) return;
368
+
369
+ typing = true;
370
+ terminalInput.placeholder = '';
371
+ const command = commands[currentCommand];
372
+ let i = 0;
373
+
374
+ const typeInterval = setInterval(() => {
375
+ terminalInput.placeholder = command.substring(0, i);
376
+ i++;
377
+
378
+ if(i > command.length) {
379
+ clearInterval(typeInterval);
380
+
381
+ setTimeout(() => {
382
+ const deleteInterval = setInterval(() => {
383
+ terminalInput.placeholder = command.substring(0, i);
384
+ i--;
385
+
386
+ if(i < 0) {
387
+ clearInterval(deleteInterval);
388
+ typing = false;
389
+ currentCommand = (currentCommand + 1) % commands.length;
390
+ setTimeout(typeCommand, 1000);
391
+ }
392
+ }, 50);
393
+ }, 2000);
394
+ }
395
+ }, 100);
396
+ }
397
+
398
+ typeCommand();
399
+ });
400
+ </script>
401
+ <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=themurat/jarvis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
402
+ </html>