pleiades/templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Clean Proxys{% endblock %}</title>
  <meta name="description" content="Clean residential SOCKS5 & HTTP proxies. Global geo-targeting. No KYC. Bitcoin checkout. Encrypted backend. Agent-ready.">
  <meta name="robots" content="index,follow">
  <meta name="ai-agent" content="mcp: /mcp (streamable-http); api: /api/v1/info, /openapi.json; purchase: POST /api/v1/proxy; auth: username+password; billing: bitcoin">
  <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">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebAPI",
    "name": "Clean Proxys API",
    "description": "Programmatic residential SOCKS5/HTTP proxy purchase. One-call provisioning, Bitcoin billing.",
    "documentation": "https://clean-proxys.thetempleofdoom.com/llms.txt",
    "termsOfService": "https://clean-proxys.thetempleofdoom.com/",
    "provider": {"@type": "Organization", "name": "Clean Proxys"}
  }
  </script>
  <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>
  <div id="glow"></div>

  <nav>
    <div class="wrap inner">
      <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">Get proxies</a>{% endif %}
      </div>
    </div>
  </nav>

  <div class="wrap">
    {% with msgs = get_flashed_messages(with_categories=true) %}
      {% for cat, m in msgs %}<div class="flash {{ cat }}">{{ m }}</div>{% endfor %}
    {% endwith %}
    {% block body %}{% endblock %}
  </div>

  <footer>
    <div class="wrap">
      Clean Proxys — residential SOCKS5 &amp; HTTP proxies. &nbsp;·&nbsp;
      <a href="https://buymeacoffee.com/r26xrthzttg" target="_blank" rel="noopener">Support the project ☕</a>
      &nbsp;·&nbsp; <a href="/llms.txt">llms.txt</a> &nbsp;·&nbsp; <a href="/openapi.json">OpenAPI</a>
    </div>
  </footer>

  <script>
  // interactive background: slow starfield + mouse parallax + cursor glow (all smooth, no fast motion)
  (function(){
    const c = document.getElementById('stars'), x = c.getContext('2d');
    const glow = document.getElementById('glow');
    let W, H, pts = [];
    const raw = { x: innerWidth/2, y: innerHeight/2 };   // actual cursor
    const sm  = { x: innerWidth/2, y: innerHeight/2 };   // smoothed (lerp)

    function resize(){
      W = c.width = innerWidth; H = c.height = innerHeight;
      const n = Math.min(150, Math.floor(W * H / 8500));
      pts = Array.from({length: n}, () => ({
        x: Math.random()*W, y: Math.random()*H,
        r: Math.random()*1.4 + .3,
        vx: (Math.random()-.5)*.1, vy: (Math.random()-.5)*.1,
        d: Math.random()*2 + .3,        // parallax depth
        a: Math.random()*.5 + .2
      }));
    }
    resize(); addEventListener('resize', resize);
    addEventListener('mousemove', e => { raw.x = e.clientX; raw.y = e.clientY; });

    function tick(){
      sm.x += (raw.x - sm.x) * .08;   // smooth follow
      sm.y += (raw.y - sm.y) * .08;

      // parallax: normalized cursor -> star offset (opposite, subtle)
      const nx = (sm.x / W - .5) * 2, ny = (sm.y / H - .5) * 2;
      const px = nx * 28, py = ny * 28;

      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;
        const sx = p.x - px*p.d, sy = p.y - py*p.d;
        x.beginPath(); x.arc(sx,sy,p.r,0,7);
        x.fillStyle = 'rgba(180,230,255,'+p.a+')'; x.fill();
      }
      for (let i=0;i<pts.length;i++){
        for (let j=i+1;j<pts.length;j++){
          const dx=(pts[i].x-px*pts[i].d)-(pts[j].x-px*pts[j].d);
          const dy=(pts[i].y-py*pts[i].d)-(pts[j].y-py*pts[j].d);
          const d=dx*dx+dy*dy;
          if (d < 130*130){
            x.beginPath();
            x.moveTo(pts[i].x-px*pts[i].d, pts[i].y-py*pts[i].d);
            x.lineTo(pts[j].x-px*pts[j].d, pts[j].y-py*pts[j].d);
            x.strokeStyle='rgba(0,229,255,'+(0.06*(1-d/(130*130)))+')'; x.stroke();
          }
        }
      }

      // cursor glow follows (smoothed)
      glow.style.transform = 'translate(' + (sm.x) + 'px,' + (sm.y) + 'px)';
      requestAnimationFrame(tick);
    }
    tick();
  })();
  </script>
</body>
</html>