Publish page: buy-coffee - pages/buy-coffee.hbs

pages/buy-coffee.hbs

@@ -0,0 +1,61 @@
+<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>