Hugging Face's logo

Spaces:
matthewspring
/
anycoder-4e936cc2
Running

App Files Community
matthewspring commited on
Commit
35fe273
·
verified ·
1 Parent(s): 453a8fc

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +551 -19
index.html CHANGED
@@ -1,19 +1,551 @@
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>Build Status Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ fontFamily: {
15
+ sans: ['Inter', 'sans-serif'],
16
+ mono: ['JetBrains Mono', 'monospace'],
17
+ },
18
+ animation: {
19
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
20
+ 'float': 'float 6s ease-in-out infinite',
21
+ 'slide-in': 'slideIn 0.5s ease-out',
22
+ },
23
+ keyframes: {
24
+ float: {
25
+ '0%, 100%': { transform: 'translateY(0)' },
26
+ '50%': { transform: 'translateY(-20px)' },
27
+ },
28
+ slideIn: {
29
+ '0%': { transform: 'translateY(20px)', opacity: '0' },
30
+ '100%': { transform: 'translateY(0)', opacity: '1' },
31
+ }
32
+ }
33
+ }
34
+ }
35
+ }
36
+ </script>
37
+ <style>
38
+ .glass {
39
+ background: rgba(17, 24, 39, 0.7);
40
+ backdrop-filter: blur(10px);
41
+ border: 1px solid rgba(255, 255, 255, 0.1);
42
+ }
43
+ .gradient-text {
44
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
45
+ -webkit-background-clip: text;
46
+ -webkit-text-fill-color: transparent;
47
+ }
48
+ .status-dot {
49
+ box-shadow: 0 0 20px currentColor;
50
+ }
51
+ .card-hover {
52
+ transition: all 0.3s ease;
53
+ }
54
+ .card-hover:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 20px 40px rgba(0,0,0,0.3);
57
+ }
58
+ /* Custom scrollbar */
59
+ ::-webkit-scrollbar {
60
+ width: 8px;
61
+ height: 8px;
62
+ }
63
+ ::-webkit-scrollbar-track {
64
+ background: #1a1a1a;
65
+ }
66
+ ::-webkit-scrollbar-thumb {
67
+ background: #4a4a4a;
68
+ border-radius: 4px;
69
+ }
70
+ ::-webkit-scrollbar-thumb:hover {
71
+ background: #666;
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-gray-900 text-white min-h-screen overflow-x-hidden">
76
+ <!-- Animated Background -->
77
+ <div class="fixed inset-0 overflow-hidden pointer-events-none">
78
+ <div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl animate-float"></div>
79
+ <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl animate-float" style="animation-delay: 3s;"></div>
80
+ <div class="absolute top-1/2 left-1/2 w-96 h-96 bg-pink-600/10 rounded-full blur-3xl animate-float" style="animation-delay: 1.5s;"></div>
81
+ </div>
82
+
83
+ <!-- Navigation -->
84
+ <nav class="fixed top-0 w-full z-50 glass">
85
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
86
+ <div class="flex items-center justify-between h-16">
87
+ <div class="flex items-center space-x-3">
88
+ <div class="relative">
89
+ <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg flex items-center justify-center">
90
+ <i class="fas fa-cube text-white text-lg"></i>
91
+ </div>
92
+ <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full status-dot animate-pulse"></div>
93
+ </div>
94
+ <div>
95
+ <h1 class="text-xl font-bold gradient-text">BuildStatus</h1>
96
+ <p class="text-xs text-gray-400">v2.4.1 • Production</p>
97
+ </div>
98
+ </div>
99
+ <div class="hidden md:flex items-center space-x-6">
100
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-2">
101
+ <span>Built with anycoder</span>
102
+ <i class="fas fa-external-link-alt text-xs"></i>
103
+ </a>
104
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm transition-colors">
105
+ <i class="fas fa-bell mr-2"></i>Notifications
106
+ </button>
107
+ <div class="w-8 h-8 bg-gradient-to-br from-pink-500 to-orange-400 rounded-full flex items-center justify-center text-sm font-bold">
108
+ JD
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </nav>
114
+
115
+ <!-- Main Content -->
116
+ <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative z-10">
117
+ <!-- Welcome Message -->
118
+ <div class="mb-8 animate-slide-in">
119
+ <h2 class="text-3xl font-bold mb-2">Dashboard Overview</h2>
120
+ <p class="text-gray-400">Real-time build monitoring and deployment status across all environments.</p>
121
+ </div>
122
+
123
+ <!-- Status Cards -->
124
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
125
+ <!-- Production -->
126
+ <div class="glass rounded-xl p-6 card-hover animate-slide-in" style="animation-delay: 0.1s;">
127
+ <div class="flex items-center justify-between mb-4">
128
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
129
+ <i class="fas fa-rocket text-green-400 text-xl"></i>
130
+ </div>
131
+ <span class="px-3 py-1 bg-green-500/20 text-green-400 text-xs rounded-full font-medium">Healthy</span>
132
+ </div>
133
+ <h3 class="text-lg font-semibold mb-1">Production</h3>
134
+ <p class="text-2xl font-bold text-green-400 mb-2">99.99%</p>
135
+ <p class="text-sm text-gray-400">Uptime last 30 days</p>
136
+ <div class="mt-4 flex items-center text-xs text-gray-500">
137
+ <i class="fas fa-clock mr-1"></i>
138
+ Last deploy: 2 hours ago
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Staging -->
143
+ <div class="glass rounded-xl p-6 card-hover animate-slide-in" style="animation-delay: 0.2s;">
144
+ <div class="flex items-center justify-between mb-4">
145
+ <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
146
+ <i class="fas fa-flask text-blue-400 text-xl"></i>
147
+ </div>
148
+ <span class="px-3 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full font-medium">Active</span>
149
+ </div>
150
+ <h3 class="text-lg font-semibold mb-1">Staging</h3>
151
+ <p class="text-2xl font-bold text-blue-400 mb-2">v2.5.0-rc</p>
152
+ <p class="text-sm text-gray-400">Release candidate</p>
153
+ <div class="mt-4 flex items-center text-xs text-gray-500">
154
+ <i class="fas fa-code-branch mr-1"></i>
155
+ Branch: feature/new-dashboard
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Development -->
160
+ <div class="glass rounded-xl p-6 card-hover animate-slide-in" style="animation-delay: 0.3s;">
161
+ <div class="flex items-center justify-between mb-4">
162
+ <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
163
+ <i class="fas fa-code text-purple-400 text-xl"></i>
164
+ </div>
165
+ <span class="px-3 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-full font-medium">Building</span>
166
+ </div>
167
+ <h3 class="text-lg font-semibold mb-1">Development</h3>
168
+ <p class="text-2xl font-bold text-purple-400 mb-2">#4,291</p>
169
+ <p class="text-sm text-gray-400">Build number</p>
170
+ <div class="mt-4 w-full bg-gray-700 rounded-full h-2">
171
+ <div class="bg-purple-400 h-2 rounded-full animate-pulse" style="width: 75%"></div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Tests -->
176
+ <div class="glass rounded-xl p-6 card-hover animate-slide-in" style="animation-delay: 0.4s;">
177
+ <div class="flex items-center justify-between mb-4">
178
+ <div class="w-12 h-12 bg-pink-500/20 rounded-lg flex items-center justify-center">
179
+ <i class="fas fa-vial text-pink-400 text-xl"></i>
180
+ </div>
181
+ <span class="px-3 py-1 bg-green-500/20 text-green-400 text-xs rounded-full font-medium">Passing</span>
182
+ </div>
183
+ <h3 class="text-lg font-semibold mb-1">Test Suite</h3>
184
+ <p class="text-2xl font-bold text-green-400 mb-2">1,247</p>
185
+ <p class="text-sm text-gray-400">Tests passing</p>
186
+ <div class="mt-4 flex gap-2">
187
+ <div class="flex-1 bg-green-500/20 rounded p-2 text-center">
188
+ <p class="text-xs text-green-400">Unit</p>
189
+ <p class="text-sm font-bold text-green-400">98%</p>
190
+ </div>
191
+ <div class="flex-1 bg-green-500/20 rounded p-2 text-center">
192
+ <p class="text-xs text-green-400">E2E</p>
193
+ <p class="text-sm font-bold text-green-400">94%</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Main Dashboard Content -->
200
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
201
+ <!-- Build Pipeline -->
202
+ <div class="lg:col-span-2 glass rounded-xl p-6">
203
+ <div class="flex items-center justify-between mb-6">
204
+ <h3 class="text-lg font-semibold flex items-center">
205
+ <i class="fas fa-stream text-blue-400 mr-2"></i>
206
+ Build Pipeline
207
+ </h3>
208
+ <div class="flex gap-2">
209
+ <button class="px-3 py-1 text-xs bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
210
+ <i class="fas fa-filter mr-1"></i>Filter
211
+ </button>
212
+ <button class="px-3 py-1 text-xs bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors">
213
+ <i class="fas fa-play mr-1"></i>Trigger Build
214
+ </button>
215
+ </div>
216
+ </div>
217
+ <div class="space-y-4" id="pipeline-container">
218
+ <!-- Pipeline items will be injected here -->
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Real-time Metrics -->
223
+ <div class="space-y-6">
224
+ <!-- Performance Chart -->
225
+ <div class="glass rounded-xl p-6">
226
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
227
+ <i class="fas fa-chart-line text-green-400 mr-2"></i>
228
+ Response Time
229
+ </h3>
230
+ <div class="relative h-40">
231
+ <canvas id="responseChart" class="w-full h-full"></canvas>
232
+ </div>
233
+ <div class="mt-4 grid grid-cols-3 gap-4 text-center">
234
+ <div>
235
+ <p class="text-2xl font-bold text-green-400">45ms</p>
236
+ <p class="text-xs text-gray-400">Avg</p>
237
+ </div>
238
+ <div>
239
+ <p class="text-2xl font-bold text-yellow-400">89ms</p>
240
+ <p class="text-xs text-gray-400">P95</p>
241
+ </div>
242
+ <div>
243
+ <p class="text-2xl font-bold text-red-400">156ms</p>
244
+ <p class="text-xs text-gray-400">P99</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Error Rate -->
250
+ <div class="glass rounded-xl p-6">
251
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
252
+ <i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i>
253
+ Error Rate
254
+ </h3>
255
+ <div class="flex items-center justify-between mb-4">
256
+ <div class="text-4xl font-bold text-white">0.02%</div>
257
+ <span class="px-3 py-1 bg-green-500/20 text-green-400 text-sm rounded-full">
258
+ <i class="fas fa-arrow-down mr-1"></i>12%
259
+ </span>
260
+ </div>
261
+ <div class="space-y-3">
262
+ <div class="flex items-center justify-between text-sm">
263
+ <span class="text-gray-400">4xx Errors</span>
264
+ <span class="text-green-400">0.01%</span>
265
+ </div>
266
+ <div class="flex items-center justify-between text-sm">
267
+ <span class="text-gray-400">5xx Errors</span>
268
+ <span class="text-green-400">0.01%</span>
269
+ </div>
270
+ <div class="flex items-center justify-between text-sm">
271
+ <span class="text-gray-400">Timeout</span>
272
+ <span class="text-green-400">0.00%</span>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Quick Actions -->
278
+ <div class="glass rounded-xl p-6">
279
+ <h3 class="text-lg font-semibold mb-4">Quick Actions</h3>
280
+ <div class="space-y-3">
281
+ <button class="w-full flex items-center justify-between p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors group">
282
+ <div class="flex items-center">
283
+ <i class="fas fa-rocket text-blue-400 mr-3"></i>
284
+ <span class="text-sm">Deploy to Production</span>
285
+ </div>
286
+ <i class="fas fa-chevron-right text-gray-500 group-hover:text-white transition-colors"></i>
287
+ </button>
288
+ <button class="w-full flex items-center justify-between p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors group">
289
+ <div class="flex items-center">
290
+ <i class="fas fa-undo text-yellow-400 mr-3"></i>
291
+ <span class="text-sm">Rollback Last Deploy</span>
292
+ </div>
293
+ <i class="fas fa-chevron-right text-gray-500 group-hover:text-white transition-colors"></i>
294
+ </button>
295
+ <button class="w-full flex items-center justify-between p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors group">
296
+ <div class="flex items-center">
297
+ <i class="fas fa-bug text-red-400 mr-3"></i>
298
+ <span class="text-sm">Create Incident</span>
299
+ </div>
300
+ <i class="fas fa-chevron-right text-gray-500 group-hover:text-white transition-colors"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Live Terminal -->
308
+ <div class="mt-6 glass rounded-xl p-6">
309
+ <div class="flex items-center justify-between mb-4">
310
+ <h3 class="text-lg font-semibold flex items-center">
311
+ <i class="fas fa-terminal text-green-400 mr-2"></i>
312
+ Live Build Logs
313
+ </h3>
314
+ <div class="flex items-center gap-3">
315
+ <span class="flex items-center text-xs text-green-400">
316
+ <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
317
+ Live
318
+ </span>
319
+ <button class="text-gray-400 hover:text-white transition-colors">
320
+ <i class="fas fa-expand"></i>
321
+ </button>
322
+ <button class="text-gray-400 hover:text-white transition-colors">
323
+ <i class="fas fa-download"></i>
324
+ </button>
325
+ </div>
326
+ </div>
327
+ <div class="bg-gray-950 rounded-lg p-4 font-mono text-sm overflow-hidden">
328
+ <div id="terminal-content" class="space-y-1 max-h-64 overflow-y-auto">
329
+ <!-- Terminal lines will be injected here -->
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </main>
334
+
335
+ <!-- Footer -->
336
+ <footer class="border-t border-gray-800 mt-12 py-8">
337
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
338
+ <div class="flex flex-col md:flex-row justify-between items-center">
339
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
340
+ <i class="fas fa-cube text-purple-400"></i>
341
+ <span class="text-gray-400">BuildStatus Dashboard</span>
342
+ </div>
343
+ <div class="flex items-center space-x-6 text-sm text-gray-500">
344
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hover:text-purple-400 transition-colors flex items-center gap-2">
345
+ <i class="fas fa-heart text-pink-400"></i>
346
+ Built with anycoder
347
+ </a>
348
+ <span>•</span>
349
+ <span>v2.4.1</span>
350
+ <span>•</span>
351
+ <span>© 2025</span>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </footer>
356
+
357
+ <script>
358
+ // Pipeline data
359
+ const pipelineStages = [
360
+ { name: 'Source', status: 'success', duration: '45s', icon: 'fa-code-branch' },
361
+ { name: 'Build', status: 'success', duration: '2m 30s', icon: 'fa-cube' },
362
+ { name: 'Test', status: 'success', duration: '3m 15s', icon: 'fa-vial' },
363
+ { name: 'Security Scan', status: 'running', duration: '1m 20s', icon: 'fa-shield-alt' },
364
+ { name: 'Deploy Staging', status: 'pending', duration: '-', icon: 'fa-rocket' },
365
+ ];
366
+
367
+ // Terminal messages
368
+ const terminalMessages = [
369
+ { text: '[12:34:56] INFO: Build pipeline initialized', type: 'info' },
370
+ { text: '[12:34:57] INFO: Checking out repository...', type: 'info' },
371
+ { text: '[12:34:58] SUCCESS: Repository cloned successfully', type: 'success' },
372
+ { text: '[12:35:00] INFO: Installing dependencies...', type: 'info' },
373
+ { text: '[12:35:15] INFO: Running npm ci', type: 'info' },
374
+ { text: '[12:35:45] SUCCESS: Dependencies installed', type: 'success' },
375
+ { text: '[12:35:46] INFO: Running build script...', type: 'info' },
376
+ { text: '[12:36:10] INFO: Optimizing assets...', type: 'info' },
377
+ { text: '[12:36:30] SUCCESS: Build completed successfully', type: 'success' },
378
+ { text: '[12:36:31] INFO: Running test suite...', type: 'info' },
379
+ { text: '[12:37:00] INFO: Executing 1,247 tests...', type: 'info' },
380
+ { text: '[12:37:45] SUCCESS: All tests passed (1,247/1,247)', type: 'success' },
381
+ { text: '[12:37:46] INFO: Running security scan...', type: 'info' },
382
+ { text: '[12:38:00] WARN: Low severity vulnerability found in dependency', type: 'warning' },
383
+ { text: '[12:38:05] INFO: Auto-patching vulnerability...', type: 'info' },
384
+ { text: '[12:38:10] SUCCESS: Vulnerability patched', type: 'success' },
385
+ { text: '[12:38:15] INFO: Preparing deployment to staging...', type: 'info' },
386
+ ];
387
+
388
+ // Render pipeline
389
+ function renderPipeline() {
390
+ const container = document.getElementById('pipeline-container');
391
+ container.innerHTML = pipelineStages.map((stage, index) => {
392
+ const statusColors = {
393
+ success: 'bg-green-500',
394
+ running: 'bg-blue-500 animate-pulse',
395
+ pending: 'bg-gray-600',
396
+ failed: 'bg-red-500'
397
+ };
398
+ const statusIcons = {
399
+ success: 'fa-check',
400
+ running: 'fa-spinner fa-spin',
401
+ pending: 'fa-clock',
402
+ failed: 'fa-times'
403
+ };
404
+ return `
405
+ <div class="flex items-center p-4 bg-gray-800/50 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer group">
406
+ <div class="flex items-center flex-1">
407
+ <div class="w-10 h-10 rounded-lg ${statusColors[stage.status]} flex items-center justify-center mr-4">
408
+ <i class="fas ${statusIcons[stage.status]} text-white"></i>
409
+ </div>
410
+ <div>
411
+ <p class="font-medium text-white group-hover:text-blue-400 transition-colors">${stage.name}</p>
412
+ <p class="text-sm text-gray-400">${stage.duration}</p>
413
+ </div>
414
+ </div>
415
+ ${index < pipelineStages.length - 1 ? `
416
+ <div class="hidden md:block mx-4 text-gray-600">
417
+ <i class="fas fa-chevron-right"></i>
418
+ </div>
419
+ ` : ''}
420
+ </div>
421
+ `;
422
+ }).join('');
423
+ }
424
+
425
+ // Render terminal
426
+ let terminalIndex = 0;
427
+ function renderTerminal() {
428
+ const container = document.getElementById('terminal-content');
429
+
430
+ function addLine() {
431
+ if (terminalIndex >= terminalMessages.length) {
432
+ terminalIndex = 0; // Loop
433
+ }
434
+
435
+ const msg = terminalMessages[terminalIndex];
436
+ const colors = {
437
+ info: 'text-blue-400',
438
+ success: 'text-green-400',
439
+ warning: 'text-yellow-400',
440
+ error: 'text-red-400'
441
+ };
442
+
443
+ const line = document.createElement('div');
444
+ line.className = `font-mono text-xs ${colors[msg.type]} opacity-0 animate-slide-in`;
445
+ line.style.animation = 'slideIn 0.3s ease-out forwards';
446
+ line.innerHTML = `<span class="text-gray-500">${msg.text}</span>`;
447
+
448
+ container.appendChild(line);
449
+ container.scrollTop = container.scrollHeight;
450
+
451
+ // Remove old lines to keep performance
452
+ if (container.children.length > 50) {
453
+ container.removeChild(container.firstChild);
454
+ }
455
+
456
+ terminalIndex++;
457
+ }
458
+
459
+ // Add lines periodically
460
+ setInterval(addLine, 800);
461
+
462
+ // Add initial lines
463
+ for (let i = 0; i < 10; i++) {
464
+ setTimeout(addLine, i * 100);
465
+ }
466
+ }
467
+
468
+ // Canvas Chart
469
+ function initChart() {
470
+ const canvas = document.getElementById('responseChart');
471
+ const ctx = canvas.getContext('2d');
472
+
473
+ // Set canvas size
474
+ function resize() {
475
+ canvas.width = canvas.offsetWidth;
476
+ canvas.height = canvas.offsetHeight;
477
+ }
478
+ resize();
479
+ window.addEventListener('resize', resize);
480
+
481
+ // Data points
482
+ const points = [];
483
+ const maxPoints = 50;
484
+ for (let i = 0; i < maxPoints; i++) {
485
+ points.push(40 + Math.random() * 20 + Math.sin(i * 0.2) * 10);
486
+ }
487
+
488
+ let offset = 0;
489
+
490
+ function draw() {
491
+ ctx.fillStyle = '#0a0a0a';
492
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
493
+
494
+ // Draw grid
495
+ ctx.strokeStyle = '#1a1a1a';
496
+ ctx.lineWidth = 1;
497
+ for (let i = 0; i < canvas.width; i += 40) {
498
+ ctx.beginPath();
499
+ ctx.moveTo(i, 0);
500
+ ctx.lineTo(i, canvas.height);
501
+ ctx.stroke();
502
+ }
503
+ for (let i = 0; i < canvas.height; i += 30) {
504
+ ctx.beginPath();
505
+ ctx.moveTo(0, i);
506
+ ctx.lineTo(canvas.width, i);
507
+ ctx.stroke();
508
+ }
509
+
510
+ // Draw line
511
+ const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
512
+ gradient.addColorStop(0, '#10b981');
513
+ gradient.addColorStop(0.5, '#3b82f6');
514
+ gradient.addColorStop(1, '#8b5cf6');
515
+
516
+ ctx.strokeStyle = gradient;
517
+ ctx.lineWidth = 2;
518
+ ctx.beginPath();
519
+
520
+ const step = canvas.width / (maxPoints - 1);
521
+ for (let i = 0; i < points.length; i++) {
522
+ const x = i * step;
523
+ const y = canvas.height - (points[i] / 100 * canvas.height);
524
+ if (i === 0) {
525
+ ctx.moveTo(x, y);
526
+ } else {
527
+ ctx.lineTo(x, y);
528
+ }
529
+ }
530
+ ctx.stroke();
531
+
532
+ // Update data
533
+ points.shift();
534
+ points.push(40 + Math.random() * 20 + Math.sin(offset) * 10);
535
+ offset += 0.1;
536
+
537
+ requestAnimationFrame(draw);
538
+ }
539
+
540
+ draw();
541
+ }
542
+
543
+ // Initialize
544
+ document.addEventListener('DOMContentLoaded', () => {
545
+ renderPipeline();
546
+ renderTerminal();
547
+ initChart();
548
+ });
549
+ </script>
550
+ </body>
551
+ </html>