Hugging Face's logo

Spaces:
docto41
/
services
Running

App Files Community
docto41 commited on
Commit
9681952
·
verified ·
1 Parent(s): 02105d5

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +2040 -579
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,593 +3,2054 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Services Hub - 100 000 Services Intelligents</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
- .gradient-bg {
11
- background: linear-gradient(135deg, #6e8efb, #a777e3);
 
 
12
  }
13
- .service-card:hover {
14
- transform: translateY(-5px);
15
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
- .search-box:focus {
18
- box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
- .category-chip:hover {
21
- background-color: #7c4dff;
 
 
22
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
- .pagination-btn.active {
25
- background-color: #6e8efb;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  color: white;
27
  }
28
- @keyframes float {
29
- 0%, 100% { transform: translateY(0); }
30
- 50% { transform: translateY(-10px); }
31
- }
32
- .floating {
33
- animation: float 6s ease-in-out infinite;
34
- }
35
- </style>
36
- </head>
37
- <body class="bg-gray-50 font-sans">
38
- <!-- Header -->
39
- <header class="gradient-bg text-white shadow-lg">
40
- <div class="container mx-auto px-4 py-6">
41
- <div class="flex justify-between items-center">
42
- <div class="flex items-center space-x-2">
43
- <i class="fas fa-robot text-3xl"></i>
44
- <h1 class="text-2xl font-bold">AI Services Hub</h1>
45
- </div>
46
- <nav class="hidden md:flex space-x-8">
47
- <a href="#" class="hover:text-gray-200 font-medium">Accueil</a>
48
- <a href="#categories" class="hover:text-gray-200 font-medium">Catégories</a>
49
- <a href="#services" class="hover:text-gray-200 font-medium">Services</a>
50
- <a href="#pricing" class="hover:text-gray-200 font-medium">Tarifs</a>
51
- <a href="#contact" class="hover:text-gray-200 font-medium">Contact</a>
52
- </nav>
53
- <div class="flex items-center space-x-4">
54
- <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-purple-100 transition">
55
- Connexion
56
- </button>
57
- <button class="bg-purple-700 text-white px-4 py-2 rounded-full font-medium hover:bg-purple-800 transition">
58
- Inscription
59
- </button>
60
- </div>
61
- <button class="md:hidden text-2xl">
62
- <i class="fas fa-bars"></i>
63
- </button>
64
- </div>
65
- </div>
66
- </header>
67
-
68
- <!-- Hero Section -->
69
- <section class="gradient-bg text-white py-20">
70
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
71
- <div class="md:w-1/2 mb-10 md:mb-0">
72
- <h2 class="text-4xl md:text-5xl font-bold mb-6">Découvrez plus de 100 000 services IA</h2>
73
- <p class="text-xl mb-8">La plus grande plateforme de services intelligents pour les particuliers et les entreprises.</p>
74
- <div class="relative max-w-xl">
75
- <input type="text" placeholder="Rechercher un service..."
76
- class="w-full px-6 py-4 rounded-full text-gray-800 focus:outline-none search-box">
77
- <button class="absolute right-2 top-2 bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition">
78
- <i class="fas fa-search mr-2"></i> Rechercher
79
- </button>
80
- </div>
81
- <div class="mt-6 flex flex-wrap gap-2">
82
- <span class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full">Reconnaissance vocale</span>
83
- <span class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full">Traitement d'images</span>
84
- <span class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full">Chatbots</span>
85
- <span class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full">Analyse de données</span>
86
- </div>
87
- </div>
88
- <div class="md:w-1/2 flex justify-center">
89
- <div class="relative w-64 h-64 md:w-80 md:h-80">
90
- <div class="absolute inset-0 bg-purple-500 rounded-full opacity-20 blur-xl"></div>
91
- <div class="absolute inset-4 bg-white bg-opacity-10 rounded-full"></div>
92
- <img src="https://cdn-icons-png.flaticon.com/512/2491/2491916.png" alt="AI Services"
93
- class="relative z-10 w-full h-full object-contain floating">
94
- </div>
95
- </div>
96
- </div>
97
- </section>
98
-
99
- <!-- Stats Section -->
100
- <section class="bg-white py-12 shadow-sm">
101
- <div class="container mx-auto px-4">
102
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
103
- <div>
104
- <div class="text-4xl font-bold text-purple-600 mb-2">100K+</div>
105
- <div class="text-gray-600">Services IA</div>
106
- </div>
107
- <div>
108
- <div class="text-4xl font-bold text-purple-600 mb-2">5K+</div>
109
- <div class="text-gray-600">Fournisseurs</div>
110
- </div>
111
- <div>
112
- <div class="text-4xl font-bold text-purple-600 mb-2">2M+</div>
113
- <div class="text-gray-600">Utilisateurs</div>
114
- </div>
115
- <div>
116
- <div class="text-4xl font-bold text-purple-600 mb-2">24/7</div>
117
- <div class="text-gray-600">Support</div>
118
- </div>
119
- </div>
120
- </div>
121
- </section>
122
-
123
- <!-- Categories Section -->
124
- <section id="categories" class="py-16 bg-gray-50">
125
- <div class="container mx-auto px-4">
126
- <h2 class="text-3xl font-bold text-center mb-12">Catégories populaires</h2>
127
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
128
- <!-- Categories will be loaded by JavaScript -->
129
- </div>
130
- </div>
131
- </section>
132
-
133
- <!-- Services Section -->
134
- <section id="services" class="py-16 bg-white">
135
- <div class="container mx-auto px-4">
136
- <div class="flex justify-between items-center mb-8">
137
- <h2 class="text-3xl font-bold">Services IA populaires</h2>
138
- <div class="flex space-x-2">
139
- <button class="px-4 py-2 border rounded-full hover:bg-gray-100">Tous</button>
140
- <button class="px-4 py-2 border rounded-full hover:bg-gray-100">Tendance</button>
141
- <button class="px-4 py-2 border rounded-full hover:bg-gray-100">Nouveautés</button>
142
- </div>
143
- </div>
144
-
145
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="services-container">
146
- <!-- Services will be loaded by JavaScript -->
147
- </div>
148
-
149
- <div class="mt-12 flex justify-center">
150
- <div class="flex space-x-2" id="pagination">
151
- <!-- Pagination will be loaded by JavaScript -->
152
- </div>
153
- </div>
154
- </div>
155
- </section>
156
-
157
- <!-- Pricing Section -->
158
- <section id="pricing" class="py-16 bg-gray-50">
159
- <div class="container mx-auto px-4">
160
- <h2 class="text-3xl font-bold text-center mb-12">Nos offres tarifaires</h2>
161
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
162
- <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
163
- <h3 class="text-xl font-bold mb-4">Starter</h3>
164
- <div class="text-4xl font-bold mb-6">$9.99<span class="text-lg text-gray-500">/mois</span></div>
165
- <ul class="space-y-3 mb-8">
166
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 100 crédits/mois</li>
167
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Accès à 10K services</li>
168
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Support de base</li>
169
- <li class="flex items-center text-gray-400"><i class="fas fa-times text-red-500 mr-2"></i> API avancée</li>
170
- </ul>
171
- <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition">
172
- Commencer
173
- </button>
174
- </div>
175
- <div class="bg-white p-8 rounded-xl shadow-lg border-2 border-purple-500 relative">
176
- <div class="absolute top-0 right-0 bg-purple-600 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg text-sm">Populaire</div>
177
- <h3 class="text-xl font-bold mb-4">Pro</h3>
178
- <div class="text-4xl font-bold mb-6">$29.99<span class="text-lg text-gray-500">/mois</span></div>
179
- <ul class="space-y-3 mb-8">
180
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 500 crédits/mois</li>
181
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Accès à 50K services</li>
182
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Support prioritaire</li>
183
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> API basique</li>
184
- </ul>
185
- <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition">
186
- Commencer
187
- </button>
188
- </div>
189
- <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
190
- <h3 class="text-xl font-bold mb-4">Enterprise</h3>
191
- <div class="text-4xl font-bold mb-6">$99.99<span class="text-lg text-gray-500">/mois</span></div>
192
- <ul class="space-y-3 mb-8">
193
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Crédits illimités</li>
194
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Accès à tous les services</li>
195
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Support 24/7</li>
196
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> API complète</li>
197
- </ul>
198
- <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition">
199
- Commencer
200
- </button>
201
- </div>
202
- </div>
203
- </div>
204
- </section>
205
-
206
- <!-- Testimonials -->
207
- <section class="py-16 bg-white">
208
- <div class="container mx-auto px-4">
209
- <h2 class="text-3xl font-bold text-center mb-12">Ce que nos clients disent</h2>
210
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
211
- <div class="bg-gray-50 p-6 rounded-lg">
212
- <div class="flex items-center mb-4">
213
- <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
214
- <div>
215
- <div class="font-bold">Sophie Martin</div>
216
- <div class="text-gray-500 text-sm">PDG, TechSolutions</div>
217
- </div>
218
- </div>
219
- <p class="text-gray-700">"Cette plateforme a révolutionné notre façon de travailler. L'accès à tant de services IA en un seul endroit est incroyable."</p>
220
- <div class="mt-4 text-yellow-400">
221
- <i class="fas fa-star"></i>
222
- <i class="fas fa-star"></i>
223
- <i class="fas fa-star"></i>
224
- <i class="fas fa-star"></i>
225
- <i class="fas fa-star"></i>
226
- </div>
227
- </div>
228
- <div class="bg-gray-50 p-6 rounded-lg">
229
- <div class="flex items-center mb-4">
230
- <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
231
- <div>
232
- <div class="font-bold">Thomas Leroy</div>
233
- <div class="text-gray-500 text-sm">CTO, InnovateCo</div>
234
- </div>
235
- </div>
236
- <p class="text-gray-700">"La qualité des services est exceptionnelle. Nous avons réduit nos coûts de développement de 40% grâce à ces solutions."</p>
237
- <div class="mt-4 text-yellow-400">
238
- <i class="fas fa-star"></i>
239
- <i class="fas fa-star"></i>
240
- <i class="fas fa-star"></i>
241
- <i class="fas fa-star"></i>
242
- <i class="fas fa-star-half-alt"></i>
243
- </div>
244
- </div>
245
- <div class="bg-gray-50 p-6 rounded-lg">
246
- <div class="flex items-center mb-4">
247
- <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
248
- <div>
249
- <div class="font-bold">Élodie Dubois</div>
250
- <div class="text-gray-500 text-sm">Responsable Marketing</div>
251
- </div>
252
- </div>
253
- <p class="text-gray-700">"Les outils d'analyse et de personnalisation ont transformé nos campagnes marketing. Les résultats sont impressionnants."</p>
254
- <div class="mt-4 text-yellow-400">
255
- <i class="fas fa-star"></i>
256
- <i class="fas fa-star"></i>
257
- <i class="fas fa-star"></i>
258
- <i class="fas fa-star"></i>
259
- <i class="fas fa-star"></i>
260
- </div>
261
- </div>
262
- </div>
263
- </div>
264
- </section>
265
-
266
- <!-- CTA Section -->
267
- <section class="gradient-bg text-white py-20">
268
- <div class="container mx-auto px-4 text-center">
269
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à explorer le pouvoir de l'IA ?</h2>
270
- <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez des milliers d'entreprises qui utilisent déjà nos services pour transformer leurs opérations.</p>
271
- <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
272
- <button class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition">
273
- Essai gratuit - 14 jours
274
- </button>
275
- <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:bg-opacity-10 transition">
276
- Voir une démo
277
- </button>
278
- </div>
279
- </div>
280
- </section>
281
-
282
- <!-- Footer -->
283
- <footer id="contact" class="bg-gray-900 text-white py-12">
284
- <div class="container mx-auto px-4">
285
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
286
- <div>
287
- <div class="flex items-center space-x-2 mb-4">
288
- <i class="fas fa-robot text-2xl"></i>
289
- <h3 class="text-xl font-bold">AI Services Hub</h3>
290
- </div>
291
- <p class="text-gray-400 mb-4">La plateforme ultime pour découvrir et utiliser des services IA de qualité.</p>
292
- <div class="flex space-x-4">
293
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
294
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
295
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
296
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
297
- </div>
298
- </div>
299
- <div>
300
- <h4 class="text-lg font-bold mb-4">Entreprise</h4>
301
- <ul class="space-y-2">
302
- <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
303
- <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
304
- <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
305
- <li><a href="#" class="text-gray-400 hover:text-white">Partenaires</a></li>
306
- </ul>
307
- </div>
308
- <div>
309
- <h4 class="text-lg font-bold mb-4">Ressources</h4>
310
- <ul class="space-y-2">
311
- <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
312
- <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
313
- <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
314
- <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
315
- </ul>
316
- </div>
317
- <div>
318
- <h4 class="text-lg font-bold mb-4">Contact</h4>
319
- <ul class="space-y-2">
320
- <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> Paris, France</li>
321
- <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89</li>
322
- <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> contact@aiserviceshub.com</li>
323
- </ul>
324
- </div>
325
- </div>
326
- <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
327
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 AI Services Hub. Tous droits réservés.</p>
328
- <div class="flex space-x-6">
329
- <a href="#" class="text-gray-400 hover:text-white">Conditions</a>
330
- <a href="#" class="text-gray-400 hover:text-white">Confidentialité</a>
331
- <a href="#" class="text-gray-400 hover:text-white">Cookies</a>
332
- </div>
333
- </div>
334
- </div>
335
- </footer>
336
-
337
- <script>
338
- // Sample data for services (in a real app, this would come from an API)
339
- const categories = [
340
- { id: 1, name: "Reconnaissance vocale", icon: "fas fa-microphone" },
341
- { id: 2, name: "Traitement d'images", icon: "fas fa-image" },
342
- { id: 3, name: "Chatbots", icon: "fas fa-comments" },
343
- { id: 4, name: "Analyse de données", icon: "fas fa-chart-bar" },
344
- { id: 5, name: "Traitement NLP", icon: "fas fa-language" },
345
- { id: 6, name: "Recommandation", icon: "fas fa-lightbulb" },
346
- { id: 7, name: "Vision par ordinateur", icon: "fas fa-eye" },
347
- { id: 8, name: "Génération de texte", icon: "fas fa-font" },
348
- { id: 9, name: "Traduction", icon: "fas fa-exchange-alt" },
349
- { id: 10, name: "Prédiction", icon: "fas fa-chart-line" },
350
- { id: 11, name: "Modération", icon: "fas fa-shield-alt" },
351
- { id: 12, name: "Synthèse vocale", icon: "fas fa-volume-up" }
352
- ];
353
-
354
- // Generate 100,000 sample services (in a real app, this would be paginated from a database)
355
- function generateSampleServices(count) {
356
- const services = [];
357
- const serviceNames = [
358
- "Analyseur de sentiment avancé", "Détecteur de visages", "Traducteur en temps réel",
359
- "Générateur de contenu", "Assistant virtuel", "Classificateur d'images",
360
- "Reconnaissance d'objets", "Synthétiseur vocal", "Correcteur automatique",
361
- "Extracteur d'entités", "Résumeur de texte", "Détecteur de fraude",
362
- "Système de recommandation", "Analyse de marché", "Prédiction de tendances",
363
- "Modérateur de contenu", "Assistant client", "Générateur de code",
364
- "Analyse de documents", "Reconnaissance d'écriture", "Détection d'anomalies",
365
- "Optimiseur SEO", "Générateur de leads", "Analyse de réseaux sociaux"
366
- ];
367
-
368
- const providers = [
369
- "NeuroTech", "DeepMind Solutions", "AI Innovators", "Cognitive Systems",
370
- "Neural Networks Ltd", "Machine Learning Corp", "DataBrain", "Algorithmia",
371
- "TensorFlow Experts", "PyTorch Professionals", "AI Factory", "Deep Learning Co"
372
- ];
373
-
374
- for (let i = 1; i <= count; i++) {
375
- const randomCategory = categories[Math.floor(Math.random() * categories.length)];
376
- const randomName = serviceNames[Math.floor(Math.random() * serviceNames.length)];
377
- const randomProvider = providers[Math.floor(Math.random() * providers.length)];
378
- const randomPrice = (Math.random() * 90 + 10).toFixed(2);
379
- const randomRating = (Math.random() * 2 + 3).toFixed(1);
380
- const randomReviews = Math.floor(Math.random() * 500);
381
-
382
- services.push({
383
- id: i,
384
- name: `${randomName} ${i % 100 === 0 ? "Pro" : ""} ${i % 50 === 0 ? "Enterprise" : ""}`,
385
- description: `Solution ${randomCategory.name.toLowerCase()} de pointe fournie par ${randomProvider}.`,
386
- category: randomCategory.name,
387
- categoryId: randomCategory.id,
388
- price: randomPrice,
389
- rating: randomRating,
390
- reviews: randomReviews,
391
- isFeatured: i % 20 === 0,
392
- isNew: i % 10 === 0
393
- });
394
- }
395
-
396
- return services;
397
- }
398
-
399
- // Initialize the app
400
- document.addEventListener('DOMContentLoaded', function() {
401
- // Generate sample data
402
- const allServices = generateSampleServices(100000);
403
-
404
- // Display categories
405
- const categoriesContainer = document.querySelector('#categories .grid');
406
- categories.forEach(category => {
407
- const categoryElement = document.createElement('div');
408
- categoryElement.className = 'bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer hover:shadow-md transition category-chip';
409
- categoryElement.innerHTML = `
410
- <div class="text-purple-500 text-3xl mb-3"><i class="${category.icon}"></i></div>
411
- <h3 class="font-medium">${category.name}</h3>
412
- <p class="text-sm text-gray-500 mt-1">${Math.floor(Math.random() * 9000) + 1000} services</p>
413
- `;
414
- categoryElement.addEventListener('click', () => filterServices(category.id));
415
- categoriesContainer.appendChild(categoryElement);
416
- });
417
-
418
- // Display first page of services
419
- displayServices(allServices, 1);
420
-
421
- // Setup search functionality
422
- const searchBox = document.querySelector('.search-box');
423
- const searchButton = document.querySelector('.search-box + button');
424
-
425
- const performSearch = () => {
426
- const searchTerm = searchBox.value.toLowerCase();
427
- if (searchTerm.trim() === '') {
428
- displayServices(allServices, 1);
429
- return;
430
- }
431
-
432
- const filtered = allServices.filter(service =>
433
- service.name.toLowerCase().includes(searchTerm) ||
434
- service.description.toLowerCase().includes(searchTerm) ||
435
- service.category.toLowerCase().includes(searchTerm)
436
- );
437
-
438
- displayServices(filtered, 1);
439
- };
440
-
441
- searchBox.addEventListener('keyup', (e) => {
442
- if (e.key === 'Enter') performSearch();
443
- });
444
-
445
- searchButton.addEventListener('click', performSearch);
446
- });
447
-
448
- // Display services with pagination
449
- function displayServices(services, currentPage) {
450
- const servicesPerPage = 12;
451
- const startIndex = (currentPage - 1) * servicesPerPage;
452
- const paginatedServices = services.slice(startIndex, startIndex + servicesPerPage);
453
-
454
- const servicesContainer = document.getElementById('services-container');
455
- servicesContainer.innerHTML = '';
456
-
457
- if (paginatedServices.length === 0) {
458
- servicesContainer.innerHTML = `
459
- <div class="col-span-full text-center py-12">
460
- <i class="fas fa-search text-4xl text-gray-400 mb-4"></i>
461
- <h3 class="text-xl font-medium text-gray-600">Aucun service trouvé</h3>
462
- <p class="text-gray-500">Essayez de modifier vos critères de recherche</p>
463
- </div>
464
- `;
465
- return;
466
- }
467
-
468
- paginatedServices.forEach(service => {
469
- const serviceElement = document.createElement('div');
470
- serviceElement.className = 'bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition service-card';
471
-
472
- // Random service image from placeholder service
473
- const imageNumber = service.id % 24;
474
- const imageUrl = `https://cdn-icons-png.flaticon.com/512/2491/2491${imageNumber < 10 ? '0' + imageNumber : imageNumber}.png`;
475
-
476
- serviceElement.innerHTML = `
477
- <div class="relative">
478
- <img src="${imageUrl}" alt="${service.name}" class="w-full h-48 object-contain p-4 bg-gray-100">
479
- ${service.isNew ? `<div class="absolute top-2 right-2 bg-green-500 text-white px-2 py-1 rounded-full text-xs">Nouveau</div>` : ''}
480
- ${service.isFeatured ? `<div class="absolute top-2 left-2 bg-purple-500 text-white px-2 py-1 rounded-full text-xs">Tendance</div>` : ''}
481
- </div>
482
- <div class="p-4">
483
- <div class="flex justify-between items-start mb-2">
484
- <h3 class="font-bold text-lg truncate">${service.name}</h3>
485
- <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">${service.category}</span>
486
- </div>
487
- <p class="text-gray-600 text-sm mb-4 line-clamp-2">${service.description}</p>
488
- <div class="flex items-center justify-between">
489
- <div>
490
- <span class="font-bold text-lg">$${service.price}</span>
491
- <span class="text-gray-500 text-sm"> / mois</span>
492
- </div>
493
- <div class="flex items-center">
494
- <i class="fas fa-star text-yellow-400 mr-1"></i>
495
- <span class="font-medium">${service.rating}</span>
496
- <span class="text-gray-500 text-sm ml-1">(${service.reviews})</span>
497
- </div>
498
- </div>
499
- </div>
500
- <div class="px-4 pb-4">
501
- <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition">
502
- Essayer maintenant
503
- </button>
504
- </div>
505
- `;
506
-
507
- servicesContainer.appendChild(serviceElement);
508
- });
509
-
510
- // Setup pagination
511
- setupPagination(services, currentPage);
512
- }
513
-
514
- // Setup pagination controls
515
- function setupPagination(services, currentPage) {
516
- const servicesPerPage = 12;
517
- const totalPages = Math.ceil(services.length / servicesPerPage);
518
- const paginationContainer = document.getElementById('pagination');
519
-
520
- // Clear existing pagination
521
- paginationContainer.innerHTML = '';
522
-
523
- // Previous button
524
- const prevButton = document.createElement('button');
525
- prevButton.className = 'px-4 py-2 border rounded-full hover:bg-gray-100';
526
- prevButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
527
- prevButton.disabled = currentPage === 1;
528
- prevButton.addEventListener('click', () => displayServices(services, currentPage - 1));
529
- paginationContainer.appendChild(prevButton);
530
-
531
- // Page numbers
532
- const maxVisiblePages = 5;
533
- let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
534
- let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
535
-
536
- if (endPage - startPage + 1 < maxVisiblePages) {
537
- startPage = Math.max(1, endPage - maxVisiblePages + 1);
538
- }
539
-
540
- if (startPage > 1) {
541
- const firstPageButton = document.createElement('button');
542
- firstPageButton.className = 'px-4 py-2 border rounded-full hover:bg-gray-100';
543
- firstPageButton.textContent = '1';
544
- firstPageButton.addEventListener('click', () => displayServices(services, 1));
545
- paginationContainer.appendChild(firstPageButton);
546
-
547
- if (startPage > 2) {
548
- const ellipsis = document.createElement('span');
549
- ellipsis.className = 'px-2 py-2';
550
- ellipsis.textContent = '...';
551
- paginationContainer.appendChild(ellipsis);
552
- }
553
- }
554
-
555
- for (let i = startPage; i <= endPage; i++) {
556
- const pageButton = document.createElement('button');
557
- pageButton.className = `px-4 py-2 border rounded-full hover:bg-gray-100 ${i === currentPage ? 'pagination-btn active' : ''}`;
558
- pageButton.textContent = i;
559
- pageButton.addEventListener('click', () => displayServices(services, i));
560
- paginationContainer.appendChild(pageButton);
561
- }
562
-
563
- if (endPage < totalPages) {
564
- if (endPage < totalPages - 1) {
565
- const ellipsis = document.createElement('span');
566
- ellipsis.className = 'px-2 py-2';
567
- ellipsis.textContent = '...';
568
- paginationContainer.appendChild(ellipsis);
569
- }
570
-
571
- const lastPageButton = document.createElement('button');
572
- lastPageButton.className = 'px-4 py-2 border rounded-full hover:bg-gray-100';
573
- lastPageButton.textContent = totalPages;
574
- lastPageButton.addEventListener('click', () => displayServices(services, totalPages));
575
- paginationContainer.appendChild(lastPageButton);
576
- }
577
-
578
- // Next button
579
- const nextButton = document.createElement('button');
580
- nextButton.className = 'px-4 py-2 border rounded-full hover:bg-gray-100';
581
- nextButton.innerHTML = '<i class="fas fa-chevron-right"></i>';
582
- nextButton.disabled = currentPage === totalPages;
583
- nextButton.addEventListener('click', () => displayServices(services, currentPage + 1));
584
- paginationContainer.appendChild(nextButton);
585
- }
586
-
587
- // Filter services by category
588
- function filterServices(categoryId) {
589
- const allServices = generateSampleServices(100000);
590
- const filtered = allServices.filter(service => service.categoryId === categoryId);
591
- displayServices(filtered, 1);
592
- }
593
- </script>
594
- <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/services" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
595
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NexusBuilder - Générateur de Sites IA Futuriste</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
  <style>
12
+ :root {
13
+ --primary: #6e00ff;
14
+ --secondary: #00f7ff;
15
+ --accent: #ff00e6;
16
  }
17
+
18
+ body {
19
+ background-color: #0a0a1a;
20
+ color: #fff;
21
+ font-family: 'Segoe UI', system-ui, sans-serif;
22
+ overflow-x: hidden;
23
+ }
24
+
25
+ .cyber-glass {
26
+ background: rgba(15, 15, 35, 0.7);
27
+ backdrop-filter: blur(16px);
28
+ -webkit-backdrop-filter: blur(16px);
29
+ border: 1px solid rgba(110, 0, 255, 0.3);
30
+ box-shadow: 0 8px 32px 0 rgba(110, 0, 255, 0.2);
31
+ }
32
+
33
+ .cyber-btn {
34
+ background: linear-gradient(45deg, var(--primary), var(--accent));
35
+ border: none;
36
+ color: white;
37
+ font-weight: bold;
38
+ text-transform: uppercase;
39
+ letter-spacing: 1px;
40
+ transition: all 0.3s ease;
41
+ position: relative;
42
+ overflow: hidden;
43
+ z-index: 1;
44
+ }
45
+
46
+ .cyber-btn:hover {
47
+ transform: translateY(-3px);
48
+ box-shadow: 0 10px 20px rgba(110, 0, 255, 0.3);
49
+ }
50
+
51
+ .cyber-btn:after {
52
+ content: '';
53
+ position: absolute;
54
+ bottom: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ background: linear-gradient(45deg, var(--accent), var(--primary));
59
+ z-index: -2;
60
+ }
61
+
62
+ .cyber-btn:before {
63
+ content: '';
64
+ position: absolute;
65
+ bottom: 0;
66
+ left: 0;
67
+ width: 0%;
68
+ height: 100%;
69
+ background-color: rgba(255, 255, 255, 0.1);
70
+ transition: all 0.3s;
71
+ z-index: -1;
72
+ }
73
+
74
+ .cyber-btn:hover:before {
75
+ width: 100%;
76
+ }
77
+
78
+ .holographic-effect {
79
+ position: relative;
80
+ }
81
+
82
+ .holographic-effect:before {
83
+ content: '';
84
+ position: absolute;
85
+ top: -2px;
86
+ left: -2px;
87
+ right: -2px;
88
+ bottom: -2px;
89
+ background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent), var(--primary));
90
+ background-size: 400%;
91
+ z-index: -1;
92
+ filter: blur(5px);
93
+ opacity: 0;
94
+ transition: 0.5s;
95
+ animation: hologram 8s linear infinite;
96
+ }
97
+
98
+ .holographic-effect:hover:before {
99
+ opacity: 0.7;
100
+ }
101
+
102
+ @keyframes hologram {
103
+ 0% { background-position: 0 0; }
104
+ 50% { background-position: 300% 0; }
105
+ 100% { background-position: 0 0; }
106
+ }
107
+
108
+ .grid-pattern {
109
+ background-image:
110
+ linear-gradient(rgba(110, 0, 255, 0.1) 1px, transparent 1px),
111
+ linear-gradient(90deg, rgba(110, 0, 255, 0.1) 1px, transparent 1px);
112
+ background-size: 50px 50px;
113
+ }
114
+
115
+ .scanline {
116
+ position: relative;
117
+ overflow: hidden;
118
+ }
119
+
120
+ .scanline:after {
121
+ content: '';
122
+ position: absolute;
123
+ top: 0;
124
+ left: 0;
125
+ right: 0;
126
+ height: 1px;
127
+ background: rgba(0, 247, 255, 0.4);
128
+ box-shadow: 0 0 5px rgba(0, 247, 255, 0.8);
129
+ animation: scan 8s linear infinite;
130
+ }
131
+
132
+ @keyframes scan {
133
+ 0% { top: 0; }
134
+ 100% { top: 100%; }
135
+ }
136
+
137
+ .glitch-text {
138
+ position: relative;
139
+ }
140
+
141
+ .glitch-text:before, .glitch-text:after {
142
+ content: attr(data-text);
143
+ position: absolute;
144
+ top: 0;
145
+ left: 0;
146
+ width: 100%;
147
+ height: 100%;
148
+ opacity: 0.8;
149
+ }
150
+
151
+ .glitch-text:before {
152
+ color: var(--secondary);
153
+ z-index: -1;
154
+ animation: glitch-effect 3s infinite;
155
+ }
156
+
157
+ .glitch-text:after {
158
+ color: var(--accent);
159
+ z-index: -2;
160
+ animation: glitch-effect 2s infinite reverse;
161
+ }
162
+
163
+ @keyframes glitch-effect {
164
+ 0% { transform: translate(0); }
165
+ 20% { transform: translate(-3px, 3px); }
166
+ 40% { transform: translate(-3px, -3px); }
167
+ 60% { transform: translate(3px, 3px); }
168
+ 80% { transform: translate(3px, -3px); }
169
+ 100% { transform: translate(0); }
170
+ }
171
+
172
+ .particle-network {
173
+ position: absolute;
174
+ top: 0;
175
+ left: 0;
176
+ width: 100%;
177
+ height: 100%;
178
+ z-index: -1;
179
+ }
180
+
181
+ .cyber-input {
182
+ background: rgba(15, 15, 35, 0.7);
183
+ border: 1px solid rgba(110, 0, 255, 0.5);
184
+ color: white;
185
+ padding: 12px 20px;
186
+ border-radius: 6px;
187
+ transition: all 0.3s;
188
+ }
189
+
190
+ .cyber-input:focus {
191
+ outline: none;
192
+ border-color: var(--secondary);
193
+ box-shadow: 0 0 0 3px rgba(0, 247, 255, 0.3);
194
+ }
195
+
196
+ .cyber-select {
197
+ background: rgba(15, 15, 35, 0.7);
198
+ border: 1px solid rgba(110, 0, 255, 0.5);
199
+ color: white;
200
+ padding: 12px 20px;
201
+ border-radius: 6px;
202
+ appearance: none;
203
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
204
+ background-repeat: no-repeat;
205
+ background-position: right 10px center;
206
+ background-size: 1em;
207
+ }
208
+
209
+ .cyber-select:focus {
210
+ outline: none;
211
+ border-color: var(--secondary);
212
+ box-shadow: 0 0 0 3px rgba(0, 247, 255, 0.3);
213
+ }
214
+
215
+ .cyber-checkbox {
216
+ appearance: none;
217
+ width: 20px;
218
+ height: 20px;
219
+ border: 2px solid var(--primary);
220
+ border-radius: 4px;
221
+ background: rgba(15, 15, 35, 0.7);
222
+ position: relative;
223
+ cursor: pointer;
224
+ }
225
+
226
+ .cyber-checkbox:checked {
227
+ background-color: var(--primary);
228
+ }
229
+
230
+ .cyber-checkbox:checked:after {
231
+ content: '';
232
+ position: absolute;
233
+ left: 4px;
234
+ top: 0;
235
+ width: 8px;
236
+ height: 14px;
237
+ border: solid white;
238
+ border-width: 0 3px 3px 0;
239
+ transform: rotate(45deg);
240
+ }
241
+
242
+ .cyber-radio {
243
+ appearance: none;
244
+ width: 20px;
245
+ height: 20px;
246
+ border: 2px solid var(--primary);
247
+ border-radius: 50%;
248
+ background: rgba(15, 15, 35, 0.7);
249
+ position: relative;
250
+ cursor: pointer;
251
+ }
252
+
253
+ .cyber-radio:checked {
254
+ background-color: transparent;
255
+ }
256
+
257
+ .cyber-radio:checked:after {
258
+ content: '';
259
+ position: absolute;
260
+ left: 2px;
261
+ top: 2px;
262
+ width: 12px;
263
+ height: 12px;
264
+ background: var(--primary);
265
+ border-radius: 50%;
266
+ }
267
+
268
+ .cyber-tab {
269
+ border-bottom: 2px solid transparent;
270
+ transition: all 0.3s;
271
+ }
272
+
273
+ .cyber-tab:hover {
274
+ border-color: rgba(110, 0, 255, 0.5);
275
+ }
276
+
277
+ .cyber-tab.active {
278
+ border-color: var(--primary);
279
+ color: var(--secondary);
280
+ }
281
+
282
+ .cyber-tooltip {
283
+ position: relative;
284
+ }
285
+
286
+ .cyber-tooltip:before {
287
+ content: attr(data-tooltip);
288
+ position: absolute;
289
+ bottom: 100%;
290
+ left: 50%;
291
+ transform: translateX(-50%);
292
+ background: rgba(15, 15, 35, 0.9);
293
+ border: 1px solid var(--primary);
294
+ color: white;
295
+ padding: 5px 10px;
296
+ border-radius: 4px;
297
+ font-size: 12px;
298
+ white-space: nowrap;
299
+ opacity: 0;
300
+ visibility: hidden;
301
+ transition: all 0.3s;
302
+ z-index: 10;
303
+ }
304
+
305
+ .cyber-tooltip:hover:before {
306
+ opacity: 1;
307
+ visibility: visible;
308
+ bottom: calc(100% + 5px);
309
+ }
310
+
311
+ .cyber-alert {
312
+ border-left: 4px solid var(--primary);
313
+ background: rgba(15, 15, 35, 0.7);
314
+ animation: pulse 2s infinite;
315
+ }
316
+
317
+ @keyframes pulse {
318
+ 0% { box-shadow: 0 0 0 0 rgba(110, 0, 255, 0.4); }
319
+ 70% { box-shadow: 0 0 0 10px rgba(110, 0, 255, 0); }
320
+ 100% { box-shadow: 0 0 0 0 rgba(110, 0, 255, 0); }
321
+ }
322
+
323
+ .cyber-loader {
324
+ border: 3px solid rgba(110, 0, 255, 0.3);
325
+ border-radius: 50%;
326
+ border-top: 3px solid var(--primary);
327
+ width: 30px;
328
+ height: 30px;
329
+ animation: spin 1s linear infinite;
330
+ }
331
+
332
+ @keyframes spin {
333
+ 0% { transform: rotate(0deg); }
334
+ 100% { transform: rotate(360deg); }
335
+ }
336
+
337
+ .cyber-progress {
338
+ height: 10px;
339
+ background: rgba(15, 15, 35, 0.7);
340
+ border-radius: 5px;
341
+ overflow: hidden;
342
+ }
343
+
344
+ .cyber-progress-bar {
345
+ height: 100%;
346
+ background: linear-gradient(90deg, var(--primary), var(--accent));
347
+ border-radius: 5px;
348
+ transition: width 0.5s;
349
+ position: relative;
350
+ overflow: hidden;
351
+ }
352
+
353
+ .cyber-progress-bar:after {
354
+ content: '';
355
+ position: absolute;
356
+ top: 0;
357
+ left: 0;
358
+ right: 0;
359
+ bottom: 0;
360
+ background: linear-gradient(90deg,
361
+ transparent,
362
+ rgba(255, 255, 255, 0.2),
363
+ transparent);
364
+ animation: progress-shine 2s infinite;
365
+ }
366
+
367
+ @keyframes progress-shine {
368
+ 0% { transform: translateX(-100%); }
369
+ 100% { transform: translateX(100%); }
370
+ }
371
+
372
+ .cyber-card {
373
+ transition: all 0.3s;
374
+ transform-style: preserve-3d;
375
+ }
376
+
377
+ .cyber-card:hover {
378
+ transform: translateY(-10px) rotateX(5deg);
379
+ }
380
+
381
+ .cyber-badge {
382
+ background: linear-gradient(45deg, var(--primary), var(--accent));
383
+ color: white;
384
+ font-size: 12px;
385
+ padding: 2px 8px;
386
+ border-radius: 10px;
387
+ font-weight: bold;
388
+ text-transform: uppercase;
389
+ letter-spacing: 1px;
390
+ }
391
+
392
+ .cyber-divider {
393
+ height: 1px;
394
+ background: linear-gradient(90deg, transparent, var(--primary), transparent);
395
+ }
396
+
397
+ .cyber-countdown {
398
+ font-family: 'Courier New', monospace;
399
+ font-weight: bold;
400
+ color: var(--secondary);
401
+ text-shadow: 0 0 5px rgba(0, 247, 255, 0.7);
402
+ }
403
+
404
+ .cyber-modal {
405
+ animation: modal-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
406
+ }
407
+
408
+ @keyframes modal-appear {
409
+ 0% { opacity: 0; transform: scale(0.8) translateY(20px); }
410
+ 100% { opacity: 1; transform: scale(1) translateY(0); }
411
+ }
412
+
413
+ .cyber-toast {
414
+ animation: toast-slide 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
415
+ }
416
+
417
+ @keyframes toast-slide {
418
+ 0% { opacity: 0; transform: translateY(20px); }
419
+ 100% { opacity: 1; transform: translateY(0); }
420
+ }
421
+
422
+ .cyber-dropdown {
423
+ animation: dropdown-appear 0.3s ease-out;
424
+ }
425
+
426
+ @keyframes dropdown-appear {
427
+ 0% { opacity: 0; transform: translateY(-10px); }
428
+ 100% { opacity: 1; transform: translateY(0); }
429
+ }
430
+
431
+ .cyber-marquee {
432
+ animation: marquee 20s linear infinite;
433
+ }
434
+
435
+ @keyframes marquee {
436
+ 0% { transform: translateX(0); }
437
+ 100% { transform: translateX(-50%); }
438
+ }
439
+
440
+ .cyber-avatar {
441
+ border: 2px solid var(--primary);
442
+ box-shadow: 0 0 10px rgba(110, 0, 255, 0.5);
443
+ }
444
+
445
+ .cyber-chat-bubble {
446
+ position: relative;
447
+ border-radius: 10px;
448
+ padding: 10px 15px;
449
+ max-width: 80%;
450
+ }
451
+
452
+ .cyber-chat-bubble:after {
453
+ content: '';
454
+ position: absolute;
455
+ bottom: -10px;
456
+ left: 20px;
457
+ border-width: 10px 10px 0;
458
+ border-style: solid;
459
+ border-color: var(--primary) transparent;
460
+ }
461
+
462
+ .cyber-carousel {
463
+ scroll-snap-type: x mandatory;
464
+ scroll-behavior: smooth;
465
  }
466
+
467
+ .cyber-carousel-item {
468
+ scroll-snap-align: start;
469
+ }
470
+
471
+ .cyber-accordion {
472
+ transition: all 0.3s;
473
+ }
474
+
475
+ .cyber-accordion-header {
476
+ cursor: pointer;
477
+ transition: all 0.3s;
478
+ }
479
+
480
+ .cyber-accordion-header:hover {
481
+ background: rgba(110, 0, 255, 0.1);
482
+ }
483
+
484
+ .cyber-accordion-content {
485
+ max-height: 0;
486
+ overflow: hidden;
487
+ transition: max-height 0.3s;
488
+ }
489
+
490
+ .cyber-accordion.active .cyber-accordion-content {
491
+ max-height: 500px;
492
+ }
493
+
494
+ .cyber-timeline {
495
+ position: relative;
496
+ }
497
+
498
+ .cyber-timeline:before {
499
+ content: '';
500
+ position: absolute;
501
+ top: 0;
502
+ bottom: 0;
503
+ left: 20px;
504
+ width: 2px;
505
+ background: linear-gradient(to bottom, var(--primary), var(--secondary));
506
+ }
507
+
508
+ .cyber-timeline-item {
509
+ position: relative;
510
+ padding-left: 50px;
511
+ margin-bottom: 30px;
512
+ }
513
+
514
+ .cyber-timeline-item:before {
515
+ content: '';
516
+ position: absolute;
517
+ left: 16px;
518
+ top: 5px;
519
+ width: 10px;
520
+ height: 10px;
521
+ border-radius: 50%;
522
+ background: var(--primary);
523
+ box-shadow: 0 0 0 3px rgba(110, 0, 255, 0.3);
524
+ }
525
+
526
+ .cyber-stepper {
527
+ display: flex;
528
+ justify-content: space-between;
529
+ position: relative;
530
+ }
531
+
532
+ .cyber-stepper:before {
533
+ content: '';
534
+ position: absolute;
535
+ top: 20px;
536
+ left: 0;
537
+ right: 0;
538
+ height: 2px;
539
+ background: linear-gradient(to right, var(--primary), var(--secondary));
540
+ z-index: 1;
541
+ }
542
+
543
+ .cyber-stepper-step {
544
+ position: relative;
545
+ z-index: 2;
546
+ text-align: center;
547
+ }
548
+
549
+ .cyber-stepper-step:before {
550
+ content: '';
551
+ display: block;
552
+ width: 20px;
553
+ height: 20px;
554
+ margin: 0 auto 10px;
555
+ border-radius: 50%;
556
+ background: rgba(15, 15, 35, 0.7);
557
+ border: 2px solid var(--primary);
558
+ }
559
+
560
+ .cyber-stepper-step.active:before {
561
+ background: var(--primary);
562
  }
563
+
564
+ .cyber-stepper-step.complete:before {
565
+ background: var(--primary);
566
+ content: '✓';
567
  color: white;
568
+ display: flex;
569
+ align-items: center;
570
+ justify-content: center;
571
+ font-size: 12px;
572
+ }
573
+
574
+ .cyber-rating {
575
+ display: inline-flex;
576
+ flex-direction: row-reverse;
577
+ }
578
+
579
+ .cyber-rating input {
580
+ display: none;
581
+ }
582
+
583
+ .cyber-rating label {
584
+ color: rgba(110, 0, 255, 0.5);
585
+ font-size: 24px;
586
+ cursor: pointer;
587
+ transition: all 0.3s;
588
+ }
589
+
590
+ .cyber-rating input:checked ~ label,
591
+ .cyber-rating label:hover,
592
+ .cyber-rating label:hover ~ label {
593
+ color: var(--primary);
594
+ text-shadow: 0 0 5px rgba(110, 0, 255, 0.5);
595
+ }
596
+
597
+ .cyber-toggle {
598
+ position: relative;
599
+ display: inline-block;
600
+ width: 60px;
601
+ height: 30px;
602
+ }
603
+
604
+ .cyber-toggle input {
605
+ opacity: 0;
606
+ width: 0;
607
+ height: 0;
608
+ }
609
+
610
+ .cyber-toggle-slider {
611
+ position: absolute;
612
+ cursor: pointer;
613
+ top: 0;
614
+ left: 0;
615
+ right: 0;
616
+ bottom: 0;
617
+ background: rgba(15, 15, 35, 0.7);
618
+ border: 1px solid var(--primary);
619
+ transition: .4s;
620
+ border-radius: 30px;
621
+ }
622
+
623
+ .cyber-toggle-slider:before {
624
+ position: absolute;
625
+ content: '';
626
+ height: 22px;
627
+ width: 22px;
628
+ left: 4px;
629
+ bottom: 3px;
630
+ background: linear-gradient(45deg, var(--primary), var(--accent));
631
+ transition: .4s;
632
+ border-radius: 50%;
633
+ }
634
+
635
+ .cyber-toggle input:checked + .cyber-toggle-slider {
636
+ background: rgba(110, 0, 255, 0.2);
637
+ }
638
+
639
+ .cyber-toggle input:checked + .cyber-toggle-slider:before {
640
+ transform: translateX(28px);
641
+ }
642
+
643
+ .cyber-drawer {
644
+ transition: transform 0.3s ease-out;
645
+ }
646
+
647
+ .cyber-drawer.left {
648
+ transform: translateX(-100%);
649
+ }
650
+
651
+ .cyber-drawer.right {
652
+ transform: translateX(100%);
653
+ }
654
+
655
+ .cyber-drawer.open {
656
+ transform: translateX(0);
657
+ }
658
+
659
+ .cyber-skeleton {
660
+ background: linear-gradient(90deg, rgba(15, 15, 35, 0.7), rgba(110, 0, 255, 0.2), rgba(15, 15, 35, 0.7));
661
+ background-size: 200% 100%;
662
+ animation: skeleton-loading 1.5s infinite;
663
+ }
664
+
665
+ @keyframes skeleton-loading {
666
+ 0% { background-position: 200% 0; }
667
+ 100% { background-position: -200% 0; }
668
+ }
669
+
670
+ .cyber-countup {
671
+ font-variant-numeric: tabular-nums;
672
  }
673
+
674
+ .cyber-lottie {
675
+ width: 100%;
676
+ height: 100%;
677
+ }
678
+
679
+ .cyber-qrcode {
680
+ padding: 10px;
681
+ background: white;
682
+ border: 5px solid var(--primary);
683
+ }
684
+
685
+ .cyber-captcha {
686
+ background: linear-gradient(45deg, rgba(15, 15, 35, 0.7), rgba(110, 0, 255, 0.2));
687
+ border: 1px solid var(--primary);
688
+ font-family: 'Courier New', monospace;
689
+ letter-spacing: 5px;
690
+ font-weight: bold;
691
+ color: var(--secondary);
692
+ text-shadow: 0 0 5px rgba(0, 247, 255, 0.7);
693
+ }
694
+
695
+ .cyber-voice {
696
+ position: relative;
697
+ }
698
+
699
+ .cyber-voice-wave {
700
+ position: absolute;
701
+ top: 0;
702
+ left: 0;
703
+ right: 0;
704
+ bottom: 0;
705
+ display: flex;
706
+ align-items: center;
707
+ justify-content: space-between;
708
+ padding: 0 10px;
709
+ }
710
+
711
+ .cyber-voice-wave span {
712
+ display: inline-block;
713
+ width: 3px;
714
+ background: var(--primary);
715
+ border-radius: 3px;
716
+ animation: voice-wave 1.5s infinite ease-in-out;
717
+ }
718
+
719
+ .cyber-voice-wave span:nth-child(1) {
720
+ height: 10px;
721
+ animation-delay: 0.1s;
722
+ }
723
+
724
+ .cyber-voice-wave span:nth-child(2) {
725
+ height: 15px;
726
+ animation-delay: 0.2s;
727
+ }
728
+
729
+ .cyber-voice-wave span:nth-child(3) {
730
+ height: 20px;
731
+ animation-delay: 0.3s;
732
+ }
733
+
734
+ .cyber-voice-wave span:nth-child(4) {
735
+ height: 25px;
736
+ animation-delay: 0.4s;
737
+ }
738
+
739
+ .cyber-voice-wave span:nth-child(5) {
740
+ height: 20px;
741
+ animation-delay: 0.5s;
742
+ }
743
+
744
+ .cyber-voice-wave span:nth-child(6) {
745
+ height: 15px;
746
+ animation-delay: 0.6s;
747
+ }
748
+
749
+ .cyber-voice-wave span:nth-child(7) {
750
+ height: 10px;
751
+ animation-delay: 0.7s;
752
+ }
753
+
754
+ @keyframes voice-wave {
755
+ 0%, 100% { transform: scaleY(1); }
756
+ 50% { transform: scaleY(0.5); }
757
+ }
758
+
759
+ .cyber-datatable {
760
+ border-collapse: separate;
761
+ border-spacing: 0;
762
+ }
763
+
764
+ .cyber-datatable th {
765
+ background: rgba(110, 0, 255, 0.2);
766
+ position: sticky;
767
+ top: 0;
768
+ }
769
+
770
+ .cyber-datatable tr:nth-child(even) {
771
+ background: rgba(15, 15, 35, 0.5);
772
+ }
773
+
774
+ .cyber-datatable tr:hover {
775
+ background: rgba(110, 0, 255, 0.1);
776
+ }
777
+
778
+ .cyber-datatable td, .cyber-datatable th {
779
+ border-bottom: 1px solid rgba(110, 0, 255, 0.2);
780
+ padding: 12px 15px;
781
+ }
782
+
783
+ .cyber-calendar {
784
+ border: 1px solid rgba(110, 0, 255, 0.5);
785
+ }
786
+
787
+ .cyber-calendar-header {
788
+ background: rgba(110, 0, 255, 0.2);
789
+ }
790
+
791
+ .cyber-calendar-day {
792
+ border: 1px solid rgba(110, 0, 255, 0.1);
793
+ }
794
+
795
+ .cyber-calendar-day:hover {
796
+ background: rgba(110, 0, 255, 0.1);
797
+ }
798
+
799
+ .cyber-calendar-day.today {
800
+ background: rgba(110, 0, 255, 0.3);
801
+ }
802
+
803
+ .cyber-calendar-day.selected {
804
+ background: var(--primary);
805
  color: white;
806
  }
807
+
808
+ .cyber-map {
809
+ height: 400px;
810
+ background: rgba(15, 15, 35, 0.7);
811
+ border: 1px solid rgba(110, 0, 255, 0.5);
812
+ }
813
+
814
+ .cyber-chart {
815
+ background: rgba(15, 15, 35, 0.7);
816
+ border: 1px solid rgba(110, 0, 255, 0.5);
817
+ }
818
+
819
+ .cyber-editor {
820
+ border: 1px solid rgba(110, 0, 255, 0.5);
821
+ background: rgba(15, 15, 35, 0.7);
822
+ }
823
+
824
+ .cyber-terminal {
825
+ background: rgba(15, 15, 35, 0.9);
826
+ border: 1px solid rgba(110, 0, 255, 0.5);
827
+ font-family: 'Courier New', monospace;
828
+ color: var(--secondary);
829
+ }
830
+
831
+ .cyber-terminal-header {
832
+ background: rgba(110, 0, 255, 0.2);
833
+ }
834
+
835
+ .cyber-terminal-body {
836
+ overflow-y: auto;
837
+ }
838
+
839
+ .cyber-terminal-input {
840
+ background: transparent;
841
+ border: none;
842
+ outline: none;
843
+ color: var(--secondary);
844
+ font-family: 'Courier New', monospace;
845
+ width: 100%;
846
+ }
847
+
848
+ .cyber-terminal-prompt {
849
+ color: var(--primary);
850
+ }
851
+
852
+ .cyber-terminal-command {
853
+ color: var(--secondary);
854
+ }
855
+
856
+ .cyber-terminal-output {
857
+ color: white;
858
+ }
859
+
860
+ .cyber-terminal-error {
861
+ color: #ff5555;
862
+ }
863
+
864
+ .cyber-terminal-success {
865
+ color: #55ff55;
866
+ }
867
+
868
+ .cyber-terminal-warning {
869
+ color: #ffff55;
870
+ }
871
+
872
+ .cyber-terminal-info {
873
+ color: #5555ff;
874
+ }
875
+
876
+ .cyber-upload {
877
+ border: 2px dashed rgba(110, 0, 255, 0.5);
878
+ background: rgba(15, 15, 35, 0.7);
879
+ transition: all 0.3s;
880
+ }
881
+
882
+ .cyber-upload:hover {
883
+ border-color: var(--primary);
884
+ background: rgba(110, 0, 255, 0.1);
885
+ }
886
+
887
+ .cyber-upload-active {
888
+ border-color: var(--secondary);
889
+ background: rgba(0, 247, 255, 0.1);
890
+ }
891
+
892
+ .cyber-dragdrop {
893
+ border: 2px dashed var(--primary);
894
+ background: rgba(110, 0, 255, 0.1);
895
+ }
896
+
897
+ .cyber-dragdrop-active {
898
+ border-color: var(--secondary);
899
+ background: rgba(0, 247, 255, 0.2);
900
+ }
901
+
902
+ .cyber-contextmenu {
903
+ background: rgba(15, 15, 35, 0.9);
904
+ border: 1px solid rgba(110, 0, 255, 0.5);
905
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
906
+ }
907
+
908
+ .cyber-contextmenu-item {
909
+ transition: all 0.3s;
910
+ }
911
+
912
+ .cyber-contextmenu-item:hover {
913
+ background: rgba(110, 0, 255, 0.3);
914
+ }
915
+
916
+ .cyber-tour {
917
+ background: rgba(15, 15, 35, 0.9);
918
+ border: 1px solid rgba(110, 0, 255, 0.5);
919
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
920
+ }
921
+
922
+ .cyber-tour-arrow {
923
+ border-color: rgba(110, 0, 255, 0.5);
924
+ }
925
+
926
+ .cyber-tour-arrow:after {
927
+ border-color: rgba(15, 15, 35, 0.9);
928
+ }
929
+
930
+ .cyber-tour-footer {
931
+ border-top: 1px solid rgba(110, 0, 255, 0.5);
932
+ }
933
+
934
+ .cyber-tour-progress {
935
+ background: rgba(110, 0, 255, 0.2);
936
+ }
937
+
938
+ .cyber-tour-progress-bar {
939
+ background: linear-gradient(90deg, var(--primary), var(--accent));
940
+ }
941
+
942
+ .cyber-tour-bullet {
943
+ background: rgba(110, 0, 255, 0.2);
944
+ }
945
+
946
+ .cyber-tour-bullet.active {
947
+ background: var(--primary);
948
+ }
949
+
950
+ .cyber-tour-bullet.completed {
951
+ background: var(--secondary);
952
+ }
953
+
954
+ .cyber-tour-skip {
955
+ color: rgba(255, 255, 255, 0.7);
956
+ }
957
+
958
+ .cyber-tour-skip:hover {
959
+ color: white;
960
+ }
961
+
962
+ .cyber-tour-next {
963
+ background: linear-gradient(45deg, var(--primary), var(--accent));
964
+ }
965
+
966
+ .cyber-tour-next:hover {
967
+ background: linear-gradient(45deg, var(--accent), var(--primary));
968
+ }
969
+
970
+ .cyber-tour-back {
971
+ background: rgba(15, 15, 35, 0.7);
972
+ border: 1px solid rgba(110, 0, 255, 0.5);
973
+ }
974
+
975
+ .cyber-tour-back:hover {
976
+ background: rgba(110, 0, 255, 0.2);
977
+ }
978
+
979
+ .cyber-tour-close {
980
+ color: rgba(255, 255, 255, 0.7);
981
+ }
982
+
983
+ .cyber-tour-close:hover {
984
+ color: white;
985
+ }
986
+
987
+ .cyber-tour-title {
988
+ color: var(--secondary);
989
+ }
990
+
991
+ .cyber-tour-description {
992
+ color: rgba(255, 255, 255, 0.8);
993
+ }
994
+
995
+ .cyber-tour-step {
996
+ color: var(--primary);
997
+ }
998
+
999
+ .cyber-tour-total {
1000
+ color: rgba(255, 255, 255, 0.5);
1001
+ }
1002
+
1003
+ .cyber-tour-highlight {
1004
+ box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 3px var(--primary);
1005
+ }
1006
+
1007
+ .cyber-tour-highlight:after {
1008
+ content: '';
1009
+ position: absolute;
1010
+ top: -3px;
1011
+ left: -3px;
1012
+ right: -3px;
1013
+ bottom: -3px;
1014
+ border: 3px solid var(--primary);
1015
+ border-radius: inherit;
1016
+ animation: tour-pulse 2s infinite;
1017
+ pointer-events: none;
1018
+ }
1019
+
1020
+ @keyframes tour-pulse {
1021
+ 0% { opacity: 0.7; transform: scale(1); }
1022
+ 70% { opacity: 0; transform: scale(1.05); }
1023
+ 100% { opacity: 0; transform: scale(1.05); }
1024
+ }
1025
+
1026
+ .cyber-tour-mask {
1027
+ background: rgba(0, 0, 0, 0.7);
1028
+ }
1029
+
1030
+ .cyber-tour-spotlight {
1031
+ box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 3px var(--primary);
1032
+ }
1033
+
1034
+ .cyber-tour-spotlight:after {
1035
+ content: '';
1036
+ position: absolute;
1037
+ top: -3px;
1038
+ left: -3px;
1039
+ right: -3px;
1040
+ bottom: -3px;
1041
+ border: 3px solid var(--primary);
1042
+ border-radius: inherit;
1043
+ animation: tour-spotlight-pulse 2s infinite;
1044
+ pointer-events: none;
1045
+ }
1046
+
1047
+ @keyframes tour-spotlight-pulse {
1048
+ 0% { opacity: 0.7; transform: scale(1); }
1049
+ 70% { opacity: 0; transform: scale(1.05); }
1050
+ 100% { opacity: 0; transform: scale(1.05); }
1051
+ }
1052
+
1053
+ .cyber-tour-beacon {
1054
+ width: 20px;
1055
+ height: 20px;
1056
+ border-radius: 50%;
1057
+ background: var(--primary);
1058
+ animation: tour-beacon-pulse 2s infinite;
1059
+ cursor: pointer;
1060
+ }
1061
+
1062
+ @keyframes tour-beacon-pulse {
1063
+ 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(110, 0, 255, 0.7); }
1064
+ 70% { transform: scale(1.3); box-shadow: 0 0 0 10px rgba(110, 0, 255, 0); }
1065
+ 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(110, 0, 255, 0); }
1066
+ }
1067
+
1068
+ .cyber-tour-beacon-inner {
1069
+ width: 10px;
1070
+ height: 10px;
1071
+ border-radius: 50%;
1072
+ background: white;
1073
+ position: absolute;
1074
+ top: 5px;
1075
+ left: 5px;
1076
+ }
1077
+
1078
+ .cyber-tour-beacon-outer {
1079
+ width: 30px;
1080
+ height: 30px;
1081
+ border-radius: 50%;
1082
+ background: rgba(110, 0, 255, 0.3);
1083
+ position: absolute;
1084
+ top: -5px;
1085
+ left: -5px;
1086
+ animation: tour-beacon-outer-pulse 2s infinite;
1087
+ }
1088
+
1089
+ @keyframes tour-beacon-outer-pulse {
1090
+ 0% { transform: scale(1); opacity: 0.7; }
1091
+ 70% { transform: scale(1.5); opacity: 0; }
1092
+ 100% { transform: scale(1.5); opacity: 0; }
1093
+ }
1094
+
1095
+ .cyber-tour-beacon-arrow {
1096
+ width: 0;
1097
+ height: 0;
1098
+ border-left: 10px solid transparent;
1099
+ border-right: 10px solid transparent;
1100
+ border-top: 10px solid var(--primary);
1101
+ position: absolute;
1102
+ bottom: -8px;
1103
+ left: 0;
1104
+ }
1105
+
1106
+ .cyber-tour-beacon-text {
1107
+ position: absolute;
1108
+ top: 40px;
1109
+ left: -50px;
1110
+ width: 120px;
1111
+ background: rgba(15, 15, 35, 0.9);
1112
+ border: 1px solid rgba(110, 0, 255, 0.5);
1113
+ padding: 10px;
1114
+ border-radius: 5px;
1115
+ text-align: center;
1116
+ color: white;
1117
+ font-size: 12px;
1118
+ }
1119
+
1120
+ .cyber-tour-beacon-text:after {
1121
+ content: '';
1122
+ position: absolute;
1123
+ top: -10px;
1124
+ left: 50px;
1125
+ border-left: 10px solid transparent;
1126
+ border-right: 10px solid transparent;
1127
+ border-bottom: 10px solid rgba(110, 0, 255, 0.5);
1128
+ }
1129
+
1130
+ .cyber-tour-beacon-text:before {
1131
+ content: '';
1132
+ position: absolute;
1133
+ top: -8px;
1134
+ left: 50px;
1135
+ border-left: 10px solid transparent;
1136
+ border-right: 10px solid transparent;
1137
+ border-bottom: 10px solid rgba(15, 15, 35, 0.9);
1138
+ z-index: 1;
1139
+ }
1140
+
1141
+ .cyber-tour-beacon-close {
1142
+ position: absolute;
1143
+ top: -10px;
1144
+ right: -10px;
1145
+ width: 20px;
1146
+ height: 20px;
1147
+ background: var(--primary);
1148
+ border-radius: 50%;
1149
+ color: white;
1150
+ display: flex;
1151
+ align-items: center;
1152
+ justify-content: center;
1153
+ font-size: 12px;
1154
+ cursor: pointer;
1155
+ }
1156
+
1157
+ .cyber-tour-beacon-close:hover {
1158
+ background: var(--accent);
1159
+ }
1160
+
1161
+ .cyber-tour-beacon-next {
1162
+ position: absolute;
1163
+ bottom: -30px;
1164
+ left: 50px;
1165
+ width: 20px;
1166
+ height: 20px;
1167
+ background: var(--primary);
1168
+ border-radius: 50%;
1169
+ color: white;
1170
+ display: flex;
1171
+ align-items: center;
1172
+ justify-content: center;
1173
+ font-size: 12px;
1174
+ cursor: pointer;
1175
+ }
1176
+
1177
+ .cyber-tour-beacon-next:hover {
1178
+ background: var(--accent);
1179
+ }
1180
+
1181
+ .cyber-tour-beacon-prev {
1182
+ position: absolute;
1183
+ bottom: -30px;
1184
+ left: 20px;
1185
+ width: 20px;
1186
+ height: 20px;
1187
+ background: rgba(15, 15, 35, 0.7);
1188
+ border: 1px solid rgba(110, 0, 255, 0.5);
1189
+ border-radius: 50%;
1190
+ color: white;
1191
+ display: flex;
1192
+ align-items: center;
1193
+ justify-content: center;
1194
+ font-size: 12px;
1195
+ cursor: pointer;
1196
+ }
1197
+
1198
+ .cyber-tour-beacon-prev:hover {
1199
+ background: rgba(110, 0, 255, 0.2);
1200
+ }
1201
+
1202
+ .cyber-tour-beacon-skip {
1203
+ position: absolute;
1204
+ bottom: -30px;
1205
+ right: 20px;
1206
+ width: 20px;
1207
+ height: 20px;
1208
+ background: rgba(15, 15, 35, 0.7);
1209
+ border: 1px solid rgba(110, 0, 255, 0.5);
1210
+ border-radius: 50%;
1211
+ color: white;
1212
+ display: flex;
1213
+ align-items: center;
1214
+ justify-content: center;
1215
+ font-size: 12px;
1216
+ cursor: pointer;
1217
+ }
1218
+
1219
+ .cyber-tour-beacon-skip:hover {
1220
+ background: rgba(110, 0, 255, 0.2);
1221
+ }
1222
+
1223
+ .cyber-tour-beacon-number {
1224
+ position: absolute;
1225
+ top: -10px;
1226
+ left: -10px;
1227
+ width: 20px;
1228
+ height: 20px;
1229
+ background: var(--secondary);
1230
+ border-radius: 50%;
1231
+ color: black;
1232
+ display: flex;
1233
+ align-items: center;
1234
+ justify-content: center;
1235
+ font-size: 12px;
1236
+ font-weight: bold;
1237
+ }
1238
+
1239
+ .cyber-tour-beacon-number:after {
1240
+ content: '/';
1241
+ position: absolute;
1242
+ right: -15px;
1243
+ color: white;
1244
+ }
1245
+
1246
+ .cyber-tour-beacon-total {
1247
+ position: absolute;
1248
+ top: -10px;
1249
+ left: 15px;
1250
+ color: white;
1251
+ font-size: 12px;
1252
+ }
1253
+
1254
+ .cyber-tour-beacon-title {
1255
+ font-weight: bold;
1256
+ margin-bottom: 5px;
1257
+ color: var(--secondary);
1258
+ }
1259
+
1260
+ .cyber-tour-beacon-description {
1261
+ font-size: 11px;
1262
+ color: rgba(255, 255, 255, 0.8);
1263
+ }
1264
+
1265
+ .cyber-tour-beacon-progress {
1266
+ height: 3px;
1267
+ background: rgba(110, 0, 255, 0.2);
1268
+ margin-top: 10px;
1269
+ border-radius: 3px;
1270
+ overflow: hidden;
1271
+ }
1272
+
1273
+ .cyber-tour-beacon-progress-bar {
1274
+ height: 100%;
1275
+ background: linear-gradient(90deg, var(--primary), var(--accent));
1276
+ border-radius: 3px;
1277
+ }
1278
+
1279
+ .cyber-tour-beacon-buttons {
1280
+ display: flex;
1281
+ justify-content: space-between;
1282
+ margin-top: 10px;
1283
+ }
1284
+
1285
+ .cyber-tour-beacon-button {
1286
+ padding: 5px 10px;
1287
+ border-radius: 3px;
1288
+ font-size: 11px;
1289
+ cursor: pointer;
1290
+ }
1291
+
1292
+ .cyber-tour-beacon-button-primary {
1293
+ background: linear-gradient(45deg, var(--primary), var(--accent));
1294
+ color: white;
1295
+ }
1296
+
1297
+ .cyber-tour-beacon-button-secondary {
1298
+ background: rgba(15, 15, 35, 0.7);
1299
+ border: 1px solid rgba(110, 0, 255, 0.5);
1300
+ color: white;
1301
+ }
1302
+
1303
+ .cyber-tour-beacon-button-primary:hover {
1304
+ background: linear-gradient(45deg, var(--accent), var(--primary));
1305
+ }
1306
+
1307
+ .cyber-tour-beacon-button-secondary:hover {
1308
+ background: rgba(110, 0, 255, 0.2);
1309
+ }
1310
+
1311
+ .cyber-tour-beacon-footer {
1312
+ display: flex;
1313
+ justify-content: space-between;
1314
+ align-items: center;
1315
+ margin-top: 10px;
1316
+ padding-top: 10px;
1317
+ border-top: 1px solid rgba(110, 0, 255, 0.5);
1318
+ }
1319
+
1320
+ .cyber-tour-beacon-footer-text {
1321
+ font-size: 10px;
1322
+ color: rgba(255, 255, 255, 0.5);
1323
+ }
1324
+
1325
+ .cyber-tour-beacon-footer-buttons {
1326
+ display: flex;
1327
+ }
1328
+
1329
+ .cyber-tour-beacon-footer-button {
1330
+ width: 20px;
1331
+ height: 20px;
1332
+ background: rgba(15, 15, 35, 0.7);
1333
+ border: 1px solid rgba(110, 0, 255, 0.5);
1334
+ border-radius: 3px;
1335
+ margin-left: 5px;
1336
+ display: flex;
1337
+ align-items: center;
1338
+ justify-content: center;
1339
+ font-size: 10px;
1340
+ cursor: pointer;
1341
+ }
1342
+
1343
+ .cyber-tour-beacon-footer-button:hover {
1344
+ background: rgba(110, 0, 255, 0.2);
1345
+ }
1346
+
1347
+ .cyber-tour-beacon-footer-button-active {
1348
+ background: var(--primary);
1349
+ color: white;
1350
+ }
1351
+
1352
+ .cyber-tour-beacon-footer-button-active:hover {
1353
+ background: var(--accent);
1354
+ }
1355
+
1356
+ .cyber-tour-beacon-footer-button-disabled {
1357
+ opacity: 0.5;
1358
+ cursor: not-allowed;
1359
+ }
1360
+
1361
+ .cyber-tour-beacon-footer-button-disabled:hover {
1362
+ background: rgba(15, 15, 35, 0.7);
1363
+ }
1364
+
1365
+ .cyber-tour-beacon-footer-button-icon {
1366
+ font-size: 12px;
1367
+ }
1368
+
1369
+ .cyber-tour-beacon-footer-button-text {
1370
+ font-size: 10px;
1371
+ margin-left: 5px;
1372
+ }
1373
+
1374
+ .cyber-tour-beacon-footer-button-group {
1375
+ display: flex;
1376
+ }
1377
+
1378
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button {
1379
+ border-radius: 0;
1380
+ margin-left: 0;
1381
+ border-right: none;
1382
+ }
1383
+
1384
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button:first-child {
1385
+ border-top-left-radius: 3px;
1386
+ border-bottom-left-radius: 3px;
1387
+ }
1388
+
1389
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button:last-child {
1390
+ border-top-right-radius: 3px;
1391
+ border-bottom-right-radius: 3px;
1392
+ border-right: 1px solid rgba(110, 0, 255, 0.5);
1393
+ }
1394
+
1395
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button:not(:first-child):not(:last-child) {
1396
+ border-radius: 0;
1397
+ }
1398
+
1399
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button:not(:first-child) {
1400
+ margin-left: -1px;
1401
+ }
1402
+
1403
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button:not(:last-child) {
1404
+ border-right: none;
1405
+ }
1406
+
1407
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button:hover {
1408
+ z-index: 1;
1409
+ }
1410
+
1411
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-active {
1412
+ z-index: 2;
1413
+ }
1414
+
1415
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled {
1416
+ z-index: 0;
1417
+ }
1418
+
1419
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1420
+ z-index: 0;
1421
+ }
1422
+
1423
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1424
+ z-index: 0;
1425
+ }
1426
+
1427
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1428
+ z-index: 0;
1429
+ }
1430
+
1431
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1432
+ z-index: 0;
1433
+ }
1434
+
1435
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1436
+ z-index: 0;
1437
+ }
1438
+
1439
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1440
+ z-index: 0;
1441
+ }
1442
+
1443
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1444
+ z-index: 0;
1445
+ }
1446
+
1447
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1448
+ z-index: 0;
1449
+ }
1450
+
1451
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1452
+ z-index: 0;
1453
+ }
1454
+
1455
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1456
+ z-index: 0;
1457
+ }
1458
+
1459
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1460
+ z-index: 0;
1461
+ }
1462
+
1463
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1464
+ z-index: 0;
1465
+ }
1466
+
1467
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1468
+ z-index: 0;
1469
+ }
1470
+
1471
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1472
+ z-index: 0;
1473
+ }
1474
+
1475
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1476
+ z-index: 0;
1477
+ }
1478
+
1479
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1480
+ z-index: 0;
1481
+ }
1482
+
1483
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1484
+ z-index: 0;
1485
+ }
1486
+
1487
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1488
+ z-index: 0;
1489
+ }
1490
+
1491
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1492
+ z-index: 0;
1493
+ }
1494
+
1495
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1496
+ z-index: 0;
1497
+ }
1498
+
1499
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1500
+ z-index: 0;
1501
+ }
1502
+
1503
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1504
+ z-index: 0;
1505
+ }
1506
+
1507
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1508
+ z-index: 0;
1509
+ }
1510
+
1511
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1512
+ z-index: 0;
1513
+ }
1514
+
1515
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1516
+ z-index: 0;
1517
+ }
1518
+
1519
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1520
+ z-index: 0;
1521
+ }
1522
+
1523
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1524
+ z-index: 0;
1525
+ }
1526
+
1527
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1528
+ z-index: 0;
1529
+ }
1530
+
1531
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1532
+ z-index: 0;
1533
+ }
1534
+
1535
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1536
+ z-index: 0;
1537
+ }
1538
+
1539
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1540
+ z-index: 0;
1541
+ }
1542
+
1543
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1544
+ z-index: 0;
1545
+ }
1546
+
1547
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1548
+ z-index: 0;
1549
+ }
1550
+
1551
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1552
+ z-index: 0;
1553
+ }
1554
+
1555
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1556
+ z-index: 0;
1557
+ }
1558
+
1559
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1560
+ z-index: 0;
1561
+ }
1562
+
1563
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1564
+ z-index: 0;
1565
+ }
1566
+
1567
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1568
+ z-index: 0;
1569
+ }
1570
+
1571
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1572
+ z-index: 0;
1573
+ }
1574
+
1575
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1576
+ z-index: 0;
1577
+ }
1578
+
1579
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1580
+ z-index: 0;
1581
+ }
1582
+
1583
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1584
+ z-index: 0;
1585
+ }
1586
+
1587
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1588
+ z-index: 0;
1589
+ }
1590
+
1591
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1592
+ z-index: 0;
1593
+ }
1594
+
1595
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1596
+ z-index: 0;
1597
+ }
1598
+
1599
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1600
+ z-index: 0;
1601
+ }
1602
+
1603
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1604
+ z-index: 0;
1605
+ }
1606
+
1607
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1608
+ z-index: 0;
1609
+ }
1610
+
1611
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1612
+ z-index: 0;
1613
+ }
1614
+
1615
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1616
+ z-index: 0;
1617
+ }
1618
+
1619
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1620
+ z-index: 0;
1621
+ }
1622
+
1623
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1624
+ z-index: 0;
1625
+ }
1626
+
1627
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1628
+ z-index: 0;
1629
+ }
1630
+
1631
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1632
+ z-index: 0;
1633
+ }
1634
+
1635
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1636
+ z-index: 0;
1637
+ }
1638
+
1639
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1640
+ z-index: 0;
1641
+ }
1642
+
1643
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1644
+ z-index: 0;
1645
+ }
1646
+
1647
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1648
+ z-index: 0;
1649
+ }
1650
+
1651
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1652
+ z-index: 0;
1653
+ }
1654
+
1655
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1656
+ z-index: 0;
1657
+ }
1658
+
1659
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1660
+ z-index: 0;
1661
+ }
1662
+
1663
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1664
+ z-index: 0;
1665
+ }
1666
+
1667
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1668
+ z-index: 0;
1669
+ }
1670
+
1671
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1672
+ z-index: 0;
1673
+ }
1674
+
1675
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1676
+ z-index: 0;
1677
+ }
1678
+
1679
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1680
+ z-index: 0;
1681
+ }
1682
+
1683
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1684
+ z-index: 0;
1685
+ }
1686
+
1687
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1688
+ z-index: 0;
1689
+ }
1690
+
1691
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1692
+ z-index: 0;
1693
+ }
1694
+
1695
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1696
+ z-index: 0;
1697
+ }
1698
+
1699
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1700
+ z-index: 0;
1701
+ }
1702
+
1703
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1704
+ z-index: 0;
1705
+ }
1706
+
1707
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1708
+ z-index: 0;
1709
+ }
1710
+
1711
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1712
+ z-index: 0;
1713
+ }
1714
+
1715
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1716
+ z-index: 0;
1717
+ }
1718
+
1719
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1720
+ z-index: 0;
1721
+ }
1722
+
1723
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1724
+ z-index: 0;
1725
+ }
1726
+
1727
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1728
+ z-index: 0;
1729
+ }
1730
+
1731
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1732
+ z-index: 0;
1733
+ }
1734
+
1735
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1736
+ z-index: 0;
1737
+ }
1738
+
1739
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1740
+ z-index: 0;
1741
+ }
1742
+
1743
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1744
+ z-index: 0;
1745
+ }
1746
+
1747
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1748
+ z-index: 0;
1749
+ }
1750
+
1751
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1752
+ z-index: 0;
1753
+ }
1754
+
1755
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1756
+ z-index: 0;
1757
+ }
1758
+
1759
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1760
+ z-index: 0;
1761
+ }
1762
+
1763
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1764
+ z-index: 0;
1765
+ }
1766
+
1767
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1768
+ z-index: 0;
1769
+ }
1770
+
1771
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1772
+ z-index: 0;
1773
+ }
1774
+
1775
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1776
+ z-index: 0;
1777
+ }
1778
+
1779
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1780
+ z-index: 0;
1781
+ }
1782
+
1783
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1784
+ z-index: 0;
1785
+ }
1786
+
1787
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1788
+ z-index: 0;
1789
+ }
1790
+
1791
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1792
+ z-index: 0;
1793
+ }
1794
+
1795
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1796
+ z-index: 0;
1797
+ }
1798
+
1799
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1800
+ z-index: 0;
1801
+ }
1802
+
1803
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1804
+ z-index: 0;
1805
+ }
1806
+
1807
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1808
+ z-index: 0;
1809
+ }
1810
+
1811
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1812
+ z-index: 0;
1813
+ }
1814
+
1815
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1816
+ z-index: 0;
1817
+ }
1818
+
1819
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1820
+ z-index: 0;
1821
+ }
1822
+
1823
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1824
+ z-index: 0;
1825
+ }
1826
+
1827
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1828
+ z-index: 0;
1829
+ }
1830
+
1831
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1832
+ z-index: 0;
1833
+ }
1834
+
1835
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1836
+ z-index: 0;
1837
+ }
1838
+
1839
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1840
+ z-index: 0;
1841
+ }
1842
+
1843
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1844
+ z-index: 0;
1845
+ }
1846
+
1847
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1848
+ z-index: 0;
1849
+ }
1850
+
1851
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1852
+ z-index: 0;
1853
+ }
1854
+
1855
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1856
+ z-index: 0;
1857
+ }
1858
+
1859
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1860
+ z-index: 0;
1861
+ }
1862
+
1863
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1864
+ z-index: 0;
1865
+ }
1866
+
1867
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1868
+ z-index: 0;
1869
+ }
1870
+
1871
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1872
+ z-index: 0;
1873
+ }
1874
+
1875
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1876
+ z-index: 0;
1877
+ }
1878
+
1879
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1880
+ z-index: 0;
1881
+ }
1882
+
1883
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1884
+ z-index: 0;
1885
+ }
1886
+
1887
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1888
+ z-index: 0;
1889
+ }
1890
+
1891
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1892
+ z-index: 0;
1893
+ }
1894
+
1895
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1896
+ z-index: 0;
1897
+ }
1898
+
1899
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1900
+ z-index: 0;
1901
+ }
1902
+
1903
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1904
+ z-index: 0;
1905
+ }
1906
+
1907
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1908
+ z-index: 0;
1909
+ }
1910
+
1911
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1912
+ z-index: 0;
1913
+ }
1914
+
1915
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1916
+ z-index: 0;
1917
+ }
1918
+
1919
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1920
+ z-index: 0;
1921
+ }
1922
+
1923
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1924
+ z-index: 0;
1925
+ }
1926
+
1927
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1928
+ z-index: 0;
1929
+ }
1930
+
1931
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1932
+ z-index: 0;
1933
+ }
1934
+
1935
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1936
+ z-index: 0;
1937
+ }
1938
+
1939
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1940
+ z-index: 0;
1941
+ }
1942
+
1943
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1944
+ z-index: 0;
1945
+ }
1946
+
1947
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1948
+ z-index: 0;
1949
+ }
1950
+
1951
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1952
+ z-index: 0;
1953
+ }
1954
+
1955
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1956
+ z-index: 0;
1957
+ }
1958
+
1959
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1960
+ z-index: 0;
1961
+ }
1962
+
1963
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1964
+ z-index: 0;
1965
+ }
1966
+
1967
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1968
+ z-index: 0;
1969
+ }
1970
+
1971
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1972
+ z-index: 0;
1973
+ }
1974
+
1975
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1976
+ z-index: 0;
1977
+ }
1978
+
1979
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1980
+ z-index: 0;
1981
+ }
1982
+
1983
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1984
+ z-index: 0;
1985
+ }
1986
+
1987
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1988
+ z-index: 0;
1989
+ }
1990
+
1991
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1992
+ z-index: 0;
1993
+ }
1994
+
1995
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
1996
+ z-index: 0;
1997
+ }
1998
+
1999
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2000
+ z-index: 0;
2001
+ }
2002
+
2003
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2004
+ z-index: 0;
2005
+ }
2006
+
2007
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2008
+ z-index: 0;
2009
+ }
2010
+
2011
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2012
+ z-index: 0;
2013
+ }
2014
+
2015
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2016
+ z-index: 0;
2017
+ }
2018
+
2019
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2020
+ z-index: 0;
2021
+ }
2022
+
2023
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2024
+ z-index: 0;
2025
+ }
2026
+
2027
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2028
+ z-index: 0;
2029
+ }
2030
+
2031
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2032
+ z-index: 0;
2033
+ }
2034
+
2035
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2036
+ z-index: 0;
2037
+ }
2038
+
2039
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2040
+ z-index: 0;
2041
+ }
2042
+
2043
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2044
+ z-index: 0;
2045
+ }
2046
+
2047
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2048
+ z-index: 0;
2049
+ }
2050
+
2051
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button-disabled:hover {
2052
+ z-index: 0;
2053
+ }
2054
+
2055
+ .cyber-tour-beacon-footer-button-group .cyber-tour-beacon-footer-button
2056
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- creer un site de IA de 100000 bouton de services divers des vrais service reel pas d'exemple je veux un vrai site reel pret a l'emploi de suiie avec de tres belle interface le tout en automatique
 
 
1
+ creer un site de IA de 100000 bouton de services divers des vrais service reel pas d'exemple je veux un vrai site reel pret a l'emploi de suiie avec de tres belle interface le tout en automatique
2
+ AJOUTER PLUS DE GENERATEUR DE SITE ? CODE ? SCYPT . AVEC UNE INTERFACE FUTURISTE TRES ANIME