<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Fab Web - Stories of Human Brilliance</title>
    <meta name="description" content="Discover uplifting stories from around the world showcasing the fabulous nature of humanity">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
    
    <!-- PWA Support -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#FF6B6B">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="container">
            <div class="nav-brand">
                <i class="fas fa-heart"></i>
                <span>The Fab Web</span>
            </div>
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link">Home</a></li>
                <li><a href="#stories" class="nav-link">Stories</a></li>
                <li><a href="#categories" class="nav-link">Categories</a></li>
                <li><a href="#about" class="nav-link">About</a></li>
                <li><button class="theme-toggle" id="themeToggle"><i class="fas fa-moon"></i></button></li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Stories That Inspire Humanity</h1>
            <p class="hero-subtitle">Discover the fabulous ways humans are making the world a better place</p>
            <div class="hero-stats">
                <div class="stat">
                    <span class="stat-number" data-count="1000">0</span>+
                    <span class="stat-label">Stories Shared</span>
                </div>
                <div class="stat">
                    <span class="stat-number" data-count="195">0</span>
                    <span class="stat-label">Countries</span>
                </div>
                <div class="stat">
                    <span class="stat-number" data-count="50000">0</span>+
                    <span class="stat-label">Lives Touched</span>
                </div>
            </div>
            <button class="cta-button" id="exploreBtn">
                Explore Stories <i class="fas fa-arrow-right"></i>
            </button>
        </div>
        <div class="hero-visual">
            <div class="floating-card" style="--delay: 0s;">
                <i class="fas fa-hands-helping"></i>
            </div>
            <div class="floating-card" style="--delay: 1s;">
                <i class="fas fa-globe"></i>
            </div>
            <div class="floating-card" style="--delay: 2s;">
                <i class="fas fa-heart"></i>
            </div>
        </div>
    </section>

    <!-- Featured Story -->
    <section class="featured-story">
        <div class="container">
            <h2 class="section-title">Today's Featured Story</h2>
            <div class="featured-card" id="featuredStory">
                <div class="featured-image">
                    <img src="https://source.unsplash.com/800x600/?kindness,humanity" alt="Featured Story">
                    <span class="featured-badge">Featured</span>
                </div>
                <div class="featured-content">
                    <span class="story-category">Community Impact</span>
                    <h3 class="story-title">Loading amazing story...</h3>
                    <p class="story-excerpt">Discovering the latest inspiring story from around the world...</p>
                    <div class="story-meta">
                        <span><i class="fas fa-calendar"></i> <span class="story-date">Today</span></span>
                        <span><i class="fas fa-map-marker-alt"></i> <span class="story-location">World</span></span>
                    </div>
                    <a href="#" class="read-more">Read Full Story <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories -->
    <section id="categories" class="categories">
        <div class="container">
            <h2 class="section-title">Explore by Category</h2>
            <div class="category-grid">
                <div class="category-card" data-category="innovation">
                    <i class="fas fa-lightbulb"></i>
                    <h3>Innovation</h3>
                    <p>Breakthrough solutions changing lives</p>
                </div>
                <div class="category-card" data-category="environment">
                    <i class="fas fa-leaf"></i>
                    <h3>Environment</h3>
                    <p>Protecting our planet together</p>
                </div>
                <div class="category-card" data-category="community">
                    <i class="fas fa-users"></i>
                    <h3>Community</h3>
                    <p>Building stronger neighborhoods</p>
                </div>
                <div class="category-card" data-category="health">
                    <i class="fas fa-heartbeat"></i>
                    <h3>Health</h3>
                    <p>Advancing wellness for all</p>
                </div>
                <div class="category-card" data-category="education">
                    <i class="fas fa-graduation-cap"></i>
                    <h3>Education</h3>
                    <p>Empowering through knowledge</p>
                </div>
                <div class="category-card" data-category="kindness">
                    <i class="fas fa-hand-holding-heart"></i>
                    <h3>Kindness</h3>
                    <p>Random acts changing lives</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Stories Grid -->
    <section id="stories" class="stories">
        <div class="container">
            <div class="stories-header">
                <h2 class="section-title">Latest Inspiring Stories</h2>
                <div class="filter-buttons">
                    <button class="filter-btn active" data-filter="all">All</button>
                    <button class="filter-btn" data-filter="trending">Trending</button>
                    <button class="filter-btn" data-filter="recent">Recent</button>
                    <button class="filter-btn" data-filter="popular">Popular</button>
                </div>
            </div>
            <div class="stories-grid" id="storiesGrid">
                <!-- Stories will be loaded here dynamically -->
            </div>
            <button class="load-more" id="loadMore">
                Load More Stories <i class="fas fa-chevron-down"></i>
            </button>
        </div>
    </section>

    <!-- Live Feed -->
    <section class="live-feed">
        <div class="container">
            <h2 class="section-title">
                <span class="live-indicator"></span>
                Live Happiness Feed
            </h2>
            <div class="feed-container" id="liveFeed">
                <!-- Live updates will appear here -->
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section class="newsletter">
        <div class="container">
            <div class="newsletter-content">
                <h2>Get Daily Dose of Positivity</h2>
                <p>Join thousands receiving inspiring stories in their inbox</p>
                <form class="newsletter-form" id="newsletterForm">
                    <input type="email" placeholder="Enter your email" required>
                    <button type="submit">Subscribe <i class="fas fa-paper-plane"></i></button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <h3><i class="fas fa-heart"></i> The Fab Web</h3>
                    <p>Celebrating humanity's brightest moments</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-links">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#stories">Latest Stories</a></li>
                        <li><a href="#categories">Categories</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="submit.html">Submit Story</a></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4>Resources</h4>
                    <ul>
                        <li><a href="api.html">API Access</a></li>
                        <li><a href="widget.html">Widget</a></li>
                        <li><a href="privacy.html">Privacy Policy</a></li>
                        <li><a href="terms.html">Terms of Use</a></li>
                    </ul>
                </div>
                <div class="footer-stats">
                    <h4>Global Impact</h4>
                    <div class="impact-counter">
                        <span class="counter" data-target="1000000">0</span>
                        <span>Smiles Created</span>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 The Fab Web. Made with <i class="fas fa-heart"></i> for humanity</p>
            </div>
        </div>
    </footer>

    <!-- Back to Top -->
    <button class="back-to-top" id="backToTop">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Loading Spinner -->
    <div class="loader" id="loader">
        <div class="spinner"></div>
    </div>

    <!-- Scripts -->
    <script src="js/config.js"></script>
    <script src="js/api.js"></script>
    <script src="js/stories.js"></script>
    <script src="js/main.js"></script>
</body>
</html>