Hugging Face's logo

Spaces:
Urbanzulu
/
Build-IT_AI
Running

App Files
Urbanzulu commited on
Commit
ce781ae
·
verified ·
1 Parent(s): e59728f

add the workspace manager files and the ai editor files and deployment manager files and container mangement files

Browse files
Files changed (5) hide show
  1. ai-editor.html +282 -0
  2. container-manager.html +409 -0
  3. deployment-manager.html +328 -0
  4. index.html +11 -12
  5. workspace-manager.html +265 -0
ai-editor.html ADDED
@@ -0,0 +1,282 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Editor | CodeForge-AI</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
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>
11
+ <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
12
+ <style>
13
+ .editor-container {
14
+ height: calc(100vh - 4rem);
15
+ }
16
+ .chat-message {
17
+ animation: slideIn 0.3s ease-out;
18
+ }
19
+ @keyframes slideIn {
20
+ from {
21
+ opacity: 0;
22
+ transform: translateY(10px);
23
+ }
24
+ to {
25
+ opacity: 1;
26
+ transform: translateY(0);
27
+ }
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-900 text-white h-screen overflow-hidden">
32
+ <!-- Header -->
33
+ <header class="bg-gray-800 border-b border-red-500/20 h-16 flex items-center px-4">
34
+ <div class="flex items-center justify-between w-full">
35
+ <div class="flex items-center space-x-4">
36
+ <a href="workspace-manager.html" class="text-gray-300 hover:text-white transition-colors">
37
+ <i data-feather="arrow-left" class="w-5 h-5"></i>
38
+ </a>
39
+ <div class="flex items-center space-x-2">
40
+ <div class="w-6 h-6 bg-red-500 rounded flex items-center justify-center">
41
+ <i data-feather="zap" class="w-3 h-3"></i>
42
+ </div>
43
+ <span class="font-semibold">AI-Powered Editor</span>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="flex items-center space-x-4">
48
+ <div class="flex items-center space-x-2 text-sm text-gray-300">
49
+ <i data-feather="cpu" class="w-4 h-4"></i>
50
+ <span>Agent3 AI Active</span>
51
+ </div>
52
+ <div class="flex items-center space-x-2 text-sm text-gray-300">
53
+ <i data-feather="battery" class="w-4 h-4"></i>
54
+ <span>87/100 Credits</span>
55
+ </div>
56
+ <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white text-sm font-medium transition-colors">
57
+ <i data-feather="play" class="w-4 h-4 inline mr-2"></i>
58
+ Run Code
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </header>
63
+
64
+ <div class="flex editor-container">
65
+ <!-- Editor Panel -->
66
+ <div class="flex-1 flex flex-col">
67
+ <!-- Editor Tabs -->
68
+ <div class="bg-gray-800 border-b border-gray-700 flex items-center px-4">
69
+ <div class="flex space-x-1">
70
+ <div class="bg-gray-900 border border-gray-600 px-4 py-2 text-sm text-white rounded-t-lg flex items-center space-x-2">
71
+ <i data-feather="file-text" class="w-4 h-4"></i>
72
+ <span>main.py</span>
73
+ <button class="text-gray-400 hover:text-white">
74
+ <i data-feather="x" class="w-3 h-3"></i>
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Editor -->
81
+ <div class="flex-1 relative">
82
+ <div id="editor" class="absolute inset-0"></div>
83
+ </div>
84
+
85
+ <!-- Terminal -->
86
+ <div class="h-48 bg-gray-800 border-t border-gray-700">
87
+ <div class="bg-gray-800 border-b border-gray-700 px-4 py-2 flex justify-between items-center">
88
+ <div class="flex items-center space-x-2 text-sm text-gray-300">
89
+ <i data-feather="terminal" class="w-4 h-4"></i>
90
+ <span>Terminal</span>
91
+ </div>
92
+ <div class="flex space-x-2">
93
+ <button class="text-gray-400 hover:text-white">
94
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
95
+ </button>
96
+ <button class="text-gray-400 hover:text-white">
97
+ <i data-feather="trash-2" class="w-4 h-4"></i>
98
+ </button>
99
+ </div>
100
+ </div>
101
+ <div class="terminal p-4 font-mono text-sm overflow-auto h-40 bg-gray-900">
102
+ <div class="text-green-400">$ python main.py</div>
103
+ <div class="text-gray-300 mt-2">Hello from AI-Powered Editor!</div>
104
+ <div class="text-gray-300">Agent3 AI is ready to assist you.</div>
105
+ <div class="text-gray-500 mt-4">Ready for commands...</div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- AI Assistant Panel -->
111
+ <div class="w-96 bg-gray-800 border-l border-gray-700 flex flex-col">
112
+ <div class="p-4 border-b border-gray-700">
113
+ <h3 class="font-semibold text-white mb-3 flex items-center">
114
+ <i data-feather="message-circle" class="w-4 h-4 mr-2"></i>
115
+ Agent3 AI Assistant
116
+ </h3>
117
+ <div class="text-xs text-gray-400 mb-4">
118
+ <div class="flex justify-between mb-1">
119
+ <span>AI Credits:</span>
120
+ <span class="text-red-400">87/100</span>
121
+ </div>
122
+ <div class="w-full bg-gray-700 rounded-full h-1">
123
+ <div class="bg-red-500 h-1 rounded-full" style="width: 87%"></div>
124
+ </div>
125
+ </div>
126
+ <div class="flex space-x-2">
127
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
128
+ <i data-feather="zap" class="w-4 h-4 inline mr-2"></i>
129
+ Generate
130
+ </button>
131
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
132
+ <i data-feather="help-circle" class="w-4 h-4 inline mr-2"></i>
133
+ Explain
134
+ </button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Chat Messages -->
139
+ <div class="flex-1 overflow-y-auto p-4 space-y-4">
140
+ <div class="chat-message bg-gray-700 rounded-lg p-4">
141
+ <div class="flex items-start space-x-3">
142
+ <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0">
143
+ <i data-feather="zap" class="w-4 h-4"></i>
144
+ </div>
145
+ <div class="flex-1">
146
+ <p class="text-sm text-white mb-2">Hello! I'm Agent3 AI, your coding assistant. I can help you write, debug, and optimize code. What would you like to work on today?</p>
147
+ <div class="flex space-x-2">
148
+ <button class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-white transition-colors">
149
+ Generate Function
150
+ </button>
151
+ <button class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-white transition-colors">
152
+ Fix Bugs
153
+ </button>
154
+ <button class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-white transition-colors">
155
+ Optimize Code
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="chat-message bg-gray-900 border border-gray-600 rounded-lg p-4 ml-8">
163
+ <div class="flex items-start space-x-3">
164
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
165
+ <i data-feather="user" class="w-4 h-4"></i>
166
+ </div>
167
+ <div class="flex-1">
168
+ <p class="text-sm text-white">Can you help me write a function to sort a list of numbers?</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="chat-message bg-gray-700 rounded-lg p-4">
174
+ <div class="flex items-start space-x-3">
175
+ <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0">
176
+ <i data-feather="zap" class="w-4 h-4"></i>
177
+ </div>
178
+ <div class="flex-1">
179
+ <p class="text-sm text-white mb-2">Sure! Here's a Python function to sort a list of numbers using the built-in sorted function:</p>
180
+ <pre class="bg-gray-800 rounded p-3 text-xs text-green-400 overflow-x-auto">
181
+ def sort_numbers(numbers):
182
+ """Sort a list of numbers in ascending order."""
183
+ return sorted(numbers)
184
+
185
+ # Example usage:
186
+ numbers = [3, 1, 4, 1, 5, 9, 2, 6]
187
+ sorted_numbers = sort_numbers(numbers)
188
+ print(sorted_numbers) # Output: [1, 1, 2, 3, 4, 5, 6, 9]</pre>
189
+ <button class="mt-2 text-xs bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-white transition-colors">
190
+ <i data-feather="copy" class="w-3 h-3 inline mr-1"></i>
191
+ Insert into Editor
192
+ </button>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Input Area -->
199
+ <div class="p-4 border-t border-gray-700">
200
+ <div class="flex space-x-2">
201
+ <input type="text" placeholder="Ask Agent3 AI for help..." class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-red-500">
202
+ <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white transition-colors">
203
+ <i data-feather="send" class="w-4 h-4"></i>
204
+ </button>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <script>
211
+ // Initialize Monaco Editor
212
+ require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' }});
213
+ require(['vs/editor/editor.main'], function() {
214
+ const editor = monaco.editor.create(document.getElementById('editor'), {
215
+ value: `# AI-Powered Code Editor\n\n# Ask Agent3 AI for help with:\n# - Code generation\n# - Bug fixes\n# - Code optimization\n# - Documentation\n# - Best practices\n\ndef main():\n # Your code here\n print("Welcome to AI-Powered Editor!")\n \n # Try asking: "Can you help me write a function to calculate factorial?"\n \nif __name__ == "__main__":\n main()`,
216
+ language: 'python',
217
+ theme: 'vs-dark',
218
+ fontSize: 14,
219
+ minimap: { enabled: true },
220
+ automaticLayout: true
221
+ });
222
+
223
+ // Add keyboard shortcut for running code
224
+ editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function() {
225
+ document.querySelector('button.bg-red-500').click();
226
+ });
227
+ });
228
+
229
+ // Initialize Feather Icons
230
+ feather.replace();
231
+
232
+ // Simple chat functionality
233
+ document.querySelector('button.bg-red-500:last-child').addEventListener('click', function() {
234
+ const input = document.querySelector('input[type="text"]');
235
+ const message = input.value.trim();
236
+ if (message) {
237
+ const chatContainer = document.querySelector('.space-y-4');
238
+ const userMessage = document.createElement('div');
239
+ userMessage.className = 'chat-message bg-gray-900 border border-gray-600 rounded-lg p-4 ml-8';
240
+ userMessage.innerHTML = `
241
+ <div class="flex items-start space-x-3">
242
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
243
+ <i data-feather="user" class="w-4 h-4"></i>
244
+ </div>
245
+ <div class="flex-1">
246
+ <p class="text-sm text-white">${message}</p>
247
+ </div>
248
+ </div>
249
+ `;
250
+ chatContainer.appendChild(userMessage);
251
+ input.value = '';
252
+
253
+ // Scroll to bottom
254
+ chatContainer.scrollTop = chatContainer.scrollHeight;
255
+
256
+ // Simulate AI response after delay
257
+ setTimeout(() => {
258
+ const aiMessage = document.createElement('div');
259
+ aiMessage.className = 'chat-message bg-gray-700 rounded-lg p-4';
260
+ aiMessage.innerHTML = `
261
+ <div class="flex items-start space-x-3">
262
+ <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0">
263
+ <i data-feather="zap" class="w-4 h-4"></i>
264
+ </div>
265
+ <div class="flex-1">
266
+ <p class="text-sm text-white mb-2">I understand you're asking about "${message}". Here's how I can help with that:</p>
267
+ <button class="text-xs bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-white transition-colors">
268
+ <i data-feather="copy" class="w-3 h-3 inline mr-1"></i>
269
+ Generate Sample Code
270
+ </button>
271
+ </div>
272
+ </div>
273
+ `;
274
+ chatContainer.appendChild(aiMessage);
275
+ chatContainer.scrollTop = chatContainer.scrollHeight;
276
+ feather.replace();
277
+ }, 1000);
278
+ }
279
+ });
280
+ </script>
281
+ </body>
282
+ </html>
container-manager.html ADDED
@@ -0,0 +1,409 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Container Manager | CodeForge-AI</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
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>
11
+ <style>
12
+ .container-card:hover {
13
+ transform: translateY(-2px);
14
+ box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.1);
15
+ }
16
+ .status-running { background-color: #10b981; }
17
+ .status-stopped { background-color: #6b7280; }
18
+ .status-building { background-color: #f59e0b; }
19
+ .status-error { background-color: #ef4444; }
20
+ .progress-bar {
21
+ background: linear-gradient(90deg, #ef4444 0%, #ef4444 var(--progress), #374151 var(--progress), #374151 100%);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-900 text-white min-h-screen">
26
+ <!-- Navigation -->
27
+ <nav class="bg-gray-800 border-b border-red-500/20 sticky top-0 z-50">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between items-center h-16">
30
+ <div class="flex items-center space-x-4">
31
+ <a href="index.html" class="flex items-center space-x-2">
32
+ <div class="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
33
+ <i data-feather="code" class="w-4 h-4"></i>
34
+ </div>
35
+ <span class="text-xl font-bold text-white">CodeForge-AI</span>
36
+ </a>
37
+ <div class="hidden md:flex space-x-6">
38
+ <a href="workspace-manager.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</a>
39
+ <a href="ai-editor.html" class="text-gray-300 hover:text-white transition-colors">AI Editor</a>
40
+ <a href="deployment-manager.html" class="text-gray-300 hover:text-white transition-colors">Deployments</a>
41
+ <a href="container-manager.html" class="text-red-400 hover:text-red-300 transition-colors">Containers</a>
42
+ <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a>
43
+ </div>
44
+ </div>
45
+ <div class="flex items-center space-x-4">
46
+ <a href="container-manager.html" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
47
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
48
+ New Container
49
+ </a>
50
+ <button class="text-gray-300 hover:text-white transition-colors">
51
+ <i data-feather="user" class="w-5 h-5"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Header -->
59
+ <div class="bg-gray-800/50 border-b border-gray-700">
60
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
61
+ <div class="flex items-center justify-between">
62
+ <div>
63
+ <h1 class="text-3xl font-bold text-white mb-2">Container Manager</h1>
64
+ <p class="text-gray-400">Monitor and manage your Docker containers and resources</p>
65
+ </div>
66
+ <div class="flex space-x-4">
67
+ <div class="relative">
68
+ <input type="text" placeholder="Search containers..." class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 pl-10 text-white placeholder-gray-400 focus:outline-none focus:border-red-500">
69
+ <i data-feather="search" class="w-4 h-4 text-gray-400 absolute left-3 top-3"></i>
70
+ </div>
71
+ <select class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-red-500">
72
+ <option>All Containers</option>
73
+ <option>Running</option>
74
+ <option>Stopped</option>
75
+ <option>Building</option>
76
+ </select>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Container Grid -->
83
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
84
+ <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
85
+ <!-- Container 1 -->
86
+ <div class="bg-gray-800 rounded-xl border border-gray-700 container-card transition-all duration-300 p-6">
87
+ <div class="flex items-center justify-between mb-4">
88
+ <div class="flex items-center space-x-3">
89
+ <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
90
+ <i data-feather="box" class="w-5 h-5"></i>
91
+ </div>
92
+ <div>
93
+ <h3 class="font-semibold text-white">Web App Container</h3>
94
+ <p class="text-sm text-gray-400">Node.js Application</p>
95
+ </div>
96
+ </div>
97
+ <div class="flex items-center space-x-2">
98
+ <span class="status-running w-3 h-3 rounded-full"></span>
99
+ <span class="text-green-400 text-sm">Running</span>
100
+ </div>
101
+ </div>
102
+ <div class="space-y-3 mb-4">
103
+ <div class="flex justify-between text-sm">
104
+ <span class="text-gray-400">CPU Usage</span>
105
+ <span class="text-white">24%</span>
106
+ </div>
107
+ <div class="w-full bg-gray-700 rounded-full h-2">
108
+ <div class="progress-bar h-2 rounded-full" style="--progress: 24%"></div>
109
+ </div>
110
+ <div class="flex justify-between text-sm">
111
+ <span class="text-gray-400">Memory</span>
112
+ <span class="text-white">512MB / 2GB</span>
113
+ </div>
114
+ <div class="w-full bg-gray-700 rounded-full h-2">
115
+ <div class="progress-bar h-2 rounded-full" style="--progress: 25%"></div>
116
+ </div>
117
+ <div class="flex justify-between text-sm">
118
+ <span class="text-gray-400">Network</span>
119
+ <span class="text-white">1.2MB/s</span>
120
+ </div>
121
+ </div>
122
+ <div class="flex space-x-2">
123
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
124
+ <i data-feather="pause" class="w-4 h-4 inline mr-2"></i>
125
+ Stop
126
+ </button>
127
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
128
+ <i data-feather="bar-chart" class="w-4 h-4 inline mr-2"></i>
129
+ Logs
130
+ </button>
131
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
132
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
133
+ Delete
134
+ </button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Container 2 -->
139
+ <div class="bg-gray-800 rounded-xl border border-gray-700 container-card transition-all duration-300 p-6">
140
+ <div class="flex items-center justify-between mb-4">
141
+ <div class="flex items-center space-x-3">
142
+ <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
143
+ <i data-feather="database" class="w-5 h-5"></i>
144
+ </div>
145
+ <div>
146
+ <h3 class="font-semibold text-white">PostgreSQL DB</h3>
147
+ <p class="text-sm text-gray-400">Database Service</p>
148
+ </div>
149
+ </div>
150
+ <div class="flex items-center space-x-2">
151
+ <span class="status-running w-3 h-3 rounded-full"></span>
152
+ <span class="text-green-400 text-sm">Running</span>
153
+ </div>
154
+ </div>
155
+ <div class="space-y-3 mb-4">
156
+ <div class="flex justify-between text-sm">
157
+ <span class="text-gray-400">CPU Usage</span>
158
+ <span class="text-white">18%</span>
159
+ </div>
160
+ <div class="w-full bg-gray-700 rounded-full h-2">
161
+ <div class="progress-bar h-2 rounded-full" style="--progress: 18%"></div>
162
+ </div>
163
+ <div class="flex justify-between text-sm">
164
+ <span class="text-gray-400">Memory</span>
165
+ <span class="text-white">1.2GB / 4GB</span>
166
+ </div>
167
+ <div class="w-full bg-gray-700 rounded-full h-2">
168
+ <div class="progress-bar h-2 rounded-full" style="--progress: 30%"></div>
169
+ </div>
170
+ <div class="flex justify-between text-sm">
171
+ <span class="text-gray-400">Storage</span>
172
+ <span class="text-white">8.5GB / 20GB</span>
173
+ </div>
174
+ </div>
175
+ <div class="flex space-x-2">
176
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
177
+ <i data-feather="pause" class="w-4 h-4 inline mr-2"></i>
178
+ Stop
179
+ </button>
180
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
181
+ <i data-feather="bar-chart" class="w-4 h-4 inline mr-2"></i>
182
+ Logs
183
+ </button>
184
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
185
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
186
+ Delete
187
+ </button>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Container 3 -->
192
+ <div class="bg-gray-800 rounded-xl border border-gray-700 container-card transition-all duration-300 p-6">
193
+ <div class="flex items-center justify-between mb-4">
194
+ <div class="flex items-center space-x-3">
195
+ <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center">
196
+ <i data-feather="cpu" class="w-5 h-5"></i>
197
+ </div>
198
+ <div>
199
+ <h3 class="font-semibold text-white">ML Processing</h3>
200
+ <p class="text-sm text-gray-400">TensorFlow Service</p>
201
+ </div>
202
+ </div>
203
+ <div class="flex items-center space-x-2">
204
+ <span class="status-stopped w-3 h-3 rounded-full"></span>
205
+ <span class="text-gray-400 text-sm">Stopped</span>
206
+ </div>
207
+ </div>
208
+ <div class="space-y-3 mb-4">
209
+ <div class="flex justify-between text-sm">
210
+ <span class="text-gray-400">CPU Usage</span>
211
+ <span class="text-white">0%</span>
212
+ </div>
213
+ <div class="w-full bg-gray-700 rounded-full h-2">
214
+ <div class="progress-bar h-2 rounded-full" style="--progress: 0%"></div>
215
+ </div>
216
+ <div class="flex justify-between text-sm">
217
+ <span class="text-gray-400">Memory</span>
218
+ <span class="text-white">0MB / 8GB</span>
219
+ </div>
220
+ <div class="w-full bg-gray-700 rounded-full h-2">
221
+ <div class="progress-bar h-2 rounded-full" style="--progress: 0%"></div>
222
+ </div>
223
+ <div class="flex justify-between text-sm">
224
+ <span class="text-gray-400">GPU Usage</span>
225
+ <span class="text-white">0%</span>
226
+ </div>
227
+ </div>
228
+ <div class="flex space-x-2">
229
+ <button class="flex-1 bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
230
+ <i data-feather="play" class="w-4 h-4 inline mr-2"></i>
231
+ Start
232
+ </button>
233
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
234
+ <i data-feather="bar-chart" class="w-4 h-4 inline mr-2"></i>
235
+ Logs
236
+ </button>
237
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
238
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
239
+ Delete
240
+ </button>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Container 4 -->
245
+ <div class="bg-gray-800 rounded-xl border border-gray-700 container-card transition-all duration-300 p-6">
246
+ <div class="flex items-center justify-between mb-4">
247
+ <div class="flex items-center space-x-3">
248
+ <div class="w-10 h-10 bg-yellow-500 rounded-lg flex items-center justify-center">
249
+ <i data-feather="git-branch" class="w-5 h-5"></i>
250
+ </div>
251
+ <div>
252
+ <h3 class="font-semibold text-white">CI/CD Runner</h3>
253
+ <p class="text-sm text-gray-400">Build Service</p>
254
+ </div>
255
+ </div>
256
+ <div class="flex items-center space-x-2">
257
+ <span class="status-building w-3 h-3 rounded-full"></span>
258
+ <span class="text-yellow-400 text-sm">Building</span>
259
+ </div>
260
+ </div>
261
+ <div class="space-y-3 mb-4">
262
+ <div class="flex justify-between text-sm">
263
+ <span class="text-gray-400">Build Progress</span>
264
+ <span class="text-white">65%</span>
265
+ </div>
266
+ <div class="w-full bg-gray-700 rounded-full h-2">
267
+ <div class="progress-bar h-2 rounded-full" style="--progress: 65%"></div>
268
+ </div>
269
+ <div class="flex justify-between text-sm">
270
+ <span class="text-gray-400">Time Elapsed</span>
271
+ <span class="text-white">2m 34s</span>
272
+ </div>
273
+ <div class="flex justify-between text-sm">
274
+ <span class="text-gray-400">Estimated Time</span>
275
+ <span class="text-white">1m 26s</span>
276
+ </div>
277
+ </div>
278
+ <div class="flex space-x-2">
279
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
280
+ <i data-feather="x" class="w-4 h-4 inline mr-2"></i>
281
+ Cancel
282
+ </button>
283
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
284
+ <i data-feather="bar-chart" class="w-4 h-4 inline mr-2"></i>
285
+ Logs
286
+ </button>
287
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
288
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
289
+ Delete
290
+ </button>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Container 5 -->
295
+ <div class="bg-gray-800 rounded-xl border border-gray-700 container-card transition-all duration-300 p-6">
296
+ <div class="flex items-center justify-between mb-4">
297
+ <div class="flex items-center space-x-3">
298
+ <div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center">
299
+ <i data-feather="alert-triangle" class="w-5 h-5"></i>
300
+ </div>
301
+ <div>
302
+ <h3 class="font-semibold text-white">Redis Cache</h3>
303
+ <p class="text-sm text-gray-400">Cache Service</p>
304
+ </div>
305
+ </div>
306
+ <div class="flex items-center space-x-2">
307
+ <span class="status-error w-3 h-3 rounded-full"></span>
308
+ <span class="text-red-400 text-sm">Error</span>
309
+ </div>
310
+ </div>
311
+ <div class="space-y-3 mb-4">
312
+ <div class="flex justify-between text-sm">
313
+ <span class="text-gray-400">Status</span>
314
+ <span class="text-red-400">Crash Loop</span>
315
+ </div>
316
+ <div class="w-full bg-gray-700 rounded-full h-2">
317
+ <div class="bg-red-500 h-2 rounded-full" style="width: 100%"></div>
318
+ </div>
319
+ <div class="flex justify-between text-sm">
320
+ <span class="text-gray-400">Restart Count</span>
321
+ <span class="text-white">15</span>
322
+ </div>
323
+ <div class="flex justify-between text-sm">
324
+ <span class="text-gray-400">Last Error</span>
325
+ <span class="text-red-400">Memory Limit</span>
326
+ </div>
327
+ </div>
328
+ <div class="flex space-x-2">
329
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
330
+ <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
331
+ Restart
332
+ </button>
333
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
334
+ <i data-feather="bar-chart" class="w-4 h-4 inline mr-2"></i>
335
+ Debug
336
+ </button>
337
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
338
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
339
+ Delete
340
+ </button>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- New Container Card -->
345
+ <div class="bg-gray-800/50 rounded-xl border-2 border-dashed border-gray-600 hover:border-red-500 transition-all duration-300 p-6 flex flex-col items-center justify-center cursor-pointer group">
346
+ <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-red-500 transition-colors">
347
+ <i data-feather="plus" class="w-8 h-8 text-gray-400 group-hover:text-white"></i>
348
+ </div>
349
+ <h3 class="text-lg font-semibold text-white mb-2">Create New Container</h3>
350
+ <p class="text-gray-400 text-center text-sm">Launch a new container with your preferred configuration</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Resource Statistics -->
356
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
357
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
358
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
359
+ <div class="flex items-center justify-between">
360
+ <div>
361
+ <p class="text-gray-400 text-sm">Running Containers</p>
362
+ <p class="text-2xl font-bold text-white">8</p>
363
+ </div>
364
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
365
+ <i data-feather="play" class="w-6 h-6 text-green-400"></i>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
370
+ <div class="flex items-center justify-between">
371
+ <div>
372
+ <p class="text-gray-400 text-sm">Total Containers</p>
373
+ <p class="text-2xl font-bold text-white">15</p>
374
+ </div>
375
+ <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
376
+ <i data-feather="box" class="w-6 h-6 text-blue-400"></i>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
381
+ <div class="flex items-center justify-between">
382
+ <div>
383
+ <p class="text-gray-400 text-sm">CPU Usage</p>
384
+ <p class="text-2xl font-bold text-white">42%</p>
385
+ </div>
386
+ <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
387
+ <i data-feather="cpu" class="w-6 h-6 text-purple-400"></i>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
392
+ <div class="flex items-center justify-between">
393
+ <div>
394
+ <p class="text-gray-400 text-sm">Memory Usage</p>
395
+ <p class="text-2xl font-bold text-white">6.2GB</p>
396
+ </div>
397
+ <div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
398
+ <i data-feather="hard-drive" class="w-6 h-6 text-yellow-400"></i>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <script>
406
+ feather.replace();
407
+ </script>
408
+ </body>
409
+ </html>
deployment-manager.html ADDED
@@ -0,0 +1,328 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Deployment Manager | CodeForge-AI</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
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>
11
+ <style>
12
+ .deployment-card:hover {
13
+ transform: translateY(-2px);
14
+ box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.1);
15
+ }
16
+ .status-active { background-color: #10b981; }
17
+ .status-pending { background-color: #f59e0b; }
18
+ .status-failed { background-color: #ef4444; }
19
+ .status-stopped { background-color: #6b7280; }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-900 text-white min-h-screen">
23
+ <!-- Navigation -->
24
+ <nav class="bg-gray-800 border-b border-red-500/20 sticky top-0 z-50">
25
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
26
+ <div class="flex justify-between items-center h-16">
27
+ <div class="flex items-center space-x-4">
28
+ <a href="index.html" class="flex items-center space-x-2">
29
+ <div class="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
30
+ <i data-feather="code" class="w-4 h-4"></i>
31
+ </div>
32
+ <span class="text-xl font-bold text-white">CodeForge-AI</span>
33
+ </a>
34
+ <div class="hidden md:flex space-x-6">
35
+ <a href="workspace-manager.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</a>
36
+ <a href="ai-editor.html" class="text-gray-300 hover:text-white transition-colors">AI Editor</a>
37
+ <a href="deployment-manager.html" class="text-red-400 hover:text-red-300 transition-colors">Deployments</a>
38
+ <a href="container-manager.html" class="text-gray-300 hover:text-white transition-colors">Containers</a>
39
+ <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a>
40
+ </div>
41
+ </div>
42
+ <div class="flex items-center space-x-4">
43
+ <a href="deployment-manager.html" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
44
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
45
+ New Deployment
46
+ </a>
47
+ <button class="text-gray-300 hover:text-white transition-colors">
48
+ <i data-feather="user" class="w-5 h-5"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Header -->
56
+ <div class="bg-gray-800/50 border-b border-gray-700">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
58
+ <div class="flex items-center justify-between">
59
+ <div>
60
+ <h1 class="text-3xl font-bold text-white mb-2">Deployment Manager</h1>
61
+ <p class="text-gray-400">Deploy your applications to multiple platforms with one click</p>
62
+ </div>
63
+ <div class="flex space-x-4">
64
+ <div class="relative">
65
+ <input type="text" placeholder="Search deployments..." class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 pl-10 text-white placeholder-gray-400 focus:outline-none focus:border-red-500">
66
+ <i data-feather="search" class="w-4 h-4 text-gray-400 absolute left-3 top-3"></i>
67
+ </div>
68
+ <select class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-red-500">
69
+ <option>All Deployments</option>
70
+ <option>Active</option>
71
+ <option>Pending</option>
72
+ <option>Failed</option>
73
+ </select>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Deployments Grid -->
80
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
81
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
82
+ <!-- Deployment 1 -->
83
+ <div class="bg-gray-800 rounded-xl border border-gray-700 deployment-card transition-all duration-300 p-6">
84
+ <div class="flex items-center justify-between mb-4">
85
+ <div class="flex items-center space-x-3">
86
+ <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
87
+ <i data-feather="cloud" class="w-6 h-6"></i>
88
+ </div>
89
+ <div>
90
+ <h3 class="font-semibold text-white">Web Dashboard</h3>
91
+ <p class="text-sm text-gray-400">Production • Vercel</p>
92
+ </div>
93
+ </div>
94
+ <div class="flex items-center space-x-2">
95
+ <span class="status-active w-3 h-3 rounded-full"></span>
96
+ <span class="text-green-400 text-sm">Active</span>
97
+ </div>
98
+ </div>
99
+ <p class="text-gray-300 text-sm mb-4">React dashboard application with real-time analytics and user management.</p>
100
+ <div class="flex items-center justify-between text-sm mb-4">
101
+ <div class="text-gray-400">
102
+ <i data-feather="calendar" class="w-4 h-4 inline mr-1"></i>
103
+ Deployed: 2 days ago
104
+ </div>
105
+ <div class="text-gray-400">
106
+ <i data-feather="globe" class="w-4 h-4 inline mr-1"></i>
107
+ https://dashboard.example.com
108
+ </div>
109
+ </div>
110
+ <div class="flex space-x-2">
111
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
112
+ <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
113
+ Redeploy
114
+ </button>
115
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
116
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
117
+ Delete
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Deployment 2 -->
123
+ <div class="bg-gray-800 rounded-xl border border-gray-700 deployment-card transition-all duration-300 p-6">
124
+ <div class="flex items-center justify-between mb-4">
125
+ <div class="flex items-center space-x-3">
126
+ <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center">
127
+ <i data-feather="server" class="w-6 h-6"></i>
128
+ </div>
129
+ <div>
130
+ <h3 class="font-semibold text-white">API Service</h3>
131
+ <p class="text-sm text-gray-400">Staging • Docker</p>
132
+ </div>
133
+ </div>
134
+ <div class="flex items-center space-x-2">
135
+ <span class="status-pending w-3 h-3 rounded-full"></span>
136
+ <span class="text-yellow-400 text-sm">Pending</span>
137
+ </div>
138
+ </div>
139
+ <p class="text-gray-300 text-sm mb-4">FastAPI backend service with PostgreSQL database and Redis cache.</p>
140
+ <div class="flex items-center justify-between text-sm mb-4">
141
+ <div class="text-gray-400">
142
+ <i data-feather="calendar" class="w-4 h-4 inline mr-1"></i>
143
+ Started: 5 minutes ago
144
+ </div>
145
+ <div class="text-gray-400">
146
+ <i data-feather="clock" class="w-4 h-4 inline mr-1"></i>
147
+ Building...
148
+ </div>
149
+ </div>
150
+ <div class="flex space-x-2">
151
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
152
+ <i data-feather="pause" class="w-4 h-4 inline mr-2"></i>
153
+ Cancel
154
+ </button>
155
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
156
+ <i data-feather="bar-chart" class="w-4 h-4 inline mr-2"></i>
157
+ Logs
158
+ </button>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Deployment 3 -->
163
+ <div class="bg-gray-800 rounded-xl border border-gray-700 deployment-card transition-all duration-300 p-6">
164
+ <div class="flex items-center justify-between mb-4">
165
+ <div class="flex items-center space-x-3">
166
+ <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center">
167
+ <i data-feather="box" class="w-6 h-6"></i>
168
+ </div>
169
+ <div>
170
+ <h3 class="font-semibold text-white">ML Model</h3>
171
+ <p class="text-sm text-gray-400">Production • AWS</p>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-center space-x-2">
175
+ <span class="status-active w-3 h-3 rounded-full"></span>
176
+ <span class="text-green-400 text-sm">Active</span>
177
+ </div>
178
+ </div>
179
+ <p class="text-gray-300 text-sm mb-4">TensorFlow model serving with auto-scaling and monitoring.</p>
180
+ <div class="flex items-center justify-between text-sm mb-4">
181
+ <div class="text-gray-400">
182
+ <i data-feather="calendar" class="w-4 h-4 inline mr-1"></i>
183
+ Deployed: 1 week ago
184
+ </div>
185
+ <div class="text-gray-400">
186
+ <i data-feather="activity" class="w-4 h-4 inline mr-1"></i>
187
+ 98% Uptime
188
+ </div>
189
+ </div>
190
+ <div class="flex space-x-2">
191
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
192
+ <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
193
+ Update
194
+ </button>
195
+ <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
196
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
197
+ Delete
198
+ </button>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Deployment 4 -->
203
+ <div class="bg-gray-800 rounded-xl border border-gray-700 deployment-card transition-all duration-300 p-6">
204
+ <div class="flex items-center justify-between mb-4">
205
+ <div class="flex items-center space-x-3">
206
+ <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center">
207
+ <i data-feather="database" class="w-6 h-6"></i>
208
+ </div>
209
+ <div>
210
+ <h3 class="font-semibold text-white">Database Service</h3>
211
+ <p class="text-sm text-gray-400">Development • Kubernetes</p>
212
+ </div>
213
+ </div>
214
+ <div class="flex items-center space-x-2">
215
+ <span class="status-failed w-3 h-3 rounded-full"></span>
216
+ <span class="text-red-400 text-sm">Failed</span>
217
+ </div>
218
+ </div>
219
+ <p class="text-gray-300 text-sm mb-4">PostgreSQL cluster with replication and backup configuration.</p>
220
+ <div class="flex items-center justify-between text-sm mb-4">
221
+ <div class="text-gray-400">
222
+ <i data-feather="calendar" class="w-4 h-4 inline mr-1"></i>
223
+ Failed: 1 hour ago
224
+ </div>
225
+ <div class="text-red-400">
226
+ <i data-feather="alert-triangle" class="w-4 h-4 inline mr-1"></i>
227
+ Resource limit exceeded
228
+ </div>
229
+ </div>
230
+ <div class="flex space-x-2">
231
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
232
+ <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
233
+ Retry
234
+ </button>
235
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors">
236
+ <i data-feather="bar-chart" class="w-4 h-4 inline mr-2"></i>
237
+ Debug
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Quick Deploy Section -->
245
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
246
+ <div class="bg-gray-800 rounded-xl border border-gray-700 p-8">
247
+ <h2 class="text-2xl font-bold text-white mb-6">Quick Deploy</h2>
248
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
249
+ <div class="bg-gray-700/50 rounded-lg p-6 border border-gray-600 hover:border-red-500 transition-all cursor-pointer group">
250
+ <div class="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
251
+ <i data-feather="cloud" class="w-8 h-8"></i>
252
+ </div>
253
+ <h3 class="text-lg font-semibold text-white mb-2">Vercel</h3>
254
+ <p class="text-gray-400 text-sm">Deploy frontend applications with zero configuration</p>
255
+ </div>
256
+ <div class="bg-gray-700/50 rounded-lg p-6 border border-gray-600 hover:border-red-500 transition-all cursor-pointer group">
257
+ <div class="w-16 h-16 bg-green-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
258
+ <i data-feather="server" class="w-8 h-8"></i>
259
+ </div>
260
+ <h3 class="text-lg font-semibold text-white mb-2">Docker</h3>
261
+ <p class="text-gray-400 text-sm">Containerized deployments with custom Docker images</p>
262
+ </div>
263
+ <div class="bg-gray-700/50 rounded-lg p-6 border border-gray-600 hover:border-red-500 transition-all cursor-pointer group">
264
+ <div class="w-16 h-16 bg-purple-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
265
+ <i data-feather="box" class="w-8 h-8"></i>
266
+ </div>
267
+ <h3 class="text-lg font-semibold text-white mb-2">Kubernetes</h3>
268
+ <p class="text-gray-400 text-sm">Scalable container orchestration with auto-healing</p>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Statistics -->
275
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
276
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
277
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
278
+ <div class="flex items-center justify-between">
279
+ <div>
280
+ <p class="text-gray-400 text-sm">Active Deployments</p>
281
+ <p class="text-2xl font-bold text-white">8</p>
282
+ </div>
283
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
284
+ <i data-feather="play" class="w-6 h-6 text-green-400"></i>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
289
+ <div class="flex items-center justify-between">
290
+ <div>
291
+ <p class="text-gray-400 text-sm">Total Deployments</p>
292
+ <p class="text-2xl font-bold text-white">24</p>
293
+ </div>
294
+ <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
295
+ <i data-feather="cloud" class="w-6 h-6 text-blue-400"></i>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
300
+ <div class="flex items-center justify-between">
301
+ <div>
302
+ <p class="text-gray-400 text-sm">Uptime</p>
303
+ <p class="text-2xl font-bold text-white">99.8%</p>
304
+ </div>
305
+ <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
306
+ <i data-feather="trending-up" class="w-6 h-6 text-purple-400"></i>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
311
+ <div class="flex items-center justify-between">
312
+ <div>
313
+ <p class="text-gray-400 text-sm">Failed Deployments</p>
314
+ <p class="text-2xl font-bold text-white">2</p>
315
+ </div>
316
+ <div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center">
317
+ <i data-feather="alert-triangle" class="w-6 h-6 text-red-400"></i>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <script>
325
+ feather.replace();
326
+ </script>
327
+ </body>
328
+ </html>
index.html CHANGED
@@ -36,20 +36,19 @@
36
  <span class="text-xl font-bold text-white">CodeForge-AI</span>
37
  </div>
38
  <div class="hidden md:flex space-x-6">
39
- <a href="workspaces.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</a>
40
- <a href="templates.html" class="text-gray-300 hover:text-white transition-colors">Templates</a>
41
- <a href="deployments.html" class="text-gray-300 hover:text-white transition-colors">Deployments</a>
 
42
  <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a>
43
- <a href="installation.html" class="text-red-400 hover:text-red-300 transition-colors">Installation</a>
44
- <a href="admin-login.html" class="text-gray-300 hover:text-white transition-colors">Admin</a>
45
  </div>
46
  </div>
47
  <div class="flex items-center space-x-4">
48
- <a href="workspaces.html" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
49
  Start Coding
50
  </a>
51
- <a href="admin-login.html" class="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
52
- Admin Panel
53
  </a>
54
  <button class="text-gray-300 hover:text-white transition-colors">
55
  <i data-feather="user" class="w-5 h-5"></i>
@@ -70,13 +69,13 @@
70
  The autonomous development platform that brings AI-powered coding, secure containers, and instant deployment to your fingertips.
71
  </p>
72
  <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
73
- <a href="workspaces.html" class="bg-red-500 hover:bg-red-600 px-8 py-4 rounded-xl text-white font-semibold text-lg transition-all transform hover:scale-105">
74
  <i data-feather="play" class="w-5 h-5 inline mr-2"></i>
75
  Launch Workspace
76
  </a>
77
- <a href="documentation.html" class="border border-red-500 text-red-400 hover:bg-red-500/10 px-8 py-4 rounded-xl font-semibold text-lg transition-all">
78
- <i data-feather="book-open" class="w-5 h-5 inline mr-2"></i>
79
- View Demo
80
  </a>
81
  </div>
82
  </div>
 
36
  <span class="text-xl font-bold text-white">CodeForge-AI</span>
37
  </div>
38
  <div class="hidden md:flex space-x-6">
39
+ <a href="workspace-manager.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</a>
40
+ <a href="ai-editor.html" class="text-gray-300 hover:text-white transition-colors">AI Editor</a>
41
+ <a href="deployment-manager.html" class="text-gray-300 hover:text-white transition-colors">Deployments</a>
42
+ <a href="container-manager.html" class="text-gray-300 hover:text-white transition-colors">Containers</a>
43
  <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a>
 
 
44
  </div>
45
  </div>
46
  <div class="flex items-center space-x-4">
47
+ <a href="workspace-manager.html" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
48
  Start Coding
49
  </a>
50
+ <a href="ai-editor.html" class="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
51
+ AI Editor
52
  </a>
53
  <button class="text-gray-300 hover:text-white transition-colors">
54
  <i data-feather="user" class="w-5 h-5"></i>
 
69
  The autonomous development platform that brings AI-powered coding, secure containers, and instant deployment to your fingertips.
70
  </p>
71
  <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
72
+ <a href="workspace-manager.html" class="bg-red-500 hover:bg-red-600 px-8 py-4 rounded-xl text-white font-semibold text-lg transition-all transform hover:scale-105">
73
  <i data-feather="play" class="w-5 h-5 inline mr-2"></i>
74
  Launch Workspace
75
  </a>
76
+ <a href="ai-editor.html" class="border border-red-500 text-red-400 hover:bg-red-500/10 px-8 py-4 rounded-xl font-semibold text-lg transition-all">
77
+ <i data-feather="zap" class="w-5 h-5 inline mr-2"></i>
78
+ Try AI Editor
79
  </a>
80
  </div>
81
  </div>
workspace-manager.html ADDED
@@ -0,0 +1,265 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Workspace Manager | CodeForge-AI</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
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>
11
+ <style>
12
+ .workspace-card:hover {
13
+ transform: translateY(-4px);
14
+ box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.1), 0 10px 10px -5px rgba(239, 68, 68, 0.04);
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="bg-gray-900 text-white min-h-screen">
19
+ <!-- Navigation -->
20
+ <nav class="bg-gray-800 border-b border-red-500/20 sticky top-0 z-50">
21
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
22
+ <div class="flex justify-between items-center h-16">
23
+ <div class="flex items-center space-x-4">
24
+ <a href="index.html" class="flex items-center space-x-2">
25
+ <div class="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
26
+ <i data-feather="code" class="w-4 h-4"></i>
27
+ </div>
28
+ <span class="text-xl font-bold text-white">CodeForge-AI</span>
29
+ </a>
30
+ <div class="hidden md:flex space-x-6">
31
+ <a href="workspace-manager.html" class="text-red-400 hover:text-red-300 transition-colors">Workspaces</a>
32
+ <a href="ai-editor.html" class="text-gray-300 hover:text-white transition-colors">AI Editor</a>
33
+ <a href="deployment-manager.html" class="text-gray-300 hover:text-white transition-colors">Deployments</a>
34
+ <a href="container-manager.html" class="text-gray-300 hover:text-white transition-colors">Containers</a>
35
+ <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a>
36
+ </div>
37
+ </div>
38
+ <div class="flex items-center space-x-4">
39
+ <a href="workspace.html" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
40
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
41
+ New Workspace
42
+ </a>
43
+ <button class="text-gray-300 hover:text-white transition-colors">
44
+ <i data-feather="user" class="w-5 h-5"></i>
45
+ </button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- Header -->
52
+ <div class="bg-gray-800/50 border-b border-gray-700">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
54
+ <div class="flex items-center justify-between">
55
+ <div>
56
+ <h1 class="text-3xl font-bold text-white mb-2">Workspace Manager</h1>
57
+ <p class="text-gray-400">Manage your development environments and AI-assisted coding sessions</p>
58
+ </div>
59
+ <div class="flex space-x-4">
60
+ <div class="relative">
61
+ <input type="text" placeholder="Search workspaces..." class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 pl-10 text-white placeholder-gray-400 focus:outline-none focus:border-red-500">
62
+ <i data-feather="search" class="w-4 h-4 text-gray-400 absolute left-3 top-3"></i>
63
+ </div>
64
+ <select class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-red-500">
65
+ <option>All Workspaces</option>
66
+ <option>Active</option>
67
+ <option>Archived</option>
68
+ <option>Recent</option>
69
+ </select>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Workspaces Grid -->
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
77
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
78
+ <!-- Workspace 1 -->
79
+ <div class="bg-gray-800 rounded-xl border border-gray-700 workspace-card transition-all duration-300 p-6">
80
+ <div class="flex items-center justify-between mb-4">
81
+ <div class="flex items-center space-x-3">
82
+ <div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center">
83
+ <i data-feather="code" class="w-5 h-5"></i>
84
+ </div>
85
+ <div>
86
+ <h3 class="font-semibold text-white">Python Data Analysis</h3>
87
+ <p class="text-sm text-gray-400">Last active: 2 hours ago</p>
88
+ </div>
89
+ </div>
90
+ <div class="flex space-x-2">
91
+ <button class="text-gray-400 hover:text-red-400 transition-colors">
92
+ <i data-feather="play" class="w-4 h-4"></i>
93
+ </button>
94
+ <button class="text-gray-400 hover:text-red-400 transition-colors">
95
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
96
+ </button>
97
+ </div>
98
+ </div>
99
+ <p class="text-gray-300 text-sm mb-4">Data analysis project with pandas and matplotlib for customer insights.</p>
100
+ <div class="flex items-center justify-between text-sm">
101
+ <div class="flex items-center space-x-4 text-gray-400">
102
+ <span class="flex items-center">
103
+ <i data-feather="cpu" class="w-3 h-3 mr-1"></i>
104
+ 2GB RAM
105
+ </span>
106
+ <span class="flex items-center">
107
+ <i data-feather="clock" class="w-3 h-3 mr-1"></i>
108
+ Python 3.11
109
+ </span>
110
+ </div>
111
+ <div class="bg-green-500/20 text-green-400 px-2 py-1 rounded-full text-xs">
112
+ Active
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Workspace 2 -->
118
+ <div class="bg-gray-800 rounded-xl border border-gray-700 workspace-card transition-all duration-300 p-6">
119
+ <div class="flex items-center justify-between mb-4">
120
+ <div class="flex items-center space-x-3">
121
+ <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
122
+ <i data-feather="code" class="w-5 h-5"></i>
123
+ </div>
124
+ <div>
125
+ <h3 class="font-semibold text-white">React Web App</h3>
126
+ <p class="text-sm text-gray-400">Last active: 1 day ago</p>
127
+ </div>
128
+ </div>
129
+ <div class="flex space-x-2">
130
+ <button class="text-gray-400 hover:text-red-400 transition-colors">
131
+ <i data-feather="play" class="w-4 h-4"></i>
132
+ </button>
133
+ <button class="text-gray-400 hover:text-red-400 transition-colors">
134
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
135
+ </button>
136
+ </div>
137
+ </div>
138
+ <p class="text-gray-300 text-sm mb-4">Modern React application with TypeScript and Tailwind CSS.</p>
139
+ <div class="flex items-center justify-between text-sm">
140
+ <div class="flex items-center space-x-4 text-gray-400">
141
+ <span class="flex items-center">
142
+ <i data-feather="cpu" class="w-3 h-3 mr-1"></i>
143
+ 4GB RAM
144
+ </span>
145
+ <span class="flex items-center">
146
+ <i data-feather="clock" class="w-3 h-3 mr-1"></i>
147
+ Node.js 18
148
+ </span>
149
+ </div>
150
+ <div class="bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded-full text-xs">
151
+ Paused
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Workspace 3 -->
157
+ <div class="bg-gray-800 rounded-xl border border-gray-700 workspace-card transition-all duration-300 p-6">
158
+ <div class="flex items-center justify-between mb-4">
159
+ <div class="flex items-center space-x-3">
160
+ <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
161
+ <i data-feather="code" class="w-5 h-5"></i>
162
+ </div>
163
+ <div>
164
+ <h3 class="font-semibold text-white">Machine Learning</h3>
165
+ <p class="text-sm text-gray-400">Last active: 3 days ago</p>
166
+ </div>
167
+ </div>
168
+ <div class="flex space-x-2">
169
+ <button class="text-gray-400 hover:text-red-400 transition-colors">
170
+ <i data-feather="play" class="w-4 h-4"></i>
171
+ </button>
172
+ <button class="text-gray-400 hover:text-red-400 transition-colors">
173
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
174
+ </button>
175
+ </div>
176
+ </div>
177
+ <p class="text-gray-300 text-sm mb-4">TensorFlow project for image classification and model training.</p>
178
+ <div class="flex items-center justify-between text-sm">
179
+ <div class="flex items-center space-x-4 text-gray-400">
180
+ <span class="flex items-center">
181
+ <i data-feather="cpu" class="w-3 h-3 mr-1"></i>
182
+ 8GB RAM
183
+ </span>
184
+ <span class="flex items-center">
185
+ <i data-feather="clock" class="w-3 h-3 mr-1"></i>
186
+ Python 3.9
187
+ </span>
188
+ </div>
189
+ <div class="bg-gray-500/20 text-gray-400 px-2 py-1 rounded-full text-xs">
190
+ Stopped
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- New Workspace Card -->
196
+ <div class="bg-gray-800/50 rounded-xl border-2 border-dashed border-gray-600 hover:border-red-500 transition-all duration-300 p-6 flex flex-col items-center justify-center cursor-pointer group">
197
+ <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-red-500 transition-colors">
198
+ <i data-feather="plus" class="w-8 h-8 text-gray-400 group-hover:text-white"></i>
199
+ </div>
200
+ <h3 class="text-lg font-semibold text-white mb-2">Create New Workspace</h3>
201
+ <p class="text-gray-400 text-center text-sm">Start a new development environment with your preferred stack</p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Statistics Section -->
207
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
208
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
209
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
210
+ <div class="flex items-center justify-between">
211
+ <div>
212
+ <p class="text-gray-400 text-sm">Active Workspaces</p>
213
+ <p class="text-2xl font-bold text-white">3</p>
214
+ </div>
215
+ <div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center">
216
+ <i data-feather="play" class="w-6 h-6 text-red-400"></i>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
221
+ <div class="flex items-center justify-between">
222
+ <div>
223
+ <p class="text-gray-400 text-sm">Total Workspaces</p>
224
+ <p class="text-2xl font-bold text-white">12</p>
225
+ </div>
226
+ <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
227
+ <i data-feather="folder" class="w-6 h-6 text-blue-400"></i>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
232
+ <div class="flex items-center justify-between">
233
+ <div>
234
+ <p class="text-gray-400 text-sm">Storage Used</p>
235
+ <p class="text-2xl font-bold text-white">4.2GB</p>
236
+ </div>
237
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
238
+ <i data-feather="hard-drive" class="w-6 h-6 text-green-400"></i>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
243
+ <div class="flex items-center justify-between">
244
+ <div>
245
+ <p class="text-gray-400 text-sm">AI Requests</p>
246
+ <p class="text-2xl font-bold text-white">87/100</p>
247
+ </div>
248
+ <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
249
+ <i data-feather="zap" class="w-6 h-6 text-purple-400"></i>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <script>
257
+ feather.replace();
258
+
259
+ // Add click handler for new workspace card
260
+ document.querySelector('.border-dashed').addEventListener('click', function() {
261
+ window.location.href = 'workspace.html';
262
+ });
263
+ </script>
264
+ </body>
265
+ </html>