From b1faa18f1e21a44aa3e6146c55476d3a7594526a Mon Sep 17 00:00:00 2001
From: Najam Ali Abbas <90936436+Ctoic@users.noreply.github.com>
Date: Sat, 26 Oct 2024 16:59:42 +0500
Subject: [PATCH] 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).
---
about.html | 7 +-
adventures.html | 6 +-
data/books.json | 207 +++++++++++++++++++++++++--------------------
explore-books.html | 41 +++++++++
script.js | 9 ++
style.css | 36 ++++++++
6 files changed, 212 insertions(+), 94 deletions(-)
create mode 100644 explore-books.html
diff --git a/about.html b/about.html
index 10c3430..3331676 100644
--- a/about.html
+++ b/about.html
@@ -109,7 +109,12 @@
id="about"
>About
-
+ Explore Books
Contact
diff --git a/adventures.html b/adventures.html
index 2e24e3a..52b28d9 100644
--- a/adventures.html
+++ b/adventures.html
@@ -87,7 +87,11 @@
class="text-gray-300 hover:text-green-500"
>About
-
+ Explore Books
+
+
+
+
+
+ Explore Books
+
+
+
+
+ Explore Books
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
index 0f87088..c570903 100644
--- 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
index 324915d..5593d6e 100644
--- 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);
+}