Hugging Face's logo

Spaces:
AdminServerCEO
/
flavi-web
Running

App Files Community
AdminServerCEO commited on
Commit
b5008db
·
verified ·
1 Parent(s): b6aa1c4

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +297 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Flavi Web
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: flavi-web
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,297 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FlaviBot - Discord Music Bot</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Poppins', sans-serif;
12
+ background-color: #0f172a;
13
+ color: #e2e8f0;
14
+ }
15
+ .gradient-text {
16
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
17
+ -webkit-background-clip: text;
18
+ background-clip: text;
19
+ color: transparent;
20
+ }
21
+ .feature-card {
22
+ background: rgba(30, 41, 59, 0.5);
23
+ backdrop-filter: blur(10px);
24
+ border: 1px solid rgba(255, 255, 255, 0.1);
25
+ transition: all 0.3s ease;
26
+ }
27
+ .feature-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
30
+ }
31
+ .stats-card {
32
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="min-h-screen">
37
+ <!-- Navigation -->
38
+ <nav class="bg-gray-900/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-800">
39
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
40
+ <div class="flex items-center justify-between h-16">
41
+ <div class="flex items-center">
42
+ <a href="/" class="flex-shrink-0">
43
+ <img src="https://flavibot.xyz/_ipx/s_150x30/images/brand.svg" alt="FlaviBot Logo" class="h-8">
44
+ </a>
45
+ </div>
46
+ <div class="hidden md:block">
47
+ <div class="ml-10 flex items-baseline space-x-8">
48
+ <a href="/commands" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Commands</a>
49
+ <a href="/faq" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">FAQ</a>
50
+ <a href="/team" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Team</a>
51
+ <a href="/status" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Status</a>
52
+ <a href="/top-music" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Top Songs</a>
53
+ <a href="/radios" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Radios</a>
54
+ <a href="/premium" class="text-indigo-400 hover:text-indigo-300 px-3 py-2 rounded-md text-sm font-medium transition-colors">Premium</a>
55
+ </div>
56
+ </div>
57
+ <div class="md:hidden">
58
+ <!-- Mobile menu button -->
59
+ <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
60
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
61
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
62
+ </svg>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Mobile menu -->
69
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-900/95">
70
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
71
+ <a href="/commands" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Commands</a>
72
+ <a href="/faq" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">FAQ</a>
73
+ <a href="/team" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
74
+ <a href="/status" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Status</a>
75
+ <a href="/top-music" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Top Songs</a>
76
+ <a href="/radios" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Radios</a>
77
+ <a href="/premium" class="text-indigo-400 hover:text-indigo-300 block px-3 py-2 rounded-md text-base font-medium">Premium</a>
78
+ </div>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="relative overflow-hidden">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
85
+ <div class="relative z-10 flex flex-col md:flex-row items-center">
86
+ <div class="md:w-1/2 mb-12 md:mb-0">
87
+ <span class="text-indigo-400 font-semibold text-lg mb-2 block">free high-quality</span>
88
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
89
+ <span class="gradient-text">discord music bot</span>
90
+ </h1>
91
+ <p class="text-lg text-gray-300 mb-8 max-w-lg">
92
+ It supports Spotify, Apple Music, Tidal, SoundCloud, Deezer, direct links, Radio and more
93
+ </p>
94
+ <div class="flex flex-wrap gap-4 mb-8">
95
+ <div class="stats-card px-6 py-4 rounded-lg">
96
+ <div class="text-3xl font-bold text-indigo-300">0</div>
97
+ <div class="text-gray-300 text-sm">Servers</div>
98
+ </div>
99
+ <div class="stats-card px-6 py-4 rounded-lg">
100
+ <div class="text-3xl font-bold text-indigo-300">0</div>
101
+ <div class="text-gray-300 text-sm">Users</div>
102
+ </div>
103
+ <div class="stats-card px-6 py-4 rounded-lg">
104
+ <div class="text-3xl font-bold text-indigo-300">0</div>
105
+ <div class="text-gray-300 text-sm">Commands</div>
106
+ </div>
107
+ </div>
108
+ <a href="https://discord.com/oauth2/authorize?client_id=684773505157431347&response_type=code&permissions=3627412734&scope=applications.commands+bot&redirect_uri=https%3A%2F%2Fflavibot.xyz%2Fdashboard"
109
+ class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-colors inline-flex items-center">
110
+ Add to Discord
111
+ <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
112
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
113
+ </svg>
114
+ </a>
115
+ </div>
116
+ <div class="md:w-1/2 flex justify-center">
117
+ <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/music.svg" alt="Music System" class="w-full max-w-md">
118
+ </div>
119
+ </div>
120
+ </div>
121
+ <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-r from-transparent to-indigo-900/20 -z-10"></div>
122
+ </section>
123
+
124
+ <!-- Features Section -->
125
+ <section class="py-20 bg-gray-900/50">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
127
+ <div class="grid md:grid-cols-3 gap-8">
128
+ <!-- Music System -->
129
+ <div class="feature-card p-8 rounded-xl">
130
+ <div class="w-16 h-16 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6">
131
+ <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
132
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
133
+ </svg>
134
+ </div>
135
+ <h3 class="text-xl font-bold mb-3">Music System</h3>
136
+ <p class="text-gray-300 mb-4">
137
+ Listen to music with your friends directly on your Discord server with FlaviBot.
138
+ </p>
139
+ <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/music.svg" alt="Music System" class="rounded-lg mt-4">
140
+ </div>
141
+
142
+ <!-- Levels System -->
143
+ <div class="feature-card p-8 rounded-xl">
144
+ <div class="w-16 h-16 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6">
145
+ <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
146
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
147
+ </svg>
148
+ </div>
149
+ <h3 class="text-xl font-bold mb-3">Levels System</h3>
150
+ <p class="text-gray-300 mb-4">
151
+ Increase your server's activity with our leveling system, and earn rewards for leveling up. Your server has a dedicated page for ranking the members with the most experience.
152
+ </p>
153
+ <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/levels.svg" alt="Levels System" class="rounded-lg mt-4">
154
+ </div>
155
+
156
+ <!-- Multipurpose -->
157
+ <div class="feature-card p-8 rounded-xl">
158
+ <div class="w-16 h-16 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6">
159
+ <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
160
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
161
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
162
+ </svg>
163
+ </div>
164
+ <h3 class="text-xl font-bold mb-3">Multipurpose</h3>
165
+ <p class="text-gray-300 mb-4">
166
+ Start an active and fun-filled server with FlaviBot and all its unique features
167
+ </p>
168
+ <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/multipurpose.svg" alt="Multipurpose" class="rounded-lg mt-4">
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- CTA Section -->
175
+ <section class="py-20 bg-gradient-to-br from-indigo-900/30 to-purple-900/30">
176
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
177
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Customize your server for free with FlaviBot</h2>
178
+ <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
179
+ Enhance your Discord experience with premium quality music and features at no cost.
180
+ </p>
181
+ <a href="https://discord.com/oauth2/authorize?client_id=684773505157431347&response_type=code&permissions=3627412734&scope=applications.commands+bot&redirect_uri=https%3A%2F%2Fflavibot.xyz%2Fdashboard"
182
+ class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-colors inline-flex items-center mx-auto">
183
+ Add to Discord
184
+ <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
185
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
186
+ </svg>
187
+ </a>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Footer -->
192
+ <footer class="bg-gray-900/80 border-t border-gray-800 py-12">
193
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
194
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
195
+ <div>
196
+ <h3 class="text-white font-semibold mb-4">FlaviBot</h3>
197
+ <ul class="space-y-2">
198
+ <li><a href="/commands" class="text-gray-400 hover:text-white transition-colors">Commands</a></li>
199
+ <li><a href="/faq" class="text-gray-400 hover:text-white transition-colors">FAQ</a></li>
200
+ <li><a href="/team" class="text-gray-400 hover:text-white transition-colors">Team</a></li>
201
+ </ul>
202
+ </div>
203
+ <div>
204
+ <h3 class="text-white font-semibold mb-4">Resources</h3>
205
+ <ul class="space-y-2">
206
+ <li><a href="/status" class="text-gray-400 hover:text-white transition-colors">Status</a></li>
207
+ <li><a href="/top-music" class="text-gray-400 hover:text-white transition-colors">Top Songs</a></li>
208
+ <li><a href="/radios" class="text-gray-400 hover:text-white transition-colors">Radios</a></li>
209
+ </ul>
210
+ </div>
211
+ <div>
212
+ <h3 class="text-white font-semibold mb-4">Premium</h3>
213
+ <ul class="space-y-2">
214
+ <li><a href="/premium" class="text-gray-400 hover:text-white transition-colors">Features</a></li>
215
+ <li><a href="/premium#pricing" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li>
216
+ <li><a href="/premium#benefits" class="text-gray-400 hover:text-white transition-colors">Benefits</a></li>
217
+ </ul>
218
+ </div>
219
+ <div>
220
+ <h3 class="text-white font-semibold mb-4">Connect</h3>
221
+ <div class="flex space-x-4">
222
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
223
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
224
+ <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path>
225
+ </svg>
226
+ </a>
227
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
228
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
229
+ <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"></path>
230
+ </svg>
231
+ </a>
232
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
233
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
234
+ <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.723-4.042-1.608-4.042-1.608-.546-1.386-1.332-1.754-1.332-1.754-1.09-.744.083-.729.083-.729 1.205.086 1.838 1.236 1.838 1.236 1.07 1.835 2.807 1.305 3.492.998.108-.775.418-1.305.762-1.604-2.665-.305-5.467-1.332-5.467-5.93 0-1.312.47-2.382 1.236-3.22-.124-.304-.536-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.956-.266 1.983-.4 3.003-.404 1.02.004 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.655 1.652.243 2.872.118 3.176.77.838 1.235 1.908 1.235 3.22 0 4.61-2.805 5.621-5.476 5.919.43.372.824 1.102.824 2.222 0 1.604-.015 2.897-.015 3.29 0 .322.216.694.825.576C20.565 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"></path>
235
+ </svg>
236
+ </a>
237
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
238
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
239
+ <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6.927 17.558c-.24.44-.683.728-1.21.728-.507 0-.94-.288-1.187-.728-.36-.656-.665-1.407-.914-2.24-.416-1.417-.728-2.92-.728-4.498 0-1.58.312-3.082.728-4.498.25-.833.553-1.584.914-2.24.247-.44.68-.728 1.187-.728.527 0 .97.288 1.21.728.393.72.7 1.5.917 2.334.434 1.67.666 3.46.666 5.304 0 1.845-.232 3.635-.666 5.305-.216.834-.524 1.614-.917 2.334z"></path>
240
+ </svg>
241
+ </a>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
246
+ <p>© 2023 FlaviBot. All rights reserved.</p>
247
+ </div>
248
+ </div>
249
+ </footer>
250
+
251
+ <script>
252
+ // Mobile menu toggle
253
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
254
+ const mobileMenu = document.getElementById('mobile-menu');
255
+
256
+ mobileMenuButton.addEventListener('click', () => {
257
+ mobileMenu.classList.toggle('hidden');
258
+ });
259
+
260
+ // Animate stats counter
261
+ const stats = document.querySelectorAll('.stats-card div:first-child');
262
+ const targetValues = [10000, 50000, 150]; // Example target values
263
+
264
+ const animateCounters = () => {
265
+ stats.forEach((stat, index) => {
266
+ let current = 0;
267
+ const target = targetValues[index];
268
+ const increment = target / 50;
269
+
270
+ const timer = setInterval(() => {
271
+ current += increment;
272
+ if (current >= target) {
273
+ clearInterval(timer);
274
+ current = target;
275
+ }
276
+ stat.textContent = Math.floor(current).toLocaleString();
277
+ }, 20);
278
+ });
279
+ };
280
+
281
+ // Start animation when stats are in view
282
+ const observer = new IntersectionObserver((entries) => {
283
+ entries.forEach(entry => {
284
+ if (entry.isIntersecting) {
285
+ animateCounters();
286
+ observer.unobserve(entry.target);
287
+ }
288
+ });
289
+ }, { threshold: 0.5 });
290
+
291
+ const statsSection = document.querySelector('.stats-card');
292
+ if (statsSection) {
293
+ observer.observe(statsSection);
294
+ }
295
+ </script>
296
+ <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=AdminServerCEO/flavi-web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
297
+ </html>