Gameur/meteo-exam
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix : nav 'Plus' au lieu de 'Paramètres' (trop long), illustrations tempête et fin du monde améliorées

Browse source 
- Nav : label 'Paramètres' → 'Plus' (débordait dans la grille)
- Tempête : tourbillon CSS animé (2 anneaux + noyau) au lieu d'un radial-gradient moche
- Fin du monde : champignon nucléaire CSS avec glow, plus lisible
- Gradient hero tempête aligné sur la nouvelle illustration
This commit is contained in:
Mathis 2026-10-04 23:12:07 +02:00
parent 2f2f363650
commit 4692ffe1eb
3 changed files with 20 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/main.ts
View file

@ -19,7 +19,7 @@ const TABS: { id: Tab; label: string; icon: string }[] = [
{ id: 'meteo', label: 'Météo', icon: 'cloud-sun' },
{ id: 'radar', label: 'Radar', icon: 'satellite-dish' },
{ id: 'bilan', label: 'Bilan', icon: 'journal-bookmark' },
{ id: 'parametres', label: 'Paramètres', icon: 'gear' },
{ id: 'parametres', label: 'Plus', icon: 'gear' },
]
function svgIcon(name: string): string {

5
web/src/styles.css
View file

@ -547,6 +547,11 @@ h1, h2, h3, h4, h5, h6 {
to { opacity: 1; transform: none; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.tab-enter { animation: enter .2s ease; }
/* Overlay modals */

18
web/src/views/weather-art.ts
View file

@ -32,9 +32,19 @@ export function weatherArt(kind: WeatherKind, size: 'mini' | 'hero' = 'mini'): H
h('div', { class: 'simple-cloud', style: 'background:#5464A9' }),
h('div', { class: 'bolt-shape' }),
),
tempete: () => h('div', { class: cls, style: `${style};background:radial-gradient(circle at 50% 50%,#FBAE45 0 5%,#F04464 6% 12%,#7E2BD5 13% 21%,#11194B 22% 36%,#F04464 37% 43%,#11194B 44%)` }),
fin_du_monde: () => h('div', { class: cls, style: `${style};background:linear-gradient(#281846,#B33C33 55%,#F59337)` },
h('div', { class: 'mushroom-shape' }),
tempete: () => h('div', { class: cls, style: `${style};background:linear-gradient(145deg,#1a1040,#2d1b69 40%,#1a1040)` },
h('div', { style: 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center' },
h('div', { style: 'width:50px;height:50px;border-radius:50%;border:4px solid #f472b6;border-top-color:#fbbf24;border-right-color:#a78bfa;animation:spin 2s linear infinite' }),
h('div', { style: 'position:absolute;width:24px;height:24px;border-radius:50%;border:3px solid #f472b6;border-bottom-color:#fbbf24;border-left-color:#a78bfa;animation:spin 1.2s linear infinite reverse' }),
h('div', { style: 'position:absolute;width:10px;height:10px;border-radius:50%;background:#fbbf24' }),
),
),
fin_du_monde: () => h('div', { class: cls, style: `${style};background:linear-gradient(180deg,#1a0a2e 0%,#4a1942 30%,#b33c33 60%,#f59337 100%)` },
h('div', { style: 'position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px' },
h('div', { style: 'width:30px;height:40px;background:#FF8A3D;border-radius:50% 50% 30% 30%;box-shadow:0 0 20px #FFD43B,0 0 40px #FF8A3D,0 8px 0 -4px #FFA640' }),
h('div', { style: 'position:absolute;width:14px;height:24px;background:#FF8A3D;left:calc(50% - 7px);bottom:0;border-radius:0 0 6px 6px' }),
h('div', { style: 'position:absolute;width:20px;height:20px;background:#FFD43B;border-radius:50%;top:25%;box-shadow:0 0 12px #FFD43B' }),
),
),
}
@ -57,7 +67,7 @@ export function heroGradient(kind: WeatherKind): string {
nuageux: 'linear-gradient(145deg,#2D86ED 0%,#57B7FF 50%,#89D0FF 100%)',
pluie: 'linear-gradient(145deg,#092E64 0%,#14589B 50%,#1E6FD4 100%)',
orage: 'linear-gradient(145deg,#152758 0%,#291B69 50%,#3D2B8A 100%)',
tempete: 'radial-gradient(circle at 50% 50%,#FBAE45 0 5%,#F04464 6% 12%,#7E2BD5 13% 21%,#11194B 22% 36%,#F04464 37% 43%,#11194B 44%)',
tempete: 'linear-gradient(145deg,#1a1040 0%,#2d1b69 50%,#4c1d95 100%)',
fin_du_monde: 'linear-gradient(#281846,#B33C33 55%,#F59337)',
}
return gradients[kind]