234 lines
No EOL
9.5 KiB
HTML
234 lines
No EOL
9.5 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>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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 } }
|
|
.scale-75 { transform: scale(0.75); transform-origin: center center; }
|
|
|
|
.content-box { max-width: 28rem; margin: 0 auto; width: 100%; }
|
|
.amount-container { padding: 3rem 0; width: 100%; }
|
|
.amount-wrapper {
|
|
display: flex; justify-content: center; align-items: baseline;
|
|
gap: 0.4ch; font-weight: 900; letter-spacing: -0.05em; line-height: 1;
|
|
white-space: nowrap; width: 100%;
|
|
}
|
|
#amountInput {
|
|
background: transparent; border: none; outline: none; color: white;
|
|
font: inherit; text-align: center; min-width: 1ch; caret-color: #0ea5e9;
|
|
}
|
|
.usd { font-size: 0.38em; font-weight: 400; color: #71717a; }
|
|
|
|
/* Toggle Switch */
|
|
.toggle-group {
|
|
display: flex; background: #111; border: 4px solid white;
|
|
border-radius: 1rem; overflow: hidden; width: fit-content; margin: 2rem auto;
|
|
}
|
|
.toggle-btn {
|
|
padding: 1rem 2rem; font-weight: 900; text-transform: uppercase;
|
|
font-size: 1.1rem; cursor: pointer; transition: all 0.3s;
|
|
}
|
|
.toggle-btn.active {
|
|
background: white; color: black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-black text-white flex items-center justify-center p-5">
|
|
|
|
<div class="scale-75 w-full">
|
|
<div class="content-box mx-auto space-y-16">
|
|
|
|
<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="amount-container">
|
|
<div class="amount-wrapper text-9xl md:text-[11rem]">
|
|
$<input type="text" id="amountInput" value="100" placeholder="0">
|
|
<span class="usd">USD</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ONE-TIME vs RECURRING TOGGLE -->
|
|
<div class="toggle-group">
|
|
<div class="toggle-btn active" data-type="one-time">One-Time</div>
|
|
<div class="toggle-btn" data-type="recurring">Recurring Monthly</div>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="email" id="email" required placeholder="your@email.com"
|
|
class="w-full bg-transparent border-t-0 border-x-0 border-b-4 border-white text-4xl text-center font-medium focus:outline-none focus:border-sky-400 transition pb-2">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
<button data-months="6" class="term-btn py-4 border-4 border-white text-2xl font-bold hover:bg-white hover:text-black transition">6 MO</button>
|
|
<button data-months="12" class="term-btn py-4 border-4 border-white text-2xl font-bold hover:bg-white hover:text-black transition">1 YR</button>
|
|
<button data-months="24" class="term-btn py-4 border-4 border-white text-2xl font-bold hover:bg-white hover:text-black transition bg-white text-black">2 YR</button>
|
|
<button data-months="60" class="term-btn py-4 border-4 border-white text-2xl font-bold hover:bg-white hover:text-black transition">5 YR</button>
|
|
</div>
|
|
|
|
<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 rounded-2xl">
|
|
<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>
|
|
|
|
<div class="pt-12 text-center">
|
|
<button id="checkReturns" class="text-sky-400 hover:text-sky-300 underline uppercase tracking-widest text-lg font-bold">
|
|
Check Projected Returns
|
|
</button>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div id="returnsModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
|
|
<div class="absolute inset-0 bg-black/90 backdrop-blur-sm"></div>
|
|
<div class="relative w-full max-w-4xl mx-4 bg-gray-950 border border-gray-800 rounded-3xl shadow-2xl p-10 md:p-16">
|
|
<div class="text-center space-y-10">
|
|
<div>
|
|
<h2 class="text-9xl md:text-[11rem] font-black leading-none text-sky-400">+69%</h2>
|
|
<p class="text-5xl md:text-6xl font-black mt-6">$10,000 to $16,900</p>
|
|
<p class="text-2xl md:text-3xl text-zinc-400 mt-4">in 24 months</p>
|
|
</div>
|
|
<div class="h-96 md:h-[28rem] bg-gray-900/60 rounded-3xl p-6 border border-gray-800">
|
|
<canvas id="returnsChart"></canvas>
|
|
</div>
|
|
<p class="text-xl text-zinc-500">Example based on $10,000 investment</p>
|
|
<button id="closeModal" class="w-full max-w-md mx-auto py-6 bg-sky-500 hover:bg-sky-400 text-black text-3xl font-black uppercase tracking-wider rounded-2xl transition">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const amountInput = document.getElementById('amountInput');
|
|
const wrapper = amountInput.parentElement;
|
|
let paymentType = 'one-time'; // default
|
|
|
|
// Toggle One-Time / Recurring
|
|
document.querySelectorAll('.toggle-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
paymentType = btn.dataset.type;
|
|
|
|
// Update subtitle
|
|
const subtitle = document.querySelector('p.text-zinc-500');
|
|
if (paymentType === 'recurring') {
|
|
subtitle.textContent = 'Every month. Cancel anytime.';
|
|
} else {
|
|
subtitle.textContent = 'One-time. No bullshit.';
|
|
}
|
|
});
|
|
});
|
|
|
|
function updateSize() {
|
|
let raw = amountInput.value.replace(/[^0-9]/g, '');
|
|
if (!raw) raw = '0';
|
|
amountInput.value = Number(raw).toLocaleString();
|
|
|
|
const digitCount = raw.length;
|
|
if (digitCount <= 1) wrapper.style.fontSize = '6rem';
|
|
else if (digitCount === 3) wrapper.style.fontSize = '6rem';
|
|
else if (digitCount === 4) wrapper.style.fontSize = '4.5rem';
|
|
else if (digitCount === 5) wrapper.style.fontSize = '3.5rem';
|
|
else if (digitCount >= 6) wrapper.style.fontSize = '2.8rem';
|
|
}
|
|
|
|
amountInput.addEventListener('input', updateSize);
|
|
amountInput.addEventListener('focus', () => amountInput.select());
|
|
amountInput.addEventListener('keydown', e => {
|
|
if ([8,37,39,46,9].includes(e.keyCode) || e.metaKey) return;
|
|
if (!/[0-9]/.test(e.key)) e.preventDefault();
|
|
});
|
|
updateSize();
|
|
|
|
// Term selection
|
|
document.querySelectorAll('.term-btn').forEach(btn => {
|
|
btn.onclick = () => {
|
|
document.querySelectorAll('.term-btn').forEach(b => b.classList.remove('bg-white','text-black'));
|
|
btn.classList.add('bg-white','text-black');
|
|
};
|
|
});
|
|
|
|
// Pay Button using fixed payment links (change to price ids later)
|
|
document.getElementById('pay').onclick = () => {
|
|
const amount = parseInt(amountInput.value.replace(/,/g,'')) || 0;
|
|
const email = document.getElementById('email').value.trim();
|
|
|
|
if (amount < 5) return alert('Minimum $5');
|
|
if (!email.includes('@')) return alert('Valid email required');
|
|
|
|
let url = paymentType === 'recurring'
|
|
? 'https://buy.stripe.com/test_3cI7sK5eF8lheXn76DdIA02'
|
|
: 'https://buy.stripe.com/test_dRm9AS4aB7hd7uV76DdIA01';
|
|
|
|
url += `?prefilled_email=${encodeURIComponent(email)}`;
|
|
if (paymentType !== 'recurring') {
|
|
url += `&amount=${amount * 100}`;
|
|
}
|
|
|
|
window.location.href = url;
|
|
};
|
|
|
|
// Chart
|
|
let chart = null;
|
|
function createChart() {
|
|
if (chart) chart.destroy();
|
|
chart = new Chart(document.getElementById('returnsChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['0','3','6','9','12','15','18','21','24'],
|
|
datasets: [{
|
|
data: [10000,10800,11600,12400,13200,14000,14800,15700,16900],
|
|
borderColor: '#0ea5e9',
|
|
backgroundColor: 'rgba(14,165,233,0.3)',
|
|
fill: true,
|
|
tension: .45,
|
|
borderWidth: 9,
|
|
pointRadius: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
x: { ticks: { color: '#cbd5e1' }, grid: { color: '#334155' } },
|
|
y: { ticks: { color: '#cbd5e1', callback: v => '$'+v.toLocaleString() }, grid: { color: '#334155' } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
document.getElementById('checkReturns').onclick = () => {
|
|
document.getElementById('returnsModal').classList.remove('hidden');
|
|
setTimeout(createChart, 100);
|
|
};
|
|
|
|
document.getElementById('closeModal').onclick = () => {
|
|
document.getElementById('returnsModal').classList.add('hidden');
|
|
if (chart) chart.destroy();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |