Hugging Face's logo

Spaces:
docto41
/
corrector
Running

App Files Community
corrector / index.html
docto41's picture
docto41
Add 2 files
7b68c82 verified
raw
history blame contribute delete
55.3 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bolt.New Plus | Générateur DeepSite</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake-animation {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes boltPulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
.bolt-animation {
animation: boltPulse 1.5s infinite;
}
.electric-glow {
box-shadow: 0 0 15px rgba(110, 231, 183, 0.7);
}
.bolt-gradient {
background: linear-gradient(135deg, #00f5d4 0%, #00bbf9 50%, #9b5de5 100%);
}
.instant-transition {
transition: all 0.05s ease-out;
}
.quantum-card {
backdrop-filter: blur(10px);
background-color: rgba(15, 23, 42, 0.7);
}
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.modal-content {
background-color: #0f172a;
margin: 10% auto;
padding: 2rem;
border-radius: 1rem;
max-width: 800px;
animation: blurIn 0.3s ease-out;
}
@keyframes blurIn {
from { filter: blur(10px); opacity: 0; }
to { filter: blur(0); opacity: 1; }
}
.blur-in {
animation: blurIn 0.5s ease-out forwards;
}
.preview-window {
border: 2px solid #1e293b;
border-radius: 0.5rem;
overflow: hidden;
background: white;
}
.template-option {
transition: all 0.2s ease;
}
.template-option:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.code-editor {
font-family: 'Courier New', monospace;
background: #1e293b;
color: #f8fafc;
border-radius: 0.5rem;
padding: 1rem;
height: 300px;
overflow-y: auto;
}
.tab-active {
border-bottom: 2px solid #0ea5e9;
color: #0ea5e9;
}
.error-card {
border-left: 4px solid #ef4444;
}
</style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen overflow-x-hidden">
<!-- Quantum Loader -->
<div id="quantum-loader" class="fixed inset-0 z-50 flex items-center justify-center bolt-gradient">
<div class="text-center">
<div class="text-6xl mb-4 text-white bolt-animation">
<i class="fas fa-bolt"></i>
</div>
<h1 class="text-4xl font-bold text-white">Bolt.New Plus</h1>
<p class="text-xl text-white mt-2">Chargement du générateur DeepSite...</p>
</div>
</div>
<!-- Modal -->
<div id="bolt-modal" class="modal">
<div class="modal-content relative">
<span id="close-modal" class="absolute top-4 right-4 text-2xl cursor-pointer hover:text-teal-400">&times;</span>
<h2 id="modal-title" class="text-3xl font-bold mb-4"></h2>
<div id="modal-content" class="text-slate-300"></div>
</div>
</div>
<!-- Main Interface -->
<div class="container mx-auto px-4 py-8 blur-in">
<!-- Header -->
<header class="flex justify-between items-center py-6">
<div class="flex items-center">
<div class="text-3xl font-bold flex items-center">
<i class="fas fa-bolt text-teal-400 mr-2"></i>
<span>Bolt</span><span class="text-teal-400">.New Plus</span>
</div>
</div>
<div class="flex space-x-4">
<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">
<i class="fas fa-bell"></i>
</button>
<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">
<i class="fas fa-cog"></i>
</button>
<div class="w-10 h-10 rounded-full bg-teal-500 flex items-center justify-center">
<i class="fas fa-user"></i>
</div>
</div>
</header>
<!-- Main Dashboard -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mt-8">
<!-- Speed Card -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer electric-glow" id="speed-card">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">Vitesse de génération</p>
<h3 class="text-3xl font-bold mt-2">10,000x</h3>
</div>
<div class="text-4xl text-teal-400">
<i class="fas fa-tachometer-alt"></i>
</div>
</div>
<div class="mt-4 h-2 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bolt-gradient rounded-full" style="width: 100%"></div>
</div>
<p class="text-sm text-slate-400 mt-2">Performance maximale atteinte</p>
</div>
<!-- Templates Card -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="templates-card">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">Modèles disponibles</p>
<h3 class="text-3xl font-bold mt-2">42+</h3>
</div>
<div class="text-4xl text-blue-400">
<i class="fas fa-layer-group"></i>
</div>
</div>
<p class="text-sm text-slate-400 mt-4">Tous secteurs couverts</p>
</div>
<!-- Sites Card -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="sites-card">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">Sites générés</p>
<h3 class="text-3xl font-bold mt-2">∞</h3>
</div>
<div class="text-4xl text-purple-400">
<i class="fas fa-globe"></i>
</div>
</div>
<p class="text-sm text-slate-400 mt-4">Optimisation quantique active</p>
</div>
<!-- AI Card -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card hover:bg-slate-700 instant-transition cursor-pointer" id="ai-card">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">IA Quantique</p>
<h3 class="text-3xl font-bold mt-2">100%</h3>
</div>
<div class="text-4xl text-pink-400">
<i class="fas fa-brain"></i>
</div>
</div>
<p class="text-sm text-slate-400 mt-4">Apprentissage profond activé</p>
</div>
</div>
<!-- DeepSite Generator -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-magic text-teal-400 mr-3"></i>
Générateur DeepSite
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Configuration Panel -->
<div class="lg:col-span-1">
<div class="bg-slate-850 p-4 rounded-lg">
<h3 class="text-lg font-semibold mb-4">Configuration du site</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Nom du site</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2" placeholder="MonSiteQuantique" id="site-name">
</div>
<div>
<label class="block text-sm font-medium mb-1">Secteur d'activité</label>
<select class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2" id="industry-select">
<option value="ecommerce">E-commerce</option>
<option value="portfolio">Portfolio</option>
<option value="corporate">Corporate</option>
<option value="blog">Blog</option>
<option value="saas">SaaS</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Style visuel</label>
<div class="grid grid-cols-3 gap-2">
<button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="modern">
<div class="h-8 rounded bg-gradient-to-r from-teal-500 to-blue-500 mb-1"></div>
<span class="text-xs">Moderne</span>
</button>
<button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="minimal">
<div class="h-8 rounded bg-gradient-to-r from-slate-100 to-slate-300 mb-1"></div>
<span class="text-xs">Minimal</span>
</button>
<button class="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg border border-slate-600 instant-transition style-option" data-style="bold">
<div class="h-8 rounded bolt-gradient mb-1"></div>
<span class="text-xs">Audacieux</span>
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Fonctionnalités</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-teal-400 mr-2" checked>
<span>Responsive Design</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-blue-400 mr-2" checked>
<span>Optimisation SEO</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-purple-400 mr-2">
<span>Blog Intégré</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-pink-400 mr-2">
<span>Formulaire de contact</span>
</label>
</div>
</div>
</div>
<button id="generate-site-btn" class="w-full mt-6 py-3 bolt-gradient hover:opacity-90 rounded-lg font-bold instant-transition">
<i class="fas fa-bolt mr-2"></i> Générer le site
</button>
</div>
</div>
<!-- Preview Panel -->
<div class="lg:col-span-2">
<div class="bg-slate-850 p-4 rounded-lg h-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Aperçu en temps réel</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="desktop-preview">
<i class="fas fa-desktop mr-1"></i> Desktop
</button>
<button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="tablet-preview">
<i class="fas fa-tablet-alt mr-1"></i> Tablet
</button>
<button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs instant-transition" id="mobile-preview">
<i class="fas fa-mobile-alt mr-1"></i> Mobile
</button>
</div>
</div>
<div class="preview-window mx-auto" id="preview-container">
<div class="bg-gray-100 p-4 border-b flex justify-between items-center">
<div class="text-sm font-medium">MonSiteQuantique</div>
<div class="flex space-x-4">
<a href="#" class="text-sm hover:text-blue-600">Accueil</a>
<a href="#" class="text-sm hover:text-blue-600">Services</a>
<a href="#" class="text-sm hover:text-blue-600">À propos</a>
<a href="#" class="text-sm hover:text-blue-600">Contact</a>
</div>
</div>
<div class="p-6">
<div class="text-center py-12">
<h1 class="text-3xl font-bold mb-4">Bienvenue sur votre nouveau site</h1>
<p class="text-gray-600 mb-8">Généré instantanément avec Bolt.New Plus DeepSite</p>
<button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">En savoir plus</button>
</div>
<div class="grid grid-cols-3 gap-4 mt-8">
<div class="bg-white p-4 rounded-lg shadow">
<div class="text-blue-500 mb-2"><i class="fas fa-bolt"></i></div>
<h3 class="font-medium mb-1">Rapide</h3>
<p class="text-sm text-gray-500">Chargement en 0.001s</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="text-green-500 mb-2"><i class="fas fa-lock"></i></div>
<h3 class="font-medium mb-1">Sécurisé</h3>
<p class="text-sm text-gray-500">Protection quantique</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="text-purple-500 mb-2"><i class="fas fa-chart-line"></i></div>
<h3 class="font-medium mb-1">Optimisé</h3>
<p class="text-sm text-gray-500">SEO intégré</p>
</div>
</div>
</div>
<div class="bg-gray-800 text-white p-4 text-center text-sm">
© 2023 MonSiteQuantique. Tous droits réservés.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Templates Gallery -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold flex items-center">
<i class="fas fa-boxes text-blue-400 mr-3"></i>
Galerie de modèles
</h2>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition active-template-filter" data-filter="all">
Tous
</button>
<button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="ecommerce">
E-commerce
</button>
<button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="portfolio">
Portfolio
</button>
<button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition template-filter" data-filter="corporate">
Corporate
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="templates-grid">
<!-- Template items will be added here by JavaScript -->
</div>
</div>
<!-- Export Options -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-file-export text-purple-400 mr-3"></i>
Options d'exportation
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- HTML Export -->
<div class="bg-slate-850 p-6 rounded-lg">
<div class="text-4xl text-orange-400 mb-4">
<i class="fab fa-html5"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Export HTML</h3>
<p class="text-slate-400 mb-4">Code source propre et optimisé pour un déploiement instantané.</p>
<button class="w-full py-2 bg-orange-500 hover:bg-orange-400 rounded-lg font-medium instant-transition export-btn" data-format="html">
<i class="fas fa-download mr-2"></i> Télécharger HTML
</button>
</div>
<!-- React Export -->
<div class="bg-slate-850 p-6 rounded-lg">
<div class="text-4xl text-blue-400 mb-4">
<i class="fab fa-react"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Export React</h3>
<p class="text-slate-400 mb-4">Composants React optimisés avec état intégré.</p>
<button class="w-full py-2 bg-blue-500 hover:bg-blue-400 rounded-lg font-medium instant-transition export-btn" data-format="react">
<i class="fas fa-download mr-2"></i> Télécharger React
</button>
</div>
<!-- Quantum Export -->
<div class="bg-slate-850 p-6 rounded-lg">
<div class="text-4xl text-teal-400 mb-4">
<i class="fas fa-atom"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Export Quantique</h3>
<p class="text-slate-400 mb-4">Format propriétaire pour chargement instantané.</p>
<button class="w-full py-2 bolt-gradient hover:opacity-90 rounded-lg font-bold instant-transition export-btn" data-format="quantum">
<i class="fas fa-bolt mr-2"></i> Télécharger Quantum
</button>
</div>
</div>
</div>
<!-- Code Editor -->
<div class="bg-slate-800 p-6 rounded-xl quantum-card mt-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold flex items-center">
<i class="fas fa-code text-pink-400 mr-3"></i>
Éditeur Quantique
</h2>
<div class="flex space-x-3" id="code-tabs">
<button class="px-4 py-2 rounded-lg instant-transition code-tab tab-active" data-tab="html">
HTML
</button>
<button class="px-4 py-2 rounded-lg instant-transition code-tab" data-tab="css">
CSS
</button>
<button class="px-4 py-2 rounded-lg instant-transition code-tab" data-tab="js">
JavaScript
</button>
</div>
</div>
<div class="code-editor" id="html-editor">
<div class="text-green-400">&lt;!DOCTYPE html&gt;</div>
<div class="text-green-400">&lt;html lang="fr"&gt;</div>
<div class="text-green-400">&lt;head&gt;</div>
<div class="text-green-400 ml-4">&lt;meta charset="UTF-8"&gt;</div>
<div class="text-green-400 ml-4">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</div>
<div class="text-green-400 ml-4">&lt;title&gt;MonSiteQuantique&lt;/title&gt;</div>
<div class="text-green-400">&lt;/head&gt;</div>
<div class="text-green-400">&lt;body&gt;</div>
<div class="text-green-400 ml-4">&lt;header&gt;</div>
<div class="text-green-400 ml-8">&lt;h1&gt;Bienvenue sur mon site&lt;/h1&gt;</div>
<div class="text-green-400 ml-4">&lt;/header&gt;</div>
<div class="text-green-400 ml-4">&lt;main&gt;</div>
<div class="text-green-400 ml-8">&lt;p&gt;Généré avec Bolt.New Plus DeepSite&lt;/p&gt;</div>
<div class="text-green-400 ml-4">&lt;/main&gt;</div>
<div class="text-green-400">&lt;/body&gt;</div>
<div class="text-green-400">&lt;/html&gt;</div>
</div>
<div class="code-editor hidden" id="css-editor">
<div class="text-blue-400">body {</div>
<div class="text-blue-400 ml-4">font-family: 'Inter', sans-serif;</div>
<div class="text-blue-400 ml-4">background-color: #f8fafc;</div>
<div class="text-blue-400 ml-4">color: #1e293b;</div>
<div class="text-blue-400">}</div>
<div class="text-blue-400 mt-4">header {</div>
<div class="text-blue-400 ml-4">background: linear-gradient(135deg, #00f5d4 0%, #00bbf9 100%);</div>
<div class="text-blue-400 ml-4">padding: 2rem;</div>
<div class="text-blue-400 ml-4">text-align: center;</div>
<div class="text-blue-400">}</div>
<div class="text-blue-400 mt-4">h1 {</div>
<div class="text-blue-400 ml-4">font-size: 2.5rem;</div>
<div class="text-blue-400 ml-4">font-weight: 800;</div>
<div class="text-blue-400 ml-4">color: white;</div>
<div class="text-blue-400">}</div>
</div>
<div class="code-editor hidden" id="js-editor">
<div class="text-yellow-400">// Initialisation du site quantique</div>
<div class="text-yellow-400">document.addEventListener('DOMContentLoaded', () => {</div>
<div class="text-yellow-400 ml-4">console.log('Site quantique initialisé');</div>
<div class="text-yellow-400">});</div>
<div class="text-yellow-400 mt-4">// Animation quantique</div>
<div class="text-yellow-400">function animateQuantumElements() {</div>
<div class="text-yellow-400 ml-4">const elements = document.querySelectorAll('.quantum');</div>
<div class="text-yellow-400 ml-4">elements.forEach(el => {</div>
<div class="text-yellow-400 ml-8">el.style.transform = 'translateY(0)';</div>
<div class="text-yellow-400 ml-8">el.style.opacity = '1';</div>
<div class="text-yellow-400 ml-4">});</div>
<div class="text-yellow-400">}</div>
</div>
<div class="flex justify-end mt-4">
<button class="px-6 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg mr-3 instant-transition">
<i class="fas fa-copy mr-2"></i> Copier
</button>
<button class="px-6 py-2 bg-teal-500 hover:bg-teal-400 rounded-lg instant-transition">
<i class="fas fa-save mr-2"></i> Sauvegarder
</button>
</div>
</div>
</div>
<script>
// Hide loader after quantum speed simulation
setTimeout(() => {
document.getElementById('quantum-loader').style.display = 'none';
}, 50);
// Modal functions
const modal = document.getElementById('bolt-modal');
const closeModal = document.getElementById('close-modal');
function openModal(title, content) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-content').innerHTML = content;
modal.style.display = 'block';
}
closeModal.addEventListener('click', () => {
modal.style.display = 'none';
});
window.addEventListener('click', (event) => {
if (event.target == modal) {
modal.style.display = 'none';
}
});
// Template gallery
const templates = [
{
id: 1,
name: "Quantum E-commerce",
category: "ecommerce",
description: "Boutique en ligne ultra-rapide avec paiement quantique",
image: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)"
},
{
id: 2,
name: "Portfolio Neutrino",
category: "portfolio",
description: "Présentation élégante de vos projets avec animations fluides",
image: "linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)"
},
{
id: 3,
name: "Corporate Singularity",
category: "corporate",
description: "Site d'entreprise professionnel avec gestion de contenu",
image: "linear-gradient(135deg, #10b981 0%, #3b82f6 100%)"
},
{
id: 4,
name: "Blog Temporel",
category: "blog",
description: "Plateforme de blog avec recherche prédictive",
image: "linear-gradient(135deg, #6366f1 0%, #a855f7 100%)"
},
{
id: 5,
name: "SaaS Quantum",
category: "saas",
description: "Interface SaaS moderne avec tableau de bord analytique",
image: "linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%)"
},
{
id: 6,
name: "Minimal Portfolio",
category: "portfolio",
description: "Design épuré pour mettre en valeur votre travail",
image: "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)"
}
];
function renderTemplates(filter = 'all') {
const templatesGrid = document.getElementById('templates-grid');
templatesGrid.innerHTML = '';
const filteredTemplates = filter === 'all'
? templates
: templates.filter(t => t.category === filter);
filteredTemplates.forEach(template => {
const templateElement = document.createElement('div');
templateElement.className = 'bg-slate-850 p-4 rounded-lg template-option cursor-pointer';
templateElement.innerHTML = `
<div class="h-40 rounded-lg mb-4" style="background: ${template.image};"></div>
<h3 class="font-semibold mb-1">${template.name}</h3>
<p class="text-sm text-slate-400 mb-3">${template.description}</p>
<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}">
<i class="fas fa-eye mr-2"></i> Prévisualiser
</button>
`;
templatesGrid.appendChild(templateElement);
});
// Add event listeners to template select buttons
document.querySelectorAll('.template-select-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const templateId = e.target.getAttribute('data-id');
const selectedTemplate = templates.find(t => t.id == templateId);
openModal(`Template: ${selectedTemplate.name}`, `
<div class="space-y-6">
<div class="h-64 rounded-lg" style="background: ${selectedTemplate.image};"></div>
<div class="bg-slate-850 p-4 rounded-lg">
<h3 class="font-semibold mb-2">${selectedTemplate.name}</h3>
<p class="text-slate-400 mb-4">${selectedTemplate.description}</p>
<div class="flex justify-between">
<span class="text-sm bg-slate-700 px-3 py-1 rounded-full">${selectedTemplate.category}</span>
<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}">
Utiliser ce modèle
</button>
</div>
</div>
</div>
`);
// Add event listener to "Use this template" button in modal
document.querySelector('.use-template-btn').addEventListener('click', () => {
// Update the preview with selected template
updatePreview(selectedTemplate);
modal.style.display = 'none';
});
});
});
}
// Filter templates
document.querySelectorAll('.template-filter').forEach(filter => {
filter.addEventListener('click', (e) => {
const category = e.target.getAttribute('data-filter');
renderTemplates(category);
// Update active filter
document.querySelectorAll('.template-filter').forEach(f => f.classList.remove('bg-blue-500', 'text-white'));
document.querySelectorAll('.template-filter').forEach(f => f.classList.add('bg-slate-700'));
e.target.classList.remove('bg-slate-700');
e.target.classList.add('bg-blue-500', 'text-white');
});
});
// Initial render
renderTemplates();
// Style options
document.querySelectorAll('.style-option').forEach(option => {
option.addEventListener('click', (e) => {
const style = e.target.getAttribute('data-style');
// Update active style
document.querySelectorAll('.style-option').forEach(o => o.classList.remove('border-teal-400'));
e.target.classList.add('border-teal-400');
// Update preview based on style
// This would be more complex in a real implementation
});
});
// Code tabs
document.querySelectorAll('.code-tab').forEach(tab => {
tab.addEventListener('click', (e) => {
const tabName = e.target.getAttribute('data-tab');
// Hide all editors
document.querySelectorAll('.code-editor').forEach(editor => {
editor.classList.add('hidden');
});
// Show selected editor
document.getElementById(`${tabName}-editor`).classList.remove('hidden');
// Update active tab
document.querySelectorAll('.code-tab').forEach(t => t.classList.remove('bg-blue-500', 'text-white'));
document.querySelectorAll('.code-tab').forEach(t => t.classList.add('bg-slate-700'));
e.target.classList.remove('bg-slate-700');
e.target.classList.add('bg-blue-500', 'text-white');
});
});
// Preview device buttons
document.getElementById('desktop-preview').addEventListener('click', () => {
document.getElementById('preview-container').className = 'preview-window mx-auto';
});
document.getElementById('tablet-preview').addEventListener('click', () => {
document.getElementById('preview-container').className = 'preview-window mx-auto max-w-md';
});
document.getElementById('mobile-preview').addEventListener('click', () => {
document.getElementById('preview-container').className = 'preview-window mx-auto max-w-xs';
});
// Generate site button
document.getElementById('generate-site-btn').addEventListener('click', () => {
const siteName = document.getElementById('site-name').value || 'MonSiteQuantique';
const industry = document.getElementById('industry-select').value;
openModal('Génération en cours', `
<div class="text-center py-8">
<div class="inline-block p-6 rounded-full bg-slate-800 mb-4 bolt-animation">
<i class="fas fa-bolt text-teal-400 text-4xl"></i>
</div>
<h3 class="text-2xl font-bold mb-2">Génération de "${siteName}"</h3>
<p class="text-slate-400 mb-6">Utilisation de l'IA quantique pour créer votre site parfait...</p>
<div class="w-full bg-slate-700 rounded-full h-2 mb-6">
<div class="h-full bolt-gradient rounded-full" style="width: 0%" id="generation-progress"></div>
</div>
<div class="grid grid-cols-4 gap-4 text-center text-sm" id="generation-steps">
<div>
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
<i class="fas fa-cube"></i>
</div>
<span>Structure</span>
</div>
<div>
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
<i class="fas fa-palette"></i>
</div>
<span>Design</span>
</div>
<div>
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
<i class="fas fa-code"></i>
</div>
<span>Code</span>
</div>
<div>
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mx-auto mb-1">
<i class="fas fa-rocket"></i>
</div>
<span>Optimisation</span>
</div>
</div>
</div>
`);
// Simulate generation progress
let progress = 0;
const progressInterval = setInterval(() => {
progress += 5;
document.getElementById('generation-progress').style.width = `${progress}%`;
if (progress >= 100) {
clearInterval(progressInterval);
setTimeout(() => {
document.getElementById('modal-content').innerHTML = `
<div class="text-center py-8">
<div class="inline-block p-6 rounded-full bg-green-500 bg-opacity-20 mb-4">
<i class="fas fa-check text-green-400 text-4xl"></i>
</div>
<h3 class="text-2xl font-bold mb-2">Site généré avec succès!</h3>
<p class="text-slate-400 mb-6">Votre site "${siteName}" est prêt à être déployé.</p>
<div class="grid grid-cols-2 gap-4">
<button class="py-2 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition" id="view-site-btn">
<i class="fas fa-eye mr-2"></i> Voir le site
</button>
<button class="py-2 bg-teal-500 hover:bg-teal-400 rounded-lg instant-transition" id="export-site-btn">
<i class="fas fa-download mr-2"></i> Exporter
</button>
</div>
</div>
`;
// Add event listeners to new buttons
document.getElementById('view-site-btn').addEventListener('click', () => {
openModal('Aperçu du site', `
<div class="preview-window">
<div class="bg-gray-100 p-4 border-b flex justify-between items-center">
<div class="text-sm font-medium">${siteName}</div>
<div class="flex space-x-4">
<a href="#" class="text-sm hover:text-blue-600">Accueil</a>
<a href="#" class="text-sm hover:text-blue-600">Services</a>
<a href="#" class="text-sm hover:text-blue-600">À propos</a>
<a href="#" class="text-sm hover:text-blue-600">Contact</a>
</div>
</div>
<div class="p-6">
<div class="text-center py-12">
<h1 class="text-3xl font-bold mb-4">Bienvenue sur ${siteName}</h1>
<p class="text-gray-600 mb-8">Votre site ${industry} généré avec Bolt.New Plus</p>
<button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Découvrir</button>
</div>
</div>
</div>
<div class="mt-4 flex justify-center">
<button class="px-6 py-2 bg-blue-500 hover:bg-blue-400 rounded-lg instant-transition">
<i class="fas fa-external-link-alt mr-2"></i> Ouvrir en plein écran
</button>
</div>
`);
});
document.getElementById('export-site-btn').addEventListener('click', () => {
openModal('Options d\'exportation', `
<div class="space-y-4">
<div class="bg-slate-850 p-4 rounded-lg">
<h3 class="font-semibold mb-3">Format d'exportation</h3>
<div class="grid grid-cols-3 gap-3">
<button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="html">
<i class="fab fa-html5 text-orange-400 text-2xl mb-2"></i>
<span>HTML</span>
</button>
<button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="react">
<i class="fab fa-react text-blue-400 text-2xl mb-2"></i>
<span>React</span>
</button>
<button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition export-option" data-format="quantum">
<i class="fas fa-atom text-teal-400 text-2xl mb-2"></i>
<span>Quantum</span>
</button>
</div>
</div>
<div class="bg-slate-850 p-4 rounded-lg">
<h3 class="font-semibold mb-3">Destination</h3>
<div class="grid grid-cols-2 gap-3">
<button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition">
<i class="fas fa-cloud text-blue-400 text-2xl mb-2"></i>
<span>Bolt Cloud</span>
</button>
<button class="p-3 bg-slate-700 hover:bg-slate-600 rounded-lg instant-transition">
<i class="fas fa-server text-purple-400 text-2xl mb-2"></i>
<span>FTP</span>
</button>
</div>
</div>
<button class="w-full py-3 bg-teal-500 hover:bg-teal-400 rounded-lg font-medium instant-transition">
<i class="fas fa-file-export mr-2"></i> Exporter le site
</button>
</div>
`);
});
}, 1000);
}
// Update generation steps
if (progress >= 25) {
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';
document.querySelector('#generation-steps div:nth-child(1) div i').className = 'fas fa-check';
}
if (progress >= 50) {
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';
document.querySelector('#generation-steps div:nth-child(2) div i').className = 'fas fa-check';
}
if (progress >= 75) {
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';
document.querySelector('#generation-steps div:nth-child(3) div i').className = 'fas fa-check';
}
}, 100);
});
// Export buttons
document.querySelectorAll('.export-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const format = e.target.getAttribute('data-format');
let formatName = '';
let icon = '';
let color = '';
switch(format) {
case 'html':
formatName = 'HTML';
icon = 'fab fa-html5';
color = 'orange';
break;
case 'react':
formatName = 'React';
icon = 'fab fa-react';
color = 'blue';
break;
case 'quantum':
formatName = 'Quantum';
icon = 'fas fa-atom';
color = 'teal';
break;
}
// Show error message with animation
const errorMessage = `
<div class="shake-animation">
<div class="bg-slate-800 p-6 rounded-xl error-card mb-6">
<div class="flex items-start">
<div class="bg-red-500 bg-opacity-20 p-3 rounded-lg mr-4">
<i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-lg mb-1">Exportation Impossible</h3>
<p class="text-slate-400">La fonctionnalité d'exportation est temporairement désactivée pour maintenance quantique.</p>
</div>
</div>
</div>
<div class="text-center">
<div class="inline-block p-6 rounded-full bg-${color}-500 bg-opacity-20 mb-4">
<i class="${icon} text-${color}-400 text-4xl"></i>
</div>
<h3 class="text-2xl font-bold mb-2">Export ${formatName}</h3>
<p class="text-slate-400 mb-6">Préparation de votre site au format ${formatName}...</p>
<div class="w-full bg-slate-700 rounded-full h-2 mb-6">
<div class="h-full bg-red-500 rounded-full" style="width: 100%" id="export-progress"></div>
</div>
<div class="bg-slate-800 p-4 rounded-lg text-left mb-6">
<div class="flex justify-between text-sm mb-2">
<span>Statut</span>
<span class="font-mono text-red-400">ERREUR</span>
</div>
<div class="flex justify-between text-sm mb-2">
<span>Code</span>
<span class="font-mono">D4EXPORTER_FAULT</span>
</div>
<div class="flex justify-between text-sm">
<span>Message</span>
<span class="font-mono">Fonction non disponible</span>
</div>
</div>
<button class="px-6 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg font-medium instant-transition">
<i class="fas fa-question-circle mr-2"></i> Aide technique
</button>
</div>
</div>
`;
openModal(`Export ${formatName}`, errorMessage);
});
});
// Update preview function
function updatePreview(template) {
const previewContainer = document.getElementById('preview-container');
const siteName = document.getElementById('site-name').value || 'MonSiteQuantique';
// This would be more sophisticated in a real implementation
previewContainer.innerHTML = `
<div class="bg-gray-100 p-4 border-b flex justify-between items-center">
<div class="text-sm font-medium">${siteName}</div>
<div class="flex space-x-4">
<a href="#" class="text-sm hover:text-blue-600">Accueil</a>
<a href="#" class="text-sm hover:text-blue-600">Services</a>
<a href="#" class="text-sm hover:text-blue-600">À propos</a>
<a href="#" class="text-sm hover:text-blue-600">Contact</a>
</div>
</div>
<div class="p-6">
<div class="text-center py-12">
<h1 class="text-3xl font-bold mb-4">Bienvenue sur ${siteName}</h1>
<p class="text-gray-600 mb-8">Modèle: ${template.name}</p>
<button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">En savoir plus</button>
</div>
<div class="grid grid-cols-3 gap-4 mt-8">
<div class="bg-white p-4 rounded-lg shadow">
<div class="text-blue-500 mb-2"><i class="fas fa-bolt"></i></div>
<h3 class="font-medium mb-1">Rapide</h3>
<p class="text-sm text-gray-500">Chargement en 0.001s</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="text-green-500 mb-2"><i class="fas fa-lock"></i></div>
<h3 class="font-medium mb-1">Sécurisé</h3>
<p class="text-sm text-gray-500">Protection quantique</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="text-purple-500 mb-2"><i class="fas fa-chart-line"></i></div>
<h3 class="font-medium mb-1">Optimisé</h3>
<p class="text-sm text-gray-500">SEO intégré</p>
</div>
</div>
</div>
<div class="bg-gray-800 text-white p-4 text-center text-sm">
© 2023 ${siteName}. Tous droits réservés.
</div>
`;
}
// Card click handlers
document.getElementById('speed-card').addEventListener('click', () => {
openModal('Vitesse Quantique', `
<div class="text-center py-4">
<div class="inline-block p-6 rounded-full bg-slate-800 mb-4">
<i class="fas fa-tachometer-alt text-5xl bolt-gradient text-transparent bg-clip-text"></i>
</div>
<h3 class="text-2xl font-bold mb-2">10,000x Vitesse Standard</h3>
<p class="text-slate-400 mb-6">Notre technologie quantique dépasse toutes les limites de vitesse connues</p>
<div class="bg-slate-800 p-4 rounded-lg mb-6">
<div class="flex justify-between text-sm mb-2">
<span>Latence</span>
<span class="font-mono">0.0001ms</span>
</div>
</div>
</div>
<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>
</html>