398 lines
12 KiB
HTML
398 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}The Shooter's Network{% endblock %}</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
background: #f4f5f7;
|
|
color: #222;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── 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;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 2rem 2.5rem;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
h1 { font-size: 1.8rem; margin-bottom: 1.5rem; color: #1a1a2e; }
|
|
h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; color: #1a1a2e; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.3rem; }
|
|
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: #333; }
|
|
a { color: #1f77b4; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
.error {
|
|
background: #fff0f0;
|
|
border-left: 4px solid #e74c3c;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 4px;
|
|
margin-bottom: 1.25rem;
|
|
color: #c0392b;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
th, td {
|
|
text-align: left;
|
|
padding: 0.55rem 0.9rem;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
font-size: 0.92rem;
|
|
}
|
|
th { background: #f0f4ff; font-weight: 600; color: #444; }
|
|
tr:last-child td { border-bottom: none; }
|
|
tr:hover td { background: #fafbff; }
|
|
.group-section {
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
padding: 1.25rem 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.group-meta { font-size: 0.88rem; color: #666; margin-bottom: 0.75rem; }
|
|
.chart-img {
|
|
width: 100%;
|
|
max-width: 860px;
|
|
display: block;
|
|
margin-top: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
{% 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;">👤</span>
|
|
{% endif %}
|
|
<span>{{ current_user.display_name or current_user.email.split('@')[0] }}</span>
|
|
<span class="caret">▼</span>
|
|
</button>
|
|
<div class="nav-dd-menu">
|
|
<a href="{{ url_for('auth.profile') }}">👤 Profile</a>
|
|
<hr>
|
|
<form method="post" action="{{ url_for('auth.logout') }}">
|
|
<button type="submit">→ 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;">✕</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;">‹</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;">›</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>
|