📝 'feat': Renamed and moved various documentation files to '/docs/' directory
This commit is contained in:
parent
1c466b199a
commit
0e3f316a88
746
backend/app/templates/analytics.html
Normal file
746
backend/app/templates/analytics.html
Normal file
@ -0,0 +1,746 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Erweiterte Analytik - MYP Platform{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_css %}
|
||||||
|
<style>
|
||||||
|
.analytics-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.analytics-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-metric {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-trend-up {
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-trend-down {
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-trend-stable {
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
border: 4px solid #f3f4f6;
|
||||||
|
border-top: 4px solid #3b82f6;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-button {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-button:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="container mx-auto px-4 py-8">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-3xl font-bold text-slate-900 dark:text-white mb-2">
|
||||||
|
📈 Erweiterte Analytik
|
||||||
|
</h1>
|
||||||
|
<p class="text-slate-600 dark:text-slate-400">
|
||||||
|
Umfassende Statistiken und KPIs für die MYP 3D-Druck Platform
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter Section -->
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label class="text-sm font-medium mb-1">Zeitraum</label>
|
||||||
|
<select id="timeRangeSelect" class="bg-white/20 text-white border border-white/30 rounded-lg px-3 py-2 backdrop-blur-sm">
|
||||||
|
<option value="day">Letzter Tag</option>
|
||||||
|
<option value="week">Letzte Woche</option>
|
||||||
|
<option value="month" selected>Letzter Monat</option>
|
||||||
|
<option value="quarter">Letztes Quartal</option>
|
||||||
|
<option value="year">Letztes Jahr</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label class="text-sm font-medium mb-1">Report-Typ</label>
|
||||||
|
<select id="reportTypeSelect" class="bg-white/20 text-white border border-white/30 rounded-lg px-3 py-2 backdrop-blur-sm">
|
||||||
|
<option value="comprehensive">Umfassend</option>
|
||||||
|
<option value="printer_usage">Drucker-Nutzung</option>
|
||||||
|
<option value="user_activity">Benutzer-Aktivität</option>
|
||||||
|
<option value="efficiency">Effizienz</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button id="refreshData" class="export-button">
|
||||||
|
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
||||||
|
</svg>
|
||||||
|
Aktualisieren
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button id="exportReport" class="export-button">
|
||||||
|
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||||
|
</svg>
|
||||||
|
Exportieren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading Indicator -->
|
||||||
|
<div id="loadingIndicator" class="text-center py-8 hidden">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
<p class="mt-4 text-slate-600 dark:text-slate-400">Lade Analytik-Daten...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- KPI Dashboard -->
|
||||||
|
<div id="kpiDashboard" class="mb-8">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6">🎯 Key Performance Indicators</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
|
||||||
|
<!-- KPI Cards werden dynamisch geladen -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Analytics Grid -->
|
||||||
|
<div class="stats-grid">
|
||||||
|
<!-- Drucker-Statistiken -->
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
🖨️ Drucker-Statistiken
|
||||||
|
</h3>
|
||||||
|
<div class="text-2xl">📊</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="printerStatsContainer">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Job-Statistiken -->
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
⚙️ Job-Statistiken
|
||||||
|
</h3>
|
||||||
|
<div class="text-2xl">📈</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="jobStatsContainer">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Benutzer-Statistiken -->
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
👥 Benutzer-Statistiken
|
||||||
|
</h3>
|
||||||
|
<div class="text-2xl">👤</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="userStatsContainer">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Trend-Analyse -->
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg col-span-full">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
📊 Trend-Analyse
|
||||||
|
</h3>
|
||||||
|
<div class="text-2xl">📉</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-container" id="trendChart">
|
||||||
|
<canvas id="trendChartCanvas"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Drucker-Auslastung -->
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
⚡ Drucker-Auslastung
|
||||||
|
</h3>
|
||||||
|
<div class="text-2xl">🔋</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-container" id="utilizationChart">
|
||||||
|
<canvas id="utilizationChartCanvas"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Top-Benutzer -->
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
🏆 Top-Benutzer
|
||||||
|
</h3>
|
||||||
|
<div class="text-2xl">🥇</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="topUsersContainer">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- System-Gesundheit -->
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
💚 System-Gesundheit
|
||||||
|
</h3>
|
||||||
|
<div class="text-2xl">❤️</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="systemHealthContainer">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Report Export Modal -->
|
||||||
|
<div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
|
||||||
|
<div class="flex items-center justify-center min-h-screen p-4">
|
||||||
|
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-md w-full">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||||
|
📊 Report exportieren
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||||
|
Format
|
||||||
|
</label>
|
||||||
|
<select id="exportFormat" class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
|
||||||
|
<option value="json">JSON</option>
|
||||||
|
<option value="csv">CSV</option>
|
||||||
|
<option value="pdf">PDF</option>
|
||||||
|
<option value="excel">Excel</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end space-x-3">
|
||||||
|
<button id="cancelExport" class="px-4 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200">
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button id="confirmExport" class="export-button">
|
||||||
|
Export starten
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* MYP Analytics Dashboard
|
||||||
|
* Erweiterte Analytik und Statistiken
|
||||||
|
*/
|
||||||
|
|
||||||
|
class AnalyticsDashboard {
|
||||||
|
constructor() {
|
||||||
|
this.currentTimeRange = 'month';
|
||||||
|
this.currentReportType = 'comprehensive';
|
||||||
|
this.charts = {};
|
||||||
|
this.data = {};
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.setupEventListeners();
|
||||||
|
this.loadInitialData();
|
||||||
|
}
|
||||||
|
|
||||||
|
setupEventListeners() {
|
||||||
|
// Filter-Änderungen
|
||||||
|
document.getElementById('timeRangeSelect').addEventListener('change', (e) => {
|
||||||
|
this.currentTimeRange = e.target.value;
|
||||||
|
this.loadData();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('reportTypeSelect').addEventListener('change', (e) => {
|
||||||
|
this.currentReportType = e.target.value;
|
||||||
|
this.loadData();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Aktionen
|
||||||
|
document.getElementById('refreshData').addEventListener('click', () => {
|
||||||
|
this.loadData();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('exportReport').addEventListener('click', () => {
|
||||||
|
this.showExportModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Export Modal
|
||||||
|
document.getElementById('cancelExport').addEventListener('click', () => {
|
||||||
|
this.hideExportModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('confirmExport').addEventListener('click', () => {
|
||||||
|
this.exportReport();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Modal schließen bei Klick außerhalb
|
||||||
|
document.getElementById('exportModal').addEventListener('click', (e) => {
|
||||||
|
if (e.target.id === 'exportModal') {
|
||||||
|
this.hideExportModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadInitialData() {
|
||||||
|
this.showLoading();
|
||||||
|
await this.loadData();
|
||||||
|
this.hideLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadData() {
|
||||||
|
try {
|
||||||
|
this.showLoading();
|
||||||
|
|
||||||
|
// KPIs laden
|
||||||
|
await this.loadKPIs();
|
||||||
|
|
||||||
|
// Report-Daten laden
|
||||||
|
await this.loadReportData();
|
||||||
|
|
||||||
|
// Charts aktualisieren
|
||||||
|
this.updateCharts();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Laden der Analytics-Daten:', error);
|
||||||
|
this.showError('Fehler beim Laden der Daten');
|
||||||
|
} finally {
|
||||||
|
this.hideLoading();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadKPIs() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/analytics/dashboard');
|
||||||
|
if (!response.ok) throw new Error('Failed to load KPIs');
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
this.renderKPIs(data.kpis || []);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Laden der KPIs:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadReportData() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/analytics/report/${this.currentReportType}?time_range=${this.currentTimeRange}`);
|
||||||
|
if (!response.ok) throw new Error('Failed to load report data');
|
||||||
|
|
||||||
|
this.data = await response.json();
|
||||||
|
this.renderStatistics();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Laden der Report-Daten:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderKPIs(kpis) {
|
||||||
|
const container = document.querySelector('#kpiDashboard .grid');
|
||||||
|
|
||||||
|
container.innerHTML = kpis.map(kpi => `
|
||||||
|
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<h4 class="text-sm font-medium text-slate-600 dark:text-slate-400">${kpi.name}</h4>
|
||||||
|
<span class="kpi-trend-${kpi.trend}">
|
||||||
|
${kpi.trend === 'up' ? '↗️' : kpi.trend === 'down' ? '↘️' : '➡️'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="kpi-metric text-slate-900 dark:text-white mb-1">
|
||||||
|
${this.formatMetric(kpi.current_value, kpi.unit)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between text-xs">
|
||||||
|
<span class="text-slate-500 dark:text-slate-400">
|
||||||
|
Ziel: ${this.formatMetric(kpi.target_value, kpi.unit)}
|
||||||
|
</span>
|
||||||
|
<span class="kpi-trend-${kpi.trend} font-medium">
|
||||||
|
${kpi.change_percent > 0 ? '+' : ''}${kpi.change_percent}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
renderStatistics() {
|
||||||
|
// Drucker-Statistiken
|
||||||
|
if (this.data.sections?.printers) {
|
||||||
|
this.renderPrinterStats(this.data.sections.printers);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Job-Statistiken
|
||||||
|
if (this.data.sections?.jobs) {
|
||||||
|
this.renderJobStats(this.data.sections.jobs);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Benutzer-Statistiken
|
||||||
|
if (this.data.sections?.users) {
|
||||||
|
this.renderUserStats(this.data.sections.users);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPrinterStats(printerData) {
|
||||||
|
const container = document.getElementById('printerStatsContainer');
|
||||||
|
const summary = printerData.summary;
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||||
|
${summary.total_printers}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">Drucker gesamt</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||||
|
${summary.online_printers}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">Online</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
${summary.availability_rate}% Verfügbarkeit
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2 mt-2">
|
||||||
|
<div class="bg-green-500 h-2 rounded-full" style="width: ${summary.availability_rate}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderJobStats(jobData) {
|
||||||
|
const container = document.getElementById('jobStatsContainer');
|
||||||
|
const summary = jobData.summary;
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||||
|
${summary.total_jobs}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">Jobs gesamt</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||||
|
${summary.success_rate}%
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">Erfolgsrate</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
⌚ ${summary.avg_duration_hours}h Durchschnitt
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">
|
||||||
|
🎯 ${summary.completed_jobs} abgeschlossen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUserStats(userData) {
|
||||||
|
const container = document.getElementById('userStatsContainer');
|
||||||
|
const summary = userData.summary;
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||||
|
${summary.total_users}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">Benutzer gesamt</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||||
|
${summary.active_users}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">Aktiv</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||||
|
${summary.engagement_rate}% Engagement
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-600 dark:text-slate-400">
|
||||||
|
➕ ${summary.new_users} neue Benutzer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Top-Benutzer rendern
|
||||||
|
if (userData.top_users) {
|
||||||
|
this.renderTopUsers(userData.top_users);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTopUsers(topUsers) {
|
||||||
|
const container = document.getElementById('topUsersContainer');
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="space-y-3">
|
||||||
|
${topUsers.slice(0, 5).map((user, index) => `
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||||
|
${index + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-medium text-slate-900 dark:text-white">${user.name || user.username}</div>
|
||||||
|
<div class="text-xs text-slate-600 dark:text-slate-400">${user.jobs} Jobs</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-medium text-slate-600 dark:text-slate-400">
|
||||||
|
${user.total_hours}h
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCharts() {
|
||||||
|
this.updateTrendChart();
|
||||||
|
this.updateUtilizationChart();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTrendChart() {
|
||||||
|
const canvas = document.getElementById('trendChartCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Destroy existing chart
|
||||||
|
if (this.charts.trend) {
|
||||||
|
this.charts.trend.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sample data - would be replaced with real data
|
||||||
|
const dailyTrend = this.data.sections?.jobs?.daily_trend || [];
|
||||||
|
|
||||||
|
this.charts.trend = new Chart(ctx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: dailyTrend.map(d => new Date(d.date).toLocaleDateString('de-DE')),
|
||||||
|
datasets: [{
|
||||||
|
label: 'Jobs pro Tag',
|
||||||
|
data: dailyTrend.map(d => d.jobs),
|
||||||
|
borderColor: '#3b82f6',
|
||||||
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||||
|
tension: 0.4,
|
||||||
|
fill: true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUtilizationChart() {
|
||||||
|
const canvas = document.getElementById('utilizationChartCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Destroy existing chart
|
||||||
|
if (this.charts.utilization) {
|
||||||
|
this.charts.utilization.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
const printerUsage = this.data.sections?.printers?.usage_by_printer || [];
|
||||||
|
|
||||||
|
this.charts.utilization = new Chart(ctx, {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
labels: printerUsage.map(p => p.name),
|
||||||
|
datasets: [{
|
||||||
|
data: printerUsage.map(p => p.utilization_rate),
|
||||||
|
backgroundColor: [
|
||||||
|
'#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
position: 'bottom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
formatMetric(value, unit) {
|
||||||
|
if (typeof value !== 'number') return value;
|
||||||
|
|
||||||
|
if (unit === '%') {
|
||||||
|
return `${value.toFixed(1)}%`;
|
||||||
|
} else if (unit === 'Stunden') {
|
||||||
|
return `${value.toFixed(1)}h`;
|
||||||
|
} else if (unit === 'g') {
|
||||||
|
return `${value.toLocaleString()}g`;
|
||||||
|
} else {
|
||||||
|
return `${value.toLocaleString()} ${unit}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showExportModal() {
|
||||||
|
document.getElementById('exportModal').classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
hideExportModal() {
|
||||||
|
document.getElementById('exportModal').classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
async exportReport() {
|
||||||
|
try {
|
||||||
|
const format = document.getElementById('exportFormat').value;
|
||||||
|
|
||||||
|
const response = await fetch(`/api/analytics/report/${this.currentReportType}?time_range=${this.currentTimeRange}&format=${format}`);
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Export fehlgeschlagen');
|
||||||
|
|
||||||
|
// Download starten
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `myp-analytics-${this.currentReportType}-${this.currentTimeRange}.${format}`;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
|
||||||
|
this.hideExportModal();
|
||||||
|
this.showSuccess('Report erfolgreich exportiert');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Export-Fehler:', error);
|
||||||
|
this.showError('Fehler beim Exportieren des Reports');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showLoading() {
|
||||||
|
document.getElementById('loadingIndicator').classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
hideLoading() {
|
||||||
|
document.getElementById('loadingIndicator').classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
showError(message) {
|
||||||
|
if (window.showToast) {
|
||||||
|
window.showToast(message, 'error');
|
||||||
|
} else {
|
||||||
|
alert(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showSuccess(message) {
|
||||||
|
if (window.showToast) {
|
||||||
|
window.showToast(message, 'success');
|
||||||
|
} else {
|
||||||
|
alert(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dashboard initialisieren
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
new AnalyticsDashboard();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
@ -8,30 +8,61 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="bg-professional">
|
<div class="bg-professional" style="background: #f8fafc !important;">
|
||||||
|
<!-- Dark Mode Override -->
|
||||||
|
<style>
|
||||||
|
.dark .bg-professional {
|
||||||
|
background: #000000 !important;
|
||||||
|
}
|
||||||
|
.dark .professional-hero {
|
||||||
|
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
|
||||||
|
border-color: #333333 !important;
|
||||||
|
}
|
||||||
|
.dark .professional-container {
|
||||||
|
background: #111111 !important;
|
||||||
|
border-color: #333333 !important;
|
||||||
|
}
|
||||||
|
.dark .mb-glass {
|
||||||
|
background: rgba(17, 17, 17, 0.95) !important;
|
||||||
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||||
|
}
|
||||||
|
.dark .input-professional {
|
||||||
|
background: #1a1a1a !important;
|
||||||
|
border-color: #333333 !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
.dark .input-professional:focus {
|
||||||
|
border-color: #3b82f6 !important;
|
||||||
|
background: #222222 !important;
|
||||||
|
}
|
||||||
|
.dark .card-professional {
|
||||||
|
background: rgba(17, 17, 17, 0.95) !important;
|
||||||
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<!-- Professional Hero Header -->
|
<!-- Professional Hero Header -->
|
||||||
<div class="professional-hero hero-pattern animate-fade-in">
|
<div class="professional-hero hero-pattern animate-fade-in" style="margin: 2rem; margin-bottom: 3rem;">
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/20 dark:to-black/40"></div>
|
<div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/40 dark:to-black/60"></div>
|
||||||
|
|
||||||
<!-- Status Indicator -->
|
<!-- Status Indicator -->
|
||||||
<div class="absolute top-6 right-6 flex items-center space-x-3 z-10">
|
<div class="absolute top-6 right-6 flex items-center space-x-4 z-10">
|
||||||
<div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
|
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-3">
|
||||||
<div class="status-dot status-online"></div>
|
<div class="status-dot status-online"></div>
|
||||||
<span class="text-sm font-semibold text-professional-primary">Online</span>
|
<span class="text-sm font-semibold text-professional-primary">Online</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
|
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
|
||||||
<span id="live-time" class="text-sm font-semibold text-professional-primary"></span>
|
<span id="live-time" class="text-sm font-semibold text-professional-primary"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative max-w-6xl mx-auto px-6 lg:px-8 py-16 z-10">
|
<div class="relative max-w-6xl mx-auto px-6 lg:px-8 py-20 z-10">
|
||||||
<div class="text-center animate-slide-up">
|
<div class="text-center animate-slide-up">
|
||||||
<!-- Mercedes-Benz Logo -->
|
<!-- Mercedes-Benz Logo -->
|
||||||
<div class="inline-flex items-center justify-center w-24 h-24 mb-glass rounded-full mb-8 professional-shadow">
|
<div class="inline-flex items-center justify-center w-28 h-28 mb-glass rounded-full mb-10 professional-shadow">
|
||||||
<svg class="w-12 h-12 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
|
<svg class="w-14 h-14 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
|
||||||
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
||||||
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
||||||
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
|
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
|
||||||
@ -41,86 +72,86 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="title-professional text-5xl md:text-6xl font-bold mb-6 tracking-tight">
|
<h1 class="title-professional text-6xl md:text-7xl font-bold mb-8 tracking-tight">
|
||||||
Premium Gastanfrage
|
Premium Gastanfrage
|
||||||
</h1>
|
</h1>
|
||||||
<p class="subtitle-professional text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-8">
|
<p class="subtitle-professional text-2xl md:text-3xl max-w-5xl mx-auto leading-relaxed mb-12">
|
||||||
Exklusiver Zugang zu unseren hochmodernen 3D-Produktionsanlagen mit Mercedes-Benz Qualitätsstandard
|
Exklusiver Zugang zu unseren hochmodernen 3D-Produktionsanlagen mit Mercedes-Benz Qualitätsstandard
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Key Features -->
|
<!-- Key Features -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
|
||||||
<div class="card-professional text-center">
|
<div class="card-professional text-center" style="padding: 2rem;">
|
||||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
|
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl mx-auto mb-6 flex items-center justify-center">
|
||||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-lg font-semibold text-professional-primary mb-2">Automatisierte Prüfverfahren für maximale Effizienz</h3>
|
<h3 class="text-xl font-bold text-professional-primary mb-4">Automatisierte Prüfverfahren für maximale Effizienz</h3>
|
||||||
<p class="text-professional-muted text-sm">Schnelle Bearbeitung Ihrer Anfrage</p>
|
<p class="text-professional-muted">Schnelle Bearbeitung Ihrer Anfrage</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-professional text-center">
|
<div class="card-professional text-center" style="padding: 2rem;">
|
||||||
<div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
|
<div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-2xl mx-auto mb-6 flex items-center justify-center">
|
||||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-lg font-semibold text-professional-primary mb-2">Professionelle 3D-Drucker nach Industriestandard</h3>
|
<h3 class="text-xl font-bold text-professional-primary mb-4">Professionelle 3D-Drucker nach Industriestandard</h3>
|
||||||
<p class="text-professional-muted text-sm">Höchste Qualität für Ihre Projekte</p>
|
<p class="text-professional-muted">Höchste Qualität für Ihre Projekte</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-professional text-center">
|
<div class="card-professional text-center" style="padding: 2rem;">
|
||||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl mx-auto mb-6 flex items-center justify-center">
|
||||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-lg font-semibold text-professional-primary mb-2">24/7 verfügbar nach Terminvereinbarung</h3>
|
<h3 class="text-xl font-bold text-professional-primary mb-4">24/7 verfügbar nach Terminvereinbarung</h3>
|
||||||
<p class="text-professional-muted text-sm">Flexible Zeiten für Ihre Bedürfnisse</p>
|
<p class="text-professional-muted">Flexible Zeiten für Ihre Bedürfnisse</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10">
|
<div class="max-w-5xl mx-auto px-6 lg:px-8 -mt-12 relative z-10" style="margin-bottom: 4rem;">
|
||||||
|
|
||||||
<!-- Form Container -->
|
<!-- Form Container -->
|
||||||
<div class="professional-container p-8 lg:p-12 animate-slide-up">
|
<div class="professional-container animate-slide-up" style="padding: 3rem; border-radius: 2rem; margin-bottom: 3rem;">
|
||||||
<div class="text-center mb-10">
|
<div class="text-center mb-16">
|
||||||
<h2 class="title-professional text-3xl font-bold mb-4">
|
<h2 class="title-professional text-4xl font-bold mb-6">
|
||||||
Starten Sie Ihre Anfrage
|
Starten Sie Ihre Anfrage
|
||||||
</h2>
|
</h2>
|
||||||
<p class="subtitle-professional text-lg">
|
<p class="subtitle-professional text-xl">
|
||||||
Füllen Sie das folgende Formular aus und erhalten Sie innerhalb weniger Minuten Ihren persönlichen Zugangscode.
|
Füllen Sie das folgende Formular aus und erhalten Sie innerhalb weniger Minuten Ihren persönlichen Zugangscode.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="guestRequestForm" class="space-y-8">
|
<form id="guestRequestForm" class="space-y-12">
|
||||||
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||||
|
|
||||||
<!-- Name (Pflichtfeld) -->
|
<!-- Name (Pflichtfeld) -->
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<label for="name" class="block text-sm font-semibold text-professional-primary mb-3">
|
<label for="name" class="block text-base font-bold text-professional-primary mb-4">
|
||||||
Vollständiger Name <span class="text-red-500">*</span>
|
Vollständiger Name <span class="text-red-500 text-lg">*</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="name" id="name" required
|
<input type="text" name="name" id="name" required
|
||||||
class="input-professional"
|
class="input-professional w-full text-base py-4 px-5"
|
||||||
placeholder="Max Mustermann">
|
placeholder="Max Mustermann" style="border-radius: 1rem;">
|
||||||
<div class="mt-2 text-xs text-professional-muted">
|
<div class="mt-3 text-sm text-professional-muted">
|
||||||
Geben Sie Ihren vollständigen Namen für die Registrierung ein
|
Geben Sie Ihren vollständigen Namen für die Registrierung ein
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- E-Mail -->
|
<!-- E-Mail -->
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<label for="email" class="block text-sm font-semibold text-professional-primary mb-3">
|
<label for="email" class="block text-base font-bold text-professional-primary mb-4">
|
||||||
E-Mail-Adresse
|
E-Mail-Adresse
|
||||||
</label>
|
</label>
|
||||||
<input type="email" name="email" id="email"
|
<input type="email" name="email" id="email"
|
||||||
class="input-professional"
|
class="input-professional w-full text-base py-4 px-5"
|
||||||
placeholder="max.mustermann@mercedes-benz.com">
|
placeholder="max.mustermann@mercedes-benz.com" style="border-radius: 1rem;">
|
||||||
<div class="mt-2 text-xs text-professional-muted">
|
<div class="mt-3 text-sm text-professional-muted">
|
||||||
Optional: Für Updates und Benachrichtigungen
|
Optional: Für Updates und Benachrichtigungen
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -128,62 +159,62 @@
|
|||||||
|
|
||||||
<!-- Projektzweck -->
|
<!-- Projektzweck -->
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<label for="reason" class="block text-sm font-semibold text-professional-primary mb-3">
|
<label for="reason" class="block text-base font-bold text-professional-primary mb-4">
|
||||||
Projektbeschreibung & Verwendungszweck
|
Projektbeschreibung & Verwendungszweck
|
||||||
</label>
|
</label>
|
||||||
<textarea name="reason" id="reason" rows="4"
|
<textarea name="reason" id="reason" rows="6"
|
||||||
class="input-professional resize-none"
|
class="input-professional resize-none w-full text-base py-4 px-5"
|
||||||
placeholder="Beschreiben Sie ausführlich Ihr Projekt, den geplanten Druckauftrag und den Verwendungszweck. Je detaillierter, desto schneller die Genehmigung..."></textarea>
|
placeholder="Beschreiben Sie ausführlich Ihr Projekt, den geplanten Druckauftrag und den Verwendungszweck. Je detaillierter, desto schneller die Genehmigung..." style="border-radius: 1rem;"></textarea>
|
||||||
<div class="mt-2 text-xs text-professional-muted">
|
<div class="mt-3 text-sm text-professional-muted">
|
||||||
Tipp: Eine detaillierte Beschreibung beschleunigt die Genehmigung erheblich
|
Tipp: Eine detaillierte Beschreibung beschleunigt die Genehmigung erheblich
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||||
|
|
||||||
<!-- Druckdauer -->
|
<!-- Druckdauer -->
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<label for="duration_min" class="block text-sm font-semibold text-professional-primary mb-3">
|
<label for="duration_min" class="block text-base font-bold text-professional-primary mb-4">
|
||||||
Geschätzte Produktionszeit
|
Geschätzte Produktionszeit
|
||||||
</label>
|
</label>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input type="number" name="duration_min" id="duration_min" value="60" min="15" max="480"
|
<input type="number" name="duration_min" id="duration_min" value="60" min="15" max="480"
|
||||||
class="input-professional"
|
class="input-professional w-full text-base py-4 px-5"
|
||||||
placeholder="60">
|
placeholder="60" style="border-radius: 1rem;">
|
||||||
<div class="absolute inset-y-0 right-0 flex items-center pr-6 pointer-events-none">
|
<div class="absolute inset-y-0 right-0 flex items-center pr-6 pointer-events-none">
|
||||||
<span class="text-professional-muted font-medium">min</span>
|
<span class="text-professional-muted font-medium text-base">min</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 flex items-center justify-between text-xs text-professional-muted">
|
<div class="mt-3 flex items-center justify-between text-sm text-professional-muted">
|
||||||
<span>Minimum: 15 Minuten</span>
|
<span>Minimum: 15 Minuten</span>
|
||||||
<span>Maximum: 8 Stunden</span>
|
<span>Maximum: 8 Stunden</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1 w-full bg-slate-200 dark:bg-slate-600 rounded-full h-1">
|
<div class="mt-3 w-full bg-slate-200 dark:bg-slate-600 rounded-full h-2">
|
||||||
<div id="duration-progress" class="bg-gradient-to-r from-blue-500 to-purple-500 h-1 rounded-full transition-all duration-300" style="width: 12.5%"></div>
|
<div id="duration-progress" class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all duration-300" style="width: 12.5%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Drucker-Auswahl -->
|
<!-- Drucker-Auswahl -->
|
||||||
{% if printers %}
|
{% if printers %}
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<label for="printer_id" class="block text-sm font-semibold text-professional-primary mb-3">
|
<label for="printer_id" class="block text-base font-bold text-professional-primary mb-4">
|
||||||
Bevorzugte Produktionseinheit
|
Bevorzugte Produktionseinheit
|
||||||
</label>
|
</label>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<select name="printer_id" id="printer_id"
|
<select name="printer_id" id="printer_id"
|
||||||
class="input-professional appearance-none pr-12 cursor-pointer">
|
class="input-professional appearance-none pr-12 cursor-pointer w-full text-base py-4 px-5" style="border-radius: 1rem;">
|
||||||
<option value="">Automatische Zuweisung</option>
|
<option value="">Automatische Zuweisung</option>
|
||||||
{% for printer in printers %}
|
{% for printer in printers %}
|
||||||
<option value="{{ printer.id }}">{{ printer.name }} {% if printer.location %}({{ printer.location }}){% endif %}</option>
|
<option value="{{ printer.id }}">{{ printer.name }} {% if printer.location %}({{ printer.location }}){% endif %}</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
<div class="absolute inset-y-0 right-0 flex items-center pr-6 pointer-events-none">
|
<div class="absolute inset-y-0 right-0 flex items-center pr-6 pointer-events-none">
|
||||||
<svg class="h-5 w-5 text-professional-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="h-6 w-6 text-professional-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 text-xs text-professional-muted">
|
<div class="mt-3 text-sm text-professional-muted">
|
||||||
Tipp: Lassen Sie das System den optimalen Drucker für Sie auswählen
|
Tipp: Lassen Sie das System den optimalen Drucker für Sie auswählen
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -191,7 +222,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Professional Info-Box -->
|
<!-- Professional Info-Box -->
|
||||||
<div class="alert-professional alert-info">
|
<div class="alert-professional alert-info" style="border-radius: 2rem; padding: 2.5rem;">
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center">
|
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center">
|
||||||
<svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20">
|
<svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||||
@ -336,11 +367,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
|
|
||||||
// Color changes based on duration
|
// Color changes based on duration
|
||||||
if (value <= 60) {
|
if (value <= 60) {
|
||||||
durationProgress.className = 'bg-gradient-to-r from-green-500 to-emerald-500 h-1 rounded-full transition-all duration-300';
|
durationProgress.className = 'bg-gradient-to-r from-green-500 to-emerald-500 h-2 rounded-full transition-all duration-300';
|
||||||
} else if (value <= 240) {
|
} else if (value <= 240) {
|
||||||
durationProgress.className = 'bg-gradient-to-r from-blue-500 to-cyan-500 h-1 rounded-full transition-all duration-300';
|
durationProgress.className = 'bg-gradient-to-r from-blue-500 to-cyan-500 h-2 rounded-full transition-all duration-300';
|
||||||
} else {
|
} else {
|
||||||
durationProgress.className = 'bg-gradient-to-r from-orange-500 to-red-500 h-1 rounded-full transition-all duration-300';
|
durationProgress.className = 'bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full transition-all duration-300';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,141 +1,216 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block title %}Job mit Code starten{% endblock %}
|
{% block title %}Job mit Code starten - Mercedes-Benz MYP Platform{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
|
<div class="bg-professional" style="background: #f8fafc !important;">
|
||||||
|
<!-- Dark Mode Override -->
|
||||||
|
<style>
|
||||||
|
.dark .bg-professional {
|
||||||
|
background: #000000 !important;
|
||||||
|
}
|
||||||
|
.dark .professional-hero {
|
||||||
|
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
|
||||||
|
border-color: #333333 !important;
|
||||||
|
}
|
||||||
|
.dark .professional-container {
|
||||||
|
background: #111111 !important;
|
||||||
|
border-color: #333333 !important;
|
||||||
|
}
|
||||||
|
.dark .mb-glass {
|
||||||
|
background: rgba(17, 17, 17, 0.95) !important;
|
||||||
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||||
|
}
|
||||||
|
.dark .code-input {
|
||||||
|
background: #1a1a1a !important;
|
||||||
|
border-color: #333333 !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
.dark .code-input:focus {
|
||||||
|
border-color: #3b82f6 !important;
|
||||||
|
background: #222222 !important;
|
||||||
|
}
|
||||||
|
.dark .code-input.valid {
|
||||||
|
border-color: #10b981 !important;
|
||||||
|
background: rgba(16, 185, 129, 0.1) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<!-- Header Section -->
|
<!-- Professional Hero Header -->
|
||||||
<div class="relative overflow-hidden">
|
<div class="professional-hero hero-pattern animate-fade-in" style="margin: 2rem; margin-bottom: 3rem;">
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10"></div>
|
<div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/40 dark:to-black/60"></div>
|
||||||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
|
|
||||||
<h1 class="text-4xl lg:text-6xl font-bold text-slate-900 dark:text-white mb-6">
|
<!-- Status Indicator -->
|
||||||
<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
<div class="absolute top-6 right-6 flex items-center space-x-4 z-10">
|
||||||
|
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<div class="status-dot status-online"></div>
|
||||||
|
<span class="text-sm font-semibold text-professional-primary">Live System</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
|
||||||
|
<span id="live-time" class="text-sm font-semibold text-professional-primary"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative max-w-6xl mx-auto px-6 lg:px-8 py-20 z-10">
|
||||||
|
<div class="text-center animate-slide-up">
|
||||||
|
<!-- Mercedes-Benz Logo -->
|
||||||
|
<div class="inline-flex items-center justify-center w-28 h-28 mb-glass rounded-full mb-10 professional-shadow">
|
||||||
|
<svg class="w-14 h-14 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
|
||||||
|
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
||||||
|
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
||||||
|
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
|
||||||
|
C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
|
||||||
|
C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
|
||||||
|
c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="title-professional text-6xl md:text-7xl font-bold mb-8 tracking-tight">
|
||||||
Job starten
|
Job starten
|
||||||
</span>
|
</h1>
|
||||||
</h1>
|
<p class="subtitle-professional text-2xl md:text-3xl max-w-5xl mx-auto leading-relaxed mb-12">
|
||||||
<p class="text-xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto leading-relaxed">
|
Geben Sie Ihren 6-stelligen Zugangscode ein, um Ihren genehmigten Druckauftrag zu starten
|
||||||
Geben Sie Ihren 6-stelligen Zugangscode ein, um Ihren genehmigten Druckauftrag zu starten.
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<div class="max-w-3xl mx-auto px-6 lg:px-8 -mt-12 relative z-10" style="margin-bottom: 4rem;">
|
||||||
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10">
|
|
||||||
|
|
||||||
<!-- Code-Eingabe Container -->
|
<!-- Code-Eingabe Container -->
|
||||||
<div class="form-container professional-shadow p-8 lg:p-12">
|
<div class="professional-container animate-slide-up" style="padding: 3rem; border-radius: 2rem; margin-bottom: 2rem;">
|
||||||
<div class="text-center mb-10">
|
<div class="text-center mb-12">
|
||||||
<div class="w-20 h-20 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
<div class="w-24 h-24 bg-gradient-to-r from-green-500 to-emerald-500 rounded-3xl flex items-center justify-center mx-auto mb-8">
|
||||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-3a1 1 0 011-1h2.586l6.243-6.243A6 6 0 0121 9z"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-3a1 1 0 011-1h2.586l6.243-6.243A6 6 0 0121 9z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="text-3xl font-bold text-slate-900 dark:text-white mb-4">
|
<h2 class="title-professional text-4xl font-bold mb-6">
|
||||||
Zugangscode eingeben
|
Zugangscode eingeben
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-lg text-slate-600 dark:text-slate-400">
|
<p class="subtitle-professional text-xl">
|
||||||
Ihr persönlicher 6-stelliger Code wurde Ihnen nach der Genehmigung mitgeteilt.
|
Ihr persönlicher 6-stelliger Code wurde Ihnen nach der Genehmigung mitgeteilt.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Erfolgs-Nachricht (versteckt) -->
|
<!-- Erfolgs-Nachricht (versteckt) -->
|
||||||
<div id="successMessage" class="hidden mb-8 p-6 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border border-green-200 dark:border-green-700 rounded-2xl">
|
<div id="successMessage" class="hidden mb-8 alert-professional alert-success" style="border-radius: 2rem; padding: 2rem;">
|
||||||
<div class="flex items-center">
|
<div class="flex-shrink-0">
|
||||||
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4">
|
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center">
|
||||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<h3 class="text-lg font-semibold text-green-800 dark:text-green-200">Job erfolgreich gestartet!</h3>
|
<div class="flex-1 ml-6">
|
||||||
<p class="text-green-700 dark:text-green-300" id="successDetails"></p>
|
<h3 class="text-xl font-bold text-professional-primary mb-3">Job erfolgreich gestartet!</h3>
|
||||||
</div>
|
<p class="text-professional-secondary" id="successDetails"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Fehler-Nachricht (versteckt) -->
|
<!-- Fehler-Nachricht (versteckt) -->
|
||||||
<div id="errorMessage" class="hidden mb-8 p-6 bg-gradient-to-r from-red-50 to-rose-50 dark:from-red-900/20 dark:to-rose-900/20 border border-red-200 dark:border-red-700 rounded-2xl">
|
<div id="errorMessage" class="hidden mb-8 alert-professional alert-danger" style="border-radius: 2rem; padding: 2rem;">
|
||||||
<div class="flex items-center">
|
<div class="flex-shrink-0">
|
||||||
<div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-4">
|
<div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center">
|
||||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Fehler beim Starten</h3>
|
<div class="flex-1 ml-6">
|
||||||
<p class="text-red-700 dark:text-red-300" id="errorDetails"></p>
|
<h3 class="text-xl font-bold text-professional-primary mb-3">Fehler beim Starten</h3>
|
||||||
</div>
|
<p class="text-professional-secondary" id="errorDetails"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="codeForm" class="space-y-8">
|
<form id="codeForm" class="space-y-10">
|
||||||
|
|
||||||
<!-- Code-Eingabe -->
|
<!-- Code-Eingabe -->
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<label for="accessCode" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-4">
|
<label for="accessCode" class="block text-base font-bold text-professional-primary mb-6 text-center">
|
||||||
6-stelliger Zugangscode <span class="text-red-500">*</span>
|
6-stelliger Zugangscode <span class="text-red-500 text-lg">*</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<!-- Code-Input mit einzelnen Feldern -->
|
<!-- Code-Input mit einzelnen Feldern -->
|
||||||
<div class="flex justify-center space-x-3 mb-4">
|
<div class="flex justify-center space-x-4 mb-8">
|
||||||
<input type="text" id="code1" maxlength="1"
|
<input type="text" id="code1" maxlength="1"
|
||||||
class="code-input w-16 h-16 text-center text-2xl font-bold border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 dark:bg-slate-800 dark:text-white"
|
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||||
oninput="moveToNext(this, 'code2')" onkeydown="handleBackspace(event, this, null)">
|
oninput="moveToNext(this, 'code2')" onkeydown="handleBackspace(event, this, null)">
|
||||||
<input type="text" id="code2" maxlength="1"
|
<input type="text" id="code2" maxlength="1"
|
||||||
class="code-input w-16 h-16 text-center text-2xl font-bold border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 dark:bg-slate-800 dark:text-white"
|
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||||
oninput="moveToNext(this, 'code3')" onkeydown="handleBackspace(event, this, 'code1')">
|
oninput="moveToNext(this, 'code3')" onkeydown="handleBackspace(event, this, 'code1')">
|
||||||
<input type="text" id="code3" maxlength="1"
|
<input type="text" id="code3" maxlength="1"
|
||||||
class="code-input w-16 h-16 text-center text-2xl font-bold border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 dark:bg-slate-800 dark:text-white"
|
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||||
oninput="moveToNext(this, 'code4')" onkeydown="handleBackspace(event, this, 'code2')">
|
oninput="moveToNext(this, 'code4')" onkeydown="handleBackspace(event, this, 'code2')">
|
||||||
<input type="text" id="code4" maxlength="1"
|
<input type="text" id="code4" maxlength="1"
|
||||||
class="code-input w-16 h-16 text-center text-2xl font-bold border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 dark:bg-slate-800 dark:text-white"
|
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||||
oninput="moveToNext(this, 'code5')" onkeydown="handleBackspace(event, this, 'code3')">
|
oninput="moveToNext(this, 'code5')" onkeydown="handleBackspace(event, this, 'code3')">
|
||||||
<input type="text" id="code5" maxlength="1"
|
<input type="text" id="code5" maxlength="1"
|
||||||
class="code-input w-16 h-16 text-center text-2xl font-bold border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 dark:bg-slate-800 dark:text-white"
|
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||||
oninput="moveToNext(this, 'code6')" onkeydown="handleBackspace(event, this, 'code4')">
|
oninput="moveToNext(this, 'code6')" onkeydown="handleBackspace(event, this, 'code4')">
|
||||||
<input type="text" id="code6" maxlength="1"
|
<input type="text" id="code6" maxlength="1"
|
||||||
class="code-input w-16 h-16 text-center text-2xl font-bold border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 dark:bg-slate-800 dark:text-white"
|
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||||
oninput="moveToNext(this, null)" onkeydown="handleBackspace(event, this, 'code5')">
|
oninput="moveToNext(this, null)" onkeydown="handleBackspace(event, this, 'code5')">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<p class="text-sm text-slate-500 dark:text-slate-400">
|
<p class="text-professional-muted text-base">
|
||||||
Der Code besteht aus 6 Zeichen (Großbuchstaben und Zahlen)
|
Der Code besteht aus 6 Zeichen (Großbuchstaben und Zahlen)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Submit Button -->
|
<!-- Submit Button -->
|
||||||
<div class="text-center pt-6">
|
<div class="text-center pt-8">
|
||||||
<button type="submit" id="submitBtn"
|
<button type="submit" id="submitBtn"
|
||||||
class="w-full sm:w-auto px-12 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-2xl hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-4 focus:ring-blue-500/25 transform transition-all duration-300 hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
|
class="btn-success-professional group px-12 py-5 text-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
|
||||||
<span class="flex items-center justify-center">
|
<svg class="w-6 h-6 mr-4 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M12 5v.01M12 19v.01M12 12h.01M12 9a3 3 0 100-6 3 3 0 000 6zm0 0a3 3 0 100 6 3 3 0 000-6z"/>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M12 5v.01M12 19v.01M12 12h.01M12 9a3 3 0 100-6 3 3 0 000 6zm0 0a3 3 0 100 6 3 3 0 000-6z"/>
|
</svg>
|
||||||
</svg>
|
Job jetzt starten
|
||||||
Job jetzt starten
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- Hilfe-Sektion -->
|
<!-- Hilfe-Sektion -->
|
||||||
<div class="mt-12 pt-8 border-t border-slate-200 dark:border-slate-700">
|
<div class="mt-16 pt-8 border-t-2 border-slate-200 dark:border-slate-600">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
<h3 class="text-2xl font-bold text-professional-primary mb-8">
|
||||||
Brauchen Sie Hilfe?
|
Brauchen Sie Hilfe?
|
||||||
</h3>
|
</h3>
|
||||||
<div class="space-y-3 text-sm text-slate-600 dark:text-slate-400">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
<p>• Ihr Zugangscode wurde Ihnen nach der Genehmigung mitgeteilt</p>
|
<div class="mb-glass p-6 rounded-2xl">
|
||||||
<p>• Der Code ist nur einmalig verwendbar und hat eine begrenzte Gültigkeit</p>
|
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
|
||||||
<p>• Bei Problemen wenden Sie sich an den Administrator</p>
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-professional-secondary">Ihr Zugangscode wurde Ihnen nach der Genehmigung mitgeteilt</p>
|
||||||
|
</div>
|
||||||
|
<div class="mb-glass p-6 rounded-2xl">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-professional-secondary">Der Code ist nur einmalig verwendbar und hat eine begrenzte Gültigkeit</p>
|
||||||
|
</div>
|
||||||
|
<div class="mb-glass p-6 rounded-2xl">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-professional-secondary">Bei Problemen wenden Sie sich an den Administrator</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-6">
|
<div class="mt-8">
|
||||||
<a href="{{ url_for('guest.guest_request_form') }}"
|
<a href="{{ url_for('guest.guest_request_form') }}"
|
||||||
class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 font-medium">
|
class="btn-professional group px-8 py-4">
|
||||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 mr-3 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||||
</svg>
|
</svg>
|
||||||
Neue Anfrage stellen
|
Neue Anfrage stellen
|
||||||
@ -147,42 +222,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.form-container {
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .form-container {
|
|
||||||
background: rgba(30, 41, 59, 0.95);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-shadow {
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-input {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-input:focus {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-input.valid {
|
|
||||||
border-color: #10b981;
|
|
||||||
background-color: #ecfdf5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .code-input.valid {
|
|
||||||
border-color: #059669;
|
|
||||||
background-color: rgba(16, 185, 129, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// Live Time Update
|
||||||
|
function updateLiveTime() {
|
||||||
|
const now = new Date();
|
||||||
|
document.getElementById('live-time').textContent = now.toLocaleTimeString('de-DE');
|
||||||
|
}
|
||||||
|
updateLiveTime();
|
||||||
|
setInterval(updateLiveTime, 1000);
|
||||||
|
|
||||||
// Code-Eingabe-Logik
|
// Code-Eingabe-Logik
|
||||||
function moveToNext(current, nextId) {
|
function moveToNext(current, nextId) {
|
||||||
const value = current.value.toUpperCase();
|
const value = current.value.toUpperCase();
|
||||||
|
|||||||
0
backend/app/init_db.py → backend/app/utils/init_db.py
Executable file → Normal file
0
backend/app/init_db.py → backend/app/utils/init_db.py
Executable file → Normal file
Loading…
x
Reference in New Issue
Block a user