Upload 38 files

booknap project/.vscode/launch.json

@@ -0,0 +1,30 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Edge",
+            "request": "launch",
+            "type": "msedge",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "vscode-edge-devtools.debug",
+            "request": "attach",
+            "name": "Attach to Microsoft Edge and open the Edge DevTools",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        },
+
+      
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Open book.html",
+            "file": "/home/aakash/Documents/booknap project/book.html"
+        }
+    ]
+}

booknap project/DATASET_GUIDE.md

@@ -0,0 +1,327 @@
+# How to Use Datasets in Web Pages - Complete Guide
+
+## 🎯 **Overview**
+
+There are several ways to integrate datasets into web pages, each with different use cases and complexity levels.
+
+## 📊 **Method 1: Static Data (Simplest)**
+
+**Best for:** Small datasets, static content, simple applications
+
+### How it works:
+- Data is embedded directly in JavaScript
+- No server required
+- Works with static hosting (GitHub Pages, Netlify, etc.)
+
+### Example:
+```javascript
+const dataset = [
+    { title: "Article 1", content: "..." },
+    { title: "Article 2", content: "..." }
+];
+```
+
+### Files created:
+- `static-blog.html` - Complete example with embedded dataset
+
+### Pros:
+- ✅ No server needed
+- ✅ Fast loading
+- ✅ Simple to implement
+- ✅ Works offline
+
+### Cons:
+- ❌ Limited to small datasets
+- ❌ Data can't be updated without code changes
+- ❌ No real-time updates
+
+---
+
+## 📄 **Method 2: External JSON Files**
+
+**Best for:** Medium datasets, content that updates occasionally
+
+### How it works:
+- Data stored in separate JSON files
+- Loaded via `fetch()` API
+- Can be updated without changing code
+
+### Example:
+```javascript
+async function loadData() {
+    const response = await fetch('data/dataset.json');
+    const data = await response.json();
+    displayData(data);
+}
+```
+
+### Files created:
+- `data/news.json` - Sample dataset
+- `json-blog.html` - Complete example with JSON loading
+
+### Pros:
+- ✅ Separates data from code
+- ✅ Easy to update content
+- ✅ No server required
+- ✅ Good for static sites
+
+### Cons:
+- ❌ Limited by browser CORS policies
+- ❌ No real-time updates
+- ❌ File size limitations
+
+---
+
+## 🖥️ **Method 3: Backend API (Advanced)**
+
+**Best for:** Large datasets, real-time updates, complex applications
+
+### How it works:
+- Python/Node.js server processes data
+- REST API endpoints serve data
+- Can integrate with databases
+
+### Example:
+```python
+from flask import Flask, jsonify
+import pandas as pd
+
+app = Flask(__name__)
+
+@app.route('/api/data')
+def get_data():
+    df = pd.read_csv('dataset.csv')
+    return jsonify(df.to_dict('records'))
+```
+
+### Files created:
+- `app.py` - Flask backend with Kaggle dataset
+- `requirements.txt` - Python dependencies
+
+### Pros:
+- ✅ Handle large datasets
+- ✅ Real-time updates
+- ✅ Database integration
+- ✅ Data processing capabilities
+
+### Cons:
+- ❌ Requires server setup
+- ❌ More complex
+- ❌ Hosting costs
+
+---
+
+## 🔧 **Method 4: Database Integration**
+
+**Best for:** Production applications, user-generated content
+
+### Options:
+1. **SQLite** - Lightweight, file-based
+2. **PostgreSQL** - Full-featured, scalable
+3. **MongoDB** - NoSQL, flexible
+4. **Firebase** - Cloud-hosted, real-time
+
+### Example with SQLite:
+```python
+import sqlite3
+
+def get_articles():
+    conn = sqlite3.connect('blog.db')
+    cursor = conn.cursor()
+    cursor.execute('SELECT * FROM articles')
+    return cursor.fetchall()
+```
+
+---
+
+## 🚀 **Quick Start Guide**
+
+### For Beginners (Static Data):
+1. Open `static-blog.html`
+2. Replace the `newsDataset` array with your data
+3. Open in browser - that's it!
+
+### For Intermediate (JSON Files):
+1. Create your data in `data/your-data.json`
+2. Open `json-blog.html`
+3. Update the fetch path to your JSON file
+4. Open in browser
+
+### For Advanced (Backend):
+1. Install Python dependencies: `pip install -r requirements.txt`
+2. Set up Kaggle API (if using Kaggle datasets)
+3. Run: `python app.py`
+4. Open `http://localhost:5000`
+
+---
+
+## 📋 **Dataset Formats**
+
+### JSON (Recommended):
+```json
+{
+  "articles": [
+    {
+      "title": "Article Title",
+      "content": "Article content...",
+      "date": "2024-01-15",
+      "tags": ["tag1", "tag2"]
+    }
+  ]
+}
+```
+
+### CSV:
+```csv
+title,content,date,tags
+"Article 1","Content 1","2024-01-15","tag1,tag2"
+"Article 2","Content 2","2024-01-16","tag3"
+```
+
+### Excel:
+- Convert to CSV or JSON for web use
+- Use Python pandas for processing
+
+---
+
+## 🎨 **Integration Examples**
+
+### Search Functionality:
+```javascript
+function searchData(query) {
+    return dataset.filter(item => 
+        item.title.toLowerCase().includes(query.toLowerCase())
+    );
+}
+```
+
+### Filtering:
+```javascript
+function filterByCategory(category) {
+    return dataset.filter(item => item.category === category);
+}
+```
+
+### Sorting:
+```javascript
+function sortByDate() {
+    return dataset.sort((a, b) => new Date(b.date) - new Date(a.date));
+}
+```
+
+### Pagination:
+```javascript
+function getPage(page, itemsPerPage) {
+    const start = page * itemsPerPage;
+    return dataset.slice(start, start + itemsPerPage);
+}
+```
+
+---
+
+## 🔍 **Popular Dataset Sources**
+
+### Free Datasets:
+- **Kaggle** - `kagglehub.dataset_download("dataset-name")`
+- **GitHub** - Raw JSON/CSV files
+- **Open Data Portals** - Government data
+- **APIs** - News APIs, weather APIs, etc.
+
+### Creating Your Own:
+1. **Google Sheets** �� Export as CSV/JSON
+2. **Excel** → Save as CSV
+3. **Database** → Export queries
+4. **Web Scraping** → Collect data programmatically
+
+---
+
+## 🛠️ **Tools & Libraries**
+
+### Frontend:
+- **Vanilla JavaScript** - Built-in fetch API
+- **Axios** - HTTP client
+- **D3.js** - Data visualization
+- **Chart.js** - Charts and graphs
+
+### Backend:
+- **Flask** - Python web framework
+- **Express.js** - Node.js framework
+- **Pandas** - Data processing
+- **SQLAlchemy** - Database ORM
+
+---
+
+## 📱 **Mobile Considerations**
+
+### Responsive Design:
+```css
+@media (max-width: 768px) {
+    .blog-grid {
+        grid-template-columns: 1fr;
+    }
+}
+```
+
+### Performance:
+- Lazy loading for large datasets
+- Image optimization
+- Data caching
+- Progressive loading
+
+---
+
+## 🔒 **Security & Privacy**
+
+### Best Practices:
+- Validate all data inputs
+- Sanitize data before display
+- Use HTTPS for API calls
+- Implement rate limiting
+- Handle errors gracefully
+
+### CORS Issues:
+```python
+# Flask CORS setup
+from flask_cors import CORS
+app = Flask(__name__)
+CORS(app)
+```
+
+---
+
+## 📈 **Performance Tips**
+
+1. **Compress data** - Use gzip compression
+2. **Cache responses** - Store data locally
+3. **Lazy load** - Load data as needed
+4. **Pagination** - Load data in chunks
+5. **CDN** - Use content delivery networks
+
+---
+
+## 🎯 **Choose Your Method**
+
+| Method | Dataset Size | Complexity | Real-time | Hosting |
+|--------|-------------|------------|-----------|---------|
+| Static | < 1MB | Low | No | Static |
+| JSON | < 10MB | Low | No | Static |
+| API | Any | Medium | Yes | Server |
+| Database | Any | High | Yes | Server |
+
+---
+
+## 🚀 **Next Steps**
+
+1. **Start with static data** if you're new to web development
+2. **Move to JSON files** when you need more data
+3. **Add a backend** when you need real-time updates
+4. **Integrate a database** for production applications
+
+Remember: Start simple and scale up as needed!
+
+
+
+
+
+
+

booknap project/README.md

@@ -0,0 +1,134 @@
+# Booknap - Book Summary Platform
+
+A modern web application for accessing book summaries, with user authentication and a beautiful UI.
+
+## Features
+
+- **User Authentication**: Login and signup functionality
+- **Book Summaries**: Access to various book summaries and insights
+- **Responsive Design**: Modern, mobile-friendly interface
+- **Database Integration**: PostgreSQL backend with user management
+- **Blog System**: Integrated blog with dynamic content
+
+## Pages
+
+- **Home** (`books.html`): Main landing page with book summaries
+- **Login** (`login.html`): User authentication
+- **Signup** (`signup.html`): User registration
+- **Pricing** (`pricing.html`): Subscription plans
+- **Blog** (`blog.html`): Blog articles and insights
+
+## Setup Instructions
+
+### 1. Install Dependencies
+
+```bash
+pip install -r requirements.txt
+```
+
+### 2. Database Setup
+
+#### Option A: Using Python Scripts (Recommended)
+1. Set your database password:
+   ```bash
+   export DATABASE_URL="postgresql://postgres:YOUR_PASSWORD@db.ckrqyjfdifjbsuuofegd.supabase.co:5432/postgres"
+   ```
+2. Run the database setup script:
+   ```bash
+   python setup_database.py
+   ```
+
+#### Option B: Using psql Command
+1. Install PostgreSQL client: `sudo dnf install postgresql` (Fedora/RHEL)
+2. Run the schema:
+   ```bash
+   PGPASSWORD=YOUR_PASSWORD psql -h db.ckrqyjfdifjbsuuofegd.supabase.co -p 5432 -d postgres -U postgres -f database_schema.sql
+   ```
+
+**Note**: Replace `YOUR_PASSWORD` with your actual Supabase database password.
+
+### 3. Environment Variables
+
+Set your database connection string with your Supabase credentials:
+```bash
+export DATABASE_URL="postgresql://postgres:YOUR_SUPABASE_PASSWORD@db.ckrqyjfdifjbsuuofegd.supabase.co:5432/postgres"
+```
+
+**Important**: Replace `YOUR_SUPABASE_PASSWORD` with your actual Supabase database password.
+
+### 4. Run the Application
+
+```bash
+python app.py
+```
+
+The application will be available at `http://localhost:5000`
+
+## Database Schema
+
+The application uses a simple users table:
+- `id`: Primary key
+- `full_name`: User's full name
+- `email`: Unique email address
+- `password`: User password (should be hashed in production)
+- `created_at`: Account creation timestamp
+- `updated_at`: Last update timestamp
+
+## Security Notes
+
+⚠️ **Important**: This is a demo implementation. For production use:
+
+1. Hash passwords using bcrypt or similar
+2. Implement proper session management
+3. Add CSRF protection
+4. Use HTTPS
+5. Implement rate limiting
+6. Add input validation and sanitization
+
+## File Structure
+
+```
+├── app.py                 # Flask backend
+├── requirements.txt       # Python dependencies
+├── database_schema.sql    # Database setup
+├── setup_database.py      # Database setup script
+├── test_connection.py     # Database connection test
+├── books.html            # Home page
+├── login.html            # Login page
+├── signup.html           # Signup page
+├── pricing.html          # Pricing page
+├── blog.html             # Blog page
+├── static-blog.html      # Static blog demo
+├── community-section.html # Community section component
+└── styles.css            # Global styles
+```
+
+## API Endpoints
+
+- `POST /login` - User authentication
+- `POST /signup` - User registration
+- `GET /api/news` - News articles
+- `GET /api/business-leaders` - Business insights
+- `GET /api/dataset-info` - Dataset information
+
+## Development
+
+To run in development mode:
+```bash
+export FLASK_ENV=development
+python app.py
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Test thoroughly
+5. Submit a pull request
+
+## License
+
+This project is for educational purposes. Please ensure you have proper licenses for any content used.
+
+

booknap project/animated-tabs.css

@@ -0,0 +1,441 @@
+/* Animated Tabs CSS - Blinkist Style */
+
+/* Animated Tabs Section */
+.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;
+}
+
+/* Tab Navigation */
+.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;
+}
+
+/* Tab Content */
+.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;
+    }
+}
+

booknap project/animated-tabs.html

@@ -0,0 +1,658 @@
+<!DOCTYPE html>
+<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>
+

booknap project/animated-tabs.js

@@ -0,0 +1,143 @@
+// Animated Tabs JavaScript - Blinkist Style
+class AnimatedTabs {
+    constructor(container) {
+        this.container = container;
+        this.tabButtons = container.querySelectorAll('.tab-button');
+        this.tabPanels = container.querySelectorAll('.tab-panel');
+        this.tabSlider = container.querySelector('.tab-slider');
+        this.isAnimating = false;
+        
+        this.init();
+    }
+    
+    init() {
+        this.setInitialState();
+        this.bindEvents();
+        this.addResponsiveBehavior();
+    }
+    
+    setInitialState() {
+        // Set initial slider position
+        const activeButton = this.container.querySelector('.tab-button.active');
+        if (activeButton && this.tabSlider) {
+            this.updateSliderPosition(activeButton);
+        }
+        
+        // Ensure first tab is active if none are
+        if (!activeButton && this.tabButtons.length > 0) {
+            this.tabButtons[0].classList.add('active');
+            this.tabPanels[0].classList.add('active');
+            this.updateSliderPosition(this.tabButtons[0]);
+        }
+    }
+    
+    bindEvents() {
+        this.tabButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.switchTab(button);
+            });
+        });
+    }
+    
+    switchTab(activeButton) {
+        if (this.isAnimating) return;
+        
+        this.isAnimating = true;
+        const targetTab = activeButton.getAttribute('data-tab');
+        
+        // Remove active class from all buttons and panels
+        this.tabButtons.forEach(btn => btn.classList.remove('active'));
+        this.tabPanels.forEach(panel => panel.classList.remove('active'));
+        
+        // Add active class to clicked button and target panel
+        activeButton.classList.add('active');
+        const targetPanel = this.container.querySelector(`#${targetTab}`);
+        if (targetPanel) {
+            targetPanel.classList.add('active');
+        }
+        
+        // Animate slider
+        this.updateSliderPosition(activeButton);
+        
+        // Trigger custom event
+        this.container.dispatchEvent(new CustomEvent('tabChanged', {
+            detail: {
+                activeTab: targetTab,
+                activeButton: activeButton,
+                activePanel: targetPanel
+            }
+        }));
+        
+        // Reset animation flag after transition
+        setTimeout(() => {
+            this.isAnimating = false;
+        }, 400);
+    }
+    
+    updateSliderPosition(button) {
+        if (!this.tabSlider) return;
+        
+        const buttonRect = button.getBoundingClientRect();
+        const containerRect = this.container.getBoundingClientRect();
+        
+        this.tabSlider.style.width = button.offsetWidth + 'px';
+        this.tabSlider.style.left = (button.offsetLeft - this.container.offsetLeft) + 'px';
+    }
+    
+    addResponsiveBehavior() {
+        // Handle window resize
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                const activeButton = this.container.querySelector('.tab-button.active');
+                if (activeButton) {
+                    this.updateSliderPosition(activeButton);
+                }
+            }, 100);
+        });
+        
+        // Add hover effects for mobile
+        if (window.innerWidth <= 768) {
+            this.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)';
+                });
+            });
+        }
+    }
+    
+    // Public methods
+    switchToTab(tabId) {
+        const button = this.container.querySelector(`[data-tab="${tabId}"]`);
+        if (button) {
+            this.switchTab(button);
+        }
+    }
+    
+    getActiveTab() {
+        const activeButton = this.container.querySelector('.tab-button.active');
+        return activeButton ? activeButton.getAttribute('data-tab') : null;
+    }
+}
+
+// Auto-initialize tabs when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    const tabsContainers = document.querySelectorAll('.tabs-wrapper');
+    tabsContainers.forEach(container => {
+        new AnimatedTabs(container);
+    });
+});
+
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AnimatedTabs;
+}
+

booknap project/app.py

@@ -0,0 +1,237 @@
+from flask import Flask, jsonify, render_template, request
+from flask_cors import CORS
+from sqlalchemy import create_engine, text
+import kagglehub
+from kagglehub import KaggleDatasetAdapter
+import pandas as pd
+import os
+
+app = Flask(__name__)
+CORS(app)
+
+# Database configuration
+DATABASE_URL = os.environ.get(
+    "DATABASE_URL",
+    "postgresql://postgres:postgres@db.ckrqyjfdifjbsuuofegd.supabase.co:5432/postgres",
+)
+engine = create_engine(DATABASE_URL, pool_pre_ping=True)
+
+# Download the datasets
+@app.before_first_request
+def download_datasets():
+    try:
+        print("Downloading datasets...")
+        
+        # Download news dataset
+        news_path = kagglehub.dataset_download("therohk/global-news-week")
+        print("Path to news dataset files:", news_path)
+        
+        # Download business leaders dataset
+        business_path = kagglehub.dataset_download("beatafaron/wisdom-from-business-leaders-and-innovators")
+        print("Path to business leaders dataset files:", business_path)
+        
+        return {"news": news_path, "business": business_path}
+    except Exception as e:
+        print(f"Error downloading datasets: {e}")
+        return None
+
+@app.route('/')
+def home():
+    return render_template('business-leaders.html')
+
+@app.route('/blog')
+def blog():
+    return render_template('blog.html')
+
+@app.route('/login', methods=['POST'])
+def login():
+    try:
+        payload = request.get_json(silent=True) or request.form
+        email = (payload.get('email') or '').strip().lower()
+        password = payload.get('password') or ''
+        if not email or not password:
+            return jsonify({"error": "Email and password are required"}), 400
+
+        # Simple credentials check against users table
+        # Expected schema: users(id serial pk, email text unique, password text)
+        with engine.connect() as conn:
+            row = conn.execute(
+                text("SELECT id, email, password FROM users WHERE email = :email"),
+                {"email": email},
+            ).mappings().first()
+
+        if not row:
+            return jsonify({"error": "Invalid credentials"}), 401
+
+        # NOTE: For demo purposes comparing plaintext. In production, store hashed passwords and verify with bcrypt.
+        if password != row["password"]:
+            return jsonify({"error": "Invalid credentials"}), 401
+
+        return jsonify({"ok": True, "user": {"id": row["id"], "email": row["email"]}})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/signup', methods=['POST'])
+def signup():
+    try:
+        payload = request.get_json(silent=True) or request.form
+        full_name = (payload.get('fullName') or '').strip()
+        email = (payload.get('email') or '').strip().lower()
+        password = payload.get('password') or ''
+        
+        if not full_name or not email or not password:
+            return jsonify({"error": "Full name, email and password are required"}), 400
+
+        # Check if user already exists
+        with engine.connect() as conn:
+            existing_user = conn.execute(
+                text("SELECT id FROM users WHERE email = :email"),
+                {"email": email},
+            ).mappings().first()
+
+            if existing_user:
+                return jsonify({"error": "User with this email already exists"}), 409
+
+            # Insert new user
+            # Expected schema: users(id serial pk, full_name text, email text unique, password text)
+            result = conn.execute(
+                text("INSERT INTO users (full_name, email, password) VALUES (:full_name, :email, :password) RETURNING id"),
+                {"full_name": full_name, "email": email, "password": password},
+            )
+            
+            # Commit the transaction
+            conn.commit()
+            
+            user_id = result.fetchone()[0]
+            
+            return jsonify({
+                "message": "Account created successfully! Redirecting to login...",
+                "user": {"id": user_id, "full_name": full_name, "email": email}
+            }), 201
+            
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/news')
+def get_news():
+    try:
+        # Find the CSV file in the downloaded dataset
+        dataset_path = None
+        for root, dirs, files in os.walk('.'):
+            for file in files:
+                if file.endswith('.csv') and 'global-news' in root:
+                    dataset_path = os.path.join(root, file)
+                    break
+            if dataset_path:
+                break
+        
+        if dataset_path:
+            # Read the CSV file
+            df = pd.read_csv(dataset_path)
+            
+            # Convert to JSON format for the blog
+            news_data = []
+            for index, row in df.head(20).iterrows():  # Get first 20 articles
+                news_item = {
+                    'title': row.get('title', 'No title'),
+                    'description': row.get('description', 'No description'),
+                    'date': row.get('date', 'No date'),
+                    'source': row.get('source', 'Unknown source'),
+                    'category': row.get('category', 'General')
+                }
+                news_data.append(news_item)
+            
+            return jsonify(news_data)
+        else:
+            return jsonify({'error': 'News dataset file not found'})
+            
+    except Exception as e:
+        return jsonify({'error': str(e)})
+
+@app.route('/api/business-leaders')
+def get_business_leaders():
+    try:
+        # Load the business leaders dataset using kagglehub
+        df = kagglehub.load_dataset(
+            KaggleDatasetAdapter.PANDAS,
+            "beatafaron/wisdom-from-business-leaders-and-innovators",
+            "",  # Empty string for default file
+        )
+        
+        # Convert to JSON format
+        business_data = []
+        for index, row in df.head(20).iterrows():  # Get first 20 records
+            business_item = {
+                'id': index + 1,
+                'quote': row.get('quote', 'No quote available'),
+                'author': row.get('author', 'Unknown author'),
+                'category': row.get('category', 'General'),
+                'source': row.get('source', 'Unknown source'),
+                'year': row.get('year', 'Unknown year')
+            }
+            business_data.append(business_item)
+        
+        return jsonify(business_data)
+        
+    except Exception as e:
+        return jsonify({'error': str(e)})
+
+@app.route('/api/business-leaders/<int:record_id>')
+def get_business_leader(record_id):
+    try:
+        # Load the business leaders dataset
+        df = kagglehub.load_dataset(
+            KaggleDatasetAdapter.PANDAS,
+            "beatafaron/wisdom-from-business-leaders-and-innovators",
+            "",
+        )
+        
+        if record_id < len(df):
+            row = df.iloc[record_id]
+            business_item = {
+                'id': record_id + 1,
+                'quote': row.get('quote', 'No quote available'),
+                'author': row.get('author', 'Unknown author'),
+                'category': row.get('category', 'General'),
+                'source': row.get('source', 'Unknown source'),
+                'year': row.get('year', 'Unknown year')
+            }
+            return jsonify(business_item)
+        else:
+            return jsonify({'error': 'Record not found'})
+            
+    except Exception as e:
+        return jsonify({'error': str(e)})
+
+@app.route('/api/dataset-info')
+def dataset_info():
+    try:
+        # Get info about both datasets
+        news_path = kagglehub.dataset_download("therohk/global-news-week")
+        business_path = kagglehub.dataset_download("beatafaron/wisdom-from-business-leaders-and-innovators")
+        
+        return jsonify({
+            'status': 'success',
+            'datasets': {
+                'news': {
+                    'name': 'Global News Week',
+                    'path': str(news_path),
+                    'description': 'Latest news articles from various sources'
+                },
+                'business_leaders': {
+                    'name': 'Wisdom from Business Leaders and Innovators',
+                    'path': str(business_path),
+                    'description': 'Inspirational quotes and wisdom from business leaders'
+                }
+            },
+            'message': 'All datasets downloaded successfully'
+        })
+    except Exception as e:
+        return jsonify({
+            'status': 'error',
+            'error': str(e)
+        })
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)
+

booknap project/assets/audio/7-habits-summary.mp3

@@ -0,0 +1 @@
+Placeholder audio file

booknap project/assets/audio/atomic-habits-summary.mp3

@@ -0,0 +1 @@
+Placeholder audio file

booknap project/assets/audio/rich-dad-poor-dad-summary.mp3

@@ -0,0 +1 @@
+Placeholder audio file

booknap project/assets/audio/thinking-fast-slow-summary.mp3

@@ -0,0 +1 @@
+Placeholder audio file

booknap project/blog.html

@@ -0,0 +1,612 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Blog - booknap</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+  <style>
+    :root {
+      --bg: #0f172a;
+      --card: #0b1223;
+      --muted: #94a3b8;
+      --text: #e2e8f0;
+      --brand: #3b82f6;
+      --brand-2: #6366f1;
+    }
+    body {
+      background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124);
+      min-height: 100vh;
+      color: var(--text);
+    }
+    /* Match pricing header/nav styling */
+    .header { position: sticky; top: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(7,10,20,0.55); z-index: 20; box-shadow: none; }
+    .nav { border-bottom: 1px solid rgba(255,255,255,0.06); }
+    .nav-logo i { color: var(--brand); }
+    .nav-link { color: var(--muted); text-decoration: none; font-weight: 600; }
+    .nav-link:hover, .nav-link.active { color: var(--text); }
+    
+    /* Navigation Login Button */
+    .nav-container {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+    }
+    
+    .nav-menu {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+      margin-left: auto;
+      list-style: none;
+    }
+    
+    .nav-menu li {
+      position: relative;
+    }
+    
+    .nav-login {
+      margin-left: 0;
+    }
+    
+    .login-btn {
+      background: linear-gradient(90deg, #3b82f6, #6366f1);
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: background-color 0.2s ease;
+      display: inline-block;
+    }
+    
+    .login-btn:hover {
+      background: linear-gradient(90deg, #2563eb, #4f46e5);
+    }
+    
+    .signup-btn {
+      background: transparent;
+      color: var(--text);
+      padding: 0.75rem 1.5rem;
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.2s ease;
+      display: inline-block;
+      margin-left: 0.5rem;
+    }
+    
+    .signup-btn:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+    
+    /* Search Bar Styles */
+    .search-container {
+      margin-left: 0.5rem;
+    }
+    
+    .search-bar {
+      position: relative;
+      display: flex;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 25px;
+      padding: 0.5rem 1rem;
+      min-width: 300px;
+      transition: all 0.3s ease;
+    }
+    
+    .search-bar:focus-within {
+      background: rgba(0, 0, 0, 0.4);
+      border-color: rgba(59, 130, 246, 0.5);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+    
+    .search-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.75rem;
+      font-size: 0.9rem;
+    }
+    
+    .search-input {
+      background: transparent;
+      border: none;
+      color: var(--text);
+      font-size: 0.9rem;
+      font-weight: 500;
+      width: 100%;
+      outline: none;
+    }
+    
+    .search-input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+    
+    /* Dropdown Menu Styles */
+    .dropdown {
+      position: relative;
+    }
+    
+    .dropdown-toggle {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    
+    .dropdown-toggle i {
+      font-size: 0.8rem;
+      transition: transform 0.2s ease;
+    }
+    
+    .dropdown.active .dropdown-toggle i {
+      transform: rotate(180deg);
+    }
+    
+    .dropdown-menu {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(15, 23, 42, 0.95);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 12px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      min-width: 500px;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+      z-index: 1000;
+      margin-top: 1rem;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+    
+    .dropdown.active .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+    }
+    
+    .dropdown-content {
+      display: flex;
+      padding: 2rem;
+    }
+    
+    .dropdown-section {
+      flex: 1;
+    }
+    
+    .dropdown-section h4 {
+      color: #e2e8f0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin: 0 0 1rem 0;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    
+    .dropdown-section ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    
+    .dropdown-section li {
+      margin-bottom: 0.75rem;
+    }
+    
+    .dropdown-section a {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      color: #94a3b8;
+      text-decoration: none;
+      font-size: 0.875rem;
+      padding: 0.5rem;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+    }
+    
+    .dropdown-section a:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e2e8f0;
+    }
+    
+    .dropdown-section i {
+      font-size: 1rem;
+      width: 20px;
+      text-align: center;
+    }
+    
+    .dropdown-divider {
+      width: 1px;
+      background: rgba(255, 255, 255, 0.2);
+      margin: 0 1.5rem;
+    }
+    
+    .all-categories {
+      color: #60a5fa !important;
+      font-weight: 600;
+      margin-top: 0.5rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    
+    .all-categories:hover {
+      color: #93c5fd !important;
+    }
+    
+    /* Mobile Navigation */
+    .nav-toggle {
+      display: none;
+      flex-direction: column;
+      cursor: pointer;
+      gap: 4px;
+    }
+    
+    .nav-toggle span {
+      width: 25px;
+      height: 3px;
+      background: var(--text);
+      border-radius: 2px;
+      transition: all 0.3s ease;
+    }
+    
+    @media (max-width: 768px) {
+      .nav-menu {
+        display: none;
+      }
+      
+      .nav-menu.active {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: rgba(15, 23, 42, 0.95);
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 1rem;
+      }
+      
+      .nav-toggle {
+        display: flex;
+      }
+      
+      .search-container {
+        display: none;
+      }
+    }
+
+    /* Blog Page Styles */
+    .blog-hero {
+      padding: 4rem 0 3rem;
+      text-align: center;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .blog-hero h1 {
+      font-size: 3rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      background: linear-gradient(135deg, #3b82f6, #6366f1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .blog-hero p {
+      font-size: 1.25rem;
+      color: var(--muted);
+      line-height: 1.6;
+      margin-bottom: 2rem;
+    }
+
+    .blog-grid {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 1rem 4rem;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      gap: 2rem;
+    }
+
+    .blog-card {
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 16px;
+      overflow: hidden;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .blog-card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    }
+
+    .blog-card-image {
+      width: 100%;
+      height: 200px;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+    }
+
+    .blog-card-content {
+      padding: 1.5rem;
+    }
+
+    .blog-card-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: var(--text);
+      line-height: 1.4;
+    }
+
+    .blog-card-date {
+      color: var(--muted);
+      font-size: 0.875rem;
+      margin-bottom: 1rem;
+    }
+
+    .blog-card-link {
+      color: #8b5cf6;
+      text-decoration: none;
+      font-weight: 600;
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      transition: color 0.3s ease;
+    }
+    .blog-card-link:hover {
+      color: #a78bfa;
+    }
+
+    .pagination {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 3rem 0;
+    }
+
+    .pagination-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: var(--text);
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      text-decoration: none;
+      transition: all 0.3s ease;
+    }
+    .pagination-btn:hover {
+      background: var(--brand);
+      border-color: var(--brand);
+    }
+    .pagination-btn.active {
+      background: var(--brand);
+      border-color: var(--brand);
+    }
+
+    @media (max-width: 768px) {
+      .blog-hero h1 {
+        font-size: 2rem;
+      }
+      .blog-grid {
+        grid-template-columns: 1fr;
+        padding: 0 1rem 2rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <nav class="nav">
+      <div class="nav-container">
+        <div class="nav-logo">
+          <i class="fas fa-book-open"></i>
+          <span>booknap</span>
+        </div>
+        <div class="search-container">
+          <div class="search-bar">
+            <i class="fas fa-search search-icon"></i>
+            <input type="text" placeholder="Find a book..." class="search-input">
+          </div>
+        </div>
+        <ul class="nav-menu">
+          <li><a href="books.html" class="nav-link">Home</a></li>
+          <li class="dropdown">
+            <a href="#" class="nav-link dropdown-toggle">Book Summaries <i class="fas fa-chevron-down"></i></a>
+            <div class="dropdown-menu">
+              <div class="dropdown-content">
+                <div class="dropdown-section">
+                  <h4>Browse by type</h4>
+                  <ul>
+                    <li><a href="#"><i class="fas fa-book-open" style="color: #10b981;"></i> Text Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-headphones" style="color: #3b82f6;"></i> Audio Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-play-circle" style="color: #8b5cf6;"></i> Video Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-file-pdf" style="color: #f59e0b;"></i> PDF Downloads</a></li>
+                    <li><a href="#"><i class="fas fa-mobile-alt" style="color: #06b6d4;"></i> Mobile App</a></li>
+                  </ul>
+                </div>
+                <div class="dropdown-divider"></div>
+                <div class="dropdown-section">
+                  <h4>Browse by topic</h4>
+                  <ul>
+                    <li><a href="#"><i class="fas fa-brain" style="color: #f59e0b;"></i> Psychology</a></li>
+                    <li><a href="#"><i class="fas fa-chart-line" style="color: #10b981;"></i> Business</a></li>
+                    <li><a href="#"><i class="fas fa-heart" style="color: #ef4444;"></i> Self-Help</a></li>
+                    <li><a href="#"><i class="fas fa-graduation-cap" style="color: #8b5cf6;"></i> Education</a></li>
+                    <li><a href="#"><i class="fas fa-lightbulb" style="color: #06b6d4;"></i> Innovation</a></li>
+                  </ul>
+                  <a href="#" class="all-categories">all categories <i class="fas fa-arrow-right"></i></a>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li><a href="pricing.html" class="nav-link">Pricing</a></li>
+          <li><a href="blog.html" class="nav-link active">Blog</a></li>
+        </ul>
+        <div class="nav-login">
+          <a href="login.html" class="login-btn">Login</a>
+          <a href="signup.html" class="signup-btn">Sign Up</a>
+        </div>
+        <div class="nav-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <section class="blog-hero">
+      <h1>Read Our Blog</h1>
+      <p>Weekly articles with insights into the latest book summaries and reading strategies. Our blog takes the key concepts from popular books and lays out practical next steps, so you can learn and apply knowledge in meaningful ways.</p>
+    </section>
+
+    <div class="blog-grid">
+      <!-- Blog Card 1 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">How to Access Your Inner Strength Through Reading</h3>
+          <p class="blog-card-date">June 17, 2025</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 2 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">Meditation is the Key to a Flourishing Life</h3>
+          <p class="blog-card-date">June 11, 2025</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 3 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">Women's Leadership in Literature Isn't Optional</h3>
+          <p class="blog-card-date">June 5, 2025</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 4 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">Modeling Success for the Next Generation</h3>
+          <p class="blog-card-date">May 14, 2025</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 5 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2011&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">How to Honor Tradition and Innovation</h3>
+          <p class="blog-card-date">May 6, 2025</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 6 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">Slow Down to Hear Your Inner Voice</h3>
+          <p class="blog-card-date">April 30, 2025</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 7 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">You Are Under Construction</h3>
+          <p class="blog-card-date">June 10, 2024</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 8 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">Knowledge at the Center</h3>
+          <p class="blog-card-date">June 3, 2024</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+
+      <!-- Blog Card 9 -->
+      <article class="blog-card">
+        <div class="blog-card-image" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80');"></div>
+        <div class="blog-card-content">
+          <h3 class="blog-card-title">Let's Grow Together</h3>
+          <p class="blog-card-date">May 27, 2024</p>
+          <a href="#" class="blog-card-link">VIEW THESE RESOURCES</a>
+        </div>
+      </article>
+    </div>
+
+    <!-- Pagination -->
+    <div class="pagination">
+      <a href="#" class="pagination-btn active">1</a>
+      <a href="#" class="pagination-btn">2</a>
+      <a href="#" class="pagination-btn">3</a>
+      <span style="color: var(--muted); margin: 0 0.5rem;">…</span>
+      <a href="#" class="pagination-btn">16</a>
+      <a href="#" class="pagination-btn">Next »</a>
+    </div>
+  </main>
+
+  <script>
+    // Simple navigation toggle for mobile
+    document.querySelector('.nav-toggle').addEventListener('click', function() {
+      document.querySelector('.nav-menu').classList.toggle('active');
+    });
+    
+    // Dropdown click behavior
+    document.addEventListener('DOMContentLoaded', function() {
+      const dropdown = document.querySelector('.dropdown');
+      const dropdownToggle = document.querySelector('.dropdown-toggle');
+      
+      if (dropdown && dropdownToggle) {
+        dropdownToggle.addEventListener('click', function(e) {
+          e.preventDefault();
+          dropdown.classList.toggle('active');
+        });
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function(e) {
+          if (!dropdown.contains(e.target)) {
+            dropdown.classList.remove('active');
+          }
+        });
+        
+        // Close dropdown when pressing Escape key
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape') {
+            dropdown.classList.remove('active');
+          }
+        });
+      }
+    });
+  </script>
+</body>
+</html>

booknap project/books.html

@@ -0,0 +1,1072 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>All Books - booknap</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+  <style>
+    :root {
+      --bg: #0f172a;
+      --card: #0b1223;
+      --muted: #94a3b8;
+      --text: #e2e8f0;
+      --brand: #3b82f6;
+      --brand-2: #6366f1;
+    }
+    body {
+      background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124);
+      min-height: 100vh;
+      color: var(--text);
+    }
+    /* Match pricing header/nav styling */
+    .header { position: sticky; top: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(7,10,20,0.55); z-index: 20; box-shadow: none; }
+    .nav { border-bottom: 1px solid rgba(255,255,255,0.06); }
+    .nav-logo i { color: var(--brand); }
+    .nav-link { color: var(--muted); text-decoration: none; font-weight: 600; }
+    .nav-link:hover, .nav-link.active { color: var(--text); }
+    .login-btn { background: var(--brand); color: white; padding: 0.6rem 1.1rem; border-radius: 9px; text-decoration: none; font-weight: 700; display: inline-block; }
+
+    /* Improved Navigation Layout */
+    .nav-container { 
+      max-width: 1200px; 
+      margin: 0 auto; 
+      padding: 0 20px; 
+      display: flex; 
+      align-items: center; 
+      gap: 2rem; 
+    }
+    
+    .nav-logo { 
+      display: flex; 
+      align-items: center; 
+      gap: 0.5rem; 
+      font-size: 1.5rem; 
+      font-weight: 700; 
+      color: white; 
+      flex-shrink: 0; 
+    }
+    
+    .nav-logo i { 
+      color: var(--brand); 
+      font-size: 1.8rem; 
+    }
+    
+    .nav-menu { 
+      display: flex; 
+      align-items: center; 
+      gap: 2rem; 
+      list-style: none; 
+      margin: 0; 
+      padding: 0; 
+      flex: 1; 
+      justify-content: center; 
+    }
+    
+    .nav-link { 
+      color: var(--muted); 
+      text-decoration: none; 
+      font-weight: 600; 
+      font-size: 0.95rem; 
+      transition: color 0.2s ease; 
+      padding: 0.5rem 0; 
+    }
+    
+    .nav-link:hover, .nav-link.active { 
+      color: var(--text); 
+    }
+    
+    .nav-login { 
+      display: flex; 
+      align-items: center; 
+      gap: 1rem; 
+      flex-shrink: 0; 
+    }
+    /* Guide Right-Swiping Tabs */
+    .guide-tabs-section {
+      padding: 2rem 0 5rem;
+    }
+    .guide-tabs-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 10px;
+      display: flex;
+      flex-direction: column;
+    }
+    .guide-tabs-panels {
+      order: 1;
+    }
+    .guide-tabs-nav {
+      order: 2;
+      display: flex;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 16px;
+      padding: 0.3rem;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+      position: relative;
+      overflow: hidden;
+      margin: 2rem auto 0 auto;
+      gap: 0.25rem;
+      width: fit-content;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+    .guide-tab-btn {
+      background: transparent;
+      border: 0;
+      padding: 0.75rem 1.25rem;
+      border-radius: 16px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.8);
+      cursor: pointer;
+      position: relative;
+      z-index: 2;
+      transition: color 0.25s ease;
+      white-space: nowrap;
+    }
+    .guide-tab-btn.active { color: #ffffff; }
+    .guide-tab-slider {
+      position: absolute;
+      top: 0.4rem;
+      left: 0.4rem;
+      height: calc(100% - 0.8rem);
+      border-radius: 16px;
+      background: linear-gradient(90deg, #3b82f6, #6366f1);
+      box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
+      transition: all 320ms cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 1;
+      width: 0;
+    }
+
+    .guide-tabs-panels { position: relative; }
+    .guide-tab-panel { display: none; }
+    .guide-tab-panel.active { display: block; }
+
+    .guide-card {
+      display: grid;
+      grid-template-columns: 1.25fr 1fr;
+      gap: 0;
+      border-radius: 16px;
+      overflow: hidden;
+      background: rgba(255, 255, 255, 0.1);
+      box-shadow: 0 16px 40px rgba(0,0,0,0.12);
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+    .guide-info {
+      background: linear-gradient(90deg, #3b82f6, #6366f1);
+      color: #ffffff;
+      padding: 2rem 2rem 2rem 2rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 260px;
+    }
+    .guide-title {
+      font-size: 1.8rem;
+      font-weight: 800;
+      line-height: 1.2;
+      margin: 0 0 0.75rem 0;
+    }
+    .guide-text { opacity: 0.95; margin: 0 0 1.25rem 0; }
+    .guide-cta {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: #ffffff;
+      font-weight: 600;
+      text-decoration: none;
+      border-bottom: 2px solid rgba(255,255,255,0.45);
+      width: fit-content;
+      padding-bottom: 2px;
+    }
+    .guide-cta i { transition: transform 0.2s ease; }
+    .guide-cta:hover i { transform: translateX(3px); }
+
+    .guide-image { position: relative; background: rgba(255, 255, 255, 0.1); height: 260px; }
+    .guide-image img {
+      width: 100%; height: 100%; object-fit: cover;
+      display: block;
+    }
+    /* Nudge Shakespeare image so face is more centered/visible */
+    #guide-shakespeare .guide-image img { object-position: 10% 25%; }
+    /* Nudge Jane Austen image so face is more centered/visible */
+    #guide-austen .guide-image img { object-position: 10% 20%; }
+    /* Nudge Charles Dickens image so face is more centered/visible */
+    #guide-dickens .guide-image img { object-position: 40% 25%; }
+
+    @media (max-width: 900px) {
+      .guide-card { grid-template-columns: 1fr; }
+      .guide-image { order: -1; }
+    }
+
+    /* Navigation Login Button */
+    .nav-container {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+    }
+    
+    .nav-menu {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+      margin-left: auto;
+    }
+    
+    .nav-login {
+      margin-left: 0;
+    }
+    
+    .login-btn {
+      background: linear-gradient(90deg, #3b82f6, #6366f1);
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: background-color 0.2s ease;
+      display: inline-block;
+    }
+    
+    .login-btn:hover {
+      background: linear-gradient(90deg, #2563eb, #4f46e5);
+    }
+    
+    .signup-btn {
+      background: transparent;
+      color: var(--text);
+      padding: 0.75rem 1.5rem;
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.2s ease;
+      display: inline-block;
+      margin-left: 0.5rem;
+    }
+    
+    .signup-btn:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+
+    /* Profile Picture Upload Styles */
+    .profile-upload {
+      position: relative;
+      margin-right: 1rem;
+      margin-left: 1.5rem;
+      display: inline-block;
+    }
+
+    .profile-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: bold;
+      font-size: 16px;
+      transition: all 0.3s ease;
+      overflow: hidden;
+    }
+
+    .profile-avatar:hover {
+      border-color: rgba(255, 255, 255, 0.4);
+      transform: scale(1.05);
+    }
+
+    .profile-avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+
+    .profile-upload input[type="file"] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+
+    .profile-upload:hover .profile-avatar {
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+    
+    /* Search Bar Styles */
+    .search-container {
+      margin-left: 0.5rem;
+      flex: 1;
+      max-width: 400px;
+      margin: 0 2rem;
+    }
+    
+    .search-bar {
+      position: relative;
+      display: flex;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 25px;
+      padding: 0.5rem 1rem;
+      min-width: 300px;
+      transition: all 0.3s ease;
+    }
+    
+    .search-bar:focus-within {
+      background: rgba(0, 0, 0, 0.4);
+      border-color: rgba(59, 130, 246, 0.5);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+    
+    .search-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.75rem;
+      font-size: 0.9rem;
+    }
+    
+    .search-input {
+      background: transparent;
+      border: none;
+      color: var(--text);
+      font-size: 0.9rem;
+      font-weight: 500;
+      width: 100%;
+      outline: none;
+    }
+    
+    .search-input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+    
+    .search-input:focus::placeholder {
+      color: rgba(255, 255, 255, 0.3);
+    }
+    
+    /* Responsive Navigation */
+    @media (max-width: 1024px) {
+      .nav-container {
+        gap: 1rem;
+      }
+      
+      .nav-menu {
+        gap: 1.5rem;
+      }
+      
+      .search-container {
+        margin: 0 1rem;
+        max-width: 300px;
+      }
+    }
+    
+    @media (max-width: 768px) {
+      .nav-container {
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
+      
+      .nav-menu {
+        order: 3;
+        width: 100%;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 1rem;
+      }
+      
+      .search-container {
+        order: 2;
+        margin: 0;
+        max-width: 100%;
+        flex: 1;
+      }
+      
+      .nav-login {
+        order: 1;
+        margin-left: auto;
+      }
+      
+      .search-bar {
+        min-width: 200px;
+      }
+    }
+    
+    @media (max-width: 600px) {
+      .nav-container {
+        padding: 0 15px;
+      }
+      
+      .nav-menu {
+        gap: 0.75rem;
+        font-size: 0.9rem;
+      }
+      
+      .search-container {
+        margin: 0;
+      }
+      
+      .search-bar {
+        min-width: 150px;
+        padding: 0.4rem 0.8rem;
+      }
+      
+      .nav-login {
+        gap: 0.75rem;
+      }
+      
+      .profile-avatar {
+        width: 35px;
+        height: 35px;
+        font-size: 14px;
+      }
+      
+      .login-btn, .signup-btn {
+        padding: 0.5rem 1rem;
+        font-size: 0.9rem;
+      }
+    }
+    
+    /* Community Section (homepage hero under header) */
+    .community-section { background: transparent; padding: 4rem 0; margin-top: 0; }
+    .community-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 20px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4rem;
+      align-items: center;
+    }
+    .community-content { color: var(--text); }
+    .community-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--text); }
+    .community-description { font-size: 1.125rem; line-height: 1.7; color: var(--muted); margin-bottom: 0; }
+    .community-image-wrap { display: flex; align-items: center; justify-content: center; min-height: 220px; }
+    .community-image { width: 100%; max-width: 380px; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); object-fit: contain; display: block; }
+
+    @media (max-width: 768px) {
+      .community-container { grid-template-columns: 1fr; gap: 2rem; }
+      .community-title { font-size: 2.5rem; }
+    }
+    
+    /* Dropdown Menu Styles */
+    .dropdown {
+      position: relative;
+    }
+    
+    .dropdown-toggle {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    
+    .dropdown-toggle i {
+      font-size: 0.8rem;
+      transition: transform 0.2s ease;
+    }
+    
+    .dropdown.active .dropdown-toggle i {
+      transform: rotate(180deg);
+    }
+    
+    .dropdown-menu {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(15, 23, 42, 0.95);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 12px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      min-width: 500px;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+      z-index: 1000;
+      margin-top: 1rem;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+    
+    .dropdown.active .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+    }
+    
+    .dropdown-content {
+      display: flex;
+      padding: 2rem;
+    }
+    
+    .dropdown-section {
+      flex: 1;
+    }
+    
+    .dropdown-section h4 {
+      color: #e2e8f0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin: 0 0 1rem 0;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    
+    .dropdown-section ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    
+    .dropdown-section li {
+      margin-bottom: 0.75rem;
+    }
+    
+    .dropdown-section a {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      color: #94a3b8;
+      text-decoration: none;
+      font-size: 0.875rem;
+      padding: 0.5rem;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+    }
+    
+    .dropdown-section a:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e2e8f0;
+    }
+    
+    .dropdown-section i {
+      font-size: 1rem;
+      width: 20px;
+      text-align: center;
+    }
+    
+    .dropdown-divider {
+      width: 1px;
+      background: rgba(255, 255, 255, 0.2);
+      margin: 0 1.5rem;
+    }
+    
+    .all-categories {
+      color: #60a5fa !important;
+      font-weight: 500;
+      margin-top: 1rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    
+    .all-categories:hover {
+      background: rgba(59, 130, 246, 0.2) !important;
+      color: #93c5fd !important;
+    }
+    
+    .all-categories i {
+      font-size: 0.75rem;
+      transition: transform 0.2s ease;
+    }
+    
+    .all-categories:hover i {
+      transform: translateX(3px);
+    }
+    
+    /* Books Grid Section */
+    .books-grid-section {
+      padding: 4rem 0;
+      background: linear-gradient(135deg, #0b1020, #0b1022 30%, #0b1124);
+    }
+    
+    .books-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 2rem;
+      margin-top: 2rem;
+    }
+    
+    .book-card {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 15px;
+      overflow: hidden;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      cursor: pointer;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+    
+    .book-card:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    
+    .book-cover {
+      position: relative;
+      height: 200px;
+      overflow: hidden;
+    }
+    
+    .book-cover img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s ease;
+    }
+    
+    .book-card:hover .book-cover img {
+      transform: scale(1.05);
+    }
+    
+    .book-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(59, 130, 246, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    
+    .book-overlay i {
+      color: white;
+      font-size: 2rem;
+    }
+    
+    .book-card:hover .book-overlay {
+      opacity: 1;
+    }
+    
+    .book-info {
+      padding: 1.5rem;
+    }
+    
+    .book-info h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: white;
+      margin-bottom: 0.5rem;
+      line-height: 1.3;
+    }
+    
+    .book-info .book-author {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 0.875rem;
+      margin-bottom: 0.25rem;
+    }
+    
+    .book-info .book-category {
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+      padding: 0.25rem 0.75rem;
+      border-radius: 15px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      display: inline-block;
+      margin-bottom: 0.75rem;
+    }
+    
+    .book-info .book-description {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+    
+    /* Responsive navigation adjustments */
+    @media (max-width: 768px) {
+      .nav-login {
+        margin-left: 0;
+        margin-top: 1rem;
+      }
+      
+      .dropdown-menu {
+        min-width: 300px;
+        left: 0;
+        transform: none;
+      }
+      
+      .dropdown-content {
+        flex-direction: column;
+        padding: 1.5rem;
+      }
+      
+      .dropdown-divider {
+        width: 100%;
+        height: 1px;
+        margin: 1rem 0;
+      }
+      
+      .books-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1.5rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <nav class="nav">
+      <div class="nav-container">
+        <div class="nav-logo">
+          <i class="fas fa-book-open"></i>
+          <span>booknap</span>
+        </div>
+        <div class="search-container">
+          <div class="search-bar">
+            <i class="fas fa-search search-icon"></i>
+            <input type="text" placeholder="Find a book..." class="search-input">
+          </div>
+        </div>
+        <ul class="nav-menu">
+          <li><a href="books.html" class="nav-link active">Home</a></li>
+          <li class="dropdown">
+            <a href="#" class="nav-link dropdown-toggle">Book Summaries <i class="fas fa-chevron-down"></i></a>
+            <div class="dropdown-menu">
+              <div class="dropdown-content">
+                <div class="dropdown-section">
+                  <h4>Browse by type</h4>
+                  <ul>
+                    <li><a href="#"><i class="fas fa-book-open" style="color: #10b981;"></i> Text Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-headphones" style="color: #3b82f6;"></i> Audio Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-play-circle" style="color: #8b5cf6;"></i> Video Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-file-pdf" style="color: #f59e0b;"></i> PDF Downloads</a></li>
+                    <li><a href="#"><i class="fas fa-mobile-alt" style="color: #06b6d4;"></i> Mobile App</a></li>
+                  </ul>
+                </div>
+                <div class="dropdown-divider"></div>
+                <div class="dropdown-section">
+                  <h4>Browse by topic</h4>
+                  <ul>
+                    <li><a href="#"><i class="fas fa-brain" style="color: #f59e0b;"></i> Psychology</a></li>
+                    <li><a href="#"><i class="fas fa-chart-line" style="color: #10b981;"></i> Business</a></li>
+                    <li><a href="#"><i class="chevron-down"></i> Self-Help</a></li>
+                    <li><a href="#"><i class="fas fa-graduation-cap" style="color: #8b5cf6;"></i> Education</a></li>
+                    <li><a href="#"><i class="fas fa-lightbulb" style="color: #06b6d4;"></i> Innovation</a></li>
+                  </ul>
+                  <a href="#" class="all-categories">all categories <i class="fas fa-arrow-right"></i></a>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li><a href="pricing.html" class="nav-link">Pricing</a></li>
+          <li><a href="blog.html" class="nav-link">Blog</a></li>
+        </ul>
+        <div class="nav-login">
+          <a href="login.html" class="login-btn">Login</a>
+          <a href="signup.html" class="signup-btn">Sign Up</a>
+          <div class="profile-upload">
+            <label for="profileInput" class="profile-avatar" id="profileAvatar" title="Click to upload profile picture">
+              <span>U</span>
+            </label>
+            <input type="file" id="profileInput" accept="image/*" onchange="updateProfilePicture(event)" aria-label="Upload profile picture">
+          </div>
+        </div>
+        <div class="nav-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <!-- Community Section under header -->
+    <section class="community-section">
+      <div class="community-container">
+        <div class="community-content">
+          <h1 class="community-title">
+            Level up with the largest<br>
+            <span style="color: #3b82f6;">reading community</span>
+          </h1>
+          <p class="community-description">
+            Join book lovers to share insights, discuss ideas, and stay up-to-date on all the latest books and reading techniques.
+          </p>
+        </div>
+        <div class="community-image-wrap">
+          <img class="community-image" src="https://i.pinimg.com/736x/f4/a0/48/f4a0480397a1c019a2a1a238b2ffc594.jpg" alt="Reading illustration" />
+        </div>
+      </div>
+    </section>
+
+
+    <!-- Right-swiping tabs (matching screenshot layout) -->
+    <section class="guide-tabs-section">
+      <div class="guide-tabs-container">
+        <div class="guide-tabs-nav" role="tablist" aria-label="Author guides">
+          <div class="guide-tab-slider" aria-hidden="true"></div>
+          <button class="guide-tab-btn active" role="tab" aria-selected="true" aria-controls="guide-dickens" id="tab-dickens">Dickens</button>
+          <button class="guide-tab-btn" role="tab" aria-selected="false" aria-controls="guide-austen" id="tab-austen">Austen</button>
+          <button class="guide-tab-btn" role="tab" aria-selected="false" aria-controls="guide-shakespeare" id="tab-shakespeare">Shakespeare</button>
+        </div>
+
+        <div class="guide-tabs-panels">
+          <!-- Charles Dickens (now first) -->
+          <div class="guide-tab-panel active" id="guide-dickens" role="tabpanel" aria-labelledby="tab-dickens">
+            <div class="guide-card">
+              <div class="guide-info">
+                <h2 class="guide-title">Charles Dickens' London</h2>
+                <p class="guide-text">Walk the foggy streets of Victorian London and uncover the life and times that shaped Dickens' unforgettable characters.</p>
+                <a class="guide-cta" href="#"><span>Read the guide</span> <i class="fas fa-arrow-right"></i></a>
+              </div>
+              <div class="guide-image">
+                <img alt="Charles Dickens" src="https://www.historic-uk.com/wp-content/uploads/2019/06/dickens-in-study.jpg" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Jane Austen (remains second) -->
+          <div class="guide-tab-panel" id="guide-austen" role="tabpanel" aria-labelledby="tab-austen">
+            <div class="guide-card">
+              <div class="guide-info">
+                <h2 class="guide-title">Jane Austen's World</h2>
+                <p class="guide-text">Explore the Regency era, societal norms, and the life behind the beloved novels. Perfect for essays and deeper reading.</p>
+                <a class="guide-cta" href="#"><span>Read the guide</span> <i class="fas fa-arrow-right"></i></a>
+              </div>
+              <div class="guide-image">
+                <img alt="Jane Austen" src="https://wordsworth-editions.com/wp-content/uploads/2022/02/jane-austen.jpg" />
+              </div>
+            </div>
+          </div>
+
+          <!-- William Shakespeare (now third) -->
+          <div class="guide-tab-panel" id="guide-shakespeare" role="tabpanel" aria-labelledby="tab-shakespeare">
+            <div class="guide-card">
+              <div class="guide-info">
+                <h2 class="guide-title">William Shakespeare's Life & Times</h2>
+                <p class="guide-text">Our comprehensive guide includes a detailed biography, social and historical context, quotes, and more to help you write your essay on Shakespeare or understand his plays and poems.</p>
+                <a class="guide-cta" href="#"><span>Read the guide</span> <i class="fas fa-arrow-right"></i></a>
+              </div>
+              <div class="guide-image">
+                <img alt="William Shakespeare" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Shakespeare.jpg/640px-Shakespeare.jpg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="books-grid-section">
+      <div class="container">
+        <div class="books-grid">
+          <div class="book-card" onclick="window.location.href='book.html?id=1'">
+            <div class="book-cover">
+              <img src="assets/covers/atomic-habits.svg" alt="Atomic Habits" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Atomic Habits</h3>
+              <p class="book-author">James Clear</p>
+              <p class="book-category">Self-Help</p>
+              <p class="book-description">Learn how tiny changes create remarkable results in your life.</p>
+            </div>
+          </div>
+
+          <div class="book-card" onclick="window.location.href='book.html?id=2'">
+            <div class="book-cover">
+              <img src="assets/covers/thinking-fast-slow.svg" alt="Thinking, Fast and Slow" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Thinking, Fast and Slow</h3>
+              <p class="book-author">Daniel Kahneman</p>
+              <p class="book-category">Psychology</p>
+              <p class="book-description">Understanding the two systems that drive the way we think.</p>
+            </div>
+          </div>
+
+          <div class="book-card" onclick="window.location.href='book.html?id=3'">
+            <div class="book-cover">
+              <img src="assets/covers/7-habits.svg" alt="The 7 Habits of Highly Effective People" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>The 7 Habits of Highly Effective People</h3>
+              <p class="book-author">Stephen R. Covey</p>
+              <p class="book-category">Self-Help</p>
+              <p class="book-description">Powerful lessons in personal change and effectiveness.</p>
+            </div>
+          </div>
+
+          <div class="book-card" onclick="window.location.href='book.html?id=4'">
+            <div class="book-cover">
+              <img src="assets/covers/rich-dad-poor-dad.svg" alt="Rich Dad Poor Dad" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Rich Dad Poor Dad</h3>
+              <p class="book-author">Robert T. Kiyosaki</p>
+              <p class="book-category">Finance</p>
+              <p class="book-description">What the rich teach their kids about money.</p>
+            </div>
+          </div>
+
+          <div class="book-card" onclick="window.location.href='book.html?id=5'">
+            <div class="book-cover">
+              <img src="assets/covers/zero-to-one.svg" alt="Zero to One" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Zero to One</h3>
+              <p class="book-author">Peter Thiel</p>
+              <p class="book-category">Business</p>
+              <p class="book-description">Notes on startups, or how to build the future.</p>
+            </div>
+          </div>
+
+          <div class="book-card" onclick="window.location.href='book.html?id=6'">
+            <div class="book-cover">
+              <img src="assets/covers/start-with-why.svg" alt="Start With Why" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Start With Why</h3>
+              <p class="book-author">Simon Sinek</p>
+              <p class="book-category">Leadership</p>
+              <p class="book-description">How great leaders inspire everyone to take action.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="container">
+      <p>&copy; 2024 booknap. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <script src="script.js"></script>
+  <script>
+    // Dropdown click behavior
+    (function() {
+      const dropdown = document.querySelector('.dropdown');
+      const dropdownToggle = document.querySelector('.dropdown-toggle');
+      
+      if (dropdown && dropdownToggle) {
+        dropdownToggle.addEventListener('click', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          dropdown.classList.toggle('active');
+        });
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function(e) {
+          if (!dropdown.contains(e.target)) {
+            dropdown.classList.remove('active');
+          }
+        });
+        
+        // Close dropdown when pressing Escape key
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape') {
+            dropdown.classList.remove('active');
+          }
+        });
+      }
+    })();
+
+    // Guide right-swiping tabs behavior
+    (function() {
+      const nav = document.querySelector('.guide-tabs-nav');
+      if (!nav) return;
+      const buttons = Array.from(nav.querySelectorAll('.guide-tab-btn'));
+      const slider = nav.querySelector('.guide-tab-slider');
+      const panels = Array.from(document.querySelectorAll('.guide-tab-panel'));
+
+      function activate(idx) {
+        buttons.forEach((b, i) => {
+          const isActive = i === idx;
+          b.classList.toggle('active', isActive);
+          b.setAttribute('aria-selected', String(isActive));
+          panels[i].classList.toggle('active', isActive);
+        });
+        const activeBtn = buttons[idx];
+        if (activeBtn && slider) {
+          slider.style.width = activeBtn.offsetWidth + 'px';
+          slider.style.left = activeBtn.offsetLeft + 'px'; // swipe right visual
+        }
+        activeIndex = idx;
+      }
+
+      let activeIndex = buttons.findIndex(b => b.classList.contains('active'));
+      if (activeIndex < 0) activeIndex = 0;
+      // init slider position after layout
+      window.requestAnimationFrame(() => activate(activeIndex));
+
+      buttons.forEach((btn, i) => btn.addEventListener('click', () => activate(i)));
+
+      // Touch swipe support on the whole tabs section
+      const swipeHost = document.querySelector('.guide-tabs-section');
+      let touchStartX = 0;
+      let touchEndX = 0;
+      const threshold = 40; // px
+
+      function handleGesture() {
+        const dx = touchEndX - touchStartX;
+        if (Math.abs(dx) < threshold) return;
+        if (dx < 0) {
+          // swipe left -> next (slider moves right)
+          activate(Math.min(activeIndex + 1, buttons.length - 1));
+        } else {
+          // swipe right -> prev
+          activate(Math.max(activeIndex - 1, 0));
+        }
+      }
+
+      if (swipeHost) {
+        swipeHost.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].clientX; }, { passive: true });
+        swipeHost.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].clientX; handleGesture(); }, { passive: true });
+      }
+
+      // Reposition slider on resize
+      window.addEventListener('resize', () => activate(activeIndex));
+    })();
+
+    // Profile picture update function
+    function updateProfilePicture(event) {
+      const file = event.target.files[0];
+      if (file) {
+        if (file.type.startsWith('image/')) {
+          const reader = new FileReader();
+          reader.onload = function(e) {
+            const profileAvatar = document.getElementById('profileAvatar');
+            profileAvatar.innerHTML = `<img src="${e.target.result}" alt="Profile picture">`;
+            
+            // Store in localStorage for persistence
+            localStorage.setItem('profilePicture', e.target.result);
+          };
+          reader.readAsDataURL(file);
+        } else {
+          alert('Please select a valid image file.');
+        }
+      }
+    }
+
+    // Load saved profile picture on page load
+    document.addEventListener('DOMContentLoaded', function() {
+      const savedPicture = localStorage.getItem('profilePicture');
+      if (savedPicture) {
+        const profileAvatar = document.getElementById('profileAvatar');
+        profileAvatar.innerHTML = `<img src="${savedPicture}" alt="Profile picture">`;
+      }
+    });
+  </script>
+</body>
+</html>
+ 

booknap project/business-leaders.html

@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Booknap - News & Business Wisdom</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    <style>
+        :root {
+            --bg: #0f172a;
+            --card: #0b1223;
+            --muted: #94a3b8;
+            --text: #e2e8f0;
+            --brand: #3b82f6;
+            --brand-2: #6366f1;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124);
+            color: var(--text);
+            margin: 0;
+            padding: 0;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .header h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #3b82f6, #6366f1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .header p {
+            font-size: 1.25rem;
+            color: var(--muted);
+            line-height: 1.6;
+        }
+        
+        /* Tab Navigation */
+        .tab-nav {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 3rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            padding: 0.5rem;
+            max-width: 500px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        
+        .tab-btn {
+            background: transparent;
+            border: none;
+            color: var(--muted);
+            padding: 0.75rem 1.5rem;
+            border-radius: 12px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            flex: 1;
+        }
+        
+        .tab-btn.active {
+            background: var(--brand);
+            color: white;
+        }
+        
+        .tab-btn:hover:not(.active) {
+            color: var(--text);
+        }
+        
+        /* Tab Content */
+        .tab-content {
+            display: none;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+        
+        /* Grid Layout */
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 2rem;
+        }
+        
+        /* News Cards */
+        .news-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: transform 0.3s ease;
+        }
+        
+        .news-card:hover {
+            transform: translateY(-8px);
+        }
+        
+        .news-card-image {
+            width: 100%;
+            height: 200px;
+            background-size: cover;
+            background-position: center;
+        }
+        
+        .news-card-content {
+            padding: 1.5rem;
+        }
+        
+        .news-card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        
+        .news-card-date {
+            color: var(--muted);
+            font-size: 0.875rem;
+            margin-bottom: 1rem;
+        }
+        
+        /* Business Wisdom Cards */
+        .wisdom-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            padding: 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: transform 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .wisdom-card:hover {
+            transform: translateY(-8px);
+        }
+        
+        .wisdom-card::before {
+            content: '"';
+            position: absolute;
+            top: 1rem;
+            left: 1.5rem;
+            font-size: 4rem;
+            color: var(--brand);
+            opacity: 0.3;
+            font-family: serif;
+        }
+        
+        .wisdom-quote {
+            font-size: 1.1rem;
+            line-height: 1.6;
+            margin-bottom: 1.5rem;
+            font-style: italic;
+            color: var(--text);
+        }
+        
+        .wisdom-author {
+            font-weight: 600;
+            color: var(--brand);
+            margin-bottom: 0.5rem;
+        }
+        
+        .wisdom-meta {
+            color: var(--muted);
+            font-size: 0.875rem;
+        }
+        
+        .loading {
+            text-align: center;
+            padding: 3rem;
+            color: var(--muted);
+        }
+        
+        .error {
+            text-align: center;
+            padding: 3rem;
+            color: #ef4444;
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2rem;
+            }
+            
+            .tab-nav {
+                flex-direction: column;
+            }
+            
+            .grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>News & Business Wisdom</h1>
+            <p>Stay informed with the latest news and inspired by wisdom from business leaders</p>
+        </div>
+        
+        <!-- Tab Navigation -->
+        <div class="tab-nav">
+            <button class="tab-btn active" onclick="showTab('news')">
+                <i class="fas fa-newspaper"></i> Latest News
+            </button>
+            <button class="tab-btn" onclick="showTab('wisdom')">
+                <i class="fas fa-lightbulb"></i> Business Wisdom
+            </button>
+        </div>
+        
+        <!-- News Tab -->
+        <div id="news-tab" class="tab-content active">
+            <div class="grid" id="news-grid">
+                <div class="loading">Loading news...</div>
+            </div>
+        </div>
+        
+        <!-- Business Wisdom Tab -->
+        <div id="wisdom-tab" class="tab-content">
+            <div class="grid" id="wisdom-grid">
+                <div class="loading">Loading business wisdom...</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Tab functionality
+        function showTab(tabName) {
+            // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            
+            // Remove active class from all buttons
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            
+            // Show selected tab
+            document.getElementById(tabName + '-tab').classList.add('active');
+            
+            // Add active class to clicked button
+            event.target.classList.add('active');
+            
+            // Load data for the selected tab
+            if (tabName === 'news') {
+                loadNewsData();
+            } else if (tabName === 'wisdom') {
+                loadWisdomData();
+            }
+        }
+        
+        // Load news data
+        async function loadNewsData() {
+            try {
+                const response = await fetch('/api/news');
+                const newsData = await response.json();
+                
+                if (newsData.error) {
+                    document.getElementById('news-grid').innerHTML = 
+                        `<div class="error">Error loading news: ${newsData.error}</div>`;
+                    return;
+                }
+                
+                displayNewsData(newsData);
+                
+            } catch (error) {
+                document.getElementById('news-grid').innerHTML = 
+                    '<div class="error">Error loading news data</div>';
+            }
+        }
+        
+        // Display news data
+        function displayNewsData(newsData) {
+            const newsGrid = document.getElementById('news-grid');
+            
+            if (newsData.length === 0) {
+                newsGrid.innerHTML = '<div class="loading">No news articles found.</div>';
+                return;
+            }
+            
+            const imageUrls = [
+                'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500',
+                'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=500',
+                'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500',
+                'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500',
+                'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=500'
+            ];
+            
+            newsGrid.innerHTML = newsData.map((article, index) => `
+                <article class="news-card">
+                    <div class="news-card-image" style="background-image: url('${imageUrls[index % imageUrls.length]}');"></div>
+                    <div class="news-card-content">
+                        <h3 class="news-card-title">${article.title}</h3>
+                        <p class="news-card-date">${article.date} • ${article.source} • ${article.category}</p>
+                        <p style="color: var(--muted); font-size: 0.875rem; margin-bottom: 1rem;">${article.description}</p>
+                        <a href="#" style="color: var(--brand); text-decoration: none; font-weight: 600; font-size: 0.875rem; text-transform: uppercase;">READ MORE</a>
+                    </div>
+                </article>
+            `).join('');
+        }
+        
+        // Load business wisdom data
+        async function loadWisdomData() {
+            try {
+                const response = await fetch('/api/business-leaders');
+                const wisdomData = await response.json();
+                
+                if (wisdomData.error) {
+                    document.getElementById('wisdom-grid').innerHTML = 
+                        `<div class="error">Error loading wisdom: ${wisdomData.error}</div>`;
+                    return;
+                }
+                
+                displayWisdomData(wisdomData);
+                
+            } catch (error) {
+                document.getElementById('wisdom-grid').innerHTML = 
+                    '<div class="error">Error loading business wisdom data</div>';
+            }
+        }
+        
+        // Display business wisdom data
+        function displayWisdomData(wisdomData) {
+            const wisdomGrid = document.getElementById('wisdom-grid');
+            
+            if (wisdomData.length === 0) {
+                wisdomGrid.innerHTML = '<div class="loading">No wisdom quotes found.</div>';
+                return;
+            }
+            
+            wisdomGrid.innerHTML = wisdomData.map(quote => `
+                <article class="wisdom-card">
+                    <p class="wisdom-quote">${quote.quote}</p>
+                    <div class="wisdom-author">— ${quote.author}</div>
+                    <div class="wisdom-meta">
+                        ${quote.category} • ${quote.year} • ${quote.source}
+                    </div>
+                </article>
+            `).join('');
+        }
+        
+        // Initialize the page
+        document.addEventListener('DOMContentLoaded', function() {
+            // Load news data by default
+            loadNewsData();
+        });
+    </script>
+</body>
+</html>
+
+
+
+
+
+

booknap project/community-section.html

@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Booknap - Join Our Community</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    <style>
+        :root {
+            --bg: #0f172a;
+            --card: #0b1223;
+            --muted: #94a3b8;
+            --text: #e2e8f0;
+            --brand: #3b82f6;
+            --brand-2: #6366f1;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124);
+            color: var(--text);
+            margin: 0;
+            padding: 0;
+        }
+        
+        /* Header Styles */
+        .header {
+            position: sticky;
+            top: 0;
+            -webkit-backdrop-filter: blur(8px);
+            backdrop-filter: blur(8px);
+            background: rgba(7,10,20,0.55);
+            z-index: 20;
+            box-shadow: none;
+        }
+        
+        .nav {
+            border-bottom: 1px solid rgba(255,255,255,0.06);
+        }
+        
+        .nav-container {
+            display: flex;
+            align-items: center;
+            gap: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        
+        .nav-logo {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 700;
+            text-decoration: none;
+        }
+        
+        .nav-logo i {
+            font-size: 1.8rem;
+            color: var(--brand);
+        }
+        
+        .nav-menu {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
+            margin-left: auto;
+        }
+        
+        .nav-link {
+            color: var(--muted);
+            text-decoration: none;
+            font-weight: 600;
+            transition: color 0.3s ease;
+        }
+        
+        .nav-link:hover, .nav-link.active {
+            color: var(--text);
+        }
+        
+        .nav-login {
+            margin-left: 0;
+        }
+        
+        .login-btn {
+            background: linear-gradient(90deg, #3b82f6, #6366f1);
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border-radius: 8px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: background-color 0.2s ease;
+            display: inline-block;
+        }
+        
+        .login-btn:hover {
+            background: linear-gradient(90deg, #2563eb, #4f46e5);
+        }
+        
+        /* Community Section Styles */
+        .community-section {
+            background: transparent;
+            padding: 4rem 0;
+            margin-top: 0;
+        }
+        
+        .community-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+        }
+        
+        .community-content {
+            color: var(--text);
+        }
+        
+        .community-title {
+            font-size: 3.5rem;
+            font-weight: 800;
+            line-height: 1.1;
+            margin-bottom: 1.5rem;
+            color: var(--text);
+        }
+        
+        .community-description {
+            font-size: 1.125rem;
+            line-height: 1.7;
+            color: var(--muted);
+            margin-bottom: 2.5rem;
+        }
+        
+        .community-buttons {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+        
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.875rem 1.5rem;
+            border: 1px solid #d1d5db;
+            border-radius: 8px;
+            background: white;
+            color: #374151;
+            text-decoration: none;
+            font-weight: 500;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+        }
+        
+        .btn:hover {
+            border-color: #9ca3af;
+            background: #f9fafb;
+        }
+        
+        .btn-google {
+            border-color: #d1d5db;
+        }
+        
+        .btn-email {
+            border-color: #d1d5db;
+        }
+        
+        .google-icon {
+            width: 18px;
+            height: 18px;
+            background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg);
+            border-radius: 2px;
+            position: relative;
+        }
+        
+        .google-icon::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 8px;
+            height: 8px;
+            background: white;
+            border-radius: 1px;
+        }
+        
+        /* Right-side image */
+        .community-image-wrap {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 220px;
+        }
+        .community-image {
+            width: 100%;
+            max-width: 380px;
+            height: auto;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+            object-fit: contain;
+            display: block;
+        }
+
+        /* Illustration styles removed: using a single image on the right side */
+        
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .community-container {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+            
+            .community-title {
+                font-size: 2.5rem;
+            }
+            
+            .community-buttons {
+                flex-direction: column;
+            }
+            
+            /* no right-side illustration adjustments needed */
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <nav class="nav">
+            <div class="nav-container">
+                <div class="nav-logo">
+                    <i class="fas fa-book-open"></i>
+                    <span>booknap</span>
+                </div>
+                <ul class="nav-menu">
+                    <li><a href="#" class="nav-link active">Home</a></li>
+                    <li><a href="#" class="nav-link">Book Summaries</a></li>
+                    <li><a href="#" class="nav-link">Pricing</a></li>
+                    <li><a href="#" class="nav-link">Blog</a></li>
+                </ul>
+                <div class="nav-login">
+                    <a href="login.html" class="login-btn">Login</a>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Community Section -->
+    <section class="community-section">
+        <div class="community-container">
+            <!-- Left Side - Content -->
+            <div class="community-content">
+                <h1 class="community-title">
+                    Level up with the largest<br>
+                    <span style="color: var(--brand);">reading community</span>
+                </h1>
+                
+                <p class="community-description">
+                    Join over 25M+ book lovers to share insights, discuss ideas, and stay up-to-date on all the latest books and reading techniques. Discover a huge repository of community-published book summaries, reviews & reading guides for your next learning journey.
+                </p>
+
+            </div>
+            
+            <!-- Right Side - Image -->
+            <div class="community-image-wrap">
+                <img class="community-image" src="https://i.pinimg.com/736x/f4/a0/48/f4a0480397a1c019a2a1a238b2ffc594.jpg" alt="Reading illustration" />
+            </div>
+            
+        </div>
+    </section>
+
+    <!-- Rest of your content can go here -->
+    <div style="background: var(--bg); padding: 2rem; color: var(--text);">
+        <div style="max-width: 1200px; margin: 0 auto;">
+            <h2>Continue Your Reading Journey</h2>
+            <p>Explore our book summaries, join reading discussions, and discover new insights with our community of book lovers.</p>
+        </div>
+    </div>
+</body>
+</html>

booknap project/data/news.json

@@ -0,0 +1,86 @@
+{
+  "articles": [
+    {
+      "id": 1,
+      "title": "The Future of Artificial Intelligence in 2024",
+      "description": "Exploring the latest developments in AI technology and their impact on various industries.",
+      "date": "2024-01-15",
+      "source": "Tech News",
+      "category": "Technology",
+      "image": "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=500",
+      "tags": ["AI", "Technology", "Innovation"]
+    },
+    {
+      "id": 2,
+      "title": "Sustainable Business Practices That Drive Growth",
+      "description": "How companies are implementing eco-friendly strategies while maintaining profitability.",
+      "date": "2024-01-14",
+      "source": "Business Weekly",
+      "category": "Business",
+      "image": "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=500",
+      "tags": ["Sustainability", "Business", "Growth"]
+    },
+    {
+      "id": 3,
+      "title": "Mental Health Awareness in the Digital Age",
+      "description": "Understanding the impact of social media and technology on mental well-being.",
+      "date": "2024-01-13",
+      "source": "Health Journal",
+      "category": "Health",
+      "image": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500",
+      "tags": ["Mental Health", "Digital", "Wellness"]
+    },
+    {
+      "id": 4,
+      "title": "Climate Change Solutions: What Works",
+      "description": "Evidence-based approaches to addressing climate change at individual and corporate levels.",
+      "date": "2024-01-12",
+      "source": "Environmental Times",
+      "category": "Environment",
+      "image": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500",
+      "tags": ["Climate", "Environment", "Solutions"]
+    },
+    {
+      "id": 5,
+      "title": "The Rise of Remote Work Culture",
+      "description": "How remote work is reshaping company culture and employee expectations.",
+      "date": "2024-01-11",
+      "source": "Workplace Insights",
+      "category": "Work",
+      "image": "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500",
+      "tags": ["Remote Work", "Culture", "Workplace"]
+    },
+    {
+      "id": 6,
+      "title": "Digital Privacy in the Age of Big Data",
+      "description": "Protecting personal information in an increasingly connected world.",
+      "date": "2024-01-10",
+      "source": "Privacy Today",
+      "category": "Technology",
+      "image": "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=500",
+      "tags": ["Privacy", "Data", "Security"]
+    }
+  ],
+  "categories": [
+    "Technology",
+    "Business", 
+    "Health",
+    "Environment",
+    "Work"
+  ],
+  "sources": [
+    "Tech News",
+    "Business Weekly",
+    "Health Journal",
+    "Environmental Times",
+    "Workplace Insights",
+    "Privacy Today"
+  ]
+}
+
+
+
+
+
+
+

booknap project/database_schema.sql

@@ -0,0 +1,21 @@
+-- Database schema for Booknap user authentication
+-- Run this in your PostgreSQL database
+
+-- Create users table
+CREATE TABLE IF NOT EXISTS users (
+    id SERIAL PRIMARY KEY,
+    full_name VARCHAR(255) NOT NULL,
+    email VARCHAR(255) UNIQUE NOT NULL,
+    password VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create index on email for faster lookups
+CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
+
+-- Insert a sample user for testing (password: test123)
+-- INSERT INTO users (full_name, email, password) VALUES ('Test User', 'test@example.com', 'test123');
+
+-- Note: In production, passwords should be hashed using bcrypt or similar
+-- The current implementation stores plaintext passwords for demo purposes only

booknap project/json-blog.html

@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blog with JSON Dataset</title>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124);
+            color: #e2e8f0;
+            margin: 0;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .controls {
+            display: flex;
+            gap: 1rem;
+            margin: 2rem 0;
+            flex-wrap: wrap;
+        }
+        
+        .search-bar, .category-filter {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 25px;
+            padding: 0.75rem 1.5rem;
+            color: #e2e8f0;
+        }
+        
+        .search-bar {
+            flex: 1;
+            min-width: 200px;
+        }
+        
+        .category-filter {
+            min-width: 150px;
+        }
+        
+        .blog-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+        
+        .blog-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: transform 0.3s ease;
+        }
+        
+        .blog-card:hover {
+            transform: translateY(-8px);
+        }
+        
+        .blog-card-image {
+            width: 100%;
+            height: 200px;
+            background-size: cover;
+            background-position: center;
+        }
+        
+        .blog-card-content {
+            padding: 1.5rem;
+        }
+        
+        .blog-card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        
+        .blog-card-date {
+            color: #94a3b8;
+            font-size: 0.875rem;
+            margin-bottom: 1rem;
+        }
+        
+        .blog-card-link {
+            color: #8b5cf6;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+        }
+        
+        .tags {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1rem;
+            flex-wrap: wrap;
+        }
+        
+        .tag {
+            background: rgba(139, 92, 246, 0.2);
+            color: #a78bfa;
+            padding: 0.25rem 0.75rem;
+            border-radius: 15px;
+            font-size: 0.75rem;
+        }
+        
+        .loading {
+            text-align: center;
+            padding: 2rem;
+            color: #94a3b8;
+        }
+        
+        .stats {
+            display: flex;
+            gap: 2rem;
+            margin: 1rem 0;
+            color: #94a3b8;
+            font-size: 0.875rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Blog with JSON Dataset</h1>
+        
+        <div class="stats" id="stats">
+            <span>Loading...</span>
+        </div>
+        
+        <div class="controls">
+            <input type="text" class="search-bar" placeholder="Search articles..." id="searchInput">
+            <select class="category-filter" id="categoryFilter" aria-label="Filter by category">
+                <option value="">All Categories</option>
+            </select>
+        </div>
+        
+        <div class="blog-grid" id="blogGrid">
+            <div class="loading">Loading articles...</div>
+        </div>
+    </div>
+
+    <script>
+        let allArticles = [];
+        let filteredArticles = [];
+
+        // Load data from JSON file
+        async function loadDataset() {
+            try {
+                const response = await fetch('data/news.json');
+                const data = await response.json();
+                allArticles = data.articles;
+                filteredArticles = [...allArticles];
+                
+                // Populate category filter
+                populateCategoryFilter(data.categories);
+                
+                // Display articles
+                displayArticles(filteredArticles);
+                
+                // Update stats
+                updateStats();
+                
+            } catch (error) {
+                console.error('Error loading dataset:', error);
+                document.getElementById('blogGrid').innerHTML = 
+                    '<div class="loading">Error loading data. Please check if data/news.json exists.</div>';
+            }
+        }
+
+        // Populate category filter dropdown
+        function populateCategoryFilter(categories) {
+            const categoryFilter = document.getElementById('categoryFilter');
+            categories.forEach(category => {
+                const option = document.createElement('option');
+                option.value = category;
+                option.textContent = category;
+                categoryFilter.appendChild(option);
+            });
+        }
+
+        // Create article card
+        function createArticleCard(article) {
+            const tags = article.tags ? article.tags.map(tag => 
+                `<span class="tag">${tag}</span>`
+            ).join('') : '';
+            
+            return `
+                <article class="blog-card">
+                    <div class="blog-card-image" style="background-image: url('${article.image}');"></div>
+                    <div class="blog-card-content">
+                        <h3 class="blog-card-title">${article.title}</h3>
+                        <p class="blog-card-date">${article.date} • ${article.source} • ${article.category}</p>
+                        <p style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 1rem;">${article.description}</p>
+                        <div class="tags">${tags}</div>
+                        <a href="#" class="blog-card-link">READ MORE</a>
+                    </div>
+                </article>
+            `;
+        }
+
+        // Display articles
+        function displayArticles(articles) {
+            const blogGrid = document.getElementById('blogGrid');
+            if (articles.length === 0) {
+                blogGrid.innerHTML = '<div class="loading">No articles found.</div>';
+            } else {
+                blogGrid.innerHTML = articles.map(createArticleCard).join('');
+            }
+        }
+
+        // Filter articles
+        function filterArticles() {
+            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+            const selectedCategory = document.getElementById('categoryFilter').value;
+            
+            filteredArticles = allArticles.filter(article => {
+                const matchesSearch = 
+                    article.title.toLowerCase().includes(searchTerm) ||
+                    article.description.toLowerCase().includes(searchTerm) ||
+                    article.tags.some(tag => tag.toLowerCase().includes(searchTerm));
+                
+                const matchesCategory = !selectedCategory || article.category === selectedCategory;
+                
+                return matchesSearch && matchesCategory;
+            });
+            
+            displayArticles(filteredArticles);
+            updateStats();
+        }
+
+        // Update statistics
+        function updateStats() {
+            const stats = document.getElementById('stats');
+            stats.innerHTML = `
+                <span>Total Articles: ${allArticles.length}</span>
+                <span>Showing: ${filteredArticles.length}</span>
+                <span>Categories: ${new Set(allArticles.map(a => a.category)).size}</span>
+            `;
+        }
+
+        // Initialize the page
+        document.addEventListener('DOMContentLoaded', function() {
+            // Load dataset
+            loadDataset();
+            
+            // Add event listeners
+            document.getElementById('searchInput').addEventListener('input', filterArticles);
+            document.getElementById('categoryFilter').addEventListener('change', filterArticles);
+        });
+
+        // Example functions for data manipulation
+        function getArticlesByCategory(category) {
+            return allArticles.filter(article => article.category === category);
+        }
+
+        function getLatestArticles(count = 3) {
+            return allArticles
+                .sort((a, b) => new Date(b.date) - new Date(a.date))
+                .slice(0, count);
+        }
+
+        function searchByTags(tags) {
+            return allArticles.filter(article => 
+                tags.some(tag => article.tags.includes(tag))
+            );
+        }
+    </script>
+</body>
+</html>

booknap project/login.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Login - booknap</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+  <style>
+    :root {
+      --bg: #0f172a;
+      --card: #0b1223;
+      --muted: #94a3b8;
+      --text: #e2e8f0;
+      --brand: #3b82f6;
+      --brand-2: #6366f1;
+    }
+    body { background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124); min-height: 100vh; color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; }
+    .header { position: sticky; top: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(7,10,20,0.55); z-index: 20; box-shadow: none; }
+    .nav { border-bottom: 1px solid rgba(255,255,255,0.06); }
+    .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 2rem; }
+    .nav-logo i { color: var(--brand); }
+    .nav-link { color: var(--muted); text-decoration: none; font-weight: 600; }
+    .nav-link:hover, .nav-link.active { color: var(--text); }
+    .login-btn { background: linear-gradient(90deg, #3b82f6, #6366f1); color: white; padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-block; }
+    .login-btn:hover { background: linear-gradient(90deg, #2563eb, #4f46e5); }
+
+    .auth { display: grid; place-items: center; padding: 4rem 1rem; }
+    .auth-card { width: 100%; max-width: 480px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 2rem; box-shadow: 0 16px 40px rgba(0,0,0,0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
+    .auth-title { font-size: 1.75rem; font-weight: 800; margin: 0 0 0.25rem 0; }
+    .auth-sub { color: var(--muted); margin: 0 0 1.5rem 0; }
+    .field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
+    .label { font-weight: 600; font-size: 0.9rem; color: #cbd5e1; }
+    .input { background: rgba(15,23,42,0.7); color: var(--text); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.75rem 0.9rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
+    .input:focus { border-color: rgba(59,130,246,0.55); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
+    .row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 0.25rem 0 1rem; }
+    .muted-link { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
+    .muted-link:hover { color: #cbd5e1; }
+    .submit { width: 100%; display: inline-block; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: white; font-weight: 800; text-align: center; padding: 0.85rem 1rem; border-radius: 12px; text-decoration: none; border: 0; cursor: pointer; }
+    .or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--muted); }
+    .or::before, .or::after { content: ""; height: 1px; background: rgba(255,255,255,0.15); }
+    .oauth { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background: rgba(255,255,255,0.06); color: var(--text); padding: 0.75rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 700; border: 1px solid rgba(255,255,255,0.12); }
+    .footer-note { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; text-align: center; }
+    .footer-note a { color: #93c5fd; text-decoration: none; font-weight: 600; }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <nav class="nav">
+      <div class="nav-container">
+        <div class="nav-logo">
+          <i class="fas fa-book-open"></i>
+          <span>booknap</span>
+        </div>
+        <ul class="nav-menu" style="display:flex; gap:2rem; list-style:none; margin-left:auto;">
+          <li><a href="books.html" class="nav-link">Home</a></li>
+          <li><a href="pricing.html" class="nav-link">Pricing</a></li>
+          <li><a href="blog.html" class="nav-link">Blog</a></li>
+        </ul>
+        <div class="nav-login">
+          <a href="login.html" class="login-btn">Login</a>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <main class="auth">
+    <section class="auth-card">
+      <h1 class="auth-title">Welcome back</h1>
+      <p class="auth-sub">Sign in to continue your reading journey</p>
+      <form id="loginForm">
+        <div class="field">
+          <label class="label" for="email">Email</label>
+          <input class="input" id="email" name="email" type="email" placeholder="you@example.com" required />
+        </div>
+        <div class="field">
+          <label class="label" for="password">Password</label>
+          <input class="input" id="password" name="password" type="password" placeholder="••••••••" required />
+        </div>
+        <div class="row">
+          <label style="display:flex; align-items:center; gap:0.5rem; color:#cbd5e1;">
+            <input type="checkbox" style="accent-color:#3b82f6;" /> Remember me
+          </label>
+          <a class="muted-link" href="#">Forgot password?</a>
+        </div>
+        <button class="submit" type="submit">Sign in</button>
+      </form>
+      <div class="or">or</div>
+      <a class="oauth" href="#"><i class="fab fa-google"></i> Continue with Google</a>
+      <p class="footer-note">New to booknap? <a href="signup.html">Create an account</a></p>
+    </section>
+  </main>
+  <script>
+    document.getElementById('loginForm').addEventListener('submit', async function(e) {
+      e.preventDefault();
+      const email = document.getElementById('email').value.trim();
+      const password = document.getElementById('password').value;
+      try {
+        const res = await fetch('/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password })
+        });
+        const data = await res.json();
+        if (!res.ok) {
+          alert(data.error || 'Login failed');
+          return;
+        }
+        alert('Logged in as ' + data.user.email);
+        window.location.href = 'books.html';
+      } catch (err) {
+        alert('Network error: ' + err.message);
+      }
+    });
+  </script>
+</body>
+</html>
+
+

booknap project/pricing.html

@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pricing - booknap</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+  <style>
+    :root {
+      --bg: #0f172a;
+      --card: #0b1223;
+      --muted: #94a3b8;
+      --text: #e2e8f0;
+      --brand: #3b82f6;
+      --brand-2: #6366f1;
+    }
+    body { background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124); color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+    .container { max-width: 100%; margin: 0 auto; padding: 0 20px; }
+    /* Match pricing header/nav styling */
+    .header { position: sticky; top: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(7,10,20,0.55); z-index: 20; box-shadow: none; }
+    .nav { border-bottom: 1px solid rgba(255,255,255,0.06); }
+    .nav-logo i { color: var(--brand); }
+    .nav-link { color: var(--muted); text-decoration: none; font-weight: 600; }
+    .nav-link:hover, .nav-link.active { color: var(--text); }
+    .login-btn { background: var(--brand); color: white; padding: 0.6rem 1.1rem; border-radius: 9px; text-decoration: none; font-weight: 700; display: inline-block; }
+    
+    /* Navigation Login Button */
+    .nav-container {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+    }
+    
+    .nav-menu {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+      margin-left: auto;
+    }
+    
+    .nav-login {
+      margin-left: 0;
+    }
+    
+    .login-btn {
+      background: linear-gradient(90deg, #3b82f6, #6366f1);
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: background-color 0.2s ease;
+      display: inline-block;
+    }
+    
+    .login-btn:hover {
+      background: linear-gradient(90deg, #2563eb, #4f46e5);
+    }
+    
+    .signup-btn {
+      background: transparent;
+      color: var(--text);
+      padding: 0.6rem 1.1rem;
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      border-radius: 9px;
+      text-decoration: none;
+      font-weight: 700;
+      display: inline-block;
+      margin-left: 0.5rem;
+      transition: all 0.2s ease;
+    }
+    
+    .signup-btn:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+    
+    /* Search Bar Styles */
+    .search-container {
+      margin-left: 0.5rem;
+    }
+    
+    .search-bar {
+      position: relative;
+      display: flex;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 25px;
+      padding: 0.5rem 1rem;
+      min-width: 300px;
+      transition: all 0.3s ease;
+    }
+    
+    .search-bar:focus-within {
+      background: rgba(0, 0, 0, 0.4);
+      border-color: rgba(59, 130, 246, 0.5);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+    
+    .search-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.75rem;
+      font-size: 0.9rem;
+    }
+    
+    .search-input {
+      background: transparent;
+      border: none;
+      color: var(--text);
+      font-size: 0.9rem;
+      font-weight: 500;
+      width: 100%;
+      outline: none;
+    }
+    
+    .search-input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+    
+    .search-input:focus::placeholder {
+      color: rgba(255, 255, 255, 0.3);
+    }
+    
+    /* Responsive search bar */
+    @media (max-width: 768px) {
+      .search-container {
+        margin-left: 0.5rem;
+      }
+      
+      .search-bar {
+        min-width: 200px;
+      }
+    }
+    
+    @media (max-width: 600px) {
+      .search-container {
+        margin-left: 0.25rem;
+      }
+      
+      .search-bar {
+        min-width: 150px;
+        padding: 0.4rem 0.8rem;
+      }
+    }
+
+    .hero { padding: 3.5rem 0 2rem; text-align: center; }
+    .hero h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
+    .hero p { color: var(--muted); max-width: 720px; margin: 0.75rem auto 0; }
+
+    .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 2.5rem 0 3rem; width: 100%; max-width: 100%; }
+    /* .plans::-webkit-scrollbar { height: 8px; }
+    .plans::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; }
+    .plans::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 999px; } */
+    .plan-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; min-height: 100%; width: 100%; }
+    .plan-card .features { flex: 1; gap: 0.75rem; }
+    .plan-card .features li { padding: 0.1rem 0; }
+    .plan-card .cta { margin-top: auto; }
+
+    @media (max-width: 992px) {
+      .plans { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
+    }
+    @media (max-width: 600px) {
+      .plans { grid-template-columns: 1fr; gap: 1rem; }
+      .plan-card { padding: 1.5rem; }
+    }
+
+    .plan-title { font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
+    .price { font-size: 2rem; font-weight: 800; }
+    .price small { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
+    .badge { font-size: 0.75rem; color: white; background: linear-gradient(90deg, var(--brand), var(--brand-2)); padding: 0.25rem 0.5rem; border-radius: 999px; display: inline-block; font-weight: 700; }
+    .features { margin-top: 0.5rem; display: grid; gap: 0.5rem; color: var(--text); }
+    .features li { display: flex; align-items: center; gap: 0.5rem; }
+    .features i { color: #10b981; }
+    .cta { margin-top: 0.75rem; display: inline-block; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: white; text-decoration: none; font-weight: 800; padding: 0.6rem 1rem; border-radius: 10px; text-align: center; }
+
+    .why { margin: 2.5rem 0 3rem; }
+    .why h2 { text-align: center; font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
+    .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
+    .why-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 1rem; }
+    .why-card h3 { font-weight: 800; margin-bottom: 0.25rem; }
+    .why-card p { color: var(--muted); font-size: 0.95rem; }
+
+    footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 1.5rem 0; color: var(--muted); }
+    
+    /* Dropdown Menu Styles */
+    .dropdown {
+      position: relative;
+    }
+    
+    .dropdown-toggle {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      cursor: pointer;
+    }
+    
+    .dropdown-toggle i {
+      font-size: 0.8rem;
+      transition: transform 0.2s ease;
+    }
+    
+    .dropdown.active .dropdown-toggle i {
+      transform: rotate(180deg);
+    }
+    
+    .dropdown-menu {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(15, 23, 42, 0.95);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 12px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      min-width: 500px;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+      z-index: 1000;
+      margin-top: 1rem;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+    
+    .dropdown.active .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+    }
+    
+    .dropdown-content {
+      display: flex;
+      padding: 2rem;
+    }
+    
+    .dropdown-section {
+      flex: 1;
+    }
+    
+    .dropdown-section h4 {
+      color: #e2e8f0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin: 0 0 1rem 0;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    
+    .dropdown-section ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    
+    .dropdown-section li {
+      margin-bottom: 0.75rem;
+    }
+    
+    .dropdown-section a {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      color: #94a3b8;
+      text-decoration: none;
+      font-size: 0.875rem;
+      padding: 0.5rem;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+    }
+    
+    .dropdown-section a:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e2e8f0;
+    }
+    
+    .dropdown-section i {
+      font-size: 1rem;
+      width: 20px;
+      text-align: center;
+    }
+    
+    .dropdown-divider {
+      width: 1px;
+      background: rgba(255, 255, 255, 0.2);
+      margin: 0 1.5rem;
+    }
+    
+    .all-categories {
+      color: #60a5fa !important;
+      font-weight: 500;
+      margin-top: 1rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    
+    .all-categories:hover {
+      background: rgba(59, 130, 246, 0.2) !important;
+      color: #93c5fd !important;
+    }
+    
+    .all-categories i {
+      font-size: 0.75rem;
+      transition: transform 0.2s ease;
+    }
+    
+    .all-categories:hover i {
+      transform: translateX(3px);
+    }
+    
+    /* Responsive dropdown adjustments */
+    @media (max-width: 768px) {
+      .dropdown-menu {
+        min-width: 300px;
+        left: 0;
+        transform: none;
+      }
+      
+      .dropdown-content {
+        flex-direction: column;
+        padding: 1.5rem;
+      }
+      
+      .dropdown-divider {
+        width: 100%;
+        height: 1px;
+        margin: 1rem 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <nav class="nav">
+      <div class="nav-container">
+        <div class="nav-logo">
+          <i class="fas fa-book-open"></i>
+          <span>booknap</span>
+        </div>
+        <div class="search-container">
+          <div class="search-bar">
+            <i class="fas fa-search search-icon"></i>
+            <input type="text" placeholder="Find a book..." class="search-input">
+          </div>
+        </div>
+        <ul class="nav-menu">
+          <li><a href="books.html" class="nav-link">Home</a></li>
+          <li class="dropdown">
+            <a href="#" class="nav-link dropdown-toggle">Book Summaries <i class="fas fa-chevron-down"></i></a>
+            <div class="dropdown-menu">
+              <div class="dropdown-content">
+                <div class="dropdown-section">
+                  <h4>Browse by type</h4>
+                  <ul>
+                    <li><a href="#"><i class="fas fa-book-open" style="color: #10b981;"></i> Text Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-headphones" style="color: #3b82f6;"></i> Audio Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-play-circle" style="color: #8b5cf6;"></i> Video Summaries</a></li>
+                    <li><a href="#"><i class="fas fa-file-pdf" style="color: #f59e0b;"></i> PDF Downloads</a></li>
+                    <li><a href="#"><i class="fas fa-mobile-alt" style="color: #06b6d4;"></i> Mobile App</a></li>
+                  </ul>
+                </div>
+                <div class="dropdown-divider"></div>
+                <div class="dropdown-section">
+                  <h4>Browse by topic</h4>
+                  <ul>
+                    <li><a href="#"><i class="fas fa-brain" style="color: #f59e0b;"></i> Psychology</a></li>
+                    <li><a href="#"><i class="fas fa-chart-line" style="color: #10b981;"></i> Business</a></li>
+                    <li><a href="#"><i class="fas fa-heart" style="color: #ef4444;"></i> Self-Help</a></li>
+                    <li><a href="#"><i class="fas fa-graduation-cap" style="color: #8b5cf6;"></i> Education</a></li>
+                    <li><a href="#"><i class="fas fa-lightbulb" style="color: #06b6d4;"></i> Innovation</a></li>
+                  </ul>
+                  <a href="#" class="all-categories">all categories <i class="fas fa-arrow-right"></i></a>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li><a href="pricing.html" class="nav-link active">Pricing</a></li>
+          <li><a href="blog.html" class="nav-link">Blog</a></li>
+        </ul>
+        <div class="nav-login">
+          <a href="login.html" class="login-btn">Login</a>
+          <a href="signup.html" class="signup-btn">Sign Up</a>
+        </div>
+        <div class="nav-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero container">
+      <h1>You're ready to grow! We're here to help.</h1>
+      <p>booknap helps you achieve your goals efficiently with bite-sized book summaries.</p>
+    </section>
+
+    <section class="plans container">
+      <article class="plan-card">
+        <div class="plan-title">FREE</div>
+        <div class="price">$0 <small>/ forever</small></div>
+        <ul class="features">
+          <li><i class="fas fa-check-circle"></i> Get access to 2 free summaries</li>
+        </ul>
+        <a class="cta" href="#">Get Started</a>
+      </article>
+
+      <article class="plan-card">
+        <div class="plan-title">Premium Weekly</div>
+        <div class="price">$4.99 <small>/ week</small></div>
+        <ul class="features">
+          <li><i class="fas fa-check-circle"></i> All Premium features</li>
+          <li><i class="fas fa-check-circle"></i> Cancel anytime</li>
+          <li><i class="fas fa-check-circle"></i> Best for short-term goals</li>
+        </ul>
+        <a class="cta" href="#">Buy Now</a>
+      </article>
+
+      <article class="plan-card">
+        <div class="badge">Best Value</div>
+        <div class="plan-title">Premium Yearly</div>
+        <div class="price">$49 <small>/ year</small></div>
+        <ul class="features">
+          <li><i class="fas fa-check-circle"></i> Text, audio, and visual summaries</li>
+          <li><i class="fas fa-check-circle"></i> Visual book summaries</li>
+          <li><i class="fas fa-check-circle"></i> PDF downloads</li>
+          <li><i class="fas fa-check-circle"></i> Mobile app</li>
+          <li><i class="fas fa-check-circle"></i> Download offline</li>
+          <li><i class="fas fa-check-circle"></i> Audio narrations</li>
+          <li><i class="fas fa-check-circle"></i> Quizzes</li>
+          <li><i class="fas fa-check-circle"></i> Sync with Kindle</li>
+          <li><i class="fas fa-check-circle"></i> New content weekly</li>
+          <li><i class="fas fa-check-circle"></i> Cancel anytime</li>
+        </ul>
+        <a class="cta" href="#">Buy Now</a>
+      </article>
+
+      <article class="plan-card">
+        <div class="plan-title">Premium Monthly</div>
+        <div class="price">$12.99 <small>/ month</small></div>
+        <ul class="features">
+          <li><i class="fas fa-check-circle"></i> Text, audio, and visual summaries</li>
+          <li><i class="fas fa-check-circle"></i> Visual book summaries</li>
+          <li><i class="fas fa-check-circle"></i> PDF downloads</li>
+          <li><i class="fas fa-check-circle"></i> Mobile app</li>
+          <li><i class="fas fa-check-circle"></i> Download offline</li>
+          <li><i class="fas fa-check-circle"></i> Audio narrations</li>
+          <li><i class="fas fa-check-circle"></i> Quizzes</li>
+          <li><i class="fas fa-check-circle"></i> Sync with Kindle</li>
+          <li><i class="fas fa-check-circle"></i> New content weekly</li>
+          <li><i class="fas fa-check-circle"></i> Cancel anytime</li>
+        </ul>
+        <a class="cta" href="#">Buy Now</a>
+      </article>
+    </section>
+
+    <section class="why container">
+      <h2>Not Sure Yet? Here’s Why booknap Is Worth It</h2>
+      <div class="why-grid">
+        <div class="why-card">
+          <h3>High-Quality Titles</h3>
+          <p>Our summaries are unbiased, concise, and comprehensive, giving you the most valuable insights fast.</p>
+        </div>
+        <div class="why-card">
+          <h3>New content added constantly</h3>
+          <p>We add new content weekly, including bestsellers.</p>
+        </div>
+        <div class="why-card">
+          <h3>Learn on the go</h3>
+          <p>Read or listen anywhere—iOS, tablet, laptop, and Kindle.</p>
+        </div>
+        <div class="why-card">
+          <h3>Cancel anytime</h3>
+          <p>Changed your mind? Cancel your subscription anytime.</p>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; 2025 booknap. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <script>
+    // Book Summaries dropdown functionality - same as home page but click-based
+    document.addEventListener('DOMContentLoaded', function() {
+      const dropdownToggle = document.querySelector('.dropdown-toggle');
+      const dropdown = document.querySelector('.dropdown');
+      
+      if (dropdownToggle && dropdown) {
+        // Toggle dropdown on click (instead of hover)
+        dropdownToggle.addEventListener('click', function(e) {
+          e.preventDefault();
+          
+          // Toggle the active class on the dropdown container
+          dropdown.classList.toggle('active');
+        });
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function(e) {
+          if (!dropdown.contains(e.target)) {
+            dropdown.classList.remove('active');
+          }
+        });
+        
+        // Close dropdown when pressing Escape key
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape') {
+            dropdown.classList.remove('active');
+          }
+        });
+      }
+    });
+  </script>
+</body>
+</html>

booknap project/requirements.txt

@@ -0,0 +1,8 @@
+flask==2.3.3
+kagglehub[pandas-datasets]==0.1.0
+pandas==2.0.3
+requests==2.31.0
+SQLAlchemy==2.0.30
+psycopg2-binary==2.9.9
+flask-cors==4.0.0
+

booknap project/script.js

@@ -0,0 +1 @@
+

booknap project/setup_database.py

@@ -0,0 +1,102 @@
+#!/usr/bin/env python3
+"""
+Database setup script for Booknap
+Run this script to create the necessary database tables
+"""
+
+import os
+from sqlalchemy import create_engine, text
+from sqlalchemy.exc import SQLAlchemyError
+
+def setup_database():
+    """Set up the database schema"""
+    
+    # Database configuration - update with your actual password
+    DATABASE_URL = os.environ.get(
+        "DATABASE_URL",
+        "postgresql://postgres:YOUR_ACTUAL_PASSWORD@db.ckrqyjfdifjbsuuofegd.supabase.co:5432/postgres"
+    )
+    
+    print("Connecting to database...")
+    print(f"URL: {DATABASE_URL.replace('YOUR_ACTUAL_PASSWORD', '***')}")
+    
+    try:
+        # Create engine
+        engine = create_engine(DATABASE_URL, pool_pre_ping=True)
+        
+        # Test connection
+        with engine.connect() as conn:
+            print("✅ Database connection successful!")
+            
+            # Create users table
+            create_users_table = """
+            CREATE TABLE IF NOT EXISTS users (
+                id SERIAL PRIMARY KEY,
+                full_name VARCHAR(255) NOT NULL,
+                email VARCHAR(255) UNIQUE NOT NULL,
+                password VARCHAR(255) NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            );
+            """
+            
+            # Create index
+            create_index = """
+            CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
+            """
+            
+            # Execute schema creation
+            print("Creating users table...")
+            conn.execute(text(create_users_table))
+            
+            print("Creating email index...")
+            conn.execute(text(create_index))
+            
+            # Commit changes
+            conn.commit()
+            
+            print("✅ Database schema created successfully!")
+            
+            # Verify table exists
+            result = conn.execute(text("SELECT table_name FROM information_schema.tables WHERE table_name = 'users'"))
+            if result.fetchone():
+                print("✅ Users table verified!")
+                
+                # Show table structure
+                result = conn.execute(text("\\d users"))
+                print("\nTable structure:")
+                # Note: \d command won't work in Python, let's use a different approach
+                result = conn.execute(text("SELECT column_name, data_type, is_nullable FROM information_schema.columns WHERE table_name = 'users' ORDER BY ordinal_position"))
+                columns = result.fetchall()
+                for col in columns:
+                    print(f"  {col[0]}: {col[1]} ({'NULL' if col[2] == 'YES' else 'NOT NULL'})")
+                
+            else:
+                print("❌ Users table not found!")
+                
+    except SQLAlchemyError as e:
+        print(f"❌ Database error: {e}")
+        print("\nPlease check:")
+        print("1. Your database password is correct")
+        print("2. The database is accessible from your network")
+        print("3. Update the DATABASE_URL in this script or set the environment variable")
+        
+    except Exception as e:
+        print(f"❌ Unexpected error: {e}")
+
+if __name__ == "__main__":
+    print("🚀 Booknap Database Setup")
+    print("=" * 40)
+    
+    # Check if DATABASE_URL is set
+    if not os.environ.get("DATABASE_URL"):
+        print("⚠️  DATABASE_URL environment variable not set")
+        print("Please set it with your actual database password:")
+        print("export DATABASE_URL='postgresql://postgres:YOUR_PASSWORD@db.ckrqyjfdifjbsuuofegd.supabase.co:5432/postgres'")
+        print()
+    
+    setup_database()
+    
+    print("\n" + "=" * 40)
+    print("Setup complete!")
+

booknap project/signup.html

@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create Account - Booknap</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+
+        .signup-container {
+            width: 100%;
+            max-width: 520px;
+            padding: 20px;
+        }
+
+        .signup-card {
+            background: rgba(255,255,255,0.04);
+            -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 16px;
+            padding: 40px;
+            box-shadow: 0 16px 40px rgba(0,0,0,0.12);
+            text-align: center;
+        }
+
+        .signup-card h2 {
+            color: white;
+            margin-bottom: 10px;
+            font-size: 32px;
+            font-weight: 700;
+        }
+
+        .signup-subtitle {
+            color: #cbd5e1;
+            margin-bottom: 30px;
+            font-size: 16px;
+            font-weight: 400;
+        }
+
+        .input-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+
+        .input-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: white;
+            font-weight: 500;
+            font-size: 14px;
+        }
+
+        .input-group input {
+            width: 100%;
+            padding: 0.75rem 0.9rem;
+            border: 1px solid rgba(255,255,255,0.12);
+            border-radius: 10px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: rgba(15,23,42,0.7);
+            color: white;
+        }
+
+        .input-group input:focus {
+            outline: none;
+            border-color: rgba(59,130,246,0.55);
+            background: rgba(15,23,42,0.7);
+            box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
+        }
+
+        .input-group input::placeholder {
+            color: #94a3b8;
+        }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 20px 0;
+            font-size: 14px;
+        }
+
+        .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .checkbox-wrapper input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #3b82f6;
+        }
+
+        .checkbox-wrapper label {
+            color: white;
+            cursor: pointer;
+        }
+
+        .terms-link {
+            color: #93c5fd;
+            text-decoration: none;
+        }
+
+        .terms-link:hover {
+            text-decoration: underline;
+        }
+
+        .signup-submit-btn {
+            width: 100%;
+            padding: 0.85rem 1rem;
+            background: linear-gradient(90deg, #3b82f6, #6366f1);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin: 20px 0;
+        }
+
+        .signup-submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
+        }
+
+        .divider {
+            display: flex;
+            align-items: center;
+            margin: 25px 0;
+            color: #94a3b8;
+            font-size: 14px;
+        }
+
+        .divider::before,
+        .divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: rgba(255,255,255,0.15);
+        }
+
+        .divider span {
+            padding: 0 15px;
+        }
+
+        .google-btn {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            background: rgba(255,255,255,0.06);
+            color: white;
+            border: 1px solid rgba(255,255,255,0.12);
+            border-radius: 10px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+        }
+
+        .google-btn:hover {
+            background: rgba(255,255,255,0.08);
+            border-color: rgba(255,255,255,0.2);
+        }
+
+        .google-icon {
+            width: 20px;
+            height: 20px;
+            background: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: #1f2937;
+            font-size: 14px;
+        }
+
+        .login-link {
+            margin-top: 25px;
+            color: #94a3b8;
+            font-size: 14px;
+        }
+
+        .login-link a {
+            color: #93c5fd;
+            text-decoration: none;
+            font-weight: 600;
+        }
+
+        .login-link a:hover {
+            text-decoration: underline;
+        }
+
+        .error-message {
+            background: rgba(239, 68, 68, 0.1);
+            color: #fca5a5;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-size: 14px;
+            display: none;
+            border: 1px solid rgba(239, 68, 68, 0.2);
+        }
+
+        .success-message {
+            background: rgba(34, 197, 94, 0.1);
+            color: #86efac;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-size: 14px;
+            display: none;
+            border: 1px solid rgba(34, 197, 94, 0.2);
+        }
+
+        @media (max-width: 480px) {
+            .signup-card {
+                padding: 30px 20px;
+            }
+            
+            .signup-card h2 {
+                font-size: 28px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main class="signup-container">
+        <div class="signup-card">
+            <h2>Join Booknap</h2>
+            <p class="signup-subtitle">Create your account to start your reading journey</p>
+            
+            <div id="errorMessage" class="error-message"></div>
+            <div id="successMessage" class="success-message"></div>
+            
+            <form id="signupForm">
+                <div class="input-group">
+                    <label for="fullName">Full Name</label>
+                    <input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required>
+                </div>
+                <div class="input-group">
+                    <label for="email">Email</label>
+                    <input type="email" id="email" name="email" placeholder="Enter your email address" required>
+                </div>
+                <div class="input-group">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" name="password" placeholder="Create a strong password" required>
+                </div>
+                <div class="input-group">
+                    <label for="confirmPassword">Confirm Password</label>
+                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm your password" required>
+                </div>
+                
+                <div class="checkbox-group">
+                    <div class="checkbox-wrapper">
+                        <input type="checkbox" id="agreeTerms" name="agreeTerms" required>
+                        <label for="agreeTerms">I agree to the <a href="#" class="terms-link">Terms of Service</a></label>
+                    </div>
+                </div>
+                
+                <button type="submit" class="signup-submit-btn">Create Account</button>
+            </form>
+            
+            <div class="divider">
+                <span>or</span>
+            </div>
+            
+            <button class="google-btn">
+                <div class="google-icon">G</div>
+                Continue with Google
+            </button>
+            
+            <p class="login-link">Already have an account? <a href="login.html">Sign in</a></p>
+        </div>
+
+
+    </main>
+
+    <script>
+        document.getElementById('signupForm').addEventListener('submit', async function(event) {
+            event.preventDefault();
+            
+            const fullName = document.getElementById('fullName').value;
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            const confirmPassword = document.getElementById('confirmPassword').value;
+            const agreeTerms = document.getElementById('agreeTerms').checked;
+
+            // Hide previous messages
+            document.getElementById('errorMessage').style.display = 'none';
+            document.getElementById('successMessage').style.display = 'none';
+
+            // Basic validation
+            if (!agreeTerms) {
+                showMessage('Please agree to the Terms of Service', 'error');
+                return;
+            }
+
+            if (password !== confirmPassword) {
+                showMessage('Passwords do not match', 'error');
+                return;
+            }
+
+            if (password.length < 6) {
+                showMessage('Password must be at least 6 characters long', 'error');
+                return;
+            }
+
+            try {
+                const response = await fetch('/signup', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ fullName, email, password }),
+                });
+
+                const data = await response.json();
+                
+                if (response.ok) {
+                    showMessage(data.message, 'success');
+                    // Redirect to login page after successful signup
+                    setTimeout(() => {
+                        window.location.href = 'login.html';
+                    }, 2000);
+                } else {
+                    showMessage(data.error, 'error');
+                }
+            } catch (error) {
+                showMessage('An error occurred. Please try again.', 'error');
+            }
+        });
+
+        function showMessage(message, type) {
+            const errorDiv = document.getElementById('errorMessage');
+            const successDiv = document.getElementById('successMessage');
+            
+            if (type === 'error') {
+                errorDiv.textContent = message;
+                errorDiv.style.display = 'block';
+                successDiv.style.display = 'none';
+            } else {
+                successDiv.textContent = message;
+                successDiv.style.display = 'block';
+                errorDiv.style.display = 'none';
+            }
+        }
+    </script>
+</body>
+</html>
+

booknap project/static-blog.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blog with Static Dataset</title>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124);
+            color: #e2e8f0;
+            margin: 0;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .blog-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+        
+        .blog-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: transform 0.3s ease;
+        }
+        
+        .blog-card:hover {
+            transform: translateY(-8px);
+        }
+        
+        .blog-card-image {
+            width: 100%;
+            height: 200px;
+            background-size: cover;
+            background-position: center;
+        }
+        
+        .blog-card-content {
+            padding: 1.5rem;
+        }
+        
+        .blog-card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        
+        .blog-card-date {
+            color: #94a3b8;
+            font-size: 0.875rem;
+            margin-bottom: 1rem;
+        }
+        
+        .blog-card-link {
+            color: #8b5cf6;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+        }
+        
+        .search-bar {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 25px;
+            padding: 0.75rem 1.5rem;
+            color: #e2e8f0;
+            width: 100%;
+            max-width: 400px;
+            margin: 2rem auto;
+            display: block;
+        }
+        
+        .search-bar::placeholder {
+            color: #94a3b8;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Blog with Dataset Integration</h1>
+        
+        <input type="text" class="search-bar" placeholder="Search articles..." id="searchInput">
+        
+        <div class="blog-grid" id="blogGrid">
+            <!-- Articles will be loaded here -->
+        </div>
+    </div>
+
+    <script>
+        // Static dataset - you can replace this with your own data
+        const newsDataset = [
+            {
+                title: "The Future of Artificial Intelligence in 2024",
+                description: "Exploring the latest developments in AI technology and their impact on various industries.",
+                date: "2024-01-15",
+                source: "Tech News",
+                category: "Technology",
+                image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=500"
+            },
+            {
+                title: "Sustainable Business Practices That Drive Growth",
+                description: "How companies are implementing eco-friendly strategies while maintaining profitability.",
+                date: "2024-01-14",
+                source: "Business Weekly",
+                category: "Business",
+                image: "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=500"
+            },
+            {
+                title: "Mental Health Awareness in the Digital Age",
+                description: "Understanding the impact of social media and technology on mental well-being.",
+                date: "2024-01-13",
+                source: "Health Journal",
+                category: "Health",
+                image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500"
+            },
+            {
+                title: "Climate Change Solutions: What Works",
+                description: "Evidence-based approaches to addressing climate change at individual and corporate levels.",
+                date: "2024-01-12",
+                source: "Environmental Times",
+                category: "Environment",
+                image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500"
+            },
+            {
+                title: "The Rise of Remote Work Culture",
+                description: "How remote work is reshaping company culture and employee expectations.",
+                date: "2024-01-11",
+                source: "Workplace Insights",
+                category: "Work",
+                image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500"
+            },
+            {
+                title: "Digital Privacy in the Age of Big Data",
+                description: "Protecting personal information in an increasingly connected world.",
+                date: "2024-01-10",
+                source: "Privacy Today",
+                category: "Technology",
+                image: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=500"
+            }
+        ];
+
+        // Function to create article cards
+        function createArticleCard(article) {
+            return `
+                <article class="blog-card">
+                    <div class="blog-card-image" style="background-image: url('${article.image}');"></div>
+                    <div class="blog-card-content">
+                        <h3 class="blog-card-title">${article.title}</h3>
+                        <p class="blog-card-date">${article.date} • ${article.source} • ${article.category}</p>
+                        <p style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 1rem;">${article.description}</p>
+                        <a href="#" class="blog-card-link">READ MORE</a>
+                    </div>
+                </article>
+            `;
+        }
+
+        // Function to display articles
+        function displayArticles(articles) {
+            const blogGrid = document.getElementById('blogGrid');
+            blogGrid.innerHTML = articles.map(createArticleCard).join('');
+        }
+
+        // Function to filter articles
+        function filterArticles(searchTerm) {
+            const filtered = newsDataset.filter(article => 
+                article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                article.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                article.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                article.source.toLowerCase().includes(searchTerm.toLowerCase())
+            );
+            displayArticles(filtered);
+        }
+
+        // Initialize the page
+        document.addEventListener('DOMContentLoaded', function() {
+            // Display all articles initially
+            displayArticles(newsDataset);
+            
+            // Add search functionality
+            const searchInput = document.getElementById('searchInput');
+            searchInput.addEventListener('input', function(e) {
+                filterArticles(e.target.value);
+            });
+        });
+
+        // Example: Add new article to dataset
+        function addNewArticle(article) {
+            newsDataset.push(article);
+            displayArticles(newsDataset);
+        }
+
+        // Example: Get articles by category
+        function getArticlesByCategory(category) {
+            return newsDataset.filter(article => article.category === category);
+        }
+
+        // Example: Get latest articles
+        function getLatestArticles(count = 3) {
+            return newsDataset
+                .sort((a, b) => new Date(b.date) - new Date(a.date))
+                .slice(0, count);
+        }
+    </script>
+</body>
+</html>
+
+
+
+
+
+
+

booknap project/styles.css

@@ -0,0 +1,973 @@
+/* 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: linear-gradient(180deg, #3b82f6, #6366f1);
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Header and Navigation */
+.header {
+    background: linear-gradient(90deg, #3b82f6, #6366f1);
+    box-shadow: 0 2px 20px rgba(59, 130, 246, 0.3);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.nav {
+    padding: 1rem 0;
+}
+
+.nav-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.nav-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: white;
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.nav-logo i {
+    font-size: 1.8rem;
+    color: #ffffff;
+}
+
+.nav-menu {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+}
+
+.nav-link {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.nav-link:hover {
+    color: #ffffff;
+    transform: translateY(-2px);
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: #ffffff;
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after {
+    width: 100%;
+}
+
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+}
+
+.nav-toggle span {
+    width: 25px;
+    height: 3px;
+    background: white;
+    margin: 3px 0;
+    transition: 0.3s;
+}
+
+/* Book Details Section */
+.book-details {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, #3b82f6, #6366f1);
+    color: white;
+}
+
+.book-header {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    gap: 3rem;
+    align-items: start;
+}
+
+.book-cover-large {
+    position: relative;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s ease;
+}
+
+.book-cover-large:hover {
+    transform: translateY(-10px);
+}
+
+.book-cover-large img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.book-info-large h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 0.5rem;
+    line-height: 1.2;
+}
+
+.book-author {
+    font-size: 1.25rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.book-category {
+    display: inline-block;
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 2rem;
+}
+
+.book-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.875rem 1.5rem;
+    border: none;
+    border-radius: 10px;
+    font-size: 1rem;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary {
+    background: linear-gradient(90deg, #3b82f6, #6366f1);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.3);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Summary Section */
+.summary-section {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, #3b82f6, #6366f1);
+    color: white;
+}
+
+.summary-section h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.summary-content {
+    max-width: 800px;
+    margin: 0 auto;
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+.summary-content h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: white;
+    margin: 2rem 0 1rem 0;
+}
+
+.summary-content p {
+    margin-bottom: 1.5rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.summary-content ul, .summary-content ol {
+    margin: 1.5rem 0;
+    padding-left: 2rem;
+}
+
+.summary-content li {
+    margin-bottom: 0.75rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.summary-content strong {
+    color: white;
+    font-weight: 600;
+}
+
+/* Audio Section */
+.audio-section {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, #6366f1, #3b82f6);
+    color: white;
+}
+
+.audio-section h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.audio-player {
+    max-width: 600px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.audio-info {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.audio-info h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.audio-info p {
+    opacity: 0.9;
+}
+
+.audio-controls {
+    margin-bottom: 2rem;
+}
+
+.audio-controls audio {
+    width: 100%;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.audio-duration {
+    text-align: center;
+    margin-top: 1rem;
+    opacity: 0.8;
+}
+
+.audio-features {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.feature-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.feature-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px);
+}
+
+/* Related Books Section */
+.related-books {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, #3b82f6, #6366f1);
+    color: white;
+}
+
+.related-books h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.books-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.book-card {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    backdrop-filter: blur(10px);
+}
+
+.book-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.book-cover {
+    position: relative;
+    height: 200px;
+    overflow: hidden;
+}
+
+.book-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.book-card:hover .book-cover img {
+    transform: scale(1.05);
+}
+
+.book-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(59, 130, 246, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.book-overlay i {
+    color: white;
+    font-size: 2rem;
+}
+
+.book-card:hover .book-overlay {
+    opacity: 1;
+}
+
+.book-info {
+    padding: 1.5rem;
+}
+
+.book-info h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: white;
+    margin-bottom: 0.5rem;
+    line-height: 1.3;
+}
+
+.book-info .book-author {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.875rem;
+    margin-bottom: 0.25rem;
+}
+
+.book-info .book-category {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    display: inline-block;
+}
+
+/* Footer */
+.footer {
+    background: linear-gradient(90deg, #3b82f6, #6366f1);
+    color: white;
+    text-align: center;
+    padding: 2rem 0;
+}
+
+.footer p {
+    opacity: 0.8;
+}
+
+/* Animated Tabs Section - Blinkist Style */
+.animated-tabs-section {
+    padding: 6rem 0;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    overflow: hidden;
+}
+
+.tabs-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.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) {
+    .nav-menu {
+        display: none;
+    }
+    
+    .nav-toggle {
+        display: flex;
+    }
+    
+    .book-header {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        text-align: center;
+    }
+    
+    .book-cover-large {
+        max-width: 250px;
+        margin: 0 auto;
+    }
+    
+    .book-info-large h1 {
+        font-size: 2rem;
+    }
+    
+    .book-actions {
+        justify-content: center;
+    }
+    
+    .summary-content {
+        font-size: 1rem;
+    }
+    
+    .audio-player {
+        margin: 0 1rem;
+    }
+    
+    .books-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1.5rem;
+    }
+
+    /* Animated Tabs Responsive */
+    .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) {
+    .container {
+        padding: 0 15px;
+    }
+    
+    .book-info-large h1 {
+        font-size: 1.75rem;
+    }
+    
+    .btn {
+        padding: 0.75rem 1rem;
+        font-size: 0.875rem;
+    }
+    
+    .summary-section h2,
+    .audio-section h2,
+    .related-books h2 {
+        font-size: 2rem;
+    }
+    
+    .books-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* Animated Tabs Mobile */
+    .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;
+    }
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+}

booknap project/test_connection.py

@@ -0,0 +1,49 @@
+#!/usr/bin/env python3
+"""
+Simple database connection test
+"""
+
+import os
+from sqlalchemy import create_engine, text
+
+def test_connection():
+    """Test database connection"""
+    
+    # You need to replace YOUR_ACTUAL_PASSWORD with your real Supabase password
+    DATABASE_URL = "postgresql://postgres:YOUR_ACTUAL_PASSWORD@db.ckrqyjfdifjbsuuofegd.supabase.co:5432/postgres"
+    
+    print("Testing database connection...")
+    print(f"Host: db.ckrqyjfdifjbsuuofegd.supabase.co")
+    print(f"Port: 5432")
+    print(f"Database: postgres")
+    print(f"User: postgres")
+    print()
+    
+    try:
+        # Create engine
+        engine = create_engine(DATABASE_URL, pool_pre_ping=True)
+        
+        # Test connection
+        with engine.connect() as conn:
+            print("✅ Connection successful!")
+            
+            # Test a simple query
+            result = conn.execute(text("SELECT version()"))
+            version = result.fetchone()[0]
+            print(f"✅ Database version: {version}")
+            
+            # Test if we can create a table
+            print("✅ Database is accessible and ready for use!")
+            
+    except Exception as e:
+        print(f"❌ Connection failed: {e}")
+        print()
+        print("To fix this:")
+        print("1. Update the password in this script (replace YOUR_ACTUAL_PASSWORD)")
+        print("2. Or set the environment variable:")
+        print("   export DATABASE_URL='postgresql://postgres:YOUR_PASSWORD@db.ckrqyjfdifjbsuuofegd.supabase.co:5432/postgres'")
+        print("3. Make sure your IP is whitelisted in Supabase")
+
+if __name__ == "__main__":
+    test_connection()
+