salam/nutzwerte_fi4
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new design

Browse Source
This commit is contained in:
salam committed 2025-09-27 08:59:04 +02:00
1 parent b03f1eda4d
commit ebece1fca7
15 files changed
+206 -86
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/layouts/app.blade.php
+10 -3
View File
@@ -23,7 +23,15 @@
loadDarkMode()
document.addEventListener('livewire:navigated', loadDarkMode)
function toggle_theme() {
if (localStorage.getItem("theme") === "light") {
document.documentElement.classList.add("dark");
localStorage.setItem("theme", "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light");
}
}
</script>
</head>
@@ -36,8 +44,7 @@
@include('layouts.nav')
<main
class="mx-auto max-w-5xl bg-gray-100 dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-5">
<main class="mx-auto max-w-6xl">
@yield('content')
</main>
resources/views/layouts/dark-toggle.blade.php
+4
View File
@@ -0,0 +1,4 @@
<div class="pl-4">
<x-filament::icon-button icon="heroicon-o-sun" class="hidden dark:block" x-on:click=toggle_theme(); />
<x-filament::icon-button icon="heroicon-m-moon" class="block dark:hidden" x-on:click=toggle_theme(); />
</div>
resources/views/layouts/nav.blade.php
+78 -32
View File
@@ -1,36 +1,82 @@
<nav class="mx-auto w-full max-w-5xl p-5">
<div class=" grid grid-cols-2">
<div class="fi-logo flex gap-1 ">
<div class="w-9 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m12.99 6.74 1.93 3.44"></path>
<path d="M19.136 12a10 10 0 0 1-14.271 0"></path>
<path d="m21 21-2.16-3.84"></path>
<path d="m3 21 8.02-14.26"></path>
<circle cx="12" cy="5" r="2"></circle>
</svg>
</div>
<div class="text-2xl leading-none font-black tracking-tighter text-shadow-md dark:text-shadow-none">
nutzwerte.at
<div class="text-xs font-light">Software für Architekten</div>
</div>
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false"
class="flex items-center justify-between bg-surface-alt border-b border-outline px-6 py-4 dark:border-outline-dark dark:bg-surface-dark-alt">
<!-- Brand Logo -->
<div class="fi-logo flex gap-1 ">
<div class="w-9 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m12.99 6.74 1.93 3.44"></path>
<path d="M19.136 12a10 10 0 0 1-14.271 0"></path>
<path d="m21 21-2.16-3.84"></path>
<path d="m3 21 8.02-14.26"></path>
<circle cx="12" cy="5" r="2"></circle>
</svg>
</div>
<div class="grid grid-flow-col">
<x-filament::link href="/" color="white" icon="heroicon-o-home">
Home
</x-filament::link>
<x-filament::link href="/nutzwerte" color="white" icon="heroicon-o-building-office-2">
Nutzwerte
</x-filament::link>
<x-filament::link href="/dieses-programm" color="white" icon="heroicon-o-calculator">
Programm
</x-filament::link>
<x-filament::link href="/impressum" color="white" icon="heroicon-o-calendar-date-range">
Impressum
</x-filament::link>
<div class="text-2xl leading-none font-black tracking-tighter text-shadow-md dark:text-shadow-none">
nutzwerte.at
<div class="text-xs font-light">Software für Architekten</div>
</div>
</div>
<!-- Desktop Menu -->
<dev class="hidden items-center gap-4 md:flex">
<x-filament::link href="/" color="white" icon="heroicon-o-home">
Home
</x-filament::link>
<x-filament::link href="/nutzwerte" color="white" icon="heroicon-o-building-office-2">
Nutzwerte
</x-filament::link>
<x-filament::link href="/programm" color="white" icon="heroicon-o-calculator">
Programm
</x-filament::link>
<x-filament::link href="/impressum" color="white" icon="heroicon-o-calendar-date-range">
Impressum
</x-filament::link>
<x-filament::button href="/app" tag="a" size="sm">
Anmelden
</x-filament::button>
@include('layouts.dark-toggle')
{{-- <x-filament::button href="/app/register" tag="a" size="sm" color="gray">
Registrieren
</x-filament::button> --}}
</dev>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen"
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button"
class="flex text-on-surface dark:text-on-surface-dark md:hidden" aria-label="mobile menu"
aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen"
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0"
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu"
class="fixed max-h-svh overflow-y-auto inset-x-0 top-0 z-10 flex flex-col divide-y divide-outline rounded-b-radius border-b border-outline bg-surface-alt px-6 pb-6 pt-20 dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt md:hidden">
<li class="py-4"><a href="/home"
class="w-full text-lg font-bold text-primary focus:underline dark:text-primary-dark"
aria-current="page">Home</a></li>
<li class="py-4"><a href="/nutzwerte"
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Nutzwerte</a>
</li>
<li class="py-4"><a href="/programm"
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Programm</a>
</li>
<li class="py-4"><a href="/impressum"
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Impressum</a>
</li>
<li class="py-4"><a href="/app"
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Login</a>
</li>
</ul>
</nav>