implement basic header

2026-02-11 12:22:07 +01:00
parent ee60df0c33
commit 6cbaf5f6ee
7 changed files with 300 additions and 0 deletions
--- a/frontend/static/frontend/css/base.css
+++ b/frontend/static/frontend/css/base.css
@@ -3,6 +3,92 @@
    height: 100vh;
 }

+.site-header {
+    position: fixed;
+    top: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: min(1100px, calc(100% - 2.5rem));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1.5rem;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    box-shadow: 0 18px 40px rgba(24, 31, 59, 0.16);
+    font-family:
+        "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+        monospace;
+    color: #111827;
+}
+
+.site-brand {
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+    font-size: 0.75rem;
+    color: inherit;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.site-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    font-size: 0.85rem;
+}
+
+.site-user {
+    color: #4b5563;
+    font-weight: 500;
+}
+
+.site-link {
+    text-decoration: none;
+    color: #111827;
+    padding: 0.45rem 0.9rem;
+    border-radius: 999px;
+    border: 1px solid rgba(17, 24, 39, 0.12);
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
+}
+
+.site-link:hover {
+    transform: translateY(-1px);
+    border-color: rgba(17, 24, 39, 0.28);
+    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
+}
+
+.site-link--accent {
+    border: none;
+    background: linear-gradient(130deg, #f97316, #facc15);
+    color: #1f2937;
+    font-weight: 600;
+}
+
+@media (max-width: 720px) {
+    .site-header {
+        top: 1rem;
+        width: calc(100% - 1.5rem);
+        padding: 0.75rem 1rem;
+        border-radius: 24px;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .site-actions {
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.65rem;
+    }
+}
+
 .auth-shell {
    min-height: 100vh;
    display: flex;
--- a/frontend/templates/frontend/base.html
+++ b/frontend/templates/frontend/base.html
@@ -17,6 +17,9 @@
        {% block js_top %}{% endblock %}
    </head>
    <body>
+        <header>
+            {% include "frontend/partials/header.html" %}
+        </header>
        {% block content %} {% endblock %}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/5.7.3/maplibre-gl.min.js" integrity="sha512-Gx0xDElSrwjxjT9mjMg+OsoA0ekI8IkwuPurccWk5afkFBzXQHE0eQsQ7syopu9MJ0HD1EYGmVXjY8SPZt5FAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        {% block js_bottom %}{% endblock %}
--- a/frontend/templates/frontend/partials/header.html
+++ b/frontend/templates/frontend/partials/header.html
@@ -0,0 +1,16 @@
+<nav class="site-header">
+    <a class="site-brand" href="{% url 'home' %}">DroneWars</a>
+    <div class="site-actions">
+        {% if user.is_authenticated %}
+            <span class="site-user">
+                {{ user.profile.display_name|default:user.get_username }}
+            </span>
+            <a class="site-link" href="{% url 'logout' %}">Logout</a>
+        {% else %}
+            <a class="site-link" href="{% url 'login' %}">Login</a>
+            <a class="site-link site-link--accent" href="{% url 'register' %}">
+                Register
+            </a>
+        {% endif %}
+    </div>
+</nav>