Hugging Face's logo

Spaces:
RPNGC
/
bakthelma-e-books
Running

App Files Community
RPNGC commited on
Commit
0876516
·
verified ·
1 Parent(s): dba6aee

Designsand online e-BOOK and audio book for purchase - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +696 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bakthelma E Books
3
- emoji: 💻
4
- colorFrom: indigo
5
  colorTo: green
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: bakthelma-e-books
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: green
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,696 @@
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>ReadListen - Digital Books & Audiobooks</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
+ .book-card:hover .book-actions {
11
+ opacity: 1;
12
+ transform: translateY(0);
13
+ }
14
+ .book-actions {
15
+ transition: all 0.3s ease;
16
+ opacity: 0;
17
+ transform: translateY(10px);
18
+ }
19
+ .hero-gradient {
20
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ }
22
+ .audio-player {
23
+ background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
24
+ }
25
+ .progress-bar {
26
+ height: 4px;
27
+ background-color: rgba(255,255,255,0.3);
28
+ }
29
+ .progress {
30
+ height: 100%;
31
+ background-color: white;
32
+ width: 0%;
33
+ }
34
+ .waveform {
35
+ height: 40px;
36
+ background: repeating-linear-gradient(
37
+ 90deg,
38
+ rgba(255,255,255,0.7),
39
+ rgba(255,255,255,0.7) 2px,
40
+ transparent 2px,
41
+ transparent 4px
42
+ );
43
+ background-size: 200% 100%;
44
+ animation: wave 2s linear infinite;
45
+ }
46
+ @keyframes wave {
47
+ 0% { background-position: 0 0; }
48
+ 100% { background-position: -20px 0; }
49
+ }
50
+ .tab-active {
51
+ border-bottom: 3px solid #667eea;
52
+ color: #667eea;
53
+ font-weight: 600;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-50 font-sans">
58
+ <!-- Header -->
59
+ <header class="bg-white shadow-sm sticky top-0 z-50">
60
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
61
+ <div class="flex items-center space-x-2">
62
+ <i class="fas fa-book-open text-indigo-600 text-2xl"></i>
63
+ <h1 class="text-xl font-bold text-gray-800">ReadListen</h1>
64
+ </div>
65
+ <nav class="hidden md:flex space-x-8">
66
+ <a href="#" class="text-gray-700 hover:text-indigo-600">Home</a>
67
+ <a href="#" class="text-gray-700 hover:text-indigo-600">eBooks</a>
68
+ <a href="#" class="text-gray-700 hover:text-indigo-600">Audiobooks</a>
69
+ <a href="#" class="text-gray-700 hover:text-indigo-600">Bundles</a>
70
+ <a href="#" class="text-gray-700 hover:text-indigo-600">Authors</a>
71
+ </nav>
72
+ <div class="flex items-center space-x-4">
73
+ <button class="p-2 text-gray-600 hover:text-indigo-600">
74
+ <i class="fas fa-search"></i>
75
+ </button>
76
+ <button class="p-2 text-gray-600 hover:text-indigo-600 relative">
77
+ <i class="fas fa-shopping-cart"></i>
78
+ <span class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
79
+ </button>
80
+ <button class="md:hidden p-2 text-gray-600">
81
+ <i class="fas fa-bars"></i>
82
+ </button>
83
+ <button class="hidden md:block bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Sign In</button>
84
+ </div>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Hero Section -->
89
+ <section class="hero-gradient text-white py-16">
90
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
91
+ <div class="md:w-1/2 mb-8 md:mb-0">
92
+ <h2 class="text-4xl font-bold mb-4">Discover Your Next Favorite Story</h2>
93
+ <p class="text-xl mb-6 opacity-90">Over 100,000 eBooks and audiobooks at your fingertips. Read or listen anytime, anywhere.</p>
94
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
95
+ <input type="text" placeholder="Search by title, author or genre" class="flex-grow px-4 py-3 rounded-md text-gray-800 focus:outline-none">
96
+ <button class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">Search</button>
97
+ </div>
98
+ </div>
99
+ <div class="md:w-1/2 flex justify-center">
100
+ <div class="relative w-64 h-80 md:w-80 md:h-96 bg-white bg-opacity-10 rounded-lg shadow-xl flex items-center justify-center">
101
+ <div class="absolute -bottom-4 -right-4 bg-white text-indigo-600 p-4 rounded-lg shadow-lg">
102
+ <div class="text-center">
103
+ <p class="text-sm">Starting at</p>
104
+ <p class="text-2xl font-bold">$9.99</p>
105
+ </div>
106
+ </div>
107
+ <div class="text-center p-6">
108
+ <i class="fas fa-headphones text-6xl mb-4 opacity-80"></i>
109
+ <i class="fas fa-book text-6xl opacity-80"></i>
110
+ <p class="mt-4 font-medium">eBook + Audiobook Bundle</p>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Tabs Navigation -->
118
+ <div class="bg-white border-b">
119
+ <div class="container mx-auto px-4">
120
+ <div class="flex overflow-x-auto">
121
+ <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap tab-active">Featured</button>
122
+ <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Bestsellers</button>
123
+ <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">New Releases</button>
124
+ <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Deals</button>
125
+ <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Fiction</button>
126
+ <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Non-Fiction</button>
127
+ <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Self-Help</button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Main Content -->
133
+ <main class="container mx-auto px-4 py-12">
134
+ <!-- Featured Section -->
135
+ <section class="mb-16">
136
+ <div class="flex justify-between items-center mb-8">
137
+ <h2 class="text-2xl font-bold text-gray-800">Featured Titles</h2>
138
+ <a href="#" class="text-indigo-600 hover:underline">View All</a>
139
+ </div>
140
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
141
+ <!-- Book Card 1 -->
142
+ <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
143
+ <div class="relative">
144
+ <img src="https://m.media-amazon.com/images/I/71X1p4TGlxL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-full h-64 object-cover">
145
+ <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
146
+ <div class="flex justify-between">
147
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
148
+ <i class="fas fa-play"></i>
149
+ </button>
150
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
151
+ <i class="fas fa-shopping-cart"></i>
152
+ </button>
153
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
154
+ <i class="fas fa-heart"></i>
155
+ </button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ <div class="p-4">
160
+ <h3 class="font-bold text-lg mb-1">Atomic Habits</h3>
161
+ <p class="text-gray-600 text-sm mb-2">James Clear</p>
162
+ <div class="flex items-center mb-3">
163
+ <div class="flex text-yellow-400">
164
+ <i class="fas fa-star"></i>
165
+ <i class="fas fa-star"></i>
166
+ <i class="fas fa-star"></i>
167
+ <i class="fas fa-star"></i>
168
+ <i class="fas fa-star-half-alt"></i>
169
+ </div>
170
+ <span class="text-gray-500 text-sm ml-2">(4,782)</span>
171
+ </div>
172
+ <div class="flex justify-between items-center">
173
+ <div>
174
+ <p class="text-gray-500 line-through text-sm">$24.99</p>
175
+ <p class="text-indigo-600 font-bold">$14.99</p>
176
+ </div>
177
+ <div class="flex space-x-1">
178
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">eBook</span>
179
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Audiobook</span>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Book Card 2 -->
186
+ <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
187
+ <div class="relative">
188
+ <img src="https://m.media-amazon.com/images/I/81bsw6fnUiL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-full h-64 object-cover">
189
+ <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
190
+ <div class="flex justify-between">
191
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
192
+ <i class="fas fa-play"></i>
193
+ </button>
194
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
195
+ <i class="fas fa-shopping-cart"></i>
196
+ </button>
197
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
198
+ <i class="fas fa-heart"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="p-4">
204
+ <h3 class="font-bold text-lg mb-1">The Psychology of Money</h3>
205
+ <p class="text-gray-600 text-sm mb-2">Morgan Housel</p>
206
+ <div class="flex items-center mb-3">
207
+ <div class="flex text-yellow-400">
208
+ <i class="fas fa-star"></i>
209
+ <i class="fas fa-star"></i>
210
+ <i class="fas fa-star"></i>
211
+ <i class="fas fa-star"></i>
212
+ <i class="fas fa-star"></i>
213
+ </div>
214
+ <span class="text-gray-500 text-sm ml-2">(3,521)</span>
215
+ </div>
216
+ <div class="flex justify-between items-center">
217
+ <div>
218
+ <p class="text-gray-500 line-through text-sm">$19.99</p>
219
+ <p class="text-indigo-600 font-bold">$12.99</p>
220
+ </div>
221
+ <div class="flex space-x-1">
222
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">eBook</span>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Book Card 3 -->
229
+ <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
230
+ <div class="relative">
231
+ <img src="https://m.media-amazon.com/images/I/71aFt4+OTOL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-full h-64 object-cover">
232
+ <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
233
+ <div class="flex justify-between">
234
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
235
+ <i class="fas fa-play"></i>
236
+ </button>
237
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
238
+ <i class="fas fa-shopping-cart"></i>
239
+ </button>
240
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
241
+ <i class="fas fa-heart"></i>
242
+ </button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <div class="p-4">
247
+ <h3 class="font-bold text-lg mb-1">The Alchemist</h3>
248
+ <p class="text-gray-600 text-sm mb-2">Paulo Coelho</p>
249
+ <div class="flex items-center mb-3">
250
+ <div class="flex text-yellow-400">
251
+ <i class="fas fa-star"></i>
252
+ <i class="fas fa-star"></i>
253
+ <i class="fas fa-star"></i>
254
+ <i class="fas fa-star"></i>
255
+ <i class="far fa-star"></i>
256
+ </div>
257
+ <span class="text-gray-500 text-sm ml-2">(8,942)</span>
258
+ </div>
259
+ <div class="flex justify-between items-center">
260
+ <div>
261
+ <p class="text-indigo-600 font-bold">$9.99</p>
262
+ </div>
263
+ <div class="flex space-x-1">
264
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Audiobook</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Book Card 4 -->
271
+ <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
272
+ <div class="relative">
273
+ <img src="https://m.media-amazon.com/images/I/71XW0rlvwdL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-full h-64 object-cover">
274
+ <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
275
+ <div class="flex justify-between">
276
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
277
+ <i class="fas fa-play"></i>
278
+ </button>
279
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
280
+ <i class="fas fa-shopping-cart"></i>
281
+ </button>
282
+ <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100">
283
+ <i class="fas fa-heart"></i>
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="p-4">
289
+ <h3 class="font-bold text-lg mb-1">Deep Work</h3>
290
+ <p class="text-gray-600 text-sm mb-2">Cal Newport</p>
291
+ <div class="flex items-center mb-3">
292
+ <div class="flex text-yellow-400">
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ <i class="fas fa-star-half-alt"></i>
298
+ </div>
299
+ <span class="text-gray-500 text-sm ml-2">(2,415)</span>
300
+ </div>
301
+ <div class="flex justify-between items-center">
302
+ <div>
303
+ <p class="text-gray-500 line-through text-sm">$29.99</p>
304
+ <p class="text-indigo-600 font-bold">$18.99</p>
305
+ </div>
306
+ <div class="flex space-x-1">
307
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">eBook</span>
308
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Audiobook</span>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </section>
315
+
316
+ <!-- Audiobook Demo Section -->
317
+ <section class="mb-16">
318
+ <div class="flex justify-between items-center mb-8">
319
+ <h2 class="text-2xl font-bold text-gray-800">Listen to a Sample</h2>
320
+ <a href="#" class="text-indigo-600 hover:underline">More Samples</a>
321
+ </div>
322
+ <div class="audio-player rounded-xl p-6 text-white shadow-lg">
323
+ <div class="flex items-center mb-6">
324
+ <img src="https://m.media-amazon.com/images/I/71aFt4+OTOL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-16 h-16 rounded-md mr-4">
325
+ <div>
326
+ <h3 class="font-bold">The Alchemist</h3>
327
+ <p class="text-sm opacity-80">Paulo Coelho • Sample</p>
328
+ </div>
329
+ </div>
330
+ <div class="waveform mb-4 rounded-md"></div>
331
+ <div class="flex justify-between items-center">
332
+ <span class="text-sm">0:45</span>
333
+ <div class="flex space-x-4">
334
+ <button class="text-white hover:text-gray-200">
335
+ <i class="fas fa-step-backward"></i>
336
+ </button>
337
+ <button class="bg-white text-indigo-600 p-3 rounded-full hover:bg-gray-100">
338
+ <i class="fas fa-play"></i>
339
+ </button>
340
+ <button class="text-white hover:text-gray-200">
341
+ <i class="fas fa-step-forward"></i>
342
+ </button>
343
+ </div>
344
+ <span class="text-sm">3:12</span>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- Categories Section -->
350
+ <section class="mb-16">
351
+ <h2 class="text-2xl font-bold text-gray-800 mb-8">Browse Categories</h2>
352
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
353
+ <a href="#" class="bg-indigo-50 rounded-lg p-6 hover:bg-indigo-100 transition flex flex-col items-center">
354
+ <i class="fas fa-brain text-indigo-600 text-3xl mb-3"></i>
355
+ <h3 class="font-medium text-gray-800">Self-Help</h3>
356
+ <p class="text-sm text-gray-500">1,240 titles</p>
357
+ </a>
358
+ <a href="#" class="bg-blue-50 rounded-lg p-6 hover:bg-blue-100 transition flex flex-col items-center">
359
+ <i class="fas fa-chart-line text-blue-600 text-3xl mb-3"></i>
360
+ <h3 class="font-medium text-gray-800">Business</h3>
361
+ <p class="text-sm text-gray-500">890 titles</p>
362
+ </a>
363
+ <a href="#" class="bg-purple-50 rounded-lg p-6 hover:bg-purple-100 transition flex flex-col items-center">
364
+ <i class="fas fa-heart text-purple-600 text-3xl mb-3"></i>
365
+ <h3 class="font-medium text-gray-800">Romance</h3>
366
+ <p class="text-sm text-gray-500">2,150 titles</p>
367
+ </a>
368
+ <a href="#" class="bg-green-50 rounded-lg p-6 hover:bg-green-100 transition flex flex-col items-center">
369
+ <i class="fas fa-robot text-green-600 text-3xl mb-3"></i>
370
+ <h3 class="font-medium text-gray-800">Sci-Fi</h3>
371
+ <p class="text-sm text-gray-500">1,780 titles</p>
372
+ </a>
373
+ </div>
374
+ </section>
375
+
376
+ <!-- Bundle Deal Section -->
377
+ <section class="mb-16 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-8 text-white">
378
+ <div class="flex flex-col md:flex-row items-center">
379
+ <div class="md:w-1/2 mb-6 md:mb-0">
380
+ <h2 class="text-3xl font-bold mb-4">Get More for Less</h2>
381
+ <p class="text-lg mb-6 opacity-90">Bundle eBook + Audiobook and save up to 40% on select titles.</p>
382
+ <button class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">Shop Bundles</button>
383
+ </div>
384
+ <div class="md:w-1/2 flex justify-center">
385
+ <div class="relative">
386
+ <img src="https://m.media-amazon.com/images/I/71XW0rlvwdL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-40 h-56 rounded-lg shadow-lg transform rotate-6">
387
+ <img src="https://m.media-amazon.com/images/I/71aFt4+OTOL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-40 h-56 rounded-lg shadow-lg absolute top-4 left-20 transform -rotate-6">
388
+ <div class="absolute -bottom-4 -right-4 bg-white text-indigo-600 p-3 rounded-full shadow-xl">
389
+ <i class="fas fa-percentage text-2xl"></i>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- Testimonials -->
397
+ <section class="mb-16">
398
+ <h2 class="text-2xl font-bold text-gray-800 mb-8">What Our Readers Say</h2>
399
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
400
+ <div class="bg-white p-6 rounded-lg shadow-md">
401
+ <div class="flex items-center mb-4">
402
+ <div class="flex text-yellow-400 mr-2">
403
+ <i class="fas fa-star"></i>
404
+ <i class="fas fa-star"></i>
405
+ <i class="fas fa-star"></i>
406
+ <i class="fas fa-star"></i>
407
+ <i class="fas fa-star"></i>
408
+ </div>
409
+ <span class="text-gray-500 text-sm">2 days ago</span>
410
+ </div>
411
+ <p class="text-gray-700 mb-4">"The audiobook quality is exceptional. I listen during my commute and the narration brings the story to life."</p>
412
+ <div class="flex items-center">
413
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
414
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover">
415
+ </div>
416
+ <div>
417
+ <p class="font-medium">Sarah Johnson</p>
418
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ <div class="bg-white p-6 rounded-lg shadow-md">
423
+ <div class="flex items-center mb-4">
424
+ <div class="flex text-yellow-400 mr-2">
425
+ <i class="fas fa-star"></i>
426
+ <i class="fas fa-star"></i>
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ </div>
431
+ <span class="text-gray-500 text-sm">1 week ago</span>
432
+ </div>
433
+ <p class="text-gray-700 mb-4">"Love the bundle deals! Getting both formats at a discount is perfect for when I want to read or listen."</p>
434
+ <div class="flex items-center">
435
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
436
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover">
437
+ </div>
438
+ <div>
439
+ <p class="font-medium">Michael Chen</p>
440
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ <div class="bg-white p-6 rounded-lg shadow-md">
445
+ <div class="flex items-center mb-4">
446
+ <div class="flex text-yellow-400 mr-2">
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ <i class="far fa-star"></i>
452
+ </div>
453
+ <span class="text-gray-500 text-sm">3 weeks ago</span>
454
+ </div>
455
+ <p class="text-gray-700 mb-4">"The selection is amazing and the app makes reading on my tablet a breeze. Will definitely be buying more!"</p>
456
+ <div class="flex items-center">
457
+ <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
458
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-full h-full object-cover">
459
+ </div>
460
+ <div>
461
+ <p class="font-medium">Emma Rodriguez</p>
462
+ <p class="text-gray-500 text-sm">Verified Buyer</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+ </main>
469
+
470
+ <!-- Footer -->
471
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
472
+ <div class="container mx-auto px-4">
473
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
474
+ <div>
475
+ <h3 class="text-lg font-bold mb-4">ReadListen</h3>
476
+ <p class="text-gray-400 mb-4">Your digital bookstore for eBooks and audiobooks. Read or listen anytime, anywhere.</p>
477
+ <div class="flex space-x-4">
478
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
479
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
480
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
481
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a>
482
+ </div>
483
+ </div>
484
+ <div>
485
+ <h3 class="text-lg font-bold mb-4">Shop</h3>
486
+ <ul class="space-y-2">
487
+ <li><a href="#" class="text-gray-400 hover:text-white">eBooks</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-white">Audiobooks</a></li>
489
+ <li><a href="#" class="text-gray-400 hover:text-white">Bundles</a></li>
490
+ <li><a href="#" class="text-gray-400 hover:text-white">Deals</a></li>
491
+ <li><a href="#" class="text-gray-400 hover:text-white">New Releases</a></li>
492
+ </ul>
493
+ </div>
494
+ <div>
495
+ <h3 class="text-lg font-bold mb-4">Support</h3>
496
+ <ul class="space-y-2">
497
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
498
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
499
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
500
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li>
501
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li>
502
+ </ul>
503
+ </div>
504
+ <div>
505
+ <h3 class="text-lg font-bold mb-4">Newsletter</h3>
506
+ <p class="text-gray-400 mb-4">Subscribe to get updates on new releases and special offers.</p>
507
+ <div class="flex">
508
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md text-gray-800 w-full focus:outline-none">
509
+ <button class="bg-indigo-600 px-4 py-2 rounded-r-md hover:bg-indigo-700 transition">
510
+ <i class="fas fa-paper-plane"></i>
511
+ </button>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
516
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 ReadListen. All rights reserved.</p>
517
+ <div class="flex space-x-6">
518
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
519
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
520
+ <a href="#" class="text-gray-400 hover:text-white">Cookies</a>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </footer>
525
+
526
+ <!-- Mobile Menu (hidden by default) -->
527
+ <div class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden" id="mobileMenu">
528
+ <div class="bg-white h-full w-4/5 max-w-sm p-6 overflow-y-auto">
529
+ <div class="flex justify-between items-center mb-8">
530
+ <div class="flex items-center space-x-2">
531
+ <i class="fas fa-book-open text-indigo-600 text-2xl"></i>
532
+ <h1 class="text-xl font-bold text-gray-800">ReadListen</h1>
533
+ </div>
534
+ <button id="closeMenu" class="text-gray-600">
535
+ <i class="fas fa-times"></i>
536
+ </button>
537
+ </div>
538
+ <nav class="space-y-4 mb-8">
539
+ <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Home</a>
540
+ <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">eBooks</a>
541
+ <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Audiobooks</a>
542
+ <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Bundles</a>
543
+ <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Authors</a>
544
+ </nav>
545
+ <div class="space-y-4">
546
+ <button class="w-full bg-indigo-600 text-white px-4 py-3 rounded-md hover:bg-indigo-700 transition">Sign In</button>
547
+ <button class="w-full border border-gray-300 text-gray-700 px-4 py-3 rounded-md hover:bg-gray-100 transition">Create Account</button>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Shopping Cart Sidebar (hidden by default) -->
553
+ <div class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden" id="cartSidebar">
554
+ <div class="bg-white h-full w-full md:w-1/3 lg:w-1/4 absolute right-0 p-6 overflow-y-auto">
555
+ <div class="flex justify-between items-center mb-6">
556
+ <h2 class="text-xl font-bold">Your Cart (3)</h2>
557
+ <button id="closeCart" class="text-gray-600 hover:text-gray-800">
558
+ <i class="fas fa-times"></i>
559
+ </button>
560
+ </div>
561
+
562
+ <!-- Cart Items -->
563
+ <div class="space-y-4 mb-6">
564
+ <!-- Cart Item 1 -->
565
+ <div class="flex border-b pb-4">
566
+ <img src="https://m.media-amazon.com/images/I/71X1p4TGlxL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-16 h-16 object-cover rounded mr-4">
567
+ <div class="flex-1">
568
+ <h3 class="font-medium">Atomic Habits</h3>
569
+ <p class="text-sm text-gray-600 mb-1">eBook</p>
570
+ <div class="flex justify-between items-center">
571
+ <p class="text-indigo-600 font-bold">$14.99</p>
572
+ <div class="flex items-center border rounded">
573
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
574
+ <span class="px-2">1</span>
575
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+
581
+ <!-- Cart Item 2 -->
582
+ <div class="flex border-b pb-4">
583
+ <img src="https://m.media-amazon.com/images/I/71aFt4+OTOL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-16 h-16 object-cover rounded mr-4">
584
+ <div class="flex-1">
585
+ <h3 class="font-medium">The Alchemist</h3>
586
+ <p class="text-sm text-gray-600 mb-1">Audiobook</p>
587
+ <div class="flex justify-between items-center">
588
+ <p class="text-indigo-600 font-bold">$9.99</p>
589
+ <div class="flex items-center border rounded">
590
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
591
+ <span class="px-2">1</span>
592
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <!-- Cart Item 3 -->
599
+ <div class="flex border-b pb-4">
600
+ <img src="https://m.media-amazon.com/images/I/71XW0rlvwdL._AC_UF1000,1000_QL80_.jpg" alt="Book Cover" class="w-16 h-16 object-cover rounded mr-4">
601
+ <div class="flex-1">
602
+ <h3 class="font-medium">Deep Work</h3>
603
+ <p class="text-sm text-gray-600 mb-1">Bundle</p>
604
+ <div class="flex justify-between items-center">
605
+ <p class="text-indigo-600 font-bold">$18.99</p>
606
+ <div class="flex items-center border rounded">
607
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button>
608
+ <span class="px-2">1</span>
609
+ <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <!-- Cart Summary -->
617
+ <div class="border-t pt-4 mb-6">
618
+ <div class="flex justify-between mb-2">
619
+ <span class="text-gray-600">Subtotal</span>
620
+ <span class="font-medium">$43.97</span>
621
+ </div>
622
+ <div class="flex justify-between mb-2">
623
+ <span class="text-gray-600">Discount</span>
624
+ <span class="text-green-600">-$5.00</span>
625
+ </div>
626
+ <div class="flex justify-between mb-4">
627
+ <span class="text-gray-600">Tax</span>
628
+ <span class="font-medium">$2.64</span>
629
+ </div>
630
+ <div class="flex justify-between text-lg font-bold">
631
+ <span>Total</span>
632
+ <span>$41.61</span>
633
+ </div>
634
+ </div>
635
+
636
+ <!-- Checkout Button -->
637
+ <button class="w-full bg-indigo-600 text-white py-3 rounded-md hover:bg-indigo-700 transition mb-4">
638
+ Proceed to Checkout
639
+ </button>
640
+
641
+ <p class="text-center text-sm text-gray-600">
642
+ or <a href="#" class="text-indigo-600 hover:underline">continue shopping</a>
643
+ </p>
644
+ </div>
645
+ </div>
646
+
647
+ <script>
648
+ // Mobile menu toggle
649
+ const mobileMenu = document.getElementById('mobileMenu');
650
+ const closeMenu = document.getElementById('closeMenu');
651
+
652
+ document.querySelector('.md\\:hidden').addEventListener('click', () => {
653
+ mobileMenu.classList.remove('hidden');
654
+ });
655
+
656
+ closeMenu.addEventListener('click', () => {
657
+ mobileMenu.classList.add('hidden');
658
+ });
659
+
660
+ // Cart sidebar toggle
661
+ const cartSidebar = document.getElementById('cartSidebar');
662
+ const closeCart = document.getElementById('closeCart');
663
+
664
+ document.querySelectorAll('.fa-shopping-cart').forEach(icon => {
665
+ icon.closest('button').addEventListener('click', () => {
666
+ cartSidebar.classList.remove('hidden');
667
+ });
668
+ });
669
+
670
+ closeCart.addEventListener('click', () => {
671
+ cartSidebar.classList.add('hidden');
672
+ });
673
+
674
+ // Tab switching
675
+ const tabs = document.querySelectorAll('.tab-button');
676
+
677
+ tabs.forEach(tab => {
678
+ tab.addEventListener('click', () => {
679
+ tabs.forEach(t => t.classList.remove('tab-active'));
680
+ tab.classList.add('tab-active');
681
+ });
682
+ });
683
+
684
+ // Simulate audio player progress
685
+ const progressBar = document.querySelector('.progress');
686
+ let progress = 0;
687
+
688
+ setInterval(() => {
689
+ if (progress < 100) {
690
+ progress += 0.5;
691
+ progressBar.style.width = `${progress}%`;
692
+ }
693
+ }, 100);
694
+ </script>
695
+ <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=RPNGC/bakthelma-e-books" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
696
+ </html>