58 lines
3.2 KiB
HTML
58 lines
3.2 KiB
HTML
{% extends "base_app.html" %}
|
|
{% set active_page = 'account' %}
|
|
{% block title %}Account — TheNicheQuiz{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="app-page" style="max-width: 600px;">
|
|
<div class="page-header">
|
|
<h1 class="page-title">Account</h1>
|
|
<p class="page-subtitle">Your account details</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 28px;">
|
|
<div style="width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--purple), var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff;">
|
|
{{ current_user.name[0]|upper if current_user.name else 'U' }}
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 20px; font-weight: 700;">{{ current_user.name or 'User' }}</div>
|
|
<div style="font-size: 14px; color: var(--text-secondary);">{{ current_user.email }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
|
|
<div>
|
|
<div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Name</div>
|
|
<div style="font-size: 15px; margin-top: 4px;">{{ current_user.name or 'Not set' }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
|
|
<div>
|
|
<div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Email</div>
|
|
<div style="font-size: 15px; margin-top: 4px;">{{ current_user.email }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
|
|
<div>
|
|
<div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Member Since</div>
|
|
<div style="font-size: 15px; margin-top: 4px;">{{ current_user.created_at.strftime('%B %d, %Y') if current_user.created_at else 'N/A' }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0;">
|
|
<div>
|
|
<div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Plan</div>
|
|
<div style="font-size: 15px; margin-top: 4px;">
|
|
<span class="badge badge-amber">Free</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 24px;">
|
|
<a href="/logout" class="btn btn-outline" style="width: 100%; justify-content: center;">Log Out</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|