Michael Trip
b56e866071
All checks were successful
Build and Push Image / build-and-push (push) Successful in 1m26s
225 lines
13 KiB
HTML
225 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Snauw Counter{% endblock %}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
<meta name="description" content="Bijhouden van onvriendelijk gedrag - privé en veilig">
|
|
<meta name="theme-color" content="#667eea">
|
|
|
|
<!-- PWA metadata -->
|
|
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="Snauw Counter">
|
|
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="container">
|
|
<!-- Snauw Counter Banner -->
|
|
<div class="banner-section">
|
|
<div class="banner-image">
|
|
<svg class="snauw-banner" viewBox="0 0 1133 576" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Metal frame background -->
|
|
<defs>
|
|
<linearGradient id="metalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#4a4a4a;stop-opacity:1" />
|
|
<stop offset="50%" style="stop-color:#2c2c2c;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1" />
|
|
</linearGradient>
|
|
<radialGradient id="boltGrad" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
|
|
<stop offset="20%" style="stop-color:#e0e0e0;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#a0a0a0;stop-opacity:1" />
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<!-- Background frame -->
|
|
<rect x="20" y="20" width="1093" height="536" fill="url(#metalGrad)" stroke="#666" stroke-width="4" rx="15"/>
|
|
|
|
<!-- Corner bolts -->
|
|
<circle cx="45" cy="45" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
|
|
<circle cx="45" cy="45" r="8" fill="none" stroke="#222" stroke-width="1"/>
|
|
<circle cx="45" cy="45" r="4" fill="none" stroke="#222" stroke-width="1"/>
|
|
|
|
<circle cx="1088" cy="45" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
|
|
<circle cx="1088" cy="45" r="8" fill="none" stroke="#222" stroke-width="1"/>
|
|
<circle cx="1088" cy="45" r="4" fill="none" stroke="#222" stroke-width="1"/>
|
|
|
|
<circle cx="45" cy="531" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
|
|
<circle cx="45" cy="531" r="8" fill="none" stroke="#222" stroke-width="1"/>
|
|
<circle cx="45" cy="531" r="4" fill="none" stroke="#222" stroke-width="1"/>
|
|
|
|
<circle cx="1088" cy="531" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
|
|
<circle cx="1088" cy="531" r="8" fill="none" stroke="#222" stroke-width="1"/>
|
|
<circle cx="1088" cy="531" r="4" fill="none" stroke="#222" stroke-width="1"/>
|
|
|
|
<!-- Dark stormy background -->
|
|
<rect x="40" y="40" width="1053" height="496" fill="#1a1a2e" rx="10"/>
|
|
|
|
<!-- Storm clouds -->
|
|
<ellipse cx="150" cy="100" rx="60" ry="30" fill="#3d3d5c" opacity="0.8"/>
|
|
<ellipse cx="180" cy="85" rx="45" ry="25" fill="#4a4a6b" opacity="0.7"/>
|
|
<ellipse cx="950" cy="120" rx="70" ry="35" fill="#3d3d5c" opacity="0.8"/>
|
|
<ellipse cx="980" cy="105" rx="50" ry="28" fill="#4a4a6b" opacity="0.7"/>
|
|
<ellipse cx="500" cy="80" rx="40" ry="20" fill="#4a4a6b" opacity="0.6"/>
|
|
|
|
<!-- Lightning effects -->
|
|
<path d="M 120 150 L 140 180 L 130 180 L 150 220 L 135 200 L 145 200 L 125 170 Z" fill="#f1c40f" opacity="0.9"/>
|
|
<path d="M 980 160 L 1000 190 L 990 190 L 1010 230 L 995 210 L 1005 210 L 985 180 Z" fill="#f1c40f" opacity="0.9"/>
|
|
|
|
<!-- Swear symbols -->
|
|
<text x="180" y="250" fill="#e74c3c" font-size="32" font-weight="bold" font-family="Arial, sans-serif">@#$!?!</text>
|
|
|
|
<!-- Main title banner -->
|
|
<path d="M 300 180 L 833 180 L 853 220 L 833 260 L 300 260 L 280 220 Z" fill="#d35400" stroke="#a04000" stroke-width="3"/>
|
|
<path d="M 305 185 L 828 185 L 845 220 L 828 255 L 305 255 L 285 220 Z" fill="#e67e22"/>
|
|
|
|
<text x="566" y="235" text-anchor="middle" fill="white" font-size="42" font-weight="bold" font-family="Arial, sans-serif" text-shadow="2px 2px 4px rgba(0,0,0,0.5)">SNAUW COUNTER!</text>
|
|
|
|
<!-- Counter display -->
|
|
<rect x="410" y="350" width="313" height="80" fill="#2c3e50" stroke="#ecf0f1" stroke-width="4" rx="8"/>
|
|
<rect x="418" y="358" width="297" height="64" fill="#34495e" rx="4"/>
|
|
|
|
<text x="440" y="385" fill="#bdc3c7" font-size="24" font-weight="bold" font-family="Arial, sans-serif">STAND:</text>
|
|
|
|
<!-- Individual counter digits -->
|
|
<rect x="520" y="368" width="50" height="48" fill="#1a1a1a" stroke="#ecf0f1" stroke-width="2" rx="4"/>
|
|
<text x="545" y="402" text-anchor="middle" fill="#e74c3c" font-size="36" font-weight="bold" id="counter-digit-1">0</text>
|
|
|
|
<rect x="580" y="368" width="50" height="48" fill="#1a1a1a" stroke="#ecf0f1" stroke-width="2" rx="4"/>
|
|
<text x="605" y="402" text-anchor="middle" fill="#e74c3c" font-size="36" font-weight="bold" id="counter-digit-2">1</text>
|
|
|
|
<rect x="640" y="368" width="50" height="48" fill="#1a1a1a" stroke="#ecf0f1" stroke-width="2" rx="4"/>
|
|
<text x="665" y="402" text-anchor="middle" fill="#e74c3c" font-size="36" font-weight="bold" id="counter-digit-3">5</text>
|
|
|
|
<!-- Woman (angry, left side) -->
|
|
<!-- Hair -->
|
|
<path d="M 150 280 Q 120 270 110 300 Q 105 330 115 350 Q 125 360 140 365 Q 160 370 180 365 Q 200 360 210 350 Q 220 330 215 300 Q 205 270 175 280" fill="#8B4513" stroke="#654321" stroke-width="2"/>
|
|
|
|
<!-- Face -->
|
|
<ellipse cx="162" cy="320" rx="35" ry="40" fill="#FDBCB4" stroke="#E6A8A0" stroke-width="2"/>
|
|
|
|
<!-- Eyes (angry) -->
|
|
<ellipse cx="150" cy="310" rx="8" ry="6" fill="white"/>
|
|
<ellipse cx="174" cy="310" rx="8" ry="6" fill="white"/>
|
|
<circle cx="150" cy="310" r="4" fill="#2c3e50"/>
|
|
<circle cx="174" cy="310" r="4" fill="#2c3e50"/>
|
|
|
|
<!-- Angry eyebrows -->
|
|
<path d="M 140 300 L 158 305" stroke="#8B4513" stroke-width="3" stroke-linecap="round"/>
|
|
<path d="M 166 305 L 184 300" stroke="#8B4513" stroke-width="3" stroke-linecap="round"/>
|
|
|
|
<!-- Nose -->
|
|
<ellipse cx="162" cy="325" rx="3" ry="5" fill="#E6A8A0"/>
|
|
|
|
<!-- Mouth (shouting) -->
|
|
<ellipse cx="162" cy="340" rx="12" ry="8" fill="#8B0000"/>
|
|
<ellipse cx="162" cy="340" rx="10" ry="6" fill="#000000"/>
|
|
|
|
<!-- Pointing finger -->
|
|
<rect x="200" y="335" width="25" height="8" fill="#FDBCB4" rx="4"/>
|
|
<ellipse cx="228" cy="339" rx="6" ry="4" fill="#FDBCB4"/>
|
|
|
|
<!-- Arm -->
|
|
<ellipse cx="190" cy="360" rx="15" ry="30" fill="#2D4A22" transform="rotate(20 190 360)"/>
|
|
|
|
<!-- Body -->
|
|
<ellipse cx="162" cy="420" rx="40" ry="60" fill="#2D4A22"/>
|
|
|
|
<!-- Man (worried, right side) -->
|
|
<!-- Hair -->
|
|
<path d="M 920 280 Q 890 270 880 300 Q 875 320 885 340 Q 900 355 920 360 Q 945 365 970 360 Q 990 355 1005 340 Q 1015 320 1010 300 Q 1000 270 970 280" fill="#D2691E" stroke="#A0522D" stroke-width="2"/>
|
|
|
|
<!-- Face -->
|
|
<ellipse cx="950" cy="320" rx="40" ry="45" fill="#FDBCB4" stroke="#E6A8A0" stroke-width="2"/>
|
|
|
|
<!-- Eyes (worried) -->
|
|
<ellipse cx="935" cy="310" rx="9" ry="7" fill="white"/>
|
|
<ellipse cx="965" cy="310" rx="9" ry="7" fill="white"/>
|
|
<circle cx="935" cy="312" r="4" fill="#2c3e50"/>
|
|
<circle cx="965" cy="312" r="4" fill="#2c3e50"/>
|
|
|
|
<!-- Worried eyebrows -->
|
|
<path d="M 925 300 Q 935 295 945 300" stroke="#D2691E" stroke-width="3" stroke-linecap="round"/>
|
|
<path d="M 955 300 Q 965 295 975 300" stroke="#D2691E" stroke-width="3" stroke-linecap="round"/>
|
|
|
|
<!-- Nose -->
|
|
<ellipse cx="950" cy="325" rx="3" ry="5" fill="#E6A8A0"/>
|
|
|
|
<!-- Mouth (worried) -->
|
|
<path d="M 935 340 Q 950 350 965 340" stroke="#8B0000" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
|
|
<!-- Hand on head -->
|
|
<ellipse cx="920" cy="300" rx="8" ry="12" fill="#FDBCB4" transform="rotate(-30 920 300)"/>
|
|
<rect x="910" y="290" width="20" height="8" fill="#FDBCB4" rx="4" transform="rotate(-30 920 294)"/>
|
|
|
|
<!-- Arm -->
|
|
<ellipse cx="925" cy="350" rx="12" ry="25" fill="#1E3A8A" transform="rotate(-20 925 350)"/>
|
|
|
|
<!-- Body/shirt -->
|
|
<ellipse cx="950" cy="420" rx="45" ry="65" fill="#1E3A8A"/>
|
|
|
|
<!-- Update header counter with JavaScript hook -->
|
|
<text x="566" y="500" text-anchor="middle" fill="transparent" font-size="1" id="header-counter">015</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="nav">
|
|
<a href="{{ url_for('main.index') }}" {% if request.endpoint == 'main.index' %}class="active"{% endif %}>
|
|
🏠 Home
|
|
</a>
|
|
<a href="{{ url_for('main.statistics') }}" {% if request.endpoint == 'main.statistics' %}class="active"{% endif %}>
|
|
📈 Statistieken
|
|
</a>
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('main.logout') }}">🚪 Uitloggen</a>
|
|
{% else %}
|
|
<a href="{{ url_for('main.login') }}" {% if request.endpoint == 'main.login' %}class="active"{% endif %}>
|
|
🔐 Inloggen
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<!-- Flash messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="flash-messages">
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'error' if category == 'error' else category }}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Privacy notice voor anonieme gebruikers -->
|
|
{% if not current_user.is_authenticated %}
|
|
<div class="privacy-notice" id="privacy-notice">
|
|
<strong>🔒 Privacy:</strong> Als anonieme gebruiker worden je gegevens alleen lokaal opgeslagen in je browser.
|
|
<a href="{{ url_for('main.register') }}" style="color: #856404; text-decoration: underline;">Maak een account</a>
|
|
om je gegevens veilig op te slaan.
|
|
<button onclick="hidePrivacyNotice()" style="float: right; background: none; border: none; color: #856404; cursor: pointer;">✕</button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Floating Action Button voor snelle incident toevoeging -->
|
|
{% if request.endpoint != 'main.add_incident' %}
|
|
<button class="fab" onclick="quickAddIncident()" title="Snel incident toevoegen">+</button>
|
|
{% endif %}
|
|
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|