zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: reduce frontend visual effects

Browse Source
This commit is contained in:
zv
2026-06-04 20:10:19 +02:00
parent 9395659f07
commit cdce40e69c
12 changed files with 63 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/globals.css
View File

@@ -12,7 +12,6 @@
--border: 214 20% 82%;
--muted: 215 14% 43%;
--accent: 207 48% 34%;
--accent-foreground: 0 0% 100%;
--warning: 38 58% 42%;
--chart-temperature: 207 48% 36%;
--chart-feels-like: 216 24% 48%;
@@ -22,15 +21,14 @@
.dark {
color-scheme: dark;
--background: 214 37% 9%;
--background: 220 22% 12%;
--foreground: 210 31% 94%;
--surface: 214 33% 13%;
--surface-muted: 215 27% 17%;
--surface-raised: 214 29% 16%;
--border: 214 19% 27%;
--surface: 220 18% 15%;
--surface-muted: 220 15% 18%;
--surface-raised: 220 16% 17%;
--border: 220 12% 30%;
--muted: 214 15% 70%;
--accent: 204 44% 66%;
--accent-foreground: 214 37% 9%;
--accent: 207 34% 64%;
--warning: 39 64% 63%;
--chart-temperature: 204 44% 66%;
--chart-feels-like: 216 22% 73%;
@@ -68,15 +66,15 @@ select {
@layer utilities {
.glass {
@apply border border-border/70 bg-surface/80 shadow-card backdrop-blur-xl dark:bg-surface/75;
@apply border border-border/70 bg-surface shadow-soft;
}
.glass-subtle {
@apply border border-border/60 bg-surface-muted/65 backdrop-blur-xl dark:bg-surface-muted/55;
@apply border border-border/70 bg-surface-muted shadow-soft;
}
.surface-control {
@apply border border-border/70 bg-surface/80 shadow-soft backdrop-blur-xl dark:bg-surface-muted/70;
@apply border border-border/70 bg-surface shadow-soft dark:bg-surface-muted;
}
.section-kicker {

5
app/layout.tsx
View File

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
import Script from "next/script";
import { AppShell } from "@/components/layout/app-shell";
import { Providers } from "@/components/layout/providers";
import { APP_THEME_COLORS } from "@/lib/theme";
import "@/app/globals.css";
const inter = Inter({ subsets: ["latin", "latin-ext"], variable: "--font-inter" });
@@ -36,8 +37,8 @@ export const viewport: Viewport = {
initialScale: 1,
viewportFit: "cover",
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "#eef3f7" },
{ media: "(prefers-color-scheme: dark)", color: "#0e1722" },
{ media: "(prefers-color-scheme: light)", color: APP_THEME_COLORS.light },
{ media: "(prefers-color-scheme: dark)", color: APP_THEME_COLORS.dark },
],
};

11
components/charts/day-forecast-charts.tsx
View File

@@ -2,21 +2,12 @@
import { Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { Card } from "@/components/ui/card";
import { CHART_COLORS } from "@/lib/chart-theme";
import { useI18n } from "@/lib/i18n";
import { formatForecastRainfall, formatForecastTemperature } from "@/lib/forecast-utils";
import type { HourlyForecast } from "@/types/forecast";
const INITIAL_CHART_DIMENSION = { width: 1, height: 1 };
const CHART_COLORS = {
grid: "hsl(var(--border) / 0.65)",
tooltipBorder: "hsl(var(--border) / 0.75)",
tooltipBackground: "hsl(var(--surface-raised) / 0.96)",
tooltipText: "hsl(var(--foreground))",
temperature: "hsl(var(--chart-temperature))",
feelsLike: "hsl(var(--chart-feels-like))",
rainfall: "hsl(var(--chart-rainfall))",
probability: "hsl(var(--chart-probability))",
};
function formatHour(value: string) {
return value.slice(11, 16);

2
components/forecast/day-forecast-modal.tsx
View File

@@ -84,7 +84,7 @@ export function DayForecastModal({
<AnimatePresence>
{day ? (
<motion.div
className="fixed inset-0 z-[90] flex items-center justify-center bg-slate-950/55 p-0 backdrop-blur-sm sm:p-4 lg:p-8"
className="fixed inset-0 z-[90] flex items-center justify-center bg-slate-950/55 p-0 sm:p-4 lg:p-8"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}

4
components/layout/app-shell.tsx
View File

@@ -17,7 +17,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
const { t } = useI18n();
return (
<div className="min-h-screen overflow-x-hidden bg-background">
<header className="sticky top-0 z-40 border-b border-border/70 bg-surface/80 backdrop-blur-xl dark:bg-background/80">
<header className="sticky top-0 z-40 border-b border-border/70 bg-surface">
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
<Link href="/" className="text-2xl font-semibold tracking-[-0.09em] text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
wtr<span className="text-accent">.</span>
@@ -40,7 +40,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
</div>
</header>
<main className="mx-auto max-w-7xl px-4 pb-28 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
<nav aria-label={t("nav.mobile")} className="fixed inset-x-3 bottom-3 z-50 flex justify-around rounded-panel border border-border/70 bg-surface/90 p-1.5 shadow-card backdrop-blur-xl dark:bg-surface/90 md:hidden">
<nav aria-label={t("nav.mobile")} className="fixed inset-x-3 bottom-3 z-50 flex justify-around rounded-panel border border-border/70 bg-surface p-1.5 shadow-card md:hidden">
{NAV_ITEMS.map((item, index) => {
const Icon = icons[index];
const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);

4
components/warnings/dashboard-warnings.tsx
View File

@@ -73,7 +73,7 @@ export function DashboardWarnings() {
return (
<motion.section
aria-label={t("warnings.dashboard.title")}
className="rounded-panel border border-warning/25 bg-warning/10 p-4 shadow-soft backdrop-blur-xl sm:p-5"
className="rounded-panel border border-warning/25 bg-warning/10 p-4 shadow-soft sm:p-5"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.35, ease: "easeOut" }}
@@ -111,7 +111,7 @@ export function DashboardWarnings() {
return (
<article
key={warning.id}
className="rounded-card border border-warning/20 bg-surface/60 px-3.5 py-3"
className="rounded-card border border-warning/20 bg-surface px-3.5 py-3"
>
<p className="text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-warning">
{t(active ? "warnings.dashboard.active" : "warnings.dashboard.upcoming")}

73
components/weather/weather-effects.tsx
View File

@@ -1,95 +1,36 @@
"use client";
import { motion, useReducedMotion } from "framer-motion";
import type { SynopStation, WeatherMood } from "@/types/imgw";
const windLines = Array.from({ length: 7 }, (_, index) => ({
top: `${18 + index * 11}%`,
delay: index * 0.22,
width: 70 + (index % 3) * 34,
}));
const stars = Array.from({ length: 16 }, (_, index) => ({
left: `${(index * 37 + 11) % 96}%`,
top: `${(index * 23 + 8) % 72}%`,
delay: (index % 6) * 0.35,
}));
const rainDrops = Array.from({ length: 22 }, (_, index) => ({
const rainDrops = Array.from({ length: 12 }, (_, index) => ({
left: `${(index * 43 + 7) % 101}%`,
delay: (index % 9) * 0.18,
duration: 0.8 + (index % 4) * 0.14,
duration: 1.1 + (index % 4) * 0.18,
}));
export function WeatherEffects({ station, mood, precipitation10m, thunderstorm = false }: { station: SynopStation; mood: WeatherMood; precipitation10m?: number | null; thunderstorm?: boolean }) {
export function WeatherEffects({ precipitation10m, thunderstorm = false }: { precipitation10m?: number | null; thunderstorm?: boolean }) {
const reduceMotion = useReducedMotion();
const isWindy = (station.windSpeed ?? 0) >= 8;
const isRaining = (precipitation10m ?? 0) > 0;
return (
<div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
{mood === "cloudy" && (
<>
<motion.div
animate={reduceMotion ? undefined : { x: ["-4%", "5%", "-4%"], y: [0, 8, 0], scale: [1, 1.05, 1] }}
transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
className="absolute -left-24 -top-20 h-52 w-[78%] rounded-full bg-slate-100/25 blur-2xl"
/>
<motion.div
animate={reduceMotion ? undefined : { x: ["8%", "-5%", "8%"], y: [0, -6, 0], scale: [1.04, 1, 1.04] }}
transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
className="absolute -right-24 top-0 h-60 w-[82%] rounded-full bg-slate-300/20 blur-2xl"
/>
<div className="absolute inset-x-0 bottom-0 h-44 bg-gradient-to-t from-slate-100/25 via-slate-200/10 to-transparent" />
<div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-slate-950/15 to-transparent" />
</>
)}
{mood === "warm" && (
<motion.div
animate={reduceMotion ? undefined : { scale: [1, 1.08, 1], opacity: [0.4, 0.58, 0.4] }}
transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
className="absolute -right-12 -top-16 size-52 rounded-full bg-amber-200/25 blur-2xl"
/>
)}
{mood === "night" && stars.map((star, index) => (
<motion.span
key={index}
animate={reduceMotion ? undefined : { opacity: [0.2, 0.75, 0.2] }}
transition={{ duration: 2.4, delay: star.delay, repeat: Infinity, ease: "easeInOut" }}
className="absolute size-1 rounded-full bg-white/75"
style={{ left: star.left, top: star.top }}
/>
))}
{isWindy && windLines.map((line, index) => (
<motion.span
key={index}
initial={{ x: "-30%", opacity: 0 }}
animate={reduceMotion ? { opacity: 0.28 } : { x: ["-30%", "135%"], opacity: [0, 0.35, 0] }}
transition={{ duration: 3.4, delay: line.delay, repeat: Infinity, ease: "linear" }}
className="absolute h-px rounded-full bg-white/60"
style={{ top: line.top, width: line.width }}
/>
))}
{isRaining && rainDrops.map((drop, index) => (
<motion.span
key={`rain-${index}`}
initial={{ y: "-12vh", opacity: 0 }}
animate={reduceMotion ? { opacity: 0.36 } : { y: ["-12vh", "115vh"], opacity: [0, 0.55, 0] }}
animate={reduceMotion ? { opacity: 0.18 } : { y: ["-12vh", "115vh"], opacity: [0, 0.22, 0] }}
transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
className="absolute -top-8 h-14 w-px rotate-[8deg] rounded-full bg-gradient-to-b from-transparent via-white/55 to-transparent blur-[0.35px]"
className="absolute -top-8 h-10 w-px rotate-[8deg] rounded-full bg-foreground/35"
style={{ left: drop.left }}
/>
))}
{thunderstorm && (
<motion.div
animate={reduceMotion ? { opacity: 0.12 } : { opacity: [0, 0, 0.34, 0, 0.18, 0] }}
animate={reduceMotion ? { opacity: 0.08 } : { opacity: [0, 0, 0.16, 0, 0.08, 0] }}
transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
className="absolute inset-0 bg-white"
className="absolute inset-0 bg-foreground"
/>
)}
{mood === "cold" && (
<div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-blue-100/20 to-transparent" />
)}
</div>
);
}

28
components/weather/weather-hero.tsx
View File

@@ -12,7 +12,7 @@ import {
formatWind,
getWeatherDescription,
getWeatherMoodFromData,
moodGradient,
moodAccentClass,
} from "@/lib/weather-utils";
import type { SynopStation } from "@/types/imgw";
import type { ImgwCurrentWeather } from "@/types/imgw-current";
@@ -37,6 +37,7 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
rainfall: currentWeather.precipitation10m ?? station.rainfall,
} : station;
const mood = getWeatherMoodFromData(displayedStation);
const moodAccent = moodAccentClass(mood);
const feelsLike = currentWeather?.feelsLike ?? calculateFeelsLike(displayedStation.temperature, displayedStation.humidity, displayedStation.windSpeed);
const metrics = [
{ icon: Droplets, label: t("weather.humidity"), value: formatHumidity(displayedStation.humidity, language) },
@@ -50,13 +51,18 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
initial={{ opacity: 0, y: 18 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55, ease: "easeOut" }}
className={`relative isolate overflow-hidden rounded-panel bg-gradient-to-br ${moodGradient(mood)} px-5 py-6 text-white shadow-card sm:px-8 sm:py-8 lg:px-10`}
className="relative isolate overflow-hidden rounded-panel border border-border/70 bg-surface-raised px-5 py-6 shadow-card sm:px-8 sm:py-8 lg:px-10"
>
<WeatherEffects station={displayedStation} mood={mood} precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
<WeatherEffects precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
<div className="relative z-10">
<div>
<span className="flex items-center gap-1.5 text-sm font-medium text-white/85"><MapPin className="size-4" />{displayedLocationName}</span>
<div className="mt-1.5 space-y-1 text-xs text-white/65">
<div className="flex flex-wrap items-center gap-2">
<span className="flex items-center gap-1.5 text-sm font-medium text-muted"><MapPin className="size-4" />{displayedLocationName}</span>
<span className={`rounded-control border px-2.5 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.14em] ${moodAccent}`}>
{getWeatherDescription(displayedStation, language, currentWeather?.condition)}
</span>
</div>
<div className="mt-2 space-y-1 text-xs text-muted">
<p>{currentWeatherLoading
? t("location.heroHybridLoading", { station: station.name })
: hasFullHybridAnalysis
@@ -67,7 +73,7 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
? t("location.heroStationFallbackWithDistance", { station: station.name, distance: distanceKm ?? 0 })
: t("location.heroStationFallback", { station: station.name })}</p>
{hasFullHybridAnalysis && locationName && <p>{t("location.heroNearestStation", { station: station.name, distance: distanceKm ?? 0 })}</p>}
{hasDistantFallback && <p className="flex items-start gap-1.5 text-amber-100"><AlertTriangle className="mt-0.5 size-3.5 shrink-0" />{t("location.heroDistantFallback")}</p>}
{hasDistantFallback && <p className="flex items-start gap-1.5 text-warning"><AlertTriangle className="mt-0.5 size-3.5 shrink-0" />{t("location.heroDistantFallback")}</p>}
</div>
</div>
<div className="mt-8 flex items-end justify-between gap-3 sm:mt-10">
@@ -76,20 +82,20 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
{formatTemperature(displayedStation.temperature, language)}
</div>
<p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(displayedStation, language, currentWeather?.condition)}</p>
<p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(displayedStation.measuredAt, language)}</p>
<p className="mt-1 text-sm text-muted">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(displayedStation.measuredAt, language)}</p>
</div>
<WeatherIcon mood={mood} condition={currentWeather?.condition} className="mb-4 size-20 text-white/80 sm:size-28" />
<WeatherIcon mood={mood} condition={currentWeather?.condition} className="mb-4 size-20 text-accent sm:size-28" />
</div>
<div className="mt-8 grid grid-cols-2 gap-2.5 sm:mt-10 lg:grid-cols-4">
{metrics.map(({ icon: Icon, label, value }) => (
<div key={label} className="rounded-card border border-white/20 bg-white/10 p-3.5 backdrop-blur-xl">
<div className="flex items-center gap-2 text-xs text-white/70"><Icon className="size-3.5" />{label}</div>
<div key={label} className="rounded-card border border-border/60 bg-surface-muted p-3.5">
<div className="flex items-center gap-2 text-xs text-muted"><Icon className="size-3.5 text-accent" />{label}</div>
<p className="mt-2 text-base font-semibold">{value}</p>
</div>
))}
</div>
{displayedStation.windDirection !== null && (
<p className="mt-4 flex items-center gap-1.5 text-xs text-white/70">
<p className="mt-4 flex items-center gap-1.5 text-xs text-muted">
<Navigation className="size-3.5" style={{ transform: `rotate(${displayedStation.windDirection}deg)` }} />
{t("weather.windDirection")}: {displayedStation.windDirection}°
</p>

10
lib/chart-theme.ts Normal file
View File

@@ -0,0 +1,10 @@
export const CHART_COLORS = {
grid: "hsl(var(--border) / 0.65)",
tooltipBorder: "hsl(var(--border) / 0.75)",
tooltipBackground: "hsl(var(--surface-raised) / 0.98)",
tooltipText: "hsl(var(--foreground))",
temperature: "hsl(var(--chart-temperature))",
feelsLike: "hsl(var(--chart-feels-like))",
rainfall: "hsl(var(--chart-rainfall))",
probability: "hsl(var(--chart-probability))",
} as const;

4
lib/theme.ts Normal file
View File

@@ -0,0 +1,4 @@
export const APP_THEME_COLORS = {
light: "#eef3f7",
dark: "#171d25",
} as const;

14
lib/weather-utils.ts
View File

@@ -184,13 +184,13 @@ export function getWeatherDescription(station: SynopStation, language: Language
return translate(language, "weather.calm");
}
export function moodGradient(mood: WeatherMood) {
export function moodAccentClass(mood: WeatherMood) {
return {
warm: "from-blue-500 via-blue-700 to-slate-900",
cloudy: "from-slate-600 via-slate-700 to-slate-900",
wind: "from-slate-500 via-blue-700 to-slate-900",
cold: "from-blue-300 via-slate-500 to-slate-800",
night: "from-slate-800 via-slate-900 to-slate-950",
mild: "from-blue-500 via-slate-700 to-slate-900",
warm: "border-accent/25 bg-accent/10 text-accent",
cloudy: "border-border/70 bg-surface-muted text-muted",
wind: "border-border/70 bg-surface-muted text-muted",
cold: "border-border/70 bg-surface-muted text-muted",
night: "border-border/70 bg-surface-muted text-muted",
mild: "border-accent/25 bg-accent/10 text-accent",
}[mood];
}

2
tailwind.config.ts
View File

@@ -19,7 +19,6 @@ export default {
border: "hsl(var(--border) / <alpha-value>)",
muted: "hsl(var(--muted) / <alpha-value>)",
accent: "hsl(var(--accent) / <alpha-value>)",
"accent-foreground": "hsl(var(--accent-foreground) / <alpha-value>)",
warning: "hsl(var(--warning) / <alpha-value>)",
},
fontFamily: {
@@ -32,7 +31,6 @@ export default {
},
boxShadow: {
card: "0 16px 42px hsl(215 32% 18% / 0.08)",
glass: "0 16px 42px hsl(215 32% 18% / 0.08)",
soft: "0 10px 28px hsl(215 32% 18% / 0.06)",
},
},