added user profile page
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
@@ -166,13 +166,31 @@
|
||||
color: #64748b;
|
||||
}
|
||||
.empty a { color: #38bdf8; }
|
||||
|
||||
/* Light theme overrides */
|
||||
body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
|
||||
body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
|
||||
body[data-theme="light"] .site-header .brand { color: #0284c7; }
|
||||
body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
|
||||
body[data-theme="light"] .progress-bar { background: #e2e8f0; }
|
||||
body[data-theme="light"] .progress-fill { background: #0284c7; }
|
||||
body[data-theme="light"] .card-stat { color: #0284c7; }
|
||||
body[data-theme="light"] .filter-bar { border-color: #e2e8f0; }
|
||||
body[data-theme="light"] .tab-sep { background: #e2e8f0; }
|
||||
body[data-theme="light"] .tab.active { color: #0284c7; border-bottom-color: #0284c7; }
|
||||
body[data-theme="light"] .sort-wrap select { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
|
||||
body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
|
||||
body[data-theme="light"] .btn-primary { background: #0284c7; }
|
||||
body[data-theme="light"] .site-header nav a { color: #64748b; }
|
||||
body[data-theme="light"] .empty a { color: #0284c7; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body data-theme="{{ request.session.theme|default:'dark' }}">
|
||||
|
||||
<header class="site-header">
|
||||
<a class="brand" href="/">k-boris.tech</a>
|
||||
<nav>
|
||||
<a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
|
||||
<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
139
backlogger/templates/backlogger/profile.html
Normal file
139
backlogger/templates/backlogger/profile.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Profile — Backlogger</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
.site-header {
|
||||
background: #0a0f1e;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
padding: 0.75rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
|
||||
.site-header nav { display: flex; gap: 1.5rem; align-items: center; }
|
||||
.site-header nav a { color: #64748b; font-size: 0.85rem; }
|
||||
.site-header nav a:hover { color: #e2e8f0; }
|
||||
|
||||
.container { max-width: 520px; margin: 0 auto; padding: 2.5rem 2rem; }
|
||||
|
||||
h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
|
||||
.subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 2rem; }
|
||||
|
||||
.card {
|
||||
background: #0a0f1e;
|
||||
border: 1px solid #1e293b;
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.field { margin-bottom: 1.25rem; }
|
||||
.field:last-of-type { margin-bottom: 0; }
|
||||
label { display: block; font-size: 0.82rem; color: #94a3b8; margin-bottom: 0.4rem; }
|
||||
input[type="text"], select {
|
||||
width: 100%;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
input[type="text"]:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: #38bdf8;
|
||||
}
|
||||
select { cursor: pointer; }
|
||||
.field-static {
|
||||
font-size: 0.9rem;
|
||||
color: #64748b;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0; }
|
||||
|
||||
.actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; }
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn:hover { opacity: 0.85; }
|
||||
.btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
|
||||
.btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
|
||||
|
||||
.saved-msg { font-size: 0.82rem; color: #34d399; display: none; }
|
||||
.saved-msg.show { display: inline; }
|
||||
|
||||
/* Light theme overrides */
|
||||
body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
|
||||
body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
|
||||
body[data-theme="light"] .site-header .brand { color: #0284c7; }
|
||||
body[data-theme="light"] .site-header nav a { color: #64748b; }
|
||||
body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
|
||||
body[data-theme="light"] input[type="text"],
|
||||
body[data-theme="light"] select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
|
||||
body[data-theme="light"] .divider { border-color: #e2e8f0; }
|
||||
body[data-theme="light"] .btn-primary { background: #0284c7; }
|
||||
body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="{{ request.session.theme|default:'dark' }}">
|
||||
|
||||
<header class="site-header">
|
||||
<a class="brand" href="/">k-boris.tech</a>
|
||||
<nav>
|
||||
<a href="{% url 'backlogger:list' %}">Backlog</a>
|
||||
<a href="{% url 'backlogger:profile' %}" style="color:#e2e8f0">Profile</a>
|
||||
<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<h1>Profile</h1>
|
||||
<p class="subtitle">@{{ request.user.username }}{% if request.user.date_joined %} · member since {{ request.user.date_joined|date:"N Y" }}{% endif %}</p>
|
||||
|
||||
<form method="post" id="profile-form">
|
||||
{% csrf_token %}
|
||||
<div class="card">
|
||||
<div class="field">
|
||||
<label for="{{ form.display_name.id_for_label }}">{{ form.display_name.label }}</label>
|
||||
{{ form.display_name }}
|
||||
{% if form.display_name.errors %}<div style="color:#f87171;font-size:0.78rem;margin-top:0.3rem">{{ form.display_name.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<hr class="divider">
|
||||
|
||||
<div class="field">
|
||||
<label for="{{ form.theme.id_for_label }}">{{ form.theme.label }}</label>
|
||||
{{ form.theme }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
<a href="{% url 'backlogger:list' %}" class="btn btn-outline">Back to backlog</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user