Skip to content

Commit 361f774

Browse files
pod-IIIpod-III
committed
style: enhance visual design and consistency with refined border weights and component styling
1 parent 66d437f commit 361f774

2 files changed

Lines changed: 63 additions & 36 deletions

File tree

‎my-space/my-class/index.html‎

Lines changed: 55 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,33 @@
6060
<link rel="stylesheet" href="../../css/components.css" />
6161
<link rel="stylesheet" href="styles.css" />
6262

63+
<style type="text/tailwindcss">
64+
/* Badge Pro */
65+
.badge-pro {
66+
@apply px-2 py-0.5 bg-gradient-to-r from-orange to-pink text-[8px] font-black text-white rounded-md shadow-hard-sm border-[3px] border-slate-800 dark:border-slate-500 flex items-center justify-center tracking-tighter;
67+
}
68+
69+
/* Reflection card tweaks */
70+
.reflection-card {
71+
@apply relative pl-6;
72+
}
73+
.reflection-card::before {
74+
content: '';
75+
@apply absolute left-0 top-0 bottom-0 w-1.5 bg-orange rounded-full;
76+
}
77+
78+
/* Table styling */
79+
th {
80+
@apply text-left px-4 py-3 font-heading text-xs uppercase tracking-[0.2em] text-slate-400;
81+
}
82+
td {
83+
@apply px-4 py-4 border-b-[3px] border-slate-100 dark:border-slate-800;
84+
}
85+
.dark tr:hover td {
86+
background: rgba(30, 41, 59, 0.5);
87+
}
88+
</style>
89+
6390
<style>
6491
.glass-panel {
6592
background: rgba(255, 255, 255, 0.7);
@@ -73,7 +100,7 @@
73100
}
74101

75102
.tab-btn {
76-
@apply px-5 py-2 rounded-xl font-heading font-bold text-xs uppercase tracking-wider transition-all border-2 border-transparent text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 flex items-center gap-2;
103+
@apply px-5 py-2 rounded-xl font-heading font-bold text-xs uppercase tracking-wider transition-all border-[3px] border-transparent text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 flex items-center gap-2;
77104
}
78105
.tab-btn.active {
79106
@apply bg-blue text-white border-slate-800 shadow-hard-sm translate-y-[-2px];
@@ -103,7 +130,7 @@
103130
.animate-pop-in { animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
104131

105132
.input-chunky {
106-
@apply w-full bg-white dark:bg-slate-800 border-2 border-slate-800 dark:border-slate-600 rounded-xl px-4 py-3 font-bold text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition-all;
133+
@apply w-full bg-white dark:bg-slate-800 border-[3px] border-slate-800 dark:border-slate-500 rounded-xl px-4 py-3 font-bold text-slate-800 dark:text-white focus:outline-none focus:ring-[3px] focus:ring-blue focus:border-transparent transition-all shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)];
107134
}
108135

109136
.no-scrollbar::-webkit-scrollbar {
@@ -119,10 +146,10 @@
119146
<body class="bg-chalk dark:bg-dark min-h-screen pb-12 overflow-x-hidden">
120147

121148
<!-- Header -->
122-
<header class="glass-panel sticky top-0 z-40 h-16 flex items-center justify-between px-4 md:px-8 border-b-[3px] border-slate-800 dark:border-slate-700" style="border-radius: 0;">
149+
<header class="glass-panel sticky top-0 z-40 h-16 flex items-center justify-between px-4 md:px-8 border-b-[3px] border-slate-800 dark:border-slate-500" style="border-radius: 0;">
123150
<div class="flex items-center gap-4">
124151
<div class="flex items-center gap-3">
125-
<div class="w-10 h-10 bg-orange rounded-xl border-2 border-slate-800 dark:border-slate-500 flex items-center justify-center text-white shadow-hard-sm">
152+
<div class="w-10 h-10 bg-orange rounded-xl border-[3px] border-slate-800 dark:border-slate-500 flex items-center justify-center text-white shadow-hard-sm">
126153
<i data-lucide="users" class="w-6 h-6"></i>
127154
</div>
128155
<div>
@@ -133,7 +160,7 @@ <h1 class="font-heading font-bold text-xl md:text-2xl tracking-tight leading-non
133160
</div>
134161

135162
<!-- Class Selector -->
136-
<div class="hidden md:flex items-center gap-3 bg-white/50 dark:bg-slate-800/50 p-1 rounded-xl border-2 border-slate-800 dark:border-slate-700 shadow-inner">
163+
<div class="hidden md:flex items-center gap-3 bg-white/50 dark:bg-slate-800/50 p-1 rounded-xl border-[3px] border-slate-800 dark:border-slate-500 shadow-inner">
137164
<i data-lucide="graduation-cap" class="w-4 h-4 ml-2 text-blue"></i>
138165
<select id="classSelector" onchange="ClassManager.selectClass(this.value)" class="bg-transparent border-none outline-none font-heading font-bold text-xs text-slate-700 dark:text-slate-200 pr-6 appearance-none cursor-pointer">
139166
<option value="">Select a class...</option>
@@ -145,11 +172,11 @@ <h1 class="font-heading font-bold text-xl md:text-2xl tracking-tight leading-non
145172

146173
<div class="flex items-center gap-3">
147174
<div id="backToGridBtn" class="hidden">
148-
<button onclick="ClassManager.selectClass('')" class="btn-chunky px-3 py-1.5 bg-white dark:bg-slate-800 rounded-xl border-2 border-slate-800 dark:border-slate-600 shadow-hard-sm font-black text-[9px] uppercase tracking-widest flex items-center gap-2">
175+
<button onclick="ClassManager.selectClass('')" class="btn-chunky px-3 py-1.5 bg-white dark:bg-slate-800 rounded-xl border-[3px] border-slate-800 dark:border-slate-500 shadow-hard-sm font-black text-[9px] uppercase tracking-widest flex items-center gap-2">
149176
<i data-lucide="layout-grid" class="w-3.5 h-3.5"></i> Grid
150177
</button>
151178
</div>
152-
<button onclick="Theme.toggle()" class="btn-chunky w-10 h-10 bg-white dark:bg-slate-800 rounded-xl border-2 border-slate-800 dark:border-slate-600 shadow-hard-sm flex items-center justify-center">
179+
<button onclick="Theme.toggle()" class="btn-chunky w-10 h-10 bg-white dark:bg-slate-800 rounded-xl border-[3px] border-slate-800 dark:border-slate-500 shadow-hard-sm flex items-center justify-center">
153180
<i data-lucide="sun" class="w-5 h-5 dark:hidden text-slate-700"></i>
154181
<i data-lucide="moon" class="w-5 h-5 hidden dark:block text-slate-300"></i>
155182
</button>
@@ -186,63 +213,63 @@ <h2 class="font-heading font-bold text-3xl text-slate-900 dark:text-white upperc
186213
<!-- Class cards injected here -->
187214
</div>
188215

189-
<div id="noScheduleState" class="hidden glass-panel border-4 border-dashed border-slate-300 dark:border-slate-700 rounded-[2.5rem] p-12 text-center">
216+
<div id="noScheduleState" class="hidden glass-panel border-[3px] border-dashed border-slate-300 dark:border-slate-600 rounded-[2.5rem] p-12 text-center">
190217
<div class="w-20 h-20 bg-slate-100 dark:bg-slate-800 rounded-3xl flex items-center justify-center mx-auto mb-6 text-slate-400">
191218
<i data-lucide="calendar-off" class="w-10 h-10"></i>
192219
</div>
193220
<h3 class="font-heading font-bold text-xl text-slate-900 dark:text-white uppercase">No Classes Found</h3>
194221
<p class="text-slate-500 mt-2 max-w-sm mx-auto">It looks like your schedule is empty. Add some classes to your schedule first to start tracking them here.</p>
195-
<a href="../schedule/" class="btn-chunky inline-flex mt-8 bg-blue text-white px-8 py-3 rounded-xl border-2 border-slate-800 font-black uppercase text-sm shadow-hard">Go to Schedule</a>
222+
<a href="../schedule/" class="btn-chunky inline-flex mt-8 bg-blue text-white px-8 py-3 rounded-xl border-[3px] border-slate-800 dark:border-slate-500 font-black uppercase text-sm shadow-hard">Go to Schedule</a>
196223
</div>
197224
</div>
198225

199226
<!-- Main Workspace (Hidden until class selected) -->
200227
<div id="classWorkspace" class="hidden space-y-8">
201228

202229
<!-- Class Header Card -->
203-
<div id="classHeaderCard" class="glass-panel border-[3px] border-slate-800 dark:border-slate-700 rounded-[2rem] p-6 shadow-hard relative overflow-hidden group">
204-
<div id="classHeaderColor" class="absolute top-0 left-0 w-full h-2 bg-blue"></div>
230+
<div id="classHeaderCard" class="border-[3px] border-slate-800 dark:border-slate-500 bg-white dark:bg-slate-900/50 rounded-[2rem] p-6 shadow-hard relative overflow-hidden group">
231+
<div id="classHeaderColor" class="absolute top-0 left-0 w-full h-3 bg-blue border-b-[3px] border-slate-800 dark:border-slate-500"></div>
205232

206-
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6 relative z-10">
233+
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6 relative z-10 mt-2">
207234
<div class="flex items-center gap-6">
208-
<div id="classAvatar" class="w-16 h-16 bg-white dark:bg-slate-800 rounded-2xl border-[2px] border-slate-800 flex items-center justify-center text-2xl font-black text-blue shadow-hard-sm uppercase transform -rotate-3 group-hover:rotate-0 transition-transform">
235+
<div id="classAvatar" class="w-16 h-16 bg-white dark:bg-slate-800 rounded-2xl border-[3px] border-slate-800 dark:border-slate-500 flex items-center justify-center text-3xl font-black text-blue shadow-hard-sm uppercase transform -rotate-3 group-hover:rotate-0 transition-transform">
209236
?
210237
</div>
211238
<div class="space-y-1">
212239
<div class="flex items-center gap-2">
213-
<h2 id="classNameDisplay" class="font-heading font-bold text-2xl text-slate-900 dark:text-white uppercase tracking-tight">Class Name</h2>
240+
<h2 id="classNameDisplay" class="font-heading font-bold text-3xl text-slate-900 dark:text-white uppercase tracking-tight">Class Name</h2>
214241
<div id="cloudSyncBadge" class="badge-pro !bg-green !from-green !to-green gap-1 opacity-0 transition-opacity">
215242
<i data-lucide="cloud" class="w-2.5 h-2.5"></i>
216243
<span>Synced</span>
217244
</div>
218245
</div>
219246
<div class="flex flex-wrap gap-3">
220-
<div class="flex items-center gap-1.5">
247+
<div class="flex items-center gap-1.5 badge-pro !bg-slate-100 dark:!bg-slate-800 !text-slate-600 dark:!text-slate-300 !border-[3px] !border-slate-300 dark:!border-slate-600 px-2 py-1">
221248
<div class="w-1.5 h-1.5 rounded-full bg-blue"></div>
222-
<span id="studentCountBadge" class="text-[10px] font-black uppercase tracking-widest text-slate-500">0 Students</span>
249+
<span id="studentCountBadge" class="text-[10px] font-black uppercase tracking-widest">0 Students</span>
223250
</div>
224-
<div class="flex items-center gap-1.5">
251+
<div class="flex items-center gap-1.5 badge-pro !bg-slate-100 dark:!bg-slate-800 !text-slate-600 dark:!text-slate-300 !border-[3px] !border-slate-300 dark:!border-slate-600 px-2 py-1">
225252
<i data-lucide="message-square" class="w-3 h-3 text-orange"></i>
226-
<span id="reflectionCountBadge" class="text-[10px] font-black uppercase tracking-widest text-slate-500">0 Reflections</span>
253+
<span id="reflectionCountBadge" class="text-[10px] font-black uppercase tracking-widest">0 Reflections</span>
227254
</div>
228255
</div>
229256
</div>
230257
</div>
231258

232259
<div class="flex items-center gap-4">
233-
<div id="nextSessionBadge" class="hidden sm:flex px-4 py-2 bg-slate-50 dark:bg-slate-900/50 rounded-xl border-2 border-slate-800 dark:border-slate-700 flex items-center gap-2">
260+
<div id="nextSessionBadge" class="hidden sm:flex px-4 py-2 bg-slate-50 dark:bg-slate-900/50 rounded-xl border-[3px] border-slate-800 dark:border-slate-500 flex items-center gap-2 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]">
234261
<i data-lucide="calendar" class="w-4 h-4 text-green"></i>
235262
<span id="nextSessionText" class="text-[10px] font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider">Loading...</span>
236263
</div>
237-
<button onclick="ClassManager.openAddStudent()" class="btn-chunky bg-blue text-white px-6 py-3 rounded-xl border-2 border-slate-800 font-black uppercase text-xs flex items-center justify-center gap-2 shadow-hard">
264+
<button onclick="ClassManager.openAddStudent()" class="btn-chunky bg-blue text-white px-6 py-3 rounded-xl border-[3px] border-slate-800 dark:border-slate-500 font-black uppercase text-xs flex items-center justify-center gap-2 shadow-hard">
238265
<i data-lucide="user-plus" class="w-4 h-4"></i> Add Student
239266
</button>
240267
</div>
241268
</div>
242269
</div>
243270

244271
<!-- Navigation Tabs -->
245-
<div class="flex items-center gap-3 border-b-2 border-slate-200 dark:border-slate-800 pb-4 overflow-x-auto no-scrollbar">
272+
<div class="flex items-center gap-3 border-b-[3px] border-slate-200 dark:border-slate-800 pb-4 overflow-x-auto no-scrollbar">
246273
<button onclick="TabManager.switch('students')" id="tab-students" class="tab-btn active">
247274
<i data-lucide="users" class="w-4 h-4"></i> Students
248275
</button>
@@ -332,7 +359,7 @@ <h3 class="font-heading font-bold text-lg text-slate-900 dark:text-white upperca
332359
<div id="modalBackdrop" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[50] hidden opacity-0 transition-opacity duration-300" onclick="ModalManager.closeAll()"></div>
333360

334361
<!-- Add Student Modal -->
335-
<div id="studentModal" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg glass-panel border-4 border-slate-800 dark:border-slate-600 rounded-[2.5rem] p-8 z-[60] hidden opacity-0 transition-all duration-300 scale-95 shadow-2xl">
362+
<div id="studentModal" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white dark:bg-slate-900/90 border-[3px] border-slate-800 dark:border-slate-500 rounded-[2rem] p-8 z-[60] hidden opacity-0 transition-all duration-300 scale-95 shadow-hard-dark backdrop-blur-xl">
336363
<div class="flex items-center justify-between mb-6">
337364
<h2 class="font-heading font-bold text-2xl text-slate-900 dark:text-white uppercase flex items-center gap-3">
338365
<i data-lucide="user-plus" class="w-6 h-6 text-blue"></i> Add Students
@@ -343,7 +370,7 @@ <h2 class="font-heading font-bold text-2xl text-slate-900 dark:text-white upperc
343370
</div>
344371

345372
<!-- Toggle between Single and Bulk -->
346-
<div class="flex p-1 bg-slate-100 dark:bg-slate-800 rounded-2xl mb-6 border-2 border-slate-800 dark:border-slate-700">
373+
<div class="flex p-1 bg-slate-100 dark:bg-slate-800 rounded-2xl mb-6 border-[3px] border-slate-800 dark:border-slate-500 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]">
347374
<button onclick="StudentManager.setEntryMode('single')" id="mode-single" class="flex-1 py-2.5 rounded-xl font-black text-[10px] uppercase transition-all bg-blue text-white shadow-hard-sm">Single Entry</button>
348375
<button onclick="StudentManager.setEntryMode('bulk')" id="mode-bulk" class="flex-1 py-2.5 rounded-xl font-black text-[10px] uppercase transition-all text-slate-400">Bulk Add</button>
349376
</div>
@@ -370,13 +397,13 @@ <h2 class="font-heading font-bold text-2xl text-slate-900 dark:text-white upperc
370397
</div>
371398

372399
<div class="pt-8 flex gap-3">
373-
<button onclick="ModalManager.closeAll()" class="btn-chunky flex-1 bg-slate-100 dark:bg-slate-800 border-2 border-slate-800 font-black uppercase py-4 rounded-2xl">Cancel</button>
374-
<button id="saveStudentBtn" onclick="StudentManager.save()" class="btn-chunky flex-1 bg-blue text-white border-2 border-slate-800 font-black uppercase py-4 rounded-2xl shadow-hard">Add Student</button>
400+
<button onclick="ModalManager.closeAll()" class="btn-chunky flex-1 bg-slate-100 dark:bg-slate-800 border-[3px] border-slate-800 dark:border-slate-500 font-black uppercase py-4 rounded-2xl shadow-hard-sm">Cancel</button>
401+
<button id="saveStudentBtn" onclick="StudentManager.save()" class="btn-chunky flex-1 bg-blue text-white border-[3px] border-slate-800 dark:border-slate-500 font-black uppercase py-4 rounded-2xl shadow-hard">Add Student</button>
375402
</div>
376403
</div>
377404

378405
<!-- Reflection Modal -->
379-
<div id="reflectionModal" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl glass-panel border-4 border-slate-800 dark:border-slate-600 rounded-[2.5rem] p-8 z-[60] hidden opacity-0 transition-all duration-300 scale-95 shadow-2xl">
406+
<div id="reflectionModal" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl bg-white dark:bg-slate-900/90 border-[3px] border-slate-800 dark:border-slate-500 rounded-[2rem] p-8 z-[60] hidden opacity-0 transition-all duration-300 scale-95 shadow-hard-dark backdrop-blur-xl">
380407
<div class="flex items-center justify-between mb-8">
381408
<h2 class="font-heading font-bold text-2xl text-slate-900 dark:text-white uppercase flex items-center gap-3">
382409
<i data-lucide="pen-tool" class="w-6 h-6 text-orange"></i> Session Reflection
@@ -407,8 +434,8 @@ <h2 class="font-heading font-bold text-2xl text-slate-900 dark:text-white upperc
407434
<textarea id="reflectionTextInput" placeholder="How did it go? What went well? What could be better?" class="input-chunky min-h-[200px] resize-none"></textarea>
408435
</div>
409436
<div class="pt-4 flex gap-3">
410-
<button onclick="ModalManager.closeAll()" class="btn-chunky flex-1 bg-slate-100 dark:bg-slate-800 border-2 border-slate-800 font-black uppercase py-4 rounded-2xl">Discard</button>
411-
<button onclick="ReflectionManager.save()" class="btn-chunky flex-1 bg-orange text-white border-2 border-slate-800 font-black uppercase py-4 rounded-2xl shadow-hard">Save Reflection</button>
437+
<button onclick="ModalManager.closeAll()" class="btn-chunky flex-1 bg-slate-100 dark:bg-slate-800 border-[3px] border-slate-800 dark:border-slate-500 font-black uppercase py-4 rounded-2xl shadow-hard-sm">Discard</button>
438+
<button onclick="ReflectionManager.save()" class="btn-chunky flex-1 bg-orange text-white border-[3px] border-slate-800 dark:border-slate-500 font-black uppercase py-4 rounded-2xl shadow-hard">Save Reflection</button>
412439
</div>
413440
</div>
414441
</div>

0 commit comments

Comments
 (0)