Hugging Face's logo

Spaces:
docto41
/
corrector
Running

App Files Community
docto41 commited on
Commit
7b68c82
·
verified ·
1 Parent(s): 06bbf4e

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +918 -244
  2. prompts.txt +6 -1
index.html CHANGED
@@ -3,314 +3,988 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Ultimate Code Corrector | AI-Powered Code Fixing</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .code-editor {
11
- background-color: #1e293b;
12
- border-radius: 0.5rem;
13
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  }
15
- .code-output {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  background-color: #0f172a;
17
- border-radius: 0.5rem;
 
 
 
 
18
  }
19
- .language-selector {
20
- background-color: #334155;
21
- color: #f8fafc;
22
  }
23
- .gradient-bg {
24
- background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #a78bfa 100%);
25
  }
26
- .pulse-animation {
27
- animation: pulse 2s infinite;
 
 
 
 
 
 
28
  }
29
- @keyframes pulse {
30
- 0% { transform: scale(1); }
31
- 50% { transform: scale(1.05); }
32
- 100% { transform: scale(1); }
33
  }
34
- .typing-indicator::after {
35
- content: '...';
36
- animation: typing 1.5s infinite;
 
 
 
 
 
37
  }
38
- @keyframes typing {
39
- 0% { content: '.'; }
40
- 33% { content: '..'; }
41
- 66% { content: '...'; }
42
  }
43
- #code-input {
44
- min-height: 380px;
45
  }
46
  </style>
47
  </head>
48
- <body class="bg-slate-900 text-slate-100 min-h-screen">
49
- <div class="container mx-auto px-4 py-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  <!-- Header -->
51
- <header class="mb-8 text-center">
52
- <div class="gradient-bg text-white rounded-xl p-6 mb-6 shadow-lg pulse-animation">
53
- <h1 class="text-4xl font-bold mb-2">Ultimate Code Corrector</h1>
54
- <p class="text-xl opacity-90">AI-powered code fixing and optimization</p>
 
 
55
  </div>
56
- <div class="max-w-3xl mx-auto bg-slate-800 p-4 rounded-lg">
57
- <p class="text-slate-300">
58
- Paste your code below and let our AI analyze, correct, and optimize it.
59
- Supports multiple programming languages with intelligent suggestions.
60
- </p>
 
 
 
 
 
61
  </div>
62
  </header>
63
 
64
- <!-- Main Content -->
65
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
66
- <!-- Input Section -->
67
- <div class="space-y-4">
68
- <div class="flex justify-between items-center">
69
- <h2 class="text-2xl font-semibold">Your Code</h2>
70
- <div class="flex items-center space-x-2">
71
- <span class="text-sm text-slate-400">Language:</span>
72
- <select id="language-select" class="language-selector px-3 py-1 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
73
- <option value="javascript">JavaScript</option>
74
- <option value="python">Python</option>
75
- <option value="java">Java</option>
76
- <option value="csharp">C#</option>
77
- <option value="php">PHP</option>
78
- <option value="cpp">C++</option>
79
- <option value="ruby">Ruby</option>
80
- <option value="go">Go</option>
81
- <option value="rust">Rust</option>
82
- <option value="typescript">TypeScript</option>
83
- </select>
84
  </div>
85
  </div>
86
-
87
- <div class="code-editor p-4">
88
- <textarea id="code-input" class="w-full h-full bg-transparent text-slate-200 font-mono text-sm focus:outline-none resize-none" placeholder="Paste your code here..."></textarea>
89
  </div>
90
-
91
- <div class="flex justify-between">
92
- <button id="clear-btn" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-md transition flex items-center space-x-2">
93
- <i class="fas fa-trash-alt"></i>
94
- <span>Clear</span>
95
- </button>
96
- <button id="analyze-btn" class="px-6 py-2 bg-purple-600 hover:bg-purple-500 rounded-md transition flex items-center space-x-2 font-medium">
97
- <i class="fas fa-magic"></i>
98
- <span>Analyze & Correct</span>
99
- </button>
 
 
 
100
  </div>
 
101
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
 
103
- <!-- Output Section -->
104
- <div class="space-y-4">
105
- <div class="flex justify-between items-center">
106
- <h2 class="text-2xl font-semibold">AI Correction</h2>
107
- <div class="flex items-center space-x-2">
108
- <span id="status-indicator" class="text-sm hidden">
109
- <span class="text-purple-400">AI is analyzing</span>
110
- <span class="typing-indicator"></span>
111
- </span>
112
- <button id="copy-btn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-md text-sm hidden">
113
- <i class="fas fa-copy mr-1"></i> Copy
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  </button>
115
  </div>
116
  </div>
117
 
118
- <div id="code-output" class="code-output p-4 overflow-auto hidden" style="min-height: 380px;">
119
- <pre class="text-slate-200 font-mono text-sm"><code id="corrected-code"></code></pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
  </div>
121
-
122
- <div id="suggestions-container" class="hidden">
123
- <h3 class="text-lg font-medium mb-2">Optimization Suggestions</h3>
124
- <div id="suggestions-list" class="space-y-2"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
125
  </div>
126
  </div>
 
 
 
 
127
  </div>
128
-
129
- <!-- Features Section -->
130
- <div class="mt-16">
131
- <h2 class="text-2xl font-bold text-center mb-8">Why Choose Our Code Corrector?</h2>
 
 
 
 
132
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
133
- <div class="bg-slate-800 p-6 rounded-xl hover:bg-slate-700 transition">
134
- <div class="text-purple-400 text-3xl mb-4">
135
- <i class="fas fa-bolt"></i>
 
136
  </div>
137
- <h3 class="text-xl font-semibold mb-2">Instant Corrections</h3>
138
- <p class="text-slate-300">
139
- Get immediate fixes for syntax errors, logical mistakes, and common bugs in your code.
140
- </p>
 
141
  </div>
142
- <div class="bg-slate-800 p-6 rounded-xl hover:bg-slate-700 transition">
143
- <div class="text-purple-400 text-3xl mb-4">
144
- <i class="fas fa-chart-line"></i>
 
 
145
  </div>
146
- <h3 class="text-xl font-semibold mb-2">Performance Optimization</h3>
147
- <p class="text-slate-300">
148
- Our AI suggests optimizations to make your code faster and more efficient.
149
- </p>
 
150
  </div>
151
- <div class="bg-slate-800 p-6 rounded-xl hover:bg-slate-700 transition">
152
- <div class="text-purple-400 text-3xl mb-4">
153
- <i class="fas fa-language"></i>
 
 
154
  </div>
155
- <h3 class="text-xl font-semibold mb-2">Multi-Language Support</h3>
156
- <p class="text-slate-300">
157
- Works with popular programming languages including JavaScript, Python, Java, and more.
158
- </p>
 
159
  </div>
160
  </div>
161
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  </div>
163
 
164
  <script>
165
- document.addEventListener('DOMContentLoaded', function() {
166
- const codeInput = document.getElementById('code-input');
167
- const analyzeBtn = document.getElementById('analyze-btn');
168
- const clearBtn = document.getElementById('clear-btn');
169
- const copyBtn = document.getElementById('copy-btn');
170
- const codeOutput = document.getElementById('code-output');
171
- const correctedCode = document.getElementById('corrected-code');
172
- const suggestionsContainer = document.getElementById('suggestions-container');
173
- const suggestionsList = document.getElementById('suggestions-list');
174
- const statusIndicator = document.getElementById('status-indicator');
175
- const languageSelect = document.getElementById('language-select');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
176
 
177
- // Sample suggestions data
178
- const sampleSuggestions = [
179
- "Consider using Array.map() instead of a for loop for better readability",
180
- "This function could be memoized to improve performance",
181
- "The variable naming could be more descriptive here",
182
- "This block of code could be extracted into a separate function",
183
- "Using template literals would make this string concatenation cleaner"
184
- ];
 
 
 
 
 
185
 
186
- // Analyze button functionality
187
- analyzeBtn.addEventListener('click', function() {
188
- const code = codeInput.value.trim();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
 
190
- if (!code) {
191
- alert('Please enter some code to analyze');
192
- return;
193
- }
 
 
 
 
 
 
 
 
 
 
 
194
 
195
- // Show loading state
196
- statusIndicator.classList.remove('hidden');
197
- codeOutput.classList.add('hidden');
198
- suggestionsContainer.classList.add('hidden');
199
- copyBtn.classList.add('hidden');
200
 
201
- // Simulate API call with timeout
202
- setTimeout(() => {
203
- // Hide loading state
204
- statusIndicator.classList.add('hidden');
205
-
206
- // Show results
207
- codeOutput.classList.remove('hidden');
208
- copyBtn.classList.remove('hidden');
209
- suggestionsContainer.classList.remove('hidden');
210
-
211
- // Display corrected code
212
- const language = languageSelect.value;
213
- correctedCode.textContent = generateCorrectedCode(code, language);
214
-
215
- // Display suggestions
216
- displaySuggestions();
217
- }, 1500);
218
- });
219
-
220
- // Clear button functionality
221
- clearBtn.addEventListener('click', function() {
222
- codeInput.value = '';
223
- codeOutput.classList.add('hidden');
224
- correctedCode.textContent = '';
225
- suggestionsContainer.classList.add('hidden');
226
- copyBtn.classList.add('hidden');
227
- statusIndicator.classList.add('hidden');
228
  });
229
-
230
- // Copy button functionality
231
- copyBtn.addEventListener('click', function() {
232
- const textToCopy = correctedCode.textContent;
 
 
233
 
234
- navigator.clipboard.writeText(textToCopy).then(() => {
235
- // Show copied feedback
236
- const originalText = copyBtn.innerHTML;
237
- copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
238
- setTimeout(() => {
239
- copyBtn.innerHTML = originalText;
240
- }, 2000);
241
- }).catch(err => {
242
- console.error('Failed to copy text: ', err);
243
- alert('Failed to copy text. Please try again.');
244
  });
 
 
 
 
 
 
 
 
 
245
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
 
247
- // Auto-resize textarea
248
- codeInput.addEventListener('input', function() {
249
- this.style.height = 'auto';
250
- this.style.height = (this.scrollHeight) + 'px';
251
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
 
253
- // Generate corrected code based on language
254
- function generateCorrectedCode(code, language) {
255
- const header = `// Corrected ${language} code\n// Generated by Ultimate Code Corrector\n\n`;
256
- const fixes = `// Fixed issues:\n// 1. Added missing semicolons\n// 2. Fixed variable scope\n// 3. Optimized loop structure\n// 4. Improved error handling\n\n`;
 
257
 
258
- let languageSpecificFix = '';
259
- switch(language) {
260
- case 'python':
261
- languageSpecificFix = '# Added proper indentation\n# Fixed PEP 8 style violations\n';
262
- break;
263
- case 'javascript':
264
- languageSpecificFix = '// Added strict mode\n"use strict";\n\n';
265
- break;
266
- case 'java':
267
- languageSpecificFix = '// Added proper access modifiers\n// Fixed null pointer checks\n';
268
- break;
269
- case 'csharp':
270
- languageSpecificFix = '// Added null checks\n// Improved exception handling\n';
271
- break;
272
- case 'php':
273
- languageSpecificFix = '// Added type declarations\n// Improved error reporting\n';
274
- break;
275
- case 'cpp':
276
- languageSpecificFix = '// Added const correctness\n// Improved memory management\n';
277
- break;
278
- case 'ruby':
279
- languageSpecificFix = '# Added proper error handling\n# Improved method chaining\n';
280
- break;
281
- case 'go':
282
- languageSpecificFix = '// Added error handling\n// Improved goroutine management\n';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
283
  break;
284
- case 'rust':
285
- languageSpecificFix = '// Added proper ownership\n// Improved error handling with Result\n';
 
 
286
  break;
287
- case 'typescript':
288
- languageSpecificFix = '// Added proper types\n// Improved interface definitions\n';
 
 
289
  break;
290
  }
291
 
292
- return header + languageSpecificFix + fixes + code;
293
- }
294
-
295
- // Display optimization suggestions
296
- function displaySuggestions() {
297
- suggestionsList.innerHTML = '';
298
- sampleSuggestions.forEach(suggestion => {
299
- const suggestionItem = document.createElement('div');
300
- suggestionItem.className = 'bg-slate-800 p-3 rounded-lg flex items-start';
301
- suggestionItem.innerHTML = `
302
- <div class="text-purple-400 mr-3 mt-1">
303
- <i class="fas fa-lightbulb"></i>
 
304
  </div>
305
- <p class="text-slate-300">${suggestion}</p>
306
- `;
307
- suggestionsList.appendChild(suggestionItem);
308
- });
309
- }
310
-
311
- // Initialize with proper heights
312
- codeInput.style.height = '380px';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  });
314
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/corrector" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
316
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bolt.New Plus | Générateur DeepSite</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @keyframes shake {
11
+ 0%, 100% { transform: translateX(0); }
12
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
13
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
14
+ }
15
+ .shake-animation {
16
+ animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
17
+ }
18
+ @keyframes boltPulse {
19
+ 0% { transform: scale(1); opacity: 1; }
20
+ 50% { transform: scale(1.1); opacity: 0.8; }
21
+ 100% { transform: scale(1); opacity: 1; }
22
+ }
23
+ .bolt-animation {
24
+ animation: boltPulse 1.5s infinite;
25
+ }
26
+ .electric-glow {
27
+ box-shadow: 0 0 15px rgba(110, 231, 183, 0.7);
28
  }
29
+ .bolt-gradient {
30
+ background: linear-gradient(135deg, #00f5d4 0%, #00bbf9 50%, #9b5de5 100%);
31
+ }
32
+ .instant-transition {
33
+ transition: all 0.05s ease-out;
34
+ }
35
+ .quantum-card {
36
+ backdrop-filter: blur(10px);
37
+ background-color: rgba(15, 23, 42, 0.7);
38
+ }
39
+ .modal {
40
+ display: none;
41
+ position: fixed;
42
+ z-index: 100;
43
+ left: 0;
44
+ top: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ background-color: rgba(0,0,0,0.8);
48
+ }
49
+ .modal-content {
50
  background-color: #0f172a;
51
+ margin: 10% auto;
52
+ padding: 2rem;
53
+ border-radius: 1rem;
54
+ max-width: 800px;
55
+ animation: blurIn 0.3s ease-out;
56
  }
57
+ @keyframes blurIn {
58
+ from { filter: blur(10px); opacity: 0; }
59
+ to { filter: blur(0); opacity: 1; }
60
  }
61
+ .blur-in {
62
+ animation: blurIn 0.5s ease-out forwards;
63
  }
64
+ .preview-window {
65
+ border: 2px solid #1e293b;
66
+ border-radius: 0.5rem;
67
+ overflow: hidden;
68
+ background: white;
69
+ }
70
+ .template-option {
71
+ transition: all 0.2s ease;
72
  }
73
+ .template-option:hover {
74
+ transform: translateY(-5px);
75
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 
76
  }
77
+ .code-editor {
78
+ font-family: 'Courier New', monospace;
79
+ background: #1e293b;
80
+ color: #f8fafc;
81
+ border-radius: 0.5rem;
82
+ padding: 1rem;
83
+ height: 300px;
84
+ overflow-y: auto;
85
  }
86
+ .tab-active {
87
+ border-bottom: 2px solid #0ea5e9;
88
+ color: #0ea5e9;
 
89
  }
90
+ .error-card {
91
+ border-left: 4px solid #ef4444;
92
  }
93
  </style>
94
  </head>
95
+ <body class="bg-slate-900 text-slate-100 min-h-screen overflow-x-hidden">
96
+ <!-- Quantum Loader -->
97
+ <div id="quantum-loader" class="fixed inset-0 z-50 flex items-center justify-center bolt-gradient">
98
+ <div class="text-center">
99
+ <div class="text-6xl mb-4 text-white bolt-animation">
100
+ <i class="fas fa-bolt"></i>
101
+ </div>
102
+ <h1 class="text-4xl font-bold text-white">Bolt.New Plus</h1>
103
+ <p class="text-xl text-white mt-2">Chargement du générateur DeepSite...</p>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Modal -->
108
+ <div id="bolt-modal" class="modal">
109
+ <div class="modal-content relative">
110
+ <span id="close-modal" class="absolute top-4 right-4 text-2xl cursor-pointer hover:text-teal-400">&times;</span>
111
+ <h2 id="modal-title" class="text-3xl font-bold mb-4"></h2>
112
+ <div id="modal-content" class="text-slate-300"></div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Main Interface -->
117
+ <div class="container mx-auto px-4 py-8 blur-in">
118
  <!-- Header -->
119
+ <header class="flex justify-between items-center py-6">
120
+ <div class="flex items-center">
121
+ <div class="text-3xl font-bold flex items-center">
122
+ <i class="fas fa-bolt text-teal-400 mr-2"></i>
123
+ <span>Bolt</span><span class="text-teal-400">.New Plus</span>
124
+ </div>
125
  </div>
126
+ <div class="flex space-x-4">
127
+ <button id="notifications-btn" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-slate-700 instant-transition">
128
+ <i class="fas fa-bell"></i>
129
+ </button>
130
+ <button id="settings-btn" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-slate-700 instant-transition">
131
+ <i class="fas fa-cog"></i>
132
+ </button>
133
+ <div class="w-10 h-10 rounded-full bg-teal-500 flex items-center justify-center">
134
+ <i class="fas fa-user"></i>
135
+ </div>
136
  </div>
137
  </header>
138
 
139
+ <!-- Main Dashboard -->
140
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mt-8">
141
+ <!-- Speed Card -->
142
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer electric-glow" id="speed-card">
143
+ <div class="flex items-center justify-between">
144
+ <div>
145
+ <p class="text-slate-400">Vitesse de génération</p>
146
+ <h3 class="text-3xl font-bold mt-2">10,000x</h3>
147
+ </div>
148
+ <div class="text-4xl text-teal-400">
149
+ <i class="fas fa-tachometer-alt"></i>
 
 
 
 
 
 
 
 
 
150
  </div>
151
  </div>
152
+ <div class="mt-4 h-2 bg-slate-700 rounded-full overflow-hidden">
153
+ <div class="h-full bolt-gradient rounded-full" style="width: 100%"></div>
 
154
  </div>
155
+ <p class="text-sm text-slate-400 mt-2">Performance maximale atteinte</p>
156
+ </div>
157
+
158
+ <!-- Templates Card -->
159
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="templates-card">
160
+ <div class="flex items-center justify-between">
161
+ <div>
162
+ <p class="text-slate-400">Modèles disponibles</p>
163
+ <h3 class="text-3xl font-bold mt-2">42+</h3>
164
+ </div>
165
+ <div class="text-4xl text-blue-400">
166
+ <i class="fas fa-layer-group"></i>
167
+ </div>
168
  </div>
169
+ <p class="text-sm text-slate-400 mt-4">Tous secteurs couverts</p>
170
  </div>
171
+
172
+ <!-- Sites Card -->
173
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="sites-card">
174
+ <div class="flex items-center justify-between">
175
+ <div>
176
+ <p class="text-slate-400">Sites générés</p>
177
+ <h3 class="text-3xl font-bold mt-2">∞</h3>
178
+ </div>
179
+ <div class="text-4xl text-purple-400">
180
+ <i class="fas fa-globe"></i>
181
+ </div>
182
+ </div>
183
+ <p class="text-sm text-slate-400 mt-4">Optimisation quantique active</p>
184
+ </div>
185
+
186
+ <!-- AI Card -->
187
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="ai-card">
188
+ <div class="flex items-center justify-between">
189
+ <div>
190
+ <p class="text-slate-400">IA Quantique</p>
191
+ <h3 class="text-3xl font-bold mt-2">100%</h3>
192
+ </div>
193
+ <div class="text-4xl text-pink-400">
194
+ <i class="fas fa-brain"></i>
195
+ </div>
196
+ </div>
197
+ <p class="text-sm text-slate-400 mt-4">Apprentissage profond activé</p>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- DeepSite Generator -->
202
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
203
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
204
+ <i class="fas fa-magic text-teal-400 mr-3"></i>
205
+ Générateur DeepSite
206
+ </h2>
207
 
208
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
209
+ <!-- Configuration Panel -->
210
+ <div class="lg:col-span-1">
211
+ <div class="bg-slate-850 p-4 rounded-lg">
212
+ <h3 class="text-lg font-semibold mb-4">Configuration du site</h3>
213
+
214
+ <div class="space-y-4">
215
+ <div>
216
+ <label class="block text-sm font-medium mb-1">Nom du site</label>
217
+ <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2" placeholder="MonSiteQuantique" id="site-name">
218
+ </div>
219
+
220
+ <div>
221
+ <label class="block text-sm font-medium mb-1">Secteur d'activité</label>
222
+ <select class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2" id="industry-select">
223
+ <option value="ecommerce">E-commerce</option>
224
+ <option value="portfolio">Portfolio</option>
225
+ <option value="corporate">Corporate</option>
226
+ <option value="blog">Blog</option>
227
+ <option value="saas">SaaS</option>
228
+ </select>
229
+ </div>
230
+
231
+ <div>
232
+ <label class="block text-sm font-medium mb-1">Style visuel</label>
233
+ <div class="grid grid-cols-3 gap-2">
234
+ <button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="modern">
235
+ <div class="h-8 rounded bg-gradient-to-r from-teal-500 to-blue-500 mb-1"></div>
236
+ <span class="text-xs">Moderne</span>
237
+ </button>
238
+ <button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="minimal">
239
+ <div class="h-8 rounded bg-gradient-to-r from-slate-100 to-slate-300 mb-1"></div>
240
+ <span class="text-xs">Minimal</span>
241
+ </button>
242
+ <button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="bold">
243
+ <div class="h-8 rounded bolt-gradient mb-1"></div>
244
+ <span class="text-xs">Audacieux</span>
245
+ </button>
246
+ </div>
247
+ </div>
248
+
249
+ <div>
250
+ <label class="block text-sm font-medium mb-1">Fonctionnalités</label>
251
+ <div class="space-y-2">
252
+ <label class="flex items-center">
253
+ <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-teal-400 mr-2" checked>
254
+ <span>Responsive Design</span>
255
+ </label>
256
+ <label class="flex items-center">
257
+ <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-blue-400 mr-2" checked>
258
+ <span>Optimisation SEO</span>
259
+ </label>
260
+ <label class="flex items-center">
261
+ <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-purple-400 mr-2">
262
+ <span>Blog Intégré</span>
263
+ </label>
264
+ <label class="flex items-center">
265
+ <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-pink-400 mr-2">
266
+ <span>Formulaire de contact</span>
267
+ </label>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <button id="generate-site-btn" class="w-full mt-6 py-3 bolt-gradient hover:opacity-90 rounded-lg font-bold instant-transition">
273
+ <i class="fas fa-bolt mr-2"></i> Générer le site
274
  </button>
275
  </div>
276
  </div>
277
 
278
+ <!-- Preview Panel -->
279
+ <div class="lg:col-span-2">
280
+ <div class="bg-slate-850 p-4 rounded-lg h-full">
281
+ <div class="flex justify-between items-center mb-4">
282
+ <h3 class="text-lg font-semibold">Aperçu en temps réel</h3>
283
+ <div class="flex space-x-2">
284
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="desktop-preview">
285
+ <i class="fas fa-desktop mr-1"></i> Desktop
286
+ </button>
287
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="tablet-preview">
288
+ <i class="fas fa-tablet-alt mr-1"></i> Tablet
289
+ </button>
290
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="mobile-preview">
291
+ <i class="fas fa-mobile-alt mr-1"></i> Mobile
292
+ </button>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="preview-window mx-auto" id="preview-container">
297
+ <div class="bg-gray-100 p-4 border-b flex justify-between items-center">
298
+ <div class="text-sm font-medium">MonSiteQuantique</div>
299
+ <div class="flex space-x-4">
300
+ <a href="#" class="text-sm hover:text-blue-600">Accueil</a>
301
+ <a href="#" class="text-sm hover:text-blue-600">Services</a>
302
+ <a href="#" class="text-sm hover:text-blue-600">À propos</a>
303
+ <a href="#" class="text-sm hover:text-blue-600">Contact</a>
304
+ </div>
305
+ </div>
306
+ <div class="p-6">
307
+ <div class="text-center py-12">
308
+ <h1 class="text-3xl font-bold mb-4">Bienvenue sur votre nouveau site</h1>
309
+ <p class="text-gray-600 mb-8">Généré instantanément avec Bolt.New Plus DeepSite</p>
310
+ <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">En savoir plus</button>
311
+ </div>
312
+ <div class="grid grid-cols-3 gap-4 mt-8">
313
+ <div class="bg-white p-4 rounded-lg shadow">
314
+ <div class="text-blue-500 mb-2"><i class="fas fa-bolt"></i></div>
315
+ <h3 class="font-medium mb-1">Rapide</h3>
316
+ <p class="text-sm text-gray-500">Chargement en 0.001s</p>
317
+ </div>
318
+ <div class="bg-white p-4 rounded-lg shadow">
319
+ <div class="text-green-500 mb-2"><i class="fas fa-lock"></i></div>
320
+ <h3 class="font-medium mb-1">Sécurisé</h3>
321
+ <p class="text-sm text-gray-500">Protection quantique</p>
322
+ </div>
323
+ <div class="bg-white p-4 rounded-lg shadow">
324
+ <div class="text-purple-500 mb-2"><i class="fas fa-chart-line"></i></div>
325
+ <h3 class="font-medium mb-1">Optimisé</h3>
326
+ <p class="text-sm text-gray-500">SEO intégré</p>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ <div class="bg-gray-800 text-white p-4 text-center text-sm">
331
+ © 2023 MonSiteQuantique. Tous droits réservés.
332
+ </div>
333
+ </div>
334
+ </div>
335
  </div>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Templates Gallery -->
340
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
341
+ <div class="flex justify-between items-center mb-6">
342
+ <h2 class="text-2xl font-bold flex items-center">
343
+ <i class="fas fa-boxes text-blue-400 mr-3"></i>
344
+ Galerie de modèles
345
+ </h2>
346
+ <div class="flex space-x-3">
347
+ <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition active-template-filter" data-filter="all">
348
+ Tous
349
+ </button>
350
+ <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="ecommerce">
351
+ E-commerce
352
+ </button>
353
+ <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="portfolio">
354
+ Portfolio
355
+ </button>
356
+ <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="corporate">
357
+ Corporate
358
+ </button>
359
  </div>
360
  </div>
361
+
362
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="templates-grid">
363
+ <!-- Template items will be added here by JavaScript -->
364
+ </div>
365
  </div>
366
+
367
+ <!-- Export Options -->
368
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
369
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
370
+ <i class="fas fa-file-export text-purple-400 mr-3"></i>
371
+ Options d'exportation
372
+ </h2>
373
+
374
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
375
+ <!-- HTML Export -->
376
+ <div class="bg-slate-850 p-6 rounded-lg">
377
+ <div class="text-4xl text-orange-400 mb-4">
378
+ <i class="fab fa-html5"></i>
379
  </div>
380
+ <h3 class="text-xl font-semibold mb-2">Export HTML</h3>
381
+ <p class="text-slate-400 mb-4">Code source propre et optimisé pour un déploiement instantané.</p>
382
+ <button class="w-full py-2 bg-orange-500 hover:bg-orange-400 rounded-lg font-medium instant-transition export-btn" data-format="html">
383
+ <i class="fas fa-download mr-2"></i> Télécharger HTML
384
+ </button>
385
  </div>
386
+
387
+ <!-- React Export -->
388
+ <div class="bg-slate-850 p-6 rounded-lg">
389
+ <div class="text-4xl text-blue-400 mb-4">
390
+ <i class="fab fa-react"></i>
391
  </div>
392
+ <h3 class="text-xl font-semibold mb-2">Export React</h3>
393
+ <p class="text-slate-400 mb-4">Composants React optimisés avec état intégré.</p>
394
+ <button class="w-full py-2 bg-blue-500 hover:bg-blue-400 rounded-lg font-medium instant-transition export-btn" data-format="react">
395
+ <i class="fas fa-download mr-2"></i> Télécharger React
396
+ </button>
397
  </div>
398
+
399
+ <!-- Quantum Export -->
400
+ <div class="bg-slate-850 p-6 rounded-lg">
401
+ <div class="text-4xl text-teal-400 mb-4">
402
+ <i class="fas fa-atom"></i>
403
  </div>
404
+ <h3 class="text-xl font-semibold mb-2">Export Quantique</h3>
405
+ <p class="text-slate-400 mb-4">Format propriétaire pour chargement instantané.</p>
406
+ <button class="w-full py-2 bolt-gradient hover:opacity-90 rounded-lg font-bold instant-transition export-btn" data-format="quantum">
407
+ <i class="fas fa-bolt mr-2"></i> Télécharger Quantum
408
+ </button>
409
  </div>
410
  </div>
411
  </div>
412
+
413
+ <!-- Code Editor -->
414
+ <div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
415
+ <div class="flex justify-between items-center mb-6">
416
+ <h2 class="text-2xl font-bold flex items-center">
417
+ <i class="fas fa-code text-pink-400 mr-3"></i>
418
+ Éditeur Quantique
419
+ </h2>
420
+ <div class="flex space-x-3" id="code-tabs">
421
+ <button class="px-4 py-2 rounded-lg instant-transition code-tab tab-active" data-tab="html">
422
+ HTML
423
+ </button>
424
+ <button class="px-4 py-2 rounded-lg instant-transition code-tab" data-tab="css">
425
+ CSS
426
+ </button>
427
+ <button class="px-4 py-2 rounded-lg instant-transition code-tab" data-tab="js">
428
+ JavaScript
429
+ </button>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="code-editor" id="html-editor">
434
+ <div class="text-green-400">&lt;!DOCTYPE html&gt;</div>
435
+ <div class="text-green-400">&lt;html lang="fr"&gt;</div>
436
+ <div class="text-green-400">&lt;head&gt;</div>
437
+ <div class="text-green-400 ml-4">&lt;meta charset="UTF-8"&gt;</div>
438
+ <div class="text-green-400 ml-4">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</div>
439
+ <div class="text-green-400 ml-4">&lt;title&gt;MonSiteQuantique&lt;/title&gt;</div>
440
+ <div class="text-green-400">&lt;/head&gt;</div>
441
+ <div class="text-green-400">&lt;body&gt;</div>
442
+ <div class="text-green-400 ml-4">&lt;header&gt;</div>
443
+ <div class="text-green-400 ml-8">&lt;h1&gt;Bienvenue sur mon site&lt;/h1&gt;</div>
444
+ <div class="text-green-400 ml-4">&lt;/header&gt;</div>
445
+ <div class="text-green-400 ml-4">&lt;main&gt;</div>
446
+ <div class="text-green-400 ml-8">&lt;p&gt;Généré avec Bolt.New Plus DeepSite&lt;/p&gt;</div>
447
+ <div class="text-green-400 ml-4">&lt;/main&gt;</div>
448
+ <div class="text-green-400">&lt;/body&gt;</div>
449
+ <div class="text-green-400">&lt;/html&gt;</div>
450
+ </div>
451
+
452
+ <div class="code-editor hidden" id="css-editor">
453
+ <div class="text-blue-400">body {</div>
454
+ <div class="text-blue-400 ml-4">font-family: 'Inter', sans-serif;</div>
455
+ <div class="text-blue-400 ml-4">background-color: #f8fafc;</div>
456
+ <div class="text-blue-400 ml-4">color: #1e293b;</div>
457
+ <div class="text-blue-400">}</div>
458
+ <div class="text-blue-400 mt-4">header {</div>
459
+ <div class="text-blue-400 ml-4">background: linear-gradient(135deg, #00f5d4 0%, #00bbf9 100%);</div>
460
+ <div class="text-blue-400 ml-4">padding: 2rem;</div>
461
+ <div class="text-blue-400 ml-4">text-align: center;</div>
462
+ <div class="text-blue-400">}</div>
463
+ <div class="text-blue-400 mt-4">h1 {</div>
464
+ <div class="text-blue-400 ml-4">font-size: 2.5rem;</div>
465
+ <div class="text-blue-400 ml-4">font-weight: 800;</div>
466
+ <div class="text-blue-400 ml-4">color: white;</div>
467
+ <div class="text-blue-400">}</div>
468
+ </div>
469
+
470
+ <div class="code-editor hidden" id="js-editor">
471
+ <div class="text-yellow-400">// Initialisation du site quantique</div>
472
+ <div class="text-yellow-400">document.addEventListener('DOMContentLoaded', () => {</div>
473
+ <div class="text-yellow-400 ml-4">console.log('Site quantique initialisé');</div>
474
+ <div class="text-yellow-400">});</div>
475
+ <div class="text-yellow-400 mt-4">// Animation quantique</div>
476
+ <div class="text-yellow-400">function animateQuantumElements() {</div>
477
+ <div class="text-yellow-400 ml-4">const elements = document.querySelectorAll('.quantum');</div>
478
+ <div class="text-yellow-400 ml-4">elements.forEach(el => {</div>
479
+ <div class="text-yellow-400 ml-8">el.style.transform = 'translateY(0)';</div>
480
+ <div class="text-yellow-400 ml-8">el.style.opacity = '1';</div>
481
+ <div class="text-yellow-400 ml-4">});</div>
482
+ <div class="text-yellow-400">}</div>
483
+ </div>
484
+
485
+ <div class="flex justify-end mt-4">
486
+ <button class="px-6 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg mr-3 instant-transition">
487
+ <i class="fas fa-copy mr-2"></i> Copier
488
+ </button>
489
+ <button class="px-6 py-2 bg-teal-500 hover:bg-teal-400 rounded-lg instant-transition">
490
+ <i class="fas fa-save mr-2"></i> Sauvegarder
491
+ </button>
492
+ </div>
493
+ </div>
494
  </div>
495
 
496
  <script>
497
+ // Hide loader after quantum speed simulation
498
+ setTimeout(() => {
499
+ document.getElementById('quantum-loader').style.display = 'none';
500
+ }, 50);
501
+
502
+ // Modal functions
503
+ const modal = document.getElementById('bolt-modal');
504
+ const closeModal = document.getElementById('close-modal');
505
+
506
+ function openModal(title, content) {
507
+ document.getElementById('modal-title').textContent = title;
508
+ document.getElementById('modal-content').innerHTML = content;
509
+ modal.style.display = 'block';
510
+ }
511
+
512
+ closeModal.addEventListener('click', () => {
513
+ modal.style.display = 'none';
514
+ });
515
+
516
+ window.addEventListener('click', (event) => {
517
+ if (event.target == modal) {
518
+ modal.style.display = 'none';
519
+ }
520
+ });
521
+
522
+ // Template gallery
523
+ const templates = [
524
+ {
525
+ id: 1,
526
+ name: "Quantum E-commerce",
527
+ category: "ecommerce",
528
+ description: "Boutique en ligne ultra-rapide avec paiement quantique",
529
+ image: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)"
530
+ },
531
+ {
532
+ id: 2,
533
+ name: "Portfolio Neutrino",
534
+ category: "portfolio",
535
+ description: "Présentation élégante de vos projets avec animations fluides",
536
+ image: "linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)"
537
+ },
538
+ {
539
+ id: 3,
540
+ name: "Corporate Singularity",
541
+ category: "corporate",
542
+ description: "Site d'entreprise professionnel avec gestion de contenu",
543
+ image: "linear-gradient(135deg, #10b981 0%, #3b82f6 100%)"
544
+ },
545
+ {
546
+ id: 4,
547
+ name: "Blog Temporel",
548
+ category: "blog",
549
+ description: "Plateforme de blog avec recherche prédictive",
550
+ image: "linear-gradient(135deg, #6366f1 0%, #a855f7 100%)"
551
+ },
552
+ {
553
+ id: 5,
554
+ name: "SaaS Quantum",
555
+ category: "saas",
556
+ description: "Interface SaaS moderne avec tableau de bord analytique",
557
+ image: "linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%)"
558
+ },
559
+ {
560
+ id: 6,
561
+ name: "Minimal Portfolio",
562
+ category: "portfolio",
563
+ description: "Design épuré pour mettre en valeur votre travail",
564
+ image: "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)"
565
+ }
566
+ ];
567
+
568
+ function renderTemplates(filter = 'all') {
569
+ const templatesGrid = document.getElementById('templates-grid');
570
+ templatesGrid.innerHTML = '';
571
+
572
+ const filteredTemplates = filter === 'all'
573
+ ? templates
574
+ : templates.filter(t => t.category === filter);
575
 
576
+ filteredTemplates.forEach(template => {
577
+ const templateElement = document.createElement('div');
578
+ templateElement.className = 'bg-slate-850 p-4 rounded-lg template-option cursor-pointer';
579
+ templateElement.innerHTML = `
580
+ <div class="h-40 rounded-lg mb-4" style="background: ${template.image};"></div>
581
+ <h3 class="font-semibold mb-1">${template.name}</h3>
582
+ <p class="text-sm text-slate-400 mb-3">${template.description}</p>
583
+ <button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm instant-transition template-select-btn" data-id="${template.id}">
584
+ <i class="fas fa-eye mr-2"></i> Prévisualiser
585
+ </button>
586
+ `;
587
+ templatesGrid.appendChild(templateElement);
588
+ });
589
 
590
+ // Add event listeners to template select buttons
591
+ document.querySelectorAll('.template-select-btn').forEach(btn => {
592
+ btn.addEventListener('click', (e) => {
593
+ const templateId = e.target.getAttribute('data-id');
594
+ const selectedTemplate = templates.find(t => t.id == templateId);
595
+ openModal(`Template: ${selectedTemplate.name}`, `
596
+ <div class="space-y-6">
597
+ <div class="h-64 rounded-lg" style="background: ${selectedTemplate.image};"></div>
598
+ <div class="bg-slate-850 p-4 rounded-lg">
599
+ <h3 class="font-semibold mb-2">${selectedTemplate.name}</h3>
600
+ <p class="text-slate-400 mb-4">${selectedTemplate.description}</p>
601
+ <div class="flex justify-between">
602
+ <span class="text-sm bg-slate-700 px-3 py-1 rounded-full">${selectedTemplate.category}</span>
603
+ <button class="px-4 py-1 bg-teal-500 hover:bg-teal-400 rounded-lg text-sm instant-transition use-template-btn" data-id="${templateId}">
604
+ Utiliser ce modèle
605
+ </button>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ `);
610
+
611
+ // Add event listener to "Use this template" button in modal
612
+ document.querySelector('.use-template-btn').addEventListener('click', () => {
613
+ // Update the preview with selected template
614
+ updatePreview(selectedTemplate);
615
+ modal.style.display = 'none';
616
+ });
617
+ });
618
+ });
619
+ }
620
+
621
+ // Filter templates
622
+ document.querySelectorAll('.template-filter').forEach(filter => {
623
+ filter.addEventListener('click', (e) => {
624
+ const category = e.target.getAttribute('data-filter');
625
+ renderTemplates(category);
626
 
627
+ // Update active filter
628
+ document.querySelectorAll('.template-filter').forEach(f => f.classList.remove('bg-blue-500', 'text-white'));
629
+ document.querySelectorAll('.template-filter').forEach(f => f.classList.add('bg-slate-700'));
630
+ e.target.classList.remove('bg-slate-700');
631
+ e.target.classList.add('bg-blue-500', 'text-white');
632
+ });
633
+ });
634
+
635
+ // Initial render
636
+ renderTemplates();
637
+
638
+ // Style options
639
+ document.querySelectorAll('.style-option').forEach(option => {
640
+ option.addEventListener('click', (e) => {
641
+ const style = e.target.getAttribute('data-style');
642
 
643
+ // Update active style
644
+ document.querySelectorAll('.style-option').forEach(o => o.classList.remove('border-teal-400'));
645
+ e.target.classList.add('border-teal-400');
 
 
646
 
647
+ // Update preview based on style
648
+ // This would be more complex in a real implementation
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
649
  });
650
+ });
651
+
652
+ // Code tabs
653
+ document.querySelectorAll('.code-tab').forEach(tab => {
654
+ tab.addEventListener('click', (e) => {
655
+ const tabName = e.target.getAttribute('data-tab');
656
 
657
+ // Hide all editors
658
+ document.querySelectorAll('.code-editor').forEach(editor => {
659
+ editor.classList.add('hidden');
 
 
 
 
 
 
 
660
  });
661
+
662
+ // Show selected editor
663
+ document.getElementById(`${tabName}-editor`).classList.remove('hidden');
664
+
665
+ // Update active tab
666
+ document.querySelectorAll('.code-tab').forEach(t => t.classList.remove('bg-blue-500', 'text-white'));
667
+ document.querySelectorAll('.code-tab').forEach(t => t.classList.add('bg-slate-700'));
668
+ e.target.classList.remove('bg-slate-700');
669
+ e.target.classList.add('bg-blue-500', 'text-white');
670
  });
671
+ });
672
+
673
+ // Preview device buttons
674
+ document.getElementById('desktop-preview').addEventListener('click', () => {
675
+ document.getElementById('preview-container').className = 'preview-window mx-auto';
676
+ });
677
+
678
+ document.getElementById('tablet-preview').addEventListener('click', () => {
679
+ document.getElementById('preview-container').className = 'preview-window mx-auto max-w-md';
680
+ });
681
+
682
+ document.getElementById('mobile-preview').addEventListener('click', () => {
683
+ document.getElementById('preview-container').className = 'preview-window mx-auto max-w-xs';
684
+ });
685
+
686
+ // Generate site button
687
+ document.getElementById('generate-site-btn').addEventListener('click', () => {
688
+ const siteName = document.getElementById('site-name').value || 'MonSiteQuantique';
689
+ const industry = document.getElementById('industry-select').value;
690
 
691
+ openModal('Génération en cours', `
692
+ <div class="text-center py-8">
693
+ <div class="inline-block p-6 rounded-full bg-slate-800 mb-4 bolt-animation">
694
+ <i class="fas fa-bolt text-teal-400 text-4xl"></i>
695
+ </div>
696
+ <h3 class="text-2xl font-bold mb-2">Génération de "${siteName}"</h3>
697
+ <p class="text-slate-400 mb-6">Utilisation de l'IA quantique pour créer votre site parfait...</p>
698
+
699
+ <div class="w-full bg-slate-700 rounded-full h-2 mb-6">
700
+ <div class="h-full bolt-gradient rounded-full" style="width: 0%" id="generation-progress"></div>
701
+ </div>
702
+
703
+ <div class="grid grid-cols-4 gap-4 text-center text-sm" id="generation-steps">
704
+ <div>
705
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
706
+ <i class="fas fa-cube"></i>
707
+ </div>
708
+ <span>Structure</span>
709
+ </div>
710
+ <div>
711
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
712
+ <i class="fas fa-palette"></i>
713
+ </div>
714
+ <span>Design</span>
715
+ </div>
716
+ <div>
717
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
718
+ <i class="fas fa-code"></i>
719
+ </div>
720
+ <span>Code</span>
721
+ </div>
722
+ <div>
723
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
724
+ <i class="fas fa-rocket"></i>
725
+ </div>
726
+ <span>Optimisation</span>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ `);
731
 
732
+ // Simulate generation progress
733
+ let progress = 0;
734
+ const progressInterval = setInterval(() => {
735
+ progress += 5;
736
+ document.getElementById('generation-progress').style.width = `${progress}%`;
737
 
738
+ if (progress >= 100) {
739
+ clearInterval(progressInterval);
740
+ setTimeout(() => {
741
+ document.getElementById('modal-content').innerHTML = `
742
+ <div class="text-center py-8">
743
+ <div class="inline-block p-6 rounded-full bg-green-500 bg-opacity-20 mb-4">
744
+ <i class="fas fa-check text-green-400 text-4xl"></i>
745
+ </div>
746
+ <h3 class="text-2xl font-bold mb-2">Site généré avec succès!</h3>
747
+ <p class="text-slate-400 mb-6">Votre site "${siteName}" est prêt à être déployé.</p>
748
+
749
+ <div class="grid grid-cols-2 gap-4">
750
+ <button class="py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition" id="view-site-btn">
751
+ <i class="fas fa-eye mr-2"></i> Voir le site
752
+ </button>
753
+ <button class="py-2 bg-teal-500 hover:bg-teal-400 rounded-lg instant-transition" id="export-site-btn">
754
+ <i class="fas fa-download mr-2"></i> Exporter
755
+ </button>
756
+ </div>
757
+ </div>
758
+ `;
759
+
760
+ // Add event listeners to new buttons
761
+ document.getElementById('view-site-btn').addEventListener('click', () => {
762
+ openModal('Aperçu du site', `
763
+ <div class="preview-window">
764
+ <div class="bg-gray-100 p-4 border-b flex justify-between items-center">
765
+ <div class="text-sm font-medium">${siteName}</div>
766
+ <div class="flex space-x-4">
767
+ <a href="#" class="text-sm hover:text-blue-600">Accueil</a>
768
+ <a href="#" class="text-sm hover:text-blue-600">Services</a>
769
+ <a href="#" class="text-sm hover:text-blue-600">À propos</a>
770
+ <a href="#" class="text-sm hover:text-blue-600">Contact</a>
771
+ </div>
772
+ </div>
773
+ <div class="p-6">
774
+ <div class="text-center py-12">
775
+ <h1 class="text-3xl font-bold mb-4">Bienvenue sur ${siteName}</h1>
776
+ <p class="text-gray-600 mb-8">Votre site ${industry} généré avec Bolt.New Plus</p>
777
+ <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Découvrir</button>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ <div class="mt-4 flex justify-center">
782
+ <button class="px-6 py-2 bg-blue-500 hover:bg-blue-400 rounded-lg instant-transition">
783
+ <i class="fas fa-external-link-alt mr-2"></i> Ouvrir en plein écran
784
+ </button>
785
+ </div>
786
+ `);
787
+ });
788
+
789
+ document.getElementById('export-site-btn').addEventListener('click', () => {
790
+ openModal('Options d\'exportation', `
791
+ <div class="space-y-4">
792
+ <div class="bg-slate-850 p-4 rounded-lg">
793
+ <h3 class="font-semibold mb-3">Format d'exportation</h3>
794
+ <div class="grid grid-cols-3 gap-3">
795
+ <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="html">
796
+ <i class="fab fa-html5 text-orange-400 text-2xl mb-2"></i>
797
+ <span>HTML</span>
798
+ </button>
799
+ <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="react">
800
+ <i class="fab fa-react text-blue-400 text-2xl mb-2"></i>
801
+ <span>React</span>
802
+ </button>
803
+ <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="quantum">
804
+ <i class="fas fa-atom text-teal-400 text-2xl mb-2"></i>
805
+ <span>Quantum</span>
806
+ </button>
807
+ </div>
808
+ </div>
809
+
810
+ <div class="bg-slate-850 p-4 rounded-lg">
811
+ <h3 class="font-semibold mb-3">Destination</h3>
812
+ <div class="grid grid-cols-2 gap-3">
813
+ <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition">
814
+ <i class="fas fa-cloud text-blue-400 text-2xl mb-2"></i>
815
+ <span>Bolt Cloud</span>
816
+ </button>
817
+ <button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition">
818
+ <i class="fas fa-server text-purple-400 text-2xl mb-2"></i>
819
+ <span>FTP</span>
820
+ </button>
821
+ </div>
822
+ </div>
823
+
824
+ <button class="w-full py-3 bg-teal-500 hover:bg-teal-400 rounded-lg font-medium instant-transition">
825
+ <i class="fas fa-file-export mr-2"></i> Exporter le site
826
+ </button>
827
+ </div>
828
+ `);
829
+ });
830
+ }, 1000);
831
+ }
832
+
833
+ // Update generation steps
834
+ if (progress >= 25) {
835
+ document.querySelector('#generation-steps div:nth-child(1) div').className = 'w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center mx-auto mb-1';
836
+ document.querySelector('#generation-steps div:nth-child(1) div i').className = 'fas fa-check';
837
+ }
838
+ if (progress >= 50) {
839
+ document.querySelector('#generation-steps div:nth-child(2) div').className = 'w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mx-auto mb-1';
840
+ document.querySelector('#generation-steps div:nth-child(2) div i').className = 'fas fa-check';
841
+ }
842
+ if (progress >= 75) {
843
+ document.querySelector('#generation-steps div:nth-child(3) div').className = 'w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mx-auto mb-1';
844
+ document.querySelector('#generation-steps div:nth-child(3) div i').className = 'fas fa-check';
845
+ }
846
+ }, 100);
847
+ });
848
+
849
+ // Export buttons
850
+ document.querySelectorAll('.export-btn').forEach(btn => {
851
+ btn.addEventListener('click', (e) => {
852
+ const format = e.target.getAttribute('data-format');
853
+ let formatName = '';
854
+ let icon = '';
855
+ let color = '';
856
+
857
+ switch(format) {
858
+ case 'html':
859
+ formatName = 'HTML';
860
+ icon = 'fab fa-html5';
861
+ color = 'orange';
862
  break;
863
+ case 'react':
864
+ formatName = 'React';
865
+ icon = 'fab fa-react';
866
+ color = 'blue';
867
  break;
868
+ case 'quantum':
869
+ formatName = 'Quantum';
870
+ icon = 'fas fa-atom';
871
+ color = 'teal';
872
  break;
873
  }
874
 
875
+ // Show error message with animation
876
+ const errorMessage = `
877
+ <div class="shake-animation">
878
+ <div class="bg-slate-800 p-6 rounded-xl error-card mb-6">
879
+ <div class="flex items-start">
880
+ <div class="bg-red-500 bg-opacity-20 p-3 rounded-lg mr-4">
881
+ <i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
882
+ </div>
883
+ <div>
884
+ <h3 class="font-bold text-lg mb-1">Exportation Impossible</h3>
885
+ <p class="text-slate-400">La fonctionnalité d'exportation est temporairement désactivée pour maintenance quantique.</p>
886
+ </div>
887
+ </div>
888
  </div>
889
+
890
+ <div class="text-center">
891
+ <div class="inline-block p-6 rounded-full bg-${color}-500 bg-opacity-20 mb-4">
892
+ <i class="${icon} text-${color}-400 text-4xl"></i>
893
+ </div>
894
+ <h3 class="text-2xl font-bold mb-2">Export ${formatName}</h3>
895
+ <p class="text-slate-400 mb-6">Préparation de votre site au format ${formatName}...</p>
896
+
897
+ <div class="w-full bg-slate-700 rounded-full h-2 mb-6">
898
+ <div class="h-full bg-red-500 rounded-full" style="width: 100%" id="export-progress"></div>
899
+ </div>
900
+
901
+ <div class="bg-slate-800 p-4 rounded-lg text-left mb-6">
902
+ <div class="flex justify-between text-sm mb-2">
903
+ <span>Statut</span>
904
+ <span class="font-mono text-red-400">ERREUR</span>
905
+ </div>
906
+ <div class="flex justify-between text-sm mb-2">
907
+ <span>Code</span>
908
+ <span class="font-mono">D4EXPORTER_FAULT</span>
909
+ </div>
910
+ <div class="flex justify-between text-sm">
911
+ <span>Message</span>
912
+ <span class="font-mono">Fonction non disponible</span>
913
+ </div>
914
+ </div>
915
+
916
+ <button class="px-6 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg font-medium instant-transition">
917
+ <i class="fas fa-question-circle mr-2"></i> Aide technique
918
+ </button>
919
+ </div>
920
+ </div>
921
+ `;
922
+
923
+ openModal(`Export ${formatName}`, errorMessage);
924
+ });
925
  });
926
+
927
+ // Update preview function
928
+ function updatePreview(template) {
929
+ const previewContainer = document.getElementById('preview-container');
930
+ const siteName = document.getElementById('site-name').value || 'MonSiteQuantique';
931
+
932
+ // This would be more sophisticated in a real implementation
933
+ previewContainer.innerHTML = `
934
+ <div class="bg-gray-100 p-4 border-b flex justify-between items-center">
935
+ <div class="text-sm font-medium">${siteName}</div>
936
+ <div class="flex space-x-4">
937
+ <a href="#" class="text-sm hover:text-blue-600">Accueil</a>
938
+ <a href="#" class="text-sm hover:text-blue-600">Services</a>
939
+ <a href="#" class="text-sm hover:text-blue-600">À propos</a>
940
+ <a href="#" class="text-sm hover:text-blue-600">Contact</a>
941
+ </div>
942
+ </div>
943
+ <div class="p-6">
944
+ <div class="text-center py-12">
945
+ <h1 class="text-3xl font-bold mb-4">Bienvenue sur ${siteName}</h1>
946
+ <p class="text-gray-600 mb-8">Modèle: ${template.name}</p>
947
+ <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">En savoir plus</button>
948
+ </div>
949
+ <div class="grid grid-cols-3 gap-4 mt-8">
950
+ <div class="bg-white p-4 rounded-lg shadow">
951
+ <div class="text-blue-500 mb-2"><i class="fas fa-bolt"></i></div>
952
+ <h3 class="font-medium mb-1">Rapide</h3>
953
+ <p class="text-sm text-gray-500">Chargement en 0.001s</p>
954
+ </div>
955
+ <div class="bg-white p-4 rounded-lg shadow">
956
+ <div class="text-green-500 mb-2"><i class="fas fa-lock"></i></div>
957
+ <h3 class="font-medium mb-1">Sécurisé</h3>
958
+ <p class="text-sm text-gray-500">Protection quantique</p>
959
+ </div>
960
+ <div class="bg-white p-4 rounded-lg shadow">
961
+ <div class="text-purple-500 mb-2"><i class="fas fa-chart-line"></i></div>
962
+ <h3 class="font-medium mb-1">Optimisé</h3>
963
+ <p class="text-sm text-gray-500">SEO intégré</p>
964
+ </div>
965
+ </div>
966
+ </div>
967
+ <div class="bg-gray-800 text-white p-4 text-center text-sm">
968
+ © 2023 ${siteName}. Tous droits réservés.
969
+ </div>
970
+ `;
971
+ }
972
+
973
+ // Card click handlers
974
+ document.getElementById('speed-card').addEventListener('click', () => {
975
+ openModal('Vitesse Quantique', `
976
+ <div class="text-center py-4">
977
+ <div class="inline-block p-6 rounded-full bg-slate-800 mb-4">
978
+ <i class="fas fa-tachometer-alt text-5xl bolt-gradient text-transparent bg-clip-text"></i>
979
+ </div>
980
+ <h3 class="text-2xl font-bold mb-2">10,000x Vitesse Standard</h3>
981
+ <p class="text-slate-400 mb-6">Notre technologie quantique dépasse toutes les limites de vitesse connues</p>
982
+ <div class="bg-slate-800 p-4 rounded-lg mb-6">
983
+ <div class="flex justify-between text-sm mb-2">
984
+ <span>Latence</span>
985
+ <span class="font-mono">0.0001ms</span>
986
+ </div>
987
+ </div>
988
+ </div>
989
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/corrector" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
990
  </html>
prompts.txt CHANGED
@@ -1,4 +1,9 @@
1
  https://huggingface.co/spaces/doctorblo/ia-ultimate-code-corrector
2
  aucun bouton fonctionne veuillez verifier toutes les bouton et mettre a jours
3
  corriger les erreur pour que le site soit pret a l'emploi , EXPORTER LE FICHIER UNE FOIS TERMINER
4
- télécharger les fichier en html , zip quand c'est terminer
 
 
 
 
 
 
1
  https://huggingface.co/spaces/doctorblo/ia-ultimate-code-corrector
2
  aucun bouton fonctionne veuillez verifier toutes les bouton et mettre a jours
3
  corriger les erreur pour que le site soit pret a l'emploi , EXPORTER LE FICHIER UNE FOIS TERMINER
4
+ télécharger les fichier en html , zip quand c'est terminer
5
+ CREER DEEPSITE EN 10000 FOIS PLUS RAPIDE
6
+ aucun bouton fonctionne veuillez corriger tout sa
7
+ CREER BOLT .NEW
8
+ BOLT.NEW PLUS DEEPSITE GENERATEUR DE SITE
9
+ IMPOSSIBLE D4EXPORTER LES SITE CREER