Merge pull request #78 from AdityaJ2305/feat/feedbackform

Feature Added: User feedback form submission via email
Ctoic · Oct 15, 2024 · 1d581aa · 1d581aa
2 parents 497c999 + ea25520
commit 1d581aa
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 18 deletions.
diff --git a/about.html b/about.html
@@ -76,6 +76,9 @@
             <a href="./about.html" class="text-gray-300 hover:text-green-500"
               >About</a
             >
+            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+              >Contact</a
+            >
 
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
               >Contact</a

diff --git a/contact.html b/contact.html
@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
+    <script type="text/javascript">
+        (function() {
+            // https://dashboard.emailjs.com/admin/account
+            emailjs.init({
+              publicKey: "your_public_key",
+            });
+        })();
+    </script>
     <script src="https://cdn.tailwindcss.com"></script>
     <link
       rel="stylesheet"
@@ -18,26 +27,167 @@
     <title>My Favorite Books Music App</title>
   </head>
 
-  <body
-    class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
-  >
-  <div id="loader" class="spinner-container">
-    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
+  <body class="dark-theme bg-gray-900 text-gray-300">
     <!-- Navbar -->
-    <div id="header-placeholder" class="sticky top-0 z-20"></div>
+    <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
+    <header class="sticky top-0 z-20 bg-gray-800 p-4">
+      <nav class="">
+        <div class="container mx-auto flex justify-between items-center">
+          <!-- Logo -->
+          <a
+            class="text-green-500 h3 font-bold d-flex"
+            href="./index.html"
+            class="navbar-brand"
+          >
+            <img
+              src="./Images/lisbook-logo.png"
+              alt="Logo"
+              width="35"
+              height="auto"
+              class="align-text-center me-2"
+            />
+            Lisbook
+          </a>
 
-    <!-- Footer -->
-    <div id="footer-placeholder" class="mt-auto"></div>
+          <!-- Menu Links and Theme Toggle -->
+          <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"
+          >
+            <div
+              id="menu-close"
+              class="text-gray-300 lg:hidden absolute top-5 right-5 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="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </div>
+            <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="./contact.html" class="text-gray-300 hover:text-green-500"
+              >Contact</a
+            >
 
-    <!-- JavaScript -->
-    <script src="./script.js"></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-      crossorigin="anonymous"
-    ></script>
+            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
+            >Previous</a
+          >
+          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
+            >Next</a
+          > -->
+            <button
+              id="theme-toggle"
+              class="text-gray-300 hover:text-green-500"
+            >
+              <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Mobile Menu Toggle Button -->
+          <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">
+       <!-- Feedback Section -->
+    <div class="container mx-auto mt-16 bg-gray-800 p-6 rounded-lg shadow-lg">
+        <h2 class="text-center text-2xl mb-6">Share Your Feedback</h2>
+        <form id="feedback-form" class="space-y-4">
+          <div>
+            <label for="username" class="block text-sm font-medium"
+              >Your Name:</label
+            >
+            <input
+              type="text"
+              name="username"
+              autocomplete="off"
+              id="username"
+              class="w-full p-2 rounded-lg bg-gray-700 text-white mt-2"
+              required
+            />
+          </div>
+          <div>
+            <label for="username" class="block text-sm font-medium"
+              >Your Email:</label
+            >
+            <input
+              type="email"
+              id="email"
+              name="email"
+              autocomplete="off"
+              class="w-full p-2 rounded-lg bg-gray-700 text-white mt-2"
+              required
+            />
+          </div>
+          <form>
+            <label for="comment" class="block text-sm font-medium"
+              >Your Feedback:</label
+            >
+            <textarea
+              id="feedback"
+              name="feedback"
+              autocomplete="off"
+              class="w-full p-2 rounded-lg bg-gray-700 text-white mt-2"
+              rows="4"
+              required
+            ></textarea>
+            <button type="submit" class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600"
+                            id="share2">
+                            Share comment
+                        </button>
+                    </form>
+
+      </section>
+    </main>
+    <!-- Footer -->
+    <div id="footer-placeholder"></div>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -225,6 +225,22 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
+  // Feedback Submission
+window.onload = function() {
+  document.getElementById('feedback-form').addEventListener('submit', function(event) {
+      event.preventDefault();
+      emailjs.sendForm('your_service_id', 'feedback_form', this)
+          .then(() => {
+              console.log('SUCCESS!');
+
+              // Reset the form 
+              document.getElementById("feedback-form").reset();
+          }, (error) => {
+              console.log('FAILED...', error);
+          });
+  });
+}
+
   // Theme Toggle
   const body = document.body;