feat(layout): Layout-Einstellungen, Dark-Mode, Logo, Hilfe-Menü
- Settings Key-Value Store (DB + Cache) - Einstellungen → Layout: Seitenname, Logo, Button-Farbe, Dark/Light-Mode - Hilfe-Menü (Ebene 0): Handbuch + Changelog im Browser - Navigation erweitert: Einstellungen-Dropdown + Hilfe-Dropdown - CHANGELOG v0.4.0 Version: 0.4.0
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
Layout-Einstellungen
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
|
||||
@if(session('success'))
|
||||
<div class="p-4 bg-green-100 text-green-800 rounded-md">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('admin.layout.update') }}" enctype="multipart/form-data"
|
||||
class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6 space-y-8">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
{{-- Site-Name --}}
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
|
||||
Allgemein
|
||||
</h3>
|
||||
<div>
|
||||
<x-input-label for="site_name" value="Seitenname" />
|
||||
<x-text-input id="site_name" name="site_name" type="text" class="mt-1 block w-full"
|
||||
value="{{ old('site_name', $settings['site_name'] ?? 'Network-MGMT') }}" required />
|
||||
<p class="mt-1 text-xs text-gray-500">Wird im Browser-Tab und in der Navigation angezeigt.</p>
|
||||
<x-input-error :messages="$errors->get('site_name')" class="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Logo --}}
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
|
||||
Logo
|
||||
</h3>
|
||||
|
||||
@if(!empty($settings['site_logo']))
|
||||
<div class="mb-4 flex items-center space-x-4">
|
||||
<img src="{{ asset('storage/' . $settings['site_logo']) }}"
|
||||
alt="Logo" class="h-12 object-contain border rounded p-1 bg-gray-50">
|
||||
<a href="{{ route('admin.layout.removeLogo') }}"
|
||||
onclick="return confirm('Logo wirklich entfernen?')"
|
||||
class="text-sm text-red-600 hover:text-red-800">Logo entfernen</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
<x-input-label for="site_logo" value="Logo hochladen (PNG, JPG – max. 2 MB)" />
|
||||
<input id="site_logo" name="site_logo" type="file" accept="image/*"
|
||||
class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-md file:border-0 file:text-sm file:font-medium
|
||||
file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
|
||||
<x-input-error :messages="$errors->get('site_logo')" class="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Button-Farbe --}}
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
|
||||
Button-Farbe
|
||||
</h3>
|
||||
<div class="flex items-center space-x-4">
|
||||
<input id="button_color" name="button_color" type="color"
|
||||
value="{{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}"
|
||||
class="h-10 w-20 rounded border border-gray-300 cursor-pointer p-1" />
|
||||
<div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">Primärfarbe für Buttons und Akzente</p>
|
||||
<p class="text-xs text-gray-500" id="color_preview_text">
|
||||
{{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}
|
||||
</p>
|
||||
</div>
|
||||
<button type="button"
|
||||
id="preview_btn"
|
||||
style="background-color: {{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}"
|
||||
class="px-4 py-2 text-white text-sm font-medium rounded-md transition">
|
||||
Vorschau
|
||||
</button>
|
||||
</div>
|
||||
<x-input-error :messages="$errors->get('button_color')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
{{-- Dark / Light Mode --}}
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
|
||||
Erscheinungsbild
|
||||
</h3>
|
||||
<div class="flex space-x-4">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" name="theme_mode" value="light"
|
||||
{{ ($settings['theme_mode'] ?? 'light') === 'light' ? 'checked' : '' }}
|
||||
class="text-indigo-600 focus:ring-indigo-500" />
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">
|
||||
☀️ Hell (Light Mode)
|
||||
</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" name="theme_mode" value="dark"
|
||||
{{ ($settings['theme_mode'] ?? 'light') === 'dark' ? 'checked' : '' }}
|
||||
class="text-indigo-600 focus:ring-indigo-500" />
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">
|
||||
🌙 Dunkel (Dark Mode)
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Speichern --}}
|
||||
<div class="flex justify-end pt-2 border-t border-gray-200">
|
||||
<button type="submit"
|
||||
id="save_btn"
|
||||
style="background-color: {{ $settings['button_color'] ?? '#4f46e5' }}"
|
||||
class="inline-flex items-center px-6 py-2 text-white text-sm font-medium rounded-md hover:opacity-90 transition">
|
||||
Einstellungen speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const colorInput = document.getElementById('button_color');
|
||||
const previewBtn = document.getElementById('preview_btn');
|
||||
const saveBtn = document.getElementById('save_btn');
|
||||
const colorText = document.getElementById('color_preview_text');
|
||||
|
||||
colorInput.addEventListener('input', function () {
|
||||
previewBtn.style.backgroundColor = this.value;
|
||||
saveBtn.style.backgroundColor = this.value;
|
||||
colorText.textContent = this.value;
|
||||
});
|
||||
</script>
|
||||
</x-app-layout>
|
||||
@@ -1,19 +1,21 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Benutzerverwaltung
|
||||
</h2>
|
||||
<a href="{{ route('admin.users.create') }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 transition">
|
||||
+ Neuer Benutzer
|
||||
</a>
|
||||
</div>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Benutzerverwaltung
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
|
||||
{{-- Toolbar --}}
|
||||
<div class="flex justify-end mb-4">
|
||||
<a href="{{ route('admin.users.create') }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 transition">
|
||||
+ Neuer Benutzer
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Flash-Meldungen --}}
|
||||
@if(session('success'))
|
||||
<div class="mb-4 p-4 bg-green-100 text-green-800 rounded-md">
|
||||
|
||||
Reference in New Issue
Block a user