roadmap.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="assets/autopred.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AutoPred: predict with confidence</title>
  <meta name="description" content="AutoPred: Transparent Predictive Modelling." />
  <link rel="stylesheet" href="style.css" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="sloths-page">
  <header class="site-header">
    <div class="container nav-container">
      <div class="logo">
        <a href="index.html" aria-label="AutoPred home">
          <img class="logo-img" src="assets/autopred.svg" alt="AutoPred logo" />
        </a>
        <span class="logo-text">Auto<span>Weave</span></span>
      </div>

      <nav class="main-nav">
        <a class="nav-link" href="index.html" rel="noopener">home</a>

        <details class="nav-dropdown">
          <summary class="nav-link" href="page">technology</summary>
          <div class="nav-dropdown-menu" role="menu" aria-label="AutoPred sections">
            <a class="nav-dropdown-link" href="tech.html#guided" role="menuitem">guided example</a>
            <a class="nav-dropdown-link" href="tech.html#workbench" role="menuitem">interactive workbench</a>
            <a class="nav-dropdown-link" href="tech.html#usecases" role="menuitem">use cases</a>
          </div>
        </details>

        <details class="nav-dropdown">
          <summary class="nav-link active" href="page">roadmap</summary>
          <div class="nav-dropdown-menu" role="menu" aria-label="AutoPred sections">
            <a class="nav-dropdown-link" href="roadmap.html#autoweave" role="menuitem">AutoPred</a>
            <a class="nav-dropdown-link" href="roadmap.html#productsuite" role="menuitem">Products suite</a>
          </div>
        </details>

        <a class="nav-link" href="https://sloxen.com/contact.html" rel="noopener">contact</a>
      </nav>

      <button class="nav-toggle" type="button"
              aria-label="Open menu"
              aria-controls="mobile-nav"
              aria-expanded="false">
        <span></span><span></span><span></span>
      </button>

      <div id="mobile-nav" class="mobile-nav" aria-hidden="true">
        <div class="mobile-nav__top">
          <div class="mobile-nav__brand">Auto<span>Weave</span></div>
          <button class="mobile-nav__close" type="button" aria-label="Close menu">✕</button>
        </div>

        <nav class="mobile-nav__menu" aria-label="Mobile navigation">
          <div class="mobile-nav__cta">
            <a class="mobile-btn mobile-btn--primary" href="tech.html#workbench">Try workbench</a>
          </div>

          <a class="mobile-link" href="index.html" rel="noopener">home</a>

          <details class="mobile-acc" open>
            <summary>technology</summary>
            <a href="tech.html#guided">Guided example</a>
            <a href="tech.html#workbench">Interactive workbench</a>
            <a href="tech.html#usecases">Use cases</a>
          </details>

          <details class="mobile-acc">
            <summary>roadmap</summary>
            <a href="roadmap.html#autoweave">AutoPred</a>
            <a href="roadmap.html#productsuite">Products suite</a>
          </details>

          <a class="mobile-link" href="https://sloxen.com/contact.html" rel="noopener">Contact</a>

          <p class="mobile-nav__privacy-note">
            Static demo site. Backend + accounts will be added later.
          </p>

          <a class="mobile-link" href="privacy.html">Privacy</a>
          <a class="mobile-link" href="terms.html">Terms</a>
        </nav>
      </div>
    </div>
  </header>

  <main>

    <!-- ROADMAP -->
    <section id="autoweave" class="tab-section">
      <div class="container">
        <h1>AutoPred</h1>
        <div class="divider"></div>

        <figure class="figure-half zoomable">
          <img src="assets/roadmap/autoweave_roadmap.drawio.svg" alt="AutoPred development roadmap diagram" loading="lazy" />
          <figcaption>
            Hybrid intelligence integrates automated transformation, contextual merge logic, 
            and human oversight to deliver structured, reproducible data pipelines.
          </figcaption>
        </figure>

        <div class="spacer-lg"></div>
        <div class="about-quote">
          <p class="quote-lead">
            Real-world organisations operate with fragmented, inconsistent data.
          </p>
          <p class="quote-body">
            We apply <span class="emphasis">hybrid intelligence</span> — combining automated transformation, structured merge logic, 
            domain context, and human checkpoints — to turn operational data into reliable, analysis-ready outputs.
          </p>
        </div>
        <div class="spacer-xl"></div>

        <p>
          The result is a transparent, repeatable data pipeline that supports confident decisions without relying on opaque automation.
        </p>
      </div>
    </section>

    <!-- PRODUCT -->
    <section id="productsuite" class="tab-section">
      <div class="container">
        <h1>Products suite</h1>
        <div class="divider"></div>

        <figure class="figure-half zoomable">
          <img src="assets/products/suite.drawio.svg" alt="Sloxen® product suite architecture diagram" loading="lazy" />
          <figcaption>
            An integrated product ecosystem where operational data capture, 
            structured transformation, and decision support tools work together as a scalable platform.
          </figcaption>
        </figure>

        <div class="sub-divider"></div>

        <p>
          <a href="https://autotrac.sloxen.com" target="_blank" rel="noopener">AutoTrac</a> is a portable application that helps freelancers and small teams understand where their time and income actually go.
        </p>

         <p>
          <a href="https://autoweave.sloxen.com" target="_blank" rel="noopener">AutoPred</a> is a web application that helps small businesses bring scattered operational data together and prepare it for reliable analysis.
        </p>

        <p>
          <a href="https://autored.sloxen.com" target="_blank" rel="noopener">AutoPred</a> is a web application that enables individuals and small teams to interpret their historical data and plan ahead with greater confidence.
        </p>

        <p>
          <a href="https://autovisuals.sloxen.com" target="_blank" rel="noopener">AutoVisuals</a> is a pipeline that helps creators and teams produce consistent, high-quality visual assets at scale.
        </p>
        <div class="sub-divider"></div>
        <p>
          Find the full list of products and details at <a href="https://sloxen.com/products.html" target="_blank" rel="noopener">Sloxen® Products Hub</a>
        </p>
      </div>
    </section>

  <!-- Footer injection -->
  <div id="site-footer"></div>

  <script>
    fetch("footer.html")
      .then(res => res.text())
      .then(html => {
        document.getElementById("site-footer").innerHTML = html;
        const yearEl = document.getElementById("year");
        if (yearEl) yearEl.textContent = new Date().getFullYear();
      });
  </script>

  <!-- Mobile nav script -->
  <script>
    const toggle = document.querySelector(".nav-toggle");
    const mobileNav = document.getElementById("mobile-nav");
    const closeBtn = document.querySelector(".mobile-nav__close");

    function openNav(){
      mobileNav.classList.add("is-open");
      mobileNav.setAttribute("aria-hidden", "false");
      toggle?.setAttribute("aria-expanded", "true");
      document.body.classList.add("nav-open");
    }

    function closeNav(){
      mobileNav.classList.remove("is-open");
      mobileNav.setAttribute("aria-hidden", "true");
      toggle?.setAttribute("aria-expanded", "false");
      document.body.classList.remove("nav-open");
    }

    toggle?.addEventListener("click", (e) => {
      e.stopPropagation();
      openNav();
    });

    closeBtn?.addEventListener("click", closeNav);

    mobileNav?.querySelectorAll("a").forEach(a => a.addEventListener("click", closeNav));

    document.addEventListener("keydown", (e) => {
      if(e.key === "Escape") closeNav();
    });

    document.addEventListener("click", (e) => {
      if (!mobileNav.classList.contains("is-open")) return;

      const target = e.target;
      if (!(target instanceof Node)) return;

      const clickedInsidePanel = mobileNav.contains(target);
      const clickedToggle = toggle && toggle.contains(target);

      if (!clickedInsidePanel && !clickedToggle) closeNav();
    });
  </script>

  <!-- Keep your existing AutoPred CSV demo logic -->
  <script src="./script.js"></script>
</body>
</html>