diff --git a/pages/profile.html b/pages/profile.html index 3c6cb120..92c71d57 100644 --- a/pages/profile.html +++ b/pages/profile.html @@ -43,9 +43,455 @@
- - - + +
+
+
+
+
+ +
+

User Profile

+

+ Track your coding journey +

+
+ +
+
+
January
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
February
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
March
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
April
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
May
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
June
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
July
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
August
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
September
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
October
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
November
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
December
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
🎯
+
15
+
Challenges Solved
+
+ +
+
⭐
+
1,250
+
Points Earned
+
+
+
🏆
+
3
+
Achievements
+
+
+ +
+
+
+
+
@@ -139,6 +585,7 @@ +
@@ -230,10 +677,10 @@

Coding Time (Hours)

Challenges Completed

+ -
@@ -344,6 +791,442 @@

Community

- + diff --git a/scripts/app.js b/scripts/app.js index 3fb50fa7..f0e279c8 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -172,3 +172,43 @@ if (navToggle && navMenu) { line3.style.transform = isOpen ? 'rotate(-45deg) translate(6px, -6px)' : 'rotate(0deg)'; }); } +// --- Profile Page Logic --- +document.addEventListener("DOMContentLoaded", () => { + const avatarInput = document.getElementById('upload-avatar'); + const avatarPreview = document.getElementById('avatarPreview'); + const avatarInitial = document.getElementById('avatarInitial'); + const avatarCircle = document.getElementById('avatarCircle'); + + // Load from localStorage + const savedImage = localStorage.getItem('profileAvatar'); + if (savedImage && avatarPreview) { + avatarPreview.src = savedImage; + avatarPreview.hidden = false; + avatarInitial.style.display = 'none'; + } + + // Trigger input when avatar is clicked + if (avatarCircle && avatarInput) { + avatarCircle.addEventListener('click', () => avatarInput.click()); + } + + // Handle image selection + if (avatarInput) { + avatarInput.addEventListener('change', (e) => { + const file = e.target.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = function (event) { + const dataUrl = event.target.result; + if (avatarPreview) { + avatarPreview.src = dataUrl; + avatarPreview.removeAttribute('hidden'); + avatarInitial.style.display = 'none'; + } + localStorage.setItem('profileAvatar', dataUrl); + }; + reader.readAsDataURL(file); + }); + } +}); diff --git a/submit-challenge/styles.css b/submit-challenge/styles.css index eb91daa1..65ede161 100644 --- a/submit-challenge/styles.css +++ b/submit-challenge/styles.css @@ -367,6 +367,7 @@ input:focus, textarea:focus, select:focus, button:focus { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } + .chat-container { width: 400px; /* margin: 50px auto; */ @@ -410,4 +411,4 @@ input:focus, textarea:focus, select:focus, button:focus { color: white; border: none; cursor: pointer; - } \ No newline at end of file + }