mirror of
https://github.com/thecyberlearn/quantum-ai.git
synced 2026-08-18 10:13:00 +00:00
97 lines
4.5 KiB
HTML
97 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Top Up Wallet - NetCop Hub</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
|
|
.container { max-width: 600px; margin: 0 auto; }
|
|
.topup-form { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.amount-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin: 20px 0; }
|
|
.amount-option { padding: 20px; border: 2px solid #ddd; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.3s; }
|
|
.amount-option:hover { border-color: #007bff; background: #f8f9fa; }
|
|
.amount-option.selected { border-color: #007bff; background: #e7f3ff; }
|
|
.amount-value { font-size: 1.5em; font-weight: bold; color: #007bff; }
|
|
.btn { width: 100%; padding: 15px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; margin-top: 20px; }
|
|
.btn:hover { background: #0056b3; }
|
|
.btn:disabled { background: #ccc; cursor: not-allowed; }
|
|
.back-link { display: inline-block; margin-bottom: 20px; color: #007bff; text-decoration: none; }
|
|
.back-link:hover { text-decoration: underline; }
|
|
.messages { margin-bottom: 20px; }
|
|
.message { padding: 10px; border-radius: 4px; margin-bottom: 10px; }
|
|
.message.error { background: #ffe6e6; color: #cc0000; }
|
|
.message.success { background: #e6ffe6; color: #006600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<a href="{% url 'wallet' %}" class="back-link">← Back to Wallet</a>
|
|
|
|
<div class="topup-form">
|
|
<h1>Top Up Your Wallet</h1>
|
|
|
|
{% if messages %}
|
|
<div class="messages">
|
|
{% for message in messages %}
|
|
<div class="message {{ message.tags }}">{{ message }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" id="topup-form">
|
|
{% csrf_token %}
|
|
<p>Select an amount to add to your wallet:</p>
|
|
|
|
<div class="amount-options">
|
|
<div class="amount-option" data-amount="10">
|
|
<div class="amount-value">$10</div>
|
|
<div>Basic</div>
|
|
</div>
|
|
<div class="amount-option" data-amount="50">
|
|
<div class="amount-value">$50</div>
|
|
<div>Popular</div>
|
|
</div>
|
|
<div class="amount-option" data-amount="100">
|
|
<div class="amount-value">$100</div>
|
|
<div>Best Value</div>
|
|
</div>
|
|
<div class="amount-option" data-amount="500">
|
|
<div class="amount-value">$500</div>
|
|
<div>Premium</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" name="amount" id="selected-amount" value="">
|
|
<button type="submit" class="btn" id="topup-btn" disabled>Select an amount</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const amountOptions = document.querySelectorAll('.amount-option');
|
|
const selectedAmountInput = document.getElementById('selected-amount');
|
|
const topupBtn = document.getElementById('topup-btn');
|
|
|
|
amountOptions.forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
// Remove selected class from all options
|
|
amountOptions.forEach(opt => opt.classList.remove('selected'));
|
|
|
|
// Add selected class to clicked option
|
|
this.classList.add('selected');
|
|
|
|
// Set the selected amount
|
|
const amount = this.getAttribute('data-amount');
|
|
selectedAmountInput.value = amount;
|
|
|
|
// Enable submit button
|
|
topupBtn.disabled = false;
|
|
topupBtn.textContent = `Top Up $${amount}`;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |