Vibe coded a bit more ... now we have session, attached picture and analysis, MOA group computation

2026-03-17 17:20:54 +01:00
parent 120dc70cf5
commit 5b18fadb60
55 changed files with 5419 additions and 59 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Ballistic Analyzer</title>
+  <title>{% block title %}The Shooter's Network{% endblock %}</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
@@ -11,8 +11,130 @@
      background: #f4f5f7;
      color: #222;
      min-height: 100vh;
-      padding: 2rem 1rem;
    }
+
+    /* ── Nav ── */
+    .nav {
+      background: #1a1a2e;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1.5rem;
+      height: 52px;
+      gap: 1rem;
+    }
+    .nav-brand {
+      font-weight: 700;
+      font-size: 1rem;
+      color: #fff;
+      text-decoration: none;
+      letter-spacing: 0.02em;
+      white-space: nowrap;
+    }
+    .nav-links {
+      display: flex;
+      align-items: center;
+      gap: 1.25rem;
+      flex-wrap: wrap;
+    }
+    .nav-links a {
+      color: #c8cfe0;
+      text-decoration: none;
+      font-size: 0.9rem;
+    }
+    .nav-links a:hover { color: #fff; }
+    .nav-avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      vertical-align: middle;
+      object-fit: cover;
+    }
+    .nav-right {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex-shrink: 0;
+    }
+    /* ── User dropdown ── */
+    .nav-dropdown { position: relative; }
+    .nav-user-btn {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      background: none;
+      border: 1px solid rgba(255,255,255,.25);
+      border-radius: 20px;
+      padding: 0.25rem 0.75rem 0.25rem 0.4rem;
+      color: #c8cfe0;
+      cursor: pointer;
+      font-size: 0.88rem;
+      font-family: inherit;
+      white-space: nowrap;
+    }
+    .nav-user-btn:hover { border-color: rgba(255,255,255,.55); color: #fff; }
+    .nav-user-btn .caret { font-size: 0.65rem; opacity: .7; }
+    .nav-dd-menu {
+      display: none;
+      position: absolute;
+      right: 0;
+      top: calc(100% + 6px);
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+      box-shadow: 0 4px 16px rgba(0,0,0,.12);
+      min-width: 160px;
+      z-index: 100;
+      overflow: hidden;
+    }
+    .nav-dropdown.open .nav-dd-menu { display: block; }
+    .nav-dd-menu a,
+    .nav-dd-menu button {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 0.65rem 1rem;
+      font-size: 0.9rem;
+      color: #222;
+      text-decoration: none;
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-family: inherit;
+    }
+    .nav-dd-menu a:hover,
+    .nav-dd-menu button:hover { background: #f4f5f7; }
+    .nav-dd-menu hr { border: none; border-top: 1px solid #e8e8e8; margin: 0; }
+    .btn-link {
+      background: none;
+      border: none;
+      color: #c8cfe0;
+      cursor: pointer;
+      font-size: 0.9rem;
+      padding: 0;
+      font-family: inherit;
+    }
+    .btn-link:hover { color: #fff; text-decoration: underline; }
+
+    /* ── Flash messages ── */
+    .flashes {
+      max-width: 960px;
+      margin: 1rem auto 0;
+      padding: 0 1rem;
+    }
+    .flash {
+      padding: 0.75rem 1rem;
+      border-radius: 4px;
+      margin-bottom: 0.5rem;
+      font-size: 0.92rem;
+    }
+    .flash.error   { background: #fff0f0; border-left: 4px solid #e74c3c; color: #c0392b; }
+    .flash.success { background: #f0fff4; border-left: 4px solid #27ae60; color: #1e8449; }
+    .flash.message { background: #f0f4ff; border-left: 4px solid #1f77b4; color: #154360; }
+
+    /* ── Page content ── */
+    .page { padding: 2rem 1rem; }
    .container {
      max-width: 960px;
      margin: 0 auto;
@@ -45,11 +167,7 @@
      border-bottom: 1px solid #e8e8e8;
      font-size: 0.92rem;
    }
-    th {
-      background: #f0f4ff;
-      font-weight: 600;
-      color: #444;
-    }
+    th { background: #f0f4ff; font-weight: 600; color: #444; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #fafbff; }
    .group-section {
@@ -58,11 +176,7 @@
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
    }
-    .group-meta {
-      font-size: 0.88rem;
-      color: #666;
-      margin-bottom: 0.75rem;
-    }
+    .group-meta { font-size: 0.88rem; color: #666; margin-bottom: 0.75rem; }
    .chart-img {
      width: 100%;
      max-width: 860px;
@@ -73,8 +187,211 @@
  </style>
 </head>
 <body>
-  <div class="container">
-    {% block content %}{% endblock %}
+
+  {% block body %}
+  <nav class="nav">
+    <a href="/" class="nav-brand">The Shooter's Network</a>
+
+    <div class="nav-links">
+      {% if current_user.is_authenticated %}
+        <a href="{{ url_for('analyze') }}">New Analysis</a>
+        <a href="{{ url_for('equipment.index') }}">Equipment</a>
+        <a href="{{ url_for('sessions.index') }}">Sessions</a>
+        <a href="{{ url_for('dashboard.index') }}">Dashboard</a>
+      {% endif %}
+    </div>
+
+    <div class="nav-right">
+      {% if current_user.is_authenticated %}
+        <div class="nav-dropdown" id="userDropdown">
+          <button class="nav-user-btn" onclick="toggleDropdown(event)">
+            {% set av = current_user.effective_avatar_url %}
+            {% if av %}
+              <img src="{{ av }}" class="nav-avatar" alt="">
+            {% else %}
+              <span style="font-size:1.1rem;line-height:1;">&#128100;</span>
+            {% endif %}
+            <span>{{ current_user.display_name or current_user.email.split('@')[0] }}</span>
+            <span class="caret">&#9660;</span>
+          </button>
+          <div class="nav-dd-menu">
+            <a href="{{ url_for('auth.profile') }}">&#128100;&ensp;Profile</a>
+            <hr>
+            <form method="post" action="{{ url_for('auth.logout') }}">
+              <button type="submit">&#8594;&ensp;Logout</button>
+            </form>
+          </div>
+        </div>
+      {% else %}
+        <a href="{{ url_for('auth.login') }}" style="color:#c8cfe0;font-size:0.9rem;text-decoration:none;">Login</a>
+        <a href="{{ url_for('auth.register') }}"
+           style="background:#1f77b4;color:#fff;padding:0.35rem 0.9rem;border-radius:4px;font-size:0.88rem;text-decoration:none;">
+          Join free
+        </a>
+      {% endif %}
+    </div>
+  </nav>
+
+  <script>
+  function toggleDropdown(e) {
+    e.stopPropagation();
+    document.getElementById('userDropdown').classList.toggle('open');
+  }
+  document.addEventListener('click', function() {
+    var d = document.getElementById('userDropdown');
+    if (d) d.classList.remove('open');
+  });
+  </script>
+
+  {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+      <div class="flashes">
+        {% for category, message in messages %}
+          <div class="flash {{ category }}">{{ message }}</div>
+        {% endfor %}
+      </div>
+    {% endif %}
+  {% endwith %}
+
+  <div class="page">
+    <div class="container">
+      {% block content %}{% endblock %}
+    </div>
  </div>
+  {% endblock %}
+
+  {# ── Lightbox ── always present, activated by any img[data-gallery] #}
+  <div id="lb" role="dialog" aria-modal="true" aria-label="Photo viewer"
+       style="display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.88);
+              align-items:center;justify-content:center;">
+
+    <button id="lb-close" aria-label="Close"
+            style="position:absolute;top:.9rem;right:1.2rem;background:none;border:none;
+                   color:#fff;font-size:2rem;line-height:1;cursor:pointer;opacity:.8;">&#x2715;</button>
+
+    <button id="lb-prev" aria-label="Previous"
+            style="position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
+                   background:rgba(255,255,255,.15);border:none;color:#fff;font-size:2.5rem;
+                   line-height:1;padding:.2rem .55rem;border-radius:6px;cursor:pointer;">&#8249;</button>
+
+    <button id="lb-next" aria-label="Next"
+            style="position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
+                   background:rgba(255,255,255,.15);border:none;color:#fff;font-size:2.5rem;
+                   line-height:1;padding:.2rem .55rem;border-radius:6px;cursor:pointer;">&#8250;</button>
+
+    <div style="max-width:92vw;text-align:center;pointer-events:none;">
+      <img id="lb-img" src="" alt=""
+           style="max-width:92vw;max-height:88vh;object-fit:contain;border-radius:4px;
+                  display:block;margin:0 auto;pointer-events:none;">
+      <div id="lb-caption"
+           style="color:#ddd;margin-top:.6rem;font-size:.9rem;min-height:1.2em;"></div>
+      <div id="lb-counter"
+           style="color:#aaa;font-size:.78rem;margin-top:.2rem;"></div>
+    </div>
+  </div>
+
+  <script>
+  (function () {
+    var lb = document.getElementById('lb');
+    var lbImg = document.getElementById('lb-img');
+    var lbCap = document.getElementById('lb-caption');
+    var lbCnt = document.getElementById('lb-counter');
+    var lbPrev = document.getElementById('lb-prev');
+    var lbNext = document.getElementById('lb-next');
+
+    var gallery = [];  // [{src, caption}]
+    var current = 0;
+
+    function open(items, idx) {
+      gallery = items;
+      current = idx;
+      render();
+      lb.style.display = 'flex';
+      document.body.style.overflow = 'hidden';
+      lb.focus();
+    }
+
+    function close() {
+      lb.style.display = 'none';
+      document.body.style.overflow = '';
+    }
+
+    function render() {
+      var item = gallery[current];
+      lbImg.src = item.src;
+      lbImg.alt = item.caption || '';
+      lbCap.textContent = item.caption || '';
+      if (gallery.length > 1) {
+        lbPrev.style.display = '';
+        lbNext.style.display = '';
+        lbCnt.textContent = (current + 1) + ' / ' + gallery.length;
+      } else {
+        lbPrev.style.display = 'none';
+        lbNext.style.display = 'none';
+        lbCnt.textContent = '';
+      }
+    }
+
+    function move(delta) {
+      current = (current + delta + gallery.length) % gallery.length;
+      render();
+    }
+
+    // Click outside the image closes
+    lb.addEventListener('click', function (e) {
+      if (e.target === lb) close();
+    });
+    document.getElementById('lb-close').addEventListener('click', close);
+    lbPrev.addEventListener('click', function (e) { e.stopPropagation(); move(-1); });
+    lbNext.addEventListener('click', function (e) { e.stopPropagation(); move(1); });
+
+    document.addEventListener('keydown', function (e) {
+      if (lb.style.display === 'none') return;
+      if (e.key === 'Escape') close();
+      if (e.key === 'ArrowLeft')  move(-1);
+      if (e.key === 'ArrowRight') move(1);
+    });
+
+    // Touch swipe support
+    var touchStartX = null;
+    lb.addEventListener('touchstart', function (e) { touchStartX = e.touches[0].clientX; });
+    lb.addEventListener('touchend', function (e) {
+      if (touchStartX === null) return;
+      var dx = e.changedTouches[0].clientX - touchStartX;
+      if (Math.abs(dx) > 40) move(dx < 0 ? 1 : -1);
+      touchStartX = null;
+    });
+
+    // Wire up all gallery images after DOM is ready
+    function initGalleries() {
+      var groups = {};
+      document.querySelectorAll('img[data-gallery]').forEach(function (img) {
+        var g = img.getAttribute('data-gallery');
+        if (!groups[g]) groups[g] = [];
+        groups[g].push({ src: img.getAttribute('data-src') || img.src,
+                         caption: img.getAttribute('data-caption') || '',
+                         el: img });
+      });
+
+      Object.keys(groups).forEach(function (g) {
+        var items = groups[g];
+        items.forEach(function (item, idx) {
+          item.el.style.cursor = 'zoom-in';
+          item.el.addEventListener('click', function (e) {
+            e.preventDefault();
+            open(items.map(function (x) { return { src: x.src, caption: x.caption }; }), idx);
+          });
+        });
+      });
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initGalleries);
+    } else {
+      initGalleries();
+    }
+  })();
+  </script>
+
 </body>
 </html>