index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Basic Tools — simple, clean everyday calculators</title>
  <meta name="description" content="Basic Tools is a small collection of clean, fast, no-nonsense calculators that update as you type." />
  <link rel="stylesheet" href="assets/css/main.css" />
  <!-- Apply saved theme before paint to avoid a flash -->
  <script>
    (function () {
      try {
        var t = localStorage.getItem("basic-tools-theme");
        if (t) document.documentElement.setAttribute("data-theme", t);
      } catch (e) {}
    })();
  </script>
</head>
<body>
  <header class="site-header">
    <div class="container site-header__inner">
      <a class="brand" href="index.html">
        <span class="brand__mark">B</span>
        <span>Basic&nbsp;Tools</span>
      </a>
      <nav>
        <select class="nav-select" id="tool-nav" aria-label="Navigate to tool">
          <option value="" selected>Home</option>
          <option value="tools/mortgage-calculator/">Mortgage Calculator</option>
          <option value="tools/income-tax-calculator/">Income Tax Calculator</option>
          <option value="tools/retirement-calculator/">Retirement Calculator</option>
        </select>
        <button class="theme-toggle" type="button" title="Toggle theme">
          <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span>
        </button>
      </nav>
    </div>
  </header>

  <main>
    <div class="container">
      <h1 class="page-title">Simple tools for everyday tasks</h1>
      <p class="page-subtitle">
        Clean, fast calculators that update live as you type — no buttons, no waiting.
      </p>

      <section class="tool-grid" aria-label="Available tools">
        <a class="card tool-card" href="tools/mortgage-calculator/">
          <span class="tool-card__icon tool-card__icon--primary">🏠</span>
          <h3>Mortgage Calculator</h3>
        </a>

        <a class="card tool-card" href="tools/income-tax-calculator/">
          <span class="tool-card__icon tool-card__icon--secondary">💷</span>
          <h3>UK Income Tax Calculator</h3>
        </a>

        <a class="card tool-card" href="tools/retirement-calculator/">
          <span class="tool-card__icon tool-card__icon--tertiary">📈</span>
          <h3>Retirement Calculator</h3>
        </a>
      </section>
    </div>
  </main>

  <footer class="site-footer">
    <div class="container">
      <span>Basic Tools — built with plain HTML, CSS &amp; JavaScript.</span>
      <span>Estimates only. Always double-check important figures.</span>
    </div>
  </footer>

  <script src="assets/js/theme.js"></script>
</body>
</html>