Spaces:

docto41
/

deploiement

Running

App Files Files Community

docto41 commited on May 10

Commit

40f7254

verified ·

1 Parent(s): c5bcff2

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +648 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Deploiement
-emoji: 💻
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: deploiement
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,648 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Générateur Pro - Déploiement Direct</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>
+        .gradient-bg {
+            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
+        }
+        .code-block {
+            font-family: 'Courier New', monospace;
+            background-color: #2d2d2d;
+            color: #f8f8f2;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+        }
+        .deploy-progress {
+            height: 6px;
+            background-color: #e2e8f0;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        .deploy-progress-bar {
+            height: 100%;
+            background-color: #4f46e5;
+            transition: width 0.3s ease;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .animate-pulse-slow {
+            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Navigation -->
+    <nav class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-code text-2xl"></i>
+                <span class="text-xl font-bold">Générateur Pro</span>
+            </div>
+            <div class="hidden md:flex space-x-6">
+                <a href="#" class="hover:text-gray-200 transition">Accueil</a>
+                <a href="#" class="hover:text-gray-200 transition">Fonctionnalités</a>
+                <a href="#" class="hover:text-gray-200 transition">Déploiement</a>
+                <a href="#" class="hover:text-gray-200 transition">Documentation</a>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button class="hidden md:block bg-white text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
+                    Essai gratuit
+                </button>
+                <button class="md:hidden text-white">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="gradient-bg text-white py-16">
+        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-10 md:mb-0">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">Déploiement direct en un clic</h1>
+                <p class="text-xl mb-8">Publiez votre application sur les meilleures plateformes sans configuration complexe.</p>
+                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button id="deploy-now-btn" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition flex items-center justify-center">
+                        <i class="fas fa-rocket mr-2"></i> Déployer maintenant
+                    </button>
+                    <button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:text-purple-600 transition flex items-center justify-center">
+                        <i class="fas fa-book mr-2"></i> Voir les plateformes
+                    </button>
+                </div>
+            </div>
+            <div class="md:w-1/2 flex justify-center">
+                <div class="relative w-full max-w-lg">
+                    <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
+                    <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
+                    <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">
+                        <div class="bg-gray-800 px-4 py-2 flex items-center">
+                            <div class="flex space-x-2">
+                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                            </div>
+                            <div class="text-gray-400 text-sm ml-4">terminal</div>
+                        </div>
+                        <div class="code-block p-4 text-sm h-80 overflow-y-auto">
+                            <span class="text-green-400">$</span> <span class="text-white">generateur-pro deploy --platform vercel</span>
+                            <br><br>
+                            <span class="text-blue-400">[INFO]</span> <span class="text-white">Initialisation du déploiement...</span>
+                            <br>
+                            <span class="text-blue-400">[INFO]</span> <span class="text-white">Compression des fichiers...</span>
+                            <br>
+                            <span class="text-blue-400">[INFO]</span> <span class="text-white">Connexion à la plateforme...</span>
+                            <br>
+                            <span class="text-blue-400">[INFO]</span> <span class="text-white">Téléversement des fichiers (45%)...</span>
+                            <br>
+                            <span class="text-blue-400">[INFO]</span> <span class="text-white">Configuration de l'environnement...</span>
+                            <br>
+                            <span class="text-blue-400">[INFO]</span> <span class="text-white">Construction de l'application...</span>
+                            <br>
+                            <span class="text-blue-400">[INFO]</span> <span class="text-white">Déploiement terminé avec succès!</span>
+                            <br><br>
+                            <span class="text-green-400">✔</span> <span class="text-white">Votre application est en ligne:</span>
+                            <br>
+                            <span class="text-purple-400">https://mon-app-123.vercel.app</span>
+                            <br><br>
+                            <span class="text-green-400">$</span> <span class="text-white cursor-pointer">_</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Deployment Platforms Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Plateformes de déploiement</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Vercel -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition border-2 border-transparent hover:border-purple-500">
+                    <div class="flex items-center mb-4">
+                        <img src="https://assets.vercel.com/image/upload/front/favicon/vercel/76x76.png" alt="Vercel" class="w-12 h-12 mr-3">
+                        <h3 class="text-xl font-bold text-gray-800">Vercel</h3>
+                    </div>
+                    <p class="text-gray-600 mb-4">Plateforme idéale pour les applications React, Next.js et autres frameworks frontend.</p>
+                    <ul class="space-y-2 mb-6">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">Déploiement instantané</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">CDN global</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">SSL automatique</span>
+                        </li>
+                    </ul>
+                    <button class="deploy-platform-btn w-full bg-black text-white py-2 rounded-lg font-medium hover:bg-gray-800 transition" data-platform="vercel">
+                        <i class="fab fa-vercel mr-2"></i> Déployer sur Vercel
+                    </button>
+                </div>
+                <!-- Netlify -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition border-2 border-transparent hover:border-blue-500">
+                    <div class="flex items-center mb-4">
+                        <img src="https://www.netlify.com/v3/img/components/full-logo-dark.png" alt="Netlify" class="h-8 mr-3">
+                        <h3 class="text-xl font-bold text-gray-800">Netlify</h3>
+                    </div>
+                    <p class="text-gray-600 mb-4">Solution tout-en-un pour les sites statiques et les applications JAMstack.</p>
+                    <ul class="space-y-2 mb-6">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">Formulaires intégrés</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">Fonctions serverless</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">Intégration Git</span>
+                        </li>
+                    </ul>
+                    <button class="deploy-platform-btn w-full bg-green-600 text-white py-2 rounded-lg font-medium hover:bg-green-700 transition" data-platform="netlify">
+                        <i class="fas fa-server mr-2"></i> Déployer sur Netlify
+                    </button>
+                </div>
+                <!-- AWS -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition border-2 border-transparent hover:border-yellow-500">
+                    <div class="flex items-center mb-4">
+                        <img src="https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png" alt="AWS" class="h-8 mr-3">
+                        <h3 class="text-xl font-bold text-gray-800">AWS Amplify</h3>
+                    </div>
+                    <p class="text-gray-600 mb-4">Infrastructure cloud scalable pour les applications professionnelles.</p>
+                    <ul class="space-y-2 mb-6">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">Haute disponibilité</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">Base de données intégrée</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-2"></i>
+                            <span class="text-gray-700">Authentification</span>
+                        </li>
+                    </ul>
+                    <button class="deploy-platform-btn w-full bg-yellow-500 text-black py-2 rounded-lg font-medium hover:bg-yellow-600 transition" data-platform="aws">
+                        <i class="fab fa-aws mr-2"></i> Déployer sur AWS
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Deployment Status Section (hidden by default) -->
+    <section id="deployment-status" class="py-16 bg-gray-50 hidden">
+        <div class="container mx-auto px-4 max-w-3xl">
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800 flex items-center">
+                        <i class="fas fa-rocket mr-3 text-purple-600"></i>
+                        <span id="deployment-title">Déploiement en cours</span>
+                    </h2>
+                    <span id="deployment-percent" class="text-xl font-bold text-purple-600">0%</span>
+                </div>
+                <div class="mb-4">
+                    <div class="deploy-progress">
+                        <div id="deploy-progress-bar" class="deploy-progress-bar" style="width: 0%"></div>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <div class="flex items-center mb-2">
+                        <i class="fas fa-cloud-upload-alt text-gray-500 mr-3"></i>
+                        <span id="deployment-step" class="text-gray-700">Initialisation du déploiement...</span>
+                    </div>
+                    <div class="ml-8 pl-4 border-l-2 border-gray-200">
+                        <div id="deployment-details" class="text-sm text-gray-500 space-y-1">
+                            <!-- Deployment details will be added here by JavaScript -->
+                        </div>
+                    </div>
+                </div>
+                <div id="deployment-success" class="hidden">
+                    <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+                        <div class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 text-2xl mr-3"></i>
+                            <div>
+                                <h3 class="font-bold text-green-800">Déploiement réussi!</h3>
+                                <p class="text-green-700">Votre application est maintenant en ligne.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mb-6">
+                        <h3 class="font-bold mb-2 text-gray-700">Liens utiles:</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                            <a id="live-url" href="#" target="_blank" class="flex items-center justify-between bg-gray-100 hover:bg-gray-200 rounded-lg p-3 transition">
+                                <div class="flex items-center">
+                                    <i class="fas fa-globe text-purple-600 mr-3"></i>
+                                    <span class="font-medium">URL de l'application</span>
+                                </div>
+                                <i class="fas fa-external-link-alt text-gray-400"></i>
+                            </a>
+                            <a id="admin-url" href="#" target="_blank" class="flex items-center justify-between bg-gray-100 hover:bg-gray-200 rounded-lg p-3 transition">
+                                <div class="flex items-center">
+                                    <i class="fas fa-cog text-blue-600 mr-3"></i>
+                                    <span class="font-medium">Panel d'administration</span>
+                                </div>
+                                <i class="fas fa-external-link-alt text-gray-400"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="flex justify-center">
+                        <button id="new-deployment-btn" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700 transition flex items-center">
+                            <i class="fas fa-plus mr-2"></i> Nouveau déploiement
+                        </button>
+                    </div>
+                </div>
+                <div id="deployment-failure" class="hidden">
+                    <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+                        <div class="flex items-center">
+                            <i class="fas fa-times-circle text-red-500 text-2xl mr-3"></i>
+                            <div>
+                                <h3 class="font-bold text-red-800">Échec du déploiement</h3>
+                                <p class="text-red-700" id="error-message">Une erreur est survenue lors du déploiement.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex justify-center space-x-4">
+                        <button id="retry-deployment-btn" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700 transition flex items-center">
+                            <i class="fas fa-redo mr-2"></i> Réessayer
+                        </button>
+                        <button id="contact-support-btn" class="bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-bold hover:bg-gray-300 transition flex items-center">
+                            <i class="fas fa-headset mr-2"></i> Support
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Pourquoi choisir notre solution de déploiement?</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-purple-600 mb-4">
+                        <i class="fas fa-bolt text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Déploiement instantané</h3>
+                    <p class="text-gray-600">Passez du code à la production en quelques secondes avec notre intégration transparente.</p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-blue-600 mb-4">
+                        <i class="fas fa-lock text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Sécurité intégrée</h3>
+                    <p class="text-gray-600">SSL automatique, protection DDoS et sécurisation des données sans configuration.</p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-green-600 mb-4">
+                        <i class="fas fa-chart-line text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Surveillance en temps réel</h3>
+                    <p class="text-gray-600">Analyse des performances et alertes en cas de problème avec votre application.</p>
+                </div>
+                <!-- Feature 4 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-yellow-600 mb-4">
+                        <i class="fas fa-arrows-alt text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Scalabilité automatique</h3>
+                    <p class="text-gray-600">Votre application s'adapte automatiquement à la charge sans intervention.</p>
+                </div>
+                <!-- Feature 5 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-red-600 mb-4">
+                        <i class="fas fa-code-branch text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Intégration Git</h3>
+                    <p class="text-gray-600">Déploiement continu avec chaque push sur votre dépôt Git.</p>
+                </div>
+                <!-- Feature 6 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-indigo-600 mb-4">
+                        <i class="fas fa-globe-europe text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">Réseau global</h3>
+                    <p class="text-gray-600">Livraison ultra-rapide grâce à notre réseau de serveurs répartis dans le monde entier.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 gradient-bg text-white">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl font-bold mb-6">Prêt à déployer votre application?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Gagnez du temps et évitez les configurations complexes avec notre solution en un clic.</p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
+                <button id="main-deploy-btn" class="bg-white text-purple-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition">
+                    <i class="fas fa-rocket mr-2"></i> Déployer maintenant
+                </button>
+                <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-purple-600 transition">
+                    <i class="fas fa-book-open mr-2"></i> Voir la documentation
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-gray-400 py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-white text-lg font-bold mb-4">Générateur Pro</h3>
+                    <p class="mb-4">Solution avancée de déploiement d'applications web en un clic.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="hover:text-white"><i class="fab fa-github text-xl"></i></a>
+                        <a href="#" class="hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
+                        <a href="#" class="hover:text-white"><i class="fab fa-discord text-xl"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-white text-lg font-bold mb-4">Plateformes</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Vercel</a></li>
+                        <li><a href="#" class="hover:text-white">Netlify</a></li>
+                        <li><a href="#" class="hover:text-white">AWS Amplify</a></li>
+                        <li><a href="#" class="hover:text-white">Firebase</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-white text-lg font-bold mb-4">Support</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">FAQ</a></li>
+                        <li><a href="#" class="hover:text-white">Documentation</a></li>
+                        <li><a href="#" class="hover:text-white">Statut</a></li>
+                        <li><a href="#" class="hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-white text-lg font-bold mb-4">Legal</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Conditions</a></li>
+                        <li><a href="#" class="hover:text-white">Confidentialité</a></li>
+                        <li><a href="#" class="hover:text-white">Licence</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
+                &copy; 2023 Générateur Pro Déploiement. Tous droits réservés.
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Deployment simulation function
+        function simulateDeployment(platform) {
+            // Show deployment status section
+            document.getElementById('deployment-status').classList.remove('hidden');
+            // Update deployment title
+            document.getElementById('deployment-title').textContent = `Déploiement sur ${platform} en cours`;
+            // Hide success/failure messages
+            document.getElementById('deployment-success').classList.add('hidden');
+            document.getElementById('deployment-failure').classList.add('hidden');
+            // Reset progress bar
+            const progressBar = document.getElementById('deploy-progress-bar');
+            progressBar.style.width = '0%';
+            document.getElementById('deployment-percent').textContent = '0%';
+            // Clear previous deployment details
+            const detailsContainer = document.getElementById('deployment-details');
+            detailsContainer.innerHTML = '';
+            // Deployment steps (simulated)
+            const steps = [
+                { percent: 10, message: "Initialisation du déploiement..." },
+                { percent: 20, message: "Connexion à la plateforme..." },
+                { percent: 35, message: "Vérification des dépendances..." },
+                { percent: 50, message: "Compression des fichiers..." },
+                { percent: 65, message: "Téléversement des fichiers..." },
+                { percent: 80, message: "Configuration de l'environnement..." },
+                { percent: 90, message: "Construction de l'application..." },
+                { percent: 100, message: "Finalisation du déploiement..." }
+            ];
+            // Simulate each step
+            steps.forEach((step, index) => {
+                setTimeout(() => {
+                    // Update progress bar
+                    progressBar.style.width = `${step.percent}%`;
+                    document.getElementById('deployment-percent').textContent = `${step.percent}%`;
+                    // Update current step
+                    document.getElementById('deployment-step').textContent = step.message;
+                    // Add to details
+                    const stepElement = document.createElement('div');
+                    stepElement.className = 'flex items-center';
+                    stepElement.innerHTML = `
+                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                        <span>${step.message}</span>
+                    `;
+                    detailsContainer.appendChild(stepElement);
+                    // Scroll to bottom of details
+                    detailsContainer.scrollTop = detailsContainer.scrollHeight;
+                    // If last step, show success
+                    if (index === steps.length - 1) {
+                        setTimeout(() => {
+                            // Random chance of failure (10%)
+                            if (Math.random() < 0.1) {
+                                showDeploymentFailure();
+                            } else {
+                                showDeploymentSuccess(platform);
+                            }
+                        }, 1000);
+                    }
+                }, index * 1000);
+            });
+        }
+        function showDeploymentSuccess(platform) {
+            document.getElementById('deployment-title').textContent = `Déploiement sur ${platform} réussi!`;
+            document.getElementById('deployment-step').textContent = "Déploiement terminé avec succès";
+            // Generate random URL based on platform
+            const randomId = Math.floor(Math.random() * 10000);
+            let url, adminUrl;
+            switch(platform.toLowerCase()) {
+                case 'vercel':
+                    url = `https://my-app-${randomId}.vercel.app`;
+                    adminUrl = `https://vercel.com/dashboard`;
+                    break;
+                case 'netlify':
+                    url = `https://my-app-${randomId}.netlify.app`;
+                    adminUrl = `https://app.netlify.com/sites`;
+                    break;
+                case 'aws':
+                    url = `https://${randomId}.amplifyapp.com`;
+                    adminUrl = `https://console.aws.amazon.com/amplify`;
+                    break;
+                default:
+                    url = `https://my-app-${randomId}.example.com`;
+                    adminUrl = `https://admin.example.com`;
+            }
+            // Update URLs
+            const liveUrl = document.getElementById('live-url');
+            liveUrl.href = url;
+            liveUrl.innerHTML = `
+                <div class="flex items-center">
+                    <i class="fas fa-globe text-purple-600 mr-3"></i>
+                    <div>
+                        <div class="font-medium">URL de l'application</div>
+                        <div class="text-xs text-gray-500 truncate" style="max-width: 200px;">${url}</div>
+                    </div>
+                </div>
+                <i class="fas fa-external-link-alt text-gray-400"></i>
+            `;
+            const adminUrlElement = document.getElementById('admin-url');
+            adminUrlElement.href = adminUrl;
+            adminUrlElement.innerHTML = `
+                <div class="flex items-center">
+                    <i class="fas fa-cog text-blue-600 mr-3"></i>
+                    <div>
+                        <div class="font-medium">Panel d'administration</div>
+                        <div class="text-xs text-gray-500 truncate" style="max-width: 200px;">${adminUrl}</div>
+                    </div>
+                </div>
+                <i class="fas fa-external-link-alt text-gray-400"></i>
+            `;
+            // Show success message
+            document.getElementById('deployment-success').classList.remove('hidden');
+        }
+        function showDeploymentFailure() {
+            document.getElementById('deployment-title').textContent = "Échec du déploiement";
+            document.getElementById('deployment-step').textContent = "Une erreur est survenue";
+            // Possible error messages
+            const errors = [
+                "Erreur de connexion à la plateforme",
+                "Problème de configuration détecté",
+                "Échec du téléversement des fichiers",
+                "Dépassement du quota de stockage",
+                "Erreur lors de la construction de l'application"
+            ];
+            // Select random error
+            const errorMessage = errors[Math.floor(Math.random() * errors.length)];
+            document.getElementById('error-message').textContent = errorMessage;
+            // Add error to details
+            const detailsContainer = document.getElementById('deployment-details');
+            const errorElement = document.createElement('div');
+            errorElement.className = 'flex items-center';
+            errorElement.innerHTML = `
+                <i class="fas fa-times-circle text-red-500 mr-2"></i>
+                <span class="text-red-500">${errorMessage}</span>
+            `;
+            detailsContainer.appendChild(errorElement);
+            // Show failure message
+            document.getElementById('deployment-failure').classList.remove('hidden');
+        }
+        // Event listeners for deployment buttons
+        document.querySelectorAll('.deploy-platform-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const platform = btn.getAttribute('data-platform');
+                simulateDeployment(platform);
+                // Scroll to deployment status
+                document.getElementById('deployment-status').scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        // Main deploy button
+        document.getElementById('main-deploy-btn').addEventListener('click', () => {
+            // Default to Vercel for main button
+            simulateDeployment('Vercel');
+            // Scroll to deployment status
+            document.getElementById('deployment-status').scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+        // Deploy now button in hero section
+        document.getElementById('deploy-now-btn').addEventListener('click', () => {
+            // Default to Vercel for main button
+            simulateDeployment('Vercel');
+            // Scroll to deployment status
+            document.getElementById('deployment-status').scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+        // New deployment button
+        document.getElementById('new-deployment-btn').addEventListener('click', () => {
+            // Hide deployment status section
+            document.getElementById('deployment-status').classList.add('hidden');
+            // Scroll to platforms section
+            document.querySelector('section.py-16.bg-white').scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+        // Retry deployment button
+        document.getElementById('retry-deployment-btn').addEventListener('click', () => {
+            // Get the platform from the title
+            const title = document.getElementById('deployment-title').textContent;
+            const platform = title.includes('Vercel') ? 'Vercel' :
+                            title.includes('Netlify') ? 'Netlify' :
+                            title.includes('AWS') ? 'AWS' : 'Vercel';
+            simulateDeployment(platform);
+        });
+        // Contact support button
+        document.getElementById('contact-support-btn').addEventListener('click', () => {
+            alert("Notre équipe de support va vous contacter sous peu. Merci pour votre patience!");
+        });
+    </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/deploiement" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Générateur de sites complexes 1500+ lignes de code Créez des applications web complètes avec architecture professionnelle en quelques clics
2	+ les bouton ne fonctionne pas , je veux deploiement directt