Feat: Scroll retract land and add sections

2026-01-13 16:18:07 +00:00 · 2025-11-09 06:43:29 -08:00
parent 071654819a
commit b81be7a41c
1 changed files with 214 additions and 40 deletions
--- a/index.html
+++ b/index.html
@@ -6,8 +6,13 @@
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
-    html,body{height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:#e3f4ff;color:#123}
-    body{overflow:hidden}
+    html,body{
+      height:100%;
+      font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
+      background:#e3f4ff;
+      color:#123
+    }
+    body{overflow-x:hidden}
    .scene-wrap{
      position:relative;
      width:100vw;
@@ -16,40 +21,21 @@
      align-items:flex-end;
      justify-content:center;
      background:linear-gradient(to bottom,#bfe7ff 0%,#d8f1ff 35%,#f5fbff 100%);
+      overflow:hidden
    }
    .scene-sky{
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 20% 15%,#ffffffaa 0,transparent 40%);
      pointer-events:none;
-      z-index:0;
+      z-index:0
    }
    .scene-svg{
      position:relative;
      width:100%;
      height:100%;
      display:block;
-      z-index:1;
-    }
-    .title-wrap{
-      position:absolute;
-      top:7vh;
-      left:6vw;
-      z-index:5;
-      color:#0f2434;
-      text-shadow:0 2px 6px #00000026;
-    }
-    .title-wrap h1{
-      font-size:clamp(2.4rem,4vw,3.6rem);
-      font-weight:700;
-      letter-spacing:0.02em;
-      margin-bottom:0.25rem;
-    }
-    .title-wrap p{
-      font-size:clamp(0.9rem,1.2vw,1.05rem);
-      max-width:26rem;
-      line-height:1.5;
-      opacity:0.9;
+      z-index:1
    }
    @keyframes treeFloat{
      0%{transform:translateY(0)}
@@ -62,35 +48,68 @@
    }
    .tree{
      animation:treeFloat 4s ease-in-out infinite;
-      transform-origin:50% 100%;
+      transform-origin:50% 100%
    }
    .tree:nth-child(odd){animation-duration:5.2s}
-    .cloud{
-      animation:cloudDrift 26s linear infinite alternate;
-    }
+    .cloud{animation:cloudDrift 26s linear infinite alternate}
    .ground-label{
      font-size:9px;
      fill:#fdfdfd;
      opacity:.82;
-      letter-spacing:.06em;
+      letter-spacing:.06em
    }
-    @media (max-width:640px){
-      .title-wrap{top:5vh;left:5vw;right:8vw}
-      .title-wrap p{max-width:18rem}
+    .content{
+      position:relative;
+      z-index:10;
+      max-width:960px;
+      margin:0 auto;
+      padding:4rem 6vw 5rem;
+      color:#102331;
+      background:transparent
+    }
+    .section{
+      margin-bottom:2.6rem;
+      padding:1.3rem 1.4rem 1.1rem;
+      border-radius:14px;
+      background:#ffffffee;
+      box-shadow:0 8px 26px #00000017;
+      backdrop-filter:blur(8px)
+    }
+    .section h2{
+      font-size:1.1rem;
+      font-weight:700;
+      letter-spacing:.06em;
+      text-transform:uppercase;
+      color:#0c2334;
+      margin-bottom:.4rem
+    }
+    .section p{
+      font-size:.95rem;
+      line-height:1.6;
+      color:#1d3545
+    }
+    .highlight{
+      font-weight:600;
+      color:#0c5a2a
+    }
+    .warn{
+      font-weight:700;
+      color:#b00020
+    }
+    .muted{
+      opacity:.76
+    }
+    @media(max-width:640px){
+      .content{padding:3rem 5vw 3.6rem}
+      .section{margin-bottom:2.1rem;padding:1.1rem 1rem .9rem}
+      .section h2{font-size:1.0rem}
+      .section p{font-size:.9rem}
    }
  </style>
 </head>
 <body>
  <div class="scene-wrap">
    <div class="scene-sky"></div>
-    <div class="title-wrap">
-      <h1>Privacy Index</h1>
-      <p>
-        A clear landscape of digital privacy.
-        View how services, products, and policies
-        stand on the horizon of trust.
-      </p>
-    </div>
    <svg
      class="scene-svg"
      viewBox="0 0 1440 900"
@@ -141,6 +160,7 @@
      </g>

      <path
+        id="hill"
        d="M0,530
           C240,480 420,470 720,500
           C1040,530 1180,500 1440,470
@@ -150,6 +170,7 @@
      />

      <path
+        id="land"
        d="M0,560
           C260,540 480,555 720,570
           C1040,590 1200,600 1440,610
@@ -158,6 +179,7 @@
      />

      <path
+        id="dirt"
        d="M0,720
           C220,700 430,715 720,730
           C1040,750 1220,760 1440,755
@@ -245,5 +267,157 @@
      >FOUNDATION: TRANSPARENT, VERIFIABLE PRIVACY SCORES</text>
    </svg>
  </div>
+
+  <main class="content">
+    <section class="section">
+      <h2>VPN</h2>
+      <p>
+        <span class="highlight">Mullvad</span> and
+        <span class="highlight">Proton VPN</span> are preferred: strong privacy
+        posture, public audits, and resistance to invasive data collection.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Browser</h2>
+      <p>
+        <span class="highlight">Firefox</span> (hardened) for daily use.
+        <span class="highlight">Tor Browser</span> for anonymity-critical
+        activity.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Operating Systems</h2>
+      <p>
+        <span class="highlight">Qubes OS</span> for strict compartmentalization.
+        <span class="highlight">Tails</span> for amnesic, Tor-routed sessions.
+        <span class="highlight">Fedora</span> as a strong general-purpose choice.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Password Management + Auth</h2>
+      <p>
+        <span class="highlight">KeePassXC</span> on desktop (especially Windows),
+        <span class="highlight">KeePassDX</span> on mobile, plus
+        <span class="highlight">Firefox Password Manager</span> for integrated,
+        syncable credentials, and
+        <span class="highlight">Proton Pass</span> +
+        <span class="highlight">Proton Auth</span> for encrypted, ecosystem-based
+        secrets and 2FA.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Email</h2>
+      <p>
+        <span class="highlight">Proton Mail</span> for end-to-end encrypted,
+        jurisdiction-conscious mail.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>File Storage</h2>
+      <p>
+        <span class="highlight">Proton Drive</span> for encrypted cloud storage
+        tied to a privacy-respecting provider.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Cryptocurrency</h2>
+      <p>
+        <span class="highlight">Monero</span> first-choice for privacy-focused
+        transactions. <span class="highlight">Bitcoin</span> second,
+        with strict self-custody and privacy hygiene.
+      </p>
+      <p class="warn">
+        Avoid Zcash:
+        influential figures, including Edward Snowden, have publicly promoted
+        it in ways that undermine trust; its model and ecosystem do not align
+        with this index&apos;s bar for credible privacy.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Instant Messaging</h2>
+      <p>
+        <span class="highlight">Signal</span> for default end-to-end encrypted
+        messaging with a strong track record.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Web Search</h2>
+      <p class="muted">
+        No engine currently meets a high enough standard to be recommended
+        without significant caveats.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Calendar</h2>
+      <p>
+        <span class="highlight">Proton Calendar</span> alongside Proton&apos;s
+        encrypted ecosystem.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Hosting</h2>
+      <p>
+        <span class="highlight">ovobox.org</span> as a focused, privacy-forward
+        hosting option.
+      </p>
+    </section>
+  </main>
+
+  <script>
+    ;(()=>{
+      const svg=document.querySelector('.scene-svg')
+      if(!svg)return
+      const hill=svg.querySelector('#hill')
+      const land=svg.querySelector('#land')
+      const dirt=svg.querySelector('#dirt')
+      const label=svg.querySelector('.ground-label')
+      const trees=[...svg.querySelectorAll('.tree')]
+      const base={
+        hill:hill.getAttribute('d'),
+        land:land.getAttribute('d'),
+        dirt:dirt.getAttribute('d')
+      }
+      const baseLabelY=parseFloat(label.getAttribute('y'))
+      const maxShift=520
+      const lerp=(a,b,t)=>a+(b-a)*t
+      const shiftPath=(d,dy)=>{
+        return d.replace(/(-?\d+(\.\d+)?)/g,(m)=>{
+          let n=parseFloat(m)
+          if(isNaN(n))return m
+          return String(n)
+        }).replace(/(,)(\d+(\.\d+)?)/g,(m,sep,num)=>{
+          const y=parseFloat(num)+dy
+          return sep+String(y)
+        })
+      }
+      const onScroll=()=>{
+        const maxScroll=window.innerHeight*1.4
+        const s=Math.min(window.scrollY/maxScroll,1)
+        const easing=s*s
+        const shift=-maxShift*easing
+        hill.setAttribute('d',shiftPath(base.hill,shift))
+        land.setAttribute('d',shiftPath(base.land,shift))
+        dirt.setAttribute('d',shiftPath(base.dirt,shift))
+        label.setAttribute('y',baseLabelY+shift)
+        trees.forEach(t=>{
+          const ty=t.__baseY||(t.__baseY=parseFloat((t.getAttribute('transform').match(/,([\d.]+)/)||[0,520])[1]))
+          const nx=ty+shift
+          t.setAttribute('transform',t.getAttribute('transform').replace(/,([\d.]+)\)/,','+nx+')'))
+        })
+      }
+      window.addEventListener('scroll',onScroll,{passive:true})
+      onScroll()
+    })()
+  </script>
 </body>
 </html>