Hugging Face's logo

Spaces:
eli2fyee
/
ye
Running

App Files Community
eli2fyee commited on
Commit
e1294b8
·
verified ·
1 Parent(s): 07f8307

Noo, make the mobile app as like a web app and I use a wrapper to make it into an apk, but make it not even seem like a web app make it fully mobile compatible - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +651 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ye
3
- emoji: 🏢
4
- colorFrom: gray
5
- colorTo: indigo
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: ye
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,651 @@
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, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
6
+ <meta name="apple-mobile-web-app-capable" content="yes">
7
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
+ <meta name="apple-mobile-web-app-title" content="AniManga Hub">
9
+ <meta name="mobile-web-app-capable" content="yes">
10
+ <meta name="theme-color" content="#0f0f1a">
11
+ <title>AniManga Hub - Stream Anime & Read Manga</title>
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
+ <style>
15
+ /* Safe area padding */
16
+ .safe-area-top {
17
+ padding-top: env(safe-area-inset-top);
18
+ }
19
+ .safe-area-bottom {
20
+ padding-bottom: env(safe-area-inset-bottom);
21
+ }
22
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
23
+
24
+ /* Mobile app-like styles */
25
+ html {
26
+ -webkit-tap-highlight-color: transparent;
27
+ -webkit-touch-callout: none;
28
+ -webkit-user-select: none;
29
+ overscroll-behavior: none;
30
+ height: 100%;
31
+ }
32
+
33
+ body {
34
+ height: 100%;
35
+ overflow-x: hidden;
36
+ }
37
+
38
+ body {
39
+ font-family: 'Poppins', sans-serif;
40
+ background-color: #0f0f1a;
41
+ color: #ffffff;
42
+ }
43
+
44
+ .hero-gradient {
45
+ background: linear-gradient(135deg, #6e45e2 0%, #89d4cf 100%);
46
+ }
47
+
48
+ .download-btn {
49
+ transition: all 0.3s ease;
50
+ box-shadow: 0 4px 15px rgba(110, 69, 226, 0.4);
51
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
52
+ }
53
+ button, [role="button"], a[href] {
54
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
55
+ }
56
+
57
+ .download-btn:hover {
58
+ transform: translateY(-3px);
59
+ box-shadow: 0 6px 20px rgba(110, 69, 226, 0.6);
60
+ }
61
+
62
+ .feature-card {
63
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
64
+ background: rgba(255, 255, 255, 0.05);
65
+ backdrop-filter: blur(10px);
66
+ border: 1px solid rgba(255, 255, 255, 0.1);
67
+ }
68
+
69
+ .feature-card:hover {
70
+ transform: translateY(-10px);
71
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
72
+ }
73
+
74
+ .screenshot {
75
+ border-radius: 12px;
76
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
77
+ transition: transform 0.3s ease;
78
+ }
79
+
80
+ .screenshot:hover {
81
+ transform: scale(1.03);
82
+ }
83
+
84
+ .nav-link {
85
+ position: relative;
86
+ }
87
+
88
+ .nav-link::after {
89
+ content: '';
90
+ position: absolute;
91
+ width: 0;
92
+ height: 2px;
93
+ bottom: -2px;
94
+ left: 0;
95
+ background-color: #6e45e2;
96
+ transition: width 0.3s ease;
97
+ }
98
+
99
+ .nav-link:hover::after {
100
+ width: 100%;
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <!-- Navigation -->
106
+ <nav class="fixed w-full z-50 bg-opacity-90 bg-gray-900 backdrop-filter backdrop-blur-lg safe-area-top">
107
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
108
+ <div class="flex justify-between items-center h-16">
109
+ <div class="flex items-center">
110
+ <div class="flex-shrink-0 flex items-center">
111
+ <i class="fas fa-dragon text-purple-500 text-2xl mr-2"></i>
112
+ <span class="text-white font-bold text-xl">AniManga Hub</span>
113
+ </div>
114
+ </div>
115
+ <div class="hidden md:block">
116
+ <div class="ml-10 flex items-baseline space-x-8">
117
+ <a href="#features" class="nav-link text-gray-300 hover:text-white px-3 py-2">Features</a>
118
+ <a href="#screenshots" class="nav-link text-gray-300 hover:text-white px-3 py-2">Screenshots</a>
119
+ <a href="#download" class="nav-link text-gray-300 hover:text-white px-3 py-2">Download</a>
120
+ <a href="#faq" class="nav-link text-gray-300 hover:text-white px-3 py-2">FAQ</a>
121
+ </div>
122
+ </div>
123
+ <div class="md:hidden">
124
+ <button id="menu-toggle" class="text-gray-300 hover:text-white focus:outline-none">
125
+ <i class="fas fa-bars text-xl"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Mobile menu -->
132
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-800">
133
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
134
+ <a href="#features" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-gray-700 rounded-md">Features</a>
135
+ <a href="#screenshots" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-gray-700 rounded-md">Screenshots</a>
136
+ <a href="#download" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-gray-700 rounded-md">Download</a>
137
+ <a href="#faq" class="block px-3 py-2 text-gray-300 hover:text-white hover:bg-gray-700 rounded-md">FAQ</a>
138
+ </div>
139
+ </div>
140
+ </nav>
141
+
142
+ <!-- Hero Section -->
143
+ <section class="hero-gradient pt-24 pb-20 md:pt-32 md:pb-28 safe-area-top">
144
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
145
+ <div class="md:flex md:items-center md:justify-between">
146
+ <div class="md:w-1/2 mb-10 md:mb-0">
147
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
148
+ Stream Anime. Read Manga. All in One App.
149
+ </h1>
150
+ <p class="text-lg md:text-xl text-gray-100 mb-8">
151
+ Unlimited access to thousands of anime episodes and manga chapters. High quality streaming, offline viewing, and personalized recommendations.
152
+ </p>
153
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
154
+ <a href="#download" class="download-btn bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-center">
155
+ <i class="fas fa-download mr-2"></i> Download APK
156
+ </a>
157
+ <a href="#features" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 text-white font-bold py-3 px-6 rounded-lg text-center">
158
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
159
+ </a>
160
+ </div>
161
+ <div class="mt-6 flex items-center">
162
+ <div class="flex -space-x-2">
163
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User 1">
164
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User 2">
165
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User 3">
166
+ </div>
167
+ <p class="ml-4 text-white">
168
+ <span class="font-bold">10,000+</span> happy users
169
+ </p>
170
+ </div>
171
+ </div>
172
+ <div class="md:w-1/2 flex justify-center">
173
+ <div class="relative">
174
+ <img src="https://via.placeholder.com/300x600" alt="App Mockup" class="h-auto max-h-[500px] rounded-xl shadow-2xl">
175
+ <div class="absolute -bottom-6 -left-6 bg-purple-600 rounded-lg p-3 shadow-lg">
176
+ <i class="fas fa-star text-yellow-300 text-xl"></i>
177
+ <span class="ml-1 text-white font-bold">4.9/5</span>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- Features Section -->
186
+ <section id="features" class="py-20 bg-gray-900">
187
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
188
+ <div class="text-center mb-16">
189
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Amazing Features</h2>
190
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
191
+ Everything you need for the ultimate anime and manga experience
192
+ </p>
193
+ </div>
194
+
195
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
196
+ <!-- Feature 1 -->
197
+ <div class="feature-card p-8 rounded-xl">
198
+ <div class="w-16 h-16 bg-purple-600 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
199
+ <i class="fas fa-play-circle text-purple-500 text-2xl"></i>
200
+ </div>
201
+ <h3 class="text-xl font-bold mb-3">HD Anime Streaming</h3>
202
+ <p class="text-gray-400">
203
+ Watch your favorite anime in high definition with multiple server options. No buffering, no lag.
204
+ </p>
205
+ </div>
206
+
207
+ <!-- Feature 2 -->
208
+ <div class="feature-card p-8 rounded-xl">
209
+ <div class="w-16 h-16 bg-blue-600 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
210
+ <i class="fas fa-book-open text-blue-500 text-2xl"></i>
211
+ </div>
212
+ <h3 class="text-xl font-bold mb-3">Manga Reader</h3>
213
+ <p class="text-gray-400">
214
+ Read thousands of manga titles with our optimized reader. Day/night mode and multiple reading styles.
215
+ </p>
216
+ </div>
217
+
218
+ <!-- Feature 3 -->
219
+ <div class="feature-card p-8 rounded-xl">
220
+ <div class="w-16 h-16 bg-green-600 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
221
+ <i class="fas fa-download text-green-500 text-2xl"></i>
222
+ </div>
223
+ <h3 class="text-xl font-bold mb-3">Offline Viewing</h3>
224
+ <p class="text-gray-400">
225
+ Download anime episodes and manga chapters to enjoy them without internet connection.
226
+ </p>
227
+ </div>
228
+
229
+ <!-- Feature 4 -->
230
+ <div class="feature-card p-8 rounded-xl">
231
+ <div class="w-16 h-16 bg-yellow-600 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
232
+ <i class="fas fa-bell text-yellow-500 text-2xl"></i>
233
+ </div>
234
+ <h3 class="text-xl font-bold mb-3">Notifications</h3>
235
+ <p class="text-gray-400">
236
+ Get instant notifications when new episodes or chapters of your favorite series are released.
237
+ </p>
238
+ </div>
239
+
240
+ <!-- Feature 5 -->
241
+ <div class="feature-card p-8 rounded-xl">
242
+ <div class="w-16 h-16 bg-red-600 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
243
+ <i class="fas fa-heart text-red-500 text-2xl"></i>
244
+ </div>
245
+ <h3 class="text-xl font-bold mb-3">Personalized Lists</h3>
246
+ <p class="text-gray-400">
247
+ Create custom lists for anime and manga. Track what you're watching, plan to watch, and completed.
248
+ </p>
249
+ </div>
250
+
251
+ <!-- Feature 6 -->
252
+ <div class="feature-card p-8 rounded-xl">
253
+ <div class="w-16 h-16 bg-pink-600 bg-opacity-20 rounded-lg flex items-center justify-center mb-6">
254
+ <i class="fas fa-robot text-pink-500 text-2xl"></i>
255
+ </div>
256
+ <h3 class="text-xl font-bold mb-3">AI Recommendations</h3>
257
+ <p class="text-gray-400">
258
+ Our smart recommendation system suggests new anime and manga based on your preferences.
259
+ </p>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- Screenshots Section -->
266
+ <section id="screenshots" class="py-20 bg-gray-800">
267
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
268
+ <div class="text-center mb-16">
269
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">App Screenshots</h2>
270
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
271
+ See how AniManga Hub looks on your device
272
+ </p>
273
+ </div>
274
+
275
+ <div class="relative">
276
+ <div class="flex overflow-x-auto pb-8 space-x-6 scrollbar-hide">
277
+ <img src="https://via.placeholder.com/250x500/6e45e2/ffffff?text=Home" alt="Home Screen" class="screenshot h-96">
278
+ <img src="https://via.placeholder.com/250x500/89d4cf/ffffff?text=Anime" alt="Anime Screen" class="screenshot h-96">
279
+ <img src="https://via.placeholder.com/250x500/6e45e2/ffffff?text=Player" alt="Player Screen" class="screenshot h-96">
280
+ <img src="https://via.placeholder.com/250x500/89d4cf/ffffff?text=Manga" alt="Manga Screen" class="screenshot h-96">
281
+ <img src="https://via.placeholder.com/250x500/6e45e2/ffffff?text=Reader" alt="Reader Screen" class="screenshot h-96">
282
+ <img src="https://via.placeholder.com/250x500/89d4cf/ffffff?text=Profile" alt="Profile Screen" class="screenshot h-96">
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+
288
+ <!-- Download Section -->
289
+ <section id="download" class="py-20 bg-gray-900">
290
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
291
+ <div class="md:flex md:items-center md:justify-between">
292
+ <div class="md:w-1/2 mb-10 md:mb-0">
293
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Download AniManga Hub</h2>
294
+ <p class="text-lg text-gray-400 mb-8">
295
+ Get the APK file and install it on your Android device. Join our community of anime and manga lovers today!
296
+ </p>
297
+
298
+ <div class="mb-8">
299
+ <h3 class="text-xl font-bold mb-3">How to install:</h3>
300
+ <ol class="list-decimal list-inside text-gray-400 space-y-2">
301
+ <li>Download the APK file below</li>
302
+ <li>Go to your device Settings > Security</li>
303
+ <li>Enable "Install unknown sources"</li>
304
+ <li>Open the downloaded APK file</li>
305
+ <li>Follow the installation instructions</li>
306
+ </ol>
307
+ </div>
308
+
309
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
310
+ <a href="#" class="download-btn bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-center">
311
+ <i class="fas fa-download mr-2"></i> Download APK (v1.2.0)
312
+ </a>
313
+ <a href="#" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 text-white font-bold py-3 px-6 rounded-lg text-center">
314
+ <i class="fas fa-qrcode mr-2"></i> Scan QR Code
315
+ </a>
316
+ </div>
317
+
318
+ <div class="mt-6 text-gray-400">
319
+ <p>File size: 28.5 MB | Android 7.0+ required</p>
320
+ </div>
321
+ </div>
322
+ <div class="md:w-1/2 flex justify-center">
323
+ <div class="relative">
324
+ <img src="https://via.placeholder.com/300x600" alt="Download Illustration" class="h-auto max-h-[500px] rounded-xl">
325
+ <div class="absolute -bottom-6 -right-6 bg-purple-600 rounded-lg p-4 shadow-lg">
326
+ <div class="text-center">
327
+ <div class="text-white font-bold mb-1">Scan to download</div>
328
+ <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://animangahub.com/download" alt="QR Code" class="w-24 h-24">
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- FAQ Section -->
338
+ <section id="faq" class="py-20 bg-gray-800">
339
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
340
+ <div class="text-center mb-16">
341
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
342
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
343
+ Find answers to common questions about AniManga Hub
344
+ </p>
345
+ </div>
346
+
347
+ <div class="space-y-6">
348
+ <!-- FAQ Item 1 -->
349
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl overflow-hidden">
350
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
351
+ <h3 class="text-lg font-bold">Is AniManga Hub free to use?</h3>
352
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
353
+ </button>
354
+ <div class="faq-content px-6 pb-6 hidden">
355
+ <p class="text-gray-400">
356
+ Yes! AniManga Hub is completely free to use. We offer all anime and manga content without any subscription fees.
357
+ We may introduce optional premium features in the future, but the core functionality will always remain free.
358
+ </p>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- FAQ Item 2 -->
363
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl overflow-hidden">
364
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
365
+ <h3 class="text-lg font-bold">Is it safe to install the APK?</h3>
366
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
367
+ </button>
368
+ <div class="faq-content px-6 pb-6 hidden">
369
+ <p class="text-gray-400">
370
+ Absolutely. Our APK is completely safe and free from malware. We don't collect any personal data beyond
371
+ what's necessary for the app to function. Always download from our official website to ensure you're getting
372
+ the legitimate version.
373
+ </p>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- FAQ Item 3 -->
378
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl overflow-hidden">
379
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
380
+ <h3 class="text-lg font-bold">How often is new content added?</h3>
381
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
382
+ </button>
383
+ <div class="faq-content px-6 pb-6 hidden">
384
+ <p class="text-gray-400">
385
+ We update our library daily with new anime episodes as they air in Japan and new manga chapters as they're
386
+ released. Popular series are usually available within hours of their official release.
387
+ </p>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- FAQ Item 4 -->
392
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl overflow-hidden">
393
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
394
+ <h3 class="text-lg font-bold">Can I request anime or manga to be added?</h3>
395
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
396
+ </button>
397
+ <div class="faq-content px-6 pb-6 hidden">
398
+ <p class="text-gray-400">
399
+ Yes! We welcome user requests. You can submit requests through the app's settings menu or via our Discord
400
+ community. While we can't guarantee every request will be fulfilled, we prioritize popular and trending series.
401
+ </p>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- FAQ Item 5 -->
406
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl overflow-hidden">
407
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
408
+ <h3 class="text-lg font-bold">Will there be an iOS version?</h3>
409
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
410
+ </button>
411
+ <div class="faq-content px-6 pb-6 hidden">
412
+ <p class="text-gray-400">
413
+ We're currently focused on perfecting the Android experience, but an iOS version is in our long-term plans.
414
+ In the meantime, iOS users can access our web version which offers similar functionality.
415
+ </p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- Testimonials Section -->
423
+ <section class="py-20 bg-gray-900">
424
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
425
+ <div class="text-center mb-16">
426
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Users Say</h2>
427
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
428
+ Don't just take our word for it. Here's what the community thinks.
429
+ </p>
430
+ </div>
431
+
432
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
433
+ <!-- Testimonial 1 -->
434
+ <div class="bg-gray-800 p-8 rounded-xl">
435
+ <div class="flex items-center mb-4">
436
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
437
+ <div>
438
+ <h4 class="font-bold">Sarah K.</h4>
439
+ <div class="flex text-yellow-400">
440
+ <i class="fas fa-star"></i>
441
+ <i class="fas fa-star"></i>
442
+ <i class="fas fa-star"></i>
443
+ <i class="fas fa-star"></i>
444
+ <i class="fas fa-star"></i>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ <p class="text-gray-400">
449
+ "I've tried many anime apps but AniManga Hub is by far the best. The interface is clean, streaming is smooth,
450
+ and I love having both anime and manga in one place. The download feature is a lifesaver for my commute!"
451
+ </p>
452
+ </div>
453
+
454
+ <!-- Testimonial 2 -->
455
+ <div class="bg-gray-800 p-8 rounded-xl">
456
+ <div class="flex items-center mb-4">
457
+ <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
458
+ <div>
459
+ <h4 class="font-bold">Michael T.</h4>
460
+ <div class="flex text-yellow-400">
461
+ <i class="fas fa-star"></i>
462
+ <i class="fas fa-star"></i>
463
+ <i class="fas fa-star"></i>
464
+ <i class="fas fa-star"></i>
465
+ <i class="fas fa-star"></i>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ <p class="text-gray-400">
470
+ "As a manga reader first, I appreciate the quality of the scans and the reader interface. The dark mode is
471
+ perfect for late-night reading. The anime section was a nice bonus that got me into several new shows!"
472
+ </p>
473
+ </div>
474
+
475
+ <!-- Testimonial 3 -->
476
+ <div class="bg-gray-800 p-8 rounded-xl">
477
+ <div class="flex items-center mb-4">
478
+ <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
479
+ <div>
480
+ <h4 class="font-bold">Jessica L.</h4>
481
+ <div class="flex text-yellow-400">
482
+ <i class="fas fa-star"></i>
483
+ <i class="fas fa-star"></i>
484
+ <i class="fas fa-star"></i>
485
+ <i class="fas fa-star"></i>
486
+ <i class="fas fa-star-half-alt"></i>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ <p class="text-gray-400">
491
+ "The recommendation system is scarily accurate. It suggested me anime I didn't know existed but ended up loving.
492
+ The only reason I didn't give 5 stars is because I wish the update notifications were more customizable."
493
+ </p>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </section>
498
+
499
+ <!-- CTA Section -->
500
+ <section class="py-16 hero-gradient">
501
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
502
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Anime & Manga Journey?</h2>
503
+ <p class="text-xl text-gray-100 mb-8">
504
+ Join thousands of fans enjoying unlimited anime and manga anytime, anywhere.
505
+ </p>
506
+ <a href="#download" class="inline-block download-btn bg-white text-purple-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-lg">
507
+ <i class="fas fa-download mr-2"></i> Download Now
508
+ </a>
509
+ </div>
510
+ </section>
511
+
512
+ <!-- Footer -->
513
+ <footer class="bg-gray-900 pt-16 pb-8 safe-area-bottom">
514
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
515
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
516
+ <div>
517
+ <div class="flex items-center mb-4">
518
+ <i class="fas fa-dragon text-purple-500 text-2xl mr-2"></i>
519
+ <span class="text-white font-bold text-xl">AniManga Hub</span>
520
+ </div>
521
+ <p class="text-gray-400 mb-4">
522
+ Your ultimate destination for anime streaming and manga reading on Android.
523
+ </p>
524
+ <div class="flex space-x-4">
525
+ <a href="#" class="text-gray-400 hover:text-white">
526
+ <i class="fab fa-twitter text-xl"></i>
527
+ </a>
528
+ <a href="#" class="text-gray-400 hover:text-white">
529
+ <i class="fab fa-discord text-xl"></i>
530
+ </a>
531
+ <a href="#" class="text-gray-400 hover:text-white">
532
+ <i class="fab fa-instagram text-xl"></i>
533
+ </a>
534
+ <a href="#" class="text-gray-400 hover:text-white">
535
+ <i class="fab fa-reddit text-xl"></i>
536
+ </a>
537
+ </div>
538
+ </div>
539
+
540
+ <div>
541
+ <h4 class="text-white font-bold text-lg mb-4">Navigation</h4>
542
+ <ul class="space-y-2">
543
+ <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li>
544
+ <li><a href="#screenshots" class="text-gray-400 hover:text-white">Screenshots</a></li>
545
+ <li><a href="#download" class="text-gray-400 hover:text-white">Download</a></li>
546
+ <li><a href="#faq" class="text-gray-400 hover:text-white">FAQ</a></li>
547
+ </ul>
548
+ </div>
549
+
550
+ <div>
551
+ <h4 class="text-white font-bold text-lg mb-4">Legal</h4>
552
+ <ul class="space-y-2">
553
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
554
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
555
+ <li><a href="#" class="text-gray-400 hover:text-white">DMCA</a></li>
556
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
557
+ </ul>
558
+ </div>
559
+
560
+ <div>
561
+ <h4 class="text-white font-bold text-lg mb-4">Newsletter</h4>
562
+ <p class="text-gray-400 mb-4">
563
+ Subscribe to get updates on new features and content.
564
+ </p>
565
+ <form class="flex">
566
+ <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500 w-full">
567
+ <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg">
568
+ <i class="fas fa-paper-plane"></i>
569
+ </button>
570
+ </form>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="border-t border-gray-800 pt-8">
575
+ <p class="text-gray-400 text-center">
576
+ &copy; 2023 AniManga Hub. All rights reserved. All anime and manga are trademarks of their respective owners.
577
+ </p>
578
+ </div>
579
+ </div>
580
+ </footer>
581
+
582
+ <script>
583
+ // Prevent bounce effect on iOS
584
+ document.addEventListener('touchmove', function(e) {
585
+ if (e.target.classList.contains('scrollable')) return;
586
+ e.preventDefault();
587
+ }, { passive: false });
588
+
589
+ // Hide address bar on mobile
590
+ window.addEventListener('load', function() {
591
+ setTimeout(function() {
592
+ window.scrollTo(0, 1);
593
+ }, 0);
594
+ });
595
+
596
+ // Mobile menu toggle
597
+ document.getElementById('menu-toggle').addEventListener('click', function() {
598
+ document.getElementById('mobile-menu').classList.toggle('hidden');
599
+ });
600
+
601
+ // FAQ toggle functionality
602
+ document.querySelectorAll('.faq-toggle').forEach(button => {
603
+ button.addEventListener('click', () => {
604
+ const content = button.nextElementSibling;
605
+ const icon = button.querySelector('i');
606
+
607
+ content.classList.toggle('hidden');
608
+ icon.classList.toggle('transform');
609
+ icon.classList.toggle('rotate-180');
610
+ });
611
+ });
612
+
613
+ // Smooth scrolling for anchor links
614
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
615
+ anchor.addEventListener('click', function(e) {
616
+ e.preventDefault();
617
+
618
+ const targetId = this.getAttribute('href');
619
+ if (targetId === '#') return;
620
+
621
+ const targetElement = document.querySelector(targetId);
622
+ if (targetElement) {
623
+ targetElement.scrollIntoView({
624
+ behavior: 'smooth'
625
+ });
626
+
627
+ // Close mobile menu if open
628
+ if (!document.getElementById('mobile-menu').classList.contains('hidden')) {
629
+ document.getElementById('mobile-menu').classList.add('hidden');
630
+ }
631
+ }
632
+ });
633
+ });
634
+
635
+ // Add animation class when elements come into view
636
+ const observer = new IntersectionObserver((entries) => {
637
+ entries.forEach(entry => {
638
+ if (entry.isIntersecting) {
639
+ entry.target.classList.add('animate-fadeIn');
640
+ }
641
+ });
642
+ }, {
643
+ threshold: 0.1
644
+ });
645
+
646
+ document.querySelectorAll('.feature-card, .screenshot, .testimonial').forEach(el => {
647
+ observer.observe(el);
648
+ });
649
+ </script>
650
+ <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=eli2fyee/ye" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
651
+ </html>