Écran Météo
Écran météo et données surf de l'application Swellr. Présente les conditions en temps réel, les prévisions horaires et les données spécifiques au surf.
01 — Mockups complets
Reproduction fidèle des deux écrans météo dans un phone mockup 280×570 px.
linear-gradient(180deg, #0a2535 → #1a4a5a → #028490)
DIN Alternate Bold 72px · exposant ° en 22px
Letterspacing −4px pour effet compact
Pill active fond #028490
Inactif : texte blanc 55% opacité
Fond #F8F8F8 · border-top teal 12% opacité
Onglet actif : couleur teal + label coloré
Courbe SVG CSS-like · zone remplie dégradée
Point actif mis en évidence (Aujourd'hui)
02 — Écran Localisation météo
Écran de recherche et gestion des localisations météo enregistrées.
#ebeff0 · pill plein radius · placeholder gris 400 · icône loupe
Fond blanc · radius 10px · padding 8/10px
Icône 📍 + Nom Manrope SemiBold 9.5px
Mini-graphique SVG 40×16px tendance météo
Flèche chevron gris 300 à droite
Courbe SVG · teal pour bonnes conditions
Gris 700 pour conditions neutres
Stroke 1.5px · linecap round
Fond teal 10% · texte teal · radius full
Icône vague préfixe le nom du spot
03 — Composants spécifiques météo
Chaque composant de l'écran météo présenté séparément pour faciliter l'implémentation.
Temperature Display
Arial Black / Impact fallbackTaille :
72–80pxPoids :
900Letterspacing :
−4pxExposant ° :
28px, padding-top 10px
Onglets temporels — Hier / Aujourd'hui / Demain
Fond #028490
Texte blanc · font-weight 600
Fond transparent
Texte gris 500 · font-weight 500
Fond dark 6% opacité
Border-radius full · padding 4px
Grille horaire — 5 colonnes
Row conditions — Lever soleil · Vent · Houle
Grille détails — 3×2
Graphique prévisions 7 jours
Carte Premium débloqué
linear-gradient(135deg, #028490, #073742)
Fond blanc · texte teal · radius full · poids 700
04 — Données surf spécifiques
Présentation des données propres à la pratique du surf — couleurs et indicateurs selon les intensités.