Spaces:
Running
Running
| <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&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> |