Hugging Face's logo

Spaces:
docto41
/
deepsite-pro
Running

App Files Community
deepsite-pro / index.html
docto41's picture
docto41
Add 2 files
eb0db0e verified
raw
history blame contribute delete
53.1 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suite d'Outils Web Gratuits</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>
.tool-card {
transition: all 0.3s ease;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.tool-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.progress-bar {
height: 6px;
border-radius: 3px;
background-color: #E5E7EB;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 3px;
background-color: #3B82F6;
transition: width 0.5s ease;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.ssl-status-valid {
background-color: #D1FAE5;
color: #065F46;
}
.ssl-status-expired {
background-color: #FEE2E2;
color: #B91C1C;
}
.ssl-status-warning {
background-color: #FEF3C7;
color: #92400E;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl font-bold mb-4 text-gray-800">
<i class="fas fa-tools text-blue-500 mr-2"></i> Suite d'Outils Web Gratuits
</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Tous les outils essentiels pour gérer votre présence en ligne - 100% gratuit
</p>
</header>
<!-- Main Content -->
<main class="bg-white rounded-xl shadow-lg overflow-hidden">
<!-- Navigation Tabs -->
<div class="flex overflow-x-auto border-b border-gray-200">
<button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-blue-500 border-b-2 border-transparent hover:border-blue-500 transition active-tab" data-tab="domain">
<i class="fas fa-globe mr-2"></i> Domaines
</button>
<button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-blue-500 border-b-2 border-transparent hover:border-blue-500 transition" data-tab="ssl">
<i class="fas fa-lock mr-2"></i> SSL
</button>
<button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-blue-500 border-b-2 border-transparent hover:border-blue-500 transition" data-tab="dns">
<i class="fas fa-server mr-2"></i> DNS
</button>
<button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-blue-500 border-b-2 border-transparent hover:border-blue-500 transition" data-tab="hosting">
<i class="fas fa-cloud mr-2"></i> Hébergement
</button>
<button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-blue-500 border-b-2 border-transparent hover:border-blue-500 transition" data-tab="tools">
<i class="fas fa-wrench mr-2"></i> Outils
</button>
</div>
<!-- Tab Contents -->
<div class="p-6">
<!-- Domain Tab -->
<div id="domain" class="tab-content active">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-globe text-blue-500 mr-2"></i> Enregistrement de Domaines Gratuits
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-blue-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-search mr-2 text-blue-500"></i> Vérifier la disponibilité
</h3>
<div class="flex mb-4">
<input type="text" id="domainInput" placeholder="votredomaine"
class="flex-1 rounded-l-lg border-gray-300 border p-3 focus:ring-blue-500 focus:border-blue-500">
<select id="domainTld" class="border-gray-300 border p-3">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.xyz</option>
<option>.tk</option>
<option>.ml</option>
<option>.ga</option>
<option>.cf</option>
<option>.gq</option>
</select>
<button id="checkDomainBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 rounded-r-lg">
<i class="fas fa-search"></i>
</button>
</div>
<div id="domainResults" class="hidden">
<!-- Results will be shown here -->
</div>
</div>
<div class="bg-green-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-gift mr-2 text-green-500"></i> Domaines Gratuits
</h3>
<p class="mb-4 text-gray-700">Services offrant des domaines gratuits :</p>
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Freenom (.tk, .ml, .ga, .cf, .gq)</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Dot.tk (domaines .tk)</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>InfinityFree (avec hébergement)</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>FreeNom (extension limitées)</span>
</li>
</ul>
<a href="#" class="inline-block mt-4 text-blue-500 hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Voir les offres actuelles
</a>
</div>
</div>
<div class="bg-yellow-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-info-circle text-yellow-500 mr-2"></i> Guide d'enregistrement
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-2">1. Choisir un nom</h4>
<p class="text-sm text-gray-600">Court, mémorable, sans caractères spéciaux</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-2">2. Vérifier la disponibilité</h4>
<p class="text-sm text-gray-600">Utilisez notre outil ci-dessus</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-2">3. S'inscrire sur un registraire</h4>
<p class="text-sm text-gray-600">Freenom pour les gratuits, Namecheap/Google pour les payants</p>
</div>
</div>
</div>
</div>
<!-- SSL Tab -->
<div id="ssl" class="tab-content">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-lock text-blue-500 mr-2"></i> Certificats SSL Gratuits
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-blue-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-search mr-2 text-blue-500"></i> Vérifier un certificat SSL
</h3>
<div class="flex mb-4">
<input type="text" id="sslInput" placeholder="https://votresite.com"
class="flex-1 rounded-l-lg border-gray-300 border p-3 focus:ring-blue-500 focus:border-blue-500">
<button id="checkSslBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 rounded-r-lg">
<i class="fas fa-search"></i>
</button>
</div>
<div id="sslResults" class="hidden">
<!-- Results will be shown here -->
</div>
</div>
<div class="bg-green-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-certificate mr-2 text-green-500"></i> Fournisseurs SSL Gratuits
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Let's Encrypt</h4>
<p class="text-sm text-gray-600 mb-2">Le plus populaire, valable 90 jours, renouvelable automatiquement</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Obtenir un certificat
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Cloudflare SSL</h4>
<p class="text-sm text-gray-600 mb-2">SSL flexible avec proxy, idéal pour les débutants</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Configurer avec Cloudflare
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">ZeroSSL</h4>
<p class="text-sm text-gray-600 mb-2">Interface simple, certificats de 90 jours</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Créer un certificat
</a>
</div>
</div>
</div>
</div>
<div class="bg-purple-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-question-circle text-purple-500 mr-2"></i> FAQ SSL
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-2">Pourquoi ai-je besoin d'un SSL ?</h4>
<p class="text-sm text-gray-600">Les certificats SSL chiffrent les données entre le serveur et le navigateur, protégeant les informations sensibles et améliorant le référencement.</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-2">Comment installer un certificat SSL ?</h4>
<p class="text-sm text-gray-600">La méthode varie selon votre hébergeur. La plupart des panneaux modernes (cPanel, Plesk) proposent des installations en un clic pour Let's Encrypt.</p>
</div>
</div>
</div>
</div>
<!-- DNS Tab -->
<div id="dns" class="tab-content">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-server text-blue-500 mr-2"></i> Gestion DNS Gratuite
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-blue-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-tachometer-alt mr-2 text-blue-500"></i> Test de Serveurs DNS
</h3>
<div class="mb-4">
<input type="text" id="dnsTestInput" placeholder="votredomaine.com"
class="w-full rounded-lg border-gray-300 border p-3 focus:ring-blue-500 focus:border-blue-500">
</div>
<button id="testDnsBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg w-full">
<i class="fas fa-play mr-2"></i> Tester les DNS
</button>
<div id="dnsTestResults" class="mt-4 hidden">
<!-- Results will be shown here -->
</div>
</div>
<div class="bg-green-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-cloud mr-2 text-green-500"></i> Services DNS Gratuits
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Cloudflare DNS</h4>
<p class="text-sm text-gray-600 mb-2">Rapide, sécurisé, avec protection DDoS et CDN gratuit</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Configurer
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Google Cloud DNS</h4>
<p class="text-sm text-gray-600 mb-2">Fiable, intégration avec d'autres services Google</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Configurer
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Hurricane Electric</h4>
<p class="text-sm text-gray-600 mb-2">Service DNS avancé avec IPv6</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Configurer
</a>
</div>
</div>
</div>
</div>
<div class="bg-yellow-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-cog mr-2 text-yellow-500"></i> Gestion des Enregistrements DNS
</h3>
<div class="bg-white p-4 rounded-lg shadow">
<div class="grid grid-cols-12 gap-4 mb-2 font-medium text-gray-700">
<div class="col-span-3">Type</div>
<div class="col-span-3">Nom</div>
<div class="col-span-4">Valeur</div>
<div class="col-span-2">Actions</div>
</div>
<div class="space-y-3">
<div class="grid grid-cols-12 gap-4 items-center">
<div class="col-span-3">
<select class="w-full border-gray-300 rounded p-2 text-sm">
<option>A</option>
<option>AAAA</option>
<option>CNAME</option>
<option>MX</option>
<option>TXT</option>
</select>
</div>
<div class="col-span-3">
<input type="text" placeholder="@ ou sous-domaine" class="w-full border-gray-300 rounded p-2 text-sm">
</div>
<div class="col-span-4">
<input type="text" placeholder="IP ou valeur" class="w-full border-gray-300 rounded p-2 text-sm">
</div>
<div class="col-span-2 flex space-x-2">
<button class="bg-green-500 text-white p-2 rounded text-sm">
<i class="fas fa-check"></i>
</button>
<button class="bg-red-500 text-white p-2 rounded text-sm">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="grid grid-cols-12 gap-4 items-center bg-gray-50 p-2 rounded">
<div class="col-span-3 text-sm">A</div>
<div class="col-span-3 text-sm">@</div>
<div class="col-span-4 text-sm">192.0.2.1</div>
<div class="col-span-2 flex space-x-2">
<button class="bg-blue-500 text-white p-2 rounded text-sm">
<i class="fas fa-edit"></i>
</button>
<button class="bg-red-500 text-white p-2 rounded text-sm">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm">
<i class="fas fa-plus mr-1"></i> Ajouter un enregistrement
</button>
</div>
</div>
</div>
<!-- Hosting Tab -->
<div id="hosting" class="tab-content">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-cloud text-blue-500 mr-2"></i> Hébergement Web Gratuit
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-blue-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-rocket mr-2 text-blue-500"></i> Hébergeurs Gratuits
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">InfinityFree</h4>
<p class="text-sm text-gray-600 mb-2">400 Go espace, bande passante illimitée, PHP/MySQL</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Visiter
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">000webhost</h4>
<p class="text-sm text-gray-600 mb-2">300 Mo espace, 3 Go bande passante, cPanel</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Visiter
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">FreeHostia</h4>
<p class="text-sm text-gray-600 mb-2">250 Mo espace, 6 Go bande passante, 5 bases MySQL</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Visiter
</a>
</div>
</div>
</div>
<div class="bg-green-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-database mr-2 text-green-500"></i> Bases de Données Gratuites
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">MongoDB Atlas</h4>
<p class="text-sm text-gray-600 mb-2">512 Mo de stockage gratuit, idéal pour les applications</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Configurer
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Firebase</h4>
<p class="text-sm text-gray-600 mb-2">Base NoSQL temps réel, 1 Go de stockage</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Configurer
</a>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">ElephantSQL</h4>
<p class="text-sm text-gray-600 mb-2">PostgreSQL gratuit avec 20 Mo de stockage</p>
<a href="#" class="text-blue-500 text-sm hover:underline">
<i class="fas fa-external-link-alt mr-1"></i> Configurer
</a>
</div>
</div>
</div>
<div class="bg-purple-50 p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-upload mr-2 text-purple-500"></i> Déployer un Site
</h3>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Via FTP</h4>
<p class="text-sm text-gray-600 mb-2">Utilisez FileZilla avec les identifiants provided by your host</p>
<div class="flex space-x-2">
<input type="text" placeholder="Serveur FTP" class="flex-1 border-gray-300 rounded p-2 text-sm">
<button class="bg-blue-500 text-white p-2 rounded text-sm">
<i class="fas fa-link"></i>
</button>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h4 class="font-medium mb-1">Via GitHub</h4>
<p class="text-sm text-gray-600 mb-2">Certains hébergeurs permettent le déploiement depuis un dépôt GitHub</p>
<div class="flex space-x-2">
<input type="text" placeholder="URL du dépôt" class="flex-1 border-gray-300 rounded p-2 text-sm">
<button class="bg-blue-500 text-white p-2 rounded text-sm">
<i class="fas fa-code-branch"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tools Tab -->
<div id="tools" class="tab-content">
<h2 class="text-2xl font-bold mb-6 text-gray-800">
<i class="fas fa-wrench text-blue-500 mr-2"></i> Outils Utiles
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-blue-50 p-6 rounded-lg tool-card">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-search mr-2 text-blue-500"></i> WHOIS
</h3>
<p class="mb-4 text-gray-700">Recherchez les informations d'enregistrement d'un domaine</p>
<div class="flex">
<input type="text" placeholder="votredomaine.com"
class="flex-1 rounded-l-lg border-gray-300 border p-3 focus:ring-blue-500 focus:border-blue-500">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 rounded-r-lg">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="bg-green-50 p-6 rounded-lg tool-card">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-exchange-alt mr-2 text-green-500"></i> Convertisseur IP
</h3>
<p class="mb-4 text-gray-700">Convertir entre adresse IP et nom de domaine</p>
<div class="flex">
<input type="text" placeholder="IP ou domaine"
class="flex-1 rounded-l-lg border-gray-300 border p-3 focus:ring-green-500 focus:border-green-500">
<button class="bg-green-500 hover:bg-green-600 text-white px-4 rounded-r-lg">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</div>
<div class="bg-purple-50 p-6 rounded-lg tool-card">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-shield-alt mr-2 text-purple-500"></i> Test de Sécurité
</h3>
<p class="mb-4 text-gray-700">Vérifiez la sécurité de votre site web</p>
<div class="flex">
<input type="text" placeholder="https://votresite.com"
class="flex-1 rounded-l-lg border-gray-300 border p-3 focus:ring-purple-500 focus:border-purple-500">
<button class="bg-purple-500 hover:bg-purple-600 text-white px-4 rounded-r-lg">
<i class="fas fa-shield-alt"></i>
</button>
</div>
</div>
<div class="bg-yellow-50 p-6 rounded-lg tool-card">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-compress-alt mr-2 text-yellow-500"></i> Minifier
</h3>
<p class="mb-4 text-gray-700">Minifiez votre CSS, JS et HTML</p>
<select class="w-full border-gray-300 rounded p-3 mb-2">
<option>CSS</option>
<option>JavaScript</option>
<option>HTML</option>
</select>
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">
<i class="fas fa-file-upload mr-1"></i> Sélectionner un fichier
</button>
</div>
<div class="bg-red-50 p-6 rounded-lg tool-card">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-robot mr-2 text-red-500"></i> Test SEO
</h3>
<p class="mb-4 text-gray-700">Analysez les facteurs SEO de votre site</p>
<div class="flex">
<input type="text" placeholder="https://votresite.com"
class="flex-1 rounded-l-lg border-gray-300 border p-3 focus:ring-red-500 focus:border-red-500">
<button class="bg-red-500 hover:bg-red-600 text-white px-4 rounded-r-lg">
<i class="fas fa-chart-line"></i>
</button>
</div>
</div>
<div class="bg-indigo-50 p-6 rounded-lg tool-card">
<h3 class="text-xl font-semibold mb-4 text-gray-800">
<i class="fas fa-qrcode mr-2 text-indigo-500"></i> Générateur QR Code
</h3>
<p class="mb-4 text-gray-700">Créez un QR Code pour votre URL</p>
<div class="flex">
<input type="text" placeholder="https://votresite.com"
class="flex-1 rounded-l-lg border-gray-300 border p-3 focus:ring-indigo-500 focus:border-indigo-500">
<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 rounded-r-lg">
<i class="fas fa-qrcode"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-12 pt-6 border-t border-gray-200 text-center text-gray-600">
<div class="mb-4">
<a href="#" class="text-blue-500 hover:underline mx-2">Conditions d'utilisation</a>
<a href="#" class="text-blue-500 hover:underline mx-2">Politique de confidentialité</a>
<a href="#" class="text-blue-500 hover:underline mx-2">Contact</a>
</div>
<p class="text-sm">
<i class="fas fa-info-circle text-blue-500 mr-1"></i> Tous les outils présentés sont 100% gratuits - Aucune garantie n'est fournie
</p>
</footer>
</div>
<script>
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Tab switching functionality
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(btn => {
btn.addEventListener('click', function() {
// Remove active class from all tabs and contents
tabButtons.forEach(tb => {
tb.classList.remove('border-blue-500', 'text-blue-500');
tb.classList.add('border-transparent', 'text-gray-600');
});
tabContents.forEach(tc => {
tc.classList.remove('active');
});
// Add active class to clicked tab
this.classList.remove('border-transparent', 'text-gray-600');
this.classList.add('border-blue-500', 'text-blue-500');
// Show corresponding content
const tabId = this.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// Domain availability check
document.getElementById('checkDomainBtn').addEventListener('click', function() {
const domain = document.getElementById('domainInput').value.trim();
const tld = document.getElementById('domainTld').value;
if (!domain) {
alert('Veuillez entrer un nom de domaine');
return;
}
const fullDomain = domain + tld;
const domainResults = document.getElementById('domainResults');
// Simulate checking
domainResults.innerHTML = `
<div class="text-center py-4">
<i class="fas fa-spinner fa-spin text-blue-500 text-2xl mb-2"></i>
<p>Vérification de ${fullDomain} en cours...</p>
</div>
`;
domainResults.classList.remove('hidden');
// Simulate results after delay
setTimeout(() => {
const isAvailable = Math.random() > 0.5; // 50% chance of being available
if (isAvailable) {
domainResults.innerHTML = `
<div class="bg-green-100 border-l-4 border-green-500 p-4 text-green-700">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 text-2xl mr-3"></i>
<div>
<p class="font-bold">${fullDomain} est disponible !</p>
<p class="text-sm">Enregistrez ce domaine maintenant avec l'un de nos partenaires.</p>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded text-sm">
<i class="fas fa-external-link-alt mr-1"></i> Enregistrer avec Freenom
</button>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded text-sm">
<i class="fas fa-shopping-cart mr-1"></i> Ajouter à la liste
</button>
</div>
</div>
`;
} else {
domainResults.innerHTML = `
<div class="bg-red-100 border-l-4 border-red-500 p-4 text-red-700">
<div class="flex items-center">
<i class="fas fa-times-circle text-red-500 text-2xl mr-3"></i>
<div>
<p class="font-bold">${fullDomain} n'est pas disponible</p>
<p class="text-sm">Ce domaine est déjà enregistré. Essayez une autre variation.</p>
</div>
</div>
<div class="mt-4">
<p class="text-sm mb-2">Suggestions alternatives :</p>
<ul class="space-y-1">
<li class="flex items-center">
<i class="fas fa-arrow-right text-gray-500 mr-2 text-xs"></i>
<span class="text-blue-500 hover:underline cursor-pointer">${domain}${tld === '.com' ? '.net' : '.com'}</span>
</li>
<li class="flex items-center">
<i class="fas fa-arrow-right text-gray-500 mr-2 text-xs"></i>
<span class="text-blue-500 hover:underline cursor-pointer">${domain}123${tld}</span>
</li>
<li class="flex items-center">
<i class="fas fa-arrow-right text-gray-500 mr-2 text-xs"></i>
<span class="text-blue-500 hover:underline cursor-pointer">mon${domain}${tld}</span>
</li>
</ul>
</div>
</div>
`;
}
}, 1500);
});
// SSL Checker
document.getElementById('checkSslBtn').addEventListener('click', function() {
const url = document.getElementById('sslInput').value.trim();
if (!url) {
alert('Veuillez entrer une URL');
return;
}
const sslResults = document.getElementById('sslResults');
// Simulate checking
sslResults.innerHTML = `
<div class="text-center py-4">
<i class="fas fa-spinner fa-spin text-blue-500 text-2xl mb-2"></i>
<p>Analyse du certificat SSL pour ${url} en cours...</p>
</div>
`;
sslResults.classList.remove('hidden');
// Simulate results after delay
setTimeout(() => {
const status = Math.random() > 0.3 ? 'valid' : (Math.random() > 0.5 ? 'expired' : 'warning');
const days = Math.floor(Math.random() * 365);
if (status === 'valid') {
sslResults.innerHTML = `
<div class="ssl-status-valid p-4 rounded-lg">
<div class="flex items-center mb-4">
<i class="fas fa-lock text-2xl mr-3"></i>
<div>
<p class="font-bold">Certificat SSL Valide</p>
<p class="text-sm">${url} utilise un certificat SSL valide et sécurisé.</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<p class="font-medium">Émis par :</p>
<p>Let's Encrypt</p>
</div>
<div>
<p class="font-medium">Expire dans :</p>
<p>${days} jours</p>
</div>
<div>
<p class="font-medium">Protocole :</p>
<p>TLS 1.3</p>
</div>
<div>
<p class="font-medium">Chiffrement :</p>
<p>AES-256-GCM</p>
</div>
</div>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:underline text-sm">
<i class="fas fa-external-link-alt mr-1"></i> Obtenir un certificat similaire
</a>
</div>
</div>
`;
} else if (status === 'expired') {
sslResults.innerHTML = `
<div class="ssl-status-expired p-4 rounded-lg">
<div class="flex items-center mb-4">
<i class="fas fa-exclamation-triangle text-2xl mr-3"></i>
<div>
<p class="font-bold">Certificat SSL Expiré</p>
<p class="text-sm">${url} a un certificat SSL qui a expiré il y a ${days} jours.</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<p class="font-medium">Émis par :</p>
<p>Let's Encrypt</p>
</div>
<div>
<p class="font-medium">Expiré depuis :</p>
<p>${days} jours</p>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<a href="#" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded text-sm text-center">
<i class="fas fa-sync-alt mr-1"></i> Renouveler
</a>
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded text-sm text-center">
<i class="fas fa-info-circle mr-1"></i> Plus d'infos
</a>
</div>
</div>
`;
} else {
sslResults.innerHTML = `
<div class="ssl-status-warning p-4 rounded-lg">
<div class="flex items-center mb-4">
<i class="fas fa-exclamation-circle text-2xl mr-3"></i>
<div>
<p class="font-bold">Problème de Configuration SSL</p>
<p class="text-sm">${url} a un certificat SSL mais avec des problèmes de configuration.</p>
</div>
</div>
<div class="text-sm space-y-2">
<p><i class="fas fa-check text-green-500 mr-2"></i> Certificat valide</p>
<p><i class="fas fa-times text-red-500 mr-2"></i> Mauvaise configuration de la chaîne</p>
<p><i class="fas fa-check text-green-500 mr-2"></i> Protocoles modernes supportés</p>
<p><i class="fas fa-times text-red-500 mr-2"></i> Redirection HTTP vers HTTPS manquante</p>
</div>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:underline text-sm">
<i class="fas fa-external-link-alt mr-1"></i> Guide de configuration SSL
</a>
</div>
</div>
`;
}
}, 2000);
});
// DNS Test
document.getElementById('testDnsBtn').addEventListener('click', function() {
const domain = document.getElementById('dnsTestInput').value.trim();
if (!domain) {
alert('Veuillez entrer un domaine');
return;
}
const dnsTestResults = document.getElementById('dnsTestResults');
// Simulate checking
dnsTestResults.innerHTML = `
<div class="text-center py-4">
<i class="fas fa-spinner fa-spin text-blue-500 text-2xl mb-2"></i>
<p>Test des serveurs DNS pour ${domain} en cours...</p>
</div>
`;
dnsTestResults.classList.remove('hidden');
// Simulate results after delay
setTimeout(() => {
const servers = [
{ name: 'Cloudflare (1.1.1.1)', ping: Math.floor(Math.random() * 50) + 5, status: 'excellent' },
{ name: 'Google (8.8.8.8)', ping: Math.floor(Math.random() * 80) + 10, status: 'good' },
{ name: 'OpenDNS (208.67.222.222)', ping: Math.floor(Math.random() * 120) + 20, status: 'average' },
{ name: 'Quad9 (9.9.9.9)', ping: Math.floor(Math.random() * 100) + 15, status: 'good' },
{ name: 'DNS local', ping: Math.floor(Math.random() * 200) + 50, status: 'poor' }
];
let html = `
<div class="mb-4">
<h4 class="font-medium mb-2">Résultats DNS pour ${domain}</h4>
<div class="progress-bar">
<div class="progress-fill" style="width: 100%"></div>
</div>
</div>
<div class="space-y-3">
`;
servers.forEach(server => {
let statusClass = '';
let statusIcon = '';
if (server.status === 'excellent') {
statusClass = 'text-green-500';
statusIcon = 'fa-check-circle';
} else if (server.status === 'good') {
statusClass = 'text-blue-500';
statusIcon = 'fa-check-circle';
} else if (server.status === 'average') {
statusClass = 'text-yellow-500';
statusIcon = 'fa-exclamation-circle';
} else {
statusClass = 'text-red-500';
statusIcon = 'fa-times-circle';
}
html += `
<div class="flex justify-between items-center bg-gray-50 p-3 rounded">
<div class="flex items-center">
<i class="fas ${statusIcon} ${statusClass} mr-3"></i>
<span>${server.name}</span>
</div>
<span class="font-medium ${statusClass}">${server.ping} ms</span>
</div>
`;
});
html += `
</div>
<div class="mt-4 text-center">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded">
<i class="fas fa-exchange-alt mr-1"></i> Changer de serveur DNS
</button>
</div>
`;
dnsTestResults.innerHTML = html;
}, 2500);
});
});
</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/deepsite-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>