67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
<!doctype html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Atut — wyszukiwarka filtrów</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<main class="shell">
|
||
<header class="hero">
|
||
<div>
|
||
<p class="eyebrow">KATALOG CZĘŚCI</p>
|
||
<h1>Wyszukiwarka filtrów</h1>
|
||
<p class="intro">Znajdź filtry dla konkretnej maszyny albo sprawdź, do jakich maszyn pasuje dany filtr.</p>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="status-card">
|
||
<div class="status-dot" id="statusDot"></div>
|
||
<div>
|
||
<strong id="statusTitle">Wczytywanie bazy…</strong>
|
||
<span id="statusText">Przygotowuję dane z pliku atut_baza.csv</span>
|
||
</div>
|
||
<div class="stats" id="stats"></div>
|
||
</section>
|
||
|
||
<nav class="tabs" aria-label="Tryb wyszukiwania">
|
||
<button class="tab active" data-mode="machine">Szukaj maszyny</button>
|
||
<button class="tab" data-mode="filter">Szukaj filtra</button>
|
||
</nav>
|
||
|
||
<section class="search-panel">
|
||
<label for="searchInput" id="searchLabel">Model, typ lub silnik maszyny</label>
|
||
<div class="search-box">
|
||
<span aria-hidden="true">⌕</span>
|
||
<input id="searchInput" type="search" autocomplete="off" placeholder="np. QES 20, AMMANN albo KUBOTA">
|
||
<button id="clearButton" class="clear" type="button" aria-label="Wyczyść wyszukiwanie">×</button>
|
||
</div>
|
||
<div id="suggestions" class="suggestions" role="listbox" aria-label="Podpowiedzi wyszukiwania"></div>
|
||
<div class="hint" id="searchHint">Wpisz minimum 3 znaki. Wyniki aktualizują się automatycznie.</div>
|
||
</section>
|
||
|
||
<section class="results-header">
|
||
<h2 id="resultsTitle">Ostatnio dodane maszyny</h2>
|
||
<span id="resultCount"></span>
|
||
</section>
|
||
<section id="results" class="results" aria-live="polite"></section>
|
||
</main>
|
||
<template id="machineTemplate">
|
||
<article class="machine-card">
|
||
<div class="card-top">
|
||
<div>
|
||
<p class="card-kicker"></p>
|
||
<h3 class="machine-name"></h3>
|
||
</div>
|
||
<span class="year"></span>
|
||
</div>
|
||
<p class="engine"></p>
|
||
<div class="filter-grid"></div>
|
||
<p class="source"></p>
|
||
</article>
|
||
</template>
|
||
<script src="app.js?v=3"></script>
|
||
</body>
|
||
</html>
|