ed
This commit is contained in:
Nordi98
parent
4f8d916728
commit
4d24104e50
6 changed files with 3089 additions and 2383 deletions
|
|
@ -5,190 +5,270 @@
|
|||
<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.0.0/css/all.min.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>
|
||||
<!-- Hauptmenü -->
|
||||
<div id="mainMenu" class="menu-container" style="display: none;">
|
||||
<div class="menu-content">
|
||||
<div class="menu-header">
|
||||
<h2><i class="fas fa-id-card"></i> Lizenz-System</h2>
|
||||
<button class="close-btn" onclick="closeMenu()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<!-- 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>
|
||||
|
||||
<div class="menu-body">
|
||||
<div class="menu-section">
|
||||
<h3>Eigene Aktionen</h3>
|
||||
<div class="button-grid">
|
||||
<button class="menu-btn" onclick="requestMyLicense('id_card')">
|
||||
<i class="fas fa-id-card"></i>
|
||||
<span>Eigenen Ausweis zeigen</span>
|
||||
</button>
|
||||
<button class="menu-btn" onclick="requestMyLicense('driver_license')">
|
||||
<i class="fas fa-car"></i>
|
||||
<span>Eigenen Führerschein zeigen</span>
|
||||
</button>
|
||||
<button class="menu-btn" onclick="requestMyLicense('weapon_license')">
|
||||
<i class="fas fa-crosshairs"></i>
|
||||
<span>Eigenen Waffenschein zeigen</span>
|
||||
</button>
|
||||
<button class="menu-btn" onclick="requestMyLicense('pilot_license')">
|
||||
<i class="fas fa-plane"></i>
|
||||
<span>Eigene Pilotenlizenz zeigen</span>
|
||||
</button>
|
||||
<!-- 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>
|
||||
|
||||
<div class="menu-section" id="targetSection" style="display: none;">
|
||||
<h3>Aktionen für nahestehende Person</h3>
|
||||
<div class="target-info">
|
||||
<p>Entfernung: <span id="targetDistance">-</span>m</p>
|
||||
</div>
|
||||
<div class="button-grid">
|
||||
<button class="menu-btn" onclick="requestLicense()">
|
||||
<i class="fas fa-search"></i>
|
||||
<span>Lizenz anzeigen lassen</span>
|
||||
</button>
|
||||
<button class="menu-btn" onclick="requestPlayerLicenses()">
|
||||
<i class="fas fa-list"></i>
|
||||
<span>Alle Lizenzen anzeigen</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="license-creation">
|
||||
<h4>Lizenz ausstellen</h4>
|
||||
<div class="button-grid" id="licenseButtons">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erweiterte Lizenz-Erstellung -->
|
||||
<div id="customLicenseForm" class="menu-container" style="display: none;">
|
||||
<div class="menu-content large">
|
||||
<div class="menu-header">
|
||||
<h2><i class="fas fa-plus-circle"></i> <span id="formTitle">Lizenz erstellen</span></h2>
|
||||
<button class="close-btn" onclick="closeCustomForm()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-body">
|
||||
<form id="licenseForm" class="custom-form">
|
||||
<div class="form-grid">
|
||||
<!-- Basis-Informationen -->
|
||||
<div class="form-section">
|
||||
<h3>Basis-Informationen</h3>
|
||||
<div class="form-group">
|
||||
<label for="holderName">Name des Inhabers</label>
|
||||
<input type="text" id="holderName" name="holderName" readonly>
|
||||
</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>
|
||||
|
||||
<!-- Benutzerdefinierte Felder -->
|
||||
<div class="form-section">
|
||||
<h3>Zusätzliche Informationen</h3>
|
||||
<div id="customFields">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</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>
|
||||
|
||||
<!-- Klassen (falls vorhanden) -->
|
||||
<div class="form-section" id="classesSection" style="display: none;">
|
||||
<h3>Klassen/Kategorien</h3>
|
||||
<div id="classesContainer">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vorschau -->
|
||||
<div class="form-section">
|
||||
<h3>Vorschau</h3>
|
||||
<div class="license-
|
||||
<div class="license-preview" id="licensePreview">
|
||||
<div class="preview-header">
|
||||
<div class="preview-photo">
|
||||
<img id="previewPhoto" src="" alt="Foto" onerror="this.src='https://via.placeholder.com/150x200/cccccc/666666?text=Kein+Foto'">
|
||||
</div>
|
||||
<div class="preview-info">
|
||||
<h4 id="previewName">-</h4>
|
||||
<p id="previewType">-</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-details" id="previewDetails">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</div>
|
||||
</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="form-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeCustomForm()">
|
||||
<i class="fas fa-times"></i> Abbrechen
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-check"></i> Lizenz ausstellen
|
||||
</button>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lizenz-Anzeige -->
|
||||
<div id="licenseDisplay" class="menu-container" style="display: none;">
|
||||
<div class="menu-content">
|
||||
<div class="menu-header">
|
||||
<h2><i class="fas fa-id-card"></i> <span id="licenseTitle">Lizenz</span></h2>
|
||||
<button class="close-btn" onclick="closeLicenseDisplay()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-body">
|
||||
<div class="license-card" id="licenseCard">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spieler-Lizenzen Übersicht -->
|
||||
<div id="playerLicensesDisplay" class="menu-container" style="display: none;">
|
||||
<div class="menu-content large">
|
||||
<div class="menu-header">
|
||||
<h2><i class="fas fa-list"></i> Lizenzen von <span id="playerName">-</span></h2>
|
||||
<button class="close-btn" onclick="closePlayerLicenses()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-body">
|
||||
<div class="licenses-grid" id="licensesGrid">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
<!-- 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="no-licenses" id="noLicenses" style="display: none;">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<p>Keine Lizenzen gefunden</p>
|
||||
<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>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
|
||||
|
||||
<!-- 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">
|
||||
<i class="fas fa-spinner fa-spin"></i>
|
||||
<p>Lade...</p>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue