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-28 01:00:56 +11:00
parent 0fc87036ac
commit 4da6b98e23
1 changed files with 72 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
index.html
View file

@ -14,40 +14,30 @@
@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; /* same as your max-w-lg */
margin: 0 auto;
width: 100%;
}
.amount-container {
padding: 3rem 0;
width: 100%;
}
.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%;
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;
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;
.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>
@ -61,7 +51,7 @@
<p class="text-2xl md:text-3xl font-light text-zinc-500">One-time. No bullshit.</p>
</div>
<!-- PERFECT AMOUNT: STAYS INSIDE THE BOX, SHRINKS AFTER 3 DIGITS -->
<!-- AMOUNT -->
<div class="amount-container">
<div class="amount-wrapper text-9xl md:text-[11rem]">
$<input type="text" id="amountInput" value="100" placeholder="0">
@ -69,6 +59,12 @@
</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">
@ -102,13 +98,13 @@
</div>
</div>
<!-- Modal (unchanged) -->
<!-- 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 насла
<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>
@ -126,6 +122,24 @@
<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, '');
@ -133,21 +147,11 @@
amountInput.value = Number(raw).toLocaleString();
const digitCount = raw.length;
// Progressive shrink after 3 digits – stays perfectly inside the box
if (digitCount <= 1) {
wrapper.style.fontSize = '8.5rem'; // 11rem max
} else if (digitCount === 3) {
wrapper.style.fontSize = '6.5rem';
} else if (digitCount === 4) {
wrapper.style.fontSize = '5.5rem';
} else if (digitCount === 5) {
wrapper.style.fontSize = '4.5rem';
} else if (digitCount === 6) {
wrapper.style.fontSize = '3.8rem';
} else if (digitCount >= 7) {
wrapper.style.fontSize = '3rem';
}
if (digitCount <= 1) wrapper.style.fontSize = '7rem';
else if (digitCount === 3) wrapper.style.fontSize = '7rem';
else if (digitCount === 4) wrapper.style.fontSize = '5.5rem';
else if (digitCount === 5) wrapper.style.fontSize = '4.5rem';
else if (digitCount >= 6) wrapper.style.fontSize = '3.8rem';
}
amountInput.addEventListener('input', updateSize);
@ -156,9 +160,9 @@
if ([8,37,39,46,9].includes(e.keyCode) || e.metaKey) return;
if (!/[0-9]/.test(e.key)) e.preventDefault();
});
updateSize();
updateSize(); // init
// Term selection
document.querySelectorAll('.term-btn').forEach(btn => {
btn.onclick = () => {
document.querySelectorAll('.term-btn').forEach(b => b.classList.remove('bg-white','text-black'));
@ -166,14 +170,31 @@
};
});
// Pay Button
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');
alert(`Investing $${amount.toLocaleString()} — money printer go brrr`);
// Replace with your actual Stripe Price IDs
const priceId = paymentType === 'recurring'
? 'price_1RECURRENCE_ID_HERE'
: 'price_1ONE_TIME_ID_HERE';
const stripe = Stripe('pk_live_YOUR_KEY');
stripe.redirectToCheckout({
lineItems: [{ price: priceId, quantity: 1 }],
mode: paymentType === 'recurring' ? 'subscription' : 'payment',
successUrl: window.location.origin + '/success.html',
cancelUrl: window.location.origin,
customerEmail: email,
});
};
// Chart
let chart = null;
function createChart() {
if (chart) chart.destroy();