Michael Schiemer
95147ff23e
Remove WireGuard integration from production deployment to simplify infrastructure: - Remove docker-compose-direct-access.yml (VPN-bound services) - Remove VPN-only middlewares from Grafana, Prometheus, Portainer - Remove WireGuard middleware definitions from Traefik - Remove WireGuard IPs (10.8.0.0/24) from Traefik forwarded headers All monitoring services now publicly accessible via subdomains: - grafana.michaelschiemer.de (with Grafana native auth) - prometheus.michaelschiemer.de (with Basic Auth) - portainer.michaelschiemer.de (with Portainer native auth) All services use Let's Encrypt SSL certificates via Traefik.
271 lines
8.8 KiB
HTML
271 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Test QR Codes</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 20px;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
h1 {
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
font-size: 2.5em;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #666;
|
||
margin-bottom: 30px;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.card {
|
||
background: #f8f9fa;
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.card h2 {
|
||
color: #333;
|
||
font-size: 1.2em;
|
||
margin-bottom: 15px;
|
||
border-bottom: 2px solid #667eea;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.qr-container {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
min-height: 250px;
|
||
}
|
||
|
||
.qr-container img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.data {
|
||
background: #e9ecef;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.9em;
|
||
color: #495057;
|
||
margin-bottom: 10px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.info {
|
||
font-size: 0.85em;
|
||
color: #6c757d;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.status {
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
font-size: 0.8em;
|
||
font-weight: bold;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.status.valid {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
|
||
.instructions {
|
||
background: #e7f3ff;
|
||
border-left: 4px solid #2196F3;
|
||
padding: 20px;
|
||
border-radius: 5px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.instructions h3 {
|
||
color: #1976D2;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.instructions ul {
|
||
margin-left: 20px;
|
||
color: #555;
|
||
}
|
||
|
||
.instructions li {
|
||
margin: 5px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>📱 Test QR Codes</h1>
|
||
<p class="subtitle">Generiert mit dem Framework - Scanne mit deinem Smartphone!</p>
|
||
|
||
<div class="instructions">
|
||
<h3>📋 Anleitung</h3>
|
||
<ul>
|
||
<li>Öffne die Kamera-App auf deinem Smartphone</li>
|
||
<li>Richte die Kamera auf einen QR-Code</li>
|
||
<li>Der QR-Code sollte automatisch erkannt werden</li>
|
||
<li>Alternativ: Verwende eine QR-Scanner-App</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h2>HELLO WORLD</h2>
|
||
<div class="qr-container">
|
||
<img src="hello-world-v1-m.svg" alt="QR Code: HELLO WORLD">
|
||
</div>
|
||
<div class="data">HELLO WORLD</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Standard-Test</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Einzelnes Zeichen</h2>
|
||
<div class="qr-container">
|
||
<img src="single-char-v1-m.svg" alt="QR Code: A">
|
||
</div>
|
||
<div class="data">A</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Minimal-Test</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Kurzer Text</h2>
|
||
<div class="qr-container">
|
||
<img src="hello-v1-m.svg" alt="QR Code: HELLO">
|
||
</div>
|
||
<div class="data">HELLO</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Kurzer Text</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>URL</h2>
|
||
<div class="qr-container">
|
||
<img src="url-v1-m.svg" alt="QR Code: URL">
|
||
</div>
|
||
<div class="data">https://example.com</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ URL-Test</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Standard-Text</h2>
|
||
<div class="qr-container">
|
||
<img src="test-text-v1-m.svg" alt="QR Code: Test QR Code">
|
||
</div>
|
||
<div class="data">Test QR Code</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Standard-Text</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Langer Text</h2>
|
||
<div class="qr-container">
|
||
<img src="long-text-v2-m.svg" alt="QR Code: Long Text">
|
||
</div>
|
||
<div class="data">123456789012345678901234567890</div>
|
||
<div class="info">Version 2, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Version 2 Test</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>QR Code Test</h2>
|
||
<div class="qr-container">
|
||
<img src="qr-test-v1-m.svg" alt="QR Code: QR Code Test">
|
||
</div>
|
||
<div class="data">QR Code Test</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Test-Text</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Zahlen</h2>
|
||
<div class="qr-container">
|
||
<img src="numbers-v1-m.svg" alt="QR Code: Numbers">
|
||
</div>
|
||
<div class="data">12345</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Zahlen-Test</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Text mit Sonderzeichen</h2>
|
||
<div class="qr-container">
|
||
<img src="hello-exclamation-v1-m.svg" alt="QR Code: Hello!">
|
||
</div>
|
||
<div class="data">Hello!</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ Sonderzeichen</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>E-Mail</h2>
|
||
<div class="qr-container">
|
||
<img src="email-v1-m.svg" alt="QR Code: Email">
|
||
</div>
|
||
<div class="data">test@example.com</div>
|
||
<div class="info">Version 1, Level M, Byte Mode</div>
|
||
<span class="status valid">✓ E-Mail-Test</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
|
||
<h3 style="color: #333; margin-bottom: 10px;">ℹ️ Technische Informationen</h3>
|
||
<p style="color: #666; line-height: 1.6;">
|
||
Alle QR-Codes wurden mit der Framework-Implementierung generiert.
|
||
Die Reed-Solomon-Fehlerkorrektur ist korrekt implementiert und validiert.
|
||
Die QR-Codes sollten von allen Standard-Scannern lesbar sein.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|
||
|