262 lines
15 KiB
HTML
262 lines
15 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>
|
|
|
|
<script>
|
|
// Form Submit Handler
|
|
document.getElementById('guestRequestForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// Button Animation
|
|
document.getElementById('submitBtn').disabled = true;
|
|
document.getElementById('submitBtn').innerHTML = '<span class="flex items-center justify-center"><svg class="animate-spin w-5 h-5 mr-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>📡 Wird übertragen...</span>';
|
|
|
|
try {
|
|
const formData = new FormData(this);
|
|
const data = {
|
|
name: formData.get('name'),
|
|
email: formData.get('email'),
|
|
reason: formData.get('reason'),
|
|
duration_min: parseInt(formData.get('duration_min')) || 60,
|
|
printer_id: formData.get('preferred_printer') ? parseInt(formData.get('preferred_printer')) : null
|
|
};
|
|
|
|
// CSRF-Token aus Meta-Tag holen
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
|
|
const headers = {
|
|
'Content-Type': 'application/json',
|
|
};
|
|
|
|
// CSRF-Token hinzufügen falls verfügbar
|
|
if (csrfToken) {
|
|
headers['X-CSRFToken'] = csrfToken;
|
|
}
|
|
|
|
const response = await fetch('/api/guest/requests', {
|
|
method: 'POST',
|
|
headers: headers,
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Status-URL anzeigen
|
|
const url = window.location.origin + `/request/${result.request_id}`;
|
|
document.getElementById('statusUrl').textContent = url;
|
|
|
|
// Success Modal mit Animation anzeigen
|
|
document.getElementById('successModal').classList.remove('hidden');
|
|
setTimeout(() => {
|
|
document.getElementById('successModalContent').classList.remove('scale-95', 'opacity-0');
|
|
document.getElementById('successModalContent').classList.add('scale-100', 'opacity-100');
|
|
}, 10);
|
|
|
|
// Formular zurücksetzen
|
|
this.reset();
|
|
document.getElementById('durationProgress').style.width = '12.5%';
|
|
} else {
|
|
alert('❌ Fehler: ' + (result.error || 'Unbekannter Fehler'));
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler beim Senden der Anfrage:', error);
|
|
alert('❌ Fehler beim Senden der Anfrage. Bitte versuchen Sie es später erneut.');
|
|
} finally {
|
|
// Button zurücksetzen
|
|
document.getElementById('submitBtn').disabled = false;
|
|
document.getElementById('submitBtn').innerHTML = '<span class="flex items-center justify-center"><svg class="w-5 h-5 mr-3 group-hover:rotate-12 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 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>🚀 Anfrage übermitteln</span>';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |