refactor(deployment): Remove WireGuard VPN dependency and restore public service access
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.
This commit is contained in:
270
tests/debug/test-qrcodes/test-qrcodes.html
Normal file
270
tests/debug/test-qrcodes/test-qrcodes.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user