switch to grid styling and fix watch pattern

This commit is contained in:
Zoe
2025-04-07 19:27:00 +00:00
parent 8eb4355ae3
commit 4d7233f32c
2 changed files with 34 additions and 33 deletions

View File

@@ -1,41 +1,42 @@
<main class="flex justify-center items-center h-screen relative bg-[#0E0A0E]"> <main class="grid grid-rows-3 grid-cols-[1fr] justify-center items-center h-screen bg-[#0E0A0E]">
{{#if WeatherData}} <div class="flex h-full p-2.5 justify-between">
<div class="absolute top-2.5 left-2.5"> <div>
<div class="text-[#BABABA] flex items-center"> {{#if WeatherData}}
<span class="mr-2 flex items-center"> <div class="text-[#BABABA] flex items-center">
{{{WeatherData.Icon}}}
</span>
<div class="font-semibold">
<p>{{WeatherData.Temp}}°C</p>
<p>{{WeatherData.Desc}}</p>
</div>
</div>
</div>
{{/if}}
{{#if UptimeData}}
<div class="absolute top-2.5 right-2.5">
<div class="text-[#BABABA] flex items-end flex-col">
{{!-- loop over UptimeData --}}
{{#each UptimeData}}
<div class="flex items-center">
<span class="mr-2 flex items-center"> <span class="mr-2 flex items-center">
{{{this.FriendlyName}}} {{{WeatherData.Icon}}}
</span> </span>
<div class="relative my-auto"> <div class="font-semibold">
{{#if (eq this.Status 2)}} <p>{{WeatherData.Temp}}°C</p>
<span class="absolute w-2 h-2 rounded-full bg-emerald-400 animate-ping block"></span> <p>{{WeatherData.Desc}}</p>
<span class="relative w-2 h-2 rounded-full bg-emerald-500 block"></span>
{{else}}
<span class="absolute w-2 h-2 rounded-full bg-rose-400 animate-ping block"></span>
<span class="relative w-2 h-2 rounded-full bg-rose-500 block"></span>
{{/if}}
</div> </div>
</div> </div>
{{/each}} {{/if}}
</div>
<div>
{{#if UptimeData}}
<div class="text-[#BABABA] flex items-end flex-col">
{{#each UptimeData}}
<div class="flex items-center">
<span class="mr-2 flex items-center">
{{{this.FriendlyName}}}
</span>
<div class="relative my-auto">
{{#if (eq this.Status 2)}}
<span class="absolute w-2 h-2 rounded-full bg-emerald-400 animate-ping block"></span>
<span class="relative w-2 h-2 rounded-full bg-emerald-500 block"></span>
{{else}}
<span class="absolute w-2 h-2 rounded-full bg-rose-400 animate-ping block"></span>
<span class="relative w-2 h-2 rounded-full bg-rose-500 block"></span>
{{/if}}
</div>
</div>
{{/each}}
</div>
{{/if}}
</div> </div>
</div> </div>
{{/if}} <div class="row-start-2 flex flex-col items-center w-full px-6">
<div class="flex flex-col items-center w-full mx-6">
<div class="flex items-center pb-2.5"> <div class="flex items-center pb-2.5">
<svg class="mr-3 aspect-square w-[clamp(48px,10vw,60px)]" viewBox="0 0 100 100" fill="none" <svg class="mr-3 aspect-square w-[clamp(48px,10vw,60px)]" viewBox="0 0 100 100" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">

View File

@@ -13,5 +13,5 @@
"dev": "go generate; PASSPORT_DEV_MODE=true go run main.go", "dev": "go generate; PASSPORT_DEV_MODE=true go run main.go",
"build": "go generate && go build -tags netgo,prod -o passport" "build": "go generate && go build -tags netgo,prod -o passport"
}, },
"pattern": "**/*.go,views/**/*.hbs,styles/**/*.css,assets/**/*.{svg,png,jpg,jpeg,webp,woff2,ttf,otf,eot,ico,gif,webp}" "pattern": "**/*.go,templates/views/**/*.hbs,styles/**/*.css,assets/**/*.{svg,png,jpg,jpeg,webp,woff2,ttf,otf,eot,ico,gif,webp}"
} }