92 lines
No EOL
3.2 KiB
HTML
92 lines
No EOL
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Invest</title>
|
||
<script src="https://js.stripe.com/v3/"></script>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
||
body { font-family: 'Inter', system-ui, sans-serif; }
|
||
.blink { animation: blink 1.5s steps(1) infinite; }
|
||
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen bg-black text-white flex items-center justify-center p-5">
|
||
|
||
<div class="max-w-lg w-full space-y-16">
|
||
|
||
<!-- Header -->
|
||
<div class="text-center space-y-4">
|
||
<h1 class="text-6xl md:text-8xl font-black tracking-tighter">
|
||
INVEST
|
||
</h1>
|
||
<p class="text-2xl md:text-3xl font-light text-zinc-500">
|
||
One-time. No bullshit.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Amount -->
|
||
<div class="space-y-8">
|
||
<div class="text-center">
|
||
<span class="text-8xl md:text-9xl font-black tracking-tight">
|
||
$<span id="display">100</span>
|
||
</span>
|
||
<span class="text-4xl font-light text-zinc-600"> USD</span>
|
||
</div>
|
||
|
||
<input
|
||
type="number"
|
||
id="amount"
|
||
min="5"
|
||
value="100"
|
||
class="w-full bg-transparent border-t-0 border-x-0 border-b-4 border-white text-6xl text-center font-bold focus:outline-none focus:border-sky-400 transition pb-2"
|
||
placeholder="0"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Pay Button -->
|
||
<div class="pt-8">
|
||
<button id="pay" class="group relative w-full overflow-hidden bg-sky-400 hover:bg-sky-300 text-black font-black text-2xl uppercase tracking-wider py-8 transition-all">
|
||
<span class="relative z-10">Pay & Invest Now</span>
|
||
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Trust line – tiny and confident -->
|
||
<div class="text-center space-y-3 text-zinc-600 text-sm uppercase tracking-widest">
|
||
<div>Secured by Stripe • 256-bit encryption</div>
|
||
<div>Funds received instantly • Zero fees on our end</div>
|
||
<div class="pt-4 text-sky-400 blink">Live • Accepting payments</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
const stripe = Stripe('pk_live_XXXXXXXXXXXXXXXXXXXXXXXX'); // ← your key
|
||
|
||
const amountInput = document.getElementById('amount');
|
||
const display = document.getElementById('display');
|
||
|
||
amountInput.addEventListener('input', (e) => {
|
||
let val = e.target.value.replace(/\D/g,'') || '0';
|
||
e.target.value = val;
|
||
display.textContent = Number(val).toLocaleString();
|
||
});
|
||
|
||
document.getElementById('pay').addEventListener('click', () => {
|
||
let amount = parseInt(amountInput.value);
|
||
if (!amount || amount < 5) return alert('Minimum $5');
|
||
|
||
stripe.redirectToCheckout({
|
||
lineItems: [{ price: 'price_1YOUR_PRICE_ID', quantity: 1 }],
|
||
mode: 'payment',
|
||
successUrl: window.location.origin + '/success.html',
|
||
cancelUrl: window.location.origin,
|
||
billingAddressCollection: 'required',
|
||
}).then(r => r.error && alert(r.error.message));
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |