-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
202 lines (187 loc) · 12.7 KB
/
Copy pathapp.js
File metadata and controls
202 lines (187 loc) · 12.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
const views = {
dashboard: () => `
<section class="hero">
<div class="hero-inner">
<div class="hero-copy">
<div class="leaf">🎓</div>
<h1>Organise tes études, sans effort.</h1>
<p>Retrouve tes cours, tes devoirs et ton emploi du temps au même endroit, avec des rappels automatiques pour ne rien oublier.</p>
<button class="btn btn-primary" onclick="go('homework')">Voir mes devoirs</button>
</div>
<div class="hero-photo">
<div class="stack">
<div class="tile">📘</div><div class="tile">📐</div><div class="tile">🧪</div>
<div class="tile">📅</div><div class="tile">✏️</div><div class="tile">📊</div>
</div>
</div>
</div>
</section>
<section class="cats wrap">
<div class="cats-grid">
<div class="cat-card" onclick="go('schedule')"><div class="ic">📅</div><div class="lb">Emploi du temps</div></div>
<div class="cat-card" onclick="go('homework')"><div class="ic">📝</div><div class="lb">Mes devoirs</div></div>
<div class="cat-card" onclick="go('addHomework')"><div class="ic">➕</div><div class="lb">Ajouter un devoir</div></div>
<div class="cat-card" onclick="go('grades')"><div class="ic">📊</div><div class="lb">Mes notes</div></div>
<div class="cat-card" onclick="go('notifications')"><div class="ic">🔔</div><div class="lb">Rappels</div></div>
<div class="cat-card" onclick="go('profile')"><div class="ic">👤</div><div class="lb">Profil</div></div>
</div>
</section>
<section class="wrap">
<div class="content-grid">
<div>
<div class="section-title">Devoirs à venir</div>
<div class="cards-grid">
<div class="item-card">
<div class="thumb" style="background:var(--red-bg);">📖</div>
<div class="body">
<div class="pill urgent">Pour demain</div>
<div class="subject">Philosophie</div>
<div class="title">Dissertation sur Kant</div>
<div class="due">À rendre le 18 juillet, 23:59</div>
<button class="btn btn-primary">Voir le devoir</button>
</div>
</div>
<div class="item-card">
<div class="thumb" style="background:var(--amber-bg);">📐</div>
<div class="body">
<div class="pill soon">Dans 3 jours</div>
<div class="subject">Mathématiques</div>
<div class="title">Exercices 12 à 18</div>
<div class="due">À rendre le 20 juillet, 23:59</div>
<button class="btn btn-primary">Voir le devoir</button>
</div>
</div>
<div class="item-card">
<div class="thumb" style="background:var(--pale-2);">📗</div>
<div class="body">
<div class="pill info">Dans 6 jours</div>
<div class="subject">Histoire-Géographie</div>
<div class="title">Lecture chapitre 4</div>
<div class="due">À rendre le 23 juillet, 23:59</div>
<button class="btn btn-primary">Voir le devoir</button>
</div>
</div>
</div>
<div class="section-title" style="margin-top:32px;">Cours d'aujourd'hui</div>
<div class="slot"><div class="time">08:00</div><div class="block"><div class="t">Mathématiques</div><div class="r">Salle B12 · Mme Diallo</div></div></div>
<div class="slot"><div class="time">10:30</div><div class="block"><div class="t">Histoire-Géographie</div><div class="r">Salle A04 · M. Konaté</div></div></div>
</div>
<div class="side-box">
<div class="side-item"><div class="ic">🔔</div><div><div class="t">Rappels automatiques</div><div class="d">Zéro devoir oublié</div></div></div>
<div class="side-item"><div class="ic">🔒</div><div><div class="t">Données sécurisées</div><div class="d">Tes infos restent privées</div></div></div>
<div class="side-item"><div class="ic">📱</div><div><div class="t">Android & iOS</div><div class="d">Accessible partout</div></div></div>
<div class="side-item"><div class="ic">📊</div><div><div class="t">Moyenne : 14.8/20</div><div class="d">Suivi de tes notes en temps réel</div></div></div>
</div>
</div>
</section>`,
schedule: () => `
<section class="wrap" style="padding-top:36px;">
<div class="section-title">Emploi du temps</div>
<div class="day-tabs">
<button class="day-tab">Lun</button><button class="day-tab">Mar</button>
<button class="day-tab active">Mer</button><button class="day-tab">Jeu</button>
<button class="day-tab">Ven</button><button class="day-tab">Sam</button>
</div>
<div class="slot"><div class="time">08:00</div><div class="block"><div class="t">Mathématiques</div><div class="r">Salle B12 · Mme Diallo</div></div></div>
<div class="slot"><div class="time">10:30</div><div class="block"><div class="t">Histoire-Géo</div><div class="r">Salle A04 · M. Konaté</div></div></div>
<div class="slot"><div class="time">13:00</div><div class="block"><div class="t">Anglais</div><div class="r">Salle C02 · Mrs Bamba</div></div></div>
<div class="slot"><div class="time">15:00</div><div class="block"><div class="t">Physique-Chimie</div><div class="r">Labo 1 · M. Traoré</div></div></div>
<div class="slot"><div class="time">16:30</div><div class="block"><div class="t">Sport</div><div class="r">Gymnase · M. Coulibaly</div></div></div>
</section>`,
homework: () => `
<section class="wrap" style="padding-top:36px;">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;">
<div class="section-title" style="margin-bottom:0;">Mes devoirs</div>
<button class="btn btn-primary" onclick="go('addHomework')">＋ Ajouter un devoir</button>
</div>
<div class="table-list">
<div class="row"><div class="checkbox" onclick="this.classList.toggle('done')"></div>
<div class="row-info"><div class="t">Dissertation — Philosophie</div><div class="s"><span class="pill urgent">Demain</span></div></div></div>
<div class="row"><div class="checkbox" onclick="this.classList.toggle('done')"></div>
<div class="row-info"><div class="t">Exercices 12 à 18 — Mathématiques</div><div class="s"><span class="pill soon">Dans 3 jours</span></div></div></div>
<div class="row"><div class="checkbox" onclick="this.classList.toggle('done')"></div>
<div class="row-info"><div class="t">Lecture chapitre 4 — Histoire</div><div class="s"><span class="pill info">Dans 6 jours</span></div></div></div>
<div class="row"><div class="checkbox done" onclick="this.classList.toggle('done')">✓</div>
<div class="row-info"><div class="t done">Vocabulaire — Anglais</div><div class="s"><span class="pill ok">Terminé</span></div></div></div>
</div>
</section>`,
addHomework: () => `
<section class="wrap" style="padding-top:36px;">
<button class="btn btn-ghost" onclick="go('homework')" style="margin-bottom:22px;">← Retour aux devoirs</button>
<div class="section-title">Nouveau devoir</div>
<form class="two-col" onsubmit="return false;">
<div class="field"><label>Matière</label><select><option>Philosophie</option><option>Mathématiques</option><option>Anglais</option><option>Histoire-Géographie</option></select></div>
<div class="field"><label>Date limite</label><input placeholder="jj/mm/aaaa"></div>
<div class="field" style="grid-column:1/-1;"><label>Titre du devoir</label><input placeholder="Ex : Dissertation sur Kant"></div>
<div class="field"><label>Heure de rappel</label><input placeholder="18:00"></div>
<div class="field"><label>Priorité</label><select><option>Normale</option><option>Urgente</option></select></div>
<div class="field" style="grid-column:1/-1;"><label>Description (optionnel)</label><textarea placeholder="Détails, consignes..."></textarea></div>
<div style="grid-column:1/-1;"><button class="btn btn-primary" onclick="go('homework')">Enregistrer le devoir</button></div>
</form>
</section>`,
grades: () => `
<section class="wrap" style="padding-top:36px;">
<div class="section-title">Mes notes</div>
<div style="max-width:280px; border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center; margin-bottom:22px; background:var(--pale);">
<div style="font-size:.78rem; color:var(--ink-soft); font-weight:600;">Moyenne générale</div>
<div style="font-family:'Sora',sans-serif; font-size:2.1rem; font-weight:800; color:var(--blue-deep);">14.8<span style="font-size:1.05rem; color:var(--ink-soft);">/20</span></div>
</div>
<div class="subj-list-item"><div class="chip" style="background:var(--blue);"></div>
<div class="subj-info"><div class="name">Mathématiques</div><div class="meta">Moyenne : 16.2/20</div>
<div class="progress-track"><div class="progress-fill" style="width:81%;"></div></div></div></div>
<div class="subj-list-item"><div class="chip" style="background:var(--green);"></div>
<div class="subj-info"><div class="name">Philosophie</div><div class="meta">Moyenne : 13.5/20</div>
<div class="progress-track"><div class="progress-fill" style="width:67%; background:var(--green);"></div></div></div></div>
<div class="subj-list-item"><div class="chip" style="background:var(--amber);"></div>
<div class="subj-info"><div class="name">Anglais</div><div class="meta">Moyenne : 12.0/20</div>
<div class="progress-track"><div class="progress-fill" style="width:60%; background:var(--amber);"></div></div></div></div>
<div class="subj-list-item"><div class="chip" style="background:var(--sky);"></div>
<div class="subj-info"><div class="name">Histoire-Géographie</div><div class="meta">Moyenne : 15.0/20</div>
<div class="progress-track"><div class="progress-fill" style="width:75%; background:var(--sky);"></div></div></div></div>
</section>`,
notifications: () => `
<section class="wrap" style="padding-top:36px;">
<div class="section-title">Rappels</div>
<div class="table-list" style="max-width:640px;">
<div class="row"><div>⏰</div><div class="row-info"><div class="t">Dissertation de Philosophie</div><div class="s">À rendre demain à 23:59 — il y a 1 heure</div></div></div>
<div class="row"><div>📅</div><div class="row-info"><div class="t">Cours de Physique-Chimie déplacé</div><div class="s">Nouvelle salle : Labo 2 — il y a 3 heures</div></div></div>
<div class="row"><div>✅</div><div class="row-info"><div class="t">Note publiée — Anglais</div><div class="s">Contrôle de vocabulaire : 15/20 — hier</div></div></div>
<div class="row"><div>⏰</div><div class="row-info"><div class="t">Exercices de Mathématiques</div><div class="s">À rendre dans 3 jours — hier</div></div></div>
</div>
</section>`,
profile: () => `
<section class="wrap" style="padding-top:36px;">
<div class="profile-head">
<div class="avatar-lg">AK</div>
<div><div class="name">AGBOKOU Junior</div><div class="school">Lycée Moderne — Terminale D</div></div>
</div>
<div class="table-list" style="max-width:520px;">
<div class="row">👤 Informations personnelles</div>
<div class="row">🔒 Sécurité et mot de passe</div>
<div class="row">🔔 Rappels et notifications</div>
<div class="row">🌐 Langue — Français</div>
<div class="row">❓ Aide et support</div>
<div class="row" style="color:var(--red); cursor:pointer;" onclick="logout()">↪ Se déconnecter</div>
</div>
</section>`,
};
const viewContainer = document.getElementById("viewContainer");
function go(view) {
viewContainer.innerHTML = views[view]();
document
.querySelectorAll("#mainNav button")
.forEach((b) => b.classList.toggle("active", b.dataset.view === view));
window.scrollTo(0, 0);
}
function login() {
document.getElementById("authScreen").style.display = "none";
document.getElementById("appScreen").style.display = "block";
go("dashboard");
}
function logout() {
document.getElementById("appScreen").style.display = "none";
document.getElementById("authScreen").style.display = "block";
}
document.querySelectorAll("#mainNav [data-view]").forEach((el) => {
el.addEventListener("click", () => go(el.dataset.view));
});