mirror of
https://github.com/thecyberlearn/quantum-ai-v2.git
synced 2026-08-18 11:12:58 +00:00
97 lines
4.8 KiB
HTML
97 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Profile - NetCop Hub</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
.profile-header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.wallet-status { padding: 15px; border-radius: 8px; margin: 20px 0; }
|
|
.wallet-status.high { background: #d4edda; color: #155724; }
|
|
.wallet-status.medium { background: #fff3cd; color: #856404; }
|
|
.wallet-status.low { background: #f8d7da; color: #721c24; }
|
|
.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; }
|
|
.popular-agents { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
|
|
.agent-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
|
|
.agent-item:last-child { border-bottom: none; }
|
|
.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-right: 10px; }
|
|
.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="profile-header">
|
|
<h1>Profile - {{ user.username }}</h1>
|
|
<p><strong>Email:</strong> {{ user.email }}</p>
|
|
<p><strong>Balance:</strong> ${{ user.wallet_balance }}</p>
|
|
|
|
<div class="wallet-status {{ wallet_status.status }}">
|
|
<strong>{{ wallet_status.message }}</strong>
|
|
</div>
|
|
|
|
<a href="{% url 'wallet' %}" class="btn">Manage Wallet</a>
|
|
<a href="{% url 'wallet_topup' %}" class="btn">Top Up</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 class="stat-card">
|
|
<div class="stat-value">{{ total_agents_used }}</div>
|
|
<div>Agents Used</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if popular_agents %}
|
|
<div class="popular-agents">
|
|
<h2>Your Most Used Agents</h2>
|
|
{% for agent in popular_agents %}
|
|
<div class="agent-item">
|
|
<span>{{ agent.agent_slug }}</span>
|
|
<span><strong>{{ agent.count }}</strong> times</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<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> |