Skip to content

Feature/profile page v2 #1133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karrisanthoshigayatri wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Feature/profile page v2 #1133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0cdcac6
implemented profile page
karrisanthoshigayatri Jun 9, 2026
3c72cea
focused statistics dashboard
karrisanthoshigayatri Jun 9, 2026
d635d59
sssssw
karrisanthoshigayatri Jun 10, 2026
a561c00
added dark mode toggle
karrisanthoshigayatri Jun 10, 2026
7c252c8
Merge branch 'main' into feature/profile-page-v2
karrisanthoshigayatri Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 51 additions & 1 deletion css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1336,6 +1336,44 @@ body {
gap: 24px;
}

.focus-stats-panel {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}

.focus-stat-card {
background: var(--color-background-secondary);
border: 1px solid var(--color-border-secondary);
border-radius: var(--border-radius-md);
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}

.focus-stat-label {
font-size: 12px;
font-weight: 700;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}

.focus-stat-value {
font-size: 24px;
font-weight: 700;
color: var(--color-text-primary);
}

@media (max-width: 820px) {
.focus-stats-panel {
grid-template-columns: 1fr;
}
}

.timer-container {
position: relative;
width: 240px;
Expand Down Expand Up @@ -4161,6 +4199,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;
Expand Down Expand Up @@ -5018,7 +5069,6 @@ body {
font-size: 14px;
transition: opacity 0.2s ease;
}

.subject-sidebar-item:hover .delete-subject-btn {
opacity: 1;
}
9 changes: 9 additions & 0 deletions database.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,15 @@ function initDb() {
FOREIGN KEY (subject_id) REFERENCES subjects(id)
)`);

// Focus Sessions Table
db.run(`CREATE TABLE IF NOT EXISTS focus_sessions (
id TEXT PRIMARY KEY,
task_id TEXT,
duration_seconds INTEGER NOT NULL,
completed_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (task_id) REFERENCES tasks(id)
)`);

db.all("PRAGMA table_info(tasks)", (err, rows) => {
if (err) return;

Expand Down
80 changes: 77 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h1 class="site-title">StudyPlan</h1>
</nav>

<div class="header-right">
<button class="profile-btn">Profile</button>
<button class="profile-btn" id="profile-btn">Profile</button>
<button class="profile-btn" id="logout-btn">Logout</button>
</div>
</header>
Expand Down Expand Up @@ -191,6 +191,21 @@ <h1 class="site-title">StudyPlan</h1>
<button id="timer-pause-btn" class="btn hidden">Pause</button>
<button id="timer-reset-btn" class="btn">Reset</button>
</div>

<div id="focus-stats-panel" class="focus-stats-panel">
<div class="focus-stat-card">
<div class="focus-stat-label">Sessions completed</div>
<div id="focus-total-sessions" class="focus-stat-value">0</div>
</div>
<div class="focus-stat-card">
<div class="focus-stat-label">Total focus time</div>
<div id="focus-total-time" class="focus-stat-value">0m</div>
</div>
<div class="focus-stat-card">
<div class="focus-stat-label">Current streak</div>
<div id="focus-current-streak" class="focus-stat-value">0 days</div>
</div>
</div>

<div class="focus-task-container">
<div class="focus-task-header">Current Focus Task</div>
Expand All @@ -207,6 +222,61 @@ <h1 class="site-title">StudyPlan</h1>
</div>
</div>
</div>

<div id="profile-section" class="profile-section hidden">
<div class="profile-header">
<div>
<div class="profile-page-title">Profile</div>
<p class="profile-page-subtitle">View your account summary, study stats, and future account settings in one place.</p>
</div>
</div>

<div class="profile-grid">
<section class="profile-card">
<h2>Account details</h2>
<div class="profile-field">
<span class="profile-field-label">Username</span>
<span id="profile-username">StudyPlan User</span>
</div>
<div class="profile-field">
<span class="profile-field-label">Email</span>
<span id="profile-email">user@studyplan.app</span>
</div>
<div class="profile-field">
<span class="profile-field-label">Member since</span>
<span id="profile-joined">June 2026</span>
</div>
</section>

<section class="profile-card">
<h2>Study statistics</h2>
<div class="profile-stats">
<div>
<span class="profile-stat-value" id="profile-completed-count">0</span>
<span>Completed</span>
</div>
<div>
<span class="profile-stat-value" id="profile-pending-count">0</span>
<span>Pending</span>
</div>
<div>
<span class="profile-stat-value" id="profile-archived-count">0</span>
<span>Archived</span>
</div>
<div>
<span class="profile-stat-value" id="profile-subjects-count">0</span>
<span>Subjects</span>
</div>
</div>
</section>
</div>

<section class="profile-card profile-summary-card">
<h2>Account overview</h2>
<p id="profile-summary-text">Your profile information and study statistics will update automatically as you use StudyPlan.</p>
</section>
</div>

</div>

<!-- Right Panel -->
Expand Down Expand Up @@ -471,15 +541,19 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(

// Also apply immediately on toggle for better UX
darkModeToggle.addEventListener('change', (e) => {
if (e.target.checked) {
const isDark = e.target.checked;
localStorage.setItem('studyplan_dark_mode', isDark);
if (isDark) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
});

compactViewToggle.addEventListener('change', (e) => {
if (e.target.checked) {
const isCompact = e.target.checked;
localStorage.setItem('studyplan_compact_view', isCompact);
if (isCompact) {
document.body.classList.add('compact-view');
} else {
document.body.classList.remove('compact-view');
Expand Down
Loading