mirror of
https://github.com/Such-Software/adaptive-multi-protocol-gateway.git
synced 2026-10-17 07:31:32 +02:00
276 lines
13 KiB
HTML
276 lines
13 KiB
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>
|
|
</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>
|
|
<article class="map-stage" aria-labelledby="map-stage-title">
|
|
<div class="map-stage-heading">
|
|
<div>
|
|
<p id="map-stage-eyebrow" class="eyebrow">View</p>
|
|
<h3 id="map-stage-title">Deployment shape</h3>
|
|
</div>
|
|
<p id="map-stage-description">
|
|
VPS, router, phone, and browser validation views show where AMPG sits in the stack.
|
|
</p>
|
|
</div>
|
|
<div class="map-theater" aria-label="Interactive topology and protocol map">
|
|
<canvas id="cleanTopologyCanvas" class="map-canvas active" aria-hidden="true"></canvas>
|
|
<canvas id="protocolTopologyCanvas" class="map-canvas" aria-hidden="true"></canvas>
|
|
<div class="map-tabs" role="tablist" aria-label="Map mode">
|
|
<button
|
|
id="deployment-map-tab"
|
|
class="map-tab active"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="true"
|
|
aria-controls="deployment-map-controls"
|
|
data-map-mode="deployment"
|
|
data-map-title="Deployment shape"
|
|
data-map-eyebrow="View"
|
|
data-map-description="VPS, router, phone, and browser validation views show where AMPG sits in the stack."
|
|
>
|
|
Deployment shape
|
|
</button>
|
|
<button
|
|
id="protocol-map-tab"
|
|
class="map-tab"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="false"
|
|
aria-controls="protocol-map-controls"
|
|
data-map-mode="protocol"
|
|
data-map-title="Protocol flow"
|
|
data-map-eyebrow="Transport"
|
|
data-map-description="Transport maps show the real network shape: discovery, routing, service endpoints, and AMPG output."
|
|
>
|
|
Protocol flow
|
|
</button>
|
|
</div>
|
|
<div class="map-theater-controls">
|
|
<div
|
|
id="deployment-map-controls"
|
|
class="map-control-panel active"
|
|
role="tabpanel"
|
|
aria-labelledby="deployment-map-tab"
|
|
data-map-controls="deployment"
|
|
>
|
|
<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 shape starts with one source tree, renders transport outputs, then hands them
|
|
to service-specific daemons on the host.
|
|
</p>
|
|
</div>
|
|
<div
|
|
id="protocol-map-controls"
|
|
class="map-control-panel"
|
|
role="tabpanel"
|
|
aria-labelledby="protocol-map-tab"
|
|
data-map-controls="protocol"
|
|
hidden
|
|
>
|
|
<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 splits into a DNS discovery path and an HTTPS request path before the web
|
|
server reads AMPG output.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</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>
|
|
<div class="transport-links" aria-label="ampgateway.online transport links">
|
|
<a class="transport-link" href="https://ampgateway.online/">Clearnet</a>
|
|
<a class="transport-link" href="http://bn5uppe4zrop2ljsmjtoxtc4bhzs42kj4c6zvme565gz6x6l32ico3id.onion/">Tor onion</a>
|
|
<a class="transport-link" href="http://veyotzzzjal5acfkjsoeuzvt45s3hynr55rmrt6hotwcdlwmbfia.b32.i2p/">I2P b32</a>
|
|
</div>
|
|
</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>
|
|
<div class="transport-links" aria-label="ampgateway.site transport links">
|
|
<a class="transport-link" href="https://ampgateway.site/">Clearnet</a>
|
|
<a class="transport-link" href="http://fy2zosxp4oqqcacxcegvwshtmsiiyztnwoinbm46yoig4o3kveidotyd.onion/">Tor onion</a>
|
|
<a class="transport-link" href="http://ipahplmdbdwa23wpslqfylghlbqdlmsh23cj64fsvbp3lftxozka.b32.i2p/">I2P b32</a>
|
|
</div>
|
|
</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>
|
|
<p>Developed and deployed here by <a href="https://such.software">Such Software</a>.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|