Visual overhaul: cinematic dark-neon theme, starfield, glassmorphism, Space Grotesk + JetBrains Mono, gradient glows, featured pricing

2026-09-19 21:14:58 -07:00
parent 762ce8d41e
commit 8502e3471a
4 changed files with 267 additions and 98 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,19 +9,25 @@
  <meta property="og:title" content="Clean Proxys — residential SOCKS5 proxies">
  <meta property="og:description" content="Clean, fast, geo-targeted residential proxies. No KYC. Pay with Bitcoin. Built for agents and humans alike.">
  <meta property="og:type" content="website">
+  <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=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/style.css">
  <script async src="https://analytics.thetempleofdoom.com/script.js" data-website-id="0e876bc2-1407-4e05-a8d3-3219ee9e5198"></script>
 </head>
 <body>
+  <canvas id="stars"></canvas>
+  <div class="grid-overlay"></div>
+
  <nav>
    <div class="wrap inner">
-      <a class="logo" href="/">CLEAN<span class="dot">.</span>PROXYS</a>
+      <a class="logo" href="/"><span class="mark"></span>CLEAN<b>.PROXYS</b></a>
      <div class="nav-links">
        <a href="/">Home</a>
        <a href="/plans">Residential</a>
        <a href="/dedicated">Dedicated IPs</a>
        {% if user %}<a href="/dashboard">Dashboard</a><a href="/logout">Logout</a>
-        {% else %}<a href="/login">Login</a><a class="cta" href="/signup">Sign up</a>{% endif %}
+        {% else %}<a href="/login">Login</a><a class="cta" href="/signup">Get proxies</a>{% endif %}
      </div>
    </div>
  </nav>
@@ -40,5 +46,45 @@
      &nbsp;·&nbsp; <a href="/llms.txt">llms.txt</a>
    </div>
  </footer>
+
+  <script>
+  // slow, calm starfield — no fast motion
+  (function(){
+    const c = document.getElementById('stars'), x = c.getContext('2d');
+    let W, H, pts = [];
+    function resize(){
+      W = c.width = innerWidth; H = c.height = innerHeight;
+      const n = Math.min(140, Math.floor(W * H / 9000));
+      pts = Array.from({length: n}, () => ({
+        x: Math.random()*W, y: Math.random()*H,
+        r: Math.random()*1.3 + .3,
+        vx: (Math.random()-.5)*.12, vy: (Math.random()-.5)*.12,
+        a: Math.random()*.5 + .2
+      }));
+    }
+    resize(); addEventListener('resize', resize);
+    function tick(){
+      x.clearRect(0,0,W,H);
+      for (const p of pts){
+        p.x += p.vx; p.y += p.vy;
+        if (p.x<0)p.x=W; if(p.x>W)p.x=0; if(p.y<0)p.y=H; if(p.y>H)p.y=0;
+        x.beginPath(); x.arc(p.x,p.y,p.r,0,7);
+        x.fillStyle = 'rgba(180,230,255,'+p.a+')'; x.fill();
+      }
+      // faint constellation lines between near stars
+      for (let i=0;i<pts.length;i++){
+        for (let j=i+1;j<pts.length;j++){
+          const dx=pts[i].x-pts[j].x, dy=pts[i].y-pts[j].y, d=dx*dx+dy*dy;
+          if (d < 120*120){
+            x.beginPath(); x.moveTo(pts[i].x,pts[i].y); x.lineTo(pts[j].x,pts[j].y);
+            x.strokeStyle = 'rgba(0,229,255,'+(0.05*(1-d/(120*120)))+')'; x.stroke();
+          }
+        }
+      }
+      requestAnimationFrame(tick);
+    }
+    tick();
+  })();
+  </script>
 </body>
 </html>
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,35 +1,58 @@
 {% extends "base.html" %}
 {% block body %}
 <div class="hero">
-  <h1>The <span class="glow">cleanest</span> residential proxies on the web.</h1>
-  <p class="lede">Global geo-targeted SOCKS5 &amp; HTTP proxies with an encrypted backend. No KYC. No email required. Pay with Bitcoin and connect in seconds.</p>
+  <span class="kicker">◈ Residential · ISP · Datacenter</span>
+  <h1>The <span class="grad">cleanest proxies</span><br>on the web.</h1>
+  <p class="lede">Global geo-targeted SOCKS5 &amp; HTTP proxies with an encrypted backend. No KYC. No email. Pay in Bitcoin and connect in seconds — built for humans <em>and</em> AI agents.</p>
  <div class="cta-row">
    <a class="btn btn-primary" href="/signup">Get proxies →</a>
-    <a class="btn btn-ghost" href="/plans">View plans</a>
+    <a class="btn btn-ghost" href="/plans">View pricing</a>
  </div>
-  <pre class="code" style="max-width:640px;margin:34px auto 0;text-align:left;">$ curl -x <span class="k">socks5h://user:pass@host:1080</span> https://ipinfo.io/ip
-# 81.5.104.39  ← your clean, geo-targeted egress</pre>
+
+  <div class="term">
+    <div class="bar"><i></i><i></i><i></i></div>
+    <pre><span class="c"># your clean, geo-targeted egress</span>
+$ curl -x <span class="k">socks5h://user:pass@host:1080</span> https://ipinfo.io/ip
+<span class="k">81.5.104.39</span>   <span class="c">← London, GB · residential ISP</span></pre>
+  </div>
+</div>
+
+<div class="statsbar">
+  <div class="s"><div class="n grad">190+</div><div class="l">Countries</div></div>
+  <div class="s"><div class="n grad">513</div><div class="l">ISP cities</div></div>
+  <div class="s"><div class="n grad">432</div><div class="l">Datacenter cities</div></div>
+  <div class="s"><div class="n grad">2</div><div class="l">Protocols · SOCKS5 + HTTP</div></div>
+  <div class="s"><div class="n grad">0</div><div class="l">KYC · no email, no ID</div></div>
 </div>

 <section>
  <h2>Built <span class="accent">different</span>.</h2>
-  <p class="sub">Everything a serious operator needs, nothing that gets in the way.</p>
+  <p class="sub">Everything a serious operator needs. Nothing that gets in the way.</p>
  <div class="grid">
-    <div class="card"><span class="ic">🌍</span><h3>Global geo-targeting</h3><p>Country, city and region targeting across a real residential pool — not a VPN masquerade.</p></div>
-    <div class="card"><span class="ic">🔌</span><h3>SOCKS5 &amp; HTTP</h3><p>Native SOCKS5 and HTTP CONNECT. Drop-in for any tool, bot, or agent.</p></div>
-    <div class="card"><span class="ic">🔐</span><h3>Encrypted backend</h3><p>Your traffic rides an encrypted transport from end to end. Per-user credentials, always.</p></div>
-    <div class="card"><span class="ic">⚡</span><h3>Instant activation</h3><p>Pay with Bitcoin, top up in seconds. No verification queue, no paperwork.</p></div>
-    <div class="card"><span class="ic">🕶️</span><h3>No KYC</h3><p>Just a username and password. That's it.</p></div>
-    <div class="card"><span class="ic">🤖</span><h3>Agent-ready</h3><p>REST API, llms.txt, and a schema agents can parse. Programmatic access is a first-class feature.</p></div>
+    <div class="card"><span class="ic g">🌍</span><h3>Global geo-targeting</h3><p>Country, city, and region targeting across a real residential pool — not a VPN masquerade.</p></div>
+    <div class="card"><span class="ic g">🔌</span><h3>SOCKS5 &amp; HTTP</h3><p>Native SOCKS5 and HTTP CONNECT. Drop-in for any tool, bot, or agent.</p></div>
+    <div class="card"><span class="ic g">🔐</span><h3>Encrypted backend</h3><p>Your traffic rides an encrypted transport end-to-end. Per-user credentials, always.</p></div>
+    <div class="card"><span class="ic g">⚡</span><h3>Instant activation</h3><p>Pay with Bitcoin, connect in seconds. No verification queue, no paperwork.</p></div>
+    <div class="card"><span class="ic g">🕶️</span><h3>No KYC</h3><p>Just a username and password. That's it.</p></div>
+    <div class="card"><span class="ic g">🤖</span><h3>Agent-ready</h3><p>REST API, llms.txt, and a one-call purchase endpoint agents can parse.</p></div>
  </div>
 </section>

 <section>
  <h2>Sticky or <span class="accent">rotating</span>.</h2>
-  <p class="sub">Choose a stable session IP or a fresh egress on every request — switch anytime from your dashboard.</p>
+  <p class="sub">Hold a stable session IP, or roll a fresh egress on every request — flip it anytime from your dashboard.</p>
+  <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))">
+    <div class="card"><h3>Sticky sessions</h3><p>Pin the same IP for 30 minutes. Built for account sessions and stateful workflows.</p></div>
+    <div class="card"><h3>Rotating</h3><p>A new IP every connection. Built for scraping, crawling, and high-volume jobs.</p></div>
+  </div>
+</section>
+
+<section>
+  <h2>How it <span class="accent">works</span>.</h2>
  <div class="grid">
-    <div class="card"><h3>Sticky sessions</h3><p>Hold the same IP for 30 minutes. Ideal for account sessions and stateful tasks.</p></div>
-    <div class="card"><h3>Rotating</h3><p>A new IP on every connection. Ideal for scraping, crawling, and high-volume jobs.</p></div>
+    <div class="card"><span class="ic g">1</span><h3>Create an account</h3><p>Username + password. No email, no KYC.</p></div>
+    <div class="card"><span class="ic g">2</span><h3>Top up with Bitcoin</h3><p>Pick a plan, pay sats, balance credits instantly.</p></div>
+    <div class="card"><span class="ic g">3</span><h3>Connect</h3><p>Grab your SOCKS5 string from the dashboard and go.</p></div>
  </div>
 </section>

--- a/templates/plans.html
+++ b/templates/plans.html
@@ -6,7 +6,7 @@
 </div>
 <div class="grid">
  {% for p in plans %}
-  <div class="card plan">
+  <div class="card plan {% if p.gb >= 100 %}featured{% endif %}">
    {% if p.gb >= 100 %}<span class="tag">BEST VALUE</span>{% endif %}
    <h3>{{ p.name }}</h3>
    <div class="price">{{ p.price_sats }} <span style="font-size:16px;color:var(--muted)">sats</span></div>