Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusGen Pro - Générateur avec Supabase</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"> | |
| <script src="https://unpkg.com/@supabase/supabase-js@2"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| light: '#f8fafc', | |
| accent: '#10b981' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['Fira Code', 'monospace'] | |
| } | |
| } | |
| } | |
| } | |
| // Configuration Supabase | |
| const supabaseUrl = 'https://your-project.supabase.co'; | |
| const supabaseKey = 'your-anon-key'; | |
| const supabase = supabase.createClient(supabaseUrl, supabaseKey); | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .page-preview { | |
| height: 500px; | |
| overflow-y: auto; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.5rem; | |
| background-color: white; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; | |
| } | |
| .supabase-connected { | |
| position: relative; | |
| } | |
| .supabase-connected::after { | |
| content: ''; | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| width: 15px; | |
| height: 15px; | |
| background-color: #10b981; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header avec indicateur Supabase --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-rocket text-3xl"></i> | |
| <h1 class="text-2xl font-bold">NexusGen <span class="text-accent">Pro</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div id="supabase-status" class="flex items-center bg-black bg-opacity-20 px-3 py-1 rounded-full"> | |
| <i class="fas fa-database mr-2"></i> | |
| <span>Supabase</span> | |
| <span class="ml-2 px-2 py-0.5 bg-red-500 rounded-full text-xs">Déconnecté</span> | |
| </div> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-16 mb-24 text-center"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-4 neon-text">Générateur avec Supabase</h2> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Créez des sites web futuristes avec backend automatique et base de données intégrée</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#generator" class="bg-white text-primary px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">Commencer</a> | |
| <a href="#supabase-features" class="border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-primary transition">Voir Supabase</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Section Supabase Features --> | |
| <section id="supabase-features" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-2 text-dark">Intégration Supabase Avancée</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Toutes les fonctionnalités backend incluses automatiquement</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl card-hover supabase-connected"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Base de Données Realtime</h3> | |
| <p class="text-gray-600">PostgreSQL avec API GraphQL et subscriptions en temps réel.</p> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs">Auto-configuré</span> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl card-hover supabase-connected"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-user-lock"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Authentification</h3> | |
| <p class="text-gray-600">Système complet d'authentification avec email, social login et MFA.</p> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs">Prêt à l'emploi</span> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl card-hover supabase-connected"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Stockage</h3> | |
| <p class="text-gray-600">Stockage S3-like avec gestion des permissions et CDN intégré.</p> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs">Optimisé</span> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-gray-50 p-6 rounded-xl card-hover supabase-connected"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Edge Functions</h3> | |
| <p class="text-gray-600">Fonctions serverless déployées globalement pour une latence minimale.</p> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs">Déployable</span> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-gray-50 p-6 rounded-xl card-hover supabase-connected"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Sécurité</h3> | |
| <p class="text-gray-600">Politiques RLS (Row Level Security) et protection contre les attaques.</p> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs">Sécurisé</span> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-gray-50 p-6 rounded-xl card-hover supabase-connected"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Synchronisation</h3> | |
| <p class="text-gray-600">Synchronisation hors ligne et résolution des conflits automatique.</p> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs">Offline-ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Database Configurator --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4 text-dark">Configurateur de Base de Données</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Définissez votre schéma de données qui sera automatiquement créé dans Supabase</p> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-bold mb-2">Tables générées automatiquement</label> | |
| <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto"> | |
| <pre id="schema-preview" class="text-gray-800"> | |
| // Votre schéma sera généré ici | |
| // Sélectionnez un modèle pour commencer</pre> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 font-bold mb-2" for="data-model">Modèle de données</label> | |
| <select id="data-model" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option value="">Sélectionnez un modèle</option> | |
| <option value="ecommerce">E-commerce</option> | |
| <option value="cms">Système de gestion de contenu</option> | |
| <option value="social">Réseau social</option> | |
| <option value="saas">Application SaaS</option> | |
| <option value="education">Plateforme éducative</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-bold mb-2" for="db-name">Nom de la base</label> | |
| <input type="text" id="db-name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="ma_base_de_donnees"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="generate-schema-btn" class="bg-primary hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Générer le Schéma | |
| </button> | |
| <button id="deploy-db-btn" class="ml-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg transition opacity-50 cursor-not-allowed" disabled> | |
| Déployer sur Supabase | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 text-white p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-terminal mr-2"></i> | |
| <span>Console Supabase</span> | |
| </div> | |
| <div class="text-sm text-gray-400" id="db-status">Non connecté</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Auth Configurator --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4 text-dark">Configurateur d'Authentification</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Configurez votre système d'authentification sécurisé</p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-gray-50 rounded-xl p-6 mb-8"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">Méthodes d'authentification</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <label class="flex items-center bg-white p-4 rounded-lg border border-gray-200"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary" checked> | |
| <span class="ml-3"> | |
| <i class="fas fa-envelope mr-1"></i> Email/Mot de passe | |
| </span> | |
| </label> | |
| <label class="flex items-center bg-white p-4 rounded-lg border border-gray-200"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary"> | |
| <span class="ml-3"> | |
| <i class="fab fa-google mr-1"></i> Google | |
| </span> | |
| </label> | |
| <label class="flex items-center bg-white p-4 rounded-lg border border-gray-200"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary"> | |
| <span class="ml-3"> | |
| <i class="fab fa-facebook mr-1"></i> Facebook | |
| </span> | |
| </label> | |
| <label class="flex items-center bg-white p-4 rounded-lg border border-gray-200"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary"> | |
| <span class="ml-3"> | |
| <i class="fab fa-apple mr-1"></i> Apple | |
| </span> | |
| </label> | |
| <label class="flex items-center bg-white p-4 rounded-lg border border-gray-200"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary"> | |
| <span class="ml-3"> | |
| <i class="fab fa-github mr-1"></i> GitHub | |
| </span> | |
| </label> | |
| <label class="flex items-center bg-white p-4 rounded-lg border border-gray-200"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary"> | |
| <span class="ml-3"> | |
| <i class="fas fa-mobile-alt mr-1"></i> SMS | |
| </span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">Paramètres avancés</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 font-bold mb-2" for="auth-theme">Thème de l'interface</label> | |
| <select id="auth-theme" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option value="default">Par défaut</option> | |
| <option value="dark">Sombre</option> | |
| <option value="minimal">Minimal</option> | |
| <option value="custom">Personnalisé</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-bold mb-2" for="auth-redirect">URL de redirection</label> | |
| <input type="text" id="auth-redirect" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="https://monsite.com/dashboard"> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary" checked> | |
| <span class="ml-2">Activer la vérification email</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary"> | |
| <span class="ml-2">Activer l'authentification à 2 facteurs</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="configure-auth-btn" class="bg-primary hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Configurer l'Auth | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Storage Configurator --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4 text-dark">Configurateur de Stockage</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Définissez vos buckets de stockage et politiques d'accès</p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-primary">Buckets de stockage</h3> | |
| <button id="add-bucket-btn" class="bg-primary hover:bg-indigo-700 text-white font-bold py-1 px-4 rounded-lg text-sm transition"> | |
| <i class="fas fa-plus mr-1"></i> Ajouter | |
| </button> | |
| </div> | |
| <div id="buckets-container"> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-3"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-medium">avatars</span> | |
| <span class="text-sm text-gray-500 ml-2">(public)</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-primary"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-medium">documents</span> | |
| <span class="text-sm text-gray-500 ml-2">(privé)</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-primary"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">Politiques d'accès</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white rounded-lg overflow-hidden"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="py-2 px-4 text-left">Bucket</th> | |
| <th class="py-2 px-4 text-left">Rôle</th> | |
| <th class="py-2 px-4 text-left">Permissions</th> | |
| <th class="py-2 px-4 text-left">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-200"> | |
| <td class="py-2 px-4">avatars</td> | |
| <td class="py-2 px-4">authenticated</td> | |
| <td class="py-2 px-4"> | |
| <span class="inline-block bg-green-100 text-green-800 px-2 py-0.5 rounded text-xs mr-1">lecture</span> | |
| <span class="inline-block bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">écriture</span> | |
| </td> | |
| <td class="py-2 px-4"> | |
| <button class="text-primary hover:text-indigo-700"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-200"> | |
| <td class="py-2 px-4">documents</td> | |
| <td class="py-2 px-4">admin</td> | |
| <td class="py-2 px-4"> | |
| <span class="inline-block bg-green-100 text-green-800 px-2 py-0.5 rounded text-xs mr-1">lecture</span> | |
| <span class="inline-block bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs mr-1">écriture</span> | |
| <span class="inline-block bg-red-100 text-red-800 px-2 py-0.5 rounded text-xs">suppression</span> | |
| </td> | |
| <td class="py-2 px-4"> | |
| <button class="text-primary hover:text-indigo-700"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="save-storage-btn" class="bg-primary hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Enregistrer la Configuration | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 text-white p-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-hdd mr-2"></i> | |
| <span>Stockage Supabase</span> | |
| <span class="ml-auto text-sm bg-yellow-500 px-2 py-0.5 rounded-full">Configuration requise</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Functions Configurator --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4 text-dark">Edge Functions</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Déployez des fonctions serverless pour votre logique métier</p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-gray-50 rounded-xl p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-primary">Fonctions prédéfinies</h3> | |
| <button id="add-function-btn" class="bg-primary hover:bg-indigo-700 text-white font-bold py-1 px-4 rounded-lg text-sm transition"> | |
| <i class="fas fa-plus mr-1"></i> Nouvelle Fonction | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-file-invoice-dollar text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Processus de paiement</h4> | |
| <p class="text-sm text-gray-600 mt-1">Intégration Stripe avec webhooks</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-green-100 text-green-800 px-2 py-0.5 rounded text-xs">Disponible</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-paper-plane text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Notifications</h4> | |
| <p class="text-sm text-gray-600 mt-1">Envoi d'emails et notifications push</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-green-100 text-green-800 px-2 py-0.5 rounded text-xs">Disponible</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-chart-line text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Analytics</h4> | |
| <p class="text-sm text-gray-600 mt-1">Tracking et analyse des utilisateurs</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Configuration requise</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-robot text-red-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">IA & NLP</h4> | |
| <p class="text-sm text-gray-600 mt-1">Traitement de texte avec IA</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">Beta</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">Déploiement des Fonctions</h3> | |
| <div class="bg-gray-800 rounded-lg p-4 text-white font-mono text-sm overflow-x-auto"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-terminal mr-2 text-gray-400"></i> | |
| <span>Terminal</span> | |
| </div> | |
| <div id="terminal-output" class="h-40 overflow-y-auto"> | |
| <p class="text-gray-400">$ supabase functions deploy</p> | |
| <p class="text-gray-400">Connectez-vous à Supabase pour déployer vos fonctions...</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary focus:ring-primary" checked> | |
| <span class="ml-2">Activer le déploiement automatique</span> | |
| </label> | |
| </div> | |
| <button id="deploy-functions-btn" class="bg-primary hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition"> | |
| Déployer Maintenant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final Generator --> | |
| <section class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Générateur Final</h2> | |
| <p class="text-center text-gray-300 mb-12 max-w-2xl mx-auto">Générez et déployez votre site complet avec backend Supabase intégré</p> | |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Récapitulatif</h3> | |
| <ul class="space-y-3 text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Base de données configurée</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Système d'authentification</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-yellow-400 mt-1 mr-2"></i> | |
| <span>Stockage (configuration requise)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> | |
| <span>Edge Functions prêtes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-file-code text-purple-400 mt-1 mr-2"></i> | |
| <span>15-20 pages frontend</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Options de Déploiement</h3> | |
| <div class="space-y-4"> | |
| <label class="flex items-center bg-gray-700 p-4 rounded-lg cursor-pointer"> | |
| <input type="radio" name="deploy-option" class="text-primary focus:ring-primary" checked> | |
| <span class="ml-3"> | |
| <span class="block font-medium">Déploiement complet</span> | |
| <span class="block text-sm text-gray-400">Site + Supabase sur votre compte</span> | |
| </span> | |
| </label> | |
| <label class="flex items-center bg-gray-700 p-4 rounded-lg cursor-pointer"> | |
| <input type="radio" name="deploy-option" class="text-primary focus:ring-primary"> | |
| <span class="ml-3"> | |
| <span class="block font-medium">Frontend seulement</span> | |
| <span class="block text-sm text-gray-400">Uniquement les fichiers du site</span> | |
| </span> | |
| </label> | |
| <label class="flex items-center bg-gray-700 p-4 rounded-lg cursor-pointer"> | |
| <input type="radio" name="deploy-option" class="text-primary focus:ring-primary"> | |
| <span class="ml-3"> | |
| <span class="block font-medium">Configuration Supabase</span> | |
| <span class="block text-sm text-gray-400">Export des paramètres backend</span> | |
| </span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-700"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h4 class="font-bold mb-2">Nom du Projet</h4> | |
| <input type="text" class="bg-gray-700 text-white px-4 py-2 rounded-lg w-full md:w-64" placeholder="MonProjetSupabase"> | |
| </div> | |
| <button id="final-generate-btn" class="bg-gradient-to-r from-primary to-secondary hover:from-indigo-600 hover:to-purple-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-bolt mr-2"></i> Générer & Déployer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-950 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-rocket text-2xl text-primary"></i> | |
| <h3 class="text-xl font-bold">NexusGen Pro</h3> | |
| </div> | |
| <p class="text-gray-400">Générateur de sites web futuristes avec backend intégré.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Produit</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tarifs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Statut</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Supabase</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Dashboard</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Communauté</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">RGPD</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">CGU</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 NexusGen Pro. Tous droits réservés.</p> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-gray-400 text-sm">Propulsé par</span> | |
| <img src="https://supabase.com/docs/img/supabase-logo-wordmark--light.svg" alt="Supabase" class="h-6"> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Vérification de la connexion Supabase | |
| async function checkSupabaseConnection() { | |
| try { | |
| const { data, error } = await supabase.from('test').select('*').limit(1); | |
| if (error) throw error; | |
| // Mise à jour de l'interface | |
| document.getElementById('supabase-status').innerHTML = ` | |
| <i class="fas fa-database mr-2"></i> | |
| <span>Supabase</span> | |
| <span class="ml-2 px-2 py-0.5 bg-green-500 rounded-full text-xs">Connecté</span> | |
| `; | |
| document.getElementById('db-status').textContent = 'Connecté'; | |
| document.getElementById('db-status').classList.remove('text-gray-400'); | |
| document.getElementById('db-status').classList.add('text-green-400'); | |
| // Activer les boutons | |
| document.getElementById('deploy-db-btn').disabled = false; | |
| document.getElementById('deploy-db-btn').classList.remove('opacity-50', 'cursor-not-allowed'); | |
| } catch (error) { | |
| console.error('Erreur de connexion à Supabase:', error); | |
| document.getElementById('supabase-status').innerHTML = ` | |
| <i class="fas fa-database mr-2"></i> | |
| <span>Supabase</span> | |
| <span class="ml-2 px-2 py-0.5 bg-red-500 rounded-full text-xs">Erreur</span> | |
| `; | |
| document.getElementById('db-status').textContent = 'Erreur de connexion'; | |
| document.getElementById('db-status').classList.remove('text-gray-400'); | |
| document.getElementById('db-status').classList.add('text-red-400'); | |
| } | |
| } | |
| // Générateur de schéma de base de données | |
| document.getElementById('data-model').addEventListener('change', function() { | |
| const model = this.value; | |
| let schema = ''; | |
| if (model === 'ecommerce') { | |
| schema = `// Schéma E-commerce | |
| create table products ( | |
| id uuid primary key default uuid_generate_v4(), | |
| name text not null, | |
| description text, | |
| price numeric(10,2) not null, | |
| category text, | |
| image_url text, | |
| created_at timestamp with time zone default now() | |
| ); | |
| create table orders ( | |
| id uuid primary key default uuid_generate_v4(), | |
| user_id uuid references auth.users not null, | |
| total numeric(10,2) not null, | |
| status text not null default 'pending', | |
| created_at timestamp with time zone default now() | |
| ); | |
| create table order_items ( | |
| id uuid primary key default uuid_generate_v4(), | |
| order_id uuid references orders not null, | |
| product_id uuid references products not null, | |
| quantity integer not null, | |
| price numeric(10,2) not null | |
| ); | |
| -- Activer les RLS (Row Level Security) | |
| alter table products enable row level security; | |
| alter table orders enable row level security; | |
| alter table order_items enable row level security;`; | |
| } | |
| else if (model === 'cms') { | |
| schema = `// Schéma CMS | |
| create table pages ( | |
| id uuid primary key default uuid_generate_v4(), | |
| title text not null, | |
| slug text unique not null, | |
| content text, | |
| published boolean default false, | |
| author_id uuid references auth.users not null, | |
| created_at timestamp with time zone default now(), | |
| updated_at timestamp with time zone default now() | |
| ); | |
| create table posts ( | |
| id uuid primary key default uuid_generate_v4(), | |
| title text not null, | |
| slug text unique not null, | |
| excerpt text, | |
| content text, | |
| featured_image text, | |
| published_at timestamp with time zone, | |
| author_id uuid references auth.users not null, | |
| created_at timestamp with time zone default now(), | |
| updated_at timestamp with time zone default now() | |
| ); | |
| -- Activer les RLS | |
| alter table pages enable row level security; | |
| alter table posts enable row level security;`; | |
| } | |
| // Ajouter d'autres modèles... | |
| document.getElementById('schema-preview').textContent = schema || '// Sélectionnez un modèle pour voir le schéma'; | |
| }); | |
| // Bouton de génération de schéma | |
| document.getElementById('generate-schema-btn').addEventListener('click', function() { | |
| const model = document.getElementById('data-model').value; | |
| const dbName = document.getElementById('db-name').value; | |
| if (!model) { | |
| alert('Veuillez sélectionner un modèle de données'); | |
| return; | |
| } | |
| if (!dbName) { | |
| alert('Veuillez entrer un nom pour votre base de données'); | |
| return; | |
| } | |
| alert(`Schéma généré pour ${dbName} (${model}). Dans une application réelle, cela créerait les tables dans Supabase.`); | |
| }); | |
| // Bouton de déploiement de base de données | |
| document.getElementById('deploy-db-btn').addEventListener('click', async function() { | |
| const dbName = document.getElementById('db-name').value || 'ma_base'; | |
| // Simulation de déploiement | |
| document.getElementById('terminal-output').innerHTML = ` | |
| <p class="text-green-400">$ supabase db deploy --name=${dbName}</p> | |
| <p class="text-gray-400">Connexion à Supabase...</p> | |
| <p class="text-gray-400">Création des tables...</p> | |
| <p class="text-green-400">✔ Base de données déployée avec succès</p> | |
| <p class="text-gray-400">URL: https://${dbName}.supabase.co</p> | |
| `; | |
| // Dans une application réelle, on utiliserait l'API Supabase pour créer les tables | |
| // await supabase.rpc('create_schema', { schema_name: dbName }); | |
| // await supabase.rpc('create_tables', { schema: generatedSchema }); | |
| }); | |
| // Bouton de configuration d'authentification | |
| document.getElementById('configure-auth-btn').addEventListener('click', function() { | |
| const theme = document.getElementById('auth-theme').value; | |
| const redirectUrl = document.getElementById('auth-redirect').value; | |
| alert(`Configuration d'authentification sauvegardée (Thème: ${theme}, Redirection: ${redirectUrl || 'par défaut'})`); | |
| }); | |
| // Bouton final de génération | |
| document.getElementById('final-generate-btn').addEventListener('click', async function() { | |
| const projectName = document.querySelector('input[placeholder="MonProjetSupabase"]').value || 'MonProjet'; | |
| const deployOption = document.querySelector('input[name="deploy-option"]:checked').nextElementSibling.querySelector('span').textContent; | |
| // Simulation de génération | |
| const terminal = document.getElementById('terminal-output'); | |
| terminal.innerHTML = '<p class="text-gray-400">Initialisation du projet...</p>'; | |
| const steps = [ | |
| {text: 'Création des fichiers frontend...', delay: 1000}, | |
| {text: 'Configuration de Supabase...', delay: 1500}, | |
| {text: 'Déploiement de la base de données...', delay: 2000}, | |
| {text: 'Configuration de l\'authentification...', delay: 2500}, | |
| {text: 'Déploiement des Edge Functions...', delay: 3000}, | |
| {text: 'Finalisation...', delay: 3500}, | |
| ]; | |
| for (const step of steps) { | |
| await new Promise(resolve => setTimeout(resolve, step.delay)); | |
| terminal.innerHTML += `<p class="text-gray-400">${step.text}</p>`; | |
| terminal.scrollTop = terminal.scrollHeight; | |
| } | |
| terminal.innerHTML += `<p class="text-green-400">✔ Projet "${projectName}" généré avec succès!</p>`; | |
| terminal.innerHTML += `<p class="text-gray-400">Option de déploiement: ${deployOption}</p>`; | |
| terminal.scrollTop = terminal.scrollHeight; | |
| // Dans une application réelle, on générerait et téléchargerait les fichiers | |
| // ou on déploierait directement sur un service comme Vercel/Netlify | |
| }); | |
| // Vérifier la connexion au chargement | |
| window.addEventListener('load', checkSupabaseConnection); | |
| </script> | |
| <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/generateur-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |