Update: Enhanced app UI

hoangsonww · May 23, 2024 · 813f286 · 813f286
1 parent 3fa6b95
commit 813f286
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,17 +124,37 @@ <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>
 
     <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
@@ -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
@@ -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
@@ -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
@@ -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>`;
       }