133 lines
6.8 KiB
HTML
133 lines
6.8 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Профиль — Morozovka Portal{% endblock %}
|
||
{% block main_class %}container container-narrow{% endblock %}
|
||
|
||
{% block head %}
|
||
<style>
|
||
.profile-card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 20px; margin-bottom: 20px; }
|
||
.profile-card h2 { color: #58a6ff; margin-top: 0; font-size: 1.3rem; }
|
||
.profile-card h3 { color: #e6edf3; margin-top: 0; font-size: 1.1rem; }
|
||
.field { margin-bottom: 15px; border-bottom: 1px solid #30363d; padding-bottom: 10px; }
|
||
.field:last-of-type { border-bottom: none; }
|
||
.label { color: #8b949e; font-size: 0.8rem; text-transform: uppercase; }
|
||
.value { font-size: 1.1rem; font-family: monospace; }
|
||
.btn-sessions { display: inline-block; padding: 8px 15px; background: #21262d; border: 1px solid #30363d; border-radius: 5px; color: #e6edf3; text-decoration: none; }
|
||
.btn-sessions:hover { background: #30363d; text-decoration: none; }
|
||
.profile-actions { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
|
||
.profile-actions a { color: #58a6ff; text-decoration: none; }
|
||
.profile-actions a:hover { text-decoration: underline; }
|
||
|
||
.sub-status { padding: 12px 15px; border-radius: 6px; margin-bottom: 15px; font-size: .9rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
.sub-active { background: rgba(63,185,80,.15); border: 1px solid #238636; color: #3fb950; }
|
||
.sub-none { background: rgba(139,148,158,.15); border: 1px solid #8b949e; color: #8b949e; }
|
||
.sub-badge { font-size: .75rem; padding: 2px 8px; border-radius: 10px; background: rgba(63,185,80,.25); border: 1px solid #238636; color: #3fb950; }
|
||
.sub-form { display: flex; flex-direction: column; gap: 12px; }
|
||
.sub-checkbox { display: flex; align-items: center; gap: 8px; color: #c9d1d9; font-size: .9rem; cursor: pointer; }
|
||
.sub-checkbox input { width: 16px; height: 16px; }
|
||
.btn-primary { background: #238636; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; }
|
||
.btn-primary:hover { background: #2ea043; }
|
||
.btn-danger { background: #da3633; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: 600; }
|
||
.btn-danger:hover { background: #f85149; }
|
||
.muted { color: #8b949e; font-size: .85rem; line-height: 1.5; }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="profile-card">
|
||
<h2>Личный кабинет</h2>
|
||
<div class="field">
|
||
<div class="label">Логин</div>
|
||
<div class="value">{{ user.username }}</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="label">ФИО</div>
|
||
<div class="value">{{ user.full_name or 'Не указано' }}</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="label">Email</div>
|
||
<div class="value">{{ user.email or 'Не указано' }}
|
||
{% if user.is_verified %}<span style="color: #3fb950; font-size: 0.8rem;">✓ Подтвержден</span>{% endif %}
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="label">Организация</div>
|
||
<div class="value">{{ user.organization or 'Не указана' }}</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="label">Роль в системе</div>
|
||
<div class="value">{{ user.role }}</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="label">Тур по платформе</div>
|
||
<div class="value">
|
||
{% if onboarding and onboarding.completed_at %}
|
||
✅ Пройден
|
||
{% elif onboarding %}
|
||
⏳ В процессе — <a href="/onboarding">продолжить</a>
|
||
{% else %}
|
||
<a href="/onboarding">Пройти</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
<div class="profile-actions">
|
||
<div>
|
||
<a href="/">← На главную</a> |
|
||
<a href="/onboarding">🎯 Тур</a> |
|
||
<a href="/logout" style="color: #f85149;">Выйти</a>
|
||
</div>
|
||
<a href="/sessions" class="btn-sessions">Безопасность (сессии)</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="profile-card">
|
||
<h3>📬 Уведомления о расписании</h3>
|
||
|
||
{% if not user.email %}
|
||
<div class="sub-status sub-none">⚠ Укажите email в профиле, чтобы получать уведомления.</div>
|
||
{% elif subscription and subscription.is_confirmed %}
|
||
<div class="sub-status sub-active">
|
||
<span>✅ Подписка активна</span>
|
||
<span class="sub-badge">{{ user.email }}</span>
|
||
</div>
|
||
<form method="POST" action="/subscribe/toggle" class="sub-form">
|
||
<input type="hidden" name="action" value="unsubscribe">
|
||
<input type="hidden" name="next" value="/profile">
|
||
<label class="sub-checkbox">
|
||
<input type="checkbox" name="notify_status" {% if subscription.notify_status %}checked{% endif %} disabled>
|
||
Изменения статуса (опаздываю / на месте / отменено)
|
||
</label>
|
||
<label class="sub-checkbox">
|
||
<input type="checkbox" name="notify_events" {% if subscription.notify_events %}checked{% endif %} disabled>
|
||
Изменения событий в расписании
|
||
</label>
|
||
<div>
|
||
<button type="submit" class="btn-danger">Отписаться</button>
|
||
</div>
|
||
</form>
|
||
<p class="muted" style="margin-top: 12px;">
|
||
Отписаться можно в один клик. Повторная подписка тоже в один клик — никаких подтверждений по почте.
|
||
</p>
|
||
{% else %}
|
||
<div class="sub-status sub-none">Вы пока не подписаны на уведомления</div>
|
||
<form method="POST" action="/subscribe/toggle" class="sub-form">
|
||
<input type="hidden" name="action" value="subscribe">
|
||
<input type="hidden" name="next" value="/profile">
|
||
<label class="sub-checkbox">
|
||
<input type="checkbox" name="notify_status" checked>
|
||
Уведомлять об изменениях статуса
|
||
</label>
|
||
<label class="sub-checkbox">
|
||
<input type="checkbox" name="notify_events" checked>
|
||
Уведомлять об изменениях в расписании
|
||
</label>
|
||
<div>
|
||
<button type="submit" class="btn-primary">Подписаться на {{ user.email }}</button>
|
||
</div>
|
||
</form>
|
||
<p class="muted" style="margin-top: 12px;">
|
||
Email берётся из вашего аккаунта — подтверждение не требуется.
|
||
</p>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|