Spaces:

HenzHosting
/

Esteams

Running

File size: 7,577 Bytes

8aeb522

<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from es-teams-database2025.onrender.com/profile.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ES TEAMS PROFILE</title>
  <link href="../external.html?link=https://fonts.googleapis.com/css2?family=Inter:wght@400;600&amp;display=swap" rel="stylesheet" />
  <style>
    body {
      font-family: "Inter", sans-serif;
      margin: 0;
      padding: 0;
      background-color: #1a1a1a;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }
    header {
      width: 100%;
      background: #333;
      color: #4caf50;
      text-align: center;
      font-size: 20px;
      padding: 10px;
      overflow: hidden;
      white-space: nowrap;
    }
    header marquee {
      display: inline-block;
      width: 100%;
    }
    .container {
      width: 90%;
      max-width: 400px;
      margin-top: 20px;
      background: #2c2c2c;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      padding: 20px;
    }
    .profile-pic-container {
      text-align: center;
      position: relative;
      margin-bottom: 20px;
    }
    .profile-pic {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: #444;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 14px;
      text-align: center;
      margin: 0 auto;
      line-height: 1.4; /* Ensures perfect centering for multi-line text */
    }
    .profile-pic img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .form-group input {
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      background: #222;
      color: #fff;
    }
    button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: none;
      border-radius: 5px;
      background: #4caf50;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background: #45a049;
    }
    .delete-account {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: red;
      color: white;
      width: 150px;
      height: 50px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      box-shadow: 0 4px 10px rgba(255, 0, 0, 0.6);
      cursor: pointer;
      animation: glow 1.5s infinite;
    }
    @keyframes glow {
      0%, 100% {
        box-shadow: 0 0 10px red;
      }
      50% {
        box-shadow: 0 0 20px red;
      }
    }
  </style>
</head>
<body>
  <header>
    <marquee>WELCOME TO ES TEAMS PROFILE DISPLAY</marquee>
  </header>

  <div class="profile-pic-container">
  <div id="profile-pic" class="profile-pic" onclick="document.getElementById('file-input').click()">
    <img id="profile-image" src="#" alt="Upload Profile Picture" />
  </div>
  <input type="file" id="file-input" style="display: none;" onchange="uploadPicture()" />
</div>

    <h3>USER PROFILE</h3>
    <div class="form-group">
      <label for="firstname">First Name</label>
      <input type="text" id="firstname" placeholder="First Name" required />
    </div>
    <div class="form-group">
      <label for="lastname">Last Name</label>
      <input type="text" id="lastname" placeholder="Last Name" required />
    </div>
    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="email" id="email" placeholder="Email Address" required />
    </div>
    <button onclick="saveDetails()">Save Details</button>

    <h3>Password Settings</h3>
    <div class="form-group">
      <label for="password">Old Password</label>
      <input type="password" id="password" placeholder="Old Password" required />
    </div>
    <div class="form-group">
      <label for="new-password">New Password</label>
      <input type="password" id="new-password" placeholder="New Password" required />
    </div>
    <div class="form-group">
      <label for="confirm-password">Confirm Password</label>
      <input type="password" id="confirm-password" placeholder="Confirm Password" required />
    </div>
    <button onclick="changePassword()">Save Changes</button>
  </div>

  <button class="delete-account" onclick="location.href='delete.html'">DELETE ACCOUNT</button>

  <script>
    // Initialize profile details and image from localStorage
window.onload = function () {
  const userData = JSON.parse(localStorage.getItem("userData")) || {};
  document.getElementById("firstname").value = userData.firstname || "";
  document.getElementById("lastname").value = userData.lastname || "";
  document.getElementById("email").value = userData.email || "";
  const profileImage = document.getElementById("profile-image");
  if (userData.profilePic) {
    profileImage.src = userData.profilePic;
  } else {
    profileImage.src = ""; // Default blank state
    profileImage.alt = "Upload Profile Picture";
  }
};

function uploadPicture() {
  const fileInput = document.getElementById("file-input");
  const file = fileInput.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function (event) {
      const userData = JSON.parse(localStorage.getItem("userData")) || {};
      userData.profilePic = event.target.result; // Save picture in base64 format
      localStorage.setItem("userData", JSON.stringify(userData));
      document.getElementById("profile-image").src = event.target.result; // Update the profile image
    };
    reader.readAsDataURL(file);
  }
}

function saveDetails() {
  const firstname = document.getElementById("firstname").value.trim();
  const lastname = document.getElementById("lastname").value.trim();
  const email = document.getElementById("email").value.trim();

  if (!firstname || !lastname || !email) {
    alert("All fields are required!");
    return;
  }

  const userData = JSON.parse(localStorage.getItem("userData")) || {};
  userData.firstname = firstname;
  userData.lastname = lastname;
  userData.email = email;
  localStorage.setItem("userData", JSON.stringify(userData));
  alert("Changes saved!");
}

function changePassword() {
  const password = document.getElementById("password").value.trim();
  const newPassword = document.getElementById("new-password").value.trim();
  const confirmPassword = document.getElementById("confirm-password").value.trim();

  if (!password || !newPassword || !confirmPassword) {
    alert("All fields are required!");
    return;
  }

  const userData = JSON.parse(localStorage.getItem("userData")) || {};
  if (userData.password !== password) {
    alert("Old password is incorrect!");
    return;
  }

  if (newPassword !== confirmPassword) {
    alert("Passwords do not match!");
    return;
  }

  userData.password = newPassword;
  localStorage.setItem("userData", JSON.stringify(userData));
  alert("Password changed successfully!");
}
  </script>
</body>

<!-- Mirrored from es-teams-database2025.onrender.com/profile.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT -->
</html>