Spaces:
Running
Running
File size: 4,761 Bytes
9f828c9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
document.addEventListener('DOMContentLoaded', function() {
// Current active module
let activeModule = 'generation';
const modules = [
{ id: 'generation', name: 'Génération Rapide', icon: '⚡', color: 'from-blue-600 to-purple-600' },
{ id: 'pricing', name: 'Pricing SaaS', icon: '💰', color: 'from-green-600 to-emerald-600' },
{ id: 'landing', name: 'Landing Pro', icon: '🚀', color: 'from-orange-600 to-red-600' },
{ id: 'dashboard', name: 'Dashboard Pro', icon: '📊', color: 'from-cyan-600 to-blue-600' },
{ id: 'boutique', name: 'Boutique Pro', icon: '🛍️', color: 'from-pink-600 to-rose-600' },
{ id: 'video', name: 'Script Vidéo', icon: '🎬', color: 'from-purple-600 to-indigo-600' },
];
// Initialize with default module
loadModuleContent(activeModule);
// Handle module switching
document.addEventListener('click', function(e) {
if (e.target.closest('[data-module]')) {
const moduleId = e.target.closest('[data-module]').getAttribute('data-module');
activeModule = moduleId;
loadModuleContent(moduleId);
updatePreviewPanel(moduleId);
}
});
// Load module content
function loadModuleContent(moduleId) {
const panel = document.getElementById('generator-panel');
const module = modules.find(m => m.id === moduleId);
let content = '';
switch(moduleId) {
case 'generation':
content = `
<div class="space-y-4 module-content p-6">
<div class="bg-gradient-to-r ${module.color} rounded-lg p-6 text-white">
<h2 class="text-2xl font-bold mb-2">${module.name}</h2>
<p class="text-blue-100">Générez vos interfaces en quelques secondes</p>
</div>
<div class="grid grid-cols-1 gap-4">
<input type="text" placeholder="Titre du projet" class="border rounded-lg p-3">
<textarea placeholder="Description" class="border rounded-lg p-3 h-24"></textarea>
<button class="bg-blue-600 text-white rounded-lg p-3 font-semibold hover:bg-blue-700">
Générer
</button>
</div>
</div>
`;
break;
case 'pricing':
content = `
<div class="space-y-4 module-content p-6">
<div class="bg-gradient-to-r ${module.color} rounded-lg p-6 text-white">
<h2 class="text-2xl font-bold mb-2">${module.name}</h2>
<p class="text-green-100">Créez des pages de tarification professionnelles</p>
</div>
<div class="grid grid-cols-1 gap-4">
<input type="text" placeholder="Nom du produit" class="border rounded-lg p-3">
<input type="number" placeholder="Prix mensuel" class="border rounded-lg p-3">
<textarea placeholder="Fonctionnalités (une par ligne)" class="border rounded-lg p-3 h-32"></textarea>
<button class="bg-green-600 text-white rounded-lg p-3 font-semibold hover:bg-green-700">
Créer la page
</button>
</div>
</div>
`;
break;
// Other cases would follow the same pattern
default:
content = `<div class="p-6 text-center">Module non disponible</div>`;
}
panel.innerHTML = content;
}
// Update preview panel
function updatePreviewPanel(moduleId) {
const module = modules.find(m => m.id === moduleId);
const event = new CustomEvent('module-changed', {
detail: {
moduleName: module.name,
moduleIcon: module.icon
}
});
document.dispatchEvent(event);
}
// Handle message sending
document.querySelector('#message-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
document.querySelector('button').addEventListener('click', sendMessage);
function sendMessage() {
const input = document.querySelector('#message-input');
const message = input.value.trim();
if (message) {
console.log('Message sent:', message);
input.value = '';
}
}
}); |