194 lines
11 KiB
HTML
194 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Gastanfrage - Mercedes-Benz MYP Platform{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mercedes-page-container">
|
|
<div class="mercedes-content-container">
|
|
<!-- Vereinfachter Premium Header -->
|
|
<div class="mercedes-page-header mercedes-fade-in">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl font-bold mb-4">Gastanfrage</h1>
|
|
<p class="text-xl opacity-90 max-w-3xl mx-auto">
|
|
Beantragen Sie Zugang zu unseren 3D-Produktionsanlagen
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mercedes-grid mercedes-grid-1 mt-8">
|
|
<!-- Vereinfachte Features -->
|
|
<div class="mercedes-premium-card mercedes-slide-up">
|
|
<div class="mercedes-grid mercedes-grid-3 text-center">
|
|
<div class="p-6">
|
|
<div class="w-12 h-12 bg-blue-500 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">
|
|
<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-slate-900 dark:text-white mb-2">Schnelle Bearbeitung</h3>
|
|
<p class="text-slate-600 dark:text-slate-400 text-sm">Automatische Prüfung Ihrer Anfrage</p>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="w-12 h-12 bg-green-500 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">
|
|
<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-slate-900 dark:text-white mb-2">Professionelle Qualität</h3>
|
|
<p class="text-slate-600 dark:text-slate-400 text-sm">Industriestandard 3D-Drucker</p>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="w-12 h-12 bg-purple-500 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">
|
|
<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-slate-900 dark:text-white mb-2">Flexible Nutzung</h3>
|
|
<p class="text-slate-600 dark:text-slate-400 text-sm">24/7 nach Terminvereinbarung</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vereinfachtes Anfrageformular -->
|
|
<div class="mercedes-premium-card mercedes-slide-up">
|
|
<h2 class="text-2xl font-semibold text-slate-900 dark:text-white mb-8">
|
|
Neue Anfrage stellen
|
|
</h2>
|
|
|
|
<form id="guestRequestForm" class="space-y-8">
|
|
<div class="mercedes-grid mercedes-grid-2">
|
|
<!-- Name -->
|
|
<div>
|
|
<label for="name" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Vollständiger Name <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="name" id="name" required class="mercedes-form-input" placeholder="Max Mustermann">
|
|
</div>
|
|
|
|
<!-- E-Mail -->
|
|
<div>
|
|
<label for="email" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
E-Mail-Adresse
|
|
</label>
|
|
<input type="email" name="email" id="email" class="mercedes-form-input" placeholder="max.mustermann@example.com">
|
|
</div>
|
|
|
|
<!-- Druckdauer -->
|
|
<div>
|
|
<label for="duration_min" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Geschätzte Druckzeit (Minuten)
|
|
</label>
|
|
<input type="number" name="duration_min" id="duration_min" min="1" max="1440" class="mercedes-form-input" placeholder="120">
|
|
</div>
|
|
|
|
<!-- Präferierter Drucker -->
|
|
<div>
|
|
<label for="preferred_printer" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Bevorzugter Drucker (optional)
|
|
</label>
|
|
<select name="preferred_printer" id="preferred_printer" class="mercedes-form-input">
|
|
<option value="">Kein Präferenz</option>
|
|
{% for printer in printers %}
|
|
<option value="{{ printer.id }}">{{ printer.name }}{% if printer.location %} - {{ printer.location }}{% endif %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projektzweck -->
|
|
<div>
|
|
<label for="reason" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Projektbeschreibung & Verwendungszweck
|
|
</label>
|
|
<textarea name="reason" id="reason" rows="4" class="mercedes-form-input" placeholder="Beschreiben Sie Ihr Projekt und den geplanten Verwendungszweck..."></textarea>
|
|
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
|
|
Eine detaillierte Beschreibung beschleunigt die Bearbeitung
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Dateien -->
|
|
<div>
|
|
<label for="files" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Dateien hochladen (optional)
|
|
</label>
|
|
<div class="flex items-center justify-center w-full">
|
|
<label for="files" class="flex flex-col items-center justify-center w-full h-32 border-2 border-slate-300 dark:border-slate-600 border-dashed rounded-2xl cursor-pointer bg-slate-50 dark:bg-slate-700/30 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-all duration-300">
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<svg class="w-10 h-10 mb-3 text-slate-500 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
|
</svg>
|
|
<p class="mb-2 text-sm text-slate-600 dark:text-slate-400">
|
|
<span class="font-semibold">Klicken zum Hochladen</span> oder Dateien hierher ziehen
|
|
</p>
|
|
<p class="text-xs text-slate-500 dark:text-slate-500">STL, GCODE oder Projektdateien (max. 50MB)</p>
|
|
</div>
|
|
<input id="files" name="files" type="file" multiple accept=".stl,.gcode,.zip,.rar,.pdf,.jpg,.png" class="hidden">
|
|
</label>
|
|
</div>
|
|
<div id="file-list" class="mt-3 space-y-2 hidden"></div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="flex justify-end pt-6">
|
|
<button type="submit" id="submitBtn" class="mercedes-btn-primary">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
|
|
</svg>
|
|
Anfrage absenden
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Informationen -->
|
|
<div class="mercedes-premium-card mercedes-slide-up">
|
|
<h3 class="text-xl font-semibold text-slate-900 dark:text-white mb-6">
|
|
Wichtige Informationen
|
|
</h3>
|
|
<div class="space-y-4 text-slate-600 dark:text-slate-400">
|
|
<div class="flex items-start space-x-3">
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
|
<p>Ihre Anfrage wird automatisch geprüft und Sie erhalten innerhalb von 24 Stunden eine Rückmeldung</p>
|
|
</div>
|
|
<div class="flex items-start space-x-3">
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
|
<p>Bei Genehmigung erhalten Sie einen Zugangscode für die Buchung Ihrer Druckzeit</p>
|
|
</div>
|
|
<div class="flex items-start space-x-3">
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
|
<p>Die Nutzung der 3D-Drucker erfolgt nach Absprache und unter Aufsicht unseres Teams</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Modal -->
|
|
<div id="successModal" class="mercedes-modal">
|
|
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
|
|
<div class="mercedes-modal-content max-w-md">
|
|
<div class="p-8 text-center">
|
|
<div class="w-16 h-16 bg-green-500 rounded-full 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="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">Anfrage erfolgreich gesendet!</h3>
|
|
<p class="text-slate-600 dark:text-slate-400 mb-8">
|
|
Wir haben Ihre Anfrage erhalten und werden diese schnellstmöglich bearbeiten. Sie erhalten eine Benachrichtigung per E-Mail.
|
|
</p>
|
|
<button onclick="closeSuccessModal()" class="mercedes-btn-primary">
|
|
Verstanden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |