135 lines
6.1 KiB
HTML
135 lines
6.1 KiB
HTML
{% load static ui_extras %}
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Анкета пользователя</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link href="{% static 'style.css' %}" rel="stylesheet">
|
||
<style>
|
||
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif; margin:0; background:#f7f7fb; color:#111; }
|
||
.topbar { display:flex; gap:16px; align-items:center; padding:14px 18px; background:#111827; color:#fff; }
|
||
.topbar a { color:#cfe3ff; text-decoration:none; }
|
||
.container { max-width:960px; margin:24px auto; padding:0 16px; }
|
||
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; }
|
||
.row { display:flex; gap:18px; align-items:center; }
|
||
.grow { flex:1 1 auto; }
|
||
.muted { color:#6b7280; font-size:14px; }
|
||
.pill { display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; margin:2px 6px 2px 0; }
|
||
.avatar { width:96px; height:96px; border-radius:50%; overflow:hidden; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-weight:700; color:#374151; }
|
||
.avatar img { width:96px; height:96px; object-fit:cover; display:block; }
|
||
.btn { display:inline-block; padding:9px 12px; border-radius:10px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font-weight:600; text-decoration:none; color:#111; }
|
||
|
||
/* Детальные списки */
|
||
dl { display:grid; grid-template-columns: 220px 1fr; gap:8px 14px; margin:0; }
|
||
dt { font-weight:600; color:#374151; }
|
||
dd { margin:0; color:#111827; }
|
||
.pill-wrap { display:flex; flex-wrap:wrap; gap:6px; }
|
||
.grid { display:grid; gap:16px; }
|
||
.grid-2 { grid-template-columns: 1fr 1fr; }
|
||
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div style="flex:1 1 auto;">Карточка пользователя (ADMIN)</div>
|
||
<nav style="display:flex; gap:14px;">
|
||
<a href="{% url 'ui:profiles' %}">← Каталог</a>
|
||
<a href="{% url 'ui:cabinet' %}">Кабинет</a>
|
||
<a href="{% url 'ui:logout' %}">Выход</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container">
|
||
|
||
<!-- Шапка с аватаром, именем и лайком -->
|
||
<div class="card" style="margin-bottom:16px;">
|
||
<div class="row">
|
||
<div class="avatar">
|
||
{% if profile.photo_url %}
|
||
<img src="{{ profile.photo_url }}" alt="">
|
||
{% elif profile.photo %}
|
||
<img src="{{ profile.photo }}" alt="">
|
||
{% elif profile.email %}
|
||
<img src="{{ profile.email|gravatar_url:96 }}" alt="">
|
||
{% else %}
|
||
{{ profile.name|initial }}
|
||
{% endif %}
|
||
</div>
|
||
<div class="grow">
|
||
<div style="font-weight:700; font-size:20px;">{{ profile.name }}</div>
|
||
<div class="muted" style="margin-top:4px;">ID пользователя: {{ profile.id }}</div>
|
||
{% if profile.email %}
|
||
<div class="muted">Email: {{ profile.email }}</div>
|
||
{% endif %}
|
||
{% if profile.role %}
|
||
<div class="muted">Роль: <span class="pill">{{ profile.role }}</span></div>
|
||
{% endif %}
|
||
</div>
|
||
<div>
|
||
<form method="post" action="{% url 'ui:like_profile' profile.id %}">
|
||
{% csrf_token %}
|
||
{% include "ui/components/like_button.html" with profile_id=profile.id liked=liked %}
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Полные данные -->
|
||
<div class="grid grid-2">
|
||
<!-- Данные аккаунта (из UserRead) -->
|
||
<section class="card">
|
||
<h2 class="muted" style="margin-top:0;">Данные аккаунта</h2>
|
||
<dl>
|
||
<dt>Имя</dt><dd>{{ profile.name|default:"—" }}</dd>
|
||
<dt>Email</dt><dd>{{ profile.email|default:"—" }}</dd>
|
||
<dt>Роль</dt><dd>{{ profile.role|default:"—" }}</dd>
|
||
<dt>Статус</dt><dd>{% if profile.verified %}<span class="pill">ACTIVE</span>{% else %}<span class="pill">INACTIVE</span>{% endif %}</dd>
|
||
<dt>ID пользователя</dt><dd><code>{{ profile.id|default:"—" }}</code></dd>
|
||
</dl>
|
||
</section>
|
||
|
||
<!-- Данные профиля (ProfileOut) -->
|
||
<section class="card">
|
||
<h2 class="muted" style="margin-top:0;">Данные профиля</h2>
|
||
<dl>
|
||
<dt>Пол</dt><dd>{{ profile.gender|default:"—" }}</dd>
|
||
<dt>Город</dt><dd>{{ profile.city|default:"—" }}</dd>
|
||
<dt>Языки</dt>
|
||
<dd>
|
||
{% if profile.languages %}
|
||
<div class="pill-wrap">
|
||
{% for lang in profile.languages %}<span class="pill">{{ lang }}</span>{% endfor %}
|
||
</div>
|
||
{% else %} — {% endif %}
|
||
</dd>
|
||
<dt>Интересы</dt>
|
||
<dd>
|
||
{% if profile.interests %}
|
||
<div class="pill-wrap">
|
||
{% for it in profile.interests %}<span class="pill">{{ it }}</span>{% endfor %}
|
||
</div>
|
||
{% else %} — {% endif %}
|
||
</dd>
|
||
<dt>О себе</dt><dd>{{ profile.about|default:"—" }}</dd>
|
||
<dt>Возраст</dt><dd>{{ profile.age|default:"—" }}</dd>
|
||
<dt>ID профиля</dt><dd><code>{{ profile.profile_id|default:profile.id|default:"—" }}</code></dd>
|
||
<dt>ID пользователя (в профиле)</dt><dd><code>{{ profile.user_id|default:"—" }}</code></dd>
|
||
<dt>Фото (URL)</dt><dd>
|
||
{% if profile.photo_url %}<code>{{ profile.photo_url }}</code>
|
||
{% elif profile.photo %}<code>{{ profile.photo }}</code>
|
||
{% else %} — {% endif %}
|
||
</dd>
|
||
</dl>
|
||
<p class="muted" style="margin-top:8px;">
|
||
Поля профиля основаны на контракте <code>ProfileOut</code> (gender, city, languages, interests, id, user_id).
|
||
Если это чужой пользователь, сервер может не возвращать профиль, поэтому часть значений будет пустой. :contentReference[oaicite:1]{index=1}
|
||
</p>
|
||
</section>
|
||
</div>
|
||
|
||
</main>
|
||
</body>
|
||
</html>
|