Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +645 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: mega-site-generator
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: gray
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,645 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Mega Site Generator - Créateur de Sites Professionnels</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
@keyframes float {
|
| 11 |
+
0%, 100% { transform: translateY(0); }
|
| 12 |
+
50% { transform: translateY(-10px); }
|
| 13 |
+
}
|
| 14 |
+
@keyframes pulse {
|
| 15 |
+
0%, 100% { opacity: 1; }
|
| 16 |
+
50% { opacity: 0.5; }
|
| 17 |
+
}
|
| 18 |
+
@keyframes rotate {
|
| 19 |
+
0% { transform: rotate(0deg); }
|
| 20 |
+
100% { transform: rotate(360deg); }
|
| 21 |
+
}
|
| 22 |
+
.floating {
|
| 23 |
+
animation: float 3s ease-in-out infinite;
|
| 24 |
+
}
|
| 25 |
+
.pulse {
|
| 26 |
+
animation: pulse 2s ease-in-out infinite;
|
| 27 |
+
}
|
| 28 |
+
.rotate {
|
| 29 |
+
animation: rotate 4s linear infinite;
|
| 30 |
+
}
|
| 31 |
+
.gradient-bg {
|
| 32 |
+
background: linear-gradient(135deg, #6e8efb, #a777e3);
|
| 33 |
+
}
|
| 34 |
+
.code-editor {
|
| 35 |
+
background: #1e293b;
|
| 36 |
+
border-radius: 0.5rem;
|
| 37 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
| 38 |
+
}
|
| 39 |
+
.preview-window {
|
| 40 |
+
background: white;
|
| 41 |
+
border-radius: 0.5rem;
|
| 42 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
| 43 |
+
transition: all 0.3s ease;
|
| 44 |
+
}
|
| 45 |
+
.preview-window:hover {
|
| 46 |
+
transform: scale(1.02);
|
| 47 |
+
}
|
| 48 |
+
.progress-bar {
|
| 49 |
+
height: 6px;
|
| 50 |
+
background: linear-gradient(90deg, #4f46e5, #a855f7);
|
| 51 |
+
transition: width 0.5s ease;
|
| 52 |
+
}
|
| 53 |
+
.ai-chip {
|
| 54 |
+
background: linear-gradient(90deg, #8b5cf6, #ec4899);
|
| 55 |
+
}
|
| 56 |
+
.feature-card:hover {
|
| 57 |
+
transform: translateY(-5px);
|
| 58 |
+
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
| 59 |
+
}
|
| 60 |
+
.feature-card {
|
| 61 |
+
transition: all 0.3s ease;
|
| 62 |
+
}
|
| 63 |
+
.glow {
|
| 64 |
+
box-shadow: 0 0 15px rgba(167, 119, 227, 0.7);
|
| 65 |
+
}
|
| 66 |
+
</style>
|
| 67 |
+
</head>
|
| 68 |
+
<body class="bg-gray-100 font-sans">
|
| 69 |
+
<!-- Header -->
|
| 70 |
+
<header class="gradient-bg text-white">
|
| 71 |
+
<div class="container mx-auto px-4 py-8">
|
| 72 |
+
<div class="flex justify-between items-center">
|
| 73 |
+
<div class="flex items-center space-x-2">
|
| 74 |
+
<i class="fas fa-robot text-3xl floating"></i>
|
| 75 |
+
<h1 class="text-3xl font-bold">Mega Site Generator</h1>
|
| 76 |
+
</div>
|
| 77 |
+
<nav class="hidden md:flex space-x-6">
|
| 78 |
+
<a href="#" class="hover:text-gray-200 transition">Accueil</a>
|
| 79 |
+
<a href="#" class="hover:text-gray-200 transition">Fonctionnalités</a>
|
| 80 |
+
<a href="#" class="hover:text-gray-200 transition">Exemples</a>
|
| 81 |
+
<a href="#" class="hover:text-gray-200 transition">Prix</a>
|
| 82 |
+
<a href="#" class="hover:text-gray-200 transition">Contact</a>
|
| 83 |
+
</nav>
|
| 84 |
+
<button class="md:hidden text-2xl">
|
| 85 |
+
<i class="fas fa-bars"></i>
|
| 86 |
+
</button>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<div class="mt-16 mb-20 text-center">
|
| 90 |
+
<h2 class="text-5xl font-bold mb-6">Créez des sites professionnels <span class="text-yellow-300">automatiquement</span></h2>
|
| 91 |
+
<p class="text-xl mb-8 max-w-3xl mx-auto">Notre système robotisé génère des sites complets avec plus de 1500 lignes de code, plusieurs pages et une structure professionnelle en quelques minutes.</p>
|
| 92 |
+
<div class="flex justify-center space-x-4">
|
| 93 |
+
<button class="bg-white text-purple-700 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition transform hover:scale-105">
|
| 94 |
+
Essai Gratuit <i class="fas fa-arrow-right ml-2"></i>
|
| 95 |
+
</button>
|
| 96 |
+
<button class="border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-purple-700 transition transform hover:scale-105">
|
| 97 |
+
Voir la démo
|
| 98 |
+
</button>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
|
| 102 |
+
<div class="relative h-64">
|
| 103 |
+
<div class="absolute -bottom-20 left-1/2 transform -translate-x-1/2 w-11/12 max-w-6xl">
|
| 104 |
+
<div class="bg-white rounded-xl shadow-2xl p-6 code-editor">
|
| 105 |
+
<div class="flex mb-4">
|
| 106 |
+
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
|
| 107 |
+
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
|
| 108 |
+
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
| 109 |
+
</div>
|
| 110 |
+
<div class="flex">
|
| 111 |
+
<div class="w-1/4 pr-4 border-r border-gray-200">
|
| 112 |
+
<div class="text-sm text-gray-500 mb-2"><i class="fas fa-folder mr-2"></i> Projet</div>
|
| 113 |
+
<div class="text-sm text-gray-500 mb-1 ml-4"><i class="fas fa-folder mr-2"></i> pages</div>
|
| 114 |
+
<div class="text-sm text-gray-500 mb-1 ml-8"><i class="far fa-file mr-2"></i> accueil.html</div>
|
| 115 |
+
<div class="text-sm text-gray-500 mb-1 ml-8"><i class="far fa-file mr-2"></i> services.html</div>
|
| 116 |
+
<div class="text-sm text-gray-500 mb-1 ml-8"><i class="far fa-file mr-2"></i> contact.html</div>
|
| 117 |
+
<div class="text-sm text-gray-500 mb-2 ml-4"><i class="fas fa-folder mr-2"></i> assets</div>
|
| 118 |
+
<div class="text-sm text-gray-500 mb-1 ml-8"><i class="fas fa-folder mr-2"></i> css</div>
|
| 119 |
+
<div class="text-sm text-gray-500 mb-1 ml-8"><i class="fas fa-folder mr-2"></i> js</div>
|
| 120 |
+
<div class="text-sm text-gray-500 mb-1 ml-8"><i class="fas fa-folder mr-2"></i> images</div>
|
| 121 |
+
</div>
|
| 122 |
+
<div class="w-3/4 pl-4">
|
| 123 |
+
<div class="text-sm text-gray-300">
|
| 124 |
+
<span class="text-purple-400"><!DOCTYPE html></span><br>
|
| 125 |
+
<span class="text-purple-400"><html</span> <span class="text-green-400">lang=</span><span class="text-yellow-300">"fr"</span><span class="text-purple-400">></span><br>
|
| 126 |
+
<span class="text-purple-400"><head></span><br>
|
| 127 |
+
<span class="text-purple-400"><meta</span> <span class="text-green-400">charset=</span><span class="text-yellow-300">"UTF-8"</span><span class="text-purple-400">></span><br>
|
| 128 |
+
<span class="text-purple-400"><meta</span> <span class="text-green-400">name=</span><span class="text-yellow-300">"viewport"</span> <span class="text-green-400">content=</span><span class="text-yellow-300">"width=device-width, initial-scale=1.0"</span><span class="text-purple-400">></span><br>
|
| 129 |
+
<span class="text-purple-400"><title></span><span class="text-gray-100">Mon Site Professionnel</span><span class="text-purple-400"></title></span><br>
|
| 130 |
+
<span class="text-purple-400"><link</span> <span class="text-green-400">rel=</span><span class="text-yellow-300">"stylesheet"</span> <span class="text-green-400">href=</span><span class="text-yellow-300">"css/style.css"</span><span class="text-purple-400">></span><br>
|
| 131 |
+
<span class="text-purple-400"></head></span><br>
|
| 132 |
+
<span class="text-purple-400"><body></span><br>
|
| 133 |
+
<span class="text-purple-400"><header</span> <span class="text-green-400">class=</span><span class="text-yellow-300">"header"</span><span class="text-purple-400">></span><br>
|
| 134 |
+
<span class="text-purple-400"><nav></span><br>
|
| 135 |
+
<span class="text-purple-400"><ul</span> <span class="text-green-400">class=</span><span class="text-yellow-300">"nav-list"</span><span class="text-purple-400">></span><br>
|
| 136 |
+
<span class="text-purple-400"><li><a</span> <span class="text-green-400">href=</span><span class="text-yellow-300">"#"</span><span class="text-purple-400">></span><span class="text-gray-100">Accueil</span><span class="text-purple-400"></a></li></span><br>
|
| 137 |
+
<span class="text-purple-400"><li><a</span> <span class="text-green-400">href=</span><span class="text-yellow-300">"#"</span><span class="text-purple-400">></span><span class="text-gray-100">Services</span><span class="text-purple-400"></a></li></span><br>
|
| 138 |
+
<span class="text-purple-400"><li><a</span> <span class="text-green-400">href=</span><span class="text-yellow-300">"#"</span><span class="text-purple-400">></span><span class="text-gray-100">Contact</span><span class="text-purple-400"></a></li></span><br>
|
| 139 |
+
<span class="text-purple-400"></ul></span><br>
|
| 140 |
+
<span class="text-purple-400"></nav></span><br>
|
| 141 |
+
<span class="text-purple-400"></header></span><br>
|
| 142 |
+
<span class="text-purple-400"><main></span><br>
|
| 143 |
+
<span class="text-purple-400"><section</span> <span class="text-green-400">class=</span><span class="text-yellow-300">"hero"</span><span class="text-purple-400">></span><br>
|
| 144 |
+
<span class="text-purple-400"><h1></span><span class="text-gray-100">Bienvenue sur notre site professionnel</span><span class="text-purple-400"></h1></span><br>
|
| 145 |
+
<span class="text-purple-400"><p></span><span class="text-gray-100">Nous créons des solutions web sur mesure pour votre entreprise.</span><span class="text-purple-400"></p></span><br>
|
| 146 |
+
<span class="text-purple-400"><a</span> <span class="text-green-400">href=</span><span class="text-yellow-300">"#"</span> <span class="text-green-400">class=</span><span class="text-yellow-300">"btn"</span><span class="text-purple-400">></span><span class="text-gray-100">En savoir plus</span><span class="text-purple-400"></a></span><br>
|
| 147 |
+
<span class="text-purple-400"></section></span><br>
|
| 148 |
+
<span class="text-purple-400"></main></span><br>
|
| 149 |
+
<span class="text-purple-400"></body></span><br>
|
| 150 |
+
<span class="text-purple-400"></html></span>
|
| 151 |
+
</div>
|
| 152 |
+
</div>
|
| 153 |
+
</div>
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
</header>
|
| 159 |
+
|
| 160 |
+
<!-- Main Content -->
|
| 161 |
+
<main class="mt-32">
|
| 162 |
+
<!-- Generator Section -->
|
| 163 |
+
<section class="container mx-auto px-4 py-16">
|
| 164 |
+
<div class="text-center mb-16">
|
| 165 |
+
<h2 class="text-4xl font-bold mb-4">Générateur Automatique de Sites Professionnels</h2>
|
| 166 |
+
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Notre système robotisé crée des sites complets avec plus de 1500 lignes de code optimisé, plusieurs pages et une structure professionnelle.</p>
|
| 167 |
+
</div>
|
| 168 |
+
|
| 169 |
+
<div class="flex flex-col lg:flex-row gap-8">
|
| 170 |
+
<!-- Configuration Panel -->
|
| 171 |
+
<div class="lg:w-1/3 bg-white rounded-xl shadow-lg p-6">
|
| 172 |
+
<h3 class="text-2xl font-bold mb-6 text-purple-700">Configuration du Site</h3>
|
| 173 |
+
|
| 174 |
+
<div class="mb-6">
|
| 175 |
+
<label class="block text-gray-700 mb-2">Type de Site</label>
|
| 176 |
+
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
|
| 177 |
+
<option>Site d'Entreprise</option>
|
| 178 |
+
<option>Portfolio Professionnel</option>
|
| 179 |
+
<option>Boutique en Ligne</option>
|
| 180 |
+
<option>Site d'Actualités</option>
|
| 181 |
+
<option>Application Web</option>
|
| 182 |
+
</select>
|
| 183 |
+
</div>
|
| 184 |
+
|
| 185 |
+
<div class="mb-6">
|
| 186 |
+
<label class="block text-gray-700 mb-2">Nombre de Pages</label>
|
| 187 |
+
<div class="flex items-center">
|
| 188 |
+
<input type="range" min="3" max="20" value="5" class="w-full mr-4">
|
| 189 |
+
<span class="text-lg font-bold">5</span>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
|
| 193 |
+
<div class="mb-6">
|
| 194 |
+
<label class="block text-gray-700 mb-2">Style Visuel</label>
|
| 195 |
+
<div class="grid grid-cols-3 gap-2">
|
| 196 |
+
<button class="p-2 border rounded-lg hover:border-purple-500">
|
| 197 |
+
<div class="h-8 bg-gradient-to-r from-blue-500 to-blue-700 rounded"></div>
|
| 198 |
+
<span class="text-xs mt-1">Professionnel</span>
|
| 199 |
+
</button>
|
| 200 |
+
<button class="p-2 border rounded-lg hover:border-purple-500">
|
| 201 |
+
<div class="h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded"></div>
|
| 202 |
+
<span class="text-xs mt-1">Moderne</span>
|
| 203 |
+
</button>
|
| 204 |
+
<button class="p-2 border rounded-lg hover:border-purple-500">
|
| 205 |
+
<div class="h-8 bg-gradient-to-r from-green-500 to-teal-500 rounded"></div>
|
| 206 |
+
<span class="text-xs mt-1">Naturel</span>
|
| 207 |
+
</button>
|
| 208 |
+
<button class="p-2 border rounded-lg hover:border-purple-500">
|
| 209 |
+
<div class="h-8 bg-gradient-to-r from-red-500 to-orange-500 rounded"></div>
|
| 210 |
+
<span class="text-xs mt-1">Énergique</span>
|
| 211 |
+
</button>
|
| 212 |
+
<button class="p-2 border rounded-lg hover:border-purple-500">
|
| 213 |
+
<div class="h-8 bg-gradient-to-r from-gray-700 to-gray-900 rounded"></div>
|
| 214 |
+
<span class="text-xs mt-1">Minimaliste</span>
|
| 215 |
+
</button>
|
| 216 |
+
<button class="p-2 border rounded-lg hover:border-purple-500">
|
| 217 |
+
<div class="h-8 bg-gradient-to-r from-yellow-400 to-red-500 rounded"></div>
|
| 218 |
+
<span class="text-xs mt-1">Audacieux</span>
|
| 219 |
+
</button>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
|
| 223 |
+
<div class="mb-6">
|
| 224 |
+
<label class="block text-gray-700 mb-2">Fonctionnalités</label>
|
| 225 |
+
<div class="space-y-2">
|
| 226 |
+
<label class="flex items-center">
|
| 227 |
+
<input type="checkbox" class="rounded text-purple-500" checked>
|
| 228 |
+
<span class="ml-2">Formulaire de Contact</span>
|
| 229 |
+
</label>
|
| 230 |
+
<label class="flex items-center">
|
| 231 |
+
<input type="checkbox" class="rounded text-purple-500" checked>
|
| 232 |
+
<span class="ml-2">Galerie d'Images</span>
|
| 233 |
+
</label>
|
| 234 |
+
<label class="flex items-center">
|
| 235 |
+
<input type="checkbox" class="rounded text-purple-500">
|
| 236 |
+
<span class="ml-2">Blog Intégré</span>
|
| 237 |
+
</label>
|
| 238 |
+
<label class="flex items-center">
|
| 239 |
+
<input type="checkbox" class="rounded text-purple-500">
|
| 240 |
+
<span class="ml-2">Système de Réservation</span>
|
| 241 |
+
</label>
|
| 242 |
+
<label class="flex items-center">
|
| 243 |
+
<input type="checkbox" class="rounded text-purple-500">
|
| 244 |
+
<span class="ml-2">E-commerce</span>
|
| 245 |
+
</label>
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
|
| 249 |
+
<div class="mb-6">
|
| 250 |
+
<label class="block text-gray-700 mb-2">Contenu du Site</label>
|
| 251 |
+
<textarea class="w-full p-3 border border-gray-300 rounded-lg h-32 focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Décrivez votre entreprise, services, produits..."></textarea>
|
| 252 |
+
</div>
|
| 253 |
+
|
| 254 |
+
<button class="w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-bold hover:bg-purple-700 transition flex items-center justify-center">
|
| 255 |
+
<i class="fas fa-bolt mr-2"></i> Générer le Site
|
| 256 |
+
</button>
|
| 257 |
+
</div>
|
| 258 |
+
|
| 259 |
+
<!-- Preview and Generation -->
|
| 260 |
+
<div class="lg:w-2/3">
|
| 261 |
+
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
| 262 |
+
<div class="p-4 bg-gray-800 flex items-center">
|
| 263 |
+
<div class="flex space-x-2 mr-4">
|
| 264 |
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
| 265 |
+
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
| 266 |
+
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
| 267 |
+
</div>
|
| 268 |
+
<div class="text-white text-sm">Prévisualisation en temps réel</div>
|
| 269 |
+
</div>
|
| 270 |
+
|
| 271 |
+
<div class="p-6 preview-window">
|
| 272 |
+
<div class="flex justify-between items-center mb-6">
|
| 273 |
+
<div class="text-xl font-bold">MonSitePro.com</div>
|
| 274 |
+
<div class="flex space-x-4">
|
| 275 |
+
<a href="#" class="text-gray-600 hover:text-purple-600">Accueil</a>
|
| 276 |
+
<a href="#" class="text-gray-600 hover:text-purple-600">Services</a>
|
| 277 |
+
<a href="#" class="text-gray-600 hover:text-purple-600">À Propos</a>
|
| 278 |
+
<a href="#" class="text-gray-600 hover:text-purple-600">Contact</a>
|
| 279 |
+
</div>
|
| 280 |
+
</div>
|
| 281 |
+
|
| 282 |
+
<div class="gradient-bg text-white p-8 rounded-lg mb-6 text-center">
|
| 283 |
+
<h1 class="text-3xl font-bold mb-4">Solutions Professionnelles pour Votre Entreprise</h1>
|
| 284 |
+
<p class="mb-6">Nous créons des sites web sur mesure avec une technologie de pointe et un design élégant.</p>
|
| 285 |
+
<button class="bg-white text-purple-700 px-6 py-2 rounded-lg font-bold">Découvrir nos services</button>
|
| 286 |
+
</div>
|
| 287 |
+
|
| 288 |
+
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
| 289 |
+
<div class="border rounded-lg p-4 hover:shadow-md transition">
|
| 290 |
+
<div class="text-purple-600 text-3xl mb-3"><i class="fas fa-laptop-code"></i></div>
|
| 291 |
+
<h3 class="font-bold mb-2">Développement Web</h3>
|
| 292 |
+
<p class="text-gray-600 text-sm">Sites performants et adaptés à tous les appareils.</p>
|
| 293 |
+
</div>
|
| 294 |
+
<div class="border rounded-lg p-4 hover:shadow-md transition">
|
| 295 |
+
<div class="text-purple-600 text-3xl mb-3"><i class="fas fa-mobile-alt"></i></div>
|
| 296 |
+
<h3 class="font-bold mb-2">Design Responsive</h3>
|
| 297 |
+
<p class="text-gray-600 text-sm">Expérience utilisateur optimale sur tous les écrans.</p>
|
| 298 |
+
</div>
|
| 299 |
+
<div class="border rounded-lg p-4 hover:shadow-md transition">
|
| 300 |
+
<div class="text-purple-600 text-3xl mb-3"><i class="fas fa-chart-line"></i></div>
|
| 301 |
+
<h3 class="font-bold mb-2">SEO Avancé</h3>
|
| 302 |
+
<p class="text-gray-600 text-sm">Visibilité maximale sur les moteurs de recherche.</p>
|
| 303 |
+
</div>
|
| 304 |
+
</div>
|
| 305 |
+
</div>
|
| 306 |
+
</div>
|
| 307 |
+
|
| 308 |
+
<!-- Generation Progress -->
|
| 309 |
+
<div class="mt-6 bg-white rounded-xl shadow-lg p-6">
|
| 310 |
+
<div class="flex items-center mb-4">
|
| 311 |
+
<div class="ai-chip text-white text-xs px-2 py-1 rounded-full mr-2">
|
| 312 |
+
AI
|
| 313 |
+
</div>
|
| 314 |
+
<h3 class="font-bold">Génération Automatique en Cours</h3>
|
| 315 |
+
</div>
|
| 316 |
+
|
| 317 |
+
<div class="mb-4">
|
| 318 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
| 319 |
+
<div class="progress-bar rounded-full h-2" style="width: 45%"></div>
|
| 320 |
+
</div>
|
| 321 |
+
<div class="flex justify-between text-sm text-gray-600 mt-1">
|
| 322 |
+
<span>45% complété</span>
|
| 323 |
+
<span>723/1500 lignes générées</span>
|
| 324 |
+
</div>
|
| 325 |
+
</div>
|
| 326 |
+
|
| 327 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
|
| 328 |
+
<div class="p-3 bg-gray-50 rounded-lg">
|
| 329 |
+
<div class="text-purple-600 mb-1"><i class="fas fa-file-code"></i></div>
|
| 330 |
+
<div class="text-sm font-medium">Pages HTML</div>
|
| 331 |
+
<div class="text-xs text-gray-500">5 fichiers</div>
|
| 332 |
+
</div>
|
| 333 |
+
<div class="p-3 bg-gray-50 rounded-lg">
|
| 334 |
+
<div class="text-purple-600 mb-1"><i class="fas fa-file-alt"></i></div>
|
| 335 |
+
<div class="text-sm font-medium">CSS</div>
|
| 336 |
+
<div class="text-xs text-gray-500">3 fichiers</div>
|
| 337 |
+
</div>
|
| 338 |
+
<div class="p-3 bg-gray-50 rounded-lg">
|
| 339 |
+
<div class="text-purple-600 mb-1"><i class="fas fa-file-code"></i></div>
|
| 340 |
+
<div class="text-sm font-medium">JavaScript</div>
|
| 341 |
+
<div class="text-xs text-gray-500">2 fichiers</div>
|
| 342 |
+
</div>
|
| 343 |
+
<div class="p-3 bg-gray-50 rounded-lg">
|
| 344 |
+
<div class="text-purple-600 mb-1"><i class="fas fa-images"></i></div>
|
| 345 |
+
<div class="text-sm font-medium">Assets</div>
|
| 346 |
+
<div class="text-xs text-gray-500">12 fichiers</div>
|
| 347 |
+
</div>
|
| 348 |
+
</div>
|
| 349 |
+
</div>
|
| 350 |
+
</div>
|
| 351 |
+
</div>
|
| 352 |
+
</section>
|
| 353 |
+
|
| 354 |
+
<!-- Features Section -->
|
| 355 |
+
<section class="bg-gray-50 py-16">
|
| 356 |
+
<div class="container mx-auto px-4">
|
| 357 |
+
<div class="text-center mb-16">
|
| 358 |
+
<h2 class="text-4xl font-bold mb-4">Fonctionnalités Puissantes</h2>
|
| 359 |
+
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Notre générateur automatique crée des sites professionnels avec toutes les fonctionnalités nécessaires.</p>
|
| 360 |
+
</div>
|
| 361 |
+
|
| 362 |
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 363 |
+
<div class="bg-white rounded-xl p-6 shadow-md feature-card">
|
| 364 |
+
<div class="text-purple-600 text-4xl mb-4"><i class="fas fa-code"></i></div>
|
| 365 |
+
<h3 class="text-xl font-bold mb-2">Code Optimisé</h3>
|
| 366 |
+
<p class="text-gray-600">Plus de 1500 lignes de code HTML, CSS et JavaScript optimisé pour la performance et le SEO.</p>
|
| 367 |
+
</div>
|
| 368 |
+
|
| 369 |
+
<div class="bg-white rounded-xl p-6 shadow-md feature-card">
|
| 370 |
+
<div class="text-purple-600 text-4xl mb-4"><i class="fas fa-layer-group"></i></div>
|
| 371 |
+
<h3 class="text-xl font-bold mb-2">Structure Professionnelle</h3>
|
| 372 |
+
<p class="text-gray-600">Architecture de fichiers organisée avec séparation du contenu, style et fonctionnalités.</p>
|
| 373 |
+
</div>
|
| 374 |
+
|
| 375 |
+
<div class="bg-white rounded-xl p-6 shadow-md feature-card">
|
| 376 |
+
<div class="text-purple-600 text-4xl mb-4"><i class="fas fa-mobile-alt"></i></div>
|
| 377 |
+
<h3 class="text-xl font-bold mb-2">Design Responsive</h3>
|
| 378 |
+
<p class="text-gray-600">Adaptation automatique à tous les appareils avec media queries et grilles flexibles.</p>
|
| 379 |
+
</div>
|
| 380 |
+
|
| 381 |
+
<div class="bg-white rounded-xl p-6 shadow-md feature-card">
|
| 382 |
+
<div class="text-purple-600 text-4xl mb-4"><i class="fas fa-robot"></i></div>
|
| 383 |
+
<h3 class="text-xl font-bold mb-2">Génération Automatique</h3>
|
| 384 |
+
<p class="text-gray-600">Système robotisé qui crée l'ensemble du site en quelques minutes sans intervention manuelle.</p>
|
| 385 |
+
</div>
|
| 386 |
+
|
| 387 |
+
<div class="bg-white rounded-xl p-6 shadow-md feature-card">
|
| 388 |
+
<div class="text-purple-600 text-4xl mb-4"><i class="fas fa-search"></i></div>
|
| 389 |
+
<h3 class="text-xl font-bold mb-2">SEO Intégré</h3>
|
| 390 |
+
<p class="text-gray-600">Balises meta, structure sémantique et optimisations pour les moteurs de recherche.</p>
|
| 391 |
+
</div>
|
| 392 |
+
|
| 393 |
+
<div class="bg-white rounded-xl p-6 shadow-md feature-card">
|
| 394 |
+
<div class="text-purple-600 text-4xl mb-4"><i class="fas fa-bolt"></i></div>
|
| 395 |
+
<h3 class="text-xl font-bold mb-2">Performances</h3>
|
| 396 |
+
<p class="textgray-600">Code minifié, images optimisées et chargement différé pour des temps de chargement ultra-rapides.</p>
|
| 397 |
+
</div>
|
| 398 |
+
</div>
|
| 399 |
+
</div>
|
| 400 |
+
</section>
|
| 401 |
+
|
| 402 |
+
<!-- AI Power Section -->
|
| 403 |
+
<section class="py-16 gradient-bg text-white">
|
| 404 |
+
<div class="container mx-auto px-4">
|
| 405 |
+
<div class="flex flex-col lg:flex-row items-center">
|
| 406 |
+
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
|
| 407 |
+
<h2 class="text-4xl font-bold mb-6">Technologie AI Avancée</h2>
|
| 408 |
+
<p class="text-xl mb-6">Notre intelligence artificielle analyse les meilleures pratiques web pour générer des sites optimisés et performants.</p>
|
| 409 |
+
|
| 410 |
+
<div class="space-y-4">
|
| 411 |
+
<div class="flex items-start">
|
| 412 |
+
<div class="mr-4 mt-1 text-yellow-300"><i class="fas fa-brain"></i></div>
|
| 413 |
+
<div>
|
| 414 |
+
<h3 class="font-bold text-lg">Apprentissage Automatique</h3>
|
| 415 |
+
<p>Notre système s'améliore continuellement en analysant des milliers de sites professionnels.</p>
|
| 416 |
+
</div>
|
| 417 |
+
</div>
|
| 418 |
+
<div class="flex items-start">
|
| 419 |
+
<div class="mr-4 mt-1 text-yellow-300"><i class="fas fa-magic"></i></div>
|
| 420 |
+
<div>
|
| 421 |
+
<h3 class="font-bold text-lg">Génération Intelligente</h3>
|
| 422 |
+
<p>Crée du code unique adapté à votre secteur d'activité et à vos besoins spécifiques.</p>
|
| 423 |
+
</div>
|
| 424 |
+
</div>
|
| 425 |
+
<div class="flex items-start">
|
| 426 |
+
<div class="mr-4 mt-1 text-yellow-300"><i class="fas fa-shield-alt"></i></div>
|
| 427 |
+
<div>
|
| 428 |
+
<h3 class="font-bold text-lg">Sécurité Renforcée</h3>
|
| 429 |
+
<p>Intègre automatiquement les meilleures pratiques de sécurité web.</p>
|
| 430 |
+
</div>
|
| 431 |
+
</div>
|
| 432 |
+
</div>
|
| 433 |
+
</div>
|
| 434 |
+
|
| 435 |
+
<div class="lg:w-1/2 relative">
|
| 436 |
+
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 glow">
|
| 437 |
+
<div class="flex mb-6">
|
| 438 |
+
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
|
| 439 |
+
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
|
| 440 |
+
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
| 441 |
+
</div>
|
| 442 |
+
|
| 443 |
+
<div class="text-sm font-mono">
|
| 444 |
+
<div class="mb-2"><span class="text-green-400">AI></span> <span class="text-gray-300">Analyse des besoins...</span></div>
|
| 445 |
+
<div class="mb-2"><span class="text-green-400">AI></span> <span class="text-gray-300">Création de l'arborescence...</span></div>
|
| 446 |
+
<div class="mb-2"><span class="text-green-400">AI></span> <span class="text-gray-300">Génération du HTML (723/1500 lignes)</span></div>
|
| 447 |
+
<div class="mb-2"><span class="text-green-400">AI></span> <span class="text-gray-300">Optimisation CSS pour mobile-first</span></div>
|
| 448 |
+
<div class="mb-2"><span class="text-green-400">AI></span> <span class="text-gray-300">Intégration des fonctionnalités JS</span></div>
|
| 449 |
+
<div class="mb-2"><span class="text-green-400">AI></span> <span class="text-gray-300">Vérification des performances...</span></div>
|
| 450 |
+
<div class="mb-2"><span class="text-green-400">AI></span> <span class="text-gray-300">Optimisation SEO en cours</span></div>
|
| 451 |
+
</div>
|
| 452 |
+
|
| 453 |
+
<div class="mt-6">
|
| 454 |
+
<div class="w-full bg-gray-700 rounded-full h-2">
|
| 455 |
+
<div class="bg-yellow-400 rounded-full h-2" style="width: 45%"></div>
|
| 456 |
+
</div>
|
| 457 |
+
<div class="flex justify-between text-xs mt-1">
|
| 458 |
+
<span>Génération en cours</span>
|
| 459 |
+
<span>45%</span>
|
| 460 |
+
</div>
|
| 461 |
+
</div>
|
| 462 |
+
</div>
|
| 463 |
+
|
| 464 |
+
<div class="absolute -top-10 -left-10 text-6xl opacity-20 rotate">
|
| 465 |
+
<i class="fas fa-cog"></i>
|
| 466 |
+
</div>
|
| 467 |
+
<div class="absolute -bottom-10 -right-10 text-6xl opacity-20 rotate" style="animation-direction: reverse;">
|
| 468 |
+
<i class="fas fa-cog"></i>
|
| 469 |
+
</div>
|
| 470 |
+
</div>
|
| 471 |
+
</div>
|
| 472 |
+
</div>
|
| 473 |
+
</section>
|
| 474 |
+
|
| 475 |
+
<!-- CTA Section -->
|
| 476 |
+
<section class="py-16 bg-white">
|
| 477 |
+
<div class="container mx-auto px-4 text-center">
|
| 478 |
+
<h2 class="text-4xl font-bold mb-6">Prêt à créer votre site professionnel automatiquement ?</h2>
|
| 479 |
+
<p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">Générez un site complet avec plus de 1500 lignes de code optimisé en quelques minutes seulement.</p>
|
| 480 |
+
|
| 481 |
+
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
| 482 |
+
<button class="bg-purple-600 text-white px-8 py-4 rounded-lg font-bold hover:bg-purple-700 transition transform hover:scale-105 flex items-center justify-center">
|
| 483 |
+
<i class="fas fa-bolt mr-2"></i> Essai Gratuit
|
| 484 |
+
</button>
|
| 485 |
+
<button class="border-2 border-purple-600 text-purple-600 px-8 py-4 rounded-lg font-bold hover:bg-purple-50 transition transform hover:scale-105 flex items-center justify-center">
|
| 486 |
+
<i class="fas fa-play-circle mr-2"></i> Voir la Démo
|
| 487 |
+
</button>
|
| 488 |
+
</div>
|
| 489 |
+
|
| 490 |
+
<div class="mt-8 flex flex-wrap justify-center gap-4">
|
| 491 |
+
<div class="flex items-center bg-gray-100 px-4 py-2 rounded-full">
|
| 492 |
+
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
| 493 |
+
<span>Aucune carte de crédit requise</span>
|
| 494 |
+
</div>
|
| 495 |
+
<div class="flex items-center bg-gray-100 px-4 py-2 rounded-full">
|
| 496 |
+
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
| 497 |
+
<span>Annulation à tout moment</span>
|
| 498 |
+
</div>
|
| 499 |
+
<div class="flex items-center bg-gray-100 px-4 py-2 rounded-full">
|
| 500 |
+
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
| 501 |
+
<span>Support 24/7</span>
|
| 502 |
+
</div>
|
| 503 |
+
</div>
|
| 504 |
+
</div>
|
| 505 |
+
</section>
|
| 506 |
+
</main>
|
| 507 |
+
|
| 508 |
+
<!-- Footer -->
|
| 509 |
+
<footer class="bg-gray-900 text-white pt-16 pb-8">
|
| 510 |
+
<div class="container mx-auto px-4">
|
| 511 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
| 512 |
+
<div>
|
| 513 |
+
<div class="flex items-center mb-4">
|
| 514 |
+
<i class="fas fa-robot text-2xl mr-2 floating"></i>
|
| 515 |
+
<h3 class="text-xl font-bold">Mega Site Generator</h3>
|
| 516 |
+
</div>
|
| 517 |
+
<p class="text-gray-400">Le générateur automatique de sites professionnels le plus puissant du marché.</p>
|
| 518 |
+
</div>
|
| 519 |
+
|
| 520 |
+
<div>
|
| 521 |
+
<h4 class="text-lg font-bold mb-4">Produit</h4>
|
| 522 |
+
<ul class="space-y-2">
|
| 523 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
|
| 524 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Prix</a></li>
|
| 525 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Exemples</a></li>
|
| 526 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
|
| 527 |
+
</ul>
|
| 528 |
+
</div>
|
| 529 |
+
|
| 530 |
+
<div>
|
| 531 |
+
<h4 class="text-lg font-bold mb-4">Ressources</h4>
|
| 532 |
+
<ul class="space-y-2">
|
| 533 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
|
| 534 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Tutoriels</a></li>
|
| 535 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
|
| 536 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li>
|
| 537 |
+
</ul>
|
| 538 |
+
</div>
|
| 539 |
+
|
| 540 |
+
<div>
|
| 541 |
+
<h4 class="text-lg font-bold mb-4">Contact</h4>
|
| 542 |
+
<ul class="space-y-2">
|
| 543 |
+
<li class="flex items-center">
|
| 544 |
+
<i class="fas fa-envelope mr-2 text-gray-400"></i>
|
| 545 |
+
<span class="text-gray-400">contact@megasitegenerator.com</span>
|
| 546 |
+
</li>
|
| 547 |
+
<li class="flex items-center">
|
| 548 |
+
<i class="fas fa-phone-alt mr-2 text-gray-400"></i>
|
| 549 |
+
<span class="text-gray-400">+33 1 23 45 67 89</span>
|
| 550 |
+
</li>
|
| 551 |
+
<li class="flex items-center">
|
| 552 |
+
<i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
|
| 553 |
+
<span class="text-gray-400">Paris, France</span>
|
| 554 |
+
</li>
|
| 555 |
+
</ul>
|
| 556 |
+
</div>
|
| 557 |
+
</div>
|
| 558 |
+
|
| 559 |
+
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 560 |
+
<div class="text-gray-400 mb-4 md:mb-0">
|
| 561 |
+
© 2023 Mega Site Generator. Tous droits réservés.
|
| 562 |
+
</div>
|
| 563 |
+
|
| 564 |
+
<div class="flex space-x-6">
|
| 565 |
+
<a href="#" class="text-gray-400 hover:text-white transition">
|
| 566 |
+
<i class="fab fa-facebook-f"></i>
|
| 567 |
+
</a>
|
| 568 |
+
<a href="#" class="text-gray-400 hover:text-white transition">
|
| 569 |
+
<i class="fab fa-twitter"></i>
|
| 570 |
+
</a>
|
| 571 |
+
<a href="#" class="text-gray-400 hover:text-white transition">
|
| 572 |
+
<i class="fab fa-linkedin-in"></i>
|
| 573 |
+
</a>
|
| 574 |
+
<a href="#" class="text-gray-400 hover:text-white transition">
|
| 575 |
+
<i class="fab fa-github"></i>
|
| 576 |
+
</a>
|
| 577 |
+
</div>
|
| 578 |
+
</div>
|
| 579 |
+
</div>
|
| 580 |
+
</footer>
|
| 581 |
+
|
| 582 |
+
<script>
|
| 583 |
+
// Simple animation for the progress bar
|
| 584 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 585 |
+
// Simulate progress
|
| 586 |
+
const progressBar = document.querySelector('.progress-bar');
|
| 587 |
+
let progress = 45;
|
| 588 |
+
|
| 589 |
+
const progressInterval = setInterval(() => {
|
| 590 |
+
progress += Math.random() * 2;
|
| 591 |
+
if (progress >= 100) {
|
| 592 |
+
progress = 100;
|
| 593 |
+
clearInterval(progressInterval);
|
| 594 |
+
}
|
| 595 |
+
progressBar.style.width = `${progress}%`;
|
| 596 |
+
|
| 597 |
+
// Update the progress text
|
| 598 |
+
const progressText = document.querySelector('.progress-bar').parentElement.nextElementSibling;
|
| 599 |
+
const linesText = progressText.querySelector('span:first-child');
|
| 600 |
+
const countText = progressText.querySelector('span:last-child');
|
| 601 |
+
|
| 602 |
+
linesText.textContent = `${Math.round(progress)}% complété`;
|
| 603 |
+
const linesCount = Math.round(1500 * progress / 100);
|
| 604 |
+
countText.textContent = `${linesCount}/1500 lignes générées`;
|
| 605 |
+
}, 800);
|
| 606 |
+
|
| 607 |
+
// Simulate AI generation messages
|
| 608 |
+
const aiConsole = document.querySelector('.bg-white.bg-opacity-10 .font-mono');
|
| 609 |
+
if (aiConsole) {
|
| 610 |
+
const messages = [
|
| 611 |
+
"Analyse des tendances de design...",
|
| 612 |
+
"Optimisation des images...",
|
| 613 |
+
"Génération des métadonnées SEO...",
|
| 614 |
+
"Création du sitemap XML...",
|
| 615 |
+
"Vérification de l'accessibilité...",
|
| 616 |
+
"Test de compatibilité navigateurs..."
|
| 617 |
+
];
|
| 618 |
+
|
| 619 |
+
let messageIndex = 0;
|
| 620 |
+
setInterval(() => {
|
| 621 |
+
if (messageIndex < messages.length) {
|
| 622 |
+
const newMessage = document.createElement('div');
|
| 623 |
+
newMessage.className = 'mb-2';
|
| 624 |
+
newMessage.innerHTML = `<span class="text-green-400">AI></span> <span class="text-gray-300">${messages[messageIndex]}</span>`;
|
| 625 |
+
aiConsole.appendChild(newMessage);
|
| 626 |
+
messageIndex++;
|
| 627 |
+
|
| 628 |
+
// Scroll to bottom
|
| 629 |
+
aiConsole.scrollTop = aiConsole.scrollHeight;
|
| 630 |
+
}
|
| 631 |
+
}, 1500);
|
| 632 |
+
}
|
| 633 |
+
|
| 634 |
+
// Range input for page count
|
| 635 |
+
const rangeInput = document.querySelector('input[type="range"]');
|
| 636 |
+
if (rangeInput) {
|
| 637 |
+
const pageCountDisplay = rangeInput.nextElementSibling;
|
| 638 |
+
rangeInput.addEventListener('input', function() {
|
| 639 |
+
pageCountDisplay.textContent = this.value;
|
| 640 |
+
});
|
| 641 |
+
}
|
| 642 |
+
});
|
| 643 |
+
</script>
|
| 644 |
+
<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/mega-site-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 645 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
je veux creer un gigantesque gnrateur de site tres puissant avec possiboilité de générer des site professionnel avec plus de 1500 ligne et plussieur page ,je veux pas de site de vitrine , je veux visueul de la creation du site direct en systeme robotisé automatique , je veux une tres belle interfance anime
|