Add Explore Books feature to navbar

Related to #141 Add "Explore Books" feature to the navbar and implement book cards with hover flip animation. * **Navbar Addition:** - Add "Explore Books" option to the navbar in `about.html` and `adventures.html`. - Ensure proper routing to `explore-books.html`. * **Script Changes:** - Add event listener for "Explore Books" option in the navbar in `script.js`. - Ensure proper routing to `explore-books.html`. * **Book Data:** - Add sample book data for "Explore Books" feature in `data/books.json`. * **Explore Books Page:** - Create a new page `explore-books.html` to display book cards. - Implement hover flip animation for book cards. * **Styles:** - Add styles for book cards and hover flip animation in `style.css`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Ctoic/Lisbook/issues/141?shareId=XXXX-XXXX-XXXX-XXXX).
Ctoic · Oct 26, 2024 · b1faa18 · b1faa18
1 parent 40890f1
commit b1faa18
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 94 deletions.
diff --git a/about.html b/about.html
@@ -109,7 +109,12 @@
               id="about"
               >About</a
             >
-
+            <a
+              href="./explore-books.html"
+              class="text-gray-300 hover:text-green-500"
+              id="explore-books"
+              >Explore Books</a
+            >
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a
             >

diff --git a/adventures.html b/adventures.html
@@ -87,7 +87,11 @@
                             class="text-gray-300 hover:text-green-500"
                             >About</a
                         >
-
+                        <a
+                            href="./explore-books.html"
+                            class="text-gray-300 hover:text-green-500"
+                            >Explore Books</a
+                        >
                         <a
                             href="./contact.html"
                             class="text-gray-300 hover:text-green-500"

diff --git a/data/books.json b/data/books.json
@@ -1,92 +1,115 @@
-[
-    {
-        "id": "1",
-        "title": "To Kill a Mockingbird",
-        "author": "Harper Lee",
-        "cover":"https://picsum.photos/200",
-        "genre": "Fiction",
-        "description": "A novel that explores racial injustice in the Deep South through the eyes of young Scout Finch, as her father, Atticus, defends a black man wrongly accused of raping a white woman.",
-        "chapters": [
-            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/mockingbird_ch1.mp3"},
-            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/mockingbird_ch2.mp3"}
-        ]
-    },
-    {
-        "id": "2",
-        "title": "1984",
-        "author": "George Orwell",
-        "cover":"https://picsum.photos/200",
-        "genre": "Dystopian",
-        "description": "A harrowing vision of a totalitarian future, where surveillance and propaganda are omnipresent and individualism is crushed by the Party led by Big Brother.",
-        "chapters": [
-            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/1984_ch1.mp3"},
-            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/1984_ch2.mp3"}
-        ]
-    },
-    {
-        "id": "3",
-        "title": "The Great Gatsby",
-        "author": "F. Scott Fitzgerald",
-        "cover":"https://picsum.photos/200",
-        "genre": "Tragedy",
-        "description": "A story of wealth, obsession, and the American dream, set in the Jazz Age, centering on the mysterious millionaire Jay Gatsby and his love for Daisy Buchanan.",
-        "chapters": [
-            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/gatsby_ch1.mp3"},
-            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/gatsby_ch2.mp3"}
-        ]
-    },
-    {
-        "id": "4",
-        "title": "Pride and Prejudice",
-        "author": "Jane Austen",
-        "cover":"https://picsum.photos/200",
-        "genre": "Romance",
-        "description": "A classic romantic tale of the strong-willed Elizabeth Bennet and the wealthy but reserved Mr. Darcy, exploring themes of class, love, and misunderstandings.",
-        "chapters": [
-            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/pride_ch1.mp3"},
-            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/pride_ch2.mp3"}
-        ]
-    },
-    {
-        "id": "5",
-        "title": "The Catcher in the Rye",
-        "author": "J.D. Salinger",
-        "cover":"https://picsum.photos/200",
-        "genre": "Fiction",
-        "description": "A deeply personal exploration of teenage rebellion and alienation, following Holden Caulfield as he roams the streets of New York City after being expelled from his prep school.",
-        "chapters": [
-            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/catcher_ch1.mp3"},
-            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/catcher_ch2.mp3"}
-        ]
-    },
-    {
-        "id": "6",
-        "title": "Moby-Dick",
-        "author": "Herman Melville",
-        "cover":"https://picsum.photos/200",
-        "genre": "Adventure",
-        "description": "An epic tale of obsession and revenge, chronicling Captain Ahab’s relentless pursuit of the white whale Moby Dick, while exploring themes of fate, religion, and the human condition.",
-        "chapters": [
-            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/mobydick_ch1.mp3"},
-            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/mobydick_ch2.mp3"}
-        ]
-    },
-    {
-        "id": "7",
-        "title": "God Delusion",
-        "author": "Richard Dawkins",
-        "cover": "Images/GD.jpeg",
-        "description": "The God Delusion is a book by English biologist Richard Dawkins that argues against the existence of a supernatural creator.",
-        "genre": "Adventure",
-        "chapters": [
-            {"id": "1", "index": 1, "title": "Introduction: God Delusion", "audio_file": "audio/part1.mp3"},
-            {"id": "2", "index": 2, "title": "Part 2", "audio_file": "audio/part2.mp3"},
-            {"id": "3", "index": 3, "title": "Part 3", "audio_file": "audio/part3.mp3"},
-            {"id": "4", "index": 4, "title": "Part 4", "audio_file": "audio/part4.mp3"},
-            {"id": "5", "index": 5, "title": "Part 5", "audio_file": "audio/part5.mp3"},
-            {"id": "6", "index": 6, "title": "Part 6", "audio_file": "audio/part6.mp3"},
-            {"id": "7", "index": 7, "title": "Part 7", "audio_file": "audio/part7.mp3"}
-        ]
-    }
-
-]
+[
+    {
+        "id": "1",
+        "title": "To Kill a Mockingbird",
+        "author": "Harper Lee",
+        "cover":"https://picsum.photos/200",
+        "genre": "Fiction",
+        "description": "A novel that explores racial injustice in the Deep South through the eyes of young Scout Finch, as her father, Atticus, defends a black man wrongly accused of raping a white woman.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/mockingbird_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/mockingbird_ch2.mp3"}
+        ]
+    },
+    {
+        "id": "2",
+        "title": "1984",
+        "author": "George Orwell",
+        "cover":"https://picsum.photos/200",
+        "genre": "Dystopian",
+        "description": "A harrowing vision of a totalitarian future, where surveillance and propaganda are omnipresent and individualism is crushed by the Party led by Big Brother.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/1984_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/1984_ch2.mp3"}
+        ]
+    },
+    {
+        "id": "3",
+        "title": "The Great Gatsby",
+        "author": "F. Scott Fitzgerald",
+        "cover":"https://picsum.photos/200",
+        "genre": "Tragedy",
+        "description": "A story of wealth, obsession, and the American dream, set in the Jazz Age, centering on the mysterious millionaire Jay Gatsby and his love for Daisy Buchanan.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/gatsby_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/gatsby_ch2.mp3"}
+        ]
+    },
+    {
+        "id": "4",
+        "title": "Pride and Prejudice",
+        "author": "Jane Austen",
+        "cover":"https://picsum.photos/200",
+        "genre": "Romance",
+        "description": "A classic romantic tale of the strong-willed Elizabeth Bennet and the wealthy but reserved Mr. Darcy, exploring themes of class, love, and misunderstandings.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/pride_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/pride_ch2.mp3"}
+        ]
+    },
+    {
+        "id": "5",
+        "title": "The Catcher in the Rye",
+        "author": "J.D. Salinger",
+        "cover":"https://picsum.photos/200",
+        "genre": "Fiction",
+        "description": "A deeply personal exploration of teenage rebellion and alienation, following Holden Caulfield as he roams the streets of New York City after being expelled from his prep school.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/catcher_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/catcher_ch2.mp3"}
+        ]
+    },
+    {
+        "id": "6",
+        "title": "Moby-Dick",
+        "author": "Herman Melville",
+        "cover":"https://picsum.photos/200",
+        "genre": "Adventure",
+        "description": "An epic tale of obsession and revenge, chronicling Captain Ahab’s relentless pursuit of the white whale Moby Dick, while exploring themes of fate, religion, and the human condition.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "Chapter 1", "audio_file": "audio/mobydick_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "Chapter 2", "audio_file": "audio/mobydick_ch2.mp3"}
+        ]
+    },
+    {
+        "id": "7",
+        "title": "God Delusion",
+        "author": "Richard Dawkins",
+        "cover": "Images/GD.jpeg",
+        "description": "The God Delusion is a book by English biologist Richard Dawkins that argues against the existence of a supernatural creator.",
+        "genre": "Adventure",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "Introduction: God Delusion", "audio_file": "audio/part1.mp3"},
+            {"id": "2", "index": 2, "title": "Part 2", "audio_file": "audio/part2.mp3"},
+            {"id": "3", "index": 3, "title": "Part 3", "audio_file": "audio/part3.mp3"},
+            {"id": "4", "index": 4, "title": "Part 4", "audio_file": "audio/part4.mp3"},
+            {"id": "5", "index": 5, "title": "Part 5", "audio_file": "audio/part5.mp3"},
+            {"id": "6", "index": 6, "title": "Part 6", "audio_file": "audio/part6.mp3"},
+            {"id": "7", "index": 7, "title": "Part 7", "audio_file": "audio/part7.mp3"}
+        ]
+    },
+    {
+        "id": "8",
+        "title": "The Hobbit",
+        "author": "J.R.R. Tolkien",
+        "cover": "https://picsum.photos/200",
+        "genre": "Fantasy",
+        "description": "A fantasy novel that follows the journey of Bilbo Baggins, a hobbit who embarks on an adventure to win a share of the treasure guarded by Smaug the dragon.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "An Unexpected Party", "audio_file": "audio/hobbit_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "Roast Mutton", "audio_file": "audio/hobbit_ch2.mp3"}
+        ]
+    },
+    {
+        "id": "9",
+        "title": "The Alchemist",
+        "author": "Paulo Coelho",
+        "cover": "https://picsum.photos/200",
+        "genre": "Adventure",
+        "description": "A philosophical book that tells the story of Santiago, a shepherd boy who dreams of finding a treasure located in the Egyptian pyramids.",
+        "chapters": [
+            {"id": "1", "index": 1, "title": "The Boy's Dream", "audio_file": "audio/alchemist_ch1.mp3"},
+            {"id": "2", "index": 2, "title": "The Journey Begins", "audio_file": "audio/alchemist_ch2.mp3"}
+        ]
+    }
+]
diff --git a/explore-books.html b/explore-books.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Explore Books</title>
+  </head>
+  <body class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100">
+    <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
+      <nav>
+        <div class="container mx-auto flex justify-between items-center">
+          <a class="logo-text h3 font-bold d-inline-flex" href="./index.html">
+            <img src="./Images/lisbook-logo-1.png" alt="Logo" width="40" height="auto" class="align-text-center me-2" />
+            Lisbook
+          </a>
+          <div id="menu" class="fixed inset-0 bg-gray-900 w-full h-full flex flex-col items-center justify-center space-y-8 transform scale-0 transition-transform duration-300 ease-in-out lg:relative lg:flex lg:items-end lg:justify-end lg:space-y-0 lg:bg-transparent lg:scale-100 lg:flex-row lg:space-x-4 z-20">
+            <a href="./index.html" class="text-gray-300 hover:text-green-500">Home</a>
+            <a href="./about.html" class="text-gray-300 hover:text-green-500">About</a>
+            <a href="./explore-books.html" class="text-gray-300 hover:text-green-500">Explore Books</a>
+            <a href="./contact.html" class="text-gray-300 hover:text-green-500">Contact</a>
+            <a href="./faq.html" class="text-gray-300 hover:text-green-500">FAQs</a>
+          </div>
+          <div id="menu-toggle" title="Menu" class="text-gray-300 lg:hidden cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
+            </svg>
+          </div>
+        </div>
+      </nav>
+    </header>
+    <main class="container my-5">
+      <h1 class="display-5 fw-semibold mb-5 text-center">Explore Books</h1>
+      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+        <!-- Book cards will be dynamically inserted here -->
+      </div>
+    </main>
+    <div id="footer-placeholder" class="mt-auto"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -598,6 +598,15 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     });
   });
+
+  // Add event listener for "Explore Books" option in the navbar
+  const exploreBooksLink = document.getElementById("explore-books");
+  if (exploreBooksLink) {
+    exploreBooksLink.addEventListener("click", function (e) {
+      e.preventDefault();
+      window.location.href = "explore-books.html";
+    });
+  }
 });
 // Function to load an HTML file into an element
 function loadHTML(file, elementId) {

diff --git a/style.css b/style.css
@@ -1122,3 +1122,39 @@ button:hover {
   color: #1db954;
   transform: scale(1.1); /* Slightly enlarge icons on hover */
 }
+
+/* Book Card Styles */
+.book-card {
+  perspective: 1000px; /* Container used to enable 3D space for the children */
+}
+
+.book-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+.book-card:hover .book-card-inner {
+  transform: rotateY(180deg);
+}
+
+.book-card-front,
+.book-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.book-card-front {
+  background-color: #bbb;
+  color: black;
+}
+
+.book-card-back {
+  background-color: #1db954;
+  color: white;
+  transform: rotateY(180deg);
+}