core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝 'feat': Renamed and moved various documentation files to '/docs/' directory

Browse Source
This commit is contained in:
Till Tomczak
2025-05-29 15:46:25 +02:00
parent 1c466b199a
commit 0e3f316a88
25 changed files with 990 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
backend/app/templates/guest_request.html
View File

@@ -8,30 +8,61 @@
{% endblock %}
{% 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 -->
<div class="professional-hero hero-pattern animate-fade-in">
<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="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/40 dark:to-black/60"></div>
<!-- Status Indicator -->
<div class="absolute top-6 right-6 flex items-center space-x-3 z-10">
<div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
<div class="flex items-center space-x-2">
<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">Online</span>
</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>
</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">
<!-- Mercedes-Benz Logo -->
<div class="inline-flex items-center justify-center w-24 h-24 mb-glass rounded-full mb-8 professional-shadow">
<svg class="w-12 h-12 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
<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
@@ -41,86 +72,86 @@
</svg>
</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
</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
</p>
<!-- Key Features -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
<div class="card-professional text-center">
<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">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
<div class="card-professional text-center" style="padding: 2rem;">
<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-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"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-professional-primary mb-2">Automatisierte Prüfverfahren für maximale Effizienz</h3>
<p class="text-professional-muted text-sm">Schnelle Bearbeitung Ihrer Anfrage</p>
<h3 class="text-xl font-bold text-professional-primary mb-4">Automatisierte Prüfverfahren für maximale Effizienz</h3>
<p class="text-professional-muted">Schnelle Bearbeitung Ihrer Anfrage</p>
</div>
<div class="card-professional text-center">
<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">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="card-professional text-center" style="padding: 2rem;">
<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-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"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-professional-primary mb-2">Professionelle 3D-Drucker nach Industriestandard</h3>
<p class="text-professional-muted text-sm">Höchste Qualität für Ihre Projekte</p>
<h3 class="text-xl font-bold text-professional-primary mb-4">Professionelle 3D-Drucker nach Industriestandard</h3>
<p class="text-professional-muted">Höchste Qualität für Ihre Projekte</p>
</div>
<div class="card-professional text-center">
<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">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="card-professional text-center" style="padding: 2rem;">
<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-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"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-professional-primary mb-2">24/7 verfügbar nach Terminvereinbarung</h3>
<p class="text-professional-muted text-sm">Flexible Zeiten für Ihre Bedürfnisse</p>
<h3 class="text-xl font-bold text-professional-primary mb-4">24/7 verfügbar nach Terminvereinbarung</h3>
<p class="text-professional-muted">Flexible Zeiten für Ihre Bedürfnisse</p>
</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 -->
<div class="professional-container p-8 lg:p-12 animate-slide-up">
<div class="text-center mb-10">
<h2 class="title-professional text-3xl font-bold mb-4">
<div class="professional-container animate-slide-up" style="padding: 3rem; border-radius: 2rem; margin-bottom: 3rem;">
<div class="text-center mb-16">
<h2 class="title-professional text-4xl font-bold mb-6">
Starten Sie Ihre Anfrage
</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.
</p>
</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) -->
<div class="group">
<label for="name" class="block text-sm font-semibold text-professional-primary mb-3">
Vollständiger Name <span class="text-red-500">*</span>
<label for="name" class="block text-base font-bold text-professional-primary mb-4">
Vollständiger Name <span class="text-red-500 text-lg">*</span>
</label>
<input type="text" name="name" id="name" required
class="input-professional"
placeholder="Max Mustermann">
<div class="mt-2 text-xs text-professional-muted">
class="input-professional w-full text-base py-4 px-5"
placeholder="Max Mustermann" style="border-radius: 1rem;">
<div class="mt-3 text-sm text-professional-muted">
Geben Sie Ihren vollständigen Namen für die Registrierung ein
</div>
</div>
<!-- E-Mail -->
<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
</label>
<input type="email" name="email" id="email"
class="input-professional"
placeholder="max.mustermann@mercedes-benz.com">
<div class="mt-2 text-xs text-professional-muted">
class="input-professional w-full text-base py-4 px-5"
placeholder="max.mustermann@mercedes-benz.com" style="border-radius: 1rem;">
<div class="mt-3 text-sm text-professional-muted">
Optional: Für Updates und Benachrichtigungen
</div>
</div>
@@ -128,62 +159,62 @@
<!-- Projektzweck -->
<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
</label>
<textarea name="reason" id="reason" rows="4"
class="input-professional resize-none"
placeholder="Beschreiben Sie ausführlich Ihr Projekt, den geplanten Druckauftrag und den Verwendungszweck. Je detaillierter, desto schneller die Genehmigung..."></textarea>
<div class="mt-2 text-xs text-professional-muted">
<textarea name="reason" id="reason" rows="6"
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..." style="border-radius: 1rem;"></textarea>
<div class="mt-3 text-sm text-professional-muted">
Tipp: Eine detaillierte Beschreibung beschleunigt die Genehmigung erheblich
</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 -->
<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
</label>
<div class="relative">
<input type="number" name="duration_min" id="duration_min" value="60" min="15" max="480"
class="input-professional"
placeholder="60">
class="input-professional w-full text-base py-4 px-5"
placeholder="60" style="border-radius: 1rem;">
<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 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>Maximum: 8 Stunden</span>
</div>
<div class="mt-1 w-full bg-slate-200 dark:bg-slate-600 rounded-full h-1">
<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 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-2 rounded-full transition-all duration-300" style="width: 12.5%"></div>
</div>
</div>
<!-- Drucker-Auswahl -->
{% if printers %}
<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
</label>
<div class="relative">
<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>
{% for printer in printers %}
<option value="{{ printer.id }}">{{ printer.name }} {% if printer.location %}({{ printer.location }}){% endif %}</option>
{% endfor %}
</select>
<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>
</svg>
</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
</div>
</div>
@@ -191,7 +222,7 @@
</div>
<!-- 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="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">
@@ -336,11 +367,11 @@ document.addEventListener('DOMContentLoaded', function() {
// Color changes based on duration
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) {
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 {
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';
}
});