105 lines
4.4 KiB
HTML
105 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="Look up flight routes, status, and times by airline and flight number." />
|
|
<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="manifest" href="manifest.json" />
|
|
<link rel="apple-touch-icon" href="icon-192.png" />
|
|
<title>Flight Lookup</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="bg-grid" aria-hidden="true"></div>
|
|
<div class="bg-glow bg-glow-1" aria-hidden="true"></div>
|
|
<div class="bg-glow bg-glow-2" aria-hidden="true"></div>
|
|
|
|
<header class="site-header">
|
|
<div class="header-inner">
|
|
<div class="brand">
|
|
<div class="brand-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1>Flight Lookup</h1>
|
|
<p class="subtitle">Enter an airline and flight number to see its route.</p>
|
|
</div>
|
|
</div>
|
|
<div class="header-controls">
|
|
<label class="lang-select">
|
|
<span class="sr-only" for="lang">Language</span>
|
|
<select id="lang" aria-label="Language">
|
|
<option value="en">EN</option>
|
|
<option value="fr">FR</option>
|
|
<option value="de">DE</option>
|
|
<option value="ja">JA</option>
|
|
</select>
|
|
</label>
|
|
<button id="theme-toggle" class="theme-toggle" type="button" title="Toggle theme" aria-label="Toggle theme">
|
|
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<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>
|
|
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<form id="lookup-form" class="lookup-form" autocomplete="off">
|
|
<div class="field field-airline">
|
|
<label for="airline">Airline</label>
|
|
<div class="input-wrap">
|
|
<input
|
|
id="airline"
|
|
type="text"
|
|
placeholder="e.g. American, BA, Lufthansa…"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
/>
|
|
<div id="airline-suggestions" class="suggestions hidden"></div>
|
|
</div>
|
|
</div>
|
|
<div class="field field-flight">
|
|
<label for="flight-number">Flight number</label>
|
|
<input
|
|
id="flight-number"
|
|
type="text"
|
|
inputmode="numeric"
|
|
placeholder="e.g. 100"
|
|
autocomplete="off"
|
|
maxlength="5"
|
|
/>
|
|
</div>
|
|
<button type="submit" class="btn-primary">
|
|
<span class="btn-text">Look up flight</span>
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
|
|
<div id="result" class="result hidden" aria-live="polite"></div>
|
|
|
|
<section id="history-section" class="history hidden">
|
|
<h2>Recent lookups</h2>
|
|
<ul id="history-list" class="history-list"></ul>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<span>Mock data · no real flight info</span>
|
|
</footer>
|
|
|
|
<script src="data.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|