Spaces:
Running
Running
Add 2 files
Browse files- index.html +237 -118
- prompts.txt +2 -1
index.html
CHANGED
@@ -17,95 +17,198 @@
|
|
17 |
0%, 100% { transform: scale(1); }
|
18 |
50% { transform: scale(1.05); }
|
19 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20 |
</style>
|
21 |
</head>
|
22 |
<body class="gradient-bg min-h-screen text-white">
|
23 |
<div class="container mx-auto px-4 py-12">
|
24 |
-
|
25 |
-
|
26 |
-
<
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
<div class="
|
33 |
-
<div class="
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
<!-- Étape 2 -->
|
39 |
-
<div class="bg-purple-900/30 rounded-lg p-6 text-center border border-purple-400/30">
|
40 |
-
<div class="text-4xl mb-4">2</div>
|
41 |
-
<h3 class="font-bold text-lg mb-2">Choisissez un thème</h3>
|
42 |
-
<select class="w-full bg-white/20 rounded px-4 py-2 text-center focus:outline-none focus:ring-2 focus:ring-white">
|
43 |
-
<option>Sombre Moderne</option>
|
44 |
-
<option>Clair Élégant</option>
|
45 |
-
<option>Neon Futuriste</option>
|
46 |
-
</select>
|
47 |
</div>
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
<
|
56 |
-
<
|
57 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
58 |
</div>
|
59 |
</div>
|
|
|
60 |
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
|
|
65 |
</div>
|
66 |
-
</div>
|
67 |
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
-
|
90 |
-
|
91 |
-
|
92 |
-
|
93 |
-
|
94 |
-
|
95 |
-
|
96 |
-
|
97 |
-
|
98 |
-
|
99 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
100 |
</div>
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
105 |
</div>
|
106 |
-
|
107 |
-
|
108 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
109 |
</div>
|
110 |
</div>
|
111 |
</div>
|
@@ -113,35 +216,22 @@
|
|
113 |
</div>
|
114 |
</div>
|
115 |
</div>
|
116 |
-
</div>
|
117 |
-
|
118 |
-
<!-- Features -->
|
119 |
-
<div class="max-w-6xl mx-auto mt-20">
|
120 |
-
<h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir StreamFlash?</h2>
|
121 |
|
122 |
-
<div class="
|
123 |
-
<
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
|
128 |
-
<
|
129 |
-
|
130 |
-
|
131 |
-
|
132 |
-
|
133 |
-
|
134 |
-
|
135 |
-
|
136 |
-
|
137 |
-
</div>
|
138 |
-
|
139 |
-
<div class="bg-white/10 p-6 rounded-xl backdrop-blur-md border border-white/10">
|
140 |
-
<div class="text-4xl text-purple-400 mb-4">
|
141 |
-
<i class="fas fa-mobile-alt"></i>
|
142 |
-
</div>
|
143 |
-
<h3 class="font-bold text-xl mb-3">Optimisé mobile</h3>
|
144 |
-
<p>Design responsive parfaitement adapté à tous les appareils dès la création.</p>
|
145 |
</div>
|
146 |
</div>
|
147 |
</div>
|
@@ -153,21 +243,50 @@
|
|
153 |
</div>
|
154 |
|
155 |
<script>
|
156 |
-
|
157 |
-
|
158 |
-
|
159 |
-
|
160 |
-
|
|
|
|
|
|
|
161 |
|
162 |
-
|
163 |
-
|
164 |
-
|
165 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
166 |
|
167 |
-
//
|
168 |
-
|
169 |
-
|
170 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
171 |
});
|
172 |
</script>
|
173 |
<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-academy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
|
|
17 |
0%, 100% { transform: scale(1); }
|
18 |
50% { transform: scale(1.05); }
|
19 |
}
|
20 |
+
.progress-bar {
|
21 |
+
height: 6px;
|
22 |
+
background: rgba(255,255,255,0.3);
|
23 |
+
border-radius: 3px;
|
24 |
+
overflow: hidden;
|
25 |
+
}
|
26 |
+
.progress-fill {
|
27 |
+
height: 100%;
|
28 |
+
background: linear-gradient(90deg, #00ff88, #00b3ff);
|
29 |
+
border-radius: 3px;
|
30 |
+
transition: width 0.5s ease;
|
31 |
+
}
|
32 |
</style>
|
33 |
</head>
|
34 |
<body class="gradient-bg min-h-screen text-white">
|
35 |
<div class="container mx-auto px-4 py-12">
|
36 |
+
<!-- Écran de chargement initial -->
|
37 |
+
<div id="loadingScreen" class="text-center">
|
38 |
+
<div class="inline-block mb-8">
|
39 |
+
<i class="fas fa-film text-6xl mb-4"></i>
|
40 |
+
<h1 class="text-5xl font-bold mb-4 pulse-animation">StreamFlash</h1>
|
41 |
+
</div>
|
42 |
+
|
43 |
+
<div class="max-w-md mx-auto bg-white/10 backdrop-blur-md rounded-xl p-8 shadow-2xl">
|
44 |
+
<div class="mb-6">
|
45 |
+
<div class="progress-bar">
|
46 |
+
<div id="progressFill" class="progress-fill" style="width: 0%"></div>
|
47 |
+
</div>
|
48 |
+
<p id="statusText" class="mt-2 text-sm">Initialisation du créateur de site...</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
49 |
</div>
|
50 |
+
|
51 |
+
<div class="text-left space-y-4">
|
52 |
+
<div class="flex items-center">
|
53 |
+
<i class="fas fa-check-circle text-green-400 mr-3 text-xl"></i>
|
54 |
+
<span>Chargement des modules</span>
|
55 |
+
</div>
|
56 |
+
<div class="flex items-center">
|
57 |
+
<i class="fas fa-check-circle text-green-400 mr-3 text-xl"></i>
|
58 |
+
<span>Connexion aux bases de données</span>
|
59 |
+
</div>
|
60 |
+
<div class="flex items-center">
|
61 |
+
<i id="contentStep" class="fas fa-spinner fa-spin mr-3 text-xl"></i>
|
62 |
+
<span>Indexation du contenu (+50,000 films)</span>
|
63 |
+
</div>
|
64 |
+
<div class="flex items-center">
|
65 |
+
<i id="templateStep" class="fas fa-spinner fa-spin mr-3 text-xl"></i>
|
66 |
+
<span>Génération du template</span>
|
67 |
+
</div>
|
68 |
</div>
|
69 |
</div>
|
70 |
+
</div>
|
71 |
|
72 |
+
<!-- Résultat final (caché au départ) -->
|
73 |
+
<div id="result" class="hidden max-w-6xl mx-auto mt-12">
|
74 |
+
<div class="text-center mb-12">
|
75 |
+
<h1 class="text-5xl font-bold mb-4">Félicitations!</h1>
|
76 |
+
<p class="text-xl opacity-90">Votre site de streaming a été créé avec succès en <span class="font-bold text-yellow-300">10 secondes</span></p>
|
77 |
</div>
|
|
|
78 |
|
79 |
+
<div class="bg-black/30 rounded-xl p-8 backdrop-blur-md shadow-2xl">
|
80 |
+
<div class="flex flex-col lg:flex-row gap-8">
|
81 |
+
<!-- Prévisualisation du site -->
|
82 |
+
<div class="lg:w-2/3">
|
83 |
+
<div class="relative">
|
84 |
+
<div class="absolute inset-0 bg-purple-500/20 rounded-xl transform rotate-3"></div>
|
85 |
+
<div class="relative bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
|
86 |
+
<div class="h-6 bg-gray-800 flex items-center px-3">
|
87 |
+
<div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div>
|
88 |
+
<div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
|
89 |
+
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
90 |
+
</div>
|
91 |
+
<div class="p-4">
|
92 |
+
<div class="flex justify-between items-center mb-4">
|
93 |
+
<h3 class="font-bold text-xl" id="siteNamePreview">FlixUltra</h3>
|
94 |
+
<div class="flex space-x-2">
|
95 |
+
<span class="text-xs bg-blue-600 px-2 py-1 rounded">NOUVEAU</span>
|
96 |
+
<span class="text-xs bg-green-600 px-2 py-1 rounded">POPULAIRE</span>
|
97 |
+
</div>
|
98 |
+
</div>
|
99 |
+
|
100 |
+
<div class="mb-6">
|
101 |
+
<div class="h-40 bg-gradient-to-r from-purple-900 to-blue-900 rounded-lg flex items-center justify-center">
|
102 |
+
<i class="fas fa-play-circle text-6xl text-white/50"></i>
|
103 |
+
</div>
|
104 |
+
</div>
|
105 |
+
|
106 |
+
<h4 class="font-medium mb-3">Tendances du moment</h4>
|
107 |
+
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 mb-6">
|
108 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
109 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
110 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
111 |
+
</div>
|
112 |
+
</div>
|
113 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
114 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
115 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
116 |
+
</div>
|
117 |
+
</div>
|
118 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
119 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
120 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
121 |
+
</div>
|
122 |
+
</div>
|
123 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
124 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
125 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
126 |
+
</div>
|
127 |
+
</div>
|
128 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
129 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
130 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
131 |
+
</div>
|
132 |
+
</div>
|
133 |
+
</div>
|
134 |
+
|
135 |
+
<h4 class="font-medium mb-3">Nouveautés</h4>
|
136 |
+
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
|
137 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
138 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
139 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
140 |
+
</div>
|
141 |
+
</div>
|
142 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
143 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
144 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
145 |
+
</div>
|
146 |
+
</div>
|
147 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
148 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
149 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
150 |
+
</div>
|
151 |
+
</div>
|
152 |
+
<div class="bg-gray-800 rounded aspect-[2/3] relative group">
|
153 |
+
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
|
154 |
+
<i class="fas fa-play text-white text-2xl"></i>
|
155 |
+
</div>
|
156 |
+
</div>
|
157 |
+
</div>
|
158 |
</div>
|
159 |
+
</div>
|
160 |
+
</div>
|
161 |
+
</div>
|
162 |
+
|
163 |
+
<!-- Actions -->
|
164 |
+
<div class="lg:w-1/3">
|
165 |
+
<div class="sticky top-4 space-y-6">
|
166 |
+
<div class="bg-white/10 p-6 rounded-lg border border-white/20">
|
167 |
+
<h3 class="font-bold text-xl mb-4">Votre site est prêt!</h3>
|
168 |
+
<p class="mb-6">FlixUltra est maintenant opérationnel avec plus de 50,000 films et séries disponibles.</p>
|
169 |
+
|
170 |
+
<div class="space-y-3">
|
171 |
+
<a href="#" class="block px-6 py-3 bg-blue-600 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">
|
172 |
+
<i class="fas fa-external-link-alt mr-2"></i> Visiter le site
|
173 |
+
</a>
|
174 |
+
<a href="#" class="block px-6 py-3 bg-purple-600 rounded-lg font-medium hover:bg-purple-700 transition flex items-center justify-center">
|
175 |
+
<i class="fas fa-cog mr-2"></i> Personnaliser
|
176 |
+
</a>
|
177 |
+
<a href="#" class="block px-6 py-3 bg-green-600 rounded-lg font-medium hover:bg-green-700 transition flex items-center justify-center">
|
178 |
+
<i class="fas fa-cloud-download-alt mr-2"></i> Télécharger le code
|
179 |
+
</a>
|
180 |
</div>
|
181 |
+
</div>
|
182 |
+
|
183 |
+
<div class="bg-white/10 p-6 rounded-lg border border-white/20">
|
184 |
+
<h3 class="font-bold text-xl mb-4">Statistiques</h3>
|
185 |
+
<div class="space-y-4">
|
186 |
+
<div>
|
187 |
+
<div class="flex justify-between mb-1">
|
188 |
+
<span>Films indexés</span>
|
189 |
+
<span>32,451</span>
|
190 |
+
</div>
|
191 |
+
<div class="progress-bar">
|
192 |
+
<div class="progress-fill" style="width: 100%"></div>
|
193 |
+
</div>
|
194 |
+
</div>
|
195 |
+
<div>
|
196 |
+
<div class="flex justify-between mb-1">
|
197 |
+
<span>Séries TV</span>
|
198 |
+
<span>18,729</span>
|
199 |
+
</div>
|
200 |
+
<div class="progress-bar">
|
201 |
+
<div class="progress-fill" style="width: 100%"></div>
|
202 |
+
</div>
|
203 |
+
</div>
|
204 |
+
<div>
|
205 |
+
<div class="flex justify-between mb-1">
|
206 |
+
<span>Qualité 4K</span>
|
207 |
+
<span>12,856</span>
|
208 |
+
</div>
|
209 |
+
<div class="progress-bar">
|
210 |
+
<div class="progress-fill" style="width: 80%"></div>
|
211 |
+
</div>
|
212 |
</div>
|
213 |
</div>
|
214 |
</div>
|
|
|
216 |
</div>
|
217 |
</div>
|
218 |
</div>
|
|
|
|
|
|
|
|
|
|
|
219 |
|
220 |
+
<div class="mt-16 text-center">
|
221 |
+
<h3 class="text-2xl font-bold mb-6">Partagez votre création</h3>
|
222 |
+
<div class="flex justify-center space-x-4">
|
223 |
+
<a href="#" class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center hover:bg-blue-800 transition">
|
224 |
+
<i class="fab fa-facebook-f"></i>
|
225 |
+
</a>
|
226 |
+
<a href="#" class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
|
227 |
+
<i class="fab fa-twitter"></i>
|
228 |
+
</a>
|
229 |
+
<a href="#" class="w-10 h-10 bg-red-600 rounded-full flex items-center justify-center hover:bg-red-700 transition">
|
230 |
+
<i class="fab fa-youtube"></i>
|
231 |
+
</a>
|
232 |
+
<a href="#" class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition">
|
233 |
+
<i class="fab fa-discord"></i>
|
234 |
+
</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
235 |
</div>
|
236 |
</div>
|
237 |
</div>
|
|
|
243 |
</div>
|
244 |
|
245 |
<script>
|
246 |
+
// Démarrer le processus automatique dès le chargement de la page
|
247 |
+
document.addEventListener('DOMContentLoaded', function() {
|
248 |
+
const progressFill = document.getElementById('progressFill');
|
249 |
+
const statusText = document.getElementById('statusText');
|
250 |
+
const contentStep = document.getElementById('contentStep');
|
251 |
+
const templateStep = document.getElementById('templateStep');
|
252 |
+
const loadingScreen = document.getElementById('loadingScreen');
|
253 |
+
const result = document.getElementById('result');
|
254 |
|
255 |
+
// Noms de site aléatoires
|
256 |
+
const siteNames = ["FlixUltra", "CineWave", "StreamHub", "MoviePrime", "FilmVortex", "ShowMax"];
|
257 |
+
const randomName = siteNames[Math.floor(Math.random() * siteNames.length)];
|
258 |
+
|
259 |
+
// Simulation du processus de création
|
260 |
+
let progress = 0;
|
261 |
+
const interval = setInterval(() => {
|
262 |
+
progress += 10;
|
263 |
+
progressFill.style.width = `${progress}%`;
|
264 |
+
|
265 |
+
// Mettre à jour le texte de statut
|
266 |
+
if (progress < 30) {
|
267 |
+
statusText.textContent = "Chargement des modules essentiels...";
|
268 |
+
} else if (progress < 60) {
|
269 |
+
statusText.textContent = "Connexion aux bases de données...";
|
270 |
+
} else if (progress < 80) {
|
271 |
+
statusText.textContent = "Indexation du contenu multimédia...";
|
272 |
+
contentStep.classList.remove('fa-spinner', 'fa-spin');
|
273 |
+
contentStep.classList.add('fa-check-circle', 'text-green-400');
|
274 |
+
} else {
|
275 |
+
statusText.textContent = "Finalisation du template...";
|
276 |
+
templateStep.classList.remove('fa-spinner', 'fa-spin');
|
277 |
+
templateStep.classList.add('fa-check-circle', 'text-green-400');
|
278 |
+
}
|
279 |
|
280 |
+
// Terminer à 100%
|
281 |
+
if (progress >= 100) {
|
282 |
+
clearInterval(interval);
|
283 |
+
setTimeout(() => {
|
284 |
+
loadingScreen.classList.add('hidden');
|
285 |
+
result.classList.remove('hidden');
|
286 |
+
document.getElementById('siteNamePreview').textContent = randomName;
|
287 |
+
}, 500);
|
288 |
+
}
|
289 |
+
}, 500); // 10 secondes au total (20 étapes de 0.5s)
|
290 |
});
|
291 |
</script>
|
292 |
<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-academy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
prompts.txt
CHANGED
@@ -10,4 +10,5 @@ activer la base de données des film en automatique
|
|
10 |
je veux que le site posséde sont vrais serveur de lient de film a jours
|
11 |
https://huggingface.co/spaces/docto41/cin-verse
|
12 |
activer la lectures des films en direct en automatique affichet beacoup plus de fille 96669 film complet en francais
|
13 |
-
createur de site de films de streaming en 10 seconde
|
|
|
|
10 |
je veux que le site posséde sont vrais serveur de lient de film a jours
|
11 |
https://huggingface.co/spaces/docto41/cin-verse
|
12 |
activer la lectures des films en direct en automatique affichet beacoup plus de fille 96669 film complet en francais
|
13 |
+
createur de site de films de streaming en 10 seconde
|
14 |
+
activer toute en automatique
|