mirror of
https://github.com/ALLFATHER-BV/wadamesh.git
synced 2026-07-20 00:46:16 +00:00
Kaj SchittecatandClaude Opus 4.8
3ed6f52b08
Propagate the mesh-mark animation (repeater broadcast rings + cyan signal packets on the transport trails) to the flasher page and the standalone wadamesh-mark.svg / wadamesh-lockup.svg. The standalone SVGs embed the CSS inside the file so they animate even when used as <img>. badge.svg (favicon) left static. All collapse to the static mark under prefers-reduced-motion. Add scripts/deploy-site.sh: rsync deploy/site/ to the VPS web root (/srv/wadamesh/site, the apex wadamesh.com origin), env-driven WADAMESH_VPS like release.sh, with --dry-run support. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
101 lines
6.4 KiB
HTML
101 lines
6.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>wadamesh — install</title>
|
|
<link rel="icon" href="https://wadamesh.com/wadamesh-badge.svg">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<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=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
|
|
<script>
|
|
if (location.protocol === 'http:') location.replace(location.href.replace(/^http:/, 'https:'));
|
|
</script>
|
|
<script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
|
|
<style>
|
|
:root{--bg:#fff;--bg2:#f4f6f2;--ink:#15181e;--mut:#5d6770;--line:#e5e8e2;--teal:#15b6a6;--cyan:#19d6c2;--teal-ink:#0e8d80;color-scheme:light}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);
|
|
min-height:100vh;display:flex;flex-direction:column;align-items:center;-webkit-font-smoothing:antialiased}
|
|
body::before{content:"";position:fixed;inset:-25% -10% auto -10%;height:60vh;z-index:-1;
|
|
background:radial-gradient(44vw 36vh at 50% 0%, rgba(25,214,194,.14), transparent 62%)}
|
|
header{text-align:center;padding:56px 20px 6px}
|
|
.logo{width:min(360px,80vw);height:auto;display:block;margin:0 auto;overflow:visible}
|
|
/* animated mesh mark — repeaters broadcast; signal packets ride the trails */
|
|
.wm-flow path{fill:none;stroke:var(--cyan);stroke-width:5.5;stroke-linecap:round}
|
|
.wm-ping{fill:none;stroke:var(--cyan);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
|
|
@media (prefers-reduced-motion:no-preference){
|
|
.wm-flow path{stroke-dasharray:2 18;animation:wm-flow .8s linear infinite}
|
|
.wm-flow .wm-top{animation-delay:-.4s}
|
|
@keyframes wm-flow{to{stroke-dashoffset:-20}}
|
|
.wm-ping{animation:wm-ping 2.4s ease-out infinite}
|
|
.wm-ping.c1{animation-delay:.3s} .wm-ping.c2{animation-delay:.6s} .wm-ping.c3{animation-delay:.9s} .wm-ping.c4{animation-delay:1.2s}
|
|
@keyframes wm-ping{0%{transform:scale(1);opacity:.55} 70%,100%{transform:scale(2.4);opacity:0}}
|
|
}
|
|
@media (prefers-reduced-motion:reduce){.wm-flow{display:none}}
|
|
.tag{color:var(--mut);margin-top:14px}
|
|
main{width:100%;max-width:720px;padding:24px 20px 60px}
|
|
.cards{display:grid;gap:16px;grid-template-columns:1fr 1fr}
|
|
@media(max-width:560px){.cards{grid-template-columns:1fr}}
|
|
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;
|
|
gap:12px;align-items:flex-start;box-shadow:0 10px 30px -24px rgba(21,24,30,.6)}
|
|
.card h2{margin:0;font-size:1.15rem}
|
|
.card p{margin:0;color:var(--mut);font-size:.9rem}
|
|
esp-web-install-button{--esp-tools-button-color:var(--teal);--esp-tools-button-text-color:#fff}
|
|
.note{margin-top:26px;padding:16px 18px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;color:#46525c;font-size:.9rem}
|
|
.note b{color:var(--ink)}
|
|
a{color:var(--teal-ink)}
|
|
footer{color:var(--mut);font-size:.85rem;padding:0 20px 40px;text-align:center}
|
|
.unsupported{display:none;color:#b4631a}
|
|
body.no-serial .unsupported{display:block}
|
|
body.no-serial esp-web-install-button{display:none}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<svg class="logo" viewBox="0 0 720 140" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="wadamesh">
|
|
<defs>
|
|
<filter id="wmGlow" x="-60%" y="-60%" width="220%" height="220%">
|
|
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
<g transform="translate(0 10)">
|
|
<path d="M10 60 L50 108 L90 60 L130 108 L170 60" stroke="#15181E" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M10 60 L50 12 L90 60 L130 12 L170 60" stroke="#15181E" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<g class="wm-flow" filter="url(#wmGlow)"><path class="wm-bot" pathLength="100" d="M10 60 L50 108 L90 60 L130 108 L170 60"/><path class="wm-top" pathLength="100" d="M10 60 L50 12 L90 60 L130 12 L170 60"/></g>
|
|
<g class="wm-pings"><circle class="wm-ping c0" cx="10" cy="60" r="7.5"/><circle class="wm-ping c1" cx="50" cy="12" r="7.5"/><circle class="wm-ping c1" cx="50" cy="108" r="7.5"/><circle class="wm-ping c2" cx="90" cy="60" r="7.5"/><circle class="wm-ping c3" cx="130" cy="12" r="7.5"/><circle class="wm-ping c3" cx="130" cy="108" r="7.5"/><circle class="wm-ping c4" cx="170" cy="60" r="7.5"/></g>
|
|
<g fill="#15B6A6"><circle cx="10" cy="60" r="7.5"/><circle cx="90" cy="60" r="7.5"/><circle cx="170" cy="60" r="7.5"/><circle cx="50" cy="12" r="7.5"/><circle cx="130" cy="12" r="7.5"/><circle cx="50" cy="108" r="7.5"/><circle cx="130" cy="108" r="7.5"/></g>
|
|
</g>
|
|
<text x="225" y="92" font-family="'JetBrains Mono','Courier New',monospace" font-weight="700" font-size="62" letter-spacing="6" fill="#15181E">WADA<tspan fill="#15B6A6">MESH</tspan></text>
|
|
</svg>
|
|
<div class="tag">Install over USB, right from your browser.</div>
|
|
</header>
|
|
<main>
|
|
<div class="cards">
|
|
<div class="card">
|
|
<h2>Heltec V4 + TFT</h2>
|
|
<p>ESP32-S3 with the CHSC6x touch display.</p>
|
|
<esp-web-install-button manifest="./manifest-heltec-v4-tft.json"></esp-web-install-button>
|
|
<span class="unsupported">Use Chrome or Edge on desktop (Web Serial).</span>
|
|
</div>
|
|
<div class="card">
|
|
<h2>LilyGo T-Deck / Plus</h2>
|
|
<p>ESP32-S3 keyboard + trackball handheld.</p>
|
|
<esp-web-install-button manifest="./manifest-tdeck.json"></esp-web-install-button>
|
|
<span class="unsupported">Use Chrome or Edge on desktop (Web Serial).</span>
|
|
</div>
|
|
</div>
|
|
<div class="note">
|
|
<b>How it works:</b> plug the device in over USB, click <b>Connect</b>, pick the serial port,
|
|
and let it flash — a clean full install. On a T-Deck, hold the trackball while tapping reset if it
|
|
doesn't enter download mode on its own. Works in <b>Chrome / Edge on desktop</b>. Want the guided
|
|
version (incl. running under bmorcelli's Launcher)? See <a href="https://wadamesh.com">wadamesh.com</a>.
|
|
</div>
|
|
</main>
|
|
<footer>Open source (GPL-3.0) · <a href="https://github.com/ALLFATHER-BV/wadamesh">github.com/ALLFATHER-BV/wadamesh</a></footer>
|
|
<script>if (!('serial' in navigator)) document.body.classList.add('no-serial');</script>
|
|
</body>
|
|
</html>
|