feat: add webshop offline maintenance mode with admin toggle and red maintenance screen
This commit is contained in:
@@ -107,6 +107,16 @@
|
||||
<i data-lucide="mail" class="w-3.5 h-3.5"></i>
|
||||
<span>7. E-mail & SMTP Testen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="activeTab = 'offline'"
|
||||
:class="activeTab === 'offline' ? 'bg-rose-600 text-white shadow-sm font-black' : 'bg-slate-800 text-slate-300 hover:bg-slate-700'"
|
||||
class="px-4 py-2.5 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
<span class="w-2 h-2 rounded-full {{ setting('shop_offline', '0') === '1' ? 'bg-rose-400 animate-ping' : 'bg-emerald-400' }}"></span>
|
||||
<span>8. Offline Modus</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ==================================================== -->
|
||||
@@ -631,6 +641,95 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================================================== -->
|
||||
<!-- TAB 8: WEBSHOP OFFLINE MODUS (ONDERHOUDSMODUS) -->
|
||||
<!-- ==================================================== -->
|
||||
<div x-show="activeTab === 'offline'" class="space-y-6">
|
||||
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-6">
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-4 border-b border-slate-800 gap-3">
|
||||
<div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full {{ setting('shop_offline', '0') === '1' ? 'bg-rose-500 animate-ping' : 'bg-emerald-400' }}"></span>
|
||||
<h3 class="font-heading font-black text-lg text-white">Webshop Offline Modus (Onderhoud)</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-400 mt-0.5">
|
||||
Wanneer ingeschakeld, kunnen gewone bezoekers niets bestellen en zien zij direct de grote rode offline banner. Alleen ingelogde beheerders kunnen de website bekijken.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Directe 1-klik Toggle Knop -->
|
||||
<button
|
||||
type="submit"
|
||||
formaction="{{ route('admin.toggle-offline') }}"
|
||||
formmethod="POST"
|
||||
class="px-5 py-2.5 rounded-xl {{ setting('shop_offline', '0') === '1' ? 'bg-emerald-500 hover:bg-emerald-400 text-slate-950' : 'bg-rose-600 hover:bg-rose-500 text-white' }} font-black text-xs uppercase tracking-wider transition flex items-center justify-center space-x-2 shrink-0 cursor-pointer shadow-lg"
|
||||
>
|
||||
<i data-lucide="power" class="w-4 h-4"></i>
|
||||
<span>{{ setting('shop_offline', '0') === '1' ? 'Zet Webshop Weer ONLINE' : 'Zet Webshop Nu DIRECT OFFLINE' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="shop_offline_submitted" value="1">
|
||||
|
||||
<!-- Toggle Switch -->
|
||||
<div class="p-4 rounded-2xl {{ setting('shop_offline', '0') === '1' ? 'bg-rose-950/40 border-2 border-rose-500/50' : 'bg-slate-950 border border-slate-800' }} flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-xs font-black text-white block">Status Webshop Bereikbaarheid</span>
|
||||
<span class="text-[11px] text-slate-400">
|
||||
{{ setting('shop_offline', '0') === '1' ? 'De webshop is momenteel OFFLINE voor gewone bezoekers.' : 'De webshop is momenteel LIVE en open voor bestellingen.' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="shop_offline" value="1" {{ setting('shop_offline', '0') === '1' ? 'checked' : '' }} class="sr-only peer">
|
||||
<div class="w-14 h-7 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[4px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-rose-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Teksten van de Rode Offline Banner -->
|
||||
<div class="grid grid-cols-1 gap-4 pt-2">
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-300">Titel op de Rode Offline Banner</label>
|
||||
<input
|
||||
type="text"
|
||||
name="shop_offline_title"
|
||||
value="{{ setting('shop_offline_title', 'Aan deze webshop wordt hard gewerkt! 🛠️') }}"
|
||||
class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white font-bold focus:outline-none focus:ring-2 focus:ring-rose-400"
|
||||
>
|
||||
<p class="text-[10px] text-slate-500">De grote rode hoofdtitel die bezoekers in beeld krijgen.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-300">Toelichting / Onderhoudsbericht</label>
|
||||
<textarea
|
||||
name="shop_offline_message"
|
||||
rows="3"
|
||||
class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white leading-relaxed focus:outline-none focus:ring-2 focus:ring-rose-400"
|
||||
>{{ setting('shop_offline_message', 'Onze 3D printers worden momenteel opnieuw gekalibreerd en we bouwen aan nieuwe toffe prints en functies. We zijn heel snel weer online voor bestellingen!') }}</textarea>
|
||||
<p class="text-[10px] text-slate-500">Uitleg over waarom de webshop tijdelijk offline staat en wanneer klanten terug kunnen komen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Box van de Offline Banner -->
|
||||
<div class="pt-4 border-t border-slate-800 space-y-2">
|
||||
<span class="text-xs font-black uppercase tracking-wider text-slate-400 block">Voorvertoning van de Offline Banner:</span>
|
||||
<div class="rounded-2xl bg-gradient-to-b from-rose-950/80 to-slate-950 border-2 border-rose-500/60 p-6 text-center space-y-3">
|
||||
<span class="inline-block px-3 py-1 rounded-full bg-rose-600 text-white font-black text-[10px] uppercase tracking-wider">
|
||||
🔴 Webshop Tijdelijk Offline
|
||||
</span>
|
||||
<h4 class="font-heading text-xl font-black text-white">
|
||||
{{ setting('shop_offline_title', 'Aan deze webshop wordt hard gewerkt! 🛠️') }}
|
||||
</h4>
|
||||
<p class="text-xs text-slate-300 max-w-lg mx-auto">
|
||||
{{ setting('shop_offline_message', 'Onze 3D printers worden momenteel opnieuw gekalibreerd en we bouwen aan nieuwe toffe prints en functies. We zijn heel snel weer online voor bestellingen!') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Save Action Bar -->
|
||||
<div class="sticky bottom-4 z-20 p-4 rounded-2xl bg-slate-900/95 backdrop-blur-md border border-amber-400/30 shadow-2xl flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2 text-xs text-slate-300 font-bold">
|
||||
|
||||
Reference in New Issue
Block a user