aero: quiet-web nostalgia pass (sticky note, webring, neighbors, uptime)

Implements the Frutiger Aero "Quiet Web" design handoff, merged into the
existing site without touching content:
- aero.css: append AERO — DEEPER POLISH (glass sheen, icon halo, horizon
  ripple, plus aero+chrome styles for all new widgets)
- index.html: Neighbors icon + #w-neighbors window, #webring pill, #sticky
  note, #uptime ribbon, Caveat font, sticky-drag + webring JS
- enter.html: welcome droplets, indie-pledge strip, footer webring, Caveat
  font (gate sheen + logo halo via CSS)

aero.js left unchanged (current version newer than handoff's).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 files changed, 96 insertions, 1 deletions

diff --git a/index.html b/index.html
index a4318ee..94a9633 100755
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
 <title>tyler.xyz · Aqua Desktop</title>
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Michroma&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Caveat:wght@400;500;600;700&family=Michroma&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
 <link rel="stylesheet" href="aero.css" />
 <style>
   /* ============= LOCKED PALETTE ============= */
@@ -296,6 +296,7 @@
       <div class="icon" data-open="podcast"><div class="glyph" style="background: var(--icon-silver)">🎙</div><div class="label">REEL MOUTH</div></div>
       <div class="icon" data-open="films"><div class="glyph" style="background: var(--icon-pink)">🎞</div><div class="label">Films</div></div>
       <div class="icon" data-open="browser"><div class="glyph" style="background: var(--icon-blue)">🌐</div><div class="label">Internet</div></div>
+      <div class="icon" data-open="neighbors"><div class="glyph" style="background: var(--icon-green)">🏡</div><div class="label">Neighbors</div></div>
       <div class="icon" data-open="guestbook"><div class="glyph" style="background: var(--icon-blue)">✉</div><div class="label">Contact</div></div>
     </div>
 
@@ -524,6 +525,59 @@
       </div>
     </div>
 
+    <!-- NEIGHBORS / BUDDY LIST -->
+    <div class="win glass" id="w-neighbors" style="left: 880px; top: 220px; width: 340px; display: none;">
+      <div class="titlebar" style="background: var(--title-bar);"><div class="dots"><div class="dot r no-drag" onclick="this.closest('.win').style.display='none'"></div><div class="dot y"></div><div class="dot g"></div></div>Neighbors — the indie web</div>
+      <div class="body">
+        <div style="font-size: 11px; opacity: 0.7; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1.5px;">friends &amp; favorite homepages · 6 of 19</div>
+        <div class="bud-list">
+          <div class="bud-row"><div class="bud-led on"></div><div><div class="bud-name">trinh's garden 🌿</div><div class="bud-host">trinh.computer</div></div><div class="bud-mood">repotting a monstera</div></div>
+          <div class="bud-row"><div class="bud-led on"></div><div><div class="bud-name">jay's mixtapes</div><div class="bud-host">jaylim.fm</div></div><div class="bud-mood">new bossa nova set</div></div>
+          <div class="bud-row"><div class="bud-led idle"></div><div><div class="bud-name">ari's lab notebook</div><div class="bud-host">arielab.dev</div></div><div class="bud-mood">soldering @ 3am again</div></div>
+          <div class="bud-row"><div class="bud-led on"></div><div><div class="bud-name">linh writes things</div><div class="bud-host">linhwrites.net</div></div><div class="bud-mood">draft #4 of the essay</div></div>
+          <div class="bud-row"><div class="bud-led idle"></div><div><div class="bud-name">marco's hifi corner</div><div class="bud-host">marco.audio</div></div><div class="bud-mood">tube amp restoration</div></div>
+          <div class="bud-row"><div class="bud-led off"></div><div><div class="bud-name">small green pixels</div><div class="bud-host">smallgreenpix.org</div></div><div class="bud-mood">— offline · away —</div></div>
+        </div>
+        <div class="bud-foot">
+          <span>last sync · 2 min ago</span>
+          <a href="#">see all 19 →</a>
+        </div>
+        <p style="margin: 12px 0 0; font-size: 11px; line-height: 1.55; opacity: 0.7; font-family: 'Plus Jakarta Sans', sans-serif;">
+          all hand-curated. no algorithms, no follow-back debt. if you keep a homepage and want to be neighbors, <a class="aero-link" href="mailto:tyler@tylerhoang.xyz">drop a line</a>.
+        </p>
+      </div>
+    </div>
+
+    <!-- WEBRING (top-center floating) -->
+    <div class="webring no-drag" id="webring">
+      <div class="wr-label"><span class="wr-flower">❀</span>quiet web ring</div>
+      <a class="wr-btn" href="#" id="wr-prev" title="previous site in the ring">« prev</a>
+      <span class="wr-btn middle" id="wr-count">site 42 / 184</span>
+      <a class="wr-btn" href="#" id="wr-rand" title="random site">random</a>
+      <a class="wr-btn" href="#" id="wr-next" title="next site in the ring">next »</a>
+    </div>
+
+    <!-- STICKY NOTE pinned to desktop -->
+    <div class="sticky-note" id="sticky" style="right: 32px; top: 96px;">
+      <div class="sn-head">remember</div>
+      water the basil · ☕<br/>
+      call mom on sunday<br/>
+      finish thesis ch. <span class="sn-underline">3</span> by friday<br/>
+      <span style="opacity:0.7">— and stop checking</span><br/>
+      <span style="opacity:0.7">the news so much</span>
+      <span class="sn-sig">— t.</span>
+    </div>
+
+    <!-- UPTIME RIBBON (bottom-right above taskbar) -->
+    <div class="uptime-ribbon" id="uptime">
+      <div class="ur-led"></div>
+      <span>online &amp; quiet</span>
+      <span class="ur-sep">·</span>
+      <span>uptime 412d</span>
+      <span class="ur-sep">·</span>
+      <span>♥ from long beach, ca</span>
+    </div>
+
     <!-- TASKBAR -->
     <div class="taskbar">
       <div class="start"><span style="font-size:16px;">❀</span> tyler</div>
@@ -556,6 +610,47 @@
     Aero.makeResizable(w, { minW: 300, minH: 220 });
   });
 
+  // Sticky note — draggable, lightly random tilt so each load feels handmade
+  const sticky = document.getElementById('sticky');
+  if (sticky) {
+    const rot = (-4 + Math.random() * 3).toFixed(2);
+    sticky.style.transform = `rotate(${rot}deg)`;
+    Aero.makeDraggable(sticky, sticky);
+  }
+
+  // Webring — silly old-internet behaviour
+  const wrPrev = document.getElementById('wr-prev');
+  const wrNext = document.getElementById('wr-next');
+  const wrRand = document.getElementById('wr-rand');
+  const wrCount = document.getElementById('wr-count');
+  const ringSites = [
+    'mireia.computer', 'jaylim.fm', 'trinh.computer', 'arielab.dev',
+    'linhwrites.net', 'marco.audio', 'smallgreenpix.org', 'amalia.zone',
+    'thursday.cafe', 'soft.garden', 'foglamp.club', 'kanji.coffee'
+  ];
+  let ringIdx = 42;
+  function ringHop(dir) {
+    ringIdx = Math.max(1, Math.min(184, ringIdx + dir));
+    wrCount.textContent = `site ${ringIdx} / 184`;
+    const site = ringSites[Math.floor(Math.random() * ringSites.length)];
+    wrCount.title = `would surf to ${site}`;
+    wrCount.animate(
+      [{ opacity: 0.3 }, { opacity: 0.75 }],
+      { duration: 280, easing: 'ease-out' }
+    );
+  }
+  if (wrPrev) wrPrev.addEventListener('click', e => { e.preventDefault(); ringHop(-1); });
+  if (wrNext) wrNext.addEventListener('click', e => { e.preventDefault(); ringHop(1); });
+  if (wrRand) wrRand.addEventListener('click', e => {
+    e.preventDefault();
+    ringIdx = 1 + Math.floor(Math.random() * 184);
+    wrCount.textContent = `site ${ringIdx} / 184`;
+    wrCount.animate(
+      [{ transform: 'scale(0.9)', opacity: 0.3 }, { transform: 'scale(1)', opacity: 0.75 }],
+      { duration: 320, easing: 'ease-out' }
+    );
+  });
+
   document.querySelectorAll('.icon').forEach(ic => {
     ic.addEventListener('dblclick', () => {
       const key = ic.dataset.open;