feat: complete user authentication, admin guard, customer account dashboard and branded HTML emails
This commit is contained in:
@@ -0,0 +1,222 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Mijn Account | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 space-y-8" x-data="{ tab: 'orders' }">
|
||||
|
||||
<!-- Account Welcome Banner -->
|
||||
<div class="p-6 sm:p-8 rounded-3xl bg-gradient-to-r from-amber-500/10 via-rose-500/10 to-indigo-500/10 border border-slate-200/80 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-amber-400 to-rose-400 flex items-center justify-center text-white font-heading font-black text-2xl shadow-xs">
|
||||
{{ strtoupper(substr($user->name, 0, 1)) }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<h1 class="font-heading text-xl sm:text-2xl font-black text-slate-900">
|
||||
Hallo, {{ $user->name }}!
|
||||
</h1>
|
||||
@if($user->isAdmin())
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-slate-900 text-amber-400 text-[10px] font-black uppercase tracking-wider">
|
||||
Admin Beheerder
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<p class="text-xs text-slate-500 mt-0.5">
|
||||
{{ $user->email }} • Lid sinds {{ $user->created_at->format('d-m-Y') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2.5 self-stretch sm:self-auto justify-end">
|
||||
@if($user->isAdmin())
|
||||
<a href="{{ route('admin.content.index') }}" class="px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-amber-300 font-black text-xs transition flex items-center space-x-1.5 shadow-xs">
|
||||
<i data-lucide="shield" class="w-4 h-4"></i>
|
||||
<span>Admin Dashboard</span>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="px-4 py-2 rounded-xl bg-white hover:bg-rose-50 text-rose-600 border border-slate-200 text-xs font-bold transition flex items-center space-x-1.5 cursor-pointer shadow-2xs">
|
||||
<i data-lucide="log-out" class="w-3.5 h-3.5"></i>
|
||||
<span>Uitloggen</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="flex items-center space-x-2 border-b border-slate-200 text-xs font-bold pb-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="tab = 'orders'"
|
||||
:class="tab === 'orders' ? 'bg-amber-400 text-slate-950 font-black' : 'bg-white text-slate-600 hover:bg-slate-100'"
|
||||
class="px-4 py-2 rounded-xl transition flex items-center space-x-1.5 cursor-pointer"
|
||||
>
|
||||
<i data-lucide="package" class="w-4 h-4"></i>
|
||||
<span>Mijn Bestellingen ({{ $orders->count() }})</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="tab = 'profile'"
|
||||
:class="tab === 'profile' ? 'bg-amber-400 text-slate-950 font-black' : 'bg-white text-slate-600 hover:bg-slate-100'"
|
||||
class="px-4 py-2 rounded-xl transition flex items-center space-x-1.5 cursor-pointer"
|
||||
>
|
||||
<i data-lucide="user-cog" class="w-4 h-4"></i>
|
||||
<span>Profiel & Beveiliging</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB 1: BESTELLINGEN -->
|
||||
<div x-show="tab === 'orders'" class="space-y-4">
|
||||
@if($orders->isEmpty())
|
||||
<div class="p-12 text-center rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-3">
|
||||
<div class="w-14 h-14 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center mx-auto text-2xl">
|
||||
🛍️
|
||||
</div>
|
||||
<h3 class="font-heading text-lg font-black text-slate-900">Nog geen bestellingen geplaatst</h3>
|
||||
<p class="text-xs text-slate-500 max-w-sm mx-auto">
|
||||
Je hebt nog geen 3D prints besteld. Ontdek onze fidget toys, Pokémon figuren en popculture modellen!
|
||||
</p>
|
||||
<div class="pt-2">
|
||||
<a href="{{ route('catalog') }}" class="inline-flex items-center space-x-2 px-5 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-xs font-black transition">
|
||||
<span>Winkelassortiment bekijken</span>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-4">
|
||||
@foreach($orders as $order)
|
||||
<div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
|
||||
<!-- Header regel -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-100 gap-2">
|
||||
<div>
|
||||
<span class="font-mono font-bold text-xs text-slate-900">#{{ $order->order_number }}</span>
|
||||
<span class="text-xs text-slate-400 ml-2">• {{ $order->created_at->format('d-m-Y om H:i') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase
|
||||
@if($order->status === 'completed' || $order->status === 'shipped' || $order->status === 'verzonden') bg-emerald-100 text-emerald-800
|
||||
@elseif($order->status === 'printed' || $order->status === 'processing' || $order->status === 'in_print') bg-sky-100 text-sky-800
|
||||
@elseif($order->status === 'cancelled' || $order->status === 'geannuleerd') bg-rose-100 text-rose-800
|
||||
@else bg-amber-100 text-amber-900 @endif
|
||||
">
|
||||
{{ str_replace('_', ' ', $order->status) }}
|
||||
</span>
|
||||
|
||||
<span class="font-heading font-black text-slate-900 text-sm">
|
||||
{{ $order->formatted_total }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Items -->
|
||||
<div class="divide-y divide-slate-100">
|
||||
@foreach($order->items as $item)
|
||||
<div class="py-2.5 flex items-start justify-between text-xs">
|
||||
<div>
|
||||
<div class="font-bold text-slate-900">{{ $item->product_name }}</div>
|
||||
<div class="text-[11px] text-slate-500 mt-0.5">
|
||||
@if($item->material) Materiaal: <span class="font-semibold">{{ strtoupper($item->material) }}</span> • @endif
|
||||
@if($item->color) Kleur: <span class="font-semibold">{{ $item->color }}</span> • @endif
|
||||
Schaal: {{ $item->scale ?? '100%' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-semibold text-slate-600">{{ $item->quantity }}x</span>
|
||||
<span class="font-bold text-slate-900 ml-1">€ {{ number_format($item->total_price, 2, ',', '.') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Bezorging adres -->
|
||||
<div class="pt-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
|
||||
<span>Bezorgadres: {{ $order->shipping_street }} {{ $order->shipping_number }}, {{ $order->shipping_postal_code }} {{ $order->shipping_city }}</span>
|
||||
<span class="font-bold text-emerald-600 flex items-center space-x-1">
|
||||
<i data-lucide="truck" class="w-3.5 h-3.5"></i>
|
||||
<span>PostNL</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: PROFIEL & BEVEILIGING -->
|
||||
<div x-show="tab === 'profile'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Profielgegevens -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<i data-lucide="user" class="w-4 h-4 text-amber-500"></i>
|
||||
<span>Persoonlijke gegevens</span>
|
||||
</h3>
|
||||
|
||||
<form action="{{ route('account.profile') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Naam</label>
|
||||
<input type="text" name="name" value="{{ old('name', $user->name) }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">E-mailadres</label>
|
||||
<input type="email" name="email" value="{{ old('email', $user->email) }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400">
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="px-5 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition cursor-pointer">
|
||||
Gegevens Opslaan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Wachtwoord Wijzigen -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<i data-lucide="lock" class="w-4 h-4 text-rose-500"></i>
|
||||
<span>Wachtwoord wijzigen</span>
|
||||
</h3>
|
||||
|
||||
<form action="{{ route('account.password') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Huidig wachtwoord</label>
|
||||
<input type="password" name="current_password" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label>
|
||||
<input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Bevestig nieuw wachtwoord</label>
|
||||
<input type="password" name="password_confirmation" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400">
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-black text-xs transition cursor-pointer">
|
||||
Wachtwoord Wijzigen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,63 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Wachtwoord Vergeten | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-900 shadow-2xs mb-1">
|
||||
<i data-lucide="key-round" class="w-6 h-6 text-indigo-600"></i>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Wachtwoord vergeten</h1>
|
||||
<p class="text-xs text-slate-500">Vul je e-mailadres in en ontvang een beveiligde herstellink</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5">
|
||||
<form action="{{ route('password.email') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">Jouw geregistreerde e-mailadres</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
autofocus
|
||||
placeholder="jouw@email.nl"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('email') border-rose-400 @enderror"
|
||||
>
|
||||
<i data-lucide="mail" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
||||
</div>
|
||||
@error('email')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
|
||||
<i data-lucide="send" class="w-4 h-4"></i>
|
||||
<span>Herstellink Versturen</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600">
|
||||
<a href="{{ route('login') }}" class="text-rose-600 hover:text-rose-700 underline inline-flex items-center space-x-1">
|
||||
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
|
||||
<span>Terug naar inloggen</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,95 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Inloggen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-amber-100 text-amber-900 shadow-2xs mb-1">
|
||||
<i data-lucide="log-in" class="w-6 h-6 text-amber-600"></i>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Welkom terug</h1>
|
||||
<p class="text-xs text-slate-500">Log in met jouw e-mailadres en wachtwoord</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5">
|
||||
<form action="{{ route('login.submit') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
autofocus
|
||||
placeholder="jouw@email.nl"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('email') border-rose-400 @enderror"
|
||||
>
|
||||
<i data-lucide="mail" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
||||
</div>
|
||||
@error('email')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="password" class="block text-xs font-bold text-slate-700">Wachtwoord</label>
|
||||
<a href="{{ route('password.request') }}" class="text-[11px] font-bold text-rose-600 hover:text-rose-700 transition">
|
||||
Wachtwoord vergeten?
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
required
|
||||
placeholder="••••••••"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('password') border-rose-400 @enderror"
|
||||
>
|
||||
<i data-lucide="lock" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
||||
</div>
|
||||
@error('password')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Onthoud mij -->
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" name="remember" value="1" class="w-4 h-4 rounded text-amber-500 focus:ring-amber-400 border-slate-300">
|
||||
<span class="text-xs font-bold text-slate-600">Onthoud mij op dit apparaat</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
|
||||
<span>Inloggen</span>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600">
|
||||
<span>Nog geen account?</span>
|
||||
<a href="{{ route('register') }}" class="text-rose-600 hover:text-rose-700 underline ml-1">
|
||||
Direct registreren
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,118 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Registreren | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[75vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-rose-100 text-rose-900 shadow-2xs mb-1">
|
||||
<i data-lucide="user-plus" class="w-6 h-6 text-rose-600"></i>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Account aanmaken</h1>
|
||||
<p class="text-xs text-slate-500">Meld je aan om bestellingen te volgen en sneller te bestellen</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5">
|
||||
<form action="{{ route('register.submit') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
|
||||
<!-- Naam -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="name" class="block text-xs font-bold text-slate-700">Voor- en achternaam *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
value="{{ old('name') }}"
|
||||
required
|
||||
autofocus
|
||||
placeholder="bijv. Jan Jansen"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('name') border-rose-400 @enderror"
|
||||
>
|
||||
<i data-lucide="user" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
||||
</div>
|
||||
@error('name')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
placeholder="jouw@email.nl"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('email') border-rose-400 @enderror"
|
||||
>
|
||||
<i data-lucide="mail" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
||||
</div>
|
||||
@error('email')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password" class="block text-xs font-bold text-slate-700">Wachtwoord (minimaal 8 tekens) *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
required
|
||||
placeholder="••••••••"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('password') border-rose-400 @enderror"
|
||||
>
|
||||
<i data-lucide="lock" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
||||
</div>
|
||||
@error('password')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Bevestig Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password_confirmation" class="block text-xs font-bold text-slate-700">Bevestig wachtwoord *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
name="password_confirmation"
|
||||
id="password_confirmation"
|
||||
required
|
||||
placeholder="••••••••"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
>
|
||||
<i data-lucide="shield-check" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
|
||||
<span>Account Aanmaken</span>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600">
|
||||
<span>Heb je al een account?</span>
|
||||
<a href="{{ route('login') }}" class="text-rose-600 hover:text-rose-700 underline ml-1">
|
||||
Hier inloggen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,83 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Nieuw Wachtwoord Instellen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-amber-100 text-amber-900 shadow-2xs mb-1">
|
||||
<i data-lucide="lock" class="w-6 h-6 text-amber-600"></i>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Nieuw wachtwoord</h1>
|
||||
<p class="text-xs text-slate-500">Kies een nieuw en veilig wachtwoord voor jouw account</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5">
|
||||
<form action="{{ route('password.update') }}" method="POST" class="space-y-4">
|
||||
@csrf
|
||||
<input type="hidden" name="token" value="{{ $token }}">
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
value="{{ old('email', $email) }}"
|
||||
required
|
||||
readonly
|
||||
class="w-full bg-slate-100 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-600 font-semibold cursor-not-allowed"
|
||||
>
|
||||
@error('email')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Nieuw Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password" class="block text-xs font-bold text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
required
|
||||
autofocus
|
||||
placeholder="••••••••"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('password') border-rose-400 @enderror"
|
||||
>
|
||||
@error('password')
|
||||
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Bevestig Nieuw Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password_confirmation" class="block text-xs font-bold text-slate-700">Bevestig nieuw wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password_confirmation"
|
||||
id="password_confirmation"
|
||||
required
|
||||
placeholder="••••••••"
|
||||
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span>Wachtwoord Opslaan & Inloggen</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@yield('title', 'Jouwdriedee.nl')</title>
|
||||
<style>
|
||||
/* Base styles */
|
||||
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
|
||||
img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
|
||||
body { margin: 0; padding: 0; width: 100% !important; background-color: #F8FAFC; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
|
||||
|
||||
/* Interactive elements */
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
background-color: #FBBF24;
|
||||
color: #0F172A !important;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
padding: 12px 28px;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #F59E0B;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #F8FAFC; color: #1E293B;">
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F8FAFC; padding: 30px 10px;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<!-- Outer Container (Max 600px) -->
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; background-color: #FFFFFF; border-radius: 20px; overflow: hidden; border: 1px solid #E2E8F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
|
||||
|
||||
<!-- Top Colorful Accent Gradient Bar -->
|
||||
<tr>
|
||||
<td height="6" style="background: linear-gradient(90deg, #F43F5E 0%, #F59E0B 50%, #38BDF8 100%);"></td>
|
||||
</tr>
|
||||
|
||||
<!-- Header with Logo -->
|
||||
<tr>
|
||||
<td align="center" style="padding: 28px 24px 20px 24px; border-bottom: 1px solid #F1F5F9; background-color: #FFFFFF;">
|
||||
<a href="{{ config('app.url') }}" target="_blank" style="text-decoration: none; display: inline-block;">
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<!-- Isometric 3D Logo Mark representation in SVG/colors -->
|
||||
<td align="center" valign="middle" style="background: linear-gradient(135deg, #F59E0B 0%, #F43F5E 50%, #6366F1 100%); border-radius: 12px; width: 40px; height: 40px; text-align: center; color: #FFFFFF; font-weight: 900; font-size: 18px; line-height: 40px;">
|
||||
3D
|
||||
</td>
|
||||
<td valign="middle" style="padding-left: 12px; text-align: left;">
|
||||
<span style="font-size: 22px; font-weight: 900; color: #0F172A; letter-spacing: -0.5px;">Jouw<span style="color: #F43F5E;">driedee</span><span style="background-color: #6366F1; color: #FFFFFF; font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 4px; margin-left: 4px; vertical-align: top;">.NL</span></span>
|
||||
<span style="display: block; font-size: 11px; font-weight: 700; color: #64748B;">Nederlandse 3D Printstudio & Webshop</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Main Email Content Slot -->
|
||||
<tr>
|
||||
<td style="padding: 32px 32px 28px 32px;">
|
||||
@yield('content')
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer Info & Trust Badges -->
|
||||
<tr>
|
||||
<td style="background-color: #0F172A; padding: 28px 32px; color: #94A3B8; text-align: center; font-size: 12px; line-height: 1.6;">
|
||||
<div style="font-weight: 800; color: #F1F5F9; font-size: 13px; margin-bottom: 6px;">
|
||||
Jouwdriedee.nl • Hoogwaardige 3D Prints & Collectibles
|
||||
</div>
|
||||
<div style="color: #94A3B8; margin-bottom: 14px;">
|
||||
Geprint met precisie op Bambu Lab printers met 100% veilig Bio-PLA+ en PETG filament.
|
||||
</div>
|
||||
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 16px; border-top: 1px solid #1E293B; padding-top: 14px;">
|
||||
<tr>
|
||||
<td align="center" style="color: #F59E0B; font-size: 11px; font-weight: 700;">
|
||||
• Vragen of speciale wensen? Stuur een e-mail naar <a href="mailto:info@jouwdriedee.nl" style="color: #FBBF24; text-decoration: underline;">info@jouwdriedee.nl</a> •
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="font-size: 11px; color: #64748B;">
|
||||
© {{ date('Y') }} Jouwdriedee.nl. Alle rechten voorbehouden.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
@extends('emails.layouts.master')
|
||||
|
||||
@section('title', 'Bestelbevestiging #' . $order->order_number . ' | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div style="text-align: left;">
|
||||
|
||||
<div style="display: inline-block; background-color: #D1FAE5; color: #065F46; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;">
|
||||
✓ Bestelling Ontvangen
|
||||
</div>
|
||||
|
||||
<h1 style="color: #0F172A; font-size: 22px; font-weight: 900; margin: 0 0 10px 0; line-height: 1.3;">
|
||||
Bedankt voor je bestelling, {{ $order->customer_name }}!
|
||||
</h1>
|
||||
|
||||
<p style="color: #475569; font-size: 14px; line-height: 1.6; margin: 0 0 18px 0;">
|
||||
We hebben je bestelling <strong>#{{ $order->order_number }}</strong> in goede orde ontvangen. Onze 3D-printers worden voorbereid en jouw items worden met zorg en precisie geprint.
|
||||
</p>
|
||||
|
||||
<!-- Bestelde Items Overzicht -->
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 20px 0; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden;">
|
||||
<tr style="background-color: #F8FAFC; border-bottom: 1px solid #E2E8F0;">
|
||||
<th align="left" style="padding: 12px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748B;">Item</th>
|
||||
<th align="center" style="padding: 12px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748B;">Aantal</th>
|
||||
<th align="right" style="padding: 12px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748B;">Prijs</th>
|
||||
</tr>
|
||||
|
||||
@foreach($order->items as $item)
|
||||
<tr style="border-bottom: 1px solid #F1F5F9;">
|
||||
<td style="padding: 14px 16px;">
|
||||
<div style="font-weight: 800; font-size: 13px; color: #0F172A;">
|
||||
{{ $item->product_name }}
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #64748B; margin-top: 3px;">
|
||||
@if($item->material) Materiaal: <strong>{{ strtoupper($item->material) }}</strong> • @endif
|
||||
@if($item->color) Kleur: <strong>{{ $item->color }}</strong> • @endif
|
||||
Schaal: {{ $item->scale ?? '100%' }}
|
||||
</div>
|
||||
</td>
|
||||
<td align="center" style="padding: 14px 16px; font-size: 13px; font-weight: 700; color: #334155;">
|
||||
{{ $item->quantity }}x
|
||||
</td>
|
||||
<td align="right" style="padding: 14px 16px; font-size: 13px; font-weight: 800; color: #0F172A;">
|
||||
€ {{ number_format($item->total_price, 2, ',', '.') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
<!-- Subtotaal & Verzending -->
|
||||
<tr style="background-color: #FAFAFA;">
|
||||
<td colspan="2" style="padding: 10px 16px; font-size: 12px; color: #64748B;">Subtotaal</td>
|
||||
<td align="right" style="padding: 10px 16px; font-size: 12px; font-weight: 700; color: #334155;">
|
||||
€ {{ number_format($order->subtotal, 2, ',', '.') }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="background-color: #FAFAFA;">
|
||||
<td colspan="2" style="padding: 10px 16px; font-size: 12px; color: #64748B;">Verzendkosten (PostNL)</td>
|
||||
<td align="right" style="padding: 10px 16px; font-size: 12px; font-weight: 700; color: #334155;">
|
||||
{{ $order->shipping_cost > 0 ? '€ ' . number_format($order->shipping_cost, 2, ',', '.') : 'Gratis' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="background-color: #F1F5F9; border-top: 2px solid #E2E8F0;">
|
||||
<td colspan="2" style="padding: 12px 16px; font-size: 14px; font-weight: 900; color: #0F172A;">Totaal incl. btw</td>
|
||||
<td align="right" style="padding: 12px 16px; font-size: 16px; font-weight: 900; color: #D97706;">
|
||||
{{ $order->formatted_total }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Afleveradres -->
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; margin-bottom: 24px; padding: 16px;">
|
||||
<tr>
|
||||
<td>
|
||||
<div style="font-weight: 800; font-size: 12px; text-transform: uppercase; color: #64748B; margin-bottom: 6px;">
|
||||
📦 Afleveradres:
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #1E293B; line-height: 1.5;">
|
||||
<strong>{{ $order->customer_name }}</strong><br>
|
||||
{{ $order->shipping_street }} {{ $order->shipping_number }}<br>
|
||||
{{ $order->shipping_postal_code }} {{ $order->shipping_city }}<br>
|
||||
{{ $order->shipping_country ?? 'Nederland' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Wat gebeurt er nu? -->
|
||||
<div style="background-color: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px; padding: 14px; font-size: 12px; color: #1E40AF; line-height: 1.5; margin-bottom: 20px;">
|
||||
<strong>Wat gebeurt er nu?</strong><br>
|
||||
1. We printen jouw model op hoge resolutie.<br>
|
||||
2. We controleren de scharnieren en details met de hand.<br>
|
||||
3. Je ontvangt een verzendbevestiging zodra het pakketje is overgedragen aan PostNL (binnen 2-3 werkdagen).
|
||||
</div>
|
||||
|
||||
@auth
|
||||
<div style="text-align: center; margin: 24px 0 10px 0;">
|
||||
<a href="{{ route('account.index') }}" class="btn-primary" style="display: inline-block; background-color: #FBBF24; color: #0F172A !important; font-weight: 800; font-size: 13px; padding: 12px 24px; border-radius: 12px; text-decoration: none;">
|
||||
Volg Bestelling in Mijn Account →
|
||||
</a>
|
||||
</div>
|
||||
@endauth
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,37 @@
|
||||
@extends('emails.layouts.master')
|
||||
|
||||
@section('title', 'Wachtwoord Opnieuw Instellen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div style="text-align: left;">
|
||||
|
||||
<div style="display: inline-block; background-color: #E0E7FF; color: #3730A3; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;">
|
||||
🔒 Beveiliging
|
||||
</div>
|
||||
|
||||
<h1 style="color: #0F172A; font-size: 22px; font-weight: 900; margin: 0 0 14px 0; line-height: 1.3;">
|
||||
Wachtwoord opnieuw instellen
|
||||
</h1>
|
||||
|
||||
<p style="color: #475569; font-size: 14px; line-height: 1.6; margin: 0 0 16px 0;">
|
||||
Hallo {{ $user->name }},<br>
|
||||
We hebben een verzoek ontvangen om het wachtwoord van jouw account bij <strong>Jouwdriedee.nl</strong> te resetten. Klik op onderstaande knop om een nieuw wachtwoord te kiezen:
|
||||
</p>
|
||||
|
||||
<div style="text-align: center; margin: 30px 0;">
|
||||
<a href="{{ $resetUrl }}" class="btn-primary" style="display: inline-block; background-color: #FBBF24; color: #0F172A !important; font-weight: 800; font-size: 14px; padding: 14px 32px; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);">
|
||||
Wachtwoord Opnieuw Instellen →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="background-color: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: 14px; margin-top: 24px; font-size: 12px; color: #92400E; line-height: 1.5;">
|
||||
<strong>Let op:</strong> Deze link is om veiligheidsredenen slechts <strong>60 minuten</strong> geldig. Heb je zelf geen wachtwoordreset aangevraagd? Dan kun je deze e-mail veilig negeren. Jouw huidige wachtwoord blijft ongewijzigd.
|
||||
</div>
|
||||
|
||||
<p style="color: #94A3B8; font-size: 11px; line-height: 1.4; margin-top: 24px; word-break: break-all;">
|
||||
Werkt de knop niet? Kopieer en plak de volgende URL direct in je browser:<br>
|
||||
<a href="{{ $resetUrl }}" style="color: #6366F1;">{{ $resetUrl }}</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,51 @@
|
||||
@extends('emails.layouts.master')
|
||||
|
||||
@section('title', 'Welkom bij Jouwdriedee.nl!')
|
||||
|
||||
@section('content')
|
||||
<div style="text-align: left;">
|
||||
|
||||
<div style="display: inline-block; background-color: #FEF3C7; color: #92400E; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;">
|
||||
🎉 Account Aangemaakt
|
||||
</div>
|
||||
|
||||
<h1 style="color: #0F172A; font-size: 22px; font-weight: 900; margin: 0 0 14px 0; line-height: 1.3;">
|
||||
Welkom bij Jouwdriedee, {{ $user->name }}!
|
||||
</h1>
|
||||
|
||||
<p style="color: #475569; font-size: 14px; line-height: 1.6; margin: 0 0 16px 0;">
|
||||
Leuk dat je een account hebt aangemaakt bij onze 3D printstudio. Vanaf nu kun je eenvoudig jouw bestellingen volgen, favoriete modellen bewaren en nóg sneller afrekenen.
|
||||
</p>
|
||||
|
||||
<!-- Highlight Box -->
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; margin: 20px 0; padding: 18px;">
|
||||
<tr>
|
||||
<td>
|
||||
<div style="font-weight: 800; font-size: 13px; color: #0F172A; margin-bottom: 8px;">
|
||||
Wat kun je verwachten van onze 3D prints?
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #475569; line-height: 1.6;">
|
||||
• <strong>Haarscherpe Bambu Lab kwaliteit:</strong> Laagdiktes vanaf 0.12 mm voor soepele scharnieren.<br>
|
||||
• <strong>16+ Kleurvariaties:</strong> Van zijdeglans Silk tot levendige fluor en pastel tinten.<br>
|
||||
• <strong>Duurzaam PLA+ filament:</strong> 100% biologisch afbreekbaar en reukloos.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Call to Actions -->
|
||||
<div style="text-align: center; margin: 28px 0 20px 0;">
|
||||
<a href="{{ route('catalog') }}" class="btn-primary" style="display: inline-block; background-color: #FBBF24; color: #0F172A !important; font-weight: 800; font-size: 14px; padding: 12px 28px; border-radius: 12px; text-decoration: none; margin-right: 8px;">
|
||||
Bekijk de Collectie →
|
||||
</a>
|
||||
<a href="{{ route('account.index') }}" style="display: inline-block; background-color: #F1F5F9; color: #334155 !important; font-weight: 700; font-size: 13px; padding: 12px 20px; border-radius: 12px; text-decoration: none;">
|
||||
Mijn Account
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p style="color: #64748B; font-size: 12px; line-height: 1.5; margin: 20px 0 0 0; border-top: 1px solid #F1F5F9; padding-top: 16px;">
|
||||
Heb je een vraag over een print of wil je iets op maat laten maken? Neem gerust contact op met ons via <a href="mailto:info@jouwdriedee.nl" style="color: #F59E0B; font-weight: 700;">info@jouwdriedee.nl</a>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
@@ -102,7 +102,7 @@
|
||||
$cartItems = is_array(session('cart')) ? session('cart') : [];
|
||||
$cartCount = array_sum(array_column($cartItems, 'quantity'));
|
||||
@endphp
|
||||
<a href="{{ route('cart.index') }}" class="px-4 py-2 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs flex items-center space-x-2 transition shadow-xs">
|
||||
<a href="{{ route('cart.index') }}" class="px-3.5 sm:px-4 py-2 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs flex items-center space-x-1.5 sm:space-x-2 transition shadow-xs">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4 text-slate-900"></i>
|
||||
<span class="hidden sm:inline">Winkelwagen</span>
|
||||
@if($cartCount > 0)
|
||||
@@ -112,6 +112,43 @@
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<!-- User Account / Login Button -->
|
||||
@guest
|
||||
<a href="{{ route('login') }}" class="px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold text-xs flex items-center space-x-1.5 transition">
|
||||
<i data-lucide="user" class="w-4 h-4 text-slate-700"></i>
|
||||
<span class="hidden sm:inline">Inloggen</span>
|
||||
</a>
|
||||
@else
|
||||
<div class="relative" x-data="{ userMenu: false }">
|
||||
<button @click="userMenu = !userMenu" type="button" class="px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-900 font-black text-xs flex items-center space-x-1.5 transition cursor-pointer">
|
||||
<i data-lucide="user-check" class="w-4 h-4 text-amber-500"></i>
|
||||
<span class="hidden sm:inline">{{ Str::limit(auth()->user()->name, 12) }}</span>
|
||||
<i data-lucide="chevron-down" class="w-3 h-3 text-slate-500"></i>
|
||||
</button>
|
||||
|
||||
<div x-show="userMenu" @click.away="userMenu = false" x-cloak class="absolute right-0 mt-2 w-48 rounded-2xl bg-white border border-slate-200 shadow-xl py-2 z-50 text-xs font-bold text-slate-700">
|
||||
<a href="{{ route('account.index') }}" class="flex items-center space-x-2 px-4 py-2 hover:bg-slate-50 text-slate-800">
|
||||
<i data-lucide="user-circle" class="w-4 h-4 text-slate-500"></i>
|
||||
<span>Mijn Account</span>
|
||||
</a>
|
||||
@if(auth()->user()->isAdmin())
|
||||
<a href="{{ route('admin.content.index') }}" class="flex items-center space-x-2 px-4 py-2 hover:bg-amber-50 text-amber-900 font-black">
|
||||
<i data-lucide="shield" class="w-4 h-4 text-amber-500"></i>
|
||||
<span>Admin Beheer</span>
|
||||
</a>
|
||||
@endif
|
||||
<div class="border-t border-slate-100 my-1"></div>
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="w-full text-left flex items-center space-x-2 px-4 py-2 hover:bg-rose-50 text-rose-600 cursor-pointer">
|
||||
<i data-lucide="log-out" class="w-4 h-4"></i>
|
||||
<span>Uitloggen</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endguest
|
||||
|
||||
<!-- Mobile Menu Trigger -->
|
||||
<button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 transition">
|
||||
<i data-lucide="menu" class="w-5 h-5"></i>
|
||||
@@ -150,6 +187,41 @@
|
||||
<a href="{{ route('catalog') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-slate-700">
|
||||
<span>Alle Prints Bekijken</span>
|
||||
</a>
|
||||
|
||||
<div class="border-t border-slate-100 pt-2 mt-1">
|
||||
@guest
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<a href="{{ route('login') }}" class="py-2.5 px-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 text-center font-bold text-xs flex items-center justify-center space-x-1.5">
|
||||
<i data-lucide="log-in" class="w-3.5 h-3.5"></i>
|
||||
<span>Inloggen</span>
|
||||
</a>
|
||||
<a href="{{ route('register') }}" class="py-2.5 px-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-center font-black text-xs flex items-center justify-center space-x-1.5">
|
||||
<i data-lucide="user-plus" class="w-3.5 h-3.5"></i>
|
||||
<span>Registreren</span>
|
||||
</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('account.index') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-slate-900 font-bold">
|
||||
<span>Mijn Account ({{ auth()->user()->name }})</span>
|
||||
<i data-lucide="user" class="w-4 h-4 text-amber-500"></i>
|
||||
</a>
|
||||
@if(auth()->user()->isAdmin())
|
||||
<a href="{{ route('admin.content.index') }}" class="px-3.5 py-2.5 rounded-xl bg-amber-50 hover:bg-amber-100 flex items-center justify-between text-amber-950 font-black">
|
||||
<span>Admin Beheer</span>
|
||||
<i data-lucide="shield" class="w-4 h-4 text-amber-600"></i>
|
||||
</a>
|
||||
@endif
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="w-full text-left px-3.5 py-2.5 rounded-xl hover:bg-rose-50 text-rose-600 font-bold flex items-center justify-between">
|
||||
<span>Uitloggen</span>
|
||||
<i data-lucide="log-out" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@endguest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user