Update v0.3.0

index.html

@@ -24,14 +24,15 @@
     <div id="clock"></div>
     <div id="greet"></div>
   </div>
+      <!-- User Profile Photo Area -->
+<div id="profile-photo">
+  <div class="avatar-container">
+    <img id="user-photo" src="image/user.png" alt="User Photo">
+  </div>
+  <div id="user-name"></div>
+</div>
   <div id="bottom-container">
     <div id="button-container">
-      <button title="Upload Background" id="upload-button" class="button">
-        <img src="image/upload.png" alt="Upload Background" class="button-icon">
-      </button>
-      <button title="Delete Background" id="delete-button" class="button">
-        <img src="image/delete.png" alt="Delete Background" class="button-icon">
-      </button>
       <button title="About" id="about-button" class="button">
         <img src="image/about.png" alt="About" class="button-icon">
       </button>
@@ -44,7 +45,9 @@
       <button title="Web Notes" id="notes-button" class="button">
         <img src="image/notes.png" alt="Notes" class="button-icon">
       </button>
-      <input type="file" id="image-upload" accept="image/*">
+      <button class="button" id="settings-button">
+        <img src="image/settings.png" alt="Settings" class="button-icon">
+      </button>
     </div>
     <div id="quote"></div>
   </div>
@@ -115,6 +118,29 @@ <h2 class="about-title">About</h2>
       <iframe id="notes-iframe" src="app/notes/index.html" frameborder="0"></iframe>
     </div>
   </div>
+  <div id="settings-popup" class="popup">
+    <div class="popup-content">
+      <button title="Upload Background" id="upload-button">
+        <p>Upload Background</p>
+      </button>
+      <button title="Delete Background" id="delete-button">
+        <p>Delete Background</p>
+      </button>
+
+    <button id="choose-file">
+      <p>Choose Avatar Photo</p>
+    </button>
+    <button id="delete-photo">
+      <p>Delete Avatar Photo</p>
+    </button>
+    <button id="set-name">
+      <p>Set Name</p>
+    </button>
+      <input type="file" id="photo-upload" accept="image/*" style="display: none;">
+      <input type="file" id="image-upload" accept="image/*">
+      <button title="Close" id="settings-close" class="popup-close-button">&#x2715</button>
+    </div>
+  </div>
   <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -356,6 +356,19 @@ notesClose.addEventListener('click', () => {
   notesPopup.style.display = 'none';
 });
 
+const settingsButton = document.getElementById('settings-button');
+const settingsPopup = document.getElementById('settings-popup');
+const settingsClose = document.getElementById('settings-close');
+
+settingsButton.addEventListener('click', () => {
+  settingsPopup.classList.add('fadeIn');
+  settingsPopup.style.display = 'flex';
+});
+
+settingsClose.addEventListener('click', () => {
+  settingsPopup.style.display = 'none';
+});
+
 var myDate = new Date();
     var hrs = myDate.getHours();
 
@@ -398,3 +411,74 @@ updateOnlineTime();
 
 // Update the time every second
 setInterval(updateOnlineTime, 1000);
+
+// Get elements from the HTML
+const userPhotoElement = document.getElementById("user-photo");
+const photoUploadElement = document.getElementById("photo-upload");
+
+// Check if there is a previously uploaded photo in local storage
+const storedPhoto = localStorage.getItem("userPhoto");
+
+// If a photo is found in local storage, display it
+if (storedPhoto) {
+  userPhotoElement.src = storedPhoto;
+}
+
+// Add an event listener to the upload button
+photoUploadElement.addEventListener("change", function () {
+  const file = photoUploadElement.files[0];
+  if (file) {
+    // Read the uploaded image and set it as the user photo
+    const reader = new FileReader();
+    reader.onload = function (event) {
+      const imageUrl = event.target.result;
+      userPhotoElement.src = imageUrl;
+
+      // Store the image in local storage
+      localStorage.setItem("userPhoto", imageUrl);
+    };
+    reader.readAsDataURL(file);
+  }
+});
+
+// Add an event listener to the delete button
+document.getElementById("delete-photo").addEventListener("click", function () {
+  // Clear the user photo and remove it from local storage
+  userPhotoElement.src = "user.png";
+  localStorage.removeItem("userPhoto");
+  photoUploadElement.value = ""; // Clear the file input
+});
+
+// Add an event listener to the "Choose File" button
+document.getElementById("choose-file").addEventListener("click", function () {
+  // Trigger the file input when the button is clicked
+  document.getElementById("photo-upload").click();
+});
+
+// Get elements from the HTML
+const setNameButton = document.getElementById("set-name");
+const userName = document.getElementById("user-name");
+
+// Try to retrieve the user's name from local storage
+const cachedName = localStorage.getItem("userName");
+
+// If a cached name is found, display it
+if (cachedName) {
+  userName.textContent = cachedName;
+  userName.style.display = "block";
+}
+
+// Add event listener to the "Set Name" button
+setNameButton.addEventListener("click", function () {
+  // Use window.prompt to capture the user's name
+  const name = window.prompt("Please enter your name:");
+
+  if (name) {
+    // Display the user's name underneath the profile picture
+    userName.textContent = name;
+    userName.style.display = "block";
+
+    // Store the user's name in local storage
+    localStorage.setItem("userName", name);
+  }
+});

style.css

@@ -36,7 +36,7 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.45);
   z-index: 1;
   animation: fadeIn 1s ease-in-out;
 }
@@ -88,6 +88,16 @@ body {
   text-align: center;
 }
 
+#user-name {
+  position: relative;
+  font-size: 2vh;
+  margin-top: 1vh;
+  color: white;
+  text-shadow: 1vh 1vh 2vh rgba(0, 0, 0, 0.8);
+  z-index: 1;
+  text-align: center;
+}
+
 #bottom-container {
   bottom: 2.5vh;
   position: absolute;
@@ -133,9 +143,10 @@ body {
   cursor: pointer;
   padding: 2px;
   transition: background-color 0.3s ease-in-out;
-  margin-right: 0.8vh;
-  width: 4vh;
-  height: 4vh;
+  margin-right: 0.4vh;
+  margin-left: 0.4vh;
+  width: 3.8vh;
+  height: 3.8vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -292,4 +303,81 @@ td a {
 
 td a:hover {
   text-decoration: underline;
+}
+
+/* Style the profile photo section */
+#profile-photo {
+  position: absolute;
+  bottom: 11vh;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+/* Style the avatar container */
+.avatar-container {
+  width: 8vh;
+  height: 8vh;
+  background-color: #ccc;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  margin: 0 auto;
+}
+
+/* Style the user profile photo */
+#user-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Style the Upload Background button */
+#upload-button, #delete-button {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #ff0000;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  text-align: center;
+}
+
+#upload-button:hover, #delete-button:hover {
+  background-color: #cf0000;
+}
+
+#upload-button:active, #delete-button:active {
+  background-color: #a20000;
+}
+
+/* Style the Choose Avatar Photo button */
+#choose-file, #delete-photo, #set-name {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #007BFF;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  text-align: center;
+}
+
+#choose-file:hover, #delete-photo:hover, #set-name:hover {
+  background-color: #0056b3;
+}
+
+#choose-file:active, #delete-photo:active, #set-name:active {
+  background-color: #003981;
 }