adaptive-multi-protocol-gateway/sites/ampgateway-online/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AMPGateway</title>
    <meta
      name="description"
      content="Visual guide for Adaptive Multi-Protocol Gateway deployments, transports, and example network topologies."
    >
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="stylesheet" href="styles.css">
    <script defer src="app.js"></script>
  </head>
  <body>
    <a class="skip-link" href="#content">Skip to content</a>
    <header class="site-header" aria-label="AMPGateway header">
      <a class="brand" href="#top" aria-label="AMPGateway home">
        <span class="brand-mark" aria-hidden="true"></span>
        <span>AMPGateway</span>
      </a>
      <nav class="top-nav" aria-label="Primary">
        <a href="#live-map">Maps</a>
        <a href="#topologies">Topologies</a>
        <a href="#domains">Domains</a>
        <a href="#flow">Flow</a>
        <a href="#docs">Spec</a>
      </nav>
    </header>

    <main id="content">
      <section id="top" class="hero" aria-labelledby="hero-title">
        <canvas id="topologyCanvas" aria-hidden="true"></canvas>
        <div class="hero-inner">
          <p class="eyebrow">Adaptive Multi-Protocol Gateway</p>
          <h1 id="hero-title">AMPGateway</h1>
          <p class="hero-copy">
            One site source, many transport outputs, one staged deploy spine from package
            install to published health checks.
          </p>
          <p class="signal-line">
            publish over
            <span id="signalWord" class="signal-word">clearnet</span>
            without losing the map.
          </p>
          <div class="hero-actions" aria-label="Primary sections">
            <a class="button primary" href="#live-map">Open the map</a>
            <a class="button secondary" href="#domains">See example domains</a>
          </div>
        </div>
        <div class="topology-panel" aria-label="Topology modes">
          <div class="mode-label">Topology</div>
          <div class="segmented" role="group" aria-label="Topology selection">
            <button class="mode-button active" type="button" data-topology="vps">VPS</button>
            <button class="mode-button" type="button" data-topology="router">Router</button>
            <button class="mode-button" type="button" data-topology="phone">Phone</button>
            <button class="mode-button" type="button" data-topology="browser">Browser</button>
          </div>
          <p id="topologyCaption" class="topology-caption" aria-live="polite">
            A VPS can publish clearnet, Tor, I2P, Gemini, and Reticulum outputs from one AMPG plan.
          </p>
        </div>
      </section>

      <section id="live-map" class="section live-map-section" aria-labelledby="live-map-title">
        <div class="section-heading">
          <p class="eyebrow">Topology Theater</p>
          <h2 id="live-map-title">Animated maps.</h2>
          <p>
            Deployment maps and protocol maps share one visual language: moving routes,
            clear nodes, and transport-specific paths.
          </p>
        </div>
        <div class="map-stack">
          <article class="map-stage" aria-labelledby="deployment-map-title">
            <div class="map-stage-heading">
              <div>
                <p class="eyebrow">View</p>
                <h3 id="deployment-map-title">Deployment shape</h3>
              </div>
              <p>VPS, router, phone, and browser validation views show where AMPG sits in the stack.</p>
            </div>
            <div class="map-theater" aria-label="Interactive deployment topology map">
              <canvas id="cleanTopologyCanvas" aria-hidden="true"></canvas>
              <div class="map-theater-controls">
                <div class="mode-label">View</div>
                <div class="segmented" role="group" aria-label="Deployment topology selection">
                  <button class="mode-button active" type="button" data-clean-topology="vps">VPS</button>
                  <button class="mode-button" type="button" data-clean-topology="router">Router</button>
                  <button class="mode-button" type="button" data-clean-topology="phone">Phone</button>
                  <button class="mode-button" type="button" data-clean-topology="browser">Browser</button>
                </div>
                <p id="cleanTopologyCaption" class="topology-caption" aria-live="polite">
                  A VPS can publish clearnet, Tor, I2P, Gemini, and Reticulum outputs from one AMPG plan.
                </p>
              </div>
            </div>
          </article>
          <article class="map-stage" aria-labelledby="protocol-map-title">
            <div class="map-stage-heading">
              <div>
                <p class="eyebrow">Transport</p>
                <h3 id="protocol-map-title">Protocol flow</h3>
              </div>
              <p>Each transport gets its own animated path instead of a static comparison table.</p>
            </div>
            <div class="map-theater" aria-label="Interactive protocol flow map">
              <canvas id="protocolTopologyCanvas" aria-hidden="true"></canvas>
              <div class="map-theater-controls protocol-controls">
                <div class="mode-label">Transport</div>
                <div class="segmented protocol-segmented" role="group" aria-label="Protocol flow selection">
                  <button class="mode-button active" type="button" data-protocol-topology="clearnet">Clearnet</button>
                  <button class="mode-button" type="button" data-protocol-topology="tor">Tor</button>
                  <button class="mode-button" type="button" data-protocol-topology="i2p">I2P</button>
                  <button class="mode-button" type="button" data-protocol-topology="gemini">Gemini</button>
                  <button class="mode-button" type="button" data-protocol-topology="reticulum">Reticulum</button>
                  <button class="mode-button" type="button" data-protocol-topology="ipfs">IPFS</button>
                </div>
                <p id="protocolTopologyCaption" class="topology-caption" aria-live="polite">
                  Clearnet requests resolve DNS, reach HTTPS ingress, and read AMPG clearnet output.
                </p>
              </div>
            </div>
          </article>
        </div>
      </section>

      <section id="topologies" class="section split" aria-labelledby="topologies-title">
        <div>
          <p class="eyebrow">Network topologies</p>
          <h2 id="topologies-title">Deploy from a clean VPS, a laptop behind a router, or an old phone.</h2>
        </div>
        <div class="topology-grid">
          <article>
            <h3>Full VPS</h3>
            <p>
              <code>ampgateway.site</code> is the target for a full public example with
              clearnet, Tor, I2P, Gemini, and Reticulum routes managed from one deploy plan.
            </p>
          </article>
          <article>
            <h3>Behind router</h3>
            <p>
              <code>ampgateway.website</code> is the target for a home or lab deployment
              that shows Dynamic DNS, router constraints, and transports that avoid
              inbound ports.
            </p>
          </article>
          <article>
            <h3>Mobile server</h3>
            <p>
              Android and Termux can run user-space daemons for small static sites,
              demos, and transport experiments on hardware that would otherwise sit idle.
            </p>
          </article>
          <article>
            <h3>Single transport</h3>
            <p>
              AMPG can deploy only Tor, only I2P, only Gemini, or a selected subset when
              the operator wants a narrow surface.
            </p>
          </article>
        </div>
      </section>

      <section id="domains" class="section domain-section" aria-labelledby="domains-title">
        <div class="section-heading">
          <p class="eyebrow">Example domains</p>
          <h2 id="domains-title">Three public names, three jobs.</h2>
        </div>
        <div class="domain-grid">
          <article class="domain-card featured">
            <p class="domain-label">Visual hub</p>
            <h3>ampgateway.online</h3>
            <p>
              Public explanation site with interactive topology views, deployment flow,
              and links into the clean docs.
            </p>
            <a href="https://ampgateway.online">ampgateway.online</a>
          </article>
          <article class="domain-card">
            <p class="domain-label">VPS example</p>
            <h3>ampgateway.site</h3>
            <p>
              Planned all-transport reference deployment on a normal server, useful for
              showing the complete package, state, supervisor, start, address, and health path.
            </p>
            <a href="https://ampgateway.site">ampgateway.site</a>
          </article>
          <article class="domain-card">
            <p class="domain-label">Behind-router example</p>
            <h3>ampgateway.website</h3>
            <p>
              Planned home-network reference deployment for Dynamic DNS, port-forwarding
              choices, and transports that do not need clearnet inbound reachability.
            </p>
            <a href="https://ampgateway.website">ampgateway.website</a>
          </article>
        </div>
      </section>

      <section id="flow" class="section flow-section" aria-labelledby="flow-title">
        <div class="section-heading">
          <p class="eyebrow">Deploy spine</p>
          <h2 id="flow-title">Narrow stages, visible state, reversible thinking.</h2>
        </div>
        <ol class="flow-list">
          <li><span>Build</span><p>Generate clearnet, privacy HTML, Gemtext, and other selected outputs.</p></li>
          <li><span>Packages</span><p>Install selected daemon packages with allowlisted platform commands.</p></li>
          <li><span>State</span><p>Copy approved generated config into AMPG-owned state.</p></li>
          <li><span>Supervisor</span><p>Install AMPG-named service files after config exists.</p></li>
          <li><span>Start</span><p>Start AMPG-owned services with structured platform commands.</p></li>
          <li><span>Addresses</span><p>Capture daemon-written onion, I2P, or other public identities.</p></li>
          <li><span>Health</span><p>Verify published fixture URLs through the selected transport profiles.</p></li>
        </ol>
      </section>

      <section id="docs" class="section docs-section" aria-labelledby="docs-title">
        <div>
          <p class="eyebrow">Public docs</p>
          <h2 id="docs-title">Source, docs, and websites stay public and reproducible.</h2>
          <p>
            AMPG publishes clean public docs, generated references, and website sources
            in GitHub repositories. Private planning and deployment notes stay outside
            the public docs tree.
          </p>
        </div>
        <div class="doc-links">
          <a href="https://github.com/Such-Software/adaptive-multi-protocol-gateway">Gateway, docs, and sites</a>
          <a href="https://github.com/Such-Software/adaptive-multi-protocol-browser">Adaptive browser</a>
          <a href="https://github.com/Such-Software">Such Software GitHub</a>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <p>AMPGateway is the public visual companion for Adaptive Multi-Protocol Gateway.</p>
      <p>Static-first. Transport-aware. Operator-reviewable.</p>
    </footer>
  </body>
</html>