133 lines
4.6 KiB
HTML
133 lines
4.6 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" />
|
|
<!-- Your global stylesheet (keep if you already have one) -->
|
|
<link rel="stylesheet" href="{% static 'app.css' %}">
|
|
{% block extra_head %}{% endblock %}
|
|
<style>
|
|
/* Scoped navbar polish only — leaves your existing look intact */
|
|
:root{
|
|
--nav-bg: #f8fafc;
|
|
--nav-border: #e5e7eb;
|
|
--nav-ink: #1f2937;
|
|
--nav-ink-muted: #6b7280;
|
|
--nav-brand: #2f6cab; /* soft blue */
|
|
--nav-brand-hover: #1f4c7a;
|
|
--btn-bg: #ffffff;
|
|
--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; /* thicker bar */
|
|
display:flex; align-items:center; gap:14px; justify-content:space-between;
|
|
font-size:17px; /* slightly larger */
|
|
}
|
|
.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}
|
|
|
|
/* Rectangular buttons with subtle separation + hover */
|
|
.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 ease, border-color .12s ease, box-shadow .12s ease;
|
|
white-space:nowrap;
|
|
}
|
|
.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 frame */
|
|
.page{
|
|
max-width:1100px; margin:18px auto; padding:0 16px;
|
|
}
|
|
|
|
/* Messages (Django messages framework) */
|
|
.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>
|
|
<body>
|
|
<!-- in <body> tag -->
|
|
<body class="{% block body_class %}{% endblock %}">
|
|
<!-- Top navigation -->
|
|
<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">
|
|
<!-- Left group: main pages -->
|
|
<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 %}
|
|
|
|
<!-- Right group: user -->
|
|
{% 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>
|
|
|
|
<!-- Messages -->
|
|
<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 content -->
|
|
<main class="page">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
{% block extra_body %}{% endblock %}
|
|
</body>
|
|
</html> |