hm
This commit is contained in:
47
templates/donate.html
Normal file
47
templates/donate.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Donate</title>
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Support us with a donation</h2>
|
||||
<form id="donation-form">
|
||||
<label>Amount (USD):</label>
|
||||
<input type="number" id="amount" min="1" step="0.01" required>
|
||||
<div id="card-element"></div>
|
||||
<button type="submit">Donate</button>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
|
||||
<script>
|
||||
const stripe = Stripe("pk_test_your_publishable_key_here");
|
||||
|
||||
const elements = stripe.elements();
|
||||
const card = elements.create("card");
|
||||
card.mount("#card-element");
|
||||
|
||||
document.getElementById("donation-form").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const amount = document.getElementById("amount").value;
|
||||
|
||||
const res = await fetch("/create-payment-intent", {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({amount})
|
||||
});
|
||||
const { clientSecret } = await res.json();
|
||||
|
||||
const result = await stripe.confirmCardPayment(clientSecret, {
|
||||
payment_method: { card: card }
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
document.getElementById("result").innerText = result.error.message;
|
||||
} else if (result.paymentIntent.status === "succeeded") {
|
||||
document.getElementById("result").innerText = "✅ Thank you for your donation!";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
107
templates/index.html
Normal file
107
templates/index.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Donate</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
<script>
|
||||
// Immediately set saved theme and positions to prevent visual jumping
|
||||
(function() {
|
||||
// Set theme immediately before page renders
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) {
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
} else {
|
||||
// Check system preference if no saved theme
|
||||
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
|
||||
}
|
||||
|
||||
// Theme button position
|
||||
const themePosition = localStorage.getItem('themeButtonPosition');
|
||||
if (themePosition) {
|
||||
const pos = JSON.parse(themePosition);
|
||||
document.documentElement.style.setProperty('--theme-button-x', pos.x + 'px');
|
||||
document.documentElement.style.setProperty('--theme-button-y', pos.y + 'px');
|
||||
// Add class when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const themeButton = document.getElementById('theme-toggle');
|
||||
if (themeButton) themeButton.classList.add('positioned');
|
||||
});
|
||||
}
|
||||
|
||||
// Typewriter position
|
||||
const typewriterPosition = localStorage.getItem('typewriterPosition');
|
||||
if (typewriterPosition) {
|
||||
const pos = JSON.parse(typewriterPosition);
|
||||
document.documentElement.style.setProperty('--typewriter-x', pos.x + 'px');
|
||||
document.documentElement.style.setProperty('--typewriter-y', pos.y + 'px');
|
||||
}
|
||||
|
||||
// Logo position
|
||||
const logoPosition = localStorage.getItem('logoPosition');
|
||||
if (logoPosition) {
|
||||
const pos = JSON.parse(logoPosition);
|
||||
document.documentElement.style.setProperty('--logo-x', pos.x + 'px');
|
||||
document.documentElement.style.setProperty('--logo-y', pos.y + 'px');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<img src="{{ url_for('static', filename='ct.png') }}" alt="Logo" class="logo" />
|
||||
<div class="info-box">
|
||||
<div class="typewriter-text" id="typewriter-text">Thanks for your support! ❤️</div>
|
||||
</div>
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙 Dark</button>
|
||||
|
||||
<div class="card">
|
||||
<h1>Support Us</h1>
|
||||
<form id="donation-form">
|
||||
<label for="amount">Amount</label>
|
||||
<input type="number" id="amount" min="1" step="0.01" placeholder="10.00" required>
|
||||
|
||||
<label for="currency">Currency</label>
|
||||
<select id="currency">
|
||||
<option value="GBP">GBP £</option>
|
||||
<option value="EUR">EUR €</option>
|
||||
<option value="USD">USD $</option>
|
||||
</select>
|
||||
|
||||
<label for="supporter-name">Your Name (optional - for supporter wall)</label>
|
||||
<input type="text" id="supporter-name" placeholder="Enter your name to appear on the supporter wall" maxlength="30">
|
||||
|
||||
<!-- Express Payment Methods (Google Pay, Apple Pay) -->
|
||||
<div id="express-checkout-element">
|
||||
<!-- Stripe will insert express payment buttons here -->
|
||||
</div>
|
||||
|
||||
<div class="payment-divider">
|
||||
<span>or pay with card</span>
|
||||
</div>
|
||||
|
||||
<label for="card-element">Card Details</label>
|
||||
<div id="card-element"></div>
|
||||
|
||||
<button type="submit" id="card-submit-button">Support me</button>
|
||||
<div id="result"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Supporter Wall -->
|
||||
<div class="supporter-wall" id="supporter-wall">
|
||||
<h3>Recent Supporters ❤️</h3>
|
||||
<div class="supporters-list" id="supporters-list">
|
||||
<div class="supporter-item">Loading supporters...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/typewriter.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/logo.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/supporters.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/donate.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user