index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Free Online Tools — Calculators &amp; Converters | DevLoadout Tools</title>
<meta name="description" content="A growing collection of free, private, single-purpose online tools — calculators, converters and planners that run 100% in your browser. No sign-up." />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%230d1117'/><text x='50' y='70' font-size='56' text-anchor='middle' fill='%2346d39a'>&#9874;</text></svg>" />
<style>
  :root{--bg:#0d1117;--panel:#161b22;--border:#2a3340;--txt:#e6edf3;--muted:#8b97a5;--accent:#46d39a}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--txt);font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
  a{color:var(--accent);text-decoration:none}
  .wrap{max-width:860px;margin:0 auto;padding:34px 18px 60px}
  header{text-align:center;margin-bottom:30px}
  .logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--muted);font-size:15px;margin-bottom:14px}
  .logo .dot{width:11px;height:11px;border-radius:3px;background:var(--accent)}
  h1{font-size:30px;margin:0 0 8px}h1 .hl{color:var(--accent)}
  .sub{color:var(--muted);max-width:560px;margin:0 auto;font-size:16px}
  .tools{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
  @media(max-width:620px){.tools{grid-template-columns:1fr}}
  .tool{display:block;background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:18px;transition:.13s}
  .tool:hover{border-color:var(--accent);transform:translateY(-2px)}
  .tool h2{font-size:17px;margin:0 0 6px;color:var(--txt)}
  .tool p{margin:0;color:var(--muted);font-size:14px}
  footer{text-align:center;color:var(--muted);font-size:13px;margin-top:40px;border-top:1px solid var(--border);padding-top:18px}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <div class="logo"><span class="dot"></span>DevLoadout Tools</div>
    <h1>Free <span class="hl">online tools</span> that just work</h1>
    <p class="sub">Single-purpose calculators &amp; converters that run 100% in your browser. No sign-up, no upload, always free.</p>
  </header>

  <div class="tools" id="tools">
    <a class="tool" href="./outdoor-string-light-calculator/">
      <h2>Outdoor String Light Calculator</h2>
      <p>Free outdoor string light calculator. Enter your patio, deck or pergola size and get total feet, strand count, poles, …</p>
    </a>
    <a class="tool" href="./post-hole-concrete-calculator/">
      <h2>Post Hole Concrete Calculator</h2>
      <p>Free post hole concrete calculator. Find out how many bags of concrete per post hole (40, 50, 60, 80 lb) for fence, ma…</p>
    </a>
    <a class="tool" href="./raised-garden-bed-soil-calculator/">
      <h2>Raised Garden Bed Soil Calculator</h2>
      <p>Free raised garden bed soil calculator. Find out how much soil for a raised garden bed in cubic feet, yards &amp; liters, …</p>
    </a>
    <a class="tool" href="./ring-size-converter/">
      <h2>Ring Size Converter mm to US/UK/EU</h2>
      <p>Free ring size converter: enter inside diameter or circumference in mm, or a US, UK, EU or Japan size, and instantly s…</p>
    </a>
    <a class="tool" href="./spaced-repetition-schedule-calculator/">
      <h2>Spaced Repetition Schedule Calculator</h2>
      <p>Free spaced repetition schedule calculator. Enter the date you studied, pick a 1-3-7-14-30 (Leitner) or SM-2 interval,…</p>
    </a>
    <a class="tool" href="./tattoo-healing-timeline-calculator/">
      <h2>Tattoo Healing Timeline Calculator</h2>
      <p>Free tattoo healing timeline calculator. Enter your tattoo date and get personalized calendar dates for when you can s…</p>
    </a>
  </div>

  <footer>Built by <a href="https://github.com/devloadout">DevLoadout</a> &middot; Free &amp; private &middot; more tools added regularly</footer>
</div>
</body>
</html>