Zoe
b52d9541a3
Some checks failed
Build and Push Docker Image to GHCR / build-and-push (push) Has been cancelled
In this realease, I have further optimized Passport. The css that Passport now uses is entirely handrolled and build via postcss (sadly). Several bugs have also been fixed in this release, as well as a few performance improvements relating to the admin UI.
88 lines
3.6 KiB
Handlebars
88 lines
3.6 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Passport</title>
|
|
<link rel="favicon" href="/favicon.ico" />
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
|
|
href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2" />
|
|
{{{embedFile "assets/styles/main.css"}}}
|
|
</head>
|
|
|
|
<body>
|
|
<main class="hero">
|
|
<div class="glance-container">
|
|
{{#if WeatherData}}
|
|
<div class="weather-data">
|
|
<span>
|
|
{{{WeatherData.Icon}}}
|
|
</span>
|
|
<div class="font-semibold">
|
|
<p class="leading-condensed">{{WeatherData.Temp}}°C</p>
|
|
<p class="leading-condensed">{{WeatherData.Desc}}</p>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
{{#if UptimeData}}
|
|
<div class="uptime-data">
|
|
<svg width="0" height="0" style="display:none">
|
|
<defs>
|
|
<circle id="status-dot" cx="5" cy="5" r="5" />
|
|
</defs>
|
|
</svg>
|
|
{{#each UptimeData}}
|
|
<div>
|
|
<span>
|
|
{{this.FriendlyName}}
|
|
</span>
|
|
<div class="uptime-status">
|
|
<svg viewBox="0 0 10 10">
|
|
<use href="#status-dot"
|
|
class="{{#if (eq this.Status 2)}}text-success{{else}}text-error{{/if}}">
|
|
</use>
|
|
</svg>
|
|
<svg viewBox="0 0 10 10">
|
|
<use href="#status-dot"
|
|
class="{{#if (eq this.Status 2)}}text-success{{else}}text-error{{/if}}">
|
|
</use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<div class="primary-hero-container">
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100">
|
|
<rect width="70" height="47" x="12.1" y="24.8" fill="url(#a)" rx="12"
|
|
transform="rotate(14.6 12.1 24.8)" />
|
|
<path fill="url(#b)" fill-rule="evenodd"
|
|
d="M52.7 13.5a12 12 0 0 0-16.2 5l-3.7 7 35.6 9.3a17 17 0 0 1 12.2 20.7l-5.8 22.3a12 12 0 0 0 12.7-6.2l10.8-20.3a12 12 0 0 0-5-16.2z"
|
|
clip-rule="evenodd" />
|
|
<defs>
|
|
<linearGradient id="a" x1="12.4" x2="82.5" y1="44.9" y2="48.3" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#f0389b" />
|
|
<stop offset="1" stop-color="#eee740" />
|
|
</linearGradient>
|
|
<linearGradient id="b" x1="33.9" x2="94.2" y1="25.7" y2="61.6" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#aa38f0" />
|
|
<stop offset="1" stop-color="#ee406a" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<h1>Passport</h1>
|
|
</div>
|
|
<form action="{{ SearchProviderURL }}" method="GET">
|
|
<input name="{{ SearchParam }}" aria-label="Search bar" placeholder="Search..." />
|
|
</form>
|
|
</div>
|
|
</main>
|
|
{{> 'partials/category-grid' }}
|
|
</body>
|
|
|
|
{{{devContent}}}
|
|
|
|
</html> |