84 lines
3.9 KiB
HTML
84 lines
3.9 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{% block title %}Illustrations{% endblock %}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="{% static 'app.css' %}">
|
|
{% block extra_head %}{% endblock %}
|
|
<style>
|
|
:root{
|
|
--nav-bg:#f8fafc; --nav-border:#e5e7eb; --nav-ink:#1f2937; --nav-ink-muted:#6b7280;
|
|
--nav-brand:#2f6cab; --nav-brand-hover:#1f4c7a; --btn-bg:#fff; --btn-border:#d1d5db; --btn-hover:#eef2f7;
|
|
}
|
|
.topbar-wrap{border-bottom:1px solid var(--nav-border); background:var(--nav-bg);}
|
|
.topbar{max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between; font-size:17px;}
|
|
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink); font-weight:600; letter-spacing:.2px;}
|
|
.brand .tagline{color:var(--nav-ink-muted); font-weight:500; font-size:15px}
|
|
.nav-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
|
|
.nav-btn{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink); text-decoration:none; cursor:pointer; line-height:1; transition:background .12s, border-color .12s, box-shadow .12s;}
|
|
.nav-btn:hover{background:var(--btn-hover)}
|
|
.nav-btn.primary{background:var(--nav-brand); border-color:var(--nav-brand); color:#fff}
|
|
.nav-btn.primary:hover{background:var(--nav-brand-hover); border-color:var(--nav-brand-hover)}
|
|
.nav-btn.danger{background:#b91c1c; border-color:#b91c1c; color:#fff}
|
|
.nav-btn.danger:hover{filter:brightness(.95)}
|
|
.user-chip{padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff; color:var(--nav-ink-muted); font-size:14px}
|
|
.page{max-width:1100px; margin:18px auto; padding:0 16px}
|
|
.messages{margin:12px 0; display:grid; gap:8px}
|
|
.msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff}
|
|
.msg.info{border-color:#dbeafe; background:#eff6ff}
|
|
.msg.success{border-color:#bbf7d0; background:#ecfdf5}
|
|
.msg.warning{border-color:#fde68a; background:#fffbeb}
|
|
.msg.error{border-color:#fecaca; background:#fef2f2}
|
|
@media (max-width:780px){ .topbar{gap:10px; padding:12px 12px} .nav-right{gap:8px} .nav-btn{padding:8px 10px} }
|
|
</style>
|
|
</head>
|
|
|
|
<!-- ✅ single body tag with block for page-specific classes -->
|
|
<body class="{% block body_class %}{% endblock %}">
|
|
<div class="topbar-wrap">
|
|
<div class="topbar">
|
|
<a href="{% url 'search' %}" class="brand">
|
|
<span>Illustrations</span>
|
|
<span class="tagline">Reference Database</span>
|
|
</a>
|
|
|
|
<div class="nav-right">
|
|
<a class="nav-btn" href="{% url 'search' %}">Search</a>
|
|
<a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
|
|
|
|
{% if user.is_authenticated and user.is_staff %}
|
|
<a class="nav-btn" href="{% url 'import_wizard' %}">Import</a>
|
|
<a class="nav-btn" href="{% url 'export_csv' %}">Backup (CSV)</a>
|
|
{% endif %}
|
|
|
|
{% if user.is_authenticated %}
|
|
<span class="user-chip">Signed in: {{ user.username }}</span>
|
|
<form method="post" action="{% url 'logout' %}" style="display:inline;">{% csrf_token %}
|
|
<button class="nav-btn">Logout</button>
|
|
</form>
|
|
{% else %}
|
|
<a class="nav-btn primary" href="{% url 'login' %}">Login</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
{% if messages %}
|
|
<div class="messages">
|
|
{% for message in messages %}
|
|
<div class="msg {{ message.tags|default:'info' }}">{{ message }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<main class="page">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
{% block extra_body %}{% endblock %}
|
|
</body>
|
|
</html> |