diff --git a/pages/profile.html b/pages/profile.html index 17117d8a..3c6cb120 100644 --- a/pages/profile.html +++ b/pages/profile.html @@ -13,6 +13,10 @@ + + + + @@ -39,167 +43,271 @@
- -
-
-
-
-
- U -
-
-

User Profile

-

Track your coding journey

-
-
-
+ + + +
-
-
-
-
🎯
-
15
-
Challenges Solved
+
+
+ +
+
+
Dashboard
+
Check your latest updates and stats
+
+
+
+ +
+
+
-
-
πŸ”₯
-
7
-
Day Streak
+
+
Current Streak
+
5 Days
-
-
⭐
-
1,250
-
Points Earned
+
+ + +
+
+
-
-
πŸ†
-
3
-
Achievements
+
+
Total Coding Time
+
12 hrs
+
+
+ + +
+
+ +
+
+
Rank
+
#24
+
+
+ + +
+
+ +
+
+
Points Earned
+
1280 pts
+
+
+
+ +
+
+
+ +
+
Completed Challenges
+
+
+
+
Two Sum Problem
+
Algorithms β€’ July 20, 2025
+
Easy
+
Completed
+
+
+
Responsive Navbar
+
Web Dev β€’ July 18, 2025
+
Medium
+
Completed
+
+
+
Two Sum Problem
+
Algorithms β€’ July 20, 2025
+
Easy
+
Completed
+
+
+
Responsive Navbar
+
Web Dev β€’ July 18, 2025
+
Medium
+
Completed
-
- -
-
-
- -
-

Progress Overview

-
-
-

Difficulty Breakdown

-
-
- Easy -
-
-
- 9/12 -
-
- Medium -
-
-
- 4/10 -
-
- Hard -
-
-
- 2/10 -
-
-
+ +
+
+
+ +
+
In progress Challenges
+
+
+
+
Weather API App
+
JavaScript β€’ Due July 25
+
Medium
+
In Progress
+
+
+
Sorting Visualizer
+
DSA β€’ Due July 24
+
Hard
+
In Progress
+
+
+
Weather API App
+
JavaScript β€’ Due July 25
+
Medium
+
In Progress
+
+
+
Sorting Visualizer
+
DSA β€’ Due July 24
+
Hard
+
In Progress
+
+
+ -
-

Categories Mastered

-
- Arrays - Strings - Algorithms - Data Structures - Dynamic Programming -
+ +
+
+
+ +
+
To-do Challenges
+
+
+
+
Build To-Do App
+
Frontend β€’ No due date
+
Easy
+
To Do
+
+
+
Binary Search Practice
+
Algorithms β€’ No due date
+
Hard
+
To Do
+
+
+
Build To-Do App
+
Frontend β€’ No due date
+
Easy
+
To Do
+
+
+
Binary Search Practice
+
Algorithms β€’ No due date
+
Hard
+
To Do
+
+
+
+ +
+
+
+
+
+

Coding Time (Hours)

+
- -
-

Recent Activity

-
-
-
βœ…
-
-

Solved "Two Sum"

-

Completed in 3 minutes β€’ Easy

- 2 hours ago -
-
-
-
🎯
-
-

Started "Longest Palindromic Substring"

-

Medium difficulty challenge

- 1 day ago -
-
-
-
πŸ†
-
-

Earned "Array Master" Achievement

-

Solved 10 array-based challenges

- 3 days ago -
+
+
+
+
+

Challenges Completed

+
+
- -
-

Achievements

-
-
-
🎯
-

First Blood

-

Solve your first challenge

-
-
-
πŸ”₯
-

On Fire

-

7-day coding streak

-
-
-
πŸ“š
-

Array Master

-

Complete 10 array challenges

-
-
-
⚑
-

Speed Demon

-

Solve a challenge in under 60 seconds

+
+ +
+
+
+

Leaderboard

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UserPointsBadges
Alice1540 XP Master
Bob1320 XP Streaker
Charlie1210 XP Fast Starter
+
+ + +
+
+
+

Upcoming Goals & Reminders

+
+
    +
  • +
    +
    + Finish 5 Easy Challenges +

    Complete by Sunday to maintain your streak.

    -
    -
    πŸ†
    -

    Perfectionist

    -

    Solve 5 challenges without hints

    +
    • +
  • +
    +
    + Reach 2000 XP +

    You're only 460 XP away from the next badge!

    -
    -
    🌟
    -

    Rising Star

    -

    Reach 2000 points

    +
    • +
  • +
    +
    + Try the β€œArray Rotation” Challenge +

    Level: Intermediate β€’ Unlocks logic badge

    -
-
+ +
+
+ +
@@ -237,274 +345,5 @@

Community

- diff --git a/scripts/profile.js b/scripts/profile.js new file mode 100644 index 00000000..4db10bf9 --- /dev/null +++ b/scripts/profile.js @@ -0,0 +1,67 @@ + + // 1. Time Spent Coding (Line Chart) + const codingTimeCtx = document.getElementById('codingTimeChart').getContext('2d'); + new Chart(codingTimeCtx, { + type: 'line', + data: { + labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + datasets: [{ + label: 'Hours Spent Coding', + data: [2, 3, 1, 4, 2.5, 3.5, 5], + backgroundColor: 'rgba(0,123,255,0.2)', + borderColor: '#007BFF', + borderWidth: 2, + tension: 0.4, + fill: true +}] +}, + options: { + responsive: true, + plugins: { legend: { position: 'top' } } +} +}); + + // 2. Challenges Completed (Bar Chart) + const challengesCtx = document.getElementById('challengesChart').getContext('2d'); + + new Chart(challengesCtx, { + type: 'bar', + data: { + labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], + datasets: [{ + label: 'Challenges Completed', + data: [4, 6, 5, 8], + backgroundColor: '#007BFF' +}] +}, + options: { + responsive: true, + plugins: { legend: { display: false } }, + scales: { + y: { beginAtZero: true } +} +} +}); +// +// // 3. Skill Improvement (Radar Chart) +// const skillsCtx = document.getElementById('skillsChart').getContext('2d'); +// new Chart(skillsCtx, { +// type: 'radar', +// data: { +// labels: ['JavaScript', 'DSA', 'APIs', 'HTML/CSS', 'React'], +// datasets: [{ +// label: 'Skill Level', +// data: [7, 6, 5, 8, 4], +// backgroundColor: 'rgba(255, 99, 132, 0.2)', +// borderColor: 'rgb(255, 99, 132)', +// borderWidth: 2 +// }] +// }, +// options: { +// responsive: true, +// elements: { +// line: { borderWidth: 2 } +// } +// } +// }); + diff --git a/styles/profile.css b/styles/profile.css new file mode 100644 index 00000000..a530e966 --- /dev/null +++ b/styles/profile.css @@ -0,0 +1,408 @@ +.profile-header { + display: flex; + align-items: center; + font-family: 'Poppins', sans-serif; + padding-left: 20px; + padding-top: 10px; +} + +.icon-box { + width: 43px; + height: 43px; + background-color:#3B82F6; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + margin-right: 10px; +} + +.text-container { + display: flex; + flex-direction: column; + line-height: 1.2; +} + +.profile-header-title { + font-size: 18px; + font-weight: bold; + margin-bottom: 2px; +} + +.profile-header-subtitle { + font-size: 13px; + color: gray; +} +.dashboard-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + padding: 30px; +} +.card { + background: white; + display: flex; + align-items: center; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); + transition: 0.3s ease; +} + +.card:hover { + transform: translateY(-4px); +} +.card-icon-box { + width: 40px; + height: 40px; + background-color: #007BFF; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + margin-right: 15px; + font-size: 18px; +} + +.card-content { + display: flex; + flex-direction: column; + font-family: 'Poppins', sans-serif; +} + +.card-title { + font-size: 14px; + color: #555; + margin-bottom: 4px; +} + +.card-value { + font-size: 18px; + font-weight: 600; + color: #222; +} +/* Responsive for smaller screens */ +@media (max-width: 768px) { + .dashboard-cards { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 480px) { + .dashboard-cards { + grid-template-columns: 1fr; + } +} +.challenges-section { + margin-bottom: 40px; + padding-left: 30px; + padding-top: 30px; +} + +.section-title { + font-size: 20px; + font-weight: 600; + margin-bottom: 20px; + padding-top: 24px; +} + +.challenges-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 20px; +} + +.challenge-card { + background-color: white; + padding: 16px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: 0.3s ease; +} + +.challenge-card:hover { + transform: translateY(-3px); +} + +.challenge-title { + font-size: 16px; + font-weight: 500; + margin-bottom: 6px; +} + +.challenge-meta { + font-size: 13px; + color: #666; + margin-bottom: 4px; +} + +.challenge-status { + margin-top: 8px; + font-size: 13px; + font-weight: 500; +} + +.completed { + color: green; +} + +.in-progress { + color: orange; +} + +.todo { + color: gray; +} + +.difficulty { + display: inline-block; + padding: 3px 8px; + border-radius: 6px; + font-size: 12px; + font-weight: 500; + margin-top: 8px; + width: fit-content; +} + +.easy { + background-color: #d4edda; + color: #155724; +} + +.medium { + background-color: #fff3cd; + color: #856404; +} + +.hard { + background-color: #f8d7da; + color: #721c24; +} +.challenges-section-header { + display: flex; + align-items: center; + margin-bottom: 20px; + +} + +.challenges-icon-box { + width: 40px; + height: 40px; + background-color: #007BFF; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + margin-right: 15px; + font-size: 18px; +} +.charts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin-top: 20px; +} +.charts-container { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} + +.chart-box { + background: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + width: 600px; + box-sizing: border-box; +} + +.chart-box canvas { + width: 100% !important; + height: 300px !important; +} + +.progress-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 15px; + font-family: 'Poppins', sans-serif; +} + +.progress-icon-box { + width: 40px; + height: 40px; + background-color: #007BFF; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + font-size: 18px; +} + +.chart-box h3 { + font-size: 18px; + font-weight: 600; + color: #222; + margin: 0; +} +.leaderboard-section { + background: #fff; + padding: 30px; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); + max-width: 800px; + margin: 40px auto; + font-family: 'Poppins', sans-serif; +} + +.leaderboard-section-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; +} + +.leaderboard-section-icon, +.rank-icon-box { + width: 40px; + height: 40px; + background-color: #007BFF; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + font-size: 18px; +} + +.section-header h2 { + margin: 0; + font-size: 22px; + color: #222; +} + +.leaderboard-table { + width: 100%; + border-collapse: collapse; +} + +.leaderboard-table th, +.leaderboard-table td { + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid #eee; + font-size: 16px; +} + +.leaderboard-table th { + background-color: #f8f9fa; + color: #555; +} + +.badge { + background-color: #007BFF; + color: white; + padding: 6px 10px; + border-radius: 6px; + font-size: 14px; + display: inline-flex; + align-items: center; + gap: 6px; + width:150px +} +.goals-section { + background: #fff; + padding: 30px; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); + max-width: 800px; + margin: 40px auto; + font-family: 'Poppins', sans-serif; + +} + +.goals-section-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 25px; +} + +.goals-section-icon { + width: 40px; + height: 40px; + background-color: #007BFF; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + font-size: 18px; +} + +.section-header h2 { + margin: 0; + font-size: 22px; + color: #222; +} + +.goal-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 20px; +} + +.goal-list li { + display: flex; + align-items: flex-start; + gap: 15px; + background: #f9f9f9; + padding: 15px 20px; + border-radius: 10px; + border-left: 5px solid #007BFF; +} + +.goal-icon-box { + width: 40px; + height: 40px; + background-color: #007BFF; + color: white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + font-size: 18px; +} + +.goal-text strong { + font-size: 16px; + color: #222; + display: block; +} + +.goal-text p { + margin: 4px 0 0; + font-size: 14px; + color: #666; +} +.dashboard-row { + display: flex; + gap: 0px; + flex-wrap: wrap; /* Makes it responsive on smaller screens */ + justify-content: center; + margin: 40px auto; + width: 100%; +}