From 813f286959957ef5f6bb3f3f518ab222b3d11ac0 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Thu, 23 May 2024 19:46:55 +0700
Subject: [PATCH] Update: Enhanced app UI

---
 .../www/StickyNotes-Frontend/css/style.css    | 23 +++--
 .../www/StickyNotes-Frontend/html/about.html  |  2 +-
 .../StickyNotes-Frontend/html/calendar.html   | 23 ++---
 .../html/create-account.html                  | 23 ++++-
 .../StickyNotes-Frontend/html/profile.html    |  8 ++
 .../html/reset-password.html                  | 23 ++++-
 .../StickyNotes-Frontend/html/sign-in.html    | 17 ++++
 .../www/StickyNotes-Frontend/js/quotes.js     |  2 +-
 .../www/StickyNotes-Frontend/js/script.js     | 83 ++++++++++++-------
 StickyNotes-Mobile-App/www/index.html         | 65 +++++++++++++--
 10 files changed, 211 insertions(+), 58 deletions(-)

diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/css/style.css b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/css/style.css
index 07f95e0..2a83a37 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/css/style.css
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/css/style.css
@@ -62,6 +62,10 @@ h4 {
     margin-left: 10px;
 }
 
+.image-container .hidden {
+    display: none;
+}
+
 .note-image {
     max-height: 200px;
     display: block;
@@ -72,9 +76,9 @@ h4 {
     top: 0;
     right: 0;
     cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    padding: 2px 5px;
+    background: transparent;
+    color: red;
+    padding: 5px 5px;
     border-radius: 50%;
     display: none;
 }
@@ -293,6 +297,7 @@ h4 {
     display: flex;
     justify-content: center;
     align-items: center;
+    transition: transform 0.2s;
 }
 
 #googleSignInBtn:hover {
@@ -449,7 +454,8 @@ h4 {
 
 body.dark-mode {
     background: linear-gradient(to right, #2c3e50, #34495e);
-    color: black;
+    transition: background 3.3s, color 0.5s;
+    color: white;
 }
 
 body.dark-mode header {
@@ -494,8 +500,7 @@ body.dark-mode .note .tools button:hover {
 }
 
 .hover-effect:hover {
-    transform: scale(1.03);
-    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
     background-color: #403890;
 }
 
@@ -507,12 +512,16 @@ body.dark-mode .note .tools button:hover {
     width: 300px;
     background-color: #fff;
     border: 1px solid #ccc;
-    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
     border-radius: 10px;
     overflow: hidden;
     transition: transform 0.2s;
 }
 
+.hidden {
+    display: none;
+}
+
 .highlight {
     color: #ffa24e;
 }
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/about.html b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/about.html
index 059e6a8..c1933c5 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/about.html
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/about.html
@@ -227,7 +227,7 @@ <h2>Contact and Feedback</h2>
 
         <section class="about-section">
             <h2>Meet the Dev</h2>
-            <p>StickyNotes was created by David Nguyen, a full-stack web developer based in North Carolina, USA. David is passionate about creating apps that are both functional and user-friendly. He is also the creator of RecipeGenie, The MovieVerse Database, WeatherMate, The ToDo App, and EventHorizon.</p>
+            <p>StickyNotes was created by <a href="https://github.com/hoangsonww">Son Nguyen</a>, a full-stack web developer based in North Carolina, USA. David is passionate about creating apps that are both functional and user-friendly. He is also the creator of RecipeGenie, The MovieVerse Database, WeatherMate, The ToDo App, and EventHorizon.</p>
         </section>
 
         <section class="about-section">
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/calendar.html b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/calendar.html
index 8342d10..0d670cf 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/calendar.html
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/calendar.html
@@ -39,12 +39,12 @@
         }
 
         #addNote {
-            background-color: #ffa24e;
+            background-color: #dc6800;
             font: inherit;
         }
 
         #addNote:hover {
-            background-color: #ff8a24;
+            background-color: #b15200;
         }
 
         header {
@@ -149,7 +149,7 @@
 
         .modal-content h2 {
             margin-left: 25px;
-            color: #ffa24e;
+            color: #dc6800;
         }
 
         .quick-access-toolbar {
@@ -347,19 +347,20 @@ <h5>Task List</h5>
         <div id='calendar'></div>
     </div>
 
-    <div id="addNoteModal" class="modal">
-        <div class="modal-content" style="background-color: #7378c5">
+    <div id="addNoteModal" class="modal" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
+        <div class="modal-content" style="background-color: #f8f8f8">
             <span class="close">&times;</span>
             <h2 style="margin-bottom: 10px">Add New Note</h2>
             <form id="addNoteForm">
-                <label for="noteTitle">Title</label><br>
-                <input type="text" id="noteTitle" placeholder="Note Title" required><br>
+                <label for="noteTitle" style="color: black; margin-bottom: 10px">Title</label><br>
+                <input type="text" id="noteTitle" placeholder="Note Title" required style="border: 1px solid #000"><br>
 
-                <label for="noteDescription">Description</label><br>
-                <textarea id="noteDescription" placeholder="Note Description" style="margin-bottom: 10px"></textarea><br>
+                <label for="noteDescription" style="color: black">Description</label><br>
+                <textarea id="noteDescription" placeholder="Note Description" style="margin-bottom: 10px; border: 1px solid #000"></textarea><br>
 
-                <label for="noteDueDate">Due Date</label><br>
-                <input type="date" id="noteDueDate"><br>
+                <label for="noteDueDate" style="color: black">Due Date</label><br>
+                <input type="date" id="noteDueDate" style="margin-bottom: 10px; border: 1px solid #000"><br>
+                <br/>
 
                 <input type="submit" id="addNote" value="Add Note">
             </form>
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/create-account.html b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/create-account.html
index d065a5d..384a5b9 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/create-account.html
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/create-account.html
@@ -43,6 +43,7 @@
 
         .account-creation-form-container input[type="email"],
         .account-creation-form-container input[type="password"],
+        .account-creation-form-container input[type="text"],
         .account-creation-form-container button {
             width: 90%;
             padding: 10px;
@@ -123,10 +124,14 @@ <h5>Task List</h5>
     <div class="account-creation-form-container">
         <form id="createAccountForm">
             <h2>Create Account</h2>
-            <p style="margin-bottom: 10px">Become a member of The StickyNotes community and start saving your notes!</p>
+            <p style="margin-bottom: 10px; color: black">Become a member of The StickyNotes community and start saving your notes!</p>
             <input type="email" id="newEmail" placeholder="Email" required>
             <input type="password" id="newPassword" placeholder="Password" required>
             <input type="password" id="confirmPassword" placeholder="Re-type Password" required>
+            <label for="showPassword" style="color: black">
+                <input type="checkbox" id="showPassword" style="margin-top: 10px;">
+                Show Password
+            </label>
             <button type="submit">Create Account</button>
         </form>
     </div>
@@ -134,6 +139,22 @@ <h2>Create Account</h2>
     <button class="back-to-home" onclick="window.location.href = '../../index.html'">Back to Home</button>
     <button class="back-to-home" onclick="window.location.href = '../html/sign-in.html'">Back to Sign In</button>
     <script src="../js/create-account.js" type="module"></script>
+
+    <script>
+      document.getElementById('showPassword').addEventListener('change', function() {
+        const passwordInput = document.getElementById('newPassword');
+        const passwordConfirm = document.getElementById('confirmPassword');
+
+        if (this.checked) {
+            passwordInput.type = 'text';
+            passwordConfirm.type = 'text';
+        } else {
+            passwordInput.type = 'password';
+            passwordConfirm.type = 'password';
+        }
+      });
+    </script>
+
     <script>
       const themeToggleButton = document.createElement("button");
       themeToggleButton.innerText = "Toggle Dark Mode";
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/profile.html b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/profile.html
index 1941c41..4dc9564 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/profile.html
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/profile.html
@@ -342,14 +342,22 @@ <h2>Edit Profile Details</h2>
                 <span class="close" onclick="closeModal()">&times;</span>
             </div>
             <form id="editProfileForm">
+                <label for="editUsername">Username:</label>
                 <input type="text" id="editUsername" placeholder="Username">
                 <div class="dob-container">
                     <label for="editDob">Date of Birth:</label>
                     <input type="date" id="editDob">
                 </div>
+                <label for="editBio">Bio:</label>
                 <input type="text" id="editBio" placeholder="Bio">
+                <br/>
+                <label for="editLocation">Location:</label>
                 <input type="text" id="editLocation" placeholder="Location">
+                <br/>
+                <label for="editHobbies">Hobbies:</label>
                 <input type="text" id="editHobbies" placeholder="Hobbies">
+                <br/>
+                <label for="editPersonalQuote">Personal Quote:</label>
                 <input type="text" id="editPersonalQuote" placeholder="Personal Quote">
                 <br/>
                 <button type="button" id="saveChanges" onclick="saveProfileChanges()">Save Changes</button>
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/reset-password.html b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/reset-password.html
index 6cb6ecf..6b92a9c 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/reset-password.html
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/reset-password.html
@@ -43,6 +43,7 @@
 
         .password-reset-form-container input[type="email"],
         .password-reset-form-container input[type="password"],
+        .password-reset-form-container input[type="text"],
         .password-reset-form-container button {
             width: 90%;
             padding: 10px;
@@ -124,13 +125,18 @@ <h5>Task List</h5>
     <div class="password-reset-form-container">
         <form id="resetPasswordForm">
             <h2>Reset Password</h2>
-            <p style="margin-bottom: 10px">Enter your email below and we'll determine if you can reset your password.</p>
+            <p style="margin-bottom: 10px; color: black">Enter your email below and we'll determine if you can reset your password.</p>
             <input type="email" id="resetEmail" placeholder="Enter your email" required>
             <button type="submit">Verify Account</button>
         </form>
         <div id="newPasswordFields" style="display: none;">
             <input type="password" id="newPassword" placeholder="New Password" required>
             <input type="password" id="confirmNewPassword" placeholder="Confirm New Password" required>
+            <br/>
+            <label for="showPassword" style="color: black">
+                <input type="checkbox" id="showPassword" style="margin-top: 10px;">
+                Show Password
+            </label>
             <button type="button" id="updatePasswordButton">Update Password</button>
         </div>
     </div>
@@ -139,6 +145,21 @@ <h2>Reset Password</h2>
     <button class="back-to-home" onclick="window.location.href = '../html/sign-in.html'">Back to Sign In</button>
     <script src="../js/reset-password.js" type="module"></script>
 
+    <script>
+      document.getElementById('showPassword').addEventListener('change', function() {
+        const passwordInput = document.getElementById('newPassword');
+        const passwordConfirm = document.getElementById('confirmNewPassword');
+
+        if (this.checked) {
+          passwordInput.type = 'text';
+          passwordConfirm.type = 'text';
+        } else {
+          passwordInput.type = 'password';
+          passwordConfirm.type = 'password';
+        }
+      });
+    </script>
+
     <script>
       const themeToggleButton = document.createElement("button");
       themeToggleButton.innerText = "Toggle Dark Mode";
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/sign-in.html b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/sign-in.html
index 1411683..eef1cac 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/sign-in.html
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/html/sign-in.html
@@ -51,6 +51,7 @@
 
         .sign-in-form-container input[type="email"],
         .sign-in-form-container input[type="password"],
+        .sign-in-form-container input[type="text"],
         .sign-in-form-container button {
             width: 90%;
             padding: 10px;
@@ -147,6 +148,10 @@ <h2>Sign In</h2>
             <p style="margin-bottom: 10px">Please be assured that we do not store your password in our database, but use advanced authentication to securely store your password.</p>
             <input type="email" id="signInEmail" placeholder="Email" required>
             <input type="password" id="signInPassword" placeholder="Password" required>
+            <label for="showPassword" style="color: black">
+                <input type="checkbox" id="showPassword" style="margin-top: 10px;">
+                Show Password
+            </label>
             <button type="submit">Sign In</button>
             <button type="button" id="createAccountBtn">Create an Account</button>
             <button type="button" id="resetPasswordBtn" onclick="window.location.href='reset-password.html'">Reset Password</button>
@@ -155,6 +160,18 @@ <h2>Sign In</h2>
 
     <button class="back-to-home" onclick="window.location.href = '../../index.html'">Back to Home</button>
     <script src="../js/sign-in.js" type="module"></script>
+
+    <script>
+      document.getElementById('showPassword').addEventListener('change', function() {
+        const passwordInput = document.getElementById('signInPassword');
+        if (this.checked) {
+          passwordInput.type = 'text';
+        } else {
+          passwordInput.type = 'password';
+        }
+      });
+    </script>
+
     <script>
       document.getElementById('createAccountBtn').addEventListener('click', function() {
         window.location.href = 'create-account.html';
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/quotes.js b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/quotes.js
index 1ab7d76..613bccc 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/quotes.js
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/quotes.js
@@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
         const author = quote.author ? quote.author.replace(', type.fit', '') : "Unknown";
         quoteContainer.innerHTML += `
         <p>
-            <span class="quote-text">${quote.text}</span><br>
+            <span class="quote-text" style="color: black">${quote.text}</span><br>
             <span class="quote-author">— ${author}</span>
         </p>`;
       }
diff --git a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/script.js b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/script.js
index 14cf8d4..71076c4 100644
--- a/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/script.js
+++ b/StickyNotes-Mobile-App/www/StickyNotes-Frontend/js/script.js
@@ -35,6 +35,7 @@ if (notes) {
     notes.forEach((note) => {
         addNewNote(note.title, note.text, note.color, note.tag, note.dueDate, note.voiceNote, note.image, note.isPinned);
     });
+
     sortNotesByDueDate();
     sortNotesByPinned()
 }
@@ -50,33 +51,35 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
     note.classList.add("note");
     note.title = "Drag to reposition this note";
     note.style.backgroundColor = color;
+
     let today = new Date().toISOString().split('T')[0];
 
     if (isPinned) {
         note.classList.add("pinned");
     }
 
+    const imageDisplayStyle = image ? 'block' : 'none';
+
     note.innerHTML = `
         <div class="notes">
             <div class="tools">
-                <input type="text" class="due-date" style="font: inherit" placeholder="Add Due Date..." onfocus="this.type='date';this.focus();" onblur="if(!this.value)this.type='text';" min="${today}" value="">
-                <input type="text" class="tag" style="font: inherit" placeholder="Add tag..."/>
+                <input type="text" class="due-date" style="font: inherit" placeholder="Add Due Date..." onfocus="this.type='date';this.focus();" onblur="if(!this.value)this.type='text';" min="${today}" value="${dueDate}">
+                <input type="text" class="tag" style="font: inherit" placeholder="Add tag..." value="${tag}"/>
                 <button class="edit"><i class="fas fa-edit"></i></button>
                 <button class="mic"><i class="fas fa-microphone"></i></button>
                 <button class="image-btn"><i class="fas fa-image"></i></button>
                 <input type="file" class="image-upload" accept="image/*" style="display: none;">
-                <audio class="voice-note" controls></audio>
+                <audio class="voice-note" controls src="${voiceNote}"></audio>
                 <button class="pin">${isPinned ? 'Unpin' : 'Pin'}</button>
-                <button id="deletBtn" class="delete"><i class="fas fa-trash-alt"></i></button>
+                <button class="delete"><i class="fas fa-trash-alt"></i></button>
                 <input type="color" class="color-picker" value="${color}" style="border: 1px solid #000000;" title="Change color for this note">
             </div>
-            <div class="note-title ${title ? "" : "untitled"}" contenteditable="false" title="Add or change the title for this note">${title}</div>
-            <div class="main ${text ? "" : "hidden"}"></div>
-            <div class="note-content" title="Add or change the content for this note">
-                <textarea placeholder="Add note content here..." style="font: inherit">${text}</textarea>
-                <div class="image-container ${image ? "" : "hidden"}">
-                    <img src="${image}" class="note-image" />
-                    <span class="remove-image">✖</span>
+            <div class="note-title ${title ? "" : "untitled"}" contenteditable="true">${title}</div>
+            <div class="note-content">
+                <textarea style="font: inherit" placeholder="Add note content here..." style="width: 100%;">${text}</textarea>
+                <div class="image-container" style="display: ${imageDisplayStyle}; position: relative; text-align: center; height: auto; margin-top: 15px;">
+                    <img src="${image}" class="note-image" alt="Note Image" style="max-width: 100%; height: auto; display: block; margin: 0 auto;">
+                    <span class="remove-image" style="position: absolute; top: 0; right: 0; color: red; font-weight: bolder; font-size: 20px; cursor: pointer; background: none">✖</span>
                 </div>
             </div>
         </div>
@@ -135,8 +138,10 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
         pinBtn.classList.add('pin-unpinned');
         pinBtn.title = "Pin Note";
     }
+
     pinBtn.addEventListener('click', () => {
         const isNotePinned = note.classList.toggle('pinned');
+
         if (isNotePinned) {
             pinBtn.querySelector('i').classList.remove('pin-unpinned');
             pinBtn.querySelector('i').classList.add('pin-pinned');
@@ -196,21 +201,20 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
     const noteImage = note.querySelector('.note-image');
     const removeImageIcon = note.querySelector('.remove-image');
 
-    if (image) {
-        noteImage.src = image;
-        imageContainer.classList.remove('hidden');
-    }
-
     imageBtn.addEventListener('click', () => {
         imageUploadInput.click();
     });
 
+    imageUploadInput.addEventListener('click', function() {
+        this.value = null;
+    });
+
     imageUploadInput.addEventListener('change', function () {
         if (this.files && this.files[0]) {
             const reader = new FileReader();
             reader.onload = function (e) {
                 noteImage.src = e.target.result;
-                imageContainer.classList.remove('hidden');
+                imageContainer.style.display = 'block';
                 updateLS();
             };
             reader.readAsDataURL(this.files[0]);
@@ -219,7 +223,7 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
 
     removeImageIcon.addEventListener('click', () => {
         noteImage.src = '';
-        imageContainer.classList.add('hidden');
+        imageContainer.style.display = 'none';
         updateLS();
     });
 
@@ -230,16 +234,17 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
     let audioChunks = [];
     const removeRecordingBtn = document.createElement('button');
     removeRecordingBtn.innerHTML = '✖';
-    removeRecordingBtn.className = 'remove-recording hidden';
+    removeRecordingBtn.style.display = 'none';
     removeRecordingBtn.title = "Remove Voice Note";
 
-    if (voiceNote) {
-        note.querySelector('.voice-note').src = voiceNote;
+    if (voiceNote || voiceNote !== '') {
+        voiceNotePlayer.src = voiceNote;
+        removeRecordingBtn.style.display = 'inline';
     }
 
     if (voiceNote.src) {
         micBtn.disabled = true;
-        removeRecordingBtn.classList.remove('hidden');
+        removeRecordingBtn.style.display = 'inline';
     }
 
     micBtn.addEventListener("click", () => {
@@ -276,12 +281,13 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
             mediaRecorder.stop();
             micBtn.innerHTML = '<i class="fas fa-microphone"></i>';
             recordingStatus.style.display = "none";
+            removeRecordingBtn.style.display = 'inline';
         }
     });
 
     removeRecordingBtn.addEventListener('click', () => {
         voiceNotePlayer.src = '';
-        removeRecordingBtn.classList.add('hidden');
+        removeRecordingBtn.style.display = 'none';
         micBtn.disabled = false;
         updateLS();
     });
@@ -303,6 +309,7 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
     note.querySelector('.tools').appendChild(moveDownButton);
 
     note.draggable = true;
+    note.style.cursor = "grab";
     note.addEventListener('dragstart', handleDragStart);
     note.addEventListener('dragend', handleDragEnd);
 
@@ -312,12 +319,14 @@ function addNewNote(title = "Untitled Note - Click here to give it a name!", tex
 
     imageBtn.title = "Upload or remove image";
     micBtn.title = "Record or stop recording voice note";
+
     updateLS();
     checkAndDisplayEmptyNotesMessage();
 }
 
 function updateLS() {
     const notesArr = [];
+
     document.querySelectorAll(".note").forEach((note) => {
         const imageData = note.querySelector('.note-image').src;
         const voiceData = note.querySelector('.voice-note').src;
@@ -332,12 +341,14 @@ function updateLS() {
             isPinned: note.classList.contains('pinned')
         });
     });
+
     localStorage.setItem("notes", JSON.stringify(notesArr));
 }
 
 function sortNotesByPinned() {
     const pinnedNotes = [];
     const unpinnedNotes = [];
+
     document.querySelectorAll(".note").forEach((note) => {
         if (note.classList.contains('pinned')) {
             pinnedNotes.push(note);
@@ -379,21 +390,31 @@ function stopAutoScrolling() {
     }
 }
 
-document.addEventListener('dragover', handleWindowDragOver);
-document.addEventListener('dragend', stopAutoScrolling);
-
 function handleDragStart(e) {
     e.target.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
 }
 
 function handleDragEnd(e) {
     e.target.classList.remove('dragging');
     const draggableElements = [...notesContainer.querySelectorAll('.note:not(.dragging)')];
-    draggableElements.forEach(child => child.style.borderTop = 'none');
+    draggableElements.forEach(child => child.style.borderTop = '');
 }
 
 function handleDragOver(e) {
     e.preventDefault();
+    const afterElement = getDragAfterElement(notesContainer, e.clientY);
+    const draggingElement = document.querySelector('.dragging');
+    const draggableElements = [...notesContainer.querySelectorAll('.note:not(.dragging)')];
+
+    draggableElements.forEach(element => {
+        if (element === afterElement) {
+            element.style.borderTop = '2px solid white';
+        }
+        else {
+            element.style.borderTop = '';
+        }
+    });
 }
 
 function handleDrop(e) {
@@ -402,7 +423,8 @@ function handleDrop(e) {
     const draggable = document.querySelector('.dragging');
     if (afterElement == null) {
         notesContainer.appendChild(draggable);
-    } else {
+    }
+    else {
         notesContainer.insertBefore(draggable, afterElement);
     }
     draggable.classList.remove('dragging');
@@ -414,7 +436,7 @@ function getDragAfterElement(container, y) {
 
     return draggableElements.reduce((closest, child) => {
         const box = child.getBoundingClientRect();
-        const offset = y - box.top - box.height / 2;
+        const offset = y - box.top - (box.height * 0.25);
         if (offset < 0 && offset > closest.offset) {
             return { offset: offset, element: child };
         }
@@ -424,6 +446,9 @@ function getDragAfterElement(container, y) {
     }, { offset: Number.NEGATIVE_INFINITY }).element;
 }
 
+document.addEventListener('dragover', handleWindowDragOver);
+document.addEventListener('dragend', stopAutoScrolling);
+
 function moveUp(noteElem) {
     const prevNote = noteElem.previousElementSibling;
     if (prevNote) {
diff --git a/StickyNotes-Mobile-App/www/index.html b/StickyNotes-Mobile-App/www/index.html
index f2d962a..e129043 100644
--- a/StickyNotes-Mobile-App/www/index.html
+++ b/StickyNotes-Mobile-App/www/index.html
@@ -44,6 +44,58 @@
     <script src="StickyNotes-Frontend/js/script.js" defer></script>
     <link rel="icon" type="image/x-icon" href="utils/favicon.ico">
     <link rel="manifest" href="manifest.json">
+    <style>
+        body {
+            transition: color 0.3s;
+            position: relative;
+        }
+
+        body::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to right, #2c3e50, #34495e);
+            transition: opacity 0.3s ease;
+            z-index: -1;
+            opacity: 0;
+        }
+
+        body.dark-mode::before {
+            opacity: 1;
+        }
+
+        body.dark-mode {
+            color: white;
+        }
+
+        body.dark-mode header {
+            background-color: #34495e;
+        }
+
+        body.dark-mode .note {
+            background-color: #2c3e50;
+            color: black;
+        }
+
+        body.dark-mode .about-btn, body.dark-mode .add {
+            background-color: #e74c3c;
+        }
+
+        body.dark-mode .about-btn:hover, body.dark-mode .add:hover {
+            background-color: #c0392b;
+        }
+
+        body.dark-mode .note .tools button {
+            color: #e74c3c;
+        }
+
+        body.dark-mode .note .tools button:hover {
+            color: #c0392b;
+        }
+    </style>
 </head>
 
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-5SDFD28LEQ"></script>
@@ -69,6 +121,7 @@ <h4>
         </h4>
         <input type="file" id="importNotes" title="JSON Files Only!" accept=".json" style="display: none;">
     </header>
+
     <div class="quick-access-toolbar" title="Quick Access Buttons">
         <button id="toggleAddBtn" onclick="addNewNote()" title="Add New Note"><i class="fas fa-sticky-note"></i></button>
         <button onclick="toggleDarkMode()" title="Toggle Dark Mode"><i class="fas fa-moon"></i></button>
@@ -160,17 +213,16 @@ <h4 class="mood-tracker-title">Mood Tracker</h4>
     </div>
 
     <div class="weather-container">
-        <div id="weather-display" class="weather-display">
-        </div>
+        <div id="weather-display" class="weather-display"></div>
         <div id="weather-search-container" class="weather-search-container hidden">
             <input type="text" id="weather-search-input" style="font: inherit; font-size: 11px" placeholder="Enter a location...">
             <button id="weather-search-btn">Search</button>
         </div>
     </div>
 
-    <div id="mini-task-list" class="hover-effect" title="A quick reminder of what you want to get done!">
+    <div id="mini-task-list" title="A quick reminder of what you want to get done!">
         <h5>Task List</h5>
-        <input type="text" id="task-input" style="font: inherit; font-size: 12px" placeholder="New task..." maxlength="20">
+        <input type="text" id="task-input" style="font: inherit; border: none; font-size: 12px" placeholder="New task..." maxlength="20">
         <ul id="task-list"></ul>
     </div>
 
@@ -186,7 +238,7 @@ <h5>Task List</h5>
         </button>
     </div>
 
-    <div id="timeContainer" class="time-display hover-effect"></div>
+    <div id="timeContainer" class="time-display"></div>
 
     <script>
         document.addEventListener("DOMContentLoaded", () => {
@@ -196,7 +248,6 @@ <h5>Task List</h5>
             }
         });
     </script>
-
 </body>
-
+    
 </html>