diff --git a/css/index.css b/css/index.css index 28fbfd3..c0bfadd 100644 --- a/css/index.css +++ b/css/index.css @@ -4161,6 +4161,19 @@ body { .tasks-section { flex: 1; overflow-y: auto; padding: 0 24px 24px; scroll-behavior: smooth; } .tasks-section::-webkit-scrollbar { width: 6px; } .tasks-section::-webkit-scrollbar-thumb { background: var(--color-border-secondary); border-radius: 10px; } +.profile-section { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 24px; } +.profile-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } +.profile-page-title { font-size: 24px; font-weight: 700; color: var(--color-text-primary); } +.profile-page-subtitle { margin: 8px 0 0; color: var(--color-text-secondary); max-width: 640px; line-height: 1.6; } +.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } +.profile-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 24px; box-shadow: var(--shadow-sm); } +.profile-card h2 { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--color-text-primary); } +.profile-field { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-size: 14px; color: var(--color-text-secondary); } +.profile-field-label { color: var(--color-text-tertiary); font-weight: 600; } +.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } +.profile-stat-value { display: block; font-size: 22px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; } +.profile-summary-card p { margin: 0; color: var(--color-text-secondary); line-height: 1.8; } +@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } } .tasks-actions-bar { margin-top: 18px; display: flex; diff --git a/index.html b/index.html index 543be76..af01fa6 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,14 @@ + StudyPlan + + + + + + @@ -62,7 +69,7 @@

StudyPlan

- +
@@ -207,6 +214,61 @@

StudyPlan

+ + + diff --git a/js/app.js b/js/app.js index 2bc3bce..3834b5e 100644 --- a/js/app.js +++ b/js/app.js @@ -578,6 +578,89 @@ function renderFocusTasks() { } } +function renderProfileSection() { + if (!profileSection) return; + + const tasks = store.tasks || []; + const subjects = store.subjects || []; + const completedCount = tasks.filter(t => t.status === 'Done').length; + const pendingCount = tasks.filter(t => t.status !== 'Done' && !t.archived).length; + const archivedCount = tasks.filter(t => t.archived).length; + const subjectsCount = subjects.length; + const username = localStorage.getItem('studyplan_username') || 'StudyPlan User'; + const email = localStorage.getItem('studyplan_email') || 'user@studyplan.app'; + const joinedDate = localStorage.getItem('studyplan_joined') || 'June 2026'; + + profileSection.innerHTML = ` +
+
+
Profile
+

View your account summary, study stats, and future account settings in one place.

+
+
+ +
+
+

Account details

+
+ Username + ${escapeHtml(username)} +
+
+ Email + ${escapeHtml(email)} +
+
+ Member since + ${escapeHtml(joinedDate)} +
+
+ +
+

Study statistics

+
+
+ ${completedCount} + Completed +
+
+ ${pendingCount} + Pending +
+
+ ${archivedCount} + Archived +
+
+ ${subjectsCount} + Subjects +
+
+
+
+ +
+

Account overview

+

Your profile information and study statistics will update automatically as you use StudyPlan.

+
+ `; +} + +function showProfileSection() { + currentView = 'profile'; + document.querySelector('.cal-section')?.classList.add('hidden'); + document.getElementById('tasks-section')?.classList.add('hidden'); + document.getElementById('focus-section')?.classList.add('hidden'); + profileSection?.classList.remove('hidden'); + topbar?.classList.add('hidden'); + renderProfileSection(); +} + +function hideProfileSection() { + profileSection?.classList.add('hidden'); + topbar?.classList.remove('hidden'); +} + function formatDate(dateStr) { if (!dateStr) return 'No Date'; const d = new Date(dateStr); @@ -1219,6 +1302,7 @@ store.subscribe(renderTasks); store.subscribe(renderExtraction); store.subscribe(renderCalendar); store.subscribe(renderFocusTasks); +store.subscribe(renderProfileSection); store.subscribe(renderSidebarSubjects); document.addEventListener('DOMContentLoaded', () => { @@ -1291,6 +1375,7 @@ document.addEventListener('DOMContentLoaded', () => { calendarBtn.addEventListener('click', () => { currentView = 'calendar'; + hideProfileSection(); document.querySelector('.cal-section').classList.remove('hidden'); document.getElementById('tasks-section').classList.remove('hidden'); document.getElementById('focus-section').classList.add('hidden'); @@ -1300,6 +1385,7 @@ document.addEventListener('DOMContentLoaded', () => { allTasksBtn.addEventListener('click', () => { currentView = 'all-tasks'; + hideProfileSection(); document.querySelector('.cal-section').classList.add('hidden'); document.getElementById('tasks-section').classList.remove('hidden'); document.getElementById('focus-section').classList.add('hidden'); @@ -1309,6 +1395,7 @@ document.addEventListener('DOMContentLoaded', () => { archivedTasksBtn.addEventListener('click', () => { currentView = 'archived'; + hideProfileSection(); document.querySelector('.cal-section').classList.add('hidden'); document.getElementById('tasks-section').classList.remove('hidden'); document.getElementById('focus-section').classList.add('hidden'); @@ -1319,6 +1406,7 @@ document.addEventListener('DOMContentLoaded', () => { if(focusModeBtn) { focusModeBtn.addEventListener('click', () => { currentView = 'focus'; + hideProfileSection(); document.querySelector('.cal-section').classList.add('hidden'); document.getElementById('tasks-section').classList.add('hidden'); document.getElementById('focus-section').classList.remove('hidden'); @@ -1327,6 +1415,16 @@ document.addEventListener('DOMContentLoaded', () => { }); } + { + showProfileSection(); + }); +} + +document.getElementById('cal-prev').addEventListener('click', () => { + currentMonthDate.setMonth(currentMonthDate.getMonth() - 1); + renderCalendar(); +}); document.getElementById('cal-next').addEventListener('click', () => { currentMonthDate.setMonth(currentMonthDate.getMonth() + 1); renderCalendar();