Skip to content

Commit 68cffef

Browse files
YakeDevYakeDev
committed
TaskZen UX modernization: today focus, priority tagging, undo, onboarding
1 parent cdff233 commit 68cffef

9 files changed

Lines changed: 1388 additions & 173 deletions

File tree

‎index.html‎

Lines changed: 192 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,13 @@
2626
TaskZen
2727
</h1>
2828
<button
29-
id="menuToggleBtn"
30-
type="button"
31-
class="p-2 rounded-lg focus:outline-none transition hover:bg-gray-200 dark:text-slate-200 dark:hover:bg-slate-800"
32-
aria-label="Masquer le menu"
33-
aria-controls="sidebarContent"
34-
aria-expanded="true">
29+
id="menuToggleBtn"
30+
type="button"
31+
class="p-2 rounded-lg focus:outline-none transition hover:bg-gray-200 dark:text-slate-200 dark:hover:bg-slate-800"
32+
aria-label="Masquer le menu"
33+
title="Afficher/masquer le menu"
34+
aria-controls="sidebarContent"
35+
aria-expanded="true">
3536
<svg
3637
class="w-6 h-6"
3738
fill="none"
@@ -49,12 +50,13 @@
4950
<div
5051
id="sidebarContent"
5152
class="flex flex-col flex-1 overflow-auto sidebar-hideable space-y-4">
52-
<div>
53-
<input
54-
type="text"
55-
placeholder="Rechercher"
56-
class="w-full px-3 py-2 rounded-lg border border-gray-200 text-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100" />
57-
</div>
53+
<div>
54+
<input
55+
id="sidebarSearchInput"
56+
type="text"
57+
placeholder="Rechercher"
58+
class="w-full px-3 py-2 rounded-lg border border-gray-200 text-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100" />
59+
</div>
5860

5961
<div class="space-y-2">
6062
<h2
@@ -189,24 +191,24 @@
189191

190192
<section
191193
id="taskSection"
192-
class="p-2 h-full overflow-auto text-gray-900 dark:text-slate-100 transition-colors duration-300">
193-
<div id="stats"></div>
194-
<div class="pt-4 space-y-4">
195-
<div class="flex items-center justify-between">
196-
<h2
197-
id="tasksViewTitle"
198-
class="text-sm font-semibold uppercase tracking-wide text-gray-600 dark:text-slate-300">
199-
Mes tâches
200-
</h2>
194+
class="p-4 h-full overflow-auto text-gray-900 dark:text-slate-100 transition-colors duration-300 space-y-6">
195+
<header class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
196+
<div>
197+
<h1 class="text-3xl font-semibold text-gray-900 dark:text-slate-50">Tableau de bord</h1>
198+
<p class="text-sm text-gray-500 dark:text-slate-400">Concentrez-vous sur vos priorités quotidiennes.</p>
199+
</div>
200+
<div class="flex gap-2">
201201
<button
202-
id="openFormBtn"
203202
type="button"
204-
class="inline-flex items-center gap-2 rounded-md bg-emerald-500 px-3 py-2 text-xs font-semibold text-white shadow hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-emerald-600 dark:hover:bg-emerald-500">
203+
class="hidden sm:inline-flex items-center gap-2 rounded-md bg-emerald-500 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-emerald-600 dark:hover:bg-emerald-500"
204+
data-open-form
205+
title="Créer une nouvelle tâche (N)">
205206
<svg
206207
class="w-4 h-4"
207208
fill="none"
208209
stroke="currentColor"
209210
viewBox="0 0 24 24">
211+
<title>Nouvelle tâche</title>
210212
<path
211213
stroke-linecap="round"
212214
stroke-linejoin="round"
@@ -216,7 +218,76 @@
216218
Nouvelle tâche
217219
</button>
218220
</div>
219-
<ul id="taskList" class="space-y-2"></ul>
221+
</header>
222+
223+
<div id="stats"></div>
224+
225+
<section
226+
id="todaySection"
227+
class="rounded-xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/60">
228+
<div class="flex items-center justify-between flex-wrap gap-2">
229+
<h2 class="text-lg font-semibold text-gray-900 dark:text-slate-100 flex items-center gap-2">
230+
<svg
231+
class="w-5 h-5 text-emerald-500"
232+
fill="none"
233+
stroke="currentColor"
234+
viewBox="0 0 24 24">
235+
<title> Aujourd'hui </title>
236+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10m-13 8h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z" />
237+
</svg>
238+
Aujourd’hui
239+
</h2>
240+
<button
241+
type="button"
242+
class="inline-flex items-center gap-2 rounded-md border border-emerald-200 px-3 py-1 text-xs font-medium text-emerald-600 hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:border-emerald-800 dark:text-emerald-300 dark:hover:bg-emerald-900/40"
243+
data-period-shortcut="today"
244+
title="Filtrer les tâches du jour">
245+
<svg
246+
class="w-4 h-4"
247+
fill="none"
248+
stroke="currentColor"
249+
viewBox="0 0 24 24">
250+
<title>Filtrer</title>
251+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h18l-7 8v6l-4 2v-8L3 4Z" />
252+
</svg>
253+
Voir toutes les tâches du jour
254+
</button>
255+
</div>
256+
<ul id="todayTaskList" class="mt-3 space-y-2" aria-live="polite"></ul>
257+
</section>
258+
259+
<hr class="border-t border-dashed border-gray-200 dark:border-slate-700" />
260+
261+
<div class="space-y-4">
262+
<div class="flex flex-wrap items-center justify-between gap-3">
263+
<h2
264+
id="tasksViewTitle"
265+
class="text-2xl font-semibold tracking-tight text-gray-800 dark:text-slate-100">
266+
Mes tâches
267+
</h2>
268+
<div class="flex gap-2">
269+
<button
270+
type="button"
271+
class="inline-flex items-center gap-2 rounded-md bg-emerald-500 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-emerald-600 dark:hover:bg-emerald-500"
272+
data-open-form
273+
title="Créer une nouvelle tâche (N)">
274+
<svg
275+
class="w-4 h-4"
276+
fill="none"
277+
stroke="currentColor"
278+
viewBox="0 0 24 24">
279+
<title>Nouvelle tâche</title>
280+
<path
281+
stroke-linecap="round"
282+
stroke-linejoin="round"
283+
stroke-width="2"
284+
d="M12 4v16m8-8H4" />
285+
</svg>
286+
Nouvelle tâche
287+
</button>
288+
</div>
289+
</div>
290+
<ul id="taskList" class="space-y-3"></ul>
220291
</div>
221292
</section>
222293
<aside
@@ -230,11 +301,12 @@
230301
class="text-lg font-semibold text-gray-900 dark:text-slate-100">
231302
Nouvelle tâche
232303
</h2>
233-
<button
234-
type="button"
235-
id="closeFormBtn"
236-
class="rounded-full p-2 text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:text-slate-300 dark:hover:bg-slate-800"
237-
aria-label="Fermer le formulaire">
304+
<button
305+
type="button"
306+
id="closeFormBtn"
307+
class="rounded-full p-2 text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:text-slate-300 dark:hover:bg-slate-800"
308+
aria-label="Fermer le formulaire"
309+
title="Fermer le formulaire">
238310
<svg
239311
class="w-4 h-4"
240312
fill="none"
@@ -357,7 +429,25 @@
357429
</div>
358430
</div>
359431
</div>
360-
</div>
432+
433+
<!-- Priorité -->
434+
<div class="col-span-5">
435+
<div class="flex items-center justify-between gap-3">
436+
<label
437+
for="priority"
438+
class="block text-sm font-normal text-gray-500 dark:text-slate-300">
439+
Prioritaire
440+
</label>
441+
<div class="mt-2 flex items-center gap-2">
442+
<input
443+
type="checkbox"
444+
id="priority"
445+
name="priority"
446+
class="h-4 w-4 rounded border-gray-300 text-amber-500 focus:ring-2 focus:ring-amber-400 dark:border-slate-600" />
447+
<span class="text-xs font-medium text-amber-500">Tag “Prioritaire”</span>
448+
</div>
449+
</div>
450+
</div>
361451
</div>
362452

363453
<!-- Footer collé en bas -->
@@ -383,10 +473,11 @@
383473
<h2 class="text-lg font-semibold text-gray-900">Paramètres</h2>
384474
<p class="text-sm text-gray-500">Personnalisez votre expérience.</p>
385475
</div>
386-
<button
387-
id="closeSettingsBtn"
388-
class="rounded-full p-2 text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"
389-
aria-label="Fermer les paramètres">
476+
<button
477+
id="closeSettingsBtn"
478+
class="rounded-full p-2 text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"
479+
aria-label="Fermer les paramètres"
480+
title="Fermer les paramètres">
390481
<svg
391482
class="w-4 h-4"
392483
xmlns="http://www.w3.org/2000/svg"
@@ -509,6 +600,73 @@ <h2 class="text-lg font-semibold text-gray-900">Paramètres</h2>
509600
class="hidden"
510601
accept="application/json" />
511602

603+
<button
604+
type="button"
605+
id="floatingNewTaskBtn"
606+
class="fixed bottom-5 right-5 z-30 inline-flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500 text-white shadow-lg shadow-emerald-500/30 transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-emerald-400 sm:hidden"
607+
data-open-form
608+
title="Créer une nouvelle tâche (N)">
609+
<span class="text-2xl leading-none">+</span>
610+
</button>
611+
612+
<div
613+
id="undoToast"
614+
class="pointer-events-none fixed bottom-6 left-1/2 z-40 hidden w-[90%] max-w-sm -translate-x-1/2 transform rounded-lg bg-gray-900/95 px-4 py-3 text-sm text-white shadow-lg"
615+
role="status"
616+
aria-live="assertive">
617+
<div class="flex items-center justify-between gap-3">
618+
<p id="undoToastMessage" class="text-sm"></p>
619+
<button
620+
id="undoToastAction"
621+
type="button"
622+
class="pointer-events-auto rounded-md bg-white/10 px-3 py-1 text-xs font-semibold text-white hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/70">
623+
Annuler
624+
</button>
625+
</div>
626+
</div>
627+
628+
<div
629+
id="onboardingModal"
630+
class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4"
631+
tabindex="-1"
632+
role="dialog"
633+
aria-modal="true"
634+
aria-labelledby="onboardingTitle">
635+
<div class="w-full max-w-lg rounded-xl bg-white p-6 shadow-xl dark:bg-slate-900 dark:text-slate-100">
636+
<div class="flex items-start justify-between">
637+
<h2 id="onboardingTitle" class="text-xl font-semibold text-gray-900 dark:text-slate-100">
638+
Bienvenue sur TaskZen
639+
</h2>
640+
<button
641+
type="button"
642+
id="onboardingSkip"
643+
class="text-sm font-medium text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:text-slate-400 dark:hover:text-slate-200"
644+
title="Ignorer l’introduction">
645+
Sauter
646+
</button>
647+
</div>
648+
<div id="onboardingBody" class="mt-4 space-y-3 text-sm text-gray-600 dark:text-slate-300"></div>
649+
<div class="mt-6 flex items-center justify-between">
650+
<button
651+
type="button"
652+
id="onboardingPrev"
653+
class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-emerald-400 disabled:cursor-not-allowed disabled:opacity-40 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
654+
disabled>
655+
Précédent
656+
</button>
657+
<div class="flex items-center gap-2">
658+
<div class="flex items-center gap-1" id="onboardingDots" aria-hidden="true"></div>
659+
<button
660+
type="button"
661+
id="onboardingNext"
662+
class="rounded-md bg-emerald-500 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-emerald-600 dark:hover:bg-emerald-500">
663+
Suivant
664+
</button>
665+
</div>
666+
</div>
667+
</div>
668+
</div>
669+
512670
<script type="module" src="/src/main.js"></script>
513671
</body>
514672
</html>

0 commit comments

Comments
 (0)