forked from Simnation/Main
274 lines
12 KiB
HTML
274 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>License System</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Hauptcontainer für Lizenz-Anzeige -->
|
|
<div id="license-container" class="hidden">
|
|
<div class="license-overlay" onclick="closeLicense()"></div>
|
|
|
|
<div class="license-card" id="license-card">
|
|
<!-- Sicherheitselemente -->
|
|
<div class="security-strip"></div>
|
|
<div class="hologram"></div>
|
|
<div class="microtext">SECURE DOCUMENT • OFFICIAL USE ONLY • GOVERNMENT ISSUED</div>
|
|
|
|
<!-- Header der Lizenz -->
|
|
<div class="license-header">
|
|
<div class="header-left">
|
|
<div class="license-title" id="license-title">Personalausweis</div>
|
|
<div class="license-subtitle">Bundesrepublik Deutschland</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="license-logo">
|
|
<i class="license-icon" id="license-icon"></i>
|
|
</div>
|
|
<div class="government-seal">
|
|
<i class="fas fa-certificate"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hauptinhalt der Lizenz -->
|
|
<div class="license-content">
|
|
<!-- Foto-Bereich -->
|
|
<div class="license-photo-section">
|
|
<div class="license-photo" id="license-photo">
|
|
<img id="player-photo" class="hidden" alt="Spieler Foto">
|
|
<div id="photo-placeholder" class="photo-placeholder">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
</div>
|
|
<div class="photo-frame"></div>
|
|
</div>
|
|
|
|
<!-- Informations-Bereich -->
|
|
<div class="license-info">
|
|
<div class="info-section personal-info">
|
|
<h3 class="section-title">Persönliche Daten</h3>
|
|
|
|
<div class="info-row">
|
|
<span class="label">
|
|
<i class="fas fa-user"></i>
|
|
Name:
|
|
</span>
|
|
<span class="value" id="license-name">Max Mustermann</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">
|
|
<i class="fas fa-birthday-cake"></i>
|
|
Geburtsdatum:
|
|
</span>
|
|
<span class="value" id="license-birthday">01.01.1990</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">
|
|
<i class="fas fa-venus-mars"></i>
|
|
Geschlecht:
|
|
</span>
|
|
<span class="value" id="license-gender">Männlich</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-section document-info">
|
|
<h3 class="section-title">Dokument-Informationen</h3>
|
|
|
|
<div class="info-row">
|
|
<span class="label">
|
|
<i class="fas fa-calendar-plus"></i>
|
|
Ausgestellt:
|
|
</span>
|
|
<span class="value" id="license-issue">01.01.2024</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">
|
|
<i class="fas fa-calendar-times"></i>
|
|
Gültig bis:
|
|
</span>
|
|
<span class="value" id="license-expire">01.01.2034</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">
|
|
<i class="fas fa-hashtag"></i>
|
|
Dokument-ID:
|
|
</span>
|
|
<span class="value" id="license-id">#000001</span>
|
|
</div>
|
|
|
|
<div class="info-row" id="license-classes-row">
|
|
<span class="label">
|
|
<i class="fas fa-list"></i>
|
|
Klassen:
|
|
</span>
|
|
<span class="value" id="license-classes">A, B, C</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">
|
|
<i class="fas fa-user-tie"></i>
|
|
Ausgestellt von:
|
|
</span>
|
|
<span class="value" id="license-issuer">Behörde</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer der Lizenz -->
|
|
<div class="license-footer">
|
|
<div class="footer-left">
|
|
<div class="license-status" id="license-status">
|
|
<i class="status-icon"></i>
|
|
<span class="status-text">Gültig</span>
|
|
</div>
|
|
|
|
<div class="validity-indicator" id="validity-indicator">
|
|
<div class="validity-bar">
|
|
<div class="validity-fill" id="validity-fill"></div>
|
|
</div>
|
|
<span class="validity-text" id="validity-text">Noch 365 Tage gültig</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-center">
|
|
<div class="qr-code" id="qr-code">
|
|
<div class="qr-pattern">
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
<div class="qr-dot"></div>
|
|
</div>
|
|
<span class="qr-label">QR</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-right">
|
|
<button class="action-btn view-btn" onclick="flipCard()" title="Rückseite anzeigen">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<span>Drehen</span>
|
|
</button>
|
|
|
|
<button class="action-btn close-btn" onclick="closeLicense()" title="Schließen">
|
|
<i class="fas fa-times"></i>
|
|
<span>Schließen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rückseite der Lizenz (für Führerschein-Klassen etc.) -->
|
|
<div class="license-back hidden" id="license-back">
|
|
<div class="back-header">
|
|
<h3>Zusätzliche Informationen</h3>
|
|
</div>
|
|
|
|
<div class="back-content">
|
|
<div class="classes-grid" id="classes-grid">
|
|
<!-- Wird dynamisch befüllt -->
|
|
</div>
|
|
|
|
<div class="restrictions" id="restrictions">
|
|
<h4>Beschränkungen:</h4>
|
|
<ul id="restrictions-list">
|
|
<!-- Wird dynamisch befüllt -->
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="notes" id="notes">
|
|
<h4>Bemerkungen:</h4>
|
|
<p id="notes-text">Keine besonderen Bemerkungen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="back-footer">
|
|
<button class="action-btn" onclick="flipCard()">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Zurück
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kamera-Interface für Foto-Aufnahme -->
|
|
<div id="camera-container" class="hidden">
|
|
<div class="camera-overlay" onclick="closeCamera()"></div>
|
|
|
|
<div class="camera-interface">
|
|
<div class="camera-header">
|
|
<h3>Foto für Lizenz aufnehmen</h3>
|
|
<button class="camera-close" onclick="closeCamera()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="camera-content">
|
|
<div class="camera-preview">
|
|
<video id="camera-video" autoplay playsinline></video>
|
|
<canvas id="camera-canvas" class="hidden"></canvas>
|
|
|
|
<div class="camera-overlay-guide">
|
|
<div class="face-guide">
|
|
<div class="guide-circle"></div>
|
|
<p>Gesicht hier positionieren</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="camera-controls">
|
|
<button class="camera-btn capture-btn" onclick="takePhoto()">
|
|
<i class="fas fa-camera"></i>
|
|
Foto aufnehmen
|
|
</button>
|
|
|
|
<button class="camera-btn cancel-btn" onclick="closeCamera()">
|
|
<i class="fas fa-ban"></i>
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading-Overlay -->
|
|
<div id="loading-overlay" class="hidden">
|
|
<div class="loading-spinner">
|
|
<div class="spinner"></div>
|
|
<p>Lizenz wird geladen...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification-System -->
|
|
<div id="notification-container">
|
|
<!-- Notifications werden hier dynamisch eingefügt -->
|
|
</div>
|
|
|
|
<!-- Audio für Sound-Effekte -->
|
|
<audio id="card-flip-sound" preload="auto">
|
|
<source src="sounds/card_flip.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<audio id="camera-shutter-sound" preload="auto">
|
|
<source src="sounds/camera_shutter.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|