68 lines
2.7 KiB
HTML
68 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Weltze.it — Alle Zeitzonen im Blick</title>
|
||
<meta name="theme-color" content="#0f172a">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png">
|
||
<link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png">
|
||
<link rel="apple-touch-icon" href="icons/icon-192.png">
|
||
<script defer src="https://umami.due.ren/script.js" data-website-id="4692d3ad-c36a-4fb9-a7f0-182a8fe72a0b"></script>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<div class="brand">
|
||
<h1>weltze.it</h1>
|
||
<p>Alle Zeitzonen auf den ersten Blick.</p>
|
||
</div>
|
||
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Dunklen Modus umschalten">
|
||
<span class="theme-toggle-icon" aria-hidden="true">☾</span>
|
||
<span class="theme-toggle-label">Dunkler Modus</span>
|
||
</button>
|
||
<div class="local-time">
|
||
<h2>Deine aktuelle Zeit</h2>
|
||
<div id="local-time" class="time-display">--:--</div>
|
||
<div id="local-date" class="date-display"></div>
|
||
<div id="local-zone" class="zone-display"></div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="layout">
|
||
<section class="search-panel">
|
||
<h3>Finde eine Stadt oder Zeitzone</h3>
|
||
<label for="search-input" class="visually-hidden">Suche Stadt, Land oder Zeitzone</label>
|
||
<input id="search-input" class="search-input" type="search" placeholder="Suche nach Städten, Ländern oder Zeitzonen…" autocomplete="off">
|
||
<div id="search-results" class="search-results"></div>
|
||
<div class="tips">
|
||
<strong>Tipp:</strong> Füge mehrere Orte hinzu, um Abweichungen direkt zu vergleichen.
|
||
</div>
|
||
</section>
|
||
|
||
<section class="comparisons">
|
||
<header class="comparisons-header">
|
||
<h3>Ausgewählte Orte</h3>
|
||
<button id="reset-button" class="reset-button" type="button">Nur lokalen Ort behalten</button>
|
||
</header>
|
||
<div class="table-headings">
|
||
<div>Ort</div>
|
||
<div>Aktuelle Zeit</div>
|
||
<div>Abweichung zur lokalen Zeit</div>
|
||
</div>
|
||
<ul id="selection-list" class="selection-list"></ul>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p><a href="https://git.due.ren/andreas/weltze.it">Ein Open‑Source‑Projekt</a> von <a href="https://andreas.due.ren">Andreas Düren</a></p>
|
||
</footer>
|
||
|
||
<script src="zones.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|