New Library Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Reading Room Pro | Modern Library</title>
    
    <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=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

</head>
<body>
    <header class="header">
        <div class="container navbar">
            <a href="#" class="logo">Reading<span>Room</span></a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li>
                    <a href="#about">About <i class="fa-solid fa-angle-down fa-xs"></i></a>
                    <ul class="dropdown">
                        <li><a href="#stats">Our Impact</a></li>
                        <li><a href="#tour">Virtual Tour</a></li>
                        <li><a href="#faq">FAQ</a></li>
                    </ul>
                </li>
                <li><a href="#books">Collection</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="#contact">Contact</a></li>
                <li>
                    <i class="fa-solid fa-circle-half-stroke theme-switcher" id="theme-switcher" title="Toggle Theme"></i>
                </li>
            </ul>
            <div class="menu-toggle">
                <div class="bar"></div><div class="bar"></div><div class="bar"></div>
            </div>
        </div>
    </header>

<main>
        <section class="hero" id="home">
            <div class="container hero-content">
                <h1>Where Every Page is a New Adventure</h1>
                <p>Discover worlds of knowledge, fiction, and wonder. Your community hub for learning, connection, and inspiration, now brighter than ever.</p>
                <a href="#books" class="btn">Explore Our Collection</a>
            </div>
        </section>

<section id="stats" class="animate-on-scroll">
            <div class="container">
                <h2 class="section-title">Our Library by the Numbers</h2>
                <div class="stats-grid">
                    <div class="stat-item">
                        <i class="fa-solid fa-book-open-reader"></i>
                        <div class="stat-number" data-target="150000">0</div>
                        <div class="stat-label">Books & Media</div>
                    </div>
                    <div class="stat-item">
                        <i class="fa-solid fa-users"></i>
                        <div class="stat-number" data-target="25000">0</div>
                        <div class="stat-label">Active Members</div>
                    </div>
                    <div class="stat-item">
                        <i class="fa-solid fa-calendar-check"></i>
                        <div class="stat-number" data-target="500">0</div>
                        <div class="stat-label">Events Hosted Yearly</div>
                    </div>
                    <div class="stat-item">
                        <i class="fa-solid fa-cloud-arrow-down"></i>
                        <div class="stat-number" data-target="75000">0</div>
                        <div class="stat-label">Digital Downloads</div>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="books" class="animate-on-scroll">
            <div class="container">
                <h2 class="section-title">Explore Our Collection</h2>
                <div class="book-filter-buttons">
                    <button class="filter-btn active" data-filter="*">All</button>
                    <button class="filter-btn" data-filter="fiction">Fiction</button>
                    <button class="filter-btn" data-filter="science">Science</button>
                    <button class="filter-btn" data-filter="history">History</button>
                </div>
                <div class="books-grid">
                    <div class="book-card" data-genre="fiction">
                        <img loading="lazy" src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=400&q=75&auto=format&fit=crop" alt="Book 1">
                        <div class="book-info"><h4>The Midnight Star</h4><p>by Elena Vance</p></div>
                    </div>
                    <div class="book-card" data-genre="science">
                        <img loading="lazy" src="https://images.unsplash.com/photo-1592496431122-2349e0fbc666?w=400&q=75&auto=format&fit=crop" alt="Book 2">
                        <div class="book-info"><h4>Quantum Echoes</h4><p>by Dr. Aris Thorne</p></div>
                    </div>
                    <div class="book-card" data-genre="history">
                        <img loading="lazy" src="https://images.pexels.com/photos/46274/pexels-photo-46274.jpeg" alt="Book 3">
                        <div class="book-info"><h4>Empires of Silk</h4><p>by Adrian Finch</p></div>
                    </div>
                    <div class="book-card" data-genre="fiction">
                        <img loading="lazy" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?w=400&q=75&auto=format&fit=crop" alt="Book 4">
                        <div class="book-info"><h4>Chronicles of the Lost City</h4><p>by Samuel Blackwood</p></div>
                    </div>
                </div>
            </div>
        </section>

<section id="services" class="animate-on-scroll">
            <div class="container">
                <h2 class="section-title">Everything We Offer</h2>
                <div class="services-grid">
                    <div class="service-card">
                        <i class="service-icon fa-solid fa-book-journal-whills"></i>
                        <h4>Vast Book Collection</h4><p>Access thousands of books, from timeless classics to modern bestsellers.</p>
                    </div>
                    <div class="service-card">
                        <i class="service-icon fa-solid fa-laptop-file"></i>
                        <h4>Digital Resources</h4><p>Enjoy free e-books, audiobooks, online courses, and research databases.</p>
                    </div>
                    <div class="service-card">
                        <i class="service-icon fa-solid fa-mug-saucer"></i>
                        <h4>Quiet Study Areas</h4><p>Find your focus in our dedicated quiet zones and private study rooms.</p>
                    </div>
                    <div class="service-card">
                        <i class="service-icon fa-solid fa-child-reaching"></i>
                        <h4>Kids & Teen Programs</h4><p>Engaging activities, story times, and workshops for our younger readers.</p>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="tour" class="animate-on-scroll">
            <div class="container">
                <h2 class="section-title">Take a Virtual Tour</h2>
                <div class="tour-content">
                    <p>Can't make it in person? Experience the welcoming atmosphere of The Reading Room from anywhere. Explore our spaces and see what awaits you.</p>
                    <div class="video-container">
                        <iframe loading="lazy" src="https://www.youtube.com/embed/a3ICNMQW7Ok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="news" class="animate-on-scroll">
            <div class="container">
                <h2 class="section-title">Latest News & Blog</h2>
                <div class="news-grid">
                    <div class="news-card">
                        <img loading="lazy" src="https://images.unsplash.com/photo-1516979187457-637abb4f9353?w=500&q=75&auto=format&fit=crop" alt="News 1">
                        <div class="news-content">
                            <p class="news-meta">AUG 01, 2025 | COMMUNITY</p>
                            <h4>Announcing Our Annual Summer Reading Challenge</h4>
                            <a href="#" class="btn">Read More</a>
                        </div>
                    </div>
                    <div class="news-card">
                        <img loading="lazy" src="https://images.pexels.com/photos/46274/pexels-photo-46274.jpeg" alt="News 2">
                        <div class="news-content">
                            <p class="news-meta">JUL 25, 2025 | EVENTS</p>
                            <h4>Recap: A Wonderful Evening with Author Elena Vance</h4>
                            <a href="#" class="btn">Read More</a>
                        </div>
                    </div>
                    <div class="news-card">
                        <img loading="lazy" src="https://images.unsplash.com/photo-1531988042231-d39a9cc12a9a?w=500&q=75&auto=format&fit=crop" alt="News 3">
                        <div class="news-content">
                            <p class="news-meta">JUL 18, 2025 | TECHNOLOGY</p>
                            <h4>Our Digital Archive Just Got a Major Upgrade</h4>
                            <a href="#" class="btn">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="membership" class="animate-on-scroll">
            <div class="container">
                <div class="membership-cta">
                    <h2>Become a Member Today!</h2>
                    <p>It's free and easy to join. Unlock a world of resources with your library card.</p>
                    <a href="#" class="btn">Sign Up Now</a>
                </div>
            </div>
        </section>

<section id="faq" class="animate-on-scroll">
            <div class="container">
                <h2 class="section-title">Frequently Asked Questions</h2>
                <div class="faq-container">
                    <details class="faq-item">
                        <summary>How do I get a library card?</summary>
                        <div class="faq-answer"><p>You can sign up online via our membership page or in person at our front desk. All you need is a valid photo ID and proof of address.</p></div>
                    </details>
                    <details class="faq-item">
                        <summary>What are the library's opening hours?</summary>
                        <div class="faq-answer"><p>We are open Monday to Friday from 9 AM to 8 PM, and Saturday to Sunday from 10 AM to 5 PM. We are closed on public holidays.</p></div>
                    </details>
                    <details class="faq-item">
                        <summary>Can I borrow e-books and audiobooks?</summary>
                        <div class="faq-answer"><p>Absolutely! Your library card gives you 24/7 access to our extensive digital library through our website or partner apps.</p></div>
                    </details>
                </div>
            </div>
        </section>
        
        </main>

<footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <h4>The Reading Room</h4>
                    <p>Fostering a lifelong love of learning and reading within our community since 1975.</p>
                </div>
                <div class="footer-col"><h4>Quick Links</h4><ul><li><a href="#home">Home</a></li><li><a href="#books">Catalog</a></li><li><a href="#news">News</a></li></ul></div>
                <div class="footer-col"><h4>Contact</h4><ul><li><a href="#">123 Knowledge Ave</a></li><li><a href="#">(555) 123-4567</a></li><li><a href="#">hello@readingroom.com</a></li></ul></div>
                <div class="footer-col">
                    <h4>Follow Us</h4>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 The Reading Room. All Rights Reserved. </p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

/* --- CSS STYLES --- */

/* 1. CSS VARIABLES & GLOBAL RESETS */
        :root {
            --primary-color: #FFC72C;
            --secondary-color: #FFE18B;
            --dark-color: #2C2C2C;
            --light-color: #FFFFFF;
            --gray-color: #F9F9F9;
            --text-color: #333333;
            --font-family: 'Poppins', sans-serif;
            --transition-speed: 0.3s ease;
            --shadow: 0 10px 20px rgba(0,0,0,0.07);
            --light-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

/* Level 2: Dark Mode Theme */
        body.dark-mode {
            --dark-color: #F0F0F0;
            --light-color: #1a1a1a;
            --gray-color: #242424;
            --text-color: #E0E0E0;
            --shadow: 0 10px 20px rgba(0,0,0,0.2);
            --light-shadow: 0 5px 15px rgba(0,0,0,0.15);
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body {
            font-family: var(--font-family);
            background-color: var(--light-color);
            color: var(--text-color);
            line-height: 1.7;
            overflow-x: hidden;
            transition: background-color var(--transition-speed), color var(--transition-speed);
        }
        
        /* 2. UTILITY & LAYOUT CLASSES */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
        section { padding: 6rem 0; overflow: hidden; }
        .section-title {
            text-align: center;
            margin-bottom: 4rem;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--dark-color);
            position: relative;
        }
        .section-title::after {
            content: ''; display: block; width: 80px; height: 4px;
            background-color: var(--primary-color);
            margin: 0.5rem auto 0; border-radius: 2px;
        }
        .btn {
            display: inline-block; padding: 0.8rem 2.2rem;
            background-color: var(--primary-color); color: #2C2C2C;
            font-weight: 600; text-decoration: none;
            border-radius: 50px; transition: var(--transition-speed);
            border: 2px solid transparent;
        }
        .btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 20px rgba(255, 199, 44, 0.3);
        }
        img { max-width: 100%; height: auto; display: block; }

/* 3. ANIMATION STYLES (LEVEL 4) */
        .animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
        .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* 4. HEADER & NAVIGATION (LEVEL 7: Dropdowns) */
        .header {
            position: fixed; top: 0; left: 0; width: 100%; padding: 1rem 0;
            z-index: 1000; transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
        }
        .header.scrolled { background-color: var(--light-color); box-shadow: var(--light-shadow); }
        .navbar { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.8rem; font-weight: 800; color: white; text-decoration: none; }
        .logo span { color: var(--primary-color); }
        .nav-links { display: flex; list-style: none; gap: 1rem; align-items: center; }
        .nav-links > li { position: relative; }
        .nav-links a {
            text-decoration: none; color: var(--text-color); font-weight: 500;
            padding: 0.5rem 1rem; display: block; position: relative;
        }
        .nav-links > li > a::after {
            content: ''; position: absolute; bottom: 0; left: 50%;
            transform: translateX(-50%); width: 0; height: 2px;
            background-color: var(--primary-color); transition: width var(--transition-speed);
        }
        .nav-links > li:hover > a::after { width: 60%; }
        /* Dropdown Menu */
        .dropdown {
            display: none; position: absolute; top: 100%; left: 0;
            background-color: var(--light-color); list-style: none;
            border-radius: 8px; box-shadow: var(--shadow);
            padding: 0.5rem 0; min-width: 200px;
        }
        .nav-links li:hover .dropdown { display: block; }
        .dropdown a { white-space: nowrap; transition: background-color var(--transition-speed); }
        .dropdown a:hover { background-color: var(--gray-color); }
        
        /* Mobile Menu Toggle */
        .menu-toggle { display: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 1001; }
        .menu-toggle .bar {
            width: 28px; height: 3px; background-color: var(--dark-color);
            border-radius: 5px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        .menu-toggle.active .bar:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
        .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
        .menu-toggle.active .bar:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }
        
        /* Level 2: Theme Switcher */
        .theme-switcher {
            cursor: pointer; font-size: 1.3rem; margin-left: 1rem;
            color: var(--text-color); transition: color var(--transition-speed), transform var(--transition-speed);
        }
        .theme-switcher:hover { transform: rotate(15deg); color: var(--primary-color); }

/* 5. HERO SECTION */
        .hero {
            height: 100vh; display: flex; align-items: center;
            background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1521587760476-6c12a4b040da?w=1920&q=80&auto=format&fit=crop');
            background-size: cover; background-position: center; background-attachment: fixed;
            color: #FFFFFF;
        }
        .hero-content { text-align: center; animation: fadeIn 1s ease-in-out; }
        .hero-content h1 { font-size: 4rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }
        .hero-content p { font-size: 1.2rem; max-width: 650px; margin: 0 auto 2.5rem; font-weight: 300; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 6. STATS SECTION (LEVEL 5) */
        #stats { background-color: var(--gray-color); }
        .stats-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;
        }
        .stat-item { text-align: center; }
        .stat-item i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1rem; }
        .stat-number { font-size: 3rem; font-weight: 700; color: var(--dark-color); }
        .stat-label { font-size: 1rem; color: var(--text-color); }

/* 7. FEATURED BOOKS SECTION (LEVEL 1: Filtering) */
        .book-filter-buttons {
            text-align: center; margin-bottom: 3rem; display: flex;
            justify-content: center; flex-wrap: wrap; gap: 1rem;
        }
        .filter-btn {
            padding: 0.5rem 1.5rem; border: 2px solid var(--primary-color);
            background: transparent; color: var(--primary-color);
            border-radius: 50px; cursor: pointer; font-weight: 500;
            transition: all var(--transition-speed);
        }
        .filter-btn:hover, .filter-btn.active { background: var(--primary-color); color: #2C2C2C; }
        
        .books-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;
        }
        .book-card {
            background: var(--light-color); border-radius: 10px; overflow: hidden;
            box-shadow: var(--light-shadow); text-align: center;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
        }
        .book-card.hide { display: none; }
        .book-card:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
        .book-card img { width: 100%; height: 350px; object-fit: cover; }
        .book-info { padding: 1.5rem; }
        .book-info h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
        .book-info p { font-style: italic; color: #777; }
        body.dark-mode .book-info p { color: #aaa; }
        
        /* 8. SERVICES SECTION (LEVEL 9: Font Awesome Icons) */
        #services { background-color: var(--gray-color); }
        .services-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;
        }
        .service-card {
            background-color: var(--light-color); padding: 2.5rem 2rem;
            text-align: center; border-radius: 10px; box-shadow: var(--light-shadow);
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
            border-bottom: 4px solid transparent;
        }
        .service-card:hover {
            transform: translateY(-10px); box-shadow: var(--shadow);
            border-bottom: 4px solid var(--primary-color);
        }
        .service-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem; }
        
        /* 9. VIRTUAL TOUR (LEVEL 10) */
        .tour-content { text-align: center; }
        .tour-content p { max-width: 700px; margin: 0 auto 3rem; }
        .video-container {
            position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0; overflow: hidden; max-width: 100%;
            background: #000; border-radius: 15px; box-shadow: var(--shadow);
        }
        .video-container iframe {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        }
        
        /* 10. LATEST NEWS (LEVEL 6) */
        #news { background-color: var(--gray-color); }
        .news-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;
        }
        .news-card {
            background: var(--light-color); border-radius: 10px;
            box-shadow: var(--light-shadow); overflow: hidden;
            display: flex; flex-direction: column;
        }
        .news-card img { height: 200px; object-fit: cover; }
        .news-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
        .news-meta { font-size: 0.8rem; color: #777; margin-bottom: 0.5rem; }
        body.dark-mode .news-meta { color: #aaa; }
        .news-content h4 { font-size: 1.3rem; margin-bottom: 1rem; flex-grow: 1; }
        .news-content .btn { align-self: flex-start; padding: 0.5rem 1.5rem; font-size: 0.9rem; }

/* 11. MEMBERSHIP SECTION */
        .membership-cta {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            padding: 5rem 2rem; border-radius: 15px; text-align: center; color: #2C2C2C;
            box-shadow: 0 15px 30px rgba(255, 199, 44, 0.3);
        }
        .membership-cta h2 { font-size: 2.5rem; margin-bottom: 1rem; }
        .membership-cta .btn { background-color: var(--dark-color); color: var(--light-color); }
        body.dark-mode .membership-cta .btn { background-color: #f0f0f0; color: #1a1a1a; }
        
        /* 12. FAQ SECTION */
        #faq { background-color: var(--gray-color); }
        .faq-container { max-width: 800px; margin: 0 auto; }
        .faq-item {
            background-color: var(--light-color); margin-bottom: 1rem;
            border-radius: 8px; box-shadow: var(--light-shadow);
        }
        .faq-item summary {
            padding: 1.2rem 1.5rem; font-weight: 600; cursor: pointer;
            list-style: none; position: relative;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; right: 1.5rem;
            transition: transform var(--transition-speed);
        }
        .faq-item[open] summary::after { transform: rotate(180deg); }
        .faq-answer { padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--gray-color); }
        body.dark-mode .faq-answer { border-top: 1px solid #333; }
        
        /* 13. FOOTER */
        .footer { background-color: #2C2C2C; color: #bbb; padding: 4rem 0 2rem; }
        body.dark-mode .footer { background-color: #111; }
        .footer-content {
            display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem;
        }
        .footer-col h4 { color: var(--primary-color); margin-bottom: 1rem; font-size: 1.2rem; }
        .footer-col ul { list-style: none; }
        .footer-col a { color: #bbb; text-decoration: none; transition: color var(--transition-speed); }
        .footer-col a:hover { color: var(--primary-color); }
        .social-links a { color: #bbb; font-size: 1.5rem; margin-right: 1rem; }
        .footer-bottom { text-align: center; border-top: 1px solid #444; padding-top: 2rem; font-size: 0.9rem; }

/* 14. BACK TO TOP BUTTON (LEVEL 4) */
        .back-to-top {
            position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px;
            background-color: var(--primary-color); color: #2C2C2C;
            border-radius: 50%; display: flex; justify-content: center; align-items: center;
            font-size: 1.5rem; text-decoration: none; box-shadow: var(--shadow);
            opacity: 0; visibility: hidden; transform: translateY(20px);
            transition: all var(--transition-speed); z-index: 999;
        }
        .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
        .back-to-top:hover { transform: scale(1.1); }
        
        /* 15. RESPONSIVE DESIGN */
        @media (max-width: 1024px) {
            .footer-content { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
        }
        @media (max-width: 768px) {
            html { font-size: 15px; }
            section { padding: 4rem 0; }
            .container { padding: 0 1rem; }
            .menu-toggle { display: flex; }
            .nav-links {
                position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
                background-color: var(--light-color); flex-direction: column;
                justify-content: center; align-items: center; gap: 2rem;
                transition: right var(--transition-speed);
            }
            .nav-links.active { right: 0; }
            .nav-links li { text-align: center; }
            .dropdown { display: none !important; /* Simplified for mobile */ }
            .hero-content h1 { font-size: 2.8rem; }
        }

JavaScript

// --- JAVASCRIPT LOGIC ---
    document.addEventListener('DOMContentLoaded', function() {
        
        // --- LEVEL 2: THEME SWITCHER LOGIC ---
        const themeSwitcher = document.getElementById('theme-switcher');
        const body = document.body;
        // Apply saved theme on load
        if (localStorage.getItem('theme') === 'dark') {
            body.classList.add('dark-mode');
        }
        themeSwitcher.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            // Save theme preference
            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('theme', 'dark');
            } else {
                localStorage.removeItem('theme');
            }
        });

// --- NAVIGATION & HEADER LOGIC ---
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');
        const header = document.querySelector('.header');
        
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            menuToggle.classList.toggle('active');
        });
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) header.classList.add('scrolled');
            else header.classList.remove('scrolled');
        });

// --- LEVEL 4: BACK TO TOP BUTTON LOGIC ---
        const backToTopBtn = document.querySelector('.back-to-top');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) backToTopBtn.classList.add('visible');
            else backToTopBtn.classList.remove('visible');
        });

// --- LEVEL 4 & 5: ANIMATED COUNTERS & SCROLL ANIMATIONS ---
        const animateElements = document.querySelectorAll('.animate-on-scroll');
        const statNumbers = document.querySelectorAll('.stat-number');

animateElements.forEach(el => observer.observe(el));
        
        function animateCounter(counter) {
            const target = +counter.getAttribute('data-target');
            const duration = 2000; // 2 seconds
            const stepTime = Math.abs(Math.floor(duration / target));
            let current = 0;
            const timer = setInterval(() => {
                current += Math.ceil(target/ (duration/20)); // Increment value
                if (current >= target) {
                    clearInterval(timer);
                    counter.innerText = target.toLocaleString();
                } else {
                    counter.innerText = current.toLocaleString();
                }
            }, 20);
        }

// --- LEVEL 1: BOOK FILTERING LOGIC ---
        const filterButtons = document.querySelectorAll('.filter-btn');
        const bookCards = document.querySelectorAll('.book-card');

filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Manage active state
                filterButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                
                const filter = button.getAttribute('data-filter');
                
                bookCards.forEach(card => {
                    card.style.transition = 'transform 0.3s, opacity 0.3s';
                    card.style.transform = 'scale(0)';
                    card.style.opacity = '0';
                    card.classList.add('hide');

setTimeout(() => {
                        if (filter === '*' || card.getAttribute('data-genre') === filter) {
                            card.classList.remove('hide');
                            card.style.transform = 'scale(1)';
                            card.style.opacity = '1';
                        }
                    }, 100);
                });
            });
        });
    });

New Library Template Preview

Download Options