WSU-4110 · alkhafaji4 · Oct 23, 2024 · Oct 22, 2024 · Oct 22, 2024 · Oct 22, 2024
diff --git a/13.jpg b/13.jpg
diff --git a/choose2.jpg.avif b/choose2.jpg.avif
diff --git a/club-icon.jpg b/club-icon.jpg
diff --git a/club.css b/club.css
@@ -0,0 +1,110 @@
+
+
+h1 {
+  font-size: 2rem;
+  color: #ff6f61;
+  margin-left: 500px;
+}
+
+main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 70vh;
+}
+
+.club-creation-container {
+  display: flex;
+  gap: 2rem;
+  max-width: 1200px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.club-form-section,
+.preview-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.club-icon {
+
+  margin-bottom: 1.5rem;
+
+  width: 100%; 
+  max-width: 400px; 
+  height: auto; 
+}
+
+.club-creation-form {
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+}
+
+.club-label {
+  font-size: 1.2rem;
+  color: #ff6f61;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border: 2px solid #ddd;
+  border-radius: 25px;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+.create-club-button {
+  background-color: #e76f51;
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  font-size: 1rem;
+  border-radius: 25px;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+  transition: background-color 0.3s ease;
+  text-decoration: none;
+}
+
+.create-club-button:hover {
+  background-color: #d65c40;
+}
+
+.message {
+  font-size: 0.9rem;
+  color: #666;
+  margin-top: 3rem;
+}
+
+.preview-section {
+  text-align: center;
+}
+
+.preview-img {
+  width: 100%; 
+  height: auto; 
+  max-height: 100%; 
+  border-radius: 15px;
+}
+
+
+
+
+footer {
+  text-align: center;
+  padding: 2em 0;
+  margin-top: 2em;
+  background-color: #faf9f7;
+  color: #666;
+  font-size: 14px;
+}
diff --git a/club.html b/club.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Book Club Creation</title>
+    <link rel="stylesheet" href="club.css" />
+    <link rel="stylesheet" href="dashboard.css" />
+  </head>
+  <body>
+    <header>
+      <div class="header-container">
+        <div class="logo-container">
+          <img src="logo1.png" alt="PageTurners Logo" class="logo" />
+          <span class="site-title"
+            ><a href="dashboard.html">PageTurners</a></span
+          >
+        </div>
+        <nav class="nav-container">
+          <ul class="nav-list">
+            <li><a href="dashboard.html">Home</a></li>
+            <li class="dropdown">
+              <a href="#">My Clubs</a>
+              <ul class="dropdownmenu" id="userdropdownmenu">
+                <li><a href="overview.html">My Club Creation</a></li>
+                <li><a href="club.html">Create a Club</a></li>
+              </ul>
+            </li>
+
+            <li>
+              <a href="join.html"><button class="loginbutton">Join</button></a>
+            </li>
+
+            <li class="user-dropdown">
+              <img
+                src="https://img.icons8.com/ios-glyphs/30/000000/user.png"
+                alt="User Icon"
+                class="user-icon"
+                onclick="toggleDropdown()"
+              />
+              <ul class="dropdown-menu" id="user-dropdown-menu">
+                <li><a href="#">Discussions</a></li>
+                <li><a href="#">Account</a></li>
+                <li><a href="logout.html">Logout</a></li>
+              </ul>
+            </li>
+            <script>
+              // Function to close all open dropdowns
+              function closeAllDropdowns() {
+                document
+                  .querySelectorAll(".dropdown.open, .user-dropdown.open")
+                  .forEach((dropdown) => {
+                    dropdown.classList.remove("open");
+                  });
+              }
+
+              // Toggle the "My Clubs" dropdown
+              document
+                .querySelector(".dropdown > a")
+                .addEventListener("click", function (event) {
+                  event.preventDefault();
+                  closeAllDropdowns(); // Close any other open dropdown
+                  const dropdown = document.querySelector(".dropdown");
+                  dropdown.classList.toggle("open"); // Toggle the clicked dropdown
+                });
+
+              // Toggle the "User Icon" dropdown
+              document
+                .querySelector(".user-icon")
+                .addEventListener("click", function () {
+                  closeAllDropdowns(); // Close any other open dropdown
+                  const userDropdown = document.querySelector(".user-dropdown");
+                  userDropdown.classList.toggle("open"); // Toggle the clicked dropdown
+                });
+
+              // Close dropdown if clicking outside of it
+              document.addEventListener("click", function (event) {
+                const isClickInsideDropdown = event.target.closest(
+                  ".dropdown, .user-dropdown"
+                );
+
+                if (!isClickInsideDropdown) {
+                  closeAllDropdowns(); // Close all dropdowns if clicked outside
+                }
+              });
+            </script>
+
+            <li>
+              <!-- Collapsible Search bar with magnifying glass -->
+              <form class="search-form" action="/search" method="GET">
+                <input
+                  type="text"
+                  name="query"
+                  placeholder="Search for books, clubs, or authors"
+                  class="search-input"
+                  id="search-input"
+                />
+                <button
+                  type="button"
+                  class="search-button"
+                  onclick="toggleSearch()"
+                >
+                  <img
+                    src="https://img.icons8.com/ios-glyphs/30/000000/search.png"
+                    alt="Search"
+                    class="search-icon"
+                  />
+                </button>
+              </form>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <div class="headercontainer">
+      <h1>Give Your Club a Name</h1>
+    </div>
+
+    <div class="main-content">
+      <main>
+        <section class="club-creation-container">
+          <!-- Left side with form -->
+          <div class="club-form-section">
+            <img src="club-icon.jpg" alt="Club Icon" class="club-icon" />
+            <form action="#" method="POST" class="club-creation-form">
+              <label for="club-name" class="club-label">Club Name</label>
+              <input
+                type="text"
+                id="club-name"
+                name="club-name"
+                placeholder="Enter Club Name"
+                required
+              />
+
+              <a href="invite.html" class="create-club-button">Create My Club</a>
+
+              <p class="message">
+                Your bookclub name can always be changed!
+              </p>
+            </form>
+          </div>
+
+          <!-- Right side preview section -->
+          <div class="preview-section">
+            <img
+              src="choose2.jpg.avif"
+              alt="Club Preview on Mobile"
+              class="preview-img"
+            />
+          </div>
+        </section>
+      </main>
+    </div>
+    <script>
+  document.querySelector(".create-club-button").addEventListener("click", function (event) {
+      const clubNameInput = document.getElementById("club-name").value.trim();
+      if (!clubNameInput) {
+          event.preventDefault();
+          alert("Please enter a club name.");
+          return;
+      }
+
+      let clubs = JSON.parse(localStorage.getItem("clubs")) || [];
+
+
+      const newClub = { name: clubNameInput, memberCount: 1 };
+
+      clubs.push(newClub);
+
+      localStorage.setItem("clubs", JSON.stringify(clubs));
+
+
+      window.location.href = "invite.html";
+  });
+</script>
+
+
+    <footer>
+      <p>&copy; 2024 PageTurners. All Rights Reserved.</p>
+    </footer>
+  </body>
+</html>
diff --git a/club.js b/club.js
@@ -0,0 +1,28 @@
+// Function to handle the profile picture change
+function changeProfilePicture(event) {
+  const reader = new FileReader();
+  const file = event.target.files[0];
+
+  reader.onload = function () {
+    const profilePic = document.getElementById("club-profile-pic");
+    profilePic.src = reader.result;
+
+    // Save the image data to localStorage
+    localStorage.setItem("profilePicture", reader.result);
+  };
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}
+
+// Function to load the profile picture from localStorage on page load
+function loadProfilePicture() {
+  const savedProfilePic = localStorage.getItem("profilePicture");
+  if (savedProfilePic) {
+    document.getElementById("club-profile-pic").src = savedProfilePic;
+  }
+}
+
+// Load the profile picture when the page is loaded
+window.onload = loadProfilePicture;