Coding-Crew/editprofile.html at main · Jeevan9898/Coding-Crew · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Profile - Artisan Echoes</title>
<style>
body { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; padding: 0; }
.container { max-width: 800px; margin: 40px auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h2 { text-align: center; margin-bottom: 20px; }
form { display: flex; flex-direction: column; gap: 15px; }
label { font-weight: 600; margin-bottom: 5px; }
input[type="text"], textarea { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 14px; }
textarea { resize: vertical; }
img { max-width: 150px; max-height: 150px; border-radius: 50%; display: block; margin-bottom: 10px; }
button { padding: 10px 20px; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; background: #FD7B6B; color: #fff; transition: 0.3s; }
button:hover { background: #e66a5c; }
</style>
</head>
<body>

<div class="container">
  <h2>Edit Profile</h2>
  <form id="edit-profile-form">
    <label for="avatar">Profile Photo</label>
    <img id="avatar-preview" src="https://via.placeholder.com/120" alt="Avatar Preview">
    <input type="file" id="avatar" accept="image/*">

    <label for="name">Name</label>
    <input type="text" id="name" placeholder="Enter your name">

    <label for="headline">Headline</label>
    <input type="text" id="headline" placeholder="Your headline">

    <label for="bio">Bio</label>
    <textarea id="bio" rows="3" placeholder="Write something about yourself"></textarea>

    <label for="experience">Experience</label>
    <textarea id="experience" rows="3" placeholder="Add your experience"></textarea>

    <label for="skills">Skills</label>
    <textarea id="skills" rows="2" placeholder="Add your skills"></textarea>

    <button type="submit">Save Profile</button>
  </form>
</div>

<script>
// Load existing profile data
const profile = JSON.parse(localStorage.getItem("profileData")) || {};
document.getElementById("avatar-preview").src = profile.avatar || "https://via.placeholder.com/120";
document.getElementById("name").value = profile.name || "";
document.getElementById("headline").value = profile.headline || "";
document.getElementById("bio").value = profile.bio || "";
document.getElementById("experience").value = profile.experience || "";
document.getElementById("skills").value = profile.skills || "";

// Preview avatar image
document.getElementById("avatar").addEventListener("change", (event) => {
  const file = event.target.files[0];
  if(file){
    const reader = new FileReader();
    reader.onload = function(e){
      document.getElementById("avatar-preview").src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
});

// Save profile data
document.getElementById("edit-profile-form").addEventListener("submit", (e) => {
  e.preventDefault();
  const updatedProfile = {
    avatar: document.getElementById("avatar-preview").src,
    name: document.getElementById("name").value,
    headline: document.getElementById("headline").value,
    bio: document.getElementById("bio").value,
    experience: document.getElementById("experience").value,
    skills: document.getElementById("skills").value,
    storyHighlights: profile.storyHighlights || []
  };
  localStorage.setItem("profileData", JSON.stringify(updatedProfile));
  alert("Profile saved!");
  window.location.href = "profile.html"; // Redirect back to profile page
});
</script>

</body>
</html>