ComputerTech312
3ddbc40bb5
- Replace dropdown tier selection with attractive visual buttons - Add tier-button CSS with hover effects and selection states - Remove 'or pay by card' divider from subscription form for cleaner UI - Update JavaScript to handle tier button selection events - Fix Stripe module import conflict by renaming stripe directory to stripe_config - Add responsive grid layout for tier buttons on mobile devices
168 lines
6.9 KiB
HTML
168 lines
6.9 KiB
HTML
<!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>
|
|
|
|
<!-- Payment Type Selection -->
|
|
<div class="payment-type-tabs">
|
|
<button type="button" id="one-time-tab" class="tab-button active">One-time</button>
|
|
<button type="button" id="recurring-tab" class="tab-button">Monthly</button>
|
|
</div>
|
|
|
|
<!-- One-time Donation Form -->
|
|
<form id="donation-form" class="payment-form active">
|
|
<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>
|
|
|
|
<!-- Subscription Form -->
|
|
<form id="subscription-form" class="payment-form">
|
|
<label>Choose Your Support Level</label>
|
|
|
|
<!-- Subscription Tier Buttons -->
|
|
<div class="tier-buttons">
|
|
<div class="tier-button" data-tier="bronze">
|
|
<div class="tier-icon">🥉</div>
|
|
<div class="tier-name">Bronze</div>
|
|
<div class="tier-price">£2<span class="tier-period">/month</span></div>
|
|
<div class="tier-description">Essential support that makes a difference</div>
|
|
</div>
|
|
|
|
<div class="tier-button" data-tier="silver">
|
|
<div class="tier-icon">🥈</div>
|
|
<div class="tier-name">Silver</div>
|
|
<div class="tier-price">£5<span class="tier-period">/month</span></div>
|
|
<div class="tier-description">Enhanced support with greater impact</div>
|
|
</div>
|
|
|
|
<div class="tier-button" data-tier="gold">
|
|
<div class="tier-icon">🥇</div>
|
|
<div class="tier-name">Gold</div>
|
|
<div class="tier-price">£10<span class="tier-period">/month</span></div>
|
|
<div class="tier-description">Premium support for maximum impact</div>
|
|
</div>
|
|
|
|
<div class="tier-button" data-tier="diamond">
|
|
<div class="tier-icon">💎</div>
|
|
<div class="tier-name">Diamond</div>
|
|
<div class="tier-price">£25<span class="tier-period">/month</span></div>
|
|
<div class="tier-description">Ultimate support for our biggest champions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden input to store selected tier -->
|
|
<input type="hidden" id="subscription-tier" required>
|
|
|
|
<label for="subscriber-email">Email Address *</label>
|
|
<input type="email" id="subscriber-email" placeholder="your@email.com" required>
|
|
|
|
<label for="subscriber-name">Your Name (optional)</label>
|
|
<input type="text" id="subscriber-name" placeholder="Enter your name" maxlength="30">
|
|
|
|
<label for="subscription-card-element">Card Details</label>
|
|
<div id="subscription-card-element"></div>
|
|
|
|
<button type="submit" id="subscription-submit-button">Start Monthly Support</button>
|
|
<div id="subscription-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>
|
|
<script src="{{ url_for('static', filename='js/subscriptions.js') }}"></script>
|
|
</body>
|
|
</html>
|