design wip

This commit is contained in:
salam committed 2025-09-19 07:27:17 +02:00
1 parent 775fc94333
commit 370e7435f9
15 files changed
+280 -297

No files matched your search

@@ -1,107 +0,0 @@
<div>
<script>
window.filamentData = []
</script>
<script src="http://nutzwerte_fi4.test/js/filament/actions/actions.js?v=4.0.8.0"></script>
<script src="http://nutzwerte_fi4.test/js/filament/notifications/notifications.js?v=4.0.8.0"></script>
<script src="http://nutzwerte_fi4.test/js/filament/schemas/schemas.js?v=4.0.8.0"></script>
<script src="http://nutzwerte_fi4.test/js/filament/support/support.js?v=4.0.8.0"></script>
<script src="http://nutzwerte_fi4.test/js/filament/tables/tables.js?v=4.0.8.0"></script>
<script src="http://nutzwerte_fi4.test/js/filament/filament/echo.js?v=4.0.8.0"></script>
<script src="http://nutzwerte_fi4.test/js/filament/filament/app.js?v=4.0.8.0"></script>
<style>
:root {}
</style>
<script>
loadDarkMode()
</script>
<div class="fixed w-full flex p-4 z-40 auth-theme-switcher top-0 justify-end">
<div class="rounded-lg bg-gray-50 dark:bg-gray-950">
<div x-data="{
theme: null,
init: function() {
this.theme = localStorage.getItem('theme') || 'system'
$dispatch('theme-changed', theme)
$watch('theme', (theme) => {
$dispatch('theme-changed', theme)
})
},
}" class="fi-theme-switcher grid grid-flow-col gap-x-1">
<button aria-label="Light Mode einschalten" type="button"
x-bind:class="theme === 'light' ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
'text-gray-400 hover:text-gray-500 focus:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:text-gray-400'"
x-on:click="(theme = 'light')"
x-tooltip="{
content: 'Light Mode einschalten',
theme: $store.theme,
}"
class="flex justify-center rounded-lg p-2 outline-none transition duration-75 hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-white/5 dark:focus:bg-white/5">
<svg class="fi-icon fi-size-md h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true" data-slot="icon">
<path
d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z" />
</svg>
</button>
<button aria-label="Dark Mode einschalten" type="button"
x-bind:class="theme === 'dark' ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
'text-gray-400 hover:text-gray-500 focus:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:text-gray-400'"
x-on:click="(theme = 'dark')"
x-tooltip="{
content: 'Dark Mode einschalten',
theme: $store.theme,
}"
class="flex justify-center rounded-lg p-2 outline-none transition duration-75 hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-white/5 dark:focus:bg-white/5">
<svg class="fi-icon fi-size-md h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd"
d="M7.455 2.004a.75.75 0 0 1 .26.77 7 7 0 0 0 9.958 7.967.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083Z"
clip-rule="evenodd" />
</svg>
</button>
<button aria-label="Systemthema benutzen" type="button"
x-bind:class="theme === 'system' ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
'text-gray-400 hover:text-gray-500 focus:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:text-gray-400'"
x-on:click="(theme = 'system')"
x-tooltip="{
content: 'Systemthema benutzen',
theme: $store.theme,
}"
class="flex justify-center rounded-lg p-2 outline-none transition duration-75 hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-white/5 dark:focus:bg-white/5">
<svg class="fi-icon fi-size-md h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd"
d="M2 4.25A2.25 2.25 0 0 1 4.25 2h11.5A2.25 2.25 0 0 1 18 4.25v8.5A2.25 2.25 0 0 1 15.75 15h-3.105a3.501 3.501 0 0 0 1.1 1.677A.75.75 0 0 1 13.26 18H6.74a.75.75 0 0 1-.484-1.323A3.501 3.501 0 0 0 7.355 15H4.25A2.25 2.25 0 0 1 2 12.75v-8.5Zm1.5 0a.75.75 0 0 1 .75-.75h11.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75v-7.5Z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=df3a17f2" data-csrf="rXVfWsqBtHFpptLxNoNpzOf56uwroVoGKlXmKt1h"
data-update-uri="/livewire/update" data-navigate-once="true"></script>
</div>
+4 -6
View File
@@ -1,10 +1,8 @@
<div class="flex justify-center gap-3">
<a href="/app"
class="w-full text-center sm:w-40 px-4 py-3 rounded font-semibold text-md bg-primary-500 text-white border border-slate-300">
<x-filament::button href="/app" tag="a" size="xl">
Anmelden
</a>
<a href="/app/register"
class="w-full text-center sm:w-40 px-4 py-3 rounded font-semibold text-md bg-white text-primary-500 border border-slate-300">
</x-filament::button>
<x-filament::button href="/app/register" tag="a" size="xl" color="gray">
Konto eröffnen
</a>
</x-filament::button>
</div>
@@ -0,0 +1,3 @@
<div class="mx-auto fi-header-heading">
{{ $slot }}
</div>
@@ -1,3 +0,0 @@
<div class="mt-10 mb-5 text-center mx-auto fi-header-heading">
{{ $slot }}
</div>
+1 -11
View File
@@ -1,15 +1,5 @@
<a class="flex gap-1 justify-center" href="/">
<div class="w-6 pt-0.5">
{{-- <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" class="lucide lucide-aperture-icon lucide-aperture">
<circle cx="12" cy="12" r="10" />
<path d="m14.31 8 5.74 9.94" />
<path d="M9.69 8h11.48" />
<path d="m7.38 12 5.74-9.94" />
<path d="M9.69 16 3.95 6.06" />
<path d="M14.31 16H2.83" />
<path d="m16.62 12-5.74 9.94" />
</svg> --}}
<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" />
+29 -10
View File
@@ -8,24 +8,43 @@
<title>@yield('title')</title>
@vite(['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'])
@filamentStyles
<script>
const loadDarkMode = () => {
window.theme = localStorage.getItem('theme') ?? 'system'
if (
window.theme === 'dark' ||
(window.theme === 'system' &&
window.matchMedia('(prefers-color-scheme: dark)')
.matches)
) {
document.documentElement.classList.add('dark')
}
}
loadDarkMode()
document.addEventListener('livewire:navigated', loadDarkMode)
</script>
</head>
<body class="fi-body fi-panel-admin bg-cover" style="background-image: url('images/backgrounds/bg1.jpg')">
<div>
@livewire('notifications')
</div>
<div class="fi-simple-layout">
<div class="fi-simple-main-ctn">
<main class="fi-simple-main fi-width-2xl shadow-2xl border bg-white/90">
<div class="bg-cover bg-position-[center_top_3.8rem]">
<main class="fi-simple-main fi-width-5xl shadow-2xl bg-white/80 dark:bg-gray-900/90">
<div class="bg-cover bg-position-[center_top_3.8rem]">
@include('layouts.logo')
@include('layouts.nav')
@include('layouts.nav')
@yield('content')
@yield('content')
</div>
</main>
@include('layouts.footer');
</div>
</main>
@include('layouts.footer');
</div>
</div>
@filamentScripts
</body>
@@ -0,0 +1,12 @@
<nav>
<div class="flex text-xs justify-center bg-gray-900 dark:bg-300-900 rounded mb-10">
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/">Home</a>
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/nutzwerte">Über
Nutzwerte</a>
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
href="/dieses-programm">Über dieses
Programm</a>
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
href="/impressum">Impressum</a>
</div>
</nav>
+36 -10
View File
@@ -1,12 +1,38 @@
<nav>
<div class="flex text-xs justify-between bg-gray-900 dark:bg-300-900 rounded">
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/">Home</a>
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/nutzwerte">Über
Nutzwerte</a>
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
href="/dieses-programm">Über dieses
Programm</a>
<a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
href="/impressum">Impressum</a>
<nav class="fi-topbar mb-10">
<div class="fi-topbar-start">
<a href="http://nutzwerte_fi4.test/app">
</a>
<div style="height: 2.6rem;" class="fi-logo"><a href="http://nutzwerte_fi4.test/app">
</a><a class="flex gap-1 justify-center" href="/">
<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>
</a>
</div>
</div>
<div x-persist="topbar.end.panel-admin" class="fi-topbar-end">
<x-filament::button href="/nutzwerte" tag="a" color="gray">
Über Nutzwerte
</x-filament::button>
<x-filament::button href="/dieses-programm" tag="a" color="gray">
Dieses Programm
</x-filament::button>
<x-filament::button href="/impressum" tag="a" color="gray">
Impressum
</x-filament::button>
</div>
</nav>
+118 -81
View File
@@ -1,117 +1,154 @@
@extends('layouts.app')
@section('content')
<x-top-title>Die Nutzwertberechnung</x-top-title>
<div class="flex flex-col gap-3">
<x-filament::section>
<x-slot name="heading">
<x-title>
Die Nutzwertberechnung
</x-title>
</x-slot>
<div class=" text-gray-700 dark:text-gray-200">
<x-text>
oft auch als Parifizierung bezeichnet, ist ein Gutachten im österreichischen Wohnungseigentumsrecht, das das
Verhältnis der einzelnen Eigentumsanteile innerhalb eines Gebäudes bestimmt.
</x-text>
</x-filament::section>
<x-filament::section>
<x-slot name="heading">
<x-title>
Begründung von Wohnungseigentum
</x-title>
</x-slot>
<x-text>
Sie bildet die Grundlage für die Berechnung der Betriebs- und Instandhaltungskosten sowie
für das Stimmrecht der Miteigentümer und ist für die Begründung von Wohnungseigentum
notwendig.
</x-text>
</x-filament::section>
<x-text>
<x-filament::section>
<x-slot name="heading">
<x-title>
Wertmerkmale
</x-title>
</x-slot>
Der Nutzwert wird aus der Nutzfläche ermittelt und durch Zu- oder Abschläge an die
individuellen
Wertmerkmale der einzelnen Wohnungen (z.B. Lage, Balkon) angepasst.
Was ist ein Nutzwertgutachten bzw. eine Parifizierung?
</x-text>
</x-filament::section>
<x-subu-title>
Bestimmung der Eigentumsverhältnisse:
</x-subu-title>
<x-title>Die Nutzwertberechnung</x-title>
<x-text>
Die Parifizierung legt fest, wie sich ein Gebäude in seine einzelnen Eigentumsobjekte
(Wohnungen,
Geschäftsräumlichkeiten) aufteilt.
</x-text>
<div class=" text-gray-700 dark:text-gray-200">
<x-text>
oft auch als Parifizierung bezeichnet, ist ein Gutachten im österreichischen Wohnungseigentumsrecht, das das
Verhältnis der einzelnen Eigentumsanteile innerhalb eines Gebäudes bestimmt.
</x-text>
<x-subu-title>
Wie wird der Nutzwert berechnet?
</x-subu-title>
<x-text>
Sie bildet die Grundlage für die Berechnung der Betriebs- und Instandhaltungskosten sowie
für das Stimmrecht der Miteigentümer und ist für die Begründung von Wohnungseigentum
notwendig.
</x-text>
<x-sub-title>
Berechnung der Anteile:
</x-sub-title>
<x-text>
Der Nutzwert wird aus der Nutzfläche ermittelt und durch Zu- oder Abschläge an die
individuellen
Wertmerkmale der einzelnen Wohnungen (z.B. Lage, Balkon) angepasst.
Was ist ein Nutzwertgutachten bzw. eine Parifizierung?
</x-text>
<x-text>
Sie berechnet das Verhältnis der Größe einer einzelnen Wohnung zur Gesamtgröße des Objekts.
Diese Anteile werden als "Mindestanteile" im Grundbuch eingetragen.
Grundlage für Kosten und Stimmrechte:
Auf Basis der Nutzwertanteile wird festgelegt, wer wie viele Betriebskosten und
Instandhaltungsbeiträge zahlen muss und wie viele Stimmrechte die einzelnen Eigentümer bei
Eigentümerversammlungen haben.
</x-text>
<x-subu-title>
Bestimmung der Eigentumsverhältnisse:
</x-subu-title>
<x-text>
Basis für Wohnungseigentumsverträge:
Die Parifizierung ist die Grundlage für die Wohnungseigentumsverträge, die alle Eigentümer
unterzeichnen müssen.
</x-text>
<x-text>
Die Parifizierung legt fest, wie sich ein Gebäude in seine einzelnen Eigentumsobjekte
(Wohnungen,
Geschäftsräumlichkeiten) aufteilt.
</x-text>
<x-sub-title>
1. Ermittlung der Nutzfläche:
</x-sub-title>
<x-subu-title>
Wie wird der Nutzwert berechnet?
</x-subu-title>
<x-text>
Der erste Schritt ist die Ermittlung der Nutzfläche, die die gesamte Bodenfläche der Wohnung
abzüglich Wandstärken und ähnlichem umfasst.
</x-text>
<x-sub-title>
Berechnung der Anteile:
</x-sub-title>
<x-sub-title>
2. Bewertung von Zu- und Abschlägen:
</x-sub-title>
<x-text>
Sie berechnet das Verhältnis der Größe einer einzelnen Wohnung zur Gesamtgröße des Objekts.
Diese Anteile werden als "Mindestanteile" im Grundbuch eingetragen.
Grundlage für Kosten und Stimmrechte:
Auf Basis der Nutzwertanteile wird festgelegt, wer wie viele Betriebskosten und
Instandhaltungsbeiträge zahlen muss und wie viele Stimmrechte die einzelnen Eigentümer bei
Eigentümerversammlungen haben.
</x-text>
<x-text>
Anschließend werden die Nutzfläche und der sogenannte "Richtnutzwert" (ein fester Wert für
die Wohnung) durch Zu- oder Abschläge angepasst.
</x-text>
<x-text>
Basis für Wohnungseigentumsverträge:
Die Parifizierung ist die Grundlage für die Wohnungseigentumsverträge, die alle Eigentümer
unterzeichnen müssen.
</x-text>
<x-sub-title>
3. Berücksichtigung wertrelevanter Faktoren:
</x-sub-title>
<x-sub-title>
1. Ermittlung der Nutzfläche:
</x-sub-title>
<x-text>
Werterhöhend: Lage im Haus (mittlere Geschosse), Balkone, Terrassen, Grünflächen.
Wertmindernd: Erdgeschosswohnungen, ungünstige Lage (z.B. Nordlage), schlechte
Grundrissgestaltung.
</x-text>
<x-text>
Der erste Schritt ist die Ermittlung der Nutzfläche, die die gesamte Bodenfläche der Wohnung
abzüglich Wandstärken und ähnlichem umfasst.
</x-text>
<x-sub-title>
4. Professionelle Erstellung:
</x-sub-title>
<x-sub-title>
2. Bewertung von Zu- und Abschlägen:
</x-sub-title>
<x-text>
Die Erstellung eines Nutzwertgutachtens erfolgt durch einen befugten Ingenieurkonsulenten
für Vermessungswesen (Zivilgeometer) und einen Sachverständigen für Hochbau.
</x-text>
<x-text>
Anschließend werden die Nutzfläche und der sogenannte "Richtnutzwert" (ein fester Wert für
die Wohnung) durch Zu- oder Abschläge angepasst.
</x-text>
<x-subu-title>
Wann wird eine Nutzwertberechnung benötigt?
</x-subu-title>
<x-sub-title>
3. Berücksichtigung wertrelevanter Faktoren:
</x-sub-title>
<x-sub-title>
Begründung von Wohnungseigentum:
</x-sub-title>
<x-text>
Werterhöhend: Lage im Haus (mittlere Geschosse), Balkone, Terrassen, Grünflächen.
Wertmindernd: Erdgeschosswohnungen, ungünstige Lage (z.B. Nordlage), schlechte
Grundrissgestaltung.
</x-text>
<x-text>
Die Parifizierung ist notwendig, wenn ein Gebäude in einzelne Eigentumsobjekte aufgeteilt
und diese als Wohnungseigentum begründet werden sollen.
</x-text>
<x-sub-title>
4. Professionelle Erstellung:
</x-sub-title>
<x-sub-title>
Analyse bestehender Immobilien:
</x-sub-title>
<x-text>
Die Erstellung eines Nutzwertgutachtens erfolgt durch einen befugten Ingenieurkonsulenten
für Vermessungswesen (Zivilgeometer) und einen Sachverständigen für Hochbau.
</x-text>
<x-text>
Sie kann zur Analyse der Verteilung von Kosten und Stimmrechten in einer bestehenden
Eigentümergemeinschaft durchgeführt werden.
</x-text>
<x-subu-title>
Wann wird eine Nutzwertberechnung benötigt?
</x-subu-title>
<x-sub-title>
Begründung von Wohnungseigentum:
</x-sub-title>
<x-text>
Die Parifizierung ist notwendig, wenn ein Gebäude in einzelne Eigentumsobjekte aufgeteilt
und diese als Wohnungseigentum begründet werden sollen.
</x-text>
<x-sub-title>
Analyse bestehender Immobilien:
</x-sub-title>
<x-text>
Sie kann zur Analyse der Verteilung von Kosten und Stimmrechten in einer bestehenden
Eigentümergemeinschaft durchgeführt werden.
</x-text>
</div>
</div>
@endsection
+24 -16
View File
@@ -3,23 +3,31 @@
@section('content')
<div class="text-gray-700 dark:text-gray-200">
<x-top-title>Die Nutzwertberechnung</x-top-title>
<div class="flex gap-7">
<x-filament::section>
<x-slot name="heading">
Die Nutzwertberechnung
</x-slot>
Die Nutzwertberechnung ist ein Gutachten im österreichischen Wohnungseigentumsrecht, das das Verhältnis der
einzelnen
Eigentumsanteile innerhalb eines Gebäudes bestimmt. <x-filament::link href="/nutzwerte" icon-position="after"
icon="lucide-external-link">
Über die Nutzwertberechnung
</x-filament::link>
<br>
<br>
Wie Ihnen dieses Programm bei der Nutzwertberechnung zur Hand gehen kann, und Ihnen wertvolle Zeit bei der
Berechnung und Formatierung sparen hilft, <x-filament::link href="/dieses-programm" icon-position="after"
icon="lucide-external-link">
erfahren sie hier.
</x-filament::link>
</x-filament::section>
<img src="images/house.jpg" class="w-96 rounded-2xl" />
</div>
<x-text>
Die Nutzwertberechnung ist ein Gutachten im österreichischen Wohnungseigentumsrecht, das das Verhältnis der
einzelnen
Eigentumsanteile innerhalb eines Gebäudes bestimmt. <x-filament::link href="/nutzwerte" icon-position="after"
icon="lucide-external-link">
Über die Nutzwertberechnung
</x-filament::link><br>
</x-text>
<x-text>
Wie Ihnen dieses Programm bei der Nutzwertberechnung zur Hand gehen kann, und Ihnen wertvolle Zeit bei der
Berechnung und Formatierung sparen hilft, <x-filament::link href="/dieses-programm" icon-position="after"
icon="lucide-external-link">
erfahren sie hier.
</x-filament::link>
</x-text>
<br>
<br>
@include('components.login')