Skip to content

Commit e15172d

Browse files
gablilligablilli
authored
fix: UI issues, goal form visibility, color scheme, and settings script tag (#80)
1 parent dc66144 commit e15172d

File tree

11 files changed

+392
-51
lines changed

11 files changed

+392
-51
lines changed

‎app.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ def manifest():
8787
"start_url": "/",
8888
"display": "standalone",
8989
"background_color": "#130909",
90-
"theme_color": "#f03333",
90+
"theme_color": "#c84444",
9191
"orientation": "portrait",
9292
"icons": [
9393
{

‎static/common.css‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
/* Common styles for chemediaho app */
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
/* CSS Variables - Dark theme (default) */
10+
:root {
11+
--text: #f1e4e4;
12+
--background: #130909;
13+
--primary: #c84444;
14+
--secondary: #7f2929;
15+
--accent: #d45555;
16+
--excellent: #4caf50;
17+
--pass: #ffa500;
18+
--fail: #e74c3c;
19+
--success: #4caf50;
20+
}
21+
22+
/* CSS Variables - Light theme */
23+
:root[data-theme="light"] {
24+
--text: #1a0a0a;
25+
--background: #fef8f8;
26+
--primary: #c84444;
27+
--secondary: #f5cccc;
28+
--accent: #d45555;
29+
--excellent: #4caf50;
30+
--pass: #ffa500;
31+
--fail: #e74c3c;
32+
--success: #4caf50;
33+
}
34+
35+
/* Base body styles */
36+
body {
37+
margin: 0;
38+
padding: 0;
39+
min-height: 100vh;
40+
background: var(--background);
41+
color: var(--text);
42+
font-family: Arial, Helvetica, sans-serif;
43+
}
44+
45+
/* Header section */
46+
.header-section {
47+
background: var(--primary);
48+
padding: 20px;
49+
display: flex;
50+
align-items: center;
51+
gap: 16px;
52+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
53+
}
54+
55+
.back-button {
56+
background: rgba(255, 255, 255, 0.2);
57+
border: none;
58+
width: 40px;
59+
height: 40px;
60+
border-radius: 50%;
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
cursor: pointer;
65+
transition: background 0.2s;
66+
}
67+
68+
.back-button:hover {
69+
background: rgba(255, 255, 255, 0.3);
70+
}
71+
72+
.back-button svg {
73+
width: 24px;
74+
height: 24px;
75+
fill: white;
76+
}
77+
78+
.header-title {
79+
flex: 1;
80+
color: white;
81+
font-size: 22px;
82+
font-weight: bold;
83+
}
84+
85+
/* Container */
86+
.container {
87+
max-width: 1200px;
88+
margin: 0 auto;
89+
padding: 20px;
90+
}
91+
92+
/* Cards */
93+
.info-card, .section-card, .settings-card {
94+
background: rgba(255, 255, 255, 0.05);
95+
border-radius: 12px;
96+
padding: 24px;
97+
margin-bottom: 20px;
98+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
99+
}
100+
101+
.section-title {
102+
font-size: 20px;
103+
font-weight: bold;
104+
margin-bottom: 16px;
105+
color: var(--text);
106+
}
107+
108+
/* Form elements */
109+
.form-group {
110+
margin-bottom: 20px;
111+
}
112+
113+
.form-label {
114+
display: block;
115+
font-size: 14px;
116+
font-weight: 600;
117+
margin-bottom: 8px;
118+
color: var(--text);
119+
opacity: 0.9;
120+
}
121+
122+
.form-input, .form-select {
123+
width: 100%;
124+
padding: 12px 16px;
125+
font-size: 16px;
126+
border: 2px solid rgba(255, 255, 255, 0.1);
127+
border-radius: 8px;
128+
background: var(--background);
129+
color: var(--text);
130+
transition: border-color 0.2s;
131+
}
132+
133+
.form-input:focus, .form-select:focus {
134+
outline: none;
135+
border-color: var(--primary);
136+
}
137+
138+
/* Buttons */
139+
.calculate-btn, .action-btn {
140+
width: 100%;
141+
padding: 14px 24px;
142+
font-size: 16px;
143+
font-weight: 600;
144+
background: var(--primary);
145+
color: white;
146+
border: none;
147+
border-radius: 8px;
148+
cursor: pointer;
149+
display: flex;
150+
align-items: center;
151+
justify-content: center;
152+
gap: 8px;
153+
transition: background 0.2s;
154+
}
155+
156+
.calculate-btn:hover, .action-btn:hover {
157+
background: var(--accent);
158+
opacity: 0.9;
159+
}
160+
161+
.calculate-btn:disabled, .action-btn:disabled {
162+
opacity: 0.5;
163+
cursor: not-allowed;
164+
}
165+
166+
/* Result cards */
167+
.result-card {
168+
background: var(--background);
169+
border: 2px solid rgba(255, 255, 255, 0.1);
170+
border-radius: 12px;
171+
padding: 24px;
172+
margin-top: 20px;
173+
display: none;
174+
}
175+
176+
.result-card.show {
177+
display: block;
178+
animation: slideIn 0.3s ease;
179+
}
180+
181+
@keyframes slideIn {
182+
from {
183+
opacity: 0;
184+
transform: translateY(20px);
185+
}
186+
to {
187+
opacity: 1;
188+
transform: translateY(0);
189+
}
190+
}
191+
192+
.result-content {
193+
margin-bottom: 16px;
194+
}
195+
196+
.result-row {
197+
display: flex;
198+
justify-content: space-between;
199+
align-items: center;
200+
padding: 16px;
201+
margin-bottom: 8px;
202+
background: rgba(255, 255, 255, 0.03);
203+
border-radius: 8px;
204+
border-left: 3px solid rgba(255, 255, 255, 0.2);
205+
}
206+
207+
.result-row:last-child {
208+
margin-bottom: 0;
209+
}
210+
211+
.result-label {
212+
font-size: 12px;
213+
font-weight: 500;
214+
opacity: 0.9;
215+
text-transform: uppercase;
216+
letter-spacing: 0.5px;
217+
}
218+
219+
.result-value {
220+
font-size: 18px;
221+
font-weight: 700;
222+
}
223+
224+
.result-value.highlight {
225+
color: var(--primary);
226+
font-size: 24px;
227+
}
228+
229+
.result-message {
230+
margin-top: 20px;
231+
padding: 16px;
232+
background: rgba(240, 51, 51, 0.1);
233+
border-left: 4px solid var(--primary);
234+
border-radius: 8px;
235+
font-size: 14px;
236+
line-height: 1.6;
237+
}
238+
239+
/* Notifications */
240+
.error-notification, .notification {
241+
position: fixed;
242+
top: 20px;
243+
left: 50%;
244+
transform: translateX(-50%);
245+
background: var(--primary);
246+
color: white;
247+
padding: 16px 24px;
248+
border-radius: 8px;
249+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
250+
z-index: 1000;
251+
display: none;
252+
}
253+
254+
.error-notification.show, .notification.show {
255+
display: block;
256+
animation: slideDown 0.3s ease;
257+
}
258+
259+
.notification.success {
260+
background: var(--success);
261+
color: white;
262+
}
263+
264+
.notification.error {
265+
background: var(--primary);
266+
color: white;
267+
}
268+
269+
@keyframes slideDown {
270+
from {
271+
opacity: 0;
272+
transform: translate(-50%, -20px);
273+
}
274+
to {
275+
opacity: 1;
276+
transform: translate(-50%, 0);
277+
}
278+
}
279+
280+
/* Grade colors */
281+
.excellent {
282+
color: var(--excellent);
283+
}
284+
285+
.pass {
286+
color: var(--pass);
287+
}
288+
289+
.fail {
290+
color: var(--fail);
291+
}
292+
293+
/* Info grid */
294+
.info-grid {
295+
display: grid;
296+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
297+
gap: 16px;
298+
margin-bottom: 20px;
299+
}
300+
301+
.info-item {
302+
text-align: center;
303+
}
304+
305+
.info-label {
306+
font-size: 12px;
307+
opacity: 0.7;
308+
text-transform: uppercase;
309+
letter-spacing: 0.5px;
310+
margin-bottom: 8px;
311+
}
312+
313+
.info-value {
314+
font-size: 28px;
315+
font-weight: bold;
316+
}
317+
318+
.info-value.excellent {
319+
color: var(--excellent);
320+
}
321+
322+
.info-value.pass {
323+
color: var(--pass);
324+
}
325+
326+
.info-value.fail {
327+
color: var(--fail);
328+
}
329+
330+
/* Loading spinner for buttons */
331+
.action-btn.loading svg, .calculate-btn.loading svg {
332+
animation: spin 1s linear infinite;
333+
}
334+
335+
@keyframes spin {
336+
from { transform: rotate(0deg); }
337+
to { transform: rotate(360deg); }
338+
}

‎static/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"start_url": "/",
66
"display": "standalone",
77
"background_color": "#130909",
8-
"theme_color": "#f03333",
8+
"theme_color": "#c84444",
99
"orientation": "portrait",
1010
"icons": [
1111
{

‎templates/charts.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta name="theme-color" content="#f03333" />
6+
<meta name="theme-color" content="#c84444" />
77
<meta name="description" content="Visualizza l'andamento dei voti di ClasseViva" />
88
<meta name="apple-mobile-web-app-capable" content="yes" />
99
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -32,23 +32,23 @@
3232
:root {
3333
--text: #f1e4e4;
3434
--background: #130909;
35-
--primary: #f03333;
35+
--primary: #c84444;
3636
--secondary: #7f2929;
37-
--accent: #c83737;
37+
--accent: #d45555;
3838
--excellent: #4caf50; /* Green for 6.5+ */
3939
--pass: #ffa500; /* Orange for 5.5-6.4 */
40-
--fail: #f03333; /* Red for <5.5 */
40+
--fail: #e74c3c; /* Red for <5.5 */
4141
}
4242

4343
:root[data-theme="light"] {
4444
--text: #1a0a0a;
4545
--background: #fef8f8;
46-
--primary: #f03333;
46+
--primary: #c84444;
4747
--secondary: #f5cccc;
48-
--accent: #c83737;
48+
--accent: #d45555;
4949
--excellent: #4caf50; /* Green for 6.5+ */
5050
--pass: #ffa500; /* Orange for 5.5-6.4 */
51-
--fail: #f03333; /* Red for <5.5 */
51+
--fail: #e74c3c; /* Red for <5.5 */
5252
}
5353

5454
body {

0 commit comments

Comments
 (0)