From 4e139450ac12990209ebd48cf941d94d8b76358e Mon Sep 17 00:00:00 2001
From: Tim Basten <tbasten@gmail.com>
Date: Tue, 17 Mar 2026 17:47:56 +0800
Subject: [PATCH] renamedc app

---
 .prettierrc             |   4 --
 frontend/dashboard.html | 112 +++++++++++++++++++++++++++++++++-------
 frontend/features.html  |  49 ++++++++++++++----
 frontend/index.html     |  60 ++++++++++++++-------
 frontend/js/api.js      |  93 +++++++++++++++++++++++++++++++++
 frontend/login.html     |  49 ++++++++++++++----
 frontend/pricing.html   |  49 ++++++++++++++----
 frontend/signup.html    |  49 ++++++++++++++----
 frontend/support.html   |  49 ++++++++++++++----
 9 files changed, 421 insertions(+), 93 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 frontend/js/api.js

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 4322294..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "printWidth": 120,
-  "singleAttributePerLine": false
-}
diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index 7c911e2..d1ae6b8 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -28,13 +28,20 @@
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <img src="./images/Hamburger.svg" alt="hamburger icon" height="40px" width="auto" />
+          <img
+            src="./images/Hamburger.svg"
+            alt="hamburger icon"
+            height="40px"
+            width="auto"
+          />
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto text-end">
             <li class="nav-item">
-              <a class="nav-link" aria-current="page" href="./index.html">Home</a>
+              <a class="nav-link" aria-current="page" href="./index.html"
+                >Home</a
+              >
             </li>
             <li class="nav-item">
               <a class="nav-link" href="./features.html">Features</a>
@@ -50,49 +57,114 @@
       </div>
     </nav>
 
-    <!-- ↓ Page not ready ↓ -->
-    <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-      <div class="container text-center text-white py-5">
-        <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-        <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-        <div class="mt-5">
-          <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+    <main>
+      <div class="bg-img dashboard py-5">
+        <div
+          class="d-flex justify-content-center flex-column align-items-center container"
+        >
+          <div class="rounded shadow bg-translucent p-3 p-lg-5 col-12">
+            <form id="taskForm" class="mb-5 text-white">
+              <h1 id="greeting" class="mb-5 display-3">Your Dashboard</h1>
+              <h2 class="mb-3">New Task</h2>
+              <input
+                id="taskName"
+                name="taskName"
+                placeholder="Task Name"
+                class="mb-2 form-control shadow-sm"
+                type="text"
+                required
+              />
+              <textarea
+                id="taskDescription"
+                name="taskDescription"
+                placeholder="Task Description"
+                class="mb-2 form-control shadow-sm"
+                rows="8"
+                required
+              ></textarea>
+              <input
+                id="dueDate"
+                name="dueDate"
+                type="date"
+                class="mb-3 form-control shadow-sm"
+                required
+                placeholder="Due Date"
+              />
+              <button type="submit" class="btn btn-primary shadow-sm px-5">
+                Create Task
+              </button>
+              <div class="d-flex align-items-center gap-3 my-5">
+                <label for="sortSelect" class="text-white">Sort by:</label>
+                <select
+                  name="sortSelect"
+                  id="sortSelect"
+                  class="form-select w-auto shadow-none"
+                >
+                  <option value="default" selected>Default</option>
+                  <option value="dueDate">Due Date</option>
+                  <option value="dateCreate">Date Created</option>
+                </select>
+              </div>
+              <div class="row text-white">
+                <div class="col-12 col-lg-6 mb-4 mb-lg-0">
+                  <h2>To Do</h2>
+                  <ul id="toDoList" class="list-group"></ul>
+                </div>
+                <div class="col-12 col-lg-6">
+                  <h2>Completed</h2>
+                  <ul id="completedList" class="list-group"></ul>
+                </div>
+              </div>
+            </form>
+          </div>
         </div>
       </div>
-    </section>
-    <!-- ↑ Page not ready ↑ -->
+    </main>
 
     <!-- ↓ Footer ↓ -->
     <footer>
       <div class="py-5 container">
-        <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
+        <div
+          class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5"
+        >
           <a href="./index.html">
-            <img src="./images/logo.svg" alt="logo" height="100px" width="auto" />
+            <img
+              src="./images/logo.svg"
+              alt="logo"
+              height="100px"
+              width="auto"
+            />
           </a>
 
           <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4">
-            <h3 class="text-white mb-3 text-center text-md-start">Subscribe to our Newsletter</h3>
+            <h3 class="text-white mb-3 text-center text-md-start">
+              Subscribe to our Newsletter
+            </h3>
 
             <div class="input-group">
-              <input placeholder="Enter your email" type="email" class="form-control" />
+              <input
+                placeholder="Enter your email"
+                type="email"
+                class="form-control"
+              />
 
               <button class="btn btn-primary">Subscribe</button>
             </div>
           </div>
         </div>
 
-        <div class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center">
+        <div
+          class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center"
+        >
           <a class="nav-link" href="#">Privacy Policy</a>
           <p class="m-0 d-none d-md-block">|</p>
           <a class="nav-link" href="#">Terms of Service</a>
           <p class="mb-0 me-3 d-none d-md-block">|</p>
-          <p class="m-0">ListMe &COPY; 2025 All Rights Reserved</p>
+          <p class="m-0">BucketList &COPY; 2025 All Rights Reserved</p>
         </div>
       </div>
     </footer>
-
+    <script src="./js/api.js"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
diff --git a/frontend/features.html b/frontend/features.html
index d8d1788..9c428b0 100644
--- a/frontend/features.html
+++ b/frontend/features.html
@@ -28,13 +28,20 @@
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <img src="./images/Hamburger.svg" alt="hamburger icon" height="40px" width="auto" />
+          <img
+            src="./images/Hamburger.svg"
+            alt="hamburger icon"
+            height="40px"
+            width="auto"
+          />
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto text-end">
             <li class="nav-item">
-              <a class="nav-link" aria-current="page" href="./index.html">Home</a>
+              <a class="nav-link" aria-current="page" href="./index.html"
+                >Home</a
+              >
             </li>
             <li class="nav-item">
               <a class="nav-link active" href="./features.html">Features</a>
@@ -51,9 +58,16 @@
     </nav>
 
     <!-- ↓ Page not ready ↓ -->
-    <section class="bg-img d-flex justify-content-center align-items-center support py-5">
+    <section
+      class="bg-img d-flex justify-content-center align-items-center support py-5"
+    >
       <div class="container text-center text-white py-5">
-        <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+        <img
+          src="./images/Construction.svg"
+          alt="Under Construction"
+          height="150px"
+          width="auto"
+        />
 
         <h2 class="mt-5">Page under construction. Check back later!</h2>
 
@@ -67,28 +81,43 @@
     <!-- ↓ Footer ↓ -->
     <footer>
       <div class="py-5 container">
-        <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
+        <div
+          class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5"
+        >
           <a href="./index.html">
-            <img src="./images/logo.svg" alt="logo" height="100px" width="auto" />
+            <img
+              src="./images/logo.svg"
+              alt="logo"
+              height="100px"
+              width="auto"
+            />
           </a>
 
           <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4">
-            <h3 class="text-white mb-3 text-center text-md-start">Subscribe to our Newsletter</h3>
+            <h3 class="text-white mb-3 text-center text-md-start">
+              Subscribe to our Newsletter
+            </h3>
 
             <div class="input-group">
-              <input placeholder="Enter your email" type="email" class="form-control" />
+              <input
+                placeholder="Enter your email"
+                type="email"
+                class="form-control"
+              />
 
               <button class="btn btn-primary">Subscribe</button>
             </div>
           </div>
         </div>
 
-        <div class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center">
+        <div
+          class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center"
+        >
           <a class="nav-link" href="#">Privacy Policy</a>
           <p class="m-0 d-none d-md-block">|</p>
           <a class="nav-link" href="#">Terms of Service</a>
           <p class="mb-0 me-3 d-none d-md-block">|</p>
-          <p class="m-0">ListMe &COPY; 2025 All Rights Reserved</p>
+          <p class="m-0">BucketList &COPY; 2025 All Rights Reserved</p>
         </div>
       </div>
     </footer>
diff --git a/frontend/index.html b/frontend/index.html
index 34a0485..0303886 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -28,13 +28,20 @@
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <img src="./images/Hamburger.svg" alt="hamburger icon" height="40px" width="auto" />
+          <img
+            src="./images/Hamburger.svg"
+            alt="hamburger icon"
+            height="40px"
+            width="auto"
+          />
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto text-end">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
+              <a class="nav-link active" aria-current="page" href="./index.html"
+                >Home</a
+              >
             </li>
             <li class="nav-item">
               <a class="nav-link" href="./features.html">Features</a>
@@ -51,45 +58,60 @@
     </nav>
 
     <!-- ↓ Page not ready ↓ -->
-    <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-      <div class="container text-center text-white py-5">
-        <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-        <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-
-        <div class="mt-5">
-          <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
-        </div>
+    <main
+      class="d-flex justify-content-center flex-column align-items-center bg-img"
+    >
+      <h1 class="display-2 text-center text-white">
+        Stay origansed with BucketList
+      </h1>
+      <div class="d-flex justify-content-center align-items-center mt-5">
+        <a href="./dashboard.html" class="btn btn-primary btn-lg px-5"
+          >Try it for free</a
+        >
       </div>
-    </section>
+    </main>
     <!-- ↑ Page not ready ↑ -->
 
     <!-- ↓ Footer ↓ -->
     <footer>
       <div class="py-5 container">
-        <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
+        <div
+          class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5"
+        >
           <a href="./index.html">
-            <img src="./images/logo.svg" alt="logo" height="100px" width="auto" />
+            <img
+              src="./images/logo.svg"
+              alt="logo"
+              height="100px"
+              width="auto"
+            />
           </a>
 
           <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4">
-            <h3 class="text-white mb-3 text-center text-md-start">Subscribe to our Newsletter</h3>
+            <h3 class="text-white mb-3 text-center text-md-start">
+              Subscribe to our Newsletter
+            </h3>
 
             <div class="input-group">
-              <input placeholder="Enter your email" type="email" class="form-control" />
+              <input
+                placeholder="Enter your email"
+                type="email"
+                class="form-control"
+              />
 
               <button class="btn btn-primary">Subscribe</button>
             </div>
           </div>
         </div>
 
-        <div class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center">
+        <div
+          class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center"
+        >
           <a class="nav-link" href="#">Privacy Policy</a>
           <p class="m-0 d-none d-md-block">|</p>
           <a class="nav-link" href="#">Terms of Service</a>
           <p class="mb-0 me-3 d-none d-md-block">|</p>
-          <p class="m-0">ListMe &COPY; 2025 All Rights Reserved</p>
+          <p class="m-0">BucketList &COPY; 2025 All Rights Reserved</p>
         </div>
       </div>
     </footer>
diff --git a/frontend/js/api.js b/frontend/js/api.js
new file mode 100644
index 0000000..db640cb
--- /dev/null
+++ b/frontend/js/api.js
@@ -0,0 +1,93 @@
+const tasks = [
+    {
+        id: 1,
+        completed: false,
+        title: "Buy groceries for the week",
+        description: "Pick up vegetables, fruits, milk, eggs, and bread from the supermarket.",
+        dueDate: "14/03/2026",
+        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
+    },
+    {
+        id: 2,
+        completed: false,
+        title: "Clean the apartment",
+        description: "Vacuum the floors, wipe kitchen surfaces, and take out the trash.",
+        dueDate: "16/03/2026",
+        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
+    },
+    {
+        id: 3,
+        completed: false,
+        title: "Call the dentist for appointment",
+        description: "Book a routine checkup and confirm available time slots for next week.",
+        dueDate: "17/03/2026",
+        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
+    },
+    {
+        id: 4,
+        completed: true,
+        title: "Do laundry and fold clothes",
+        description: "Wash dark and light loads separately, then fold and organize clean clothes.",
+        dueDate: "21/03/2026",
+        dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
+    }
+];
+
+// GLOBALS
+
+const $taskForm = document.getElementById('taskForm');
+const $toDoList = document.getElementById('toDoList');
+const $completedList = document.getElementById('completedList');
+
+// EVENT LISTENERS
+window.addEventListener("DOMContentLoaded", () => {
+    displayTasks();
+})
+
+// DISPLAY TASKS
+
+function displayTasks(){
+
+    function formatTask(task){
+        const li = document.createElement("li");
+
+        li.classList.add('card','p-3','mt-2');
+        const done = task.completed 
+            ? "text-decoration-line-through opacity-50" 
+            : "";
+        li.innerHTML = `
+        <div class="d-flex justify-content-between align-items-start">
+            <h4 class="${done} col-11">${task.title}</h4>
+            <button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
+        </div>
+        <p class="${done}">${task.description}</p>
+        <p class="${done}"><strong>Due: </strong>${task.dueDate}</p>
+            <div class="d-flex justify-content-between align-items-end">
+                <div>
+                    ${
+                        task.completed 
+                            ? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
+                            : `
+                                <button data-id="${task.id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
+                                <button data-id="${task.id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
+                            `
+                    }
+                    </div>
+                <p class="m-0 ${done}"><strong>Created on: </strong>${task.dateCreated}</p>
+            </div>
+        `;
+
+        return li;
+
+    }
+
+    $toDoList.innerHTML = "";
+    $completedList.innerHTML = "";
+
+    tasks.forEach(task => {
+        const formattedTask = formatTask(task);
+        task.completed 
+            ? $completedList.appendChild(formattedTask) 
+            : $toDoList.appendChild(formattedTask)
+    })
+}
diff --git a/frontend/login.html b/frontend/login.html
index 2a61380..ba4db7d 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -28,13 +28,20 @@
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <img src="./images/Hamburger.svg" alt="hamburger icon" height="40px" width="auto" />
+          <img
+            src="./images/Hamburger.svg"
+            alt="hamburger icon"
+            height="40px"
+            width="auto"
+          />
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto text-end">
             <li class="nav-item">
-              <a class="nav-link" aria-current="page" href="./index.html">Home</a>
+              <a class="nav-link" aria-current="page" href="./index.html"
+                >Home</a
+              >
             </li>
             <li class="nav-item">
               <a class="nav-link" href="./features.html">Features</a>
@@ -51,9 +58,16 @@
     </nav>
 
     <!-- ↓ Page not ready ↓ -->
-    <section class="bg-img d-flex justify-content-center align-items-center support py-5">
+    <section
+      class="bg-img d-flex justify-content-center align-items-center support py-5"
+    >
       <div class="container text-center text-white py-5">
-        <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+        <img
+          src="./images/Construction.svg"
+          alt="Under Construction"
+          height="150px"
+          width="auto"
+        />
 
         <h2 class="mt-5">Page under construction. Check back later!</h2>
 
@@ -67,28 +81,43 @@
     <!-- ↓ Footer ↓ -->
     <footer>
       <div class="py-5 container">
-        <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
+        <div
+          class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5"
+        >
           <a href="./index.html">
-            <img src="./images/logo.svg" alt="logo" height="100px" width="auto" />
+            <img
+              src="./images/logo.svg"
+              alt="logo"
+              height="100px"
+              width="auto"
+            />
           </a>
 
           <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4">
-            <h3 class="text-white mb-3 text-center text-md-start">Subscribe to our Newsletter</h3>
+            <h3 class="text-white mb-3 text-center text-md-start">
+              Subscribe to our Newsletter
+            </h3>
 
             <div class="input-group">
-              <input placeholder="Enter your email" type="email" class="form-control" />
+              <input
+                placeholder="Enter your email"
+                type="email"
+                class="form-control"
+              />
 
               <button class="btn btn-primary">Subscribe</button>
             </div>
           </div>
         </div>
 
-        <div class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center">
+        <div
+          class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center"
+        >
           <a class="nav-link" href="#">Privacy Policy</a>
           <p class="m-0 d-none d-md-block">|</p>
           <a class="nav-link" href="#">Terms of Service</a>
           <p class="mb-0 me-3 d-none d-md-block">|</p>
-          <p class="m-0">ListMe &COPY; 2025 All Rights Reserved</p>
+          <p class="m-0">BucketList &COPY; 2025 All Rights Reserved</p>
         </div>
       </div>
     </footer>
diff --git a/frontend/pricing.html b/frontend/pricing.html
index 504a362..9ccc510 100644
--- a/frontend/pricing.html
+++ b/frontend/pricing.html
@@ -28,13 +28,20 @@
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <img src="./images/Hamburger.svg" alt="hamburger icon" height="40px" width="auto" />
+          <img
+            src="./images/Hamburger.svg"
+            alt="hamburger icon"
+            height="40px"
+            width="auto"
+          />
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto text-end">
             <li class="nav-item">
-              <a class="nav-link" aria-current="page" href="./index.html">Home</a>
+              <a class="nav-link" aria-current="page" href="./index.html"
+                >Home</a
+              >
             </li>
             <li class="nav-item">
               <a class="nav-link" href="./features.html">Features</a>
@@ -51,9 +58,16 @@
     </nav>
 
     <!-- ↓ Page not ready ↓ -->
-    <section class="bg-img d-flex justify-content-center align-items-center support py-5">
+    <section
+      class="bg-img d-flex justify-content-center align-items-center support py-5"
+    >
       <div class="container text-center text-white py-5">
-        <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+        <img
+          src="./images/Construction.svg"
+          alt="Under Construction"
+          height="150px"
+          width="auto"
+        />
 
         <h2 class="mt-5">Page under construction. Check back later!</h2>
 
@@ -67,28 +81,43 @@
     <!-- ↓ Footer ↓ -->
     <footer>
       <div class="py-5 container">
-        <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
+        <div
+          class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5"
+        >
           <a href="./index.html">
-            <img src="./images/logo.svg" alt="logo" height="100px" width="auto" />
+            <img
+              src="./images/logo.svg"
+              alt="logo"
+              height="100px"
+              width="auto"
+            />
           </a>
 
           <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4">
-            <h3 class="text-white mb-3 text-center text-md-start">Subscribe to our Newsletter</h3>
+            <h3 class="text-white mb-3 text-center text-md-start">
+              Subscribe to our Newsletter
+            </h3>
 
             <div class="input-group">
-              <input placeholder="Enter your email" type="email" class="form-control" />
+              <input
+                placeholder="Enter your email"
+                type="email"
+                class="form-control"
+              />
 
               <button class="btn btn-primary">Subscribe</button>
             </div>
           </div>
         </div>
 
-        <div class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center">
+        <div
+          class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center"
+        >
           <a class="nav-link" href="#">Privacy Policy</a>
           <p class="m-0 d-none d-md-block">|</p>
           <a class="nav-link" href="#">Terms of Service</a>
           <p class="mb-0 me-3 d-none d-md-block">|</p>
-          <p class="m-0">ListMe &COPY; 2025 All Rights Reserved</p>
+          <p class="m-0">BucketList &COPY; 2025 All Rights Reserved</p>
         </div>
       </div>
     </footer>
diff --git a/frontend/signup.html b/frontend/signup.html
index 6fa4241..f619833 100644
--- a/frontend/signup.html
+++ b/frontend/signup.html
@@ -28,13 +28,20 @@
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <img src="./images/Hamburger.svg" alt="hamburger icon" height="40px" width="auto" />
+          <img
+            src="./images/Hamburger.svg"
+            alt="hamburger icon"
+            height="40px"
+            width="auto"
+          />
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto text-end">
             <li class="nav-item">
-              <a class="nav-link" aria-current="page" href="./index.html">Home</a>
+              <a class="nav-link" aria-current="page" href="./index.html"
+                >Home</a
+              >
             </li>
             <li class="nav-item">
               <a class="nav-link" href="./features.html">Features</a>
@@ -51,9 +58,16 @@
     </nav>
 
     <!-- ↓ Page not ready ↓ -->
-    <section class="bg-img d-flex justify-content-center align-items-center support py-5">
+    <section
+      class="bg-img d-flex justify-content-center align-items-center support py-5"
+    >
       <div class="container text-center text-white py-5">
-        <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+        <img
+          src="./images/Construction.svg"
+          alt="Under Construction"
+          height="150px"
+          width="auto"
+        />
 
         <h2 class="mt-5">Page under construction. Check back later!</h2>
 
@@ -67,28 +81,43 @@
     <!-- ↓ Footer ↓ -->
     <footer>
       <div class="py-5 container">
-        <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
+        <div
+          class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5"
+        >
           <a href="./index.html">
-            <img src="./images/logo.svg" alt="logo" height="100px" width="auto" />
+            <img
+              src="./images/logo.svg"
+              alt="logo"
+              height="100px"
+              width="auto"
+            />
           </a>
 
           <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4">
-            <h3 class="text-white mb-3 text-center text-md-start">Subscribe to our Newsletter</h3>
+            <h3 class="text-white mb-3 text-center text-md-start">
+              Subscribe to our Newsletter
+            </h3>
 
             <div class="input-group">
-              <input placeholder="Enter your email" type="email" class="form-control" />
+              <input
+                placeholder="Enter your email"
+                type="email"
+                class="form-control"
+              />
 
               <button class="btn btn-primary">Subscribe</button>
             </div>
           </div>
         </div>
 
-        <div class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center">
+        <div
+          class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center"
+        >
           <a class="nav-link" href="#">Privacy Policy</a>
           <p class="m-0 d-none d-md-block">|</p>
           <a class="nav-link" href="#">Terms of Service</a>
           <p class="mb-0 me-3 d-none d-md-block">|</p>
-          <p class="m-0">ListMe &COPY; 2025 All Rights Reserved</p>
+          <p class="m-0">BucketList &COPY; 2025 All Rights Reserved</p>
         </div>
       </div>
     </footer>
diff --git a/frontend/support.html b/frontend/support.html
index d124cb3..f66c487 100644
--- a/frontend/support.html
+++ b/frontend/support.html
@@ -28,13 +28,20 @@
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <img src="./images/Hamburger.svg" alt="hamburger icon" height="40px" width="auto" />
+          <img
+            src="./images/Hamburger.svg"
+            alt="hamburger icon"
+            height="40px"
+            width="auto"
+          />
         </button>
 
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto text-end">
             <li class="nav-item">
-              <a class="nav-link" aria-current="page" href="./index.html">Home</a>
+              <a class="nav-link" aria-current="page" href="./index.html"
+                >Home</a
+              >
             </li>
             <li class="nav-item">
               <a class="nav-link" href="./features.html">Features</a>
@@ -51,9 +58,16 @@
     </nav>
 
     <!-- ↓ Page not ready ↓ -->
-    <section class="bg-img d-flex justify-content-center align-items-center support py-5">
+    <section
+      class="bg-img d-flex justify-content-center align-items-center support py-5"
+    >
       <div class="container text-center text-white py-5">
-        <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+        <img
+          src="./images/Construction.svg"
+          alt="Under Construction"
+          height="150px"
+          width="auto"
+        />
 
         <h2 class="mt-5">Page under construction. Check back later!</h2>
 
@@ -67,28 +81,43 @@
     <!-- ↓ Footer ↓ -->
     <footer>
       <div class="py-5 container">
-        <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
+        <div
+          class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5"
+        >
           <a href="./index.html">
-            <img src="./images/logo.svg" alt="logo" height="100px" width="auto" />
+            <img
+              src="./images/logo.svg"
+              alt="logo"
+              height="100px"
+              width="auto"
+            />
           </a>
 
           <div class="col-12 col-sm-8 col-md-7 col-lg-5 col-xl-4">
-            <h3 class="text-white mb-3 text-center text-md-start">Subscribe to our Newsletter</h3>
+            <h3 class="text-white mb-3 text-center text-md-start">
+              Subscribe to our Newsletter
+            </h3>
 
             <div class="input-group">
-              <input placeholder="Enter your email" type="email" class="form-control" />
+              <input
+                placeholder="Enter your email"
+                type="email"
+                class="form-control"
+              />
 
               <button class="btn btn-primary">Subscribe</button>
             </div>
           </div>
         </div>
 
-        <div class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center">
+        <div
+          class="d-flex justify-content-center flex-column gap-3 flex-md-row align-items-center"
+        >
           <a class="nav-link" href="#">Privacy Policy</a>
           <p class="m-0 d-none d-md-block">|</p>
           <a class="nav-link" href="#">Terms of Service</a>
           <p class="mb-0 me-3 d-none d-md-block">|</p>
-          <p class="m-0">ListMe &COPY; 2025 All Rights Reserved</p>
+          <p class="m-0">BucketList &COPY; 2025 All Rights Reserved</p>
         </div>
       </div>
     </footer>