diff --git a/static/style.css b/static/style.css index a84db52..94eff88 100644 --- a/static/style.css +++ b/static/style.css @@ -1,136 +1,235 @@ :root { - --bg: #05070d; - --bg2: #080c14; - --surface: #0c1119; - --surface2: #111a27; - --border: #1c2837; - --border-glow: #2a3d52; - --text: #e6edf3; - --muted: #8296ab; + --bg: #030509; + --bg2: #070b12; + --surface: rgba(255, 255, 255, 0.025); + --surface2: rgba(255, 255, 255, 0.05); + --border: rgba(255, 255, 255, 0.08); + --border-glow: rgba(0, 229, 255, 0.35); + --text: #eaf0f7; + --muted: #7c8ba1; --neon: #00ff9c; --neon2: #00e5ff; --neon3: #b26bff; --danger: #ff4d6d; --ok: #00ff9c; --warn: #ffb74d; - --mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, monospace; + --head: "Space Grotesk", "Inter", system-ui, sans-serif; + --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; } * { box-sizing: border-box; } +html { scroll-behavior: smooth; } + body { margin: 0; - background: - radial-gradient(1200px 600px at 80% -10%, rgba(0,229,255,.08), transparent 60%), - radial-gradient(900px 500px at 10% 110%, rgba(0,255,156,.06), transparent 60%), - var(--bg); color: var(--text); - font-family: var(--mono); - line-height: 1.6; + font-family: var(--head); + line-height: 1.65; min-height: 100vh; + background: + radial-gradient(1000px 600px at 85% -10%, rgba(0, 229, 255, 0.10), transparent 60%), + radial-gradient(900px 550px at 8% 112%, rgba(0, 255, 156, 0.08), transparent 60%), + radial-gradient(700px 500px at 50% 0%, rgba(178, 107, 255, 0.05), transparent 60%), + linear-gradient(180deg, var(--bg2), var(--bg)); + background-attachment: fixed; + overflow-x: hidden; } -a { color: var(--neon2); text-decoration: none; } -a:hover { text-shadow: 0 0 12px var(--neon2); } +/* ---- canvas starfield (subtle, slow) ---- */ +#stars { + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + opacity: 0.6; +} -.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; } +/* ---- grid overlay ---- */ +.grid-overlay { + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + background-image: + linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); + background-size: 56px 56px; + mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%); +} -/* nav */ +a { color: var(--neon2); text-decoration: none; transition: color .15s, text-shadow .15s; } +a:hover { color: var(--neon); text-shadow: 0 0 14px rgba(0, 255, 156, .5); } + +.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } + +/* ---- nav ---- */ nav { border-bottom: 1px solid var(--border); - background: rgba(5,7,13,.85); - backdrop-filter: blur(8px); + background: rgba(3, 5, 9, 0.7); + backdrop-filter: blur(16px) saturate(140%); position: sticky; top: 0; z-index: 50; } -nav .inner { display: flex; align-items: center; justify-content: space-between; height: 62px; } -.logo { font-weight: 700; font-size: 19px; letter-spacing: .5px; color: var(--text); } -.logo .dot { color: var(--neon); text-shadow: 0 0 10px var(--neon); } -.nav-links a { margin-left: 22px; color: var(--muted); font-size: 14px; } -.nav-links a:hover { color: var(--neon); text-shadow: 0 0 10px var(--neon); } -.nav-links a.cta { color: var(--bg); background: var(--neon); padding: 7px 14px; border-radius: 6px; font-weight: 700; } -.nav-links a.cta:hover { text-shadow: none; box-shadow: 0 0 18px var(--neon); } +nav .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } +.logo { + font-family: var(--mono); font-weight: 700; font-size: 19px; letter-spacing: 1px; + color: var(--text); display: flex; align-items: center; gap: 8px; +} +.logo .mark { + width: 26px; height: 26px; border-radius: 7px; + background: linear-gradient(135deg, var(--neon), var(--neon2)); + box-shadow: 0 0 18px rgba(0, 229, 255, .5); + display: inline-grid; place-items: center; +} +.logo .mark::after { content: ""; width: 8px; height: 8px; background: var(--bg); border-radius: 2px; } +.logo b { background: linear-gradient(90deg, var(--neon), var(--neon2)); -webkit-background-clip: text; background-clip: text; color: transparent; } +.nav-links a { margin-left: 24px; color: var(--muted); font-size: 14px; font-weight: 500; } +.nav-links a:hover { color: var(--text); } +.nav-links a.cta { + color: #03120a; background: linear-gradient(90deg, var(--neon), var(--neon2)); + padding: 8px 16px; border-radius: 8px; font-weight: 700; + box-shadow: 0 0 20px rgba(0, 255, 156, .35); +} +.nav-links a.cta:hover { box-shadow: 0 0 30px rgba(0, 255, 156, .6); transform: translateY(-1px); text-shadow: none; } -/* hero */ -.hero { padding: 72px 0 52px; text-align: center; } -.hero h1 { font-size: 46px; margin: 0 0 14px; letter-spacing: -.5px; line-height: 1.1; } -.hero h1 .glow { color: var(--neon); text-shadow: 0 0 24px var(--neon); } -.hero p.lede { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 30px; } -.hero .cta-row { display: flex; gap: 14px; justify-content: center; } +/* ---- hero ---- */ +.hero { padding: 92px 0 60px; text-align: center; } +.kicker { + display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 2px; + text-transform: uppercase; color: var(--neon2); border: 1px solid var(--border-glow); + padding: 6px 14px; border-radius: 20px; margin-bottom: 22px; + background: rgba(0, 229, 255, 0.05); +} +.hero h1 { + font-size: clamp(38px, 7vw, 62px); margin: 0 0 18px; line-height: 1.05; + letter-spacing: -1.5px; font-weight: 800; +} +.grad { + background: linear-gradient(100deg, var(--neon) 0%, var(--neon2) 50%, var(--neon3) 100%); + -webkit-background-clip: text; background-clip: text; color: transparent; + filter: drop-shadow(0 0 22px rgba(0, 229, 255, .35)); +} +.hero p.lede { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 34px; } +.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { - display: inline-block; padding: 12px 26px; border-radius: 8px; font-weight: 700; - font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: .15s; + display: inline-block; padding: 13px 28px; border-radius: 10px; font-weight: 700; + font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: all .18s ease; + font-family: var(--head); } -.btn-primary { background: var(--neon); color: #04140c; box-shadow: 0 0 22px rgba(0,255,156,.35); } -.btn-primary:hover { box-shadow: 0 0 34px var(--neon); } -.btn-ghost { background: transparent; color: var(--neon2); border-color: var(--border-glow); } -.btn-ghost:hover { border-color: var(--neon2); box-shadow: 0 0 16px rgba(0,229,255,.3); } +.btn-primary { + background: linear-gradient(90deg, var(--neon), var(--neon2)); color: #03120a; + box-shadow: 0 0 26px rgba(0, 255, 156, .35); +} +.btn-primary:hover { box-shadow: 0 0 40px rgba(0, 255, 156, .55); transform: translateY(-2px); } +.btn-ghost { background: rgba(255,255,255,.03); color: var(--text); border-color: var(--border); backdrop-filter: blur(8px); } +.btn-ghost:hover { border-color: var(--neon2); box-shadow: 0 0 18px rgba(0,229,255,.25); } -/* sections */ -section { padding: 48px 0; } -h2 { font-size: 28px; margin: 0 0 10px; } -h2 .accent { color: var(--neon2); text-shadow: 0 0 16px var(--neon2); } -.sub { color: var(--muted); margin-bottom: 28px; } +/* ---- terminal window ---- */ +.term { + max-width: 640px; margin: 40px auto 0; text-align: left; border-radius: 12px; + border: 1px solid var(--border); background: rgba(3, 6, 11, 0.85); + backdrop-filter: blur(10px); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); +} +.term .bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); } +.term .bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } +.term .bar i:nth-child(1){ background:#ff5f57 } .term .bar i:nth-child(2){ background:#febc2e } .term .bar i:nth-child(3){ background:#28c840 } +.term pre { margin: 0; padding: 20px 22px; font-family: var(--mono); font-size: 13px; color: #9fe8c8; overflow-x: auto; } +.term .k { color: var(--neon2); } +.term .c { color: #4a5a6a; } -.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } +/* ---- sections ---- */ +section { padding: 60px 0; } +h2 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 12px; letter-spacing: -.5px; font-weight: 800; } +h2 .accent { background: linear-gradient(90deg, var(--neon), var(--neon2)); -webkit-background-clip: text; background-clip: text; color: transparent; } +.sub { color: var(--muted); margin-bottom: 32px; font-size: 16px; } + +/* ---- stats bar ---- */ +.statsbar { + display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; + padding: 28px; border-radius: 14px; border: 1px solid var(--border); + background: var(--surface); backdrop-filter: blur(12px); margin-bottom: 8px; +} +.statsbar .s .n { font-size: 32px; font-weight: 800; font-family: var(--mono); } +.statsbar .s .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; } + +/* ---- grid + cards ---- */ +.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .card { - background: var(--surface); border: 1px solid var(--border); border-radius: 12px; - padding: 22px; transition: .15s; + background: var(--surface); border: 1px solid var(--border); border-radius: 14px; + padding: 24px; transition: all .2s ease; backdrop-filter: blur(10px); position: relative; overflow: hidden; } -.card:hover { border-color: var(--neon); box-shadow: 0 0 22px rgba(0,255,156,.12); transform: translateY(-2px); } -.card h3 { margin: 0 0 8px; color: var(--neon); font-size: 16px; } -.card p { margin: 0; color: var(--muted); font-size: 13.5px; } -.card .ic { font-size: 26px; display: block; margin-bottom: 10px; } +.card::before { + content: ""; position: absolute; inset: 0; border-radius: 14px; opacity: 0; + background: radial-gradient(400px 200px at 20% 0%, rgba(0,255,156,.08), transparent 60%); + transition: opacity .25s; pointer-events: none; +} +.card:hover { border-color: var(--border-glow); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.45); } +.card:hover::before { opacity: 1; } +.card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; } +.card p { margin: 0; color: var(--muted); font-size: 14px; } +.card .ic { font-size: 28px; display: block; margin-bottom: 12px; } +.card .ic.g { background: linear-gradient(135deg, var(--neon), var(--neon2)); -webkit-background-clip: text; background-clip: text; color: transparent; } -/* code block */ +/* ---- code block ---- */ pre.code { - background: #03060b; border: 1px solid var(--border); border-radius: 10px; - padding: 18px; overflow-x: auto; font-size: 13px; color: #9fe8c8; + background: rgba(3,6,11,.8); border: 1px solid var(--border); border-radius: 10px; + padding: 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; color: #9fe8c8; } pre.code .k { color: var(--neon2); } -/* forms */ -.form-card { max-width: 420px; margin: 40px auto; } -label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; } +/* ---- forms ---- */ +.form-card { max-width: 440px; margin: 44px auto; } +label { display: block; font-size: 12px; color: var(--muted); margin: 16px 0 6px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; } input, select { - width: 100%; background: var(--bg2); border: 1px solid var(--border); color: var(--text); - border-radius: 8px; padding: 11px 13px; font-family: var(--mono); font-size: 14px; + width: 100%; background: rgba(3,6,11,.7); border: 1px solid var(--border); color: var(--text); + border-radius: 9px; padding: 12px 14px; font-family: var(--head); font-size: 14px; transition: all .15s; } -input:focus, select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(0,255,156,.15); } -input[type=submit] { margin-top: 20px; background: var(--neon); color: #04140c; font-weight: 700; border: none; cursor: pointer; } -input[type=submit]:hover { box-shadow: 0 0 24px var(--neon); } +input:focus, select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(0,255,156,.15); background: rgba(3,6,11,.9); } +input[type=submit] { + margin-top: 22px; background: linear-gradient(90deg, var(--neon), var(--neon2)); + color: #03120a; font-weight: 700; border: none; cursor: pointer; font-size: 15px; padding: 13px; +} +input[type=submit]:hover { box-shadow: 0 0 26px rgba(0,255,156,.5); } -/* flash */ -.flash { padding: 11px 16px; border-radius: 8px; margin: 16px 0; font-size: 14px; border: 1px solid; } +/* ---- flash ---- */ +.flash { padding: 13px 18px; border-radius: 10px; margin: 16px 0; font-size: 14px; border: 1px solid; backdrop-filter: blur(8px); } .flash.ok { color: var(--ok); border-color: rgba(0,255,156,.4); background: rgba(0,255,156,.06); } .flash.warn { color: var(--warn); border-color: rgba(255,183,77,.4); background: rgba(255,183,77,.06); } -/* plans */ +/* ---- plans ---- */ .plan { position: relative; } -.plan .price { font-size: 34px; font-weight: 700; color: var(--neon); text-shadow: 0 0 18px var(--neon); } -.plan .per { color: var(--muted); font-size: 13px; } -.plan .tag { position: absolute; top: 18px; right: 18px; font-size: 11px; color: var(--neon3); border: 1px solid var(--neon3); padding: 2px 8px; border-radius: 20px; } -.plan ul { list-style: none; padding: 0; margin: 16px 0; color: var(--muted); font-size: 13.5px; } -.plan ul li { padding: 4px 0; } +.plan .price { font-size: 38px; font-weight: 800; font-family: var(--mono); } +.plan .price span { font-size: 15px; color: var(--muted); font-weight: 400; } +.plan .per { color: var(--muted); font-size: 13px; margin-top: -2px; } +.plan .tag { position: absolute; top: 20px; right: 20px; font-size: 11px; color: var(--neon3); border: 1px solid var(--neon3); padding: 3px 10px; border-radius: 20px; background: rgba(178,107,255,.08); } +.plan ul { list-style: none; padding: 0; margin: 16px 0; color: var(--muted); font-size: 14px; } +.plan ul li { padding: 5px 0; } .plan ul li::before { content: "▸ "; color: var(--neon); } -.plan form { margin-top: 6px; } +.plan form { margin-top: 8px; } +.plan.featured { border-color: var(--border-glow); box-shadow: 0 0 30px rgba(0,229,255,.12); } -/* dashboard */ +/* ---- dashboard ---- */ .dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } -.stat { display: flex; flex-direction: column; } -.stat .val { font-size: 30px; font-weight: 700; color: var(--neon2); text-shadow: 0 0 16px var(--neon2); } -.stat .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; } +.stat { display: flex; flex-direction: column; } +.stat .val { font-size: 30px; font-weight: 800; font-family: var(--mono); background: linear-gradient(90deg, var(--neon), var(--neon2)); -webkit-background-clip: text; background-clip: text; color: transparent; } +.stat .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .copy { display: flex; gap: 8px; align-items: center; } .copy input { flex: 1; } -.copy button { background: var(--surface2); color: var(--neon2); border: 1px solid var(--border); padding: 10px 16px; border-radius: 8px; cursor: pointer; font-family: var(--mono); } +.copy button { background: var(--surface2); color: var(--neon2); border: 1px solid var(--border); padding: 10px 16px; border-radius: 9px; cursor: pointer; font-family: var(--mono); font-size: 13px; transition: all .15s; } +.copy button:hover { border-color: var(--neon2); } .switch { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); } +table { border-collapse: collapse; } +th { color: var(--muted); text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; } +td, th { padding: 8px 10px; } + footer { - border-top: 1px solid var(--border); padding: 26px 0; margin-top: 60px; text-align: center; - color: var(--muted); font-size: 13px; + border-top: 1px solid var(--border); padding: 30px 0; margin-top: 70px; text-align: center; + color: var(--muted); font-size: 13px; position: relative; z-index: 1; } footer a { color: var(--neon3); } @@ -139,7 +238,8 @@ footer a { color: var(--neon3); } .mono { font-family: var(--mono); } @media (max-width: 720px) { - .hero h1 { font-size: 32px; } + .hero h1 { font-size: 34px; } .dash-grid { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr; } + .nav-links a:not(.cta) { display: none; } } diff --git a/templates/base.html b/templates/base.html index 0f83c88..5da3a1b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,19 +9,25 @@ + + + + +
+ @@ -40,5 +46,45 @@  ·  llms.txt + + diff --git a/templates/index.html b/templates/index.html index 9570824..65590f1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,35 +1,58 @@ {% extends "base.html" %} {% block body %}
-

The cleanest residential proxies on the web.

-

Global geo-targeted SOCKS5 & HTTP proxies with an encrypted backend. No KYC. No email required. Pay with Bitcoin and connect in seconds.

+ ◈ Residential · ISP · Datacenter +

The cleanest proxies
on the web.

+

Global geo-targeted SOCKS5 & HTTP proxies with an encrypted backend. No KYC. No email. Pay in Bitcoin and connect in seconds — built for humans and AI agents.

Get proxies → - View plans + View pricing
- 
$ curl -x socks5h://user:pass@host:1080 https://ipinfo.io/ip
-# 81.5.104.39  ← your clean, geo-targeted egress
+ +
+
+ 
# your clean, geo-targeted egress
+$ curl -x socks5h://user:pass@host:1080 https://ipinfo.io/ip
+81.5.104.39   ← London, GB · residential ISP
+
+
+ +
+
190+
Countries
+
513
ISP cities
+
432
Datacenter cities
+
2
Protocols · SOCKS5 + HTTP
+
0
KYC · no email, no ID

Built different.

-

Everything a serious operator needs, nothing that gets in the way.

+

Everything a serious operator needs. Nothing that gets in the way.

-
🌍

Global geo-targeting

Country, city and region targeting across a real residential pool — not a VPN masquerade.

-
🔌

SOCKS5 & HTTP

Native SOCKS5 and HTTP CONNECT. Drop-in for any tool, bot, or agent.

-
🔐

Encrypted backend

Your traffic rides an encrypted transport from end to end. Per-user credentials, always.

-
⚡

Instant activation

Pay with Bitcoin, top up in seconds. No verification queue, no paperwork.

-
🕶️

No KYC

Just a username and password. That's it.

-
🤖

Agent-ready

REST API, llms.txt, and a schema agents can parse. Programmatic access is a first-class feature.

+
🌍

Global geo-targeting

Country, city, and region targeting across a real residential pool — not a VPN masquerade.

+
🔌

SOCKS5 & HTTP

Native SOCKS5 and HTTP CONNECT. Drop-in for any tool, bot, or agent.

+
🔐

Encrypted backend

Your traffic rides an encrypted transport end-to-end. Per-user credentials, always.

+
⚡

Instant activation

Pay with Bitcoin, connect in seconds. No verification queue, no paperwork.

+
🕶️

No KYC

Just a username and password. That's it.

+
🤖

Agent-ready

REST API, llms.txt, and a one-call purchase endpoint agents can parse.

Sticky or rotating.

-

Choose a stable session IP or a fresh egress on every request — switch anytime from your dashboard.

+

Hold a stable session IP, or roll a fresh egress on every request — flip it anytime from your dashboard.

+
+

Sticky sessions

Pin the same IP for 30 minutes. Built for account sessions and stateful workflows.

+

Rotating

A new IP every connection. Built for scraping, crawling, and high-volume jobs.

+
+
+ +
+

How it works.

-

Sticky sessions

Hold the same IP for 30 minutes. Ideal for account sessions and stateful tasks.

-

Rotating

A new IP on every connection. Ideal for scraping, crawling, and high-volume jobs.

+
1

Create an account

Username + password. No email, no KYC.

+
2

Top up with Bitcoin

Pick a plan, pay sats, balance credits instantly.

+
3

Connect

Grab your SOCKS5 string from the dashboard and go.

diff --git a/templates/plans.html b/templates/plans.html index 36d3a16..ff4e798 100644 --- a/templates/plans.html +++ b/templates/plans.html @@ -6,7 +6,7 @@
{% for p in plans %} -
+
{% if p.gb >= 100 %}BEST VALUE{% endif %}

{{ p.name }}

{{ p.price_sats }} sats