Upload

index.html

@@ -122,6 +122,8 @@ <h2 class="about-title">About</h2>
       <button title="Upload Background" id="upload-button">
         Upload Background
       </button>
+      <input type="text" id="image-url" placeholder="Enter image URL">
+      <button id="set-background">Set Background</button>
       <button title="Delete Background" id="delete-button">
         Delete Background
       </button>
@@ -135,6 +137,7 @@ <h2 class="about-title">About</h2>
     <button id="set-name">
       Set Name
     </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>

script.js

@@ -482,3 +482,70 @@ setNameButton.addEventListener("click", function () {
     localStorage.setItem("userName", name);
   }
 });
+
+// Function to set background from uploaded file
+function setBackgroundFromFile(file) {
+  const reader = new FileReader();
+  reader.onload = function (e) {
+    localStorage.setItem('background', e.target.result); // Save to local storage
+    updateBackground();
+  };
+  reader.readAsDataURL(file);
+  localStorage.removeItem('backgroundURL'); // Remove URL if set
+}
+
+// Function to set background from URL
+function setBackgroundFromURL(url) {
+  localStorage.setItem('backgroundURL', url); // Save URL to local storage
+  updateBackground();
+  localStorage.removeItem('background'); // Remove uploaded image if set
+}
+
+// Update the background based on saved data
+function updateBackground() {
+  const savedImage = localStorage.getItem('background');
+  const savedURL = localStorage.getItem('backgroundURL');
+
+  if (savedImage) {
+    document.body.style.backgroundImage = `url('${savedImage}')`;
+  } else if (savedURL) {
+    document.body.style.backgroundImage = `url('${savedURL}')`;
+  } else {
+    document.body.style.backgroundImage = 'none'; // Default or no background
+  }
+}
+
+// Event listener for the set background button
+document.getElementById('set-background').addEventListener('click', function() {
+  const fileInput = document.getElementById('image-upload');
+  const urlInput = document.getElementById('image-url');
+
+  if (fileInput.files && fileInput.files[0]) {
+    setBackgroundFromFile(fileInput.files[0]);
+  } else if (urlInput.value) {
+    setBackgroundFromURL(urlInput.value);
+  }
+});
+
+// Event listener for the delete background button
+document.getElementById('delete-button').addEventListener('click', function() {
+  localStorage.removeItem('background');
+  localStorage.removeItem('backgroundURL');
+  updateBackground();
+});
+
+// Load the background on startup
+document.addEventListener('DOMContentLoaded', updateBackground);
+
+// Avatar and name settings logic (placeholder, implement as needed)
+document.getElementById('choose-file').addEventListener('click', function() {
+  // Logic for choosing avatar photo
+});
+
+document.getElementById('delete-photo').addEventListener('click', function() {
+  // Logic for deleting avatar photo
+});
+
+document.getElementById('set-name').addEventListener('click', function() {
+  // Logic for setting user name
+});

style.css

@@ -381,4 +381,18 @@ td a:hover {
 
 #choose-file:active, #delete-photo:active, #set-name:active {
   background-color: #003981;
+}
+
+#image-url {
+  margin-bottom: 10px;
+  padding: 8px;
+  margin-right: 5px;
+}
+
+#set-background {
+  padding: 10px;
+  background-color: #ff0000;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
 }