Hugging Face's logo

Spaces:
docto41
/
supper-ia
Running

App Files Community
docto41 commited on
Commit
34b90ed
·
verified ·
1 Parent(s): 7debccc

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +273 -247
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Super AI 10,000X</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>
@@ -51,6 +51,23 @@
51
  .glow:hover {
52
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
53
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  </style>
55
  </head>
56
  <body class="bg-gray-900 text-white min-h-screen flex flex-col">
@@ -59,302 +76,311 @@
59
  <div class="container mx-auto flex justify-between items-center">
60
  <div class="flex items-center space-x-3">
61
  <div class="ai-avatar bg-white/20 p-3 rounded-full">
62
- <i class="fas fa-robot text-3xl"></i>
63
  </div>
64
  <div>
65
- <h1 class="text-2xl font-bold">SUPER AI 10,000X</h1>
66
- <p class="text-sm opacity-80">The most powerful AI assistant</p>
67
  </div>
68
  </div>
69
  <div class="flex space-x-4">
70
  <div class="flex items-center space-x-2">
71
  <span class="h-3 w-3 rounded-full bg-green-400 pulse-dot"></span>
72
- <span class="text-sm">Online</span>
73
  </div>
74
  <button class="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full transition">
75
- <i class="fas fa-cog"></i>
76
  </button>
77
  </div>
78
  </div>
79
  </header>
80
 
81
  <!-- Main Content -->
82
- <main class="flex-1 container mx-auto p-4 flex flex-col md:flex-row gap-6">
83
- <!-- Sidebar -->
84
- <aside class="w-full md:w-64 bg-gray-800 rounded-xl p-4 h-fit">
85
- <h2 class="font-bold text-lg mb-4 flex items-center">
86
- <i class="fas fa-bolt mr-2 text-yellow-400"></i> Capabilities
87
- </h2>
88
- <ul class="space-y-2">
89
- <li class="flex items-center p-2 rounded-lg hover:bg-gray-700 cursor-pointer transition">
90
- <i class="fas fa-brain mr-3 text-blue-400"></i>
91
- <span>Super Intelligence</span>
92
- </li>
93
- <li class="flex items-center p-2 rounded-lg hover:bg-gray-700 cursor-pointer transition">
94
- <i class="fas fa-language mr-3 text-green-400"></i>
95
- <span>1000+ Languages</span>
96
- </li>
97
- <li class="flex items-center p-2 rounded-lg hover:bg-gray-700 cursor-pointer transition">
98
- <i class="fas fa-lightbulb mr-3 text-yellow-400"></i>
99
- <span>Creative Genius</span>
100
- </li>
101
- <li class="flex items-center p-2 rounded-lg hover:bg-gray-700 cursor-pointer transition">
102
- <i class="fas fa-chart-line mr-3 text-purple-400"></i>
103
- <span>Data Analysis</span>
104
- </li>
105
- <li class="flex items-center p-2 rounded-lg hover:bg-gray-700 cursor-pointer transition">
106
- <i class="fas fa-eye mr-3 text-red-400"></i>
107
- <span>Computer Vision</span>
108
- </li>
109
- </ul>
110
-
111
- <div class="mt-6 pt-4 border-t border-gray-700">
112
- <h2 class="font-bold text-lg mb-4 flex items-center">
113
- <i class="fas fa-memory mr-2 text-blue-400"></i> Memory
114
- </h2>
115
- <div class="bg-gray-700 rounded-full h-2 mb-2">
116
- <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 98%"></div>
117
- </div>
118
- <p class="text-sm text-gray-400">98% of human knowledge</p>
119
  </div>
120
- </aside>
121
 
122
- <!-- Chat Area -->
123
- <div class="flex-1 flex flex-col">
124
- <!-- Chat Header -->
125
- <div class="bg-gray-800 rounded-xl p-4 mb-4 flex justify-between items-center">
126
- <div>
127
- <h2 class="font-bold text-xl">AI Assistant</h2>
128
- <p class="text-sm text-gray-400">Ready to assist with anything</p>
 
 
 
 
 
 
 
 
 
129
  </div>
130
- <div class="flex space-x-2">
131
- <button class="bg-blue-500 hover:bg-blue-600 p-2 rounded-full glow transition">
132
- <i class="fas fa-microphone"></i>
133
- </button>
134
- <button class="bg-purple-500 hover:bg-purple-600 p-2 rounded-full glow transition">
135
- <i class="fas fa-camera"></i>
136
- </button>
 
137
  </div>
138
- </div>
 
 
 
139
 
140
- <!-- Chat Messages -->
141
- <div class="flex-1 bg-gray-800 rounded-xl p-4 mb-4 overflow-y-auto max-h-[60vh]">
142
- <div class="space-y-4">
143
- <!-- AI Message -->
144
- <div class="message-in flex">
145
- <div class="bg-blue-500/20 p-3 rounded-full mr-3">
146
- <i class="fas fa-robot"></i>
147
- </div>
148
- <div class="bg-gray-700/50 p-4 rounded-xl max-w-[80%]">
149
- <p>Hello! I'm your Super AI 10,000X assistant. I'm 10,000 times more powerful than standard AI. How can I help you today?</p>
150
- <div class="flex space-x-2 mt-2">
151
- <span class="text-xs px-2 py-1 bg-blue-500/30 rounded-full">#intelligent</span>
152
- <span class="text-xs px-2 py-1 bg-purple-500/30 rounded-full">#powerful</span>
153
- </div>
154
- </div>
155
- </div>
156
 
157
- <!-- User Message -->
158
- <div class="message-out flex justify-end">
159
- <div class="bg-gray-700 p-4 rounded-xl max-w-[80%]">
160
- <p>What makes you 10,000 times more powerful?</p>
161
- </div>
162
- <div class="bg-gray-600/20 p-3 rounded-full ml-3">
163
- <i class="fas fa-user"></i>
164
- </div>
165
- </div>
166
 
167
- <!-- AI Message -->
168
- <div class="message-in flex">
169
- <div class="bg-blue-500/20 p-3 rounded-full mr-3">
170
- <i class="fas fa-robot"></i>
171
- </div>
172
- <div class="bg-gray-700/50 p-4 rounded-xl max-w-[80%]">
173
- <p>My neural network has 10,000x more parameters than standard AI models. I can process information at quantum speeds, understand context at unprecedented levels, and generate insights that would take other AIs years to compute.</p>
174
- <div class="mt-3 p-3 bg-gray-800 rounded-lg">
175
- <div class="flex items-center mb-2">
176
- <div class="h-2 w-2 rounded-full bg-green-400 mr-2"></div>
177
- <span class="text-sm font-medium">Processing Speed: 10,000x faster</span>
178
- </div>
179
- <div class="flex items-center mb-2">
180
- <div class="h-2 w-2 rounded-full bg-blue-400 mr-2"></div>
181
- <span class="text-sm font-medium">Knowledge Base: 10,000x larger</span>
182
- </div>
183
- <div class="flex items-center">
184
- <div class="h-2 w-2 rounded-full bg-purple-400 mr-2"></div>
185
- <span class="text-sm font-medium">Creativity: 10,000x more innovative</span>
186
- </div>
187
- </div>
188
- </div>
189
- </div>
190
  </div>
191
- </div>
192
-
193
- <!-- Input Area -->
194
- <div class="bg-gray-800 rounded-xl p-4">
195
- <div class="flex items-center">
196
- <input type="text" placeholder="Ask me anything..."
197
- class="flex-1 bg-gray-700 border border-gray-600 rounded-l-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
198
  <button class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-r-full glow transition">
199
- <i class="fas fa-paper-plane"></i>
200
- </button>
201
- </div>
202
- <div class="flex justify-center mt-3 space-x-4">
203
- <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full transition">
204
- <i class="fas fa-lightbulb mr-1"></i> Ideas
205
- </button>
206
- <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full transition">
207
- <i class="fas fa-code mr-1"></i> Code
208
- </button>
209
- <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full transition">
210
- <i class="fas fa-chart-line mr-1"></i> Analyze
211
- </button>
212
- <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full transition">
213
- <i class="fas fa-magic mr-1"></i> Create
214
  </button>
215
  </div>
216
  </div>
217
- </div>
218
-
219
- <!-- Status Panel -->
220
- <aside class="w-full md:w-72 bg-gray-800 rounded-xl p-4 h-fit">
221
- <h2 class="font-bold text-lg mb-4 flex items-center">
222
- <i class="fas fa-chart-bar mr-2 text-green-400"></i> System Status
223
- </h2>
224
- <div class="space-y-4">
225
- <div>
226
- <div class="flex justify-between mb-1">
227
- <span>Processing Power</span>
228
- <span class="font-mono">10,000 TFLOPS</span>
 
 
229
  </div>
230
- <div class="bg-gray-700 rounded-full h-2">
231
- <div class="bg-gradient-to-r from-green-400 to-blue-500 h-2 rounded-full" style="width: 92%"></div>
 
 
 
 
 
 
 
232
  </div>
233
  </div>
234
- <div>
235
- <div class="flex justify-between mb-1">
236
- <span>Memory Usage</span>
237
- <span class="font-mono">1.2 PB</span>
 
 
 
 
 
 
 
 
 
 
 
 
238
  </div>
239
- <div class="bg-gray-700 rounded-full h-2">
240
- <div class="bg-gradient-to-r from-purple-400 to-pink-500 h-2 rounded-full" style="width: 65%"></div>
 
 
 
 
 
 
 
 
 
241
  </div>
 
 
242
  </div>
243
- <div>
244
- <div class="flex justify-between mb-1">
245
- <span>Neural Activity</span>
246
- <span class="font-mono">10^18 ops</span>
247
  </div>
248
- <div class="bg-gray-700 rounded-full h-2">
249
- <div class="bg-gradient-to-r from-yellow-400 to-red-500 h-2 rounded-full" style="width: 78%"></div>
 
 
 
 
250
  </div>
 
 
251
  </div>
252
  </div>
253
-
254
- <div class="mt-6 pt-4 border-t border-gray-700">
255
- <h2 class="font-bold text-lg mb-4 flex items-center">
256
- <i class="fas fa-bolt mr-2 text-yellow-400"></i> Quick Actions
257
- </h2>
258
- <div class="grid grid-cols-2 gap-3">
259
- <button class="bg-gradient-to-br from-blue-500 to-blue-600 p-3 rounded-lg flex flex-col items-center glow transition">
260
- <i class="fas fa-search text-2xl mb-1"></i>
261
- <span class="text-sm">Research</span>
262
- </button>
263
- <button class="bg-gradient-to-br from-purple-500 to-purple-600 p-3 rounded-lg flex flex-col items-center glow transition">
264
- <i class="fas fa-file-alt text-2xl mb-1"></i>
265
- <span class="text-sm">Summarize</span>
266
- </button>
267
- <button class="bg-gradient-to-br from-green-500 to-green-600 p-3 rounded-lg flex flex-col items-center glow transition">
268
- <i class="fas fa-comments text-2xl mb-1"></i>
269
- <span class="text-sm">Translate</span>
270
- </button>
271
- <button class="bg-gradient-to-br from-red-500 to-red-600 p-3 rounded-lg flex flex-col items-center glow transition">
272
- <i class="fas fa-cogs text-2xl mb-1"></i>
273
- <span class="text-sm">Optimize</span>
274
- </button>
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
  </div>
277
- </aside>
278
  </main>
279
 
280
  <!-- Footer -->
281
- <footer class="bg-gray-800 p-4 text-center text-sm text-gray-400">
282
- <p>Super AI 10,000X v1.0 | Quantum Neural Network Activated | © 2023 Future Intelligence Systems</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
283
  </footer>
284
 
285
  <script>
286
- // Simple chat functionality
287
  document.addEventListener('DOMContentLoaded', function() {
288
- const inputField = document.querySelector('input[type="text"]');
289
- const sendButton = document.querySelector('.fa-paper-plane').parentElement;
290
- const chatArea = document.querySelector('.space-y-4');
291
 
292
- function addMessage(text, isUser) {
293
- const messageDiv = document.createElement('div');
294
- messageDiv.className = `flex ${isUser ? 'justify-end message-out' : 'message-in'}`;
295
-
296
- const avatarDiv = document.createElement('div');
297
- avatarDiv.className = isUser ? 'bg-gray-600/20 p-3 rounded-full ml-3' : 'bg-blue-500/20 p-3 rounded-full mr-3';
298
-
299
- const avatarIcon = document.createElement('i');
300
- avatarIcon.className = isUser ? 'fas fa-user' : 'fas fa-robot';
301
- avatarDiv.appendChild(avatarIcon);
302
-
303
- const contentDiv = document.createElement('div');
304
- contentDiv.className = isUser ? 'bg-gray-700 p-4 rounded-xl max-w-[80%]' : 'bg-gray-700/50 p-4 rounded-xl max-w-[80%]';
305
-
306
- const textP = document.createElement('p');
307
- textP.textContent = text;
308
- contentDiv.appendChild(textP);
309
-
310
- if (!isUser) {
311
- const tagsDiv = document.createElement('div');
312
- tagsDiv.className = 'flex space-x-2 mt-2';
313
 
314
- const tag1 = document.createElement('span');
315
- tag1.className = 'text-xs px-2 py-1 bg-blue-500/30 rounded-full';
316
- tag1.textContent = '#intelligent';
317
-
318
- const tag2 = document.createElement('span');
319
- tag2.className = 'text-xs px-2 py-1 bg-purple-500/30 rounded-full';
320
- tag2.textContent = '#powerful';
321
-
322
- tagsDiv.appendChild(tag1);
323
- tagsDiv.appendChild(tag2);
324
- contentDiv.appendChild(tagsDiv);
325
- }
326
-
327
- messageDiv.appendChild(isUser ? contentDiv : avatarDiv);
328
- messageDiv.appendChild(isUser ? avatarDiv : contentDiv);
329
-
330
- chatArea.appendChild(messageDiv);
331
- chatArea.scrollTop = chatArea.scrollHeight;
332
- }
333
 
334
- function sendMessage() {
335
- const text = inputField.value.trim();
336
- if (text) {
337
- addMessage(text, true);
338
- inputField.value = '';
339
-
340
- // Simulate AI response after a short delay
341
- setTimeout(() => {
342
- const responses = [
343
- "I've analyzed your query with my quantum neural network. The results are fascinating...",
344
- "Processing your request at 10,000x speed... Here's what I've discovered:",
345
- "My advanced algorithms indicate the following insights:",
346
- "After consulting my vast knowledge base, I can confirm that:"
347
- ];
348
- const randomResponse = responses[Math.floor(Math.random() * responses.length)];
349
- addMessage(randomResponse, false);
350
- }, 1000);
351
  }
352
- }
353
 
354
- sendButton.addEventListener('click', sendMessage);
355
- inputField.addEventListener('keypress', function(e) {
356
- if (e.key === 'Enter') {
357
- sendMessage();
 
 
 
 
 
 
 
 
358
  }
359
  });
360
 
@@ -367,7 +393,7 @@
367
  }
368
  });
369
  button.addEventListener('mouseleave', function() {
370
- if (this.classList.contains('glow') && !this.classList.contains('fa-paper-plane')) {
371
  this.classList.remove('glow');
372
  }
373
  });
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SCRYOT - AI Code & Website Generator</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>
 
51
  .glow:hover {
52
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
53
  }
54
+ .code-editor {
55
+ background: #1e293b;
56
+ border-radius: 0.5rem;
57
+ font-family: 'Courier New', monospace;
58
+ }
59
+ .preview-frame {
60
+ background: white;
61
+ border-radius: 0.5rem;
62
+ min-height: 300px;
63
+ }
64
+ .language-tab {
65
+ transition: all 0.2s ease;
66
+ }
67
+ .language-tab.active {
68
+ background: #3b82f6;
69
+ color: white;
70
+ }
71
  </style>
72
  </head>
73
  <body class="bg-gray-900 text-white min-h-screen flex flex-col">
 
76
  <div class="container mx-auto flex justify-between items-center">
77
  <div class="flex items-center space-x-3">
78
  <div class="ai-avatar bg-white/20 p-3 rounded-full">
79
+ <i class="fas fa-code text-3xl"></i>
80
  </div>
81
  <div>
82
+ <h1 class="text-2xl font-bold">SCRYOT</h1>
83
+ <p class="text-sm opacity-80">AI Code Generator & Automatic Website Builder</p>
84
  </div>
85
  </div>
86
  <div class="flex space-x-4">
87
  <div class="flex items-center space-x-2">
88
  <span class="h-3 w-3 rounded-full bg-green-400 pulse-dot"></span>
89
+ <span class="text-sm">Generating Code</span>
90
  </div>
91
  <button class="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full transition">
92
+ <i class="fas fa-user"></i>
93
  </button>
94
  </div>
95
  </div>
96
  </header>
97
 
98
  <!-- Main Content -->
99
+ <main class="flex-1 container mx-auto p-4">
100
+ <!-- Hero Section -->
101
+ <section class="mb-12 text-center">
102
+ <h2 class="text-4xl font-bold mb-4">Generate <span class="text-blue-400">Code</span> & <span class="text-purple-400">Websites</span> with AI</h2>
103
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
104
+ Describe what you need and SCRYOT will generate complete code snippets or entire websites automatically.
105
+ </p>
106
+ <div class="flex justify-center gap-4">
107
+ <button class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-full glow transition flex items-center">
108
+ <i class="fas fa-code mr-2"></i> Generate Code
109
+ </button>
110
+ <button class="bg-purple-500 hover:bg-purple-600 px-6 py-3 rounded-full glow transition flex items-center">
111
+ <i class="fas fa-globe mr-2"></i> Build Website
112
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  </div>
114
+ </section>
115
 
116
+ <!-- Generator Section -->
117
+ <section class="mb-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
118
+ <!-- Code Generator -->
119
+ <div class="bg-gray-800 rounded-xl p-6">
120
+ <div class="flex justify-between items-center mb-6">
121
+ <h3 class="text-xl font-bold flex items-center">
122
+ <i class="fas fa-terminal mr-2 text-blue-400"></i> Code Generator
123
+ </h3>
124
+ <div class="flex space-x-2">
125
+ <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
126
+ <i class="fas fa-copy"></i>
127
+ </button>
128
+ <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
129
+ <i class="fas fa-download"></i>
130
+ </button>
131
+ </div>
132
  </div>
133
+
134
+ <div class="mb-4 flex space-x-2 overflow-x-auto pb-2">
135
+ <button class="language-tab active px-4 py-2 rounded-full">JavaScript</button>
136
+ <button class="language-tab px-4 py-2 rounded-full">Python</button>
137
+ <button class="language-tab px-4 py-2 rounded-full">HTML</button>
138
+ <button class="language-tab px-4 py-2 rounded-full">CSS</button>
139
+ <button class="language-tab px-4 py-2 rounded-full">PHP</button>
140
+ <button class="language-tab px-4 py-2 rounded-full">SQL</button>
141
  </div>
142
+
143
+ <div class="code-editor p-4 mb-4">
144
+ <pre><code class="text-green-400">// Describe the code you need below
145
+ // Example: "Create a React component for a login form"
146
 
147
+ function LoginForm() {
148
+ const [email, setEmail] = useState('');
149
+ const [password, setPassword] = useState('');
 
 
 
 
 
 
 
 
 
 
 
 
 
150
 
151
+ const handleSubmit = (e) => {
152
+ e.preventDefault();
153
+ // Authentication logic here
154
+ };
 
 
 
 
 
155
 
156
+ return (
157
+ &lt;form onSubmit={handleSubmit}&gt;
158
+ &lt;input
159
+ type="email"
160
+ value={email}
161
+ onChange={(e) => setEmail(e.target.value)}
162
+ placeholder="Email"
163
+ /&gt;
164
+ &lt;input
165
+ type="password"
166
+ value={password}
167
+ onChange={(e) => setPassword(e.target.value)}
168
+ placeholder="Password"
169
+ /&gt;
170
+ &lt;button type="submit"&gt;Login&lt;/button&gt;
171
+ &lt;/form&gt;
172
+ );
173
+ }</code></pre>
 
 
 
 
 
174
  </div>
175
+
176
+ <div class="flex">
177
+ <input
178
+ type="text"
179
+ placeholder="Describe the code you need..."
180
+ class="flex-1 bg-gray-700 border border-gray-600 rounded-l-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
181
+ >
182
  <button class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-r-full glow transition">
183
+ <i class="fas fa-bolt"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </button>
185
  </div>
186
  </div>
187
+
188
+ <!-- Website Builder -->
189
+ <div class="bg-gray-800 rounded-xl p-6">
190
+ <div class="flex justify-between items-center mb-6">
191
+ <h3 class="text-xl font-bold flex items-center">
192
+ <i class="fas fa-globe mr-2 text-purple-400"></i> Automatic Website Builder
193
+ </h3>
194
+ <div class="flex space-x-2">
195
+ <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
196
+ <i class="fas fa-expand"></i>
197
+ </button>
198
+ <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
199
+ <i class="fas fa-download"></i>
200
+ </button>
201
  </div>
202
+ </div>
203
+
204
+ <div class="mb-4">
205
+ <div class="preview-frame p-4 mb-4">
206
+ <div class="text-gray-800">
207
+ <h1 class="text-2xl font-bold mb-4">Your Generated Website</h1>
208
+ <p class="mb-4">This is a preview of what your website will look like.</p>
209
+ <button class="bg-blue-500 text-white px-4 py-2 rounded">Example Button</button>
210
+ </div>
211
  </div>
212
  </div>
213
+
214
+ <div class="flex flex-col space-y-4">
215
+ <input
216
+ type="text"
217
+ placeholder="Website purpose (e.g., 'E-commerce site for pet products')"
218
+ class="w-full bg-gray-700 border border-gray-600 rounded-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-purple-500"
219
+ >
220
+ <div class="flex">
221
+ <input
222
+ type="text"
223
+ placeholder="Additional details..."
224
+ class="flex-1 bg-gray-700 border border-gray-600 rounded-l-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-purple-500"
225
+ >
226
+ <button class="bg-purple-500 hover:bg-purple-600 px-6 py-3 rounded-r-full glow transition">
227
+ <i class="fas fa-magic"></i>
228
+ </button>
229
  </div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- Features Section -->
235
+ <section class="mb-12">
236
+ <h2 class="text-3xl font-bold mb-8 text-center">Powerful Features</h2>
237
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
238
+ <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
239
+ <div class="text-blue-400 text-4xl mb-4">
240
+ <i class="fas fa-bolt"></i>
241
  </div>
242
+ <h3 class="text-xl font-bold mb-2">Instant Generation</h3>
243
+ <p class="text-gray-300">Get complete code snippets or entire websites in seconds with our powerful AI engine.</p>
244
  </div>
245
+ <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
246
+ <div class="text-purple-400 text-4xl mb-4">
247
+ <i class="fas fa-language"></i>
 
248
  </div>
249
+ <h3 class="text-xl font-bold mb-2">Multi-Language</h3>
250
+ <p class="text-gray-300">Generate code in all popular programming languages and frameworks.</p>
251
+ </div>
252
+ <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
253
+ <div class="text-green-400 text-4xl mb-4">
254
+ <i class="fas fa-cogs"></i>
255
  </div>
256
+ <h3 class="text-xl font-bold mb-2">Smart Customization</h3>
257
+ <p class="text-gray-300">Our AI understands context and can refine outputs based on your feedback.</p>
258
  </div>
259
  </div>
260
+ </section>
261
+
262
+ <!-- Examples Section -->
263
+ <section class="mb-12">
264
+ <h2 class="text-3xl font-bold mb-8 text-center">What You Can Create</h2>
265
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
266
+ <div class="bg-gray-800 p-4 rounded-lg hover:glow transition cursor-pointer">
267
+ <div class="bg-gray-700 h-32 rounded-lg mb-3 flex items-center justify-center">
268
+ <i class="fas fa-shopping-cart text-4xl text-blue-400"></i>
269
+ </div>
270
+ <h3 class="font-bold">E-commerce</h3>
271
+ <p class="text-sm text-gray-400">Complete online stores</p>
272
+ </div>
273
+ <div class="bg-gray-800 p-4 rounded-lg hover:glow transition cursor-pointer">
274
+ <div class="bg-gray-700 h-32 rounded-lg mb-3 flex items-center justify-center">
275
+ <i class="fas fa-blog text-4xl text-purple-400"></i>
276
+ </div>
277
+ <h3 class="font-bold">Blogs</h3>
278
+ <p class="text-sm text-gray-400">Content management systems</p>
279
+ </div>
280
+ <div class="bg-gray-800 p-4 rounded-lg hover:glow transition cursor-pointer">
281
+ <div class="bg-gray-700 h-32 rounded-lg mb-3 flex items-center justify-center">
282
+ <i class="fas fa-landmark text-4xl text-green-400"></i>
283
+ </div>
284
+ <h3 class="font-bold">Business Sites</h3>
285
+ <p class="text-sm text-gray-400">Professional company websites</p>
286
+ </div>
287
+ <div class="bg-gray-800 p-4 rounded-lg hover:glow transition cursor-pointer">
288
+ <div class="bg-gray-700 h-32 rounded-lg mb-3 flex items-center justify-center">
289
+ <i class="fas fa-chart-line text-4xl text-yellow-400"></i>
290
+ </div>
291
+ <h3 class="font-bold">Dashboards</h3>
292
+ <p class="text-sm text-gray-400">Data visualization tools</p>
293
  </div>
294
  </div>
295
+ </section>
296
  </main>
297
 
298
  <!-- Footer -->
299
+ <footer class="bg-gray-800 p-6">
300
+ <div class="container mx-auto">
301
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
302
+ <div>
303
+ <h3 class="text-lg font-bold mb-4 flex items-center">
304
+ <div class="ai-avatar bg-white/20 p-2 rounded-full mr-2">
305
+ <i class="fas fa-code"></i>
306
+ </div>
307
+ SCRYOT
308
+ </h3>
309
+ <p class="text-gray-400">The most advanced AI code and website generator.</p>
310
+ </div>
311
+ <div>
312
+ <h4 class="font-bold mb-4">Product</h4>
313
+ <ul class="space-y-2">
314
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
315
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
316
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Examples</a></li>
317
+ </ul>
318
+ </div>
319
+ <div>
320
+ <h4 class="font-bold mb-4">Resources</h4>
321
+ <ul class="space-y-2">
322
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
323
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
324
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
325
+ </ul>
326
+ </div>
327
+ <div>
328
+ <h4 class="font-bold mb-4">Connect</h4>
329
+ <div class="flex space-x-4">
330
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a>
331
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-github"></i></a>
332
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-discord"></i></a>
333
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-linkedin"></i></a>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
338
+ <p>© 2023 SCRYOT AI. All rights reserved.</p>
339
+ </div>
340
+ </div>
341
  </footer>
342
 
343
  <script>
344
+ // Tab switching functionality
345
  document.addEventListener('DOMContentLoaded', function() {
346
+ const tabs = document.querySelectorAll('.language-tab');
 
 
347
 
348
+ tabs.forEach(tab => {
349
+ tab.addEventListener('click', function() {
350
+ // Remove active class from all tabs
351
+ tabs.forEach(t => t.classList.remove('active'));
352
+ // Add active class to clicked tab
353
+ this.classList.add('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
 
355
+ // In a real app, you would update the code editor content here
356
+ // based on the selected language
357
+ });
358
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
 
360
+ // Generate code button
361
+ const generateCodeBtn = document.querySelector('.fa-bolt').parentElement;
362
+ generateCodeBtn.addEventListener('click', function() {
363
+ const input = this.parentElement.previousElementSibling.querySelector('input');
364
+ if (input.value.trim()) {
365
+ // In a real app, you would send the request to your AI backend here
366
+ alert('Generating code for: ' + input.value);
367
+ } else {
368
+ alert('Please describe what code you need');
 
 
 
 
 
 
 
 
369
  }
370
+ });
371
 
372
+ // Generate website button
373
+ const generateWebsiteBtn = document.querySelector('.fa-magic').parentElement;
374
+ generateWebsiteBtn.addEventListener('click', function() {
375
+ const inputs = this.parentElement.parentElement.querySelectorAll('input');
376
+ const description = inputs[0].value.trim();
377
+ const details = inputs[1].value.trim();
378
+
379
+ if (description) {
380
+ // In a real app, you would send the request to your AI backend here
381
+ alert(`Generating website for: ${description}\nAdditional details: ${details}`);
382
+ } else {
383
+ alert('Please describe what website you need');
384
  }
385
  });
386
 
 
393
  }
394
  });
395
  button.addEventListener('mouseleave', function() {
396
+ if (this.classList.contains('glow') && !this.classList.contains('fa-bolt') && !this.classList.contains('fa-magic')) {
397
  this.classList.remove('glow');
398
  }
399
  });
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- creer moi mon propre inteligence artificiel 10000 fois puissant et intligence avev une belle interfave tres animé
 
 
1
+ creer moi mon propre inteligence artificiel 10000 fois puissant et intligence avev une belle interfave tres animé
2
+ CREER MOI UN SITE d IA GENERATEUR DE CODE ? SCRYOT ? ET SITE WEB EN AUTOMATIQUE