index.html

<!doctype html>
<html lang="en" data-theme="dark">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			name="description"
			content="Precise IANA timezone resolution and conversion. Works fully offline."
		/>
		<meta name="theme-color" content="#7c50a8" />
		<title>TZ-Convert</title>
		<link
			rel="icon"
			type="image/x-icon"
			href="https://ash1421.com/assets/img/favicon.ico"
		/>
		<link rel="stylesheet" href="assets/css/main.css" />
		<link rel="stylesheet" href="assets/css/components.css" />
		<script>
			(function () {
				const t = localStorage.getItem("tzc-theme") || "dark";
				document.documentElement.setAttribute("data-theme", t);
			})();
		</script>
	</head>
	<body>
		<header id="site-header">
			<div class="header-left">
				<img
					src="https://ash1421.com/assets/img/favicon.ico"
					alt=""
					class="header-logo"
					aria-hidden="true"
				/>
				<span class="header-title">TZ-Convert</span>
			</div>
			<div class="header-right">
				<!-- <button
					class="format-toggle"
					id="format-toggle"
					aria-label="Toggle 12 / 24 hour format"
					title="Toggle time format"
				>
					<span id="format-label">24h</span>
				</button> -->
				<button
					class="theme-toggle"
					id="theme-toggle"
					aria-label="Toggle light / dark mode"
					title="Toggle theme"
				>
					<svg
						class="icon-moon"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
						aria-hidden="true"
					>
						<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
					</svg>
					<svg
						class="icon-sun"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
						aria-hidden="true"
					>
						<circle cx="12" cy="12" r="5" />
						<line x1="12" y1="1" x2="12" y2="3" />
						<line x1="12" y1="21" x2="12" y2="23" />
						<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
						<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
						<line x1="1" y1="12" x2="3" y2="12" />
						<line x1="21" y1="12" x2="23" y2="12" />
						<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
						<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
					</svg>
				</button>
				<span id="live-clock" aria-live="polite"></span>
			</div>
		</header>

		<nav id="tab-nav" aria-label="Sections">
			<button class="tab-btn active" data-tab="converter">Converter</button>
			<button class="tab-btn" data-tab="resolver">Resolver</button>
			<button class="tab-btn" data-tab="world">World Clocks</button>
			<button class="tab-btn" data-tab="zones">All Timezones</button>
		</nav>

		<main id="content">
			<section id="tab-converter" class="panel active">
				<div class="card">
					<h2 class="card-title">Convert Time Between Zones</h2>
					<p class="card-sub">
						DST handled automatically via the browser's built-in IANA database.
					</p>

					<div class="tz-row">
						<div class="tz-col">
							<label for="from-tz">FROM TIMEZONE</label>
							<input
								id="from-tz"
								type="text"
								placeholder="e.g. UTC, America/Denver, PST"
								autocomplete="off"
								spellcheck="false"
							/>
							<div class="tz-suggest" id="from-suggest" hidden></div>
						</div>
						<button
							class="btn-swap"
							id="btn-swap"
							aria-label="Swap timezones"
							title="Swap"
						>
							⇄
						</button>
						<div class="tz-col">
							<label for="to-tz">TO TIMEZONE</label>
							<input
								id="to-tz"
								type="text"
								placeholder="e.g. Australia/Sydney, NZST"
								autocomplete="off"
								spellcheck="false"
							/>
							<div class="tz-suggest" id="to-suggest" hidden></div>
						</div>
					</div>

					<div class="dt-row">
						<div class="dt-col">
							<label for="dt-input">DATE &amp; TIME (YYYY-MM-DD HH:MM)</label>
							<div class="input-addon-wrap">
								<input
									id="dt-input"
									type="text"
									placeholder="e.g. 2026-06-22 14:30"
									autocomplete="off"
									spellcheck="false"
								/>
								<button
									class="btn-input-addon"
									id="btn-datepicker"
									aria-label="Open date picker"
									title="Pick date and time"
								>
									<!-- <svg
										viewBox="0 0 20 20"
										fill="none"
										stroke="currentColor"
										stroke-width="1.6"
										stroke-linecap="round"
										stroke-linejoin="round"
									>
										<rect x="2" y="3" width="16" height="15" rx="2" />
										<path d="M2 8h16M6 1v4M14 1v4" />
									</svg> -->
								</button>
								<input
									type="datetime-local"
									id="dt-native-picker"
									tabindex="-1"
									aria-hidden="true"
								/>
							</div>
						</div>
						<div class="dt-actions">
							<button class="btn-ghost" id="btn-now">Use Now</button>
							<button class="btn-accent" id="btn-convert">Convert</button>
						</div>
					</div>

					<div class="result-box" id="conv-result" aria-live="polite">
						Enter a time above and press Convert.
					</div>
				</div>
			</section>

			<section id="tab-resolver" class="panel" hidden>
				<div class="card">
					<h2 class="card-title">Location to IANA Timezone</h2>
					<p class="card-sub">
						Enter a city, state, country, or abbreviation — get back a correct
						IANA timezone string.
					</p>

					<div class="resolve-row">
						<div class="tz-col">
							<input
								id="loc-input"
								type="text"
								placeholder='e.g. "Denver", "Kansas", "PST", "Australia"'
								autocomplete="off"
								spellcheck="false"
							/>
							<div class="tz-suggest" id="loc-suggest" hidden></div>
						</div>
						<button class="btn-accent" id="btn-resolve">Resolve</button>
					</div>

					<div
						class="chip-row"
						id="example-chips"
						aria-label="Quick examples"
					></div>

					<div class="result-box" id="res-result" aria-live="polite">
						Enter a location above to resolve its timezone.
					</div>
				</div>
			</section>

			<section id="tab-world" class="panel" hidden>
				<h2 class="section-title">World Clocks</h2>
				<div class="world-grid" id="world-grid"></div>
			</section>

			<section id="tab-zones" class="panel" hidden>
				<div class="zones-header card">
					<div class="zones-header-top">
						<h2 class="card-title" style="margin-bottom: 0">All Timezones</h2>
						<span id="zones-count" class="zones-count">Loading…</span>
					</div>
					<input
						id="zones-search"
						type="text"
						placeholder="Filter by name, region, or alias…"
						autocomplete="off"
						spellcheck="false"
					/>
				</div>
				<div id="zones-list" class="zones-list" aria-live="polite"></div>
			</section>
		</main>

		<div class="toast" id="toast" aria-live="assertive"></div>

		<footer id="site-footer">
			<span>
				<a
					href="https://github.com/Ash1421/TZ-Convert"
					target="_blank"
					rel="noopener"
				>
					TZ-Convert
				</a>
				by
				<a href="https://github.com/Ash1421" target="_blank" rel="noopener">
					Ash1421
				</a>
			</span>
			<span>GPL v3.0</span>
		</footer>

		<script src="assets/js/data.js"></script>
		<script src="assets/js/resolver.js"></script>
		<script src="assets/js/app.js"></script>
	</body>
</html>