Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BookNap - Animated Tabs</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| background-color: #f8fafc; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Animated Tabs Section - Blinkist Style */ | |
| .animated-tabs-section { | |
| padding: 6rem 0; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| overflow: hidden; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .tabs-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| width: 100%; | |
| } | |
| .tabs-header { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .tabs-header h2 { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| color: #2d3748; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .tabs-header p { | |
| font-size: 1.2rem; | |
| color: #4a5568; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .tabs-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .tabs-nav { | |
| display: flex; | |
| background: white; | |
| border-radius: 50px; | |
| padding: 0.5rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tab-button { | |
| background: none; | |
| border: none; | |
| padding: 1rem 2rem; | |
| border-radius: 40px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: #4a5568; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| z-index: 2; | |
| white-space: nowrap; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .tab-button.active { | |
| color: white; | |
| } | |
| .tab-button i { | |
| font-size: 1.2rem; | |
| } | |
| .tab-slider { | |
| position: absolute; | |
| top: 0.5rem; | |
| left: 0.5rem; | |
| height: calc(100% - 1rem); | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 40px; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| z-index: 1; | |
| } | |
| .tabs-content { | |
| width: 100%; | |
| max-width: 1000px; | |
| position: relative; | |
| } | |
| .tab-panel { | |
| display: none; | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| .tab-panel.active { | |
| display: block; | |
| } | |
| .tab-panel-content { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 3rem; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tab-panel-content::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| /* Tab-specific styles */ | |
| .read-tab { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| } | |
| .read-content h3 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: #2d3748; | |
| margin-bottom: 1rem; | |
| } | |
| .read-content p { | |
| font-size: 1.1rem; | |
| color: #4a5568; | |
| line-height: 1.7; | |
| margin-bottom: 2rem; | |
| } | |
| .read-features { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .read-feature { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem; | |
| background: #f8fafc; | |
| border-radius: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .read-feature:hover { | |
| background: #e2e8f0; | |
| transform: translateX(10px); | |
| } | |
| .read-feature i { | |
| font-size: 1.5rem; | |
| color: #667eea; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: white; | |
| border-radius: 50%; | |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); | |
| } | |
| .read-feature-text h4 { | |
| font-weight: 600; | |
| color: #2d3748; | |
| margin-bottom: 0.25rem; | |
| } | |
| .read-feature-text p { | |
| font-size: 0.9rem; | |
| color: #4a5568; | |
| margin: 0; | |
| } | |
| .read-visual { | |
| position: relative; | |
| text-align: center; | |
| } | |
| .read-visual img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 15px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .listen-tab { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| } | |
| .listen-content h3 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: #2d3748; | |
| margin-bottom: 1rem; | |
| } | |
| .listen-content p { | |
| font-size: 1.1rem; | |
| color: #4a5568; | |
| line-height: 1.7; | |
| margin-bottom: 2rem; | |
| } | |
| .listen-features { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .listen-feature { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem; | |
| background: #f8fafc; | |
| border-radius: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .listen-feature:hover { | |
| background: #e2e8f0; | |
| transform: translateX(10px); | |
| } | |
| .listen-feature i { | |
| font-size: 1.5rem; | |
| color: #667eea; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: white; | |
| border-radius: 50%; | |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); | |
| } | |
| .listen-feature-text h4 { | |
| font-weight: 600; | |
| color: #2d3748; | |
| margin-bottom: 0.25rem; | |
| } | |
| .listen-feature-text p { | |
| font-size: 0.9rem; | |
| color: #4a5568; | |
| margin: 0; | |
| } | |
| .listen-visual { | |
| position: relative; | |
| text-align: center; | |
| } | |
| .listen-visual img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 15px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .learn-tab { | |
| text-align: center; | |
| } | |
| .learn-content h3 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: #2d3748; | |
| margin-bottom: 1.5rem; | |
| } | |
| .learn-content p { | |
| font-size: 1.2rem; | |
| color: #4a5568; | |
| line-height: 1.7; | |
| margin-bottom: 3rem; | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .learn-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .learn-card { | |
| background: #f8fafc; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .learn-card:hover { | |
| background: white; | |
| border-color: #667eea; | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .learn-card i { | |
| font-size: 3rem; | |
| color: #667eea; | |
| margin-bottom: 1rem; | |
| } | |
| .learn-card h4 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| color: #2d3748; | |
| margin-bottom: 1rem; | |
| } | |
| .learn-card p { | |
| font-size: 1rem; | |
| color: #4a5568; | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .tabs-header h2 { | |
| font-size: 2rem; | |
| } | |
| .tabs-nav { | |
| flex-direction: column; | |
| border-radius: 20px; | |
| padding: 0.25rem; | |
| } | |
| .tab-button { | |
| padding: 0.75rem 1.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .tab-slider { | |
| display: none; | |
| } | |
| .tab-button.active { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .read-tab, | |
| .listen-tab { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .tab-panel-content { | |
| padding: 2rem; | |
| } | |
| .learn-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .tabs-header h2 { | |
| font-size: 1.75rem; | |
| } | |
| .tabs-header p { | |
| font-size: 1rem; | |
| } | |
| .tab-panel-content { | |
| padding: 1.5rem; | |
| } | |
| .read-content h3, | |
| .listen-content h3 { | |
| font-size: 1.5rem; | |
| } | |
| .learn-content h3 { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="animated-tabs-section"> | |
| <div class="tabs-container"> | |
| <div class="tabs-header"> | |
| <h2>Bite-sized bestsellers</h2> | |
| <p>Get powerful ideas in minutes—not hours or days with our summaries of today's most transformative books.</p> | |
| </div> | |
| <div class="tabs-wrapper"> | |
| <div class="tabs-nav"> | |
| <div class="tab-slider"></div> | |
| <button class="tab-button active" data-tab="read"> | |
| <i class="fas fa-book-open"></i> | |
| Read | |
| </button> | |
| <button class="tab-button" data-tab="listen"> | |
| <i class="fas fa-headphones"></i> | |
| Listen | |
| </button> | |
| <button class="tab-button" data-tab="learn"> | |
| <i class="fas fa-graduation-cap"></i> | |
| Learn | |
| </button> | |
| </div> | |
| <div class="tabs-content"> | |
| <!-- Read Tab --> | |
| <div class="tab-panel active" id="read"> | |
| <div class="tab-panel-content"> | |
| <div class="read-tab"> | |
| <div class="read-content"> | |
| <h3>Read powerful insights</h3> | |
| <p>Transform your reading experience with concise, well-structured summaries that capture the essence of bestselling books. Perfect for busy professionals who want to stay ahead.</p> | |
| <div class="read-features"> | |
| <div class="read-feature"> | |
| <i class="fas fa-clock"></i> | |
| <div class="read-feature-text"> | |
| <h4>15-minute reads</h4> | |
| <p>Get the key insights in just 15 minutes</p> | |
| </div> | |
| </div> | |
| <div class="read-feature"> | |
| <i class="fas fa-mobile-alt"></i> | |
| <div class="read-feature-text"> | |
| <h4>Read anywhere</h4> | |
| <p>Sync across all your devices seamlessly</p> | |
| </div> | |
| </div> | |
| <div class="read-feature"> | |
| <i class="fas fa-bookmark"></i> | |
| <div class="read-feature-text"> | |
| <h4>Save highlights</h4> | |
| <p>Mark important passages for later review</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="read-visual"> | |
| <img src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Reading on mobile device"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Listen Tab --> | |
| <div class="tab-panel" id="listen"> | |
| <div class="tab-panel-content"> | |
| <div class="listen-tab"> | |
| <div class="listen-content"> | |
| <h3>Listen on the go</h3> | |
| <p>Turn your commute into a learning opportunity with our professionally narrated audio summaries. Perfect for multitaskers who want to absorb knowledge while staying active.</p> | |
| <div class="listen-features"> | |
| <div class="listen-feature"> | |
| <i class="fas fa-volume-up"></i> | |
| <div class="listen-feature-text"> | |
| <h4>Professional narration</h4> | |
| <p>Crystal clear audio with engaging voices</p> | |
| </div> | |
| </div> | |
| <div class="listen-feature"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| <div class="listen-feature-text"> | |
| <h4>Adjustable speed</h4> | |
| <p>Listen at your preferred pace</p> | |
| </div> | |
| </div> | |
| <div class="listen-feature"> | |
| <i class="fas fa-download"></i> | |
| <div class="listen-feature-text"> | |
| <h4>Offline listening</h4> | |
| <p>Download and listen without internet</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="listen-visual"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Listening to audio"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Learn Tab --> | |
| <div class="tab-panel" id="learn"> | |
| <div class="tab-panel-content"> | |
| <div class="learn-tab"> | |
| <div class="learn-content"> | |
| <h3>An expert guides you</h3> | |
| <p>Let a pro lead you through the most important concepts and apply what you learn with practical tools and actionable steps.</p> | |
| <div class="learn-grid"> | |
| <div class="learn-card"> | |
| <i class="fas fa-lightbulb"></i> | |
| <h4>Key Insights</h4> | |
| <p>Extract the most valuable lessons from each book with expert analysis and real-world applications.</p> | |
| </div> | |
| <div class="learn-card"> | |
| <i class="fas fa-tasks"></i> | |
| <h4>Action Plans</h4> | |
| <p>Turn knowledge into action with step-by-step implementation guides and practical exercises.</p> | |
| </div> | |
| <div class="learn-card"> | |
| <i class="fas fa-users"></i> | |
| <h4>Community</h4> | |
| <p>Join discussions with like-minded learners and share insights with our growing community.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Animated Tabs JavaScript | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| const tabPanels = document.querySelectorAll('.tab-panel'); | |
| const tabSlider = document.querySelector('.tab-slider'); | |
| // Set initial slider position | |
| const activeButton = document.querySelector('.tab-button.active'); | |
| if (activeButton && tabSlider) { | |
| tabSlider.style.width = activeButton.offsetWidth + 'px'; | |
| tabSlider.style.left = activeButton.offsetLeft + 'px'; | |
| } | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const targetTab = button.getAttribute('data-tab'); | |
| // Remove active class from all buttons and panels | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| tabPanels.forEach(panel => panel.classList.remove('active')); | |
| // Add active class to clicked button and target panel | |
| button.classList.add('active'); | |
| document.getElementById(targetTab).classList.add('active'); | |
| // Animate slider | |
| if (tabSlider) { | |
| tabSlider.style.width = button.offsetWidth + 'px'; | |
| tabSlider.style.left = button.offsetLeft + 'px'; | |
| } | |
| }); | |
| }); | |
| // Add hover effects for mobile | |
| if (window.innerWidth <= 768) { | |
| tabButtons.forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| if (!button.classList.contains('active')) { | |
| button.style.transform = 'scale(1.05)'; | |
| } | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |