61 lines
2.8 KiB
Handlebars
61 lines
2.8 KiB
Handlebars
<link rel="stylesheet" src="assets/css/buy-coffee.css" />
|
||
|
||
<div class="main-container" data-hbs-id="lytslh4">
|
||
<section class="profile-section" data-hbs-id="180vtgf">
|
||
<div class="profile-card" data-hbs-id="mjky7er">
|
||
<div class="avatar" data-hbs-id="dstqo3p">☕</div>
|
||
<h1 data-hbs-id="2s5foht">Hey, I'm Alex!</h1>
|
||
<p class="bio" data-hbs-id="lbf84pr">I'm a developer creating free tutorials and open-source projects. If my work has helped you, consider buying me a coffee to keep me fueled!</p>
|
||
<div class="social-links" data-hbs-id="v07yump">
|
||
<a href="#" class="social-link" data-hbs-id="g15ufw6">Twitter</a>
|
||
<a href="#" class="social-link" data-hbs-id="yhti268">GitHub</a>
|
||
<a href="#" class="social-link" data-hbs-id="wcsrjgi">YouTube</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{faster:import "test"}}
|
||
|
||
<!-- Section 2: Donation -->
|
||
<section class="donation-section" data-hbs-id="w3236xo">
|
||
<div class="donation-card" data-hbs-id="it1ux62">
|
||
<h2 data-hbs-id="l5o458d">☕ Buy me a coffee</h2>
|
||
|
||
<div class="amount-selector" data-hbs-id="8gf9ke8">
|
||
<button class="amount-btn" data-amount="1" data-hbs-id="puqfm48">1</button>
|
||
<button class="amount-btn active" data-amount="3" data-hbs-id="f9xkzxa">3</button>
|
||
<button class="amount-btn" data-amount="5" data-hbs-id="gl9mnnw">5</button>
|
||
</div>
|
||
|
||
<p class="amount-text" data-hbs-id="52a6hb1">× $3 = <span class="total" data-hbs-id="v5lrpep">$9</span></p>
|
||
|
||
<input type="text" class="name-input" placeholder="Your name (optional)" data-hbs-id="hi3ri4k">
|
||
|
||
<textarea class="message-input" placeholder="Say something nice... (optional)" data-hbs-id="hnstxpa"></textarea>
|
||
|
||
<button class="donate-btn" data-hbs-id="fnokajg">
|
||
<span class="btn-icon" data-hbs-id="ejlw98u">☕</span>
|
||
Support $9
|
||
</button>
|
||
|
||
<p class="secure-text" data-hbs-id="sbebeql">🔒 Secure payment</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
const amountBtns = document.querySelectorAll('.amount-btn');
|
||
const total = document.querySelector('.total');
|
||
const donateBtn = document.querySelector('.donate-btn');
|
||
|
||
amountBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
amountBtns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const amount = btn.dataset.amount * 3;
|
||
total.textContent = '$' + amount;
|
||
donateBtn.innerHTML = '<span class="btn-icon" data-hbs-id="zpsg1kz">☕</span> Support $' + amount;
|
||
});
|
||
});
|
||
</script> |