ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test: improve css

Browse Source
This commit is contained in:
nate
2026-03-19 12:08:06 +04:00
parent 437b493567
commit c1392a7dd9
13 changed files with 282 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/landing.ejs
+53 -36
View File
@@ -27,15 +27,15 @@
/* Terminal window */
.terminal {
background: #111111;
border: 1px solid #1e1e1e;
background: linear-gradient(180deg, #131313 0%, #0f0f0f 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 60px rgba(59, 130, 246, 0.06), 0 20px 60px rgba(0,0,0,0.5);
}
.terminal-bar {
background: #1a1a1a;
border-bottom: 1px solid #1e1e1e;
border-bottom: 1px solid rgba(38, 38, 44, 0.5);
padding: 12px 16px;
display: flex;
align-items: center;
@@ -75,13 +75,14 @@
/* Glow card */
.glow-card {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(17, 17, 17, 1) 50%);
border: 1px solid #1e1e1e;
transition: border-color 0.3s, box-shadow 0.3s;
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.glow-card:hover {
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 0 30px rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.25);
box-shadow: 0 0 30px rgba(59, 130, 246, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
/* Comparison bar */
@@ -113,14 +114,30 @@
vertical-align: text-bottom;
margin-left: 2px;
}
/* Pricing card tiers */
.pricing-free {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
}
.pricing-pro {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(17, 17, 17, 0.9) 100%);
border: 1px solid rgba(59, 130, 246, 0.3);
box-shadow: 0 0 40px rgba(59, 130, 246, 0.08);
}
.pricing-lifetime {
background: linear-gradient(180deg, rgba(234, 179, 8, 0.06) 0%, rgba(17, 17, 17, 0.9) 100%);
border: 1px solid rgba(234, 179, 8, 0.25);
box-shadow: 0 0 30px rgba(234, 179, 8, 0.05);
}
</style>
</head>
<body class="bg-[#0a0a0a] text-gray-100 font-sans antialiased grid-bg">
<!-- ─── HEADER ─── -->
<header class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800/60 bg-[#0a0a0a]/80 backdrop-blur-md">
<header class="fixed top-0 left-0 right-0 z-50 border-b border-border-subtle bg-[#0a0a0a]/70 backdrop-blur-md">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="/" class="font-mono text-lg font-bold tracking-tight">Ping<span class="text-blue-400">QL</span></a>
<a href="/" class="font-mono text-lg font-bold tracking-tight group">Ping<span class="text-blue-400 transition-all group-hover:drop-shadow-[0_0_8px_rgba(59,130,246,0.4)]">QL</span></a>
<nav class="hidden md:flex items-center gap-7 text-sm text-gray-400">
<a href="/docs" class="hover:text-gray-200 transition-colors">Docs</a>
<a href="/privacy" class="hover:text-gray-200 transition-colors">Privacy</a>
@@ -128,7 +145,7 @@
</nav>
<div class="flex items-center gap-3">
<a href="/dashboard" class="text-sm text-gray-400 hover:text-gray-200 transition-colors">Sign in</a>
<a href="/dashboard" class="text-sm bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg font-medium transition-colors">Get started</a>
<a href="/dashboard" class="text-sm text-white px-4 py-2 rounded-lg font-medium transition-all" style="background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 1px 2px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1)">Get started</a>
</div>
</div>
</header>
@@ -139,8 +156,8 @@
<div class="grid lg:grid-cols-2 gap-16 items-center">
<!-- Left -->
<div class="fade-up">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-gray-800 text-xs text-gray-400 mb-6 font-mono">
<span class="w-2 h-2 rounded-full bg-green-500 pulse-dot"></span>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border-subtle text-xs text-gray-400 mb-6 font-mono">
<span class="w-2 h-2 rounded-full bg-green-500 pulse-dot" style="box-shadow:0 0 8px rgba(34,197,94,0.4)"></span>
All systems operational
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.1] mb-6">
@@ -150,11 +167,11 @@
Go beyond simple pings. Write queries against status codes, JSON bodies, HTML selectors, headers, cert expiry — everything your response contains.
</p>
<div class="flex flex-wrap gap-4">
<a href="/dashboard" class="inline-flex items-center gap-2 px-6 py-3 bg-brand hover:bg-blue-500 text-white font-medium rounded-lg transition-colors text-sm">
<a href="/dashboard" class="inline-flex items-center gap-2 px-6 py-3 text-white font-medium rounded-lg transition-all text-sm" style="background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 1px 2px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1)">
Get Started Free
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
<a href="/docs" class="inline-flex items-center gap-2 px-6 py-3 border border-gray-700 hover:border-gray-500 text-gray-300 font-medium rounded-lg transition-colors text-sm">
<a href="/docs" class="inline-flex items-center gap-2 px-6 py-3 border border-border-subtle hover:border-border-strong text-gray-300 font-medium rounded-lg transition-colors text-sm">
Read the Docs
</a>
</div>
@@ -176,7 +193,7 @@
<span class="syn-brace">{</span> <span class="syn-op">"$certExpiry"</span><span class="syn-brace">:</span> <span class="syn-brace">{</span> <span class="syn-op">"$gt"</span><span class="syn-brace">:</span> <span class="syn-num">14</span> <span class="syn-brace">}</span> <span class="syn-brace">}</span>
<span class="syn-brace">]</span>
<span class="syn-brace">}</span></pre>
<div class="mt-4 pt-4 border-t border-gray-800 text-xs text-gray-500">
<div class="mt-4 pt-4 border-t border-border-subtle text-xs text-gray-500">
<span class="syn-comment">// status &lt; 400 AND $.db.status = "ok" AND $certExpiry &gt; 14 days</span>
</div>
</div>
@@ -200,7 +217,7 @@
<!-- Comparison -->
<div class="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">
<!-- Others -->
<div class="rounded-xl border border-gray-800 bg-[#111] p-6">
<div class="rounded-xl border border-border-subtle bg-surface-solid p-6">
<div class="text-sm text-gray-500 uppercase tracking-wider mb-4 font-mono">Others</div>
<div class="space-y-4">
<div class="flex items-center gap-3">
@@ -213,14 +230,14 @@
<span class="text-gray-400 text-sm">GET /api/health → 500</span>
<span class="ml-auto text-red-500 text-xs font-mono">DOWN</span>
</div>
<div class="mt-4 pt-4 border-t border-gray-800 text-xs text-gray-500">
<div class="mt-4 pt-4 border-t border-border-subtle text-xs text-gray-500">
That's it. That's all you get.
</div>
</div>
</div>
<!-- PingQL -->
<div class="rounded-xl border border-blue-500/30 bg-[#111] p-6 shadow-[0_0_40px_rgba(59,130,246,0.06)]">
<div class="rounded-xl border border-blue-500/30 bg-surface-solid p-6 shadow-glow-sm">
<div class="text-sm text-brand uppercase tracking-wider mb-4 font-mono">PingQL</div>
<div class="space-y-3 text-sm font-mono">
<div class="flex items-center gap-2">
@@ -349,7 +366,7 @@
<!-- ─── PRIVACY ─── -->
<section id="privacy" class="py-24 px-6">
<div class="max-w-4xl mx-auto">
<div class="rounded-2xl border border-gray-800 bg-gradient-to-b from-[#111] to-[#0a0a0a] p-8 sm:p-12">
<div class="rounded-2xl border border-border-subtle bg-gradient-to-b from-surface-solid to-[#0a0a0a] p-8 sm:p-12" style="box-shadow:0 1px 3px rgba(0,0,0,0.3)">
<div class="flex items-start gap-4 mb-8">
<div class="w-12 h-12 rounded-xl bg-green-500/10 border border-green-500/20 flex items-center justify-center shrink-0">
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
@@ -391,7 +408,7 @@
</div>
</div>
<div class="mt-8 pt-6 border-t border-gray-800 flex items-center gap-2 text-xs text-gray-500">
<div class="mt-8 pt-6 border-t border-border-subtle flex items-center gap-2 text-xs text-gray-500">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
Hosted in EU (Prague) — GDPR compliant
</div>
@@ -461,7 +478,7 @@
<!-- CLI teaser -->
<div class="mt-8 text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-gray-800 text-xs text-gray-500 font-mono">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-border-subtle text-xs text-gray-500 font-mono">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg>
CLI coming soon — <span class="text-gray-400">pingql watch mon_a1b2c3</span>
</div>
@@ -477,7 +494,7 @@
<div class="grid sm:grid-cols-3 gap-6 max-w-4xl mx-auto">
<!-- Free -->
<div class="glow-card rounded-xl p-8 text-left">
<div class="pricing-free rounded-xl p-8 text-left">
<div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Free</div>
<div class="text-4xl font-bold mb-1">$0</div>
<div class="text-sm text-gray-500 mb-6">forever</div>
@@ -506,33 +523,33 @@
</div>
<!-- Pro -->
<div class="rounded-xl border border-blue-500/30 bg-[#111] p-8 text-left relative">
<div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Pro</div>
<div class="pricing-pro rounded-xl p-8 text-left relative">
<div class="text-xs text-blue-400 uppercase tracking-wider font-mono mb-2">Pro</div>
<div class="text-4xl font-bold mb-1">$12</div>
<div class="text-sm text-gray-500 mb-6">per month</div>
<ul class="space-y-3 text-sm text-gray-400">
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
500 monitors
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
2s check interval
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Webhook notifications
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Priority support
</li>
</ul>
</div>
<!-- Lifetime -->
<div class="rounded-xl border border-yellow-500/30 bg-[#111] p-8 text-left relative">
<div class="text-xs text-yellow-500/70 uppercase tracking-wider font-mono mb-2">Lifetime</div>
<div class="pricing-lifetime rounded-xl p-8 text-left relative">
<div class="text-xs text-yellow-500 uppercase tracking-wider font-mono mb-2">Lifetime</div>
<div class="text-4xl font-bold mb-1">$140</div>
<div class="text-sm text-gray-500 mb-6">one-time</div>
<ul class="space-y-3 text-sm text-gray-400">
@@ -557,7 +574,7 @@
</div>
<div class="mt-12">
<a href="/dashboard" class="inline-flex items-center gap-2 px-8 py-3.5 bg-brand hover:bg-blue-500 text-white font-medium rounded-lg transition-colors text-sm">
<a href="/dashboard" class="inline-flex items-center gap-2 px-8 py-3.5 text-white font-medium rounded-lg transition-all text-sm" style="background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 1px 2px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1)">
Get Started
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>
@@ -566,11 +583,11 @@
</section>
<!-- ─── FOOTER ─── -->
<footer class="border-t border-gray-800/50 py-12 px-6">
<footer class="border-t border-border-subtle py-16 px-6">
<div class="max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-6">
<div class="flex items-center gap-8">
<a href="/" class="text-lg font-bold tracking-tight font-mono">Ping<span class="text-brand">QL</span></a>
<nav class="flex items-center gap-5 text-sm text-gray-500">
<nav class="flex items-center gap-6 text-sm text-gray-500">
<a href="/docs" class="hover:text-gray-300 transition-colors">Docs</a>
<a href="/privacy" class="hover:text-gray-300 transition-colors">Privacy</a>
<a href="/terms" class="hover:text-gray-300 transition-colors">Terms</a>
@@ -583,4 +600,4 @@
</footer>
</body>
</html>
</html>