brian/weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

background now updates to reflect weather

Browse Source
This commit is contained in:
Brian
2026-01-09 15:53:39 -07:00
parent a086d749d1
commit b1aa29e877
2 changed files with 100 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/pages/Weather.vue
View File

@@ -44,12 +44,18 @@ interface Location {
name: string;
}
interface Background {
imageUrl: string | null;
licenseHtml: string | null;
}
const props = defineProps<{
current: CurrentWeather | null;
hourlyForecast: HourlyForecast[];
weeklyForecast: WeeklyForecast[];
location: Location;
reportedAt: string | null;
background: Background;
}>();
const weatherIcons: Record<string, string> = {
@@ -88,9 +94,16 @@ function parseWindSpeed(windSpeed: string | null): number {
<Head title="Weather" />
<div class="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
<!-- Background atmosphere effect -->
<div class="absolute inset-0 bg-[url('/images/clouds.jpg')] bg-cover bg-center opacity-20"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-slate-900/50 to-slate-900"></div>
<!-- Dynamic background image based on weather -->
<div
v-if="background.imageUrl"
class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000"
:style="{ backgroundImage: `url(${background.imageUrl})` }"
></div>
<!-- Fallback gradient background -->
<div v-else class="absolute inset-0 bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900"></div>
<!-- Overlay for better text readability -->
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/50 to-black/70"></div>
<!-- Main content -->
<div class="relative z-10 mx-auto min-h-screen max-w-6xl p-6 lg:p-8">
@@ -277,5 +290,13 @@ function parseWindSpeed(windSpeed: string | null): number {
Last updated: {{ reportedAt }}
</footer>
</div>
<!-- Image attribution (bottom right corner) -->
<div
v-if="background.licenseHtml"
class="absolute bottom-4 right-4 z-20 max-w-xs rounded-lg bg-black/40 px-3 py-2 text-xs text-white/60 backdrop-blur-sm"
>
<span v-html="background.licenseHtml"></span>
</div>
</div>
</template>