index.php

<?php include 'db_library.php'; ?>
<?php include 'session_manager.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brainster Library</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <!-- Sticky Navbar -->
    <nav class="bg-gray-800 text-white p-4 sticky top-0 z-50">
        <div class="container mx-auto flex justify-between items-center">
            <!-- Logo -->
            <a href="#" class="transition-transform duration-500 transform hover:scale-125 hover:rotate-180">
                <img src="./images/Logo.png" alt="Logo" class="h-8">
            </a>
            <!-- Login/Logout Button -->
            <div>
                <?php if (isset($_SESSION['loggedin'])) : ?>
                    <span>Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?></span>
                    <!-- Admin Dashboard Button -->
                    <?php if ($_SESSION['role'] === 'admin') : ?>
                        <a href="admin_dashboard.php" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded ml-2">Admin Dashboard</a>
                    <?php endif; ?>
                    <a href="logout.php" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Logout</a>
                <?php else : ?>
                    <a href="signup.php" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Login</a>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <section class="hero-background h-screen flex items-center justify-center">
        <h1 class="text-white text-4xl md:text-6xl font-bold text-center">Embark on a Journey in Every Page</h1>
    </section>

    <!-- Category Buttons -->
    <div class="container mx-auto my-8 text-center">
        <h2 class="text-2xl font-bold mb-4">Select Book By Category</h2>
        <div class="flex flex-wrap gap-4 justify-center">
            <button onclick="filterBooks('1', this)" data-bg-color="bg-blue-500" data-border-color="border-blue-500" class="category-button bg-white text-black border-blue-500 font-bold py-2 px-4 rounded border-2">Fantasy</button>
            <button onclick="filterBooks('2', this)" data-bg-color="bg-green-500" data-border-color="border-green-500" class="category-button bg-white text-black border-green-500 font-bold py-2 px-4 rounded border-2">Mystery</button>
            <button onclick="filterBooks('3', this)" data-bg-color="bg-red-500" data-border-color="border-red-500" class="category-button bg-white text-black border-red-500 font-bold py-2 px-4 rounded border-2">Science Fiction</button>
            <button onclick="filterBooks('4', this)" data-bg-color="bg-yellow-500" data-border-color="border-yellow-500" class="category-button bg-white text-black border-yellow-500 font-bold py-2 px-4 rounded border-2">Romance</button>
            <button onclick="filterBooks('5', this)" data-bg-color="bg-purple-500" data-border-color="border-purple-500" class="category-button bg-white text-black border-purple-500 font-bold py-2 px-4 rounded border-2">Thriller</button>
            <button onclick="filterBooks('6', this)" data-bg-color="bg-pink-500" data-border-color="border-pink-500" class="category-button bg-white text-black border-pink-500 font-bold py-2 px-4 rounded border-2">Classic</button>
            <button onclick="filterBooks('7', this)" data-bg-color="bg-indigo-500" data-border-color="border-indigo-500" class="category-button bg-white text-black border-indigo-500 font-bold py-2 px-4 rounded border-2">History</button>
            <button onclick="filterBooks('8', this)" data-bg-color="bg-orange-500" data-border-color="border-orange-500" class="category-button bg-white text-black border-orange-500 font-bold py-2 px-4 rounded border-2">Non-Fiction</button>
        </div>
    </div>

    <!-- Books Grid -->
    <div class="container mx-auto px-4 my-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-8 gap-x-6">
            <?php
            $sql = "SELECT books.*, CONCAT(authors.first_name, ' ', authors.last_name) AS author_name, categories.title AS category_title FROM books INNER JOIN authors ON books.author_id = authors.id INNER JOIN categories ON books.category_id = categories.id";
            $result = $conn->query($sql);
            if ($result->num_rows > 0) {
                while ($row = $result->fetch_assoc()) {
                    echo "<div class='max-w-xs rounded overflow-hidden shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:scale-105 group book-card' data-category='" . $row['category_id'] . "'>";
                    echo "<a href='book_details.php?id=" . $row['id'] . "' target='_blank'><img class='w-full' src='" . htmlspecialchars($row['image_url'], ENT_QUOTES, 'UTF-8') . "' alt='" . htmlspecialchars($row['title'], ENT_QUOTES, 'UTF-8') . "'></a>";
                    echo "<div class='px-6 py-4 text-center'>";
                    echo "<div class='font-bold text-lg mb-2 group-hover:text-blue-600 transition duration-300'><a href='book_details.php?id=" . $row['id'] . "' target='_blank'>" . htmlspecialchars($row['title'], ENT_QUOTES, 'UTF-8') . "</a></div>";
                    echo "<p class='text-gray-700 text-sm'>" . htmlspecialchars($row['author_name'], ENT_QUOTES, 'UTF-8') . "</p>";
                    echo "</div></div>";
                }
            } else {
                echo "0 results";
            }
            $conn->close();
            ?>
        </div>
    </div>

    <footer class="bg-gray-800 text-white p-4 sticky bottom-0 z-50">
        <div class="container mx-auto text-center">
            <p id="quote"></p>
        </div>
    </footer>
    <script src="footer.js"></script>
    <script src ="bookFilter.js"></script>
</body>

</html>