Repository navigation
Expand file tree
/
Copy pathplanner.html
More file actions
233 lines (213 loc) · 14.7 KB
/
Copy pathplanner.html
File metadata and controls
233 lines (213 loc) · 14.7 KB
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if (!localStorage.getItem("cortexa-logged-in")) {
window.location.href = "login.html";
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cortexa - Planner</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Google+Sans+Text:wght@400;500;600;700&family=Google+Sans+Mono:wght@400;500&family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap"
>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-shell">
<aside class="side-rail" id="appNav" aria-label="Primary sidebar">
<div class="brand-lockup">
<p class="eyebrow">Study Agent</p>
<h1 class="brand-wordmark">Cortexa</h1>
</div>
<nav class="rail-nav" aria-label="Primary">
<a class="rail-link" href="index.html">Dashboard</a>
<a class="rail-link active" href="planner.html">Planner</a>
<a class="rail-link" href="knowledge.html">Knowledge</a>
<a class="rail-link" href="quiz.html">Quiz Lab</a>
<a class="rail-link" href="target.html">Target</a>
<a class="rail-link" href="research.html">Research</a>
<a class="rail-link" href="#" id="logoutBtn" style="color: #f28b82; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); border-radius: 0; padding-top: 14px;">Sign Out</a>
</nav>
<div class="rail-summary">
<p class="summary-label">Planning status</p>
<strong>3 deadlines mapped</strong>
<span>1 recovery slot available</span>
<button class="ghost-button" id="replanButton" type="button">Replan my week</button>
</div>
</aside>
<button class="nav-overlay" id="navOverlay" type="button" aria-label="Close menu"></button>
<main class="workspace">
<header class="top-bar">
<button class="menu-toggle" id="menuToggle" type="button" aria-controls="appNav" aria-expanded="true" aria-label="Close menu">
<span></span>
<span></span>
<span></span>
</button>
<label class="search-shell" for="commandInput">
<span class="search-icon" aria-hidden="true">⌕</span>
<input
id="commandInput"
type="text"
placeholder="Type your planning instructions..."
aria-label="Planner command"
>
</label>
<div class="top-actions">
<span class="status-pill" id="backendStatusPill">Local Mode</span>
<span class="status-pill status-live">Calendar Connected</span>
<div class="avatar" id="userAvatar" title="Google Account">G</div>
</div>
</header>
<section class="page-header card">
<div>
<span class="eyebrow">Smart planner</span>
<h2>Backward plan from deadlines</h2>
<p>Generate a day-by-day revision schedule using your exam dates, due dates, and open calendar slots.</p>
</div>
<button class="primary-button" id="generatePlanButton" type="button">Generate smart plan</button>
</section>
<section class="page-grid">
<article class="panel card panel-main">
<div class="panel-header">
<div>
<span class="eyebrow">Timeline</span>
<h3>Your next study blocks</h3>
</div>
<span class="tag tag-green" id="planStatus">Waiting for plan</span>
</div>
<div class="deadline-strip" id="deadlineStrip">
<!-- Populated dynamically from synced Google Calendar events -->
</div>
<div class="timeline" id="planList"></div>
</article>
<article class="panel card panel-side">
<div class="panel-header">
<div>
<span class="eyebrow">Google Calendar</span>
<h3 id="gcalTitle">Synced Events</h3>
</div>
<span class="tag tag-green" id="calendarSyncStatus" style="font-size: 0.78rem;">Connected</span>
</div>
<!-- Google Calendar Sync tabs -->
<div id="gcalSyncTabs" style="display: flex; gap: 8px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px;">
<button id="tabOAuthSync" class="ghost-button" type="button" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 8px; font-weight: 600; cursor: pointer; flex: 1; background: rgba(255, 255, 255, 0.06);">
Google OAuth
</button>
<button id="tabTextSync" class="ghost-button" type="button" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 8px; font-weight: 600; cursor: pointer; flex: 1;">
Text Agenda (AI)
</button>
</div>
<!-- Google OAuth Connect Widget -->
<div id="gcalOAuthContainer" style="padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;">
<div id="gcalSetupState">
<p style="font-size: 0.82rem; color: var(--text-soft); line-height: 1.4; margin-bottom: 8px;">
Sync your actual Google Calendar. Configure a Google Client ID to enable OAuth integration.
</p>
<div style="display: flex; flex-direction: column; gap: 6px;">
<label for="gcalClientId" style="font-size: 0.74rem; color: var(--text-soft);">OAuth Client ID</label>
<input type="text" id="gcalClientId" placeholder="Paste Google OAuth Client ID" style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(138, 180, 248, 0.12); background: rgba(14, 27, 51, 0.46); color: #fff; outline: none; font-size: 0.85rem;">
</div>
<button id="gcalConnectBtn" class="primary-button" type="button" style="width: 100%; font-size: 0.88rem; margin-top: 8px; padding: 10px; border-radius: 8px;">
🔑 Connect Google Calendar
</button>
<button id="gcalHelpToggle" class="ghost-button" type="button" style="width: 100%; font-size: 0.76rem; margin-top: 8px; padding: 6px; border-radius: 6px; color: var(--text-soft);">
❓ Help: OAuth blocked?
</button>
<div id="gcalHelpDetails" style="display: none; margin-top: 10px; padding: 12px; border-radius: 8px; background: rgba(234, 67, 53, 0.08); border: 1px solid rgba(234, 67, 53, 0.15); font-size: 0.76rem; color: var(--text-soft); line-height: 1.5; flex-direction: column; gap: 6px;">
<strong style="color: #f28b82; display: block; margin-bottom: 4px;">Google Client ID Troubleshooting:</strong>
1. Ensure Client ID type is <strong>Web Application</strong>.<br>
2. Set Authorized JavaScript Origins: <code style="background: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 3px;">https://synapse-pbp47.web.app</code><br>
3. Set Authorized Redirect URIs: <code style="background: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 3px;">https://synapse-pbp47.web.app/planner.html</code><br>
4. <strong>Crucial</strong>: Under "OAuth Consent Screen" -> "Test users", click <strong>+ Add Users</strong> and enter your Google account email (e.g. <em>pnukadas@student.gitam.edu</em>). Otherwise Google blocks access.
</div>
</div>
<div id="gcalConnectedState" style="display: none; align-items: center; justify-content: space-between; gap: 8px;">
<div style="min-width: 0; flex: 1;">
<span style="font-size: 0.78rem; color: var(--text-soft); display: block;">Connected Account</span>
<strong id="gcalConnectedEmail" style="font-size: 0.88rem; color: #fff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"></strong>
</div>
<div style="display: flex; gap: 6px;">
<button id="gcalSyncBtn" class="ghost-button" type="button" style="padding: 6px 12px; font-size: 0.82rem; border-radius: 8px;" title="Fetch latest events">🔄 Sync</button>
<button id="gcalDisconnectBtn" class="ghost-button" type="button" style="padding: 6px 12px; font-size: 0.82rem; border-radius: 8px; color: #f28b82;" title="Disconnect account">Disconnect</button>
</div>
</div>
</div>
<!-- Text Agenda Sync Widget -->
<div id="gcalTextContainer" style="display: none; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); flex-direction: column; gap: 12px; margin-bottom: 16px;">
<p style="font-size: 0.82rem; color: var(--text-soft); line-height: 1.4;">
OAuth blocked? Paste your calendar schedule / text agenda (e.g. "Thermodynamics lab Tuesdays 14:00-16:00, Dentist appointment Thursday 19:30-20:30").
</p>
<textarea id="gcalTextAgenda" placeholder="Paste your calendar schedule here..." style="width: 100%; height: 90px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(138, 180, 248, 0.12); background: rgba(14, 27, 51, 0.46); color: #fff; outline: none; font-size: 0.85rem; resize: none; font-family: inherit; line-height: 1.4;"></textarea>
<button id="gcalTextParseBtn" class="primary-button" type="button" style="width: 100%; font-size: 0.88rem; padding: 10px; border-radius: 8px;">
🪄 Sync Agenda with AI
</button>
</div>
<div class="calendar-events-list" id="calendarEventsList" style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; max-height: 380px; overflow-y: auto; padding-right: 6px;">
<!-- Rendered dynamically by app.js -->
</div>
<button class="ghost-button" id="addCalendarEventBtn" type="button" style="width: 100%; font-weight: 600; background: rgba(138, 180, 248, 0.1); border: 1px dashed rgba(138, 180, 248, 0.3); padding: 12px; border-radius: 12px; cursor: pointer; transition: background 0.2s; margin-top: 0;">
+ Add Calendar Event
</button>
<!-- Add/Edit Event Inline Form -->
<div id="calendarEventForm" style="display: none; margin-top: 16px; padding: 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); flex-direction: column; gap: 12px;">
<h4 id="calendarFormTitle" style="font-size: 0.95rem; margin-bottom: 4px; color: #fff;">Add New Event</h4>
<input type="hidden" id="calendarEventId">
<div class="select-shell" style="gap: 6px;">
<label for="calendarEventTitle" style="font-size: 0.74rem; color: var(--text-soft);">Event Name</label>
<input type="text" id="calendarEventTitle" placeholder="e.g. Chemistry Lecture" required style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(138, 180, 248, 0.12); background: rgba(14, 27, 51, 0.46); color: #fff; outline: none;">
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div class="select-shell" style="gap: 6px;">
<label for="calendarEventDay" style="font-size: 0.74rem; color: var(--text-soft);">Day</label>
<select id="calendarEventDay" style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(138, 180, 248, 0.12); background: rgba(14, 27, 51, 0.46); color: #fff; outline: none; cursor: pointer;">
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
<div class="select-shell" style="gap: 6px;">
<label for="calendarEventColor" style="font-size: 0.74rem; color: var(--text-soft);">Color</label>
<select id="calendarEventColor" style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(138, 180, 248, 0.12); background: rgba(14, 27, 51, 0.46); color: #fff; outline: none; cursor: pointer;">
<option value="#1a73e8">Blue</option>
<option value="#ea4335">Red</option>
<option value="#fbbc05">Yellow</option>
<option value="#34a853">Green</option>
</select>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div class="select-shell" style="gap: 6px;">
<label for="calendarEventStart" style="font-size: 0.74rem; color: var(--text-soft);">Start Time</label>
<input type="time" id="calendarEventStart" required style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(138, 180, 248, 0.12); background: rgba(14, 27, 51, 0.46); color: #fff; outline: none;">
</div>
<div class="select-shell" style="gap: 6px;">
<label for="calendarEventEnd" style="font-size: 0.74rem; color: var(--text-soft);">End Time</label>
<input type="time" id="calendarEventEnd" required style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(138, 180, 248, 0.12); background: rgba(14, 27, 51, 0.46); color: #fff; outline: none;">
</div>
</div>
<div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;">
<button class="secondary-button" id="cancelCalendarEventBtn" type="button" style="padding: 8px 16px; font-size: 0.88rem; border-radius: 8px; cursor: pointer;">Cancel</button>
<button class="primary-button" id="saveCalendarEventBtn" type="button" style="padding: 8px 16px; font-size: 0.88rem; border-radius: 8px; cursor: pointer;">Save</button>
</div>
</div>
</article>
</section>
</main>
</div>
<!-- Firebase Compat SDKs (loaded synchronously to avoid timing race conditions) -->
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore-compat.js"></script>
<script src="firebase-init.js"></script>
<script src="app.js"></script>
</body>
</html>