filtry_www/index.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?v=4">
</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>

    <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=4"></script>
</body>
</html>