Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ReadListen - Digital Books & Audiobooks</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .book-card:hover .book-actions { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .book-actions { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .audio-player { | |
| background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background-color: rgba(255,255,255,0.3); | |
| } | |
| .progress { | |
| height: 100%; | |
| background-color: white; | |
| width: 0%; | |
| } | |
| .waveform { | |
| height: 40px; | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| rgba(255,255,255,0.7), | |
| rgba(255,255,255,0.7) 2px, | |
| transparent 2px, | |
| transparent 4px | |
| ); | |
| background-size: 200% 100%; | |
| animation: wave 2s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: -20px 0; } | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #667eea; | |
| color: #667eea; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-book-open text-indigo-600 text-2xl"></i> | |
| <h1 class="text-xl font-bold text-gray-800">ReadListen</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Home</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">eBooks</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Audiobooks</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Bundles</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Authors</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600 relative"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <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> | |
| </button> | |
| <button class="md:hidden p-2 text-gray-600"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <button class="hidden md:block bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Sign In</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-4xl font-bold mb-4">Discover Your Next Favorite Story</h2> | |
| <p class="text-xl mb-6 opacity-90">Over 100,000 eBooks and audiobooks at your fingertips. Read or listen anytime, anywhere.</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <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"> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">Search</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <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"> | |
| <div class="absolute -bottom-4 -right-4 bg-white text-indigo-600 p-4 rounded-lg shadow-lg"> | |
| <div class="text-center"> | |
| <p class="text-sm">Starting at</p> | |
| <p class="text-2xl font-bold">$9.99</p> | |
| </div> | |
| </div> | |
| <div class="text-center p-6"> | |
| <i class="fas fa-headphones text-6xl mb-4 opacity-80"></i> | |
| <i class="fas fa-book text-6xl opacity-80"></i> | |
| <p class="mt-4 font-medium">eBook + Audiobook Bundle</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tabs Navigation --> | |
| <div class="bg-white border-b"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex overflow-x-auto"> | |
| <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap tab-active">Featured</button> | |
| <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Bestsellers</button> | |
| <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">New Releases</button> | |
| <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Deals</button> | |
| <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Fiction</button> | |
| <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Non-Fiction</button> | |
| <button class="tab-button px-6 py-4 text-gray-600 whitespace-nowrap">Self-Help</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Featured Section --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800">Featured Titles</h2> | |
| <a href="#" class="text-indigo-600 hover:underline">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> | |
| <!-- Book Card 1 --> | |
| <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <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"> | |
| <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex justify-between"> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Atomic Habits</h3> | |
| <p class="text-gray-600 text-sm mb-2">James Clear</p> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm ml-2">(4,782)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 line-through text-sm">$24.99</p> | |
| <p class="text-indigo-600 font-bold">$14.99</p> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">eBook</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Audiobook</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Book Card 2 --> | |
| <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <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"> | |
| <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex justify-between"> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">The Psychology of Money</h3> | |
| <p class="text-gray-600 text-sm mb-2">Morgan Housel</p> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm ml-2">(3,521)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 line-through text-sm">$19.99</p> | |
| <p class="text-indigo-600 font-bold">$12.99</p> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">eBook</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Book Card 3 --> | |
| <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <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"> | |
| <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex justify-between"> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">The Alchemist</h3> | |
| <p class="text-gray-600 text-sm mb-2">Paulo Coelho</p> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm ml-2">(8,942)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-indigo-600 font-bold">$9.99</p> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Audiobook</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Book Card 4 --> | |
| <div class="book-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <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"> | |
| <div class="book-actions absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex justify-between"> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Deep Work</h3> | |
| <p class="text-gray-600 text-sm mb-2">Cal Newport</p> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm ml-2">(2,415)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 line-through text-sm">$29.99</p> | |
| <p class="text-indigo-600 font-bold">$18.99</p> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">eBook</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Audiobook</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Audiobook Demo Section --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800">Listen to a Sample</h2> | |
| <a href="#" class="text-indigo-600 hover:underline">More Samples</a> | |
| </div> | |
| <div class="audio-player rounded-xl p-6 text-white shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <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"> | |
| <div> | |
| <h3 class="font-bold">The Alchemist</h3> | |
| <p class="text-sm opacity-80">Paulo Coelho • Sample</p> | |
| </div> | |
| </div> | |
| <div class="waveform mb-4 rounded-md"></div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm">0:45</span> | |
| <div class="flex space-x-4"> | |
| <button class="text-white hover:text-gray-200"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 p-3 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="text-white hover:text-gray-200"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| </div> | |
| <span class="text-sm">3:12</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-8">Browse Categories</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="bg-indigo-50 rounded-lg p-6 hover:bg-indigo-100 transition flex flex-col items-center"> | |
| <i class="fas fa-brain text-indigo-600 text-3xl mb-3"></i> | |
| <h3 class="font-medium text-gray-800">Self-Help</h3> | |
| <p class="text-sm text-gray-500">1,240 titles</p> | |
| </a> | |
| <a href="#" class="bg-blue-50 rounded-lg p-6 hover:bg-blue-100 transition flex flex-col items-center"> | |
| <i class="fas fa-chart-line text-blue-600 text-3xl mb-3"></i> | |
| <h3 class="font-medium text-gray-800">Business</h3> | |
| <p class="text-sm text-gray-500">890 titles</p> | |
| </a> | |
| <a href="#" class="bg-purple-50 rounded-lg p-6 hover:bg-purple-100 transition flex flex-col items-center"> | |
| <i class="fas fa-heart text-purple-600 text-3xl mb-3"></i> | |
| <h3 class="font-medium text-gray-800">Romance</h3> | |
| <p class="text-sm text-gray-500">2,150 titles</p> | |
| </a> | |
| <a href="#" class="bg-green-50 rounded-lg p-6 hover:bg-green-100 transition flex flex-col items-center"> | |
| <i class="fas fa-robot text-green-600 text-3xl mb-3"></i> | |
| <h3 class="font-medium text-gray-800">Sci-Fi</h3> | |
| <p class="text-sm text-gray-500">1,780 titles</p> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Bundle Deal Section --> | |
| <section class="mb-16 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-8 text-white"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h2 class="text-3xl font-bold mb-4">Get More for Less</h2> | |
| <p class="text-lg mb-6 opacity-90">Bundle eBook + Audiobook and save up to 40% on select titles.</p> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">Shop Bundles</button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <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"> | |
| <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"> | |
| <div class="absolute -bottom-4 -right-4 bg-white text-indigo-600 p-3 rounded-full shadow-xl"> | |
| <i class="fas fa-percentage text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-16"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-8">What Our Readers Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm">2 days ago</span> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-gray-500 text-sm">Verified Buyer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm">1 week ago</span> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-medium">Michael Chen</p> | |
| <p class="text-gray-500 text-sm">Verified Buyer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm">3 weeks ago</span> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-medium">Emma Rodriguez</p> | |
| <p class="text-gray-500 text-sm">Verified Buyer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">ReadListen</h3> | |
| <p class="text-gray-400 mb-4">Your digital bookstore for eBooks and audiobooks. Read or listen anytime, anywhere.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Shop</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">eBooks</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Audiobooks</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Bundles</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Deals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">New Releases</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Subscribe to get updates on new releases and special offers.</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md text-gray-800 w-full focus:outline-none"> | |
| <button class="bg-indigo-600 px-4 py-2 rounded-r-md hover:bg-indigo-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 ReadListen. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu (hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden" id="mobileMenu"> | |
| <div class="bg-white h-full w-4/5 max-w-sm p-6 overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-book-open text-indigo-600 text-2xl"></i> | |
| <h1 class="text-xl font-bold text-gray-800">ReadListen</h1> | |
| </div> | |
| <button id="closeMenu" class="text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <nav class="space-y-4 mb-8"> | |
| <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Home</a> | |
| <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">eBooks</a> | |
| <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Audiobooks</a> | |
| <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Bundles</a> | |
| <a href="#" class="block text-gray-700 hover:text-indigo-600 py-2">Authors</a> | |
| </nav> | |
| <div class="space-y-4"> | |
| <button class="w-full bg-indigo-600 text-white px-4 py-3 rounded-md hover:bg-indigo-700 transition">Sign In</button> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shopping Cart Sidebar (hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden" id="cartSidebar"> | |
| <div class="bg-white h-full w-full md:w-1/3 lg:w-1/4 absolute right-0 p-6 overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Your Cart (3)</h2> | |
| <button id="closeCart" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Cart Items --> | |
| <div class="space-y-4 mb-6"> | |
| <!-- Cart Item 1 --> | |
| <div class="flex border-b pb-4"> | |
| <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"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Atomic Habits</h3> | |
| <p class="text-sm text-gray-600 mb-1">eBook</p> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-indigo-600 font-bold">$14.99</p> | |
| <div class="flex items-center border rounded"> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button> | |
| <span class="px-2">1</span> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cart Item 2 --> | |
| <div class="flex border-b pb-4"> | |
| <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"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">The Alchemist</h3> | |
| <p class="text-sm text-gray-600 mb-1">Audiobook</p> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-indigo-600 font-bold">$9.99</p> | |
| <div class="flex items-center border rounded"> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button> | |
| <span class="px-2">1</span> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cart Item 3 --> | |
| <div class="flex border-b pb-4"> | |
| <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"> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Deep Work</h3> | |
| <p class="text-sm text-gray-600 mb-1">Bundle</p> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-indigo-600 font-bold">$18.99</p> | |
| <div class="flex items-center border rounded"> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">-</button> | |
| <span class="px-2">1</span> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cart Summary --> | |
| <div class="border-t pt-4 mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Subtotal</span> | |
| <span class="font-medium">$43.97</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Discount</span> | |
| <span class="text-green-600">-$5.00</span> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-gray-600">Tax</span> | |
| <span class="font-medium">$2.64</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold"> | |
| <span>Total</span> | |
| <span>$41.61</span> | |
| </div> | |
| </div> | |
| <!-- Checkout Button --> | |
| <button class="w-full bg-indigo-600 text-white py-3 rounded-md hover:bg-indigo-700 transition mb-4"> | |
| Proceed to Checkout | |
| </button> | |
| <p class="text-center text-sm text-gray-600"> | |
| or <a href="#" class="text-indigo-600 hover:underline">continue shopping</a> | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| const closeMenu = document.getElementById('closeMenu'); | |
| document.querySelector('.md\\:hidden').addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| }); | |
| closeMenu.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| // Cart sidebar toggle | |
| const cartSidebar = document.getElementById('cartSidebar'); | |
| const closeCart = document.getElementById('closeCart'); | |
| document.querySelectorAll('.fa-shopping-cart').forEach(icon => { | |
| icon.closest('button').addEventListener('click', () => { | |
| cartSidebar.classList.remove('hidden'); | |
| }); | |
| }); | |
| closeCart.addEventListener('click', () => { | |
| cartSidebar.classList.add('hidden'); | |
| }); | |
| // Tab switching | |
| const tabs = document.querySelectorAll('.tab-button'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| tabs.forEach(t => t.classList.remove('tab-active')); | |
| tab.classList.add('tab-active'); | |
| }); | |
| }); | |
| // Simulate audio player progress | |
| const progressBar = document.querySelector('.progress'); | |
| let progress = 0; | |
| setInterval(() => { | |
| if (progress < 100) { | |
| progress += 0.5; | |
| progressBar.style.width = `${progress}%`; | |
| } | |
| }, 100); | |
| </script> | |
| <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> | |
| </html> |