mirror of
https://github.com/ALLFATHER-BV/wadamesh.git
synced 2026-08-28 05:04:46 +00:00
site: animate flasher logo + standalone marks; add deploy-site.sh
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>
This commit is contained in:
Kaj Schittecat
committed by
B0N3-GD
B0N3-GD
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
4513b97dbc
commit
3ed6f52b08
@@ -14,14 +14,26 @@
|
||||
</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;--teal-ink:#0e8d80;color-scheme:light}
|
||||
: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}
|
||||
.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}
|
||||
@@ -43,9 +55,17 @@
|
||||
<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>
|
||||
|
||||
@@ -1,8 +1,36 @@
|
||||
<svg 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>
|
||||
<style type="text/css">
|
||||
.wm-flow path{fill:none;stroke:#19d6c2;stroke-width:5.5;stroke-linecap:round}
|
||||
.wm-ping{fill:none;stroke:#19d6c2;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}}
|
||||
</style>
|
||||
</defs>
|
||||
<!-- mark -->
|
||||
<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 c2" cx="90" cy="60" r="7.5"/><circle class="wm-ping c4" cx="170" cy="60" r="7.5"/>
|
||||
<circle class="wm-ping c1" cx="50" cy="12" r="7.5"/><circle class="wm-ping c3" cx="130" cy="12" r="7.5"/>
|
||||
<circle class="wm-ping c1" cx="50" cy="108" r="7.5"/><circle class="wm-ping c3" cx="130" cy="108" 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"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 977 B After Width: | Height: | Size: 2.7 KiB |
@@ -1,6 +1,34 @@
|
||||
<svg viewBox="0 0 180 120" 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>
|
||||
<style type="text/css">
|
||||
.wm-flow path{fill:none;stroke:#19d6c2;stroke-width:5;stroke-linecap:round}
|
||||
.wm-ping{fill:none;stroke:#19d6c2;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}}
|
||||
</style>
|
||||
</defs>
|
||||
<path d="M10 60 L50 108 L90 60 L130 108 L170 60" stroke="#15181E" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 60 L50 12 L90 60 L130 12 L170 60" stroke="#15181E" stroke-width="9" 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"/><circle class="wm-ping c2" cx="90" cy="60" r="7"/><circle class="wm-ping c4" cx="170" cy="60" r="7"/>
|
||||
<circle class="wm-ping c1" cx="50" cy="12" r="7"/><circle class="wm-ping c3" cx="130" cy="12" r="7"/>
|
||||
<circle class="wm-ping c1" cx="50" cy="108" r="7"/><circle class="wm-ping c3" cx="130" cy="108" r="7"/>
|
||||
</g>
|
||||
<g fill="#15B6A6">
|
||||
<circle cx="10" cy="60" r="7"/><circle cx="90" cy="60" r="7"/><circle cx="170" cy="60" r="7"/>
|
||||
<circle cx="50" cy="12" r="7"/><circle cx="130" cy="12" r="7"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 646 B After Width: | Height: | Size: 2.3 KiB |
Executable
+36
@@ -0,0 +1,36 @@
|
||||
#!/usr/bin/env bash
|
||||
# wadamesh site deploy: publish the static landing page (deploy/site/) to the
|
||||
# VPS web root behind Cloudflare.
|
||||
#
|
||||
# The apex `wadamesh.com` nginx block serves /srv/wadamesh/site
|
||||
# (flasher.wadamesh.com 301-redirects there), so that dir IS the live site.
|
||||
#
|
||||
# Usage:
|
||||
# WADAMESH_VPS=user@your-vps scripts/deploy-site.sh # deploy
|
||||
# WADAMESH_VPS=user@your-vps scripts/deploy-site.sh --dry-run # preview only
|
||||
#
|
||||
# Optional:
|
||||
# WADAMESH_SITE_PATH=/srv/wadamesh/site # override the web root
|
||||
#
|
||||
# The VPS target comes from the environment — never commit it (Cloudflare fronts
|
||||
# the origin, so the IP isn't needed in the repo).
|
||||
set -euo pipefail
|
||||
|
||||
ROOT="$(cd "$(dirname "$0")/.." && pwd)"
|
||||
SRC="$ROOT/deploy/site/"
|
||||
DEST="${WADAMESH_VPS:?set WADAMESH_VPS=user@host}"
|
||||
DEST_PATH="${WADAMESH_SITE_PATH:-/srv/wadamesh/site}"
|
||||
|
||||
DRY=""
|
||||
[ "${1:-}" = "--dry-run" ] && DRY="--dry-run"
|
||||
|
||||
# Mirror deploy/site/ -> web root. --delete prunes files no longer in the repo;
|
||||
# everything under deploy/site/ is static (html, svg, json manifests).
|
||||
rsync -avz $DRY --delete --chmod=D755,F644 "$SRC" "$DEST:$DEST_PATH/"
|
||||
|
||||
if [ -z "$DRY" ]; then
|
||||
echo
|
||||
echo "deployed deploy/site/ -> $DEST:$DEST_PATH"
|
||||
echo "note: Cloudflare edge-caches; HTML is short-TTL but purge the zone if a"
|
||||
echo " change doesn't show within a minute."
|
||||
fi
|
||||
Reference in New Issue
Block a user