Hugging Face's logo

Spaces:
docto41
/
animeflix
Running

App Files Community
animeflix / index.html
docto41's picture
docto41
Add 2 files
8145a28 verified
raw
history blame contribute delete
47.6 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SSL Secure - Enregistrement de Certificats SSL</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>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
:root {
 --primary: #10b981;
 --secondary: #3b82f6;
 --dark: #111827;
 --darker: #0f172a;
 }
body {
 font-family: 'Poppins', sans-serif;
 background-color: var(--darker);
 color: #fff;
 min-height: 100vh;
 }
.gradient-text {
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.bg-dots {
 background-image: radial-gradient(#334155 1px, transparent 1px);
 background-size: 20px 20px;
 }
.ssl-card {
 transition: all 0.3s ease;
 background: linear-gradient(145deg, #1e293b, #1e1b4b);
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
.ssl-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
 }
.search-box {
 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
 border: 1px solid rgba(16, 185, 129, 0.2);
 background: linear-gradient(145deg, #1e293b, #1e1b4b);
 }
.glow-effect {
 box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
 }
.input-field {
 background: rgba(30, 41, 59, 0.7);
 border: 1px solid rgba(255, 255, 255, 0.1);
 transition: all 0.3s ease;
 }
.input-field:focus {
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
 }
.toggle-checkbox:checked {
 right: 0;
 background-color: var(--primary);
 }
.toggle-checkbox:checked + .toggle-label {
 background-color: rgba(16, 185, 129, 0.2);
 }
.extension-badge {
 font-size: 0.7rem;
 padding: 0.2rem 0.5rem;
 border-radius: 0.25rem;
 }
.blink {
 animation: blink 1.5s infinite;
 }
@keyframes blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
 }
.progress-bar {
 height: 4px;
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 }
.loading-spinner {
 animation: spin 1s linear infinite;
 }
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
.security-level {
 height: 8px;
 border-radius: 4px;
 }
 </style>
</head>
<body class="bg-dots">
 <!-- Navigation -->
 <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-xl border-b border-gray-800">
 <div class="container mx-auto px-4 py-3 flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <i class="fas fa-lock text-green-500 text-3xl"></i>
 <span class="text-2xl font-bold gradient-text">SSL Secure</span>
 </div>
<div class="flex items-center space-x-4">
 <div class="hidden md:flex items-center space-x-4">
 <a href="#" class="text-gray-300 hover:text-white transition">
 <i class="fas fa-home mr-1"></i> Accueil
 </a>
 <a href="#" class="text-gray-300 hover:text-white transition">
 <i class="fas fa-certificate mr-1"></i> Certificats
 </a>
 <a href="#" class="text-gray-300 hover:text-white transition">
 <i class="fas fa-shield-alt mr-1"></i> Sécurité
 </a>
 </div>
 <a href="#" class="bg-gradient-to-r from-green-500 to-blue-500 px-4 py-2 rounded-full font-medium hover:opacity-90 transition flex items-center glow-effect">
 <i class="fas fa-user mr-2"></i> Mon Compte
 </a>
 </div>
 </div>
 </nav>
<!-- Main Content -->
 <div class="container mx-auto px-4 pt-32 pb-16">
 <div class="text-center mb-12">
 <div class="inline-block bg-gradient-to-r from-green-500 to-blue-500 text-white px-4 py-1 rounded-full text-sm font-bold mb-4">
 <i class="fas fa-lock mr-1"></i> SÉCURISÉ
 </div>
 <h1 class="text-4xl md:text-6xl font-bold mb-6">Protégez votre site avec un <span class="gradient-text">certificat SSL</span></h1>
 <p class="text-xl text-gray-300 max-w-3xl mx-auto">
 Cryptez les données de vos visiteurs et améliorez votre classement SEO avec nos certificats SSL à prix compétitifs.
 </p>
 </div>
<!-- SSL Options -->
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
 <div class="ssl-card rounded-xl p-6">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-lock text-white text-xl"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold">SSL Gratuit</h3>
 <div class="flex items-center mt-1">
 <span class="extension-badge bg-green-500 text-white">Let's Encrypt</span>
 </div>
 </div>
 </div>
 <p class="text-gray-400 mb-4 text-sm">Certificat SSL de base pour sécuriser votre site web avec cryptage standard.</p>
 <div class="mb-4">
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-400">Sécurité:</span>
 <span class="text-green-400">Standard</span>
 </div>
 <div class="w-full bg-gray-800 rounded-full h-1.5">
 <div class="security-level bg-green-500" style="width: 70%"></div>
 </div>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-2xl font-bold">Gratuit</span>
 <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm transition">
 <i class="fas fa-plus mr-1"></i> Sélectionner
 </button>
 </div>
 </div>
<div class="ssl-card rounded-xl p-6 border-2 border-green-500 transform scale-105">
 <div class="absolute top-0 right-0 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
 POPULAIRE
 </div>
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-shield-alt text-white text-xl"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold">SSL Professionnel</h3>
 <div class="flex items-center mt-1">
 <span class="extension-badge bg-blue-500 text-white">DV</span>
 <span class="extension-badge bg-gray-700 text-white ml-2">Wildcard</span>
 </div>
 </div>
 </div>
 <p class="text-gray-400 mb-4 text-sm">Certificat SSL avec validation de domaine et option wildcard pour tous vos sous-domaines.</p>
 <div class="mb-4">
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-400">Sécurité:</span>
 <span class="text-blue-400">Élevée</span>
 </div>
 <div class="w-full bg-gray-800 rounded-full h-1.5">
 <div class="security-level bg-blue-500" style="width: 90%"></div>
 </div>
 </div>
 <div class="flex justify-between items-center">
 <div>
 <span class="text-2xl font-bold">€49.99/an</span>
 <span class="text-xs text-gray-400 line-through ml-1">€79.99</span>
 </div>
 <button class="bg-gradient-to-r from-blue-500 to-indigo-500 hover:opacity-90 px-4 py-2 rounded-lg text-sm transition glow-effect">
 <i class="fas fa-check mr-1"></i> Sélectionner
 </button>
 </div>
 </div>
<div class="ssl-card rounded-xl p-6">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-building text-white text-xl"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold">SSL Entreprise</h3>
 <div class="flex items-center mt-1">
 <span class="extension-badge bg-purple-500 text-white">EV</span>
 <span class="extension-badge bg-gray-700 text-white ml-2">OV</span>
 </div>
 </div>
 </div>
 <p class="text-gray-400 mb-4 text-sm">Certificat SSL avec validation étendue pour une confiance maximale de vos clients.</p>
 <div class="mb-4">
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-400">Sécurité:</span>
 <span class="text-purple-400">Maximum</span>
 </div>
 <div class="w-full bg-gray-800 rounded-full h-1.5">
 <div class="security-level bg-purple-500" style="width: 100%"></div>
 </div>
 </div>
 <div class="flex justify-between items-center">
 <div>
 <span class="text-2xl font-bold">€149.99/an</span>
 <span class="text-xs text-gray-400 line-through ml-1">€199.99</span>
 </div>
 <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm transition">
 <i class="fas fa-plus mr-1"></i> Sélectionner
 </button>
 </div>
 </div>
 </div>
<!-- Registration Form -->
 <div class="rounded-2xl search-box p-8 max-w-5xl mx-auto">
 <div class="progress-bar rounded-full mb-8"></div>
<div class="flex flex-col md:flex-row gap-8">
 <!-- Left Column -->
 <div class="md:w-2/3">
 <h2 class="text-2xl font-bold mb-6 flex items-center">
 <i class="fas fa-edit mr-3 text-green-500"></i> Configuration SSL
 </h2>
<div class="mb-8">
 <label for="domainName" class="block text-gray-400 mb-2 font-medium">
 <i class="fas fa-globe mr-1"></i> Domaine à sécuriser
 </label>
 <div class="relative">
 <input type="text" id="domainName" placeholder="Ex: mondomaine.com"
class="w-full input-field text-white px-4 py-3 rounded-lg focus:outline-none focus:ring-0">
 <div class="absolute right-3 top-3 text-gray-500">
 <i class="fas fa-globe"></i>
 </div>
 </div>
 </div>
<div class="mb-8">
 <label class="block text-gray-400 mb-4 font-medium">
 <i class="fas fa-certificate mr-1"></i> Type de certificat
 </label>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <input type="radio" name="sslType" id="sslSingle" value="single" class="hidden peer" checked>
 <label for="sslSingle" class="flex flex-col p-4 bg-gray-800 rounded-lg cursor-pointer peer-checked:border-2 peer-checked:border-green-500 hover:bg-gray-700 transition ssl-card">
 <div class="flex items-center mb-2">
 <i class="fas fa-lock text-green-500 mr-3"></i>
 <span class="font-medium">Single Domain</span>
 </div>
 <p class="text-xs text-gray-400">Protège un seul domaine (ex: mondomaine.com)</p>
 </label>
 </div>
<div>
 <input type="radio" name="sslType" id="sslWildcard" value="wildcard" class="hidden peer">
 <label for="sslWildcard" class="flex flex-col p-4 bg-gray-800 rounded-lg cursor-pointer peer-checked:border-2 peer-checked:border-green-500 hover:bg-gray-700 transition ssl-card">
 <div class="flex items-center mb-2">
 <i class="fas fa-shield-alt text-blue-500 mr-3"></i>
 <span class="font-medium">Wildcard</span>
 </div>
 <p class="text-xs text-gray-400">Protège tous les sous-domaines (ex: *.mondomaine.com)</p>
 </label>
 </div>
 </div>
 </div>
<div class="bg-gray-800 rounded-lg p-6 mb-8">
 <div class="flex justify-between items-center">
 <div>
 <h3 class="font-bold text-lg mb-1 text-white">
 <i class="fas fa-plus-circle mr-2 text-green-500"></i> Options supplémentaires
 </h3>
 <p class="text-gray-400 text-sm">Améliorez votre sécurité avec ces options</p>
 </div>
 </div>
<div class="mt-4 space-y-4">
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium text-white">
 <i class="fas fa-sync-alt mr-2 text-blue-400"></i> Renouvellement automatique
 </h4>
 <p class="text-gray-400 text-sm">Renouvellement automatique avant expiration</p>
 </div>
 <div class="relative inline-block w-12 mr-2 align-middle select-none">
 <input type="checkbox" id="autoRenew" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
 <label for="autoRenew" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 </div>
 </div>
<div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium text-white">
 <i class="fas fa-shield-virus mr-2 text-purple-400"></i> Protection DDoS
 </h4>
 <p class="text-gray-400 text-sm">Protection contre les attaques DDoS</p>
 </div>
 <div class="relative inline-block w-12 mr-2 align-middle select-none">
 <input type="checkbox" id="ddosProtection" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
 <label for="ddosProtection" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 </div>
 </div>
<div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium text-white">
 <i class="fas fa-search-location mr-2 text-yellow-400"></i> Scan de vulnérabilités
 </h4>
 <p class="text-gray-400 text-sm">Scan hebdomadaire des vulnérabilités</p>
 </div>
 <div class="relative inline-block w-12 mr-2 align-middle select-none">
 <input type="checkbox" id="vulnerabilityScan" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
 <label for="vulnerabilityScan" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 </div>
 </div>
 </div>
 </div>
<div class="mb-8">
 <label for="csr" class="block text-gray-400 mb-2 font-medium">
 <i class="fas fa-key mr-1"></i> CSR (Certificate Signing Request)
 </label>
 <textarea id="csr" rows="5" placeholder="Coller votre CSR ici ou laissez-nous en générer un pour vous"
class="w-full input-field text-white px-4 py-3 rounded-lg focus:outline-none focus:ring-0"></textarea>
 <p class="text-xs text-gray-500 mt-2">
 <i class="fas fa-info-circle mr-1"></i> Optionnel - Nous pouvons générer une paire de clés pour vous
 </p>
 </div>
 </div>
<!-- Right Column -->
 <div class="md:w-1/3">
 <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 h-full border border-gray-700">
 <h3 class="text-xl font-bold mb-4 text-white">
 <i class="fas fa-receipt mr-2 text-green-500"></i> Votre Commande
 </h3>
<div class="space-y-4">
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Certificat:</span>
 <span id="summaryCertType" class="font-medium">SSL Professionnel</span>
 </div>
<div class="flex justify-between items-center">
 <span class="text-gray-400">Domaine:</span>
 <span id="summaryDomain" class="font-medium">mondomaine.com</span>
 </div>
<div class="flex justify-between items-center">
 <span class="text-gray-400">Type:</span>
 <span id="summarySSLType" class="font-medium">Single Domain</span>
 </div>
<div class="flex justify-between items-center">
 <span class="text-gray-400">Validité:</span>
 <span class="font-medium text-blue-400">1 an</span>
 </div>
<div class="pt-4 border-t border-gray-700 space-y-3">
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Renouvellement auto:</span>
 <span id="summaryAutoRenew" class="font-medium text-green-400">Activé</span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Protection DDoS:</span>
 <span id="summaryDDoS" class="font-medium text-red-400">Désactivé</span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Scan vulnérabilités:</span>
 <span id="summaryScan" class="font-medium text-green-400">Activé</span>
 </div>
 </div>
<div class="pt-4 border-t border-gray-700">
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Total:</span>
 <span id="summaryTotal" class="font-bold text-xl text-white">€49.99</span>
 </div>
 </div>
 </div>
<button id="registerBtn" class="w-full mt-6 bg-gradient-to-r from-green-500 to-blue-500 px-6 py-3 rounded-xl font-bold hover:opacity-90 transition flex items-center justify-center glow-effect">
 <i class="fas fa-lock mr-3"></i> Commander le SSL
 </button>
<div class="mt-4 text-xs text-gray-400 text-center">
 <i class="fas fa-lock mr-1"></i> Paiement sécurisé - Garantie 30 jours
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Features Section -->
 <div class="mt-16">
 <div class="text-center mb-8">
 <h2 class="text-3xl font-bold mb-2">
 <i class="fas fa-star mr-2 text-yellow-400"></i> Pourquoi choisir nos certificats SSL?
 </h2>
 <p class="text-gray-400">Nous offrons les meilleures solutions de sécurité pour protéger votre site web</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="ssl-card rounded-xl p-6">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-shield-alt text-white text-xl"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold">Cryptage 256-bit</h3>
 </div>
 </div>
 <p class="text-gray-400 mb-4 text-sm">Cryptage militaire AES-256 bits pour protéger toutes les données transmises entre votre site et vos visiteurs.</p>
 </div>
<div class="ssl-card rounded-xl p-6">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-search text-white text-xl"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold">Validation de domaine</h3>
 </div>
 </div>
 <p class="text-gray-400 mb-4 text-sm">Processus de validation complet pour assurer l'authenticité de votre domaine et de votre entreprise.</p>
 </div>
<div class="ssl-card rounded-xl p-6">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-chart-line text-white text-xl"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold">Boost SEO</h3>
 </div>
 </div>
 <p class="text-gray-400 mb-4 text-sm">Améliorez votre classement dans les moteurs de recherche - Google favorise les sites HTTPS.</p>
 </div>
 </div>
 </div>
 </div>
<!-- Loading Modal -->
 <div id="loadingModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
 <div class="bg-gray-900 rounded-xl p-8 max-w-md w-full text-center border border-gray-800">
 <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center">
 <i class="fas fa-spinner loading-spinner text-5xl text-green-500"></i>
 </div>
 <h3 class="text-2xl font-bold mb-2">Validation en cours</h3>
 <p class="text-gray-400 mb-6">Nous validons votre domaine et générons votre certificat SSL...</p>
<div class="w-full bg-gray-800 rounded-full h-2 mb-4">
 <div id="registrationProgress" class="bg-gradient-to-r from-green-500 to-blue-500 h-2 rounded-full" style="width: 0%"></div>
 </div>
<div class="flex justify-between text-sm text-gray-400">
 <span>Validation</span>
 <span id="progressPercent">0%</span>
 <span>Génération</span>
 </div>
<div class="mt-6 text-sm text-gray-500">
 <i class="fas fa-info-circle mr-1"></i> Ce processus prend généralement 2-5 minutes
 </div>
 </div>
 </div>
<!-- Results Modal -->
 <div id="resultsModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
 <div class="bg-gray-900 rounded-xl p-8 max-w-2xl w-full border border-gray-800">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-2xl font-bold flex items-center">
 <i class="fas fa-check-circle text-green-500 mr-3"></i> Certificat SSL Installé!
 </h3>
 <button id="closeResults" class="text-gray-400 hover:text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="bg-gray-800 rounded-lg p-6 mb-6">
 <div class="flex flex-col md:flex-row items-center justify-between">
 <div class="flex items-center mb-4 md:mb-0">
 <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-blue-500 rounded-full flex items-center justify-center mr-4">
 <i class="fas fa-lock text-white text-2xl"></i>
 </div>
 <div>
 <h3 id="resultDomain" class="font-bold text-xl">mondomaine.com</h3>
 <div class="flex items-center mt-2">
 <span class="bg-green-500 text-white px-2 py-1 rounded-full text-xs mr-2">
 <i class="fas fa-check mr-1"></i> Actif
 </span>
 <span class="bg-blue-500 text-white px-2 py-1 rounded-full text-xs">
 <i class="fas fa-clock mr-1"></i> Expire le 01/01/2025
 </span>
 </div>
 </div>
 </div>
 <div class="flex items-center space-x-3">
 <button id="downloadCert" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center transition">
 <i class="fas fa-download mr-2"></i> Télécharger
 </button>
 <button id="viewDetails" class="bg-gradient-to-r from-green-500 to-blue-500 px-4 py-2 rounded-lg flex items-center transition glow-effect">
 <i class="fas fa-info-circle mr-2"></i> Détails
 </button>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <div class="bg-gray-800 rounded-lg p-4">
 <h4 class="font-bold mb-3 text-green-400 flex items-center">
 <i class="fas fa-shield-alt mr-2"></i> Sécurité
 </h4>
 <div class="space-y-3">
 <div>
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-400">Cryptage:</span>
 <span class="text-green-400">AES-256</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-400">Protocole:</span>
 <span class="text-green-400">TLS 1.3</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div>
 </div>
 </div>
 </div>
 </div>
<div class="bg-gray-800 rounded-lg p-4">
 <h4 class="font-bold mb-3 text-blue-400 flex items-center">
 <i class="fas fa-tachometer-alt mr-2"></i> Performances
 </h4>
 <div class="space-y-3">
 <div class="flex justify-between text-sm">
 <span class="text-gray-400">OCSP Stapling:</span>
 <span class="text-green-400">Activé</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-gray-400">HTTP/2:</span>
 <span class="text-green-400">Supporté</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-gray-400">HSTS:</span>
 <span class="text-green-400">Configuré</span>
 </div>
 </div>
 </div>
 </div>
<div class="bg-gray-800 rounded-lg p-4">
 <h4 class="font-bold mb-3 text-white flex items-center">
 <i class="fas fa-terminal mr-2 text-yellow-400"></i> Informations techniques
 </h4>
 <div class="bg-black bg-opacity-50 rounded p-4 font-mono text-sm overflow-x-auto">
 <div class="text-green-400">$ openssl x509 -in certificate.crt -text -noout</div>
 <div class="mt-2 text-gray-300">
 <div>Issuer: C=US, O=Let's Encrypt, CN=R3</div>
 <div>Validity: Not Before: Jan 1 00:00:00 2024 GMT</div>
 <div>Not After : Jan 1 00:00:00 2025 GMT</div>
 <div>Subject: CN=mondomaine.com</div>
 <div>X509v3 Subject Alternative Name: DNS:mondomaine.com</div>
 <div class="text-green-400">Signature Algorithm: sha256WithRSAEncryption</div>
 </div>
 </div>
 </div>
<div class="mt-6">
 <h4 class="font-bold mb-3 text-white flex items-center">
 <i class="fas fa-lightbulb mr-2 text-yellow-400"></i> Prochaines étapes recommandées
 </h4>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm transition flex items-center justify-center">
 <i class="fas fa-cog mr-2"></i> Configurer HTTPS forcé
 </button>
 <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm transition flex items-center justify-center">
 <i class="fas fa-shield-alt mr-2"></i> Activer HSTS
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-900 py-12 px-4 border-t border-gray-800 mt-16">
 <div class="container mx-auto">
 <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-lock text-green-500 text-3xl"></i>
 <span class="text-2xl font-bold gradient-text">SSL Secure</span>
 </div>
 <p class="text-gray-400 mb-4">La solution de sécurité SSL la plus fiable pour protéger votre présence en ligne.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-green-500 transition">
 <i class="fab fa-twitter text-xl"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-green-500 transition">
 <i class="fab fa-discord text-xl"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-green-500 transition">
 <i class="fab fa-github text-xl"></i>
 </a>
 </div>
 </div>
<div>
 <h3 class="text-lg font-bold text-white mb-4">Certificats SSL</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> SSL Gratuit
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> SSL Wildcard
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> SSL EV
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> SSL Multi-domaine
 </a></li>
 </ul>
 </div>
<div>
 <h3 class="text-lg font-bold text-white mb-4">Ressources</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> Documentation
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> Tutoriels SSL
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> Vérificateur SSL
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> FAQ
 </a></li>
 </ul>
 </div>
<div>
 <h3 class="text-lg font-bold text-white mb-4">Support</h3>
 <ul class="space-y-3">
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> Contact
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> Chat en direct
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> Status
 </a></li>
 <li><a href="#" class="text-gray-400 hover:text-green-400 transition flex items-center">
 <i class="fas fa-chevron-right text-xs mr-2 text-green-500"></i> Politique de remboursement
 </a></li>
 </ul>
 </div>
 </div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center">
 <p class="text-gray-500 text-sm">© 2023 SSL Secure. Tous droits réservés. Version 2.1.3</p>
 </div>
 </div>
 </footer>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Update summary in real-time
 const updateSummary = () => {
 const domainName = document.getElementById('domainName').value.trim() || 'mondomaine.com';
 const sslType = document.querySelector('input[name="sslType"]:checked').value;
 const autoRenew = document.getElementById('autoRenew').checked;
 const ddosProtection = document.getElementById('ddosProtection').checked;
 const vulnerabilityScan = document.getElementById('vulnerabilityScan').checked;
// Set SSL type display text
 let sslTypeText = '';
 switch(sslType) {
 case 'single':
sslTypeText = 'Single Domain';
 break;
 case 'wildcard':
sslTypeText = 'Wildcard';
 break;
 }
document.getElementById('summaryDomain').textContent = domainName;
 document.getElementById('summarySSLType').textContent = sslTypeText;
 document.getElementById('summaryAutoRenew').textContent = autoRenew ? 'Activé' : 'Désactivé';
 document.getElementById('summaryAutoRenew').className = autoRenew ? 'font-medium text-green-400' : 'font-medium text-red-400';
 document.getElementById('summaryDDoS').textContent = ddosProtection ? 'Activé' : 'Désactivé';
 document.getElementById('summaryDDoS').className = ddosProtection ? 'font-medium text-green-400' : 'font-medium text-red-400';
 document.getElementById('summaryScan').textContent = vulnerabilityScan ? 'Activé' : 'Désactivé';
 document.getElementById('summaryScan').className = vulnerabilityScan ? 'font-medium text-green-400' : 'font-medium text-red-400';
 };
// Add event listeners for all form elements
 document.querySelectorAll('#domainName, input[name="sslType"], #autoRenew, #ddosProtection, #vulnerabilityScan').forEach(element => {
 element.addEventListener('change', updateSummary);
 element.addEventListener('input', updateSummary);
 });
// Initialize summary
 updateSummary();
// Register button
 const registerBtn = document.getElementById('registerBtn');
 const loadingModal = document.getElementById('loadingModal');
 const resultsModal = document.getElementById('resultsModal');
registerBtn.addEventListener('click', function() {
 const domainName = document.getElementById('domainName').value.trim();
if (!domainName) {
 alert('Veuillez entrer un nom de domaine');
 document.getElementById('domainName').focus();
 return;
 }
// Show loading modal
 loadingModal.classList.remove('hidden');
// Simulate registration progress with more realistic steps
 let progress = 0;
 const progressInterval = setInterval(() => {
 // Increment progress in a non-linear fashion for realism
 if (progress < 30) {
 progress += Math.random() * 10;
 } else if (progress < 70) {
 progress += Math.random() * 5;
 } else {
 progress += Math.random() * 2;
 }
if (progress > 100) progress = 100;
document.getElementById('registrationProgress').style.width = `${progress}%`;
 document.getElementById('progressPercent').textContent = `${Math.floor(progress)}%`;
if (progress >= 100) {
 clearInterval(progressInterval);
// Hide loading modal after a delay
 setTimeout(() => {
 loadingModal.classList.add('hidden');
// Show results
 displayRegistrationResults();
 resultsModal.classList.remove('hidden');
 }, 500);
 }
 }, 200);
 });
// Display registration results function
 function displayRegistrationResults() {
 const domainName = document.getElementById('domainName').value.trim() || 'mondomaine.com';
 document.getElementById('resultDomain').textContent = domainName;
// Set expiry date (1 year from now)
 const expiryDate = new Date();
 expiryDate.setFullYear(expiryDate.getFullYear() + 1);
 document.querySelector('#resultsModal .bg-blue-500').textContent = `Expire le ${expiryDate.toLocaleDateString()}`;
 }
// Close results modal
 document.getElementById('closeResults').addEventListener('click', function() {
 document.getElementById('resultsModal').classList.add('hidden');
 });
// Download certificate button
 document.getElementById('downloadCert').addEventListener('click', function() {
 // Show success message
 const toast = document.createElement('div');
 toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
 toast.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Téléchargement démarré!`;
 document.body.appendChild(toast);
setTimeout(() => {
 toast.remove();
 }, 3000);
 });
// View details button
 document.getElementById('viewDetails').addEventListener('click', function() {
 // Show success message
 const toast = document.createElement('div');
 toast.className = 'fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
 toast.innerHTML = `<i class="fas fa-info-circle mr-2"></i> Redirection vers le panneau de contrôle...`;
 document.body.appendChild(toast);
setTimeout(() => {
 toast.remove();
 }, 3000);
 });
 });
 </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/animeflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>