61 lines
2.3 KiB
HTML
61 lines
2.3 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>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<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>Mit ♥ von <a href="https://andreas.due.ren">Andreas Dueren</a> gebaut · Open Source unter der <a href="LICENSE">MIT-Lizenz</a></p>
|
|
</footer>
|
|
|
|
<script src="zones.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|