Initial commit
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Eigen 3D Model Printen (STL / STEP Upload) | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="bg-gradient-to-b from-slate-900 to-indigo-950 text-white py-12">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-3">
|
||||
<span class="px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 text-xs font-bold inline-flex items-center space-x-1.5">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
|
||||
<span>3D Print op Aanvraag</span>
|
||||
</span>
|
||||
<h1 class="text-3xl sm:text-4xl font-black tracking-tight">Upload Jouw Eigen 3D-Bestand</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-300 max-w-xl mx-auto leading-relaxed">
|
||||
Heb je een STL, STEP of OBJ bestand van Thingiverse, Printables of je eigen CAD-ontwerp? Upload het hieronder en ontvang binnen 24 uur een vrijblijvende prijsopgave.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="p-8 rounded-3xl bg-white border border-slate-200 shadow-md space-y-6">
|
||||
|
||||
<form action="{{ route('custom.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
||||
@csrf
|
||||
|
||||
<!-- Contactgegevens -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Naam *</label>
|
||||
<input type="text" name="name" required value="{{ old('name') }}" placeholder="Bijv. Jan de Vries" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">E-mailadres *</label>
|
||||
<input type="email" name="email" required value="{{ old('email') }}" placeholder="jouw@email.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Telefoonnummer (optioneel)</label>
|
||||
<input type="text" name="phone" value="{{ old('phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Bestand Uploaden -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">3D Model Bestand (.stl, .step, .obj, .zip)</label>
|
||||
<div class="p-6 border-2 border-dashed border-slate-300 hover:border-indigo-500 rounded-2xl bg-slate-50/50 text-center transition cursor-pointer">
|
||||
<input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-indigo-600 file:text-white hover:file:bg-indigo-500 cursor-pointer">
|
||||
<p class="text-[11px] text-slate-400 mt-2">Ondersteunde formaten: STL, STEP, OBJ, 3MF of ZIP (max 50 MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Voorkeuren -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Gewenst Materiaal</label>
|
||||
<select name="preferred_material" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<option value="Weet ik niet (Adviseer mij)">Weet ik niet (Adviseer mij)</option>
|
||||
@foreach($materials as $mat)
|
||||
<option value="{{ $mat->name }}">{{ $mat->name }} ({{ strtoupper($mat->code) }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Voorkeurskleur</label>
|
||||
<select name="preferred_color" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<option value="Geen voorkeur">Geen voorkeur / In overleg</option>
|
||||
@foreach($colors as $color)
|
||||
<option value="{{ $color->name }}">{{ $color->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beschrijving & Wensen -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Toelichting, Afmetingen & Aantal *</label>
|
||||
<textarea name="description" rows="4" required placeholder="Vermeld eventuele gewenste afmetingen (bv. 10cm hoog), gewenst aantal en toepassing (binnen, buiten, waterdicht, mechanisch belast)..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs uppercase tracking-wider transition shadow-lg shadow-indigo-600/25 flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<i data-lucide="send" class="w-4 h-4"></i>
|
||||
<span>Aanvraag Vrijblijvend Verzenden</span>
|
||||
</button>
|
||||
|
||||
<p class="text-center text-[11px] text-slate-400">
|
||||
🔒 Jouw bestanden en gegevens worden uitsluitend gebruikt voor de offerteberekening en niet gedeeld met derden.
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user