mirror of
https://github.com/thecyberlearn/quantum-ai-v3.git
synced 2026-08-18 12:32:58 +00:00
68 lines
3.3 KiB
HTML
68 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Wallet - NetCop Hub</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
.wallet-header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.balance { font-size: 2em; color: #007bff; font-weight: bold; }
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
|
|
.stat-card { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.stat-value { font-size: 1.5em; font-weight: bold; color: #007bff; }
|
|
.transactions { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
|
|
.transaction-item:last-child { border-bottom: none; }
|
|
.transaction-amount { font-weight: bold; }
|
|
.transaction-amount.positive { color: #28a745; }
|
|
.transaction-amount.negative { color: #dc3545; }
|
|
.btn { padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; display: inline-block; margin-bottom: 20px; }
|
|
.btn:hover { background: #0056b3; }
|
|
.back-link { display: inline-block; margin-bottom: 20px; color: #007bff; text-decoration: none; }
|
|
.back-link:hover { text-decoration: underline; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<a href="{% url 'homepage' %}" class="back-link">← Back to Homepage</a>
|
|
|
|
<div class="wallet-header">
|
|
<h1>Your Wallet</h1>
|
|
<div class="balance">${{ current_balance }}</div>
|
|
<a href="{% url 'wallet_topup' %}" class="btn">Top Up Wallet</a>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-value">${{ total_spent }}</div>
|
|
<div>Total Spent</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">${{ total_topped_up }}</div>
|
|
<div>Total Topped Up</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transactions">
|
|
<h2>Recent Transactions</h2>
|
|
{% if transactions %}
|
|
{% for transaction in transactions %}
|
|
<div class="transaction-item">
|
|
<div>
|
|
<strong>{{ transaction.description }}</strong>
|
|
<small>{{ transaction.created_at|date:"M d, Y H:i" }}</small>
|
|
</div>
|
|
<div class="transaction-amount {% if transaction.type == 'top_up' %}positive{% else %}negative{% endif %}">
|
|
{% if transaction.type == 'top_up' %}+{% else %}-{% endif %}${{ transaction.amount }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p>No transactions yet.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |