maverick/money
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

x

Browse source
This commit is contained in:
Omar Najjar 2025-11-27 16:55:52 +11:00
parent 47c53611a4
commit 0dfa113249
2 changed files with 66 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View file

Binary file not shown.

102
index.html
View file

@ -3,59 +3,89 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Invest Now - Real Payments</title>
<title>Invest</title>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: white; text-align: center; padding: 60px 20px; }
.card { max-width: 480px; margin: 0 auto; background: #1e293b; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
h1 { font-size: 2.5em; margin-bottom: 10px; }
p { opacity: 0.9; line-height: 1.6; }
input { width: 100%; padding: 14px; margin: 15px 0; border-radius: 8px; border: none; font-size: 18px; text-align: center; }
button { width: 100%; padding: 16px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 20px; cursor: pointer; margin-top: 10px; }
button:hover { background: #4f46e5; }
.small { font-size: 0.8em; opacity: 0.7; margin-top: 20px; }
@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>
<div class="card">
<h1>Invest Today</h1>
<p>One-time contribution to support our project.<br>All major cards accepted.</p>
<body class="min-h-screen bg-black text-white flex items-center justify-center p-5">
<input type="number" id="amount" placeholder="100" min="5" step="1" value="100"/>
<div style="margin:10px 0; font-weight:bold;">USD $ <span id="display">100</span></div>
<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>
<button id="pay">Pay & Invest Now</button>
<div class="small">Secured by Stripe • Funds go directly to us • Instant confirmation</div>
</div>
<script>
const stripe = Stripe('pk_live_XXXXXXXXXXXXXXXXXXXXXXXX'); // Put your real publishable key here
const stripe = Stripe('pk_live_XXXXXXXXXXXXXXXXXXXXXXXX'); // ← your key
// Update displayed amount live
document.getElementById('amount').addEventListener('input', (e) => {
const val = e.target.value || 0;
document.getElementById('display').textContent = val;
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', () => {
const amount = parseInt(document.getElementById('amount').value);
if (!amount || amount < 5) {
alert('Please enter at least $5');
return;
}
let amount = parseInt(amountInput.value);
if (!amount || amount < 5) return alert('Minimum $5');
// This uses Stripe’s client-only mode (no backend needed)
stripe.redirectToCheckout({
lineItems: [{ price: 'price_1YOUR_PRICE_ID_HERE', quantity: 1 }], // fixed price
// OR use dynamic amount (requires a tiny backend) → see note below
lineItems: [{ price: 'price_1YOUR_PRICE_ID', quantity: 1 }],
mode: 'payment',
successUrl: window.location.origin + '?success=true',
cancelUrl: window.location.origin + '?canceled=true',
successUrl: window.location.origin + '/success.html',
cancelUrl: window.location.origin,
billingAddressCollection: 'required',
customerCreation: 'always',
}).then((result) => {
if (result.error) alert(result.error.message);
});
}).then(r => r.error && alert(r.error.message));
});
</script>
</body>