index.html

<!doctype html>
<html lang="en">
<head>
<meta name="color-scheme" content="light dark">
<meta charset="utf-8" />
<title>Thin Search</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; margin: 24px; }
.search-row { max-width:800px; display:flex; gap:8px; align-items:center; }
input[type="text"]{ flex:1; padding:10px; font-size:16px; }
button{ padding:10px 12px; }
.popup { border: 1px solid; z-index: 1000; }
.popup ul { list-style:none; margin:0; padding:0; max-height:240px; overflow:auto; }
.popup li { padding:8px 12px; border-bottom:1px solid #f1f1f1; cursor:pointer; display:flex; justify-content:space-between; }
.popup li.highlight { background: rgba(128,128,128,0.5); }
.hidden { display:none; }
.container { position:relative; max-width:800px; }
</style>
</head>
<body>

<h1><font style="font-weight: 100;">Thin</font> Search</h1>

<div class="container">
  <form id="searchForm" onsubmit="return handleSearch(event);">
    <div class="search-row">
      <input autocomplete="off" name="search" id="q" type="text" placeholder="Type a search or ! to see bangs (e.g. '!a headphones' or 'amazon headphones')"/>
      <button type="submit">Go</button>
      <a style="text-decoration: none; appearance: button; border: 1px; color: #7777;" href="?settings" title="Settings">☰</a>
    </div>
  </form>

  <div id="popup" class="popup hidden" role="listbox" aria-live="polite">
    <ul id="popupList"></ul>
  </div>
</div>

<script src="thinsearch.js"></script>
</body>
</html>