Hugging Face's logo

Spaces:
docto41
/
deploiement
Running

App Files Community
deploiement / index.html
docto41's picture
docto41
Add 3 files
40f7254 verified
raw
history blame contribute delete
35.9 kB
 <!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>