IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Dashboard Style

Browse Source
This commit is contained in:
Moritz Utcke
2024-01-18 14:09:01 +07:00
parent 79581cdcf2
commit fa9cfe3545
14 changed files with 552 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -52,6 +52,7 @@
"svelte": "^3.59.1",
"svelte-dialogs": "^1.2.2",
"svelte-preprocess": "^5.0.3",
"svelte-ripple-action": "^1.0.5",
"tailwindcss": "^3.3.2",
"trpc-openapi": "^1.2.0",
"uuid": "^9.0.0",
@@ -60,6 +61,7 @@
},
"devDependencies": {
"@faker-js/faker": "^8.3.1",
"@tailwindcss/typography": "^0.5.10",
"@types/body-scroll-lock": "^3.1.2",
"@types/js-cookie": "^3.0.6",
"@types/uuid": "^9.0.1",

42
src/components/Dashboard/DashboardAusweisSkeleton.svelte Normal file
View File

@@ -0,0 +1,42 @@
<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
<figure class="lg:w-1/2 min-h-72 skeleton"></figure>
<div class="card-body lg:w-1/2">
<div class="flex flex-row flex-wrap gap-2">
<div class="w-32 skeleton h-4"></div>
<div class="w-24 skeleton h-4"></div>
</div>
<div class="w-72 skeleton h-6"></div>
<div class="mb-4 flex flex-row items-center gap-4">
<div class="w-72 skeleton h-2"></div>
<div class="w-6 skeleton h-2"></div>
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-row justify-between">
<div class="w-28 skeleton h-2"></div>
<div class="w-12 skeleton h-2"></div>
</div>
<div class="flex flex-row justify-between">
<div class="w-40 skeleton h-2"></div>
<div class="w-8 skeleton h-2"></div>
</div>
<div class="flex flex-row justify-between">
<div class="w-24 skeleton h-2"></div>
<div class="w-14 skeleton h-2"></div>
</div>
<div class="flex flex-row justify-between">
<div class="w-32 skeleton h-2"></div>
<div class="w-10 skeleton h-2"></div>
</div>
<div class="flex flex-row justify-between">
<div class="w-16 skeleton h-2"></div>
<div class="w-8 skeleton h-2"></div>
</div>
</div>
<div class="card-actions justify-end mt-auto">
<div class="w-48 skeleton h-12"></div>
<div class="w-28 skeleton h-12"></div>
<div class="w-32 skeleton h-12"></div>
<div class="w-12 skeleton h-12"></div>
</div>
</div>
</div>

210
src/components/Dashboard/DashboardSidebar.svelte Normal file
View File

@@ -0,0 +1,210 @@
<script lang="ts">
import { ripple } from "svelte-ripple-action";
import type { RippleOptions } from "svelte-ripple-action/dist/constants";
const rippleOptions: RippleOptions = {
center: false,
color: "rgba(113, 128, 150, 0.1)",
};
let darkTheme: boolean = false;
</script>
<aside class="hidden md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
<a href="/" class="px-8"
><img
src="/images/header/logo-big.png"
class="w-36"
alt="IBCornelsen - Logo"
/></a
>
<div class="flex flex-col gap-2 mt-12">
<button use:ripple={rippleOptions} class="button-tab">
<svg
width="22"
height="22"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
><path
d="M7.07926 0.222253C7.31275 -0.007434 7.6873 -0.007434 7.92079 0.222253L14.6708 6.86227C14.907 7.09465 14.9101 7.47453 14.6778 7.71076C14.4454 7.947 14.0655 7.95012 13.8293 7.71773L13 6.90201V12.5C13 12.7761 12.7762 13 12.5 13H2.50002C2.22388 13 2.00002 12.7761 2.00002 12.5V6.90201L1.17079 7.71773C0.934558 7.95012 0.554672 7.947 0.32229 7.71076C0.0899079 7.47453 0.0930283 7.09465 0.32926 6.86227L7.07926 0.222253ZM7.50002 1.49163L12 5.91831V12H10V8.49999C10 8.22385 9.77617 7.99999 9.50002 7.99999H6.50002C6.22388 7.99999 6.00002 8.22385 6.00002 8.49999V12H3.00002V5.91831L7.50002 1.49163ZM7.00002 12H9.00002V8.99999H7.00002V12Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
>
Home
</button>
<button use:ripple={rippleOptions} class="button-tab">
<svg
width="22"
height="22"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
><path
d="M4.2 1H4.17741H4.1774C3.86936 0.999988 3.60368 0.999978 3.38609 1.02067C3.15576 1.04257 2.92825 1.09113 2.71625 1.22104C2.51442 1.34472 2.34473 1.51442 2.22104 1.71625C2.09113 1.92825 2.04257 2.15576 2.02067 2.38609C1.99998 2.60367 1.99999 2.86935 2 3.17738V3.1774V3.2V11.8V11.8226V11.8226C1.99999 12.1307 1.99998 12.3963 2.02067 12.6139C2.04257 12.8442 2.09113 13.0717 2.22104 13.2837C2.34473 13.4856 2.51442 13.6553 2.71625 13.779C2.92825 13.9089 3.15576 13.9574 3.38609 13.9793C3.60368 14 3.86937 14 4.17741 14H4.2H10.8H10.8226C11.1306 14 11.3963 14 11.6139 13.9793C11.8442 13.9574 12.0717 13.9089 12.2837 13.779C12.4856 13.6553 12.6553 13.4856 12.779 13.2837C12.9089 13.0717 12.9574 12.8442 12.9793 12.6139C13 12.3963 13 12.1306 13 11.8226V11.8V3.2V3.17741C13 2.86936 13 2.60368 12.9793 2.38609C12.9574 2.15576 12.9089 1.92825 12.779 1.71625C12.6553 1.51442 12.4856 1.34472 12.2837 1.22104C12.0717 1.09113 11.8442 1.04257 11.6139 1.02067C11.3963 0.999978 11.1306 0.999988 10.8226 1H10.8H4.2ZM3.23875 2.07368C3.26722 2.05623 3.32362 2.03112 3.48075 2.01618C3.64532 2.00053 3.86298 2 4.2 2H10.8C11.137 2 11.3547 2.00053 11.5193 2.01618C11.6764 2.03112 11.7328 2.05623 11.7613 2.07368C11.8285 2.11491 11.8851 2.17147 11.9263 2.23875C11.9438 2.26722 11.9689 2.32362 11.9838 2.48075C11.9995 2.64532 12 2.86298 12 3.2V11.8C12 12.137 11.9995 12.3547 11.9838 12.5193C11.9689 12.6764 11.9438 12.7328 11.9263 12.7613C11.8851 12.8285 11.8285 12.8851 11.7613 12.9263C11.7328 12.9438 11.6764 12.9689 11.5193 12.9838C11.3547 12.9995 11.137 13 10.8 13H4.2C3.86298 13 3.64532 12.9995 3.48075 12.9838C3.32362 12.9689 3.26722 12.9438 3.23875 12.9263C3.17147 12.8851 3.11491 12.8285 3.07368 12.7613C3.05624 12.7328 3.03112 12.6764 3.01618 12.5193C3.00053 12.3547 3 12.137 3 11.8V3.2C3 2.86298 3.00053 2.64532 3.01618 2.48075C3.03112 2.32362 3.05624 2.26722 3.07368 2.23875C3.11491 2.17147 3.17147 2.11491 3.23875 2.07368ZM5 10C4.72386 10 4.5 10.2239 4.5 10.5C4.5 10.7761 4.72386 11 5 11H8C8.27614 11 8.5 10.7761 8.5 10.5C8.5 10.2239 8.27614 10 8 10H5ZM4.5 7.5C4.5 7.22386 4.72386 7 5 7H10C10.2761 7 10.5 7.22386 10.5 7.5C10.5 7.77614 10.2761 8 10 8H5C4.72386 8 4.5 7.77614 4.5 7.5ZM5 4C4.72386 4 4.5 4.22386 4.5 4.5C4.5 4.77614 4.72386 5 5 5H10C10.2761 5 10.5 4.77614 10.5 4.5C10.5 4.22386 10.2761 4 10 4H5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
>
Ausweise
</button>
<button use:ripple={rippleOptions} class="button-tab">
<svg
width="22"
height="22"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
><path
d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
>
Kontakt
</button>
</div>
<div class="mt-auto flex flex-col gap-4 px-8">
<div class="flex flex-row justify-between items-center">
<button class="btn btn-square btn-ghost hover:bg-gray-100">
<label class="swap swap-rotate">
<!-- this hidden checkbox controls the state -->
<input
type="checkbox"
class="theme-controller hidden"
value={darkTheme ? "dark" : "light"}
/>
<!-- sun icon -->
<svg
class="swap-on fill-current w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
/></svg
>
<!-- moon icon -->
<svg
class="swap-off fill-current w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
/></svg
>
</label>
</button>
<div class="dropdown dropdown-top">
<div class="indicator">
<span class="indicator-item badge badge-accent text-xs">1</span>
<button tabindex="0" class="btn btn-square btn-ghost hover:bg-gray-100">
<svg
width="25"
height="25"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
><path
d="M8.60124 1.25086C8.60124 1.75459 8.26278 2.17927 7.80087 2.30989C10.1459 2.4647 12 4.41582 12 6.79999V10.25C12 11.0563 12.0329 11.7074 12.7236 12.0528C12.931 12.1565 13.0399 12.3892 12.9866 12.6149C12.9333 12.8406 12.7319 13 12.5 13H8.16144C8.36904 13.1832 8.49997 13.4513 8.49997 13.75C8.49997 14.3023 8.05226 14.75 7.49997 14.75C6.94769 14.75 6.49997 14.3023 6.49997 13.75C6.49997 13.4513 6.63091 13.1832 6.83851 13H2.49999C2.2681 13 2.06664 12.8406 2.01336 12.6149C1.96009 12.3892 2.06897 12.1565 2.27638 12.0528C2.96708 11.7074 2.99999 11.0563 2.99999 10.25V6.79999C2.99999 4.41537 4.85481 2.46396 7.20042 2.3098C6.73867 2.17908 6.40036 1.75448 6.40036 1.25086C6.40036 0.643104 6.89304 0.150421 7.5008 0.150421C8.10855 0.150421 8.60124 0.643104 8.60124 1.25086ZM7.49999 3.29999C5.56699 3.29999 3.99999 4.86699 3.99999 6.79999V10.25L4.00002 10.3009C4.0005 10.7463 4.00121 11.4084 3.69929 12H11.3007C10.9988 11.4084 10.9995 10.7463 11 10.3009L11 10.25V6.79999C11 4.86699 9.43299 3.29999 7.49999 3.29999Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
>
</button>
</div>
<ul tabindex="0" class="dropdown-content mb-2 border border-base-300 z-10 menu py-4 px-0 bg-base-200 rounded-box w-80">
<div class="cursor-pointer hover:bg-base-100 h-auto w-full rounded-none no-animation focus:shadow-none text-left flex flex-row items-center">
<p title="Ansehen" use:ripple={rippleOptions} class="px-4 py-2">Ein Ansprechpartner hat für ihr Gebäude eine Energieeffizienzberechnung angefordert.</p>
<div title="Entfernen" class="h-24 px-4 hover:bg-base-100 flex items-center justify-center border-l border-l-base-300" use:ripple={rippleOptions}>
<svg width="45" height="45" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</ul>
</div>
<button
class="btn btn-square btn-ghost hover:bg-gray-100 focus:shadow-none focus:bg-gray-200"
>
<svg
width="25"
height="25"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
><path
d="M7.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
>
</button>
</div>
</div>
<div class="divider px-8"></div>
<button
use:ripple={rippleOptions}
class="btn btn-ghost no-animation focus:shadow-none justify-start py-4 h-auto hover:bg-base-200 px-8 rounded-none w-full flex flex-row gap-4"
>
<div class="avatar">
<div class="w-12 rounded-full">
<img
src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
/>
</div>
</div>
<div class="flex flex-col gap-2">
<span class="text-base-content font-semibold"
>Gertrude McKenzie</span
>
<span class="text-base-content">uve@rehkenban.bo</span>
</div>
</button>
</aside>
<!--<header class="md:hidden flex flex-row justify-between items-center px-8 sticky top-0 z-50 h-20 bg-base-100 border-b border-b-base-300">
<a href="/"
><img
src="/images/header/logo-big.png"
class="w-36"
alt="IBCornelsen - Logo"
/></a
>
<div class="dropdown dropdown-end">
<button tabindex="0" role="button">
<svg width="25" height="25" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a class="text-base-content">Item 1</a></li>
<li><a class="text-base-content">Item 2</a></li>
</ul>
</div>
</header>-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
:global(*) {
font-family: Poppins !important;
}
.button-tab {
@apply btn btn-primary btn-ghost rounded-none px-8 justify-start gap-4 items-center text-base font-normal text-base-content no-animation;
}
.button-tab:hover {
@apply bg-base-200;
}
.button-tab:focus {
@apply shadow-none;
}
</style>

50
src/components/Header.astro
View File

@@ -4,70 +4,60 @@ import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
const valid = await validateAccessTokenServer(Astro)
---
<header class="header">
<div class="headmargin">
<header>
<div class="hidden md:block w-full h-48">
<img
src="/images/header/header-bg.jpg"
class="headerBackgroundImage"
class="w-full h-full object-cover"
alt="Hintergrund - Rollen Architektenpapier"
/>
<div class="branding">
<img
src="/images/header/logo-big.png"
class="header-logo"
class="absolute top-4 right-4"
alt="IBCornelsen - Logo"
onclick="
window.location.href = '/'
"
/>
<h2
class="text-secondary font-semibold text-2xl absolute top-8 right-0"
class="text-secondary font-semibold text-2xl absolute top-8 right-4"
>
Energieausweis online erstellen
</h2>
<h2
class="text-primary font-semibold text-xl absolute top-16 right-0"
class="text-primary font-semibold text-xl absolute top-16 right-4"
>
Energieausweise nach aktueller GEG
</h2>
</div>
</div>
<div class="nav-head">
<!--<LanguageDropdown
countries={[
{ iso: "de", flag: "de", name: "Deutsch" },
{ iso: "en", flag: "us", name: "English" },
{ iso: "fr", flag: "fr", name: "Français" },
]}
localized={i18next.languages.map(l => {
return { lang: l, path: localizeUrl(Astro.request.url, l)};
})}
current={i18next.language}
client:load
/> -->
<div class="px-4 flex flex-row w-full bg-primary md:justify-end items-center">
<a
class="headerButton"
class="header-button hidden md:block"
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
>Energieausweis erstellen</a
>
<a class="headerButton" href="/kontakt"
<a class="header-button hidden md:block" href="/kontakt"
>Kontakt</a
>
<a class="headerButton" href="/agb">AGB</a>
<a class="header-button hidden md:block" href="/agb">AGB</a>
{
valid ? (
<a class="headerButton" href="/user">
<a class="header-button" href="/user">
Profil
</a>
) : (
<a class="headerButton" href="/auth/login">
<a class="header-button" href="/auth/login">
Login
</a>
)
}
<a class="hamburger_menu"
><img src="/images/hamburger.png" alt="hamburger" /></a
><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
>
</div>
</header>
<style>
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary;
}
</style>

38
src/components/HeaderAlternative.svelte Normal file
View File

@@ -0,0 +1,38 @@
<header class="flex flex-row justify-between px-8 py-2 border-b sticky top-0 z-50 items-center">
<a href="/"><img
src="/images/header/logo-big.png"
class="w-32"
alt="IBCornelsen - Logo"
/></a>
<div class="flex flex-row items-center gap-4">
<div class="dropdown dropdown-end dropdown-hover">
<div tabindex="0" role="button" class="btn btn-ghost rounded-btn btn-primary">Energieausweis Erstellen</div>
<ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow-md bg-base-100 rounded-box w-80 border">
<li class="text-lg"><a>Verbrauchsausweis Wohnen</a></li>
<li class="text-lg"><a>Verbrauchsausweis Gewerbe</a></li>
<li class="text-lg"><a>Bedarfsausweis Wohnen</a></li>
</ul>
</div>
<div class="dropdown dropdown-end dropdown-hover">
<div tabindex="0" role="button" class="btn btn-ghost rounded-btn btn-primary text-lg">Dropdown</div>
<ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="avatar">
<div class="w-12 rounded-full">
<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</div>
<ul tabindex="0" class="menu menu-md border dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="/profile">Profil</a></li>
<li><a href="/profile">Einstellungen</a></li>
<li><a href="/profile">Dashboard</a></li>
<div class="divider"></div>
<li><a href="/profile">Logout</a></li>
</ul>
</div>
</div>
</header>

7
src/layouts/Layout.astro
View File

@@ -8,6 +8,7 @@ import Header from "../components/Header.astro";
import SidebarLeft from "../components/SidebarLeft.astro";
import SidebarRight from "../components/SidebarRight.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";
import HeaderAlternative from "#components/HeaderAlternative.svelte";
export interface Props {
title: string;
@@ -92,13 +93,15 @@ const schema = JSON.stringify({
<body>
<Header />
<main
class="grid gap-6 p-6 grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full"
class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full"
>
<SidebarLeft />
<article>
<article class="w-full max-w-full">
<slot />
</article>
<div class="hidden lg:block">
<SidebarRight />
<div>
</main>
<Footer />
<NotificationWrapper client:load />

49
src/layouts/UserLayout.astro
View File

@@ -3,12 +3,13 @@ import i18next from "i18next";
import "../style/global.scss";
import "../../svelte-dialogs.config"
import "svelte-ripple-action/ripple.css"
import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro";
import SidebarLeft from "../components/SidebarLeft.astro";
import SidebarRight from "../components/SidebarRight.astro";
import DashboardHeader from "../components/Dashboard/DashboardHeader.svelte"
import DashboardSidebar from "../components/Dashboard/DashboardSidebar.svelte"
import { NotificationWrapper } from "@ibcornelsen/ui";
export interface Props {
title: string;
}
@@ -89,47 +90,11 @@ const schema = JSON.stringify({
</title>
</head>
<body class="flex flex-col min-h-screen">
<Header />
<main
class="p-6 w-full"
>
<body class="min-h-screen grid md:grid-cols-[300px_1fr]">
<DashboardSidebar client:load></DashboardSidebar>
<main class="p-8 overflow-auto h-screen bg-base-100">
<slot />
</main>
<Footer />
<NotificationWrapper client:load />
</body>
</html>
<style is:global>
article {
@apply rounded-lg w-full shadow-md border;
}
body {
min-height: 100vh;
}
.button {
@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center cursor-pointer;
color: #fff !important;
}
h3 {
@apply text-xl font-medium mt-6 mb-4;
}
input {
@apply py-1.5 px-4 w-full rounded-lg outline-none text-lg text-slate-700 border bg-gray-50 transition-colors;
}
input:hover,
input:focus {
@apply bg-gray-100;
}
label {
@apply text-base font-semibold;
}
</style>

113
src/modules/UserModule.svelte
View File

@@ -1,22 +1,107 @@
<script lang="ts">
import { BenutzerClient } from "#components/Ausweis/types";
import { Enums } from "@ibcornelsen/database/client";
import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
export let user: BenutzerClient;
</script>
<div class="flex flex-row justify-between">
<div>
<h1 class="text-4xl">Willkommen zurück <strong>{user.email}</strong></h1>
<h1 class="text-4xl font-medium my-8">Wichtiges</h1>
<div class="flex flex-row gap-4">
<div class="card w-96 card-bordered bg-base-200 border-base-300">
<div class="card-body">
<div class="badge badge-warning font-semibold">Warnung!</div>
<h2 class="card-title">Gebäudebilder</h2>
<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
<div class="card-actions justify-end">
<a class="btn btn-primary">Beheben</a>
</div>
</div>
</div>
<div class="card w-96 card-bordered bg-base-200 border-base-300">
<div class="card-body">
<div class="badge badge-error font-semibold">Fehler!</div>
<h2 class="card-title">Daten</h2>
<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
<div class="card-actions justify-end">
<a class="btn btn-primary">Beheben</a>
</div>
</div>
<div class="flex flex-col gap-2">
<button class="button">Account Details Ändern</button>
<button class="button">Ausloggen</button>
{#if user.rolle === Enums.BenutzerRolle.ADMIN}
<button class="button">Impersonate User</button>
<button class="button">Dashboard</button>
<button class="button">Ausweise Prüfen</button>
<button class="button">Angebotsanfragen einsehen</button>
{/if}
</div>
</div>
<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
<figure class="lg:w-1/2"><img src="https://www.houseanddecors.com/wp-content/uploads/2019/01/modern-house-04.jpg" class="object-cover w-full h-full" alt="Album"/></figure>
<div class="card-body lg:w-1/2">
<div class="flex flex-row flex-wrap gap-2">
<div class="badge badge-accent font-semibold">Verbrauchsausweis</div>
<div class="badge badge-success font-semibold">Ausgestellt</div>
</div>
<h2 class="card-title">Curslacker Deich 170, 21039</h2>
<div class="mb-4 flex flex-row items-center gap-4">
<progress class="progress w-full" value="54" max="100"></progress>
<span class="text-sm font-semibold text-base-content">54%</span>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-row justify-between">
<span>Energieverbrauch</span>
<span class="font-bold text-base-content">215kWh/A</span>
</div>
<div class="flex flex-row justify-between">
<span>CO2 Ausstoß</span>
<span class="font-bold text-base-content">N/A</span>
</div>
<div class="flex flex-row justify-between">
<span>Erstellungsdatum</span>
<span class="font-bold text-base-content">22.01.2023</span>
</div>
<div class="flex flex-row justify-between">
<span>Baujahr</span>
<span class="font-bold text-base-content">1962 / 1985</span>
</div>
<div class="flex flex-row justify-between">
<span>Wohnfläche</span>
<span class="font-bold text-base-content">112m²</span>
</div>
</div>
<div class="card-actions justify-end mt-auto">
<a class="btn btn-primary">Als Vorlage benutzen</a>
<a class="btn btn-primary">Bearbeiten</a>
<button class="btn btn-primary" on:click={() => hilfeModal.showModal()}>Hilfe Erhalten</button>
<dialog id="hilfeModal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-xl mb-4">Hilfe Anfordern</h3>
<p>Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres Ausweises?</p>
<p>In unserem <a href="/helpdesk">Helpdesk</a> finden sie antworten auf häufig gestellte Fragen.</p>
<p>Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch unter <a href="tel:040-220-31-87">040 220 31 87</a> an oder <a href="mailto:moritz.utcke@gmx.de">schreiben sie uns eine email</a>.</p>
<p>Wenn wir telefonisch nicht erreichbar sind, können sie uns auch direkt hier eine Nachricht hinterlassen.</p>
<form class="my-4">
<textarea class="textarea textarea-bordered" placeholder="Ihre Nachricht..." cols="10" rows="5"></textarea>
<button class="btn btn-primary">Nachricht Abschicken</button>
</form>
<div class="modal-action">
<form method="dialog">
<button class="btn">Schließen</button>
</form>
</div>
</div>
</dialog>
<button class="btn btn-ghost" title="PDF Herunterladen"><svg width="22" height="22" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button>
</div>
</div>
</div>
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
</div>
<div class="flex items-center justify-center mt-12">
<div class="join">
<button class="join-item btn btn-ghost shadow-none">1</button>
<button class="join-item btn btn-ghost shadow-none">2</button>
<button class="join-item btn btn-ghost shadow-none">3</button>
<button class="join-item btn btn-ghost shadow-none">4</button>
</div>
</div>

14
src/pages/index.astro
View File

@@ -76,9 +76,10 @@ import FeatureCard from "#components/FeatureCard.svelte";
<hr />
<div
style="border-left: 5px solid #f5b68c; border-right: 5px solid #f5b68c;"
class="px-4"
>
<ul id="start_ul">
<li>
<p>
Der verbrauchsbasierte Energieausweis wird als <a
title="Verbrauchsausweis"
href="/energieausweis-erstellen/verbrauchsausweis-wohnen"
@@ -91,8 +92,8 @@ import FeatureCard from "#components/FeatureCard.svelte";
>Energieausweis online erstellen</a
>
<hr />
</li>
<li>
</p>
<p>
Der bedarfsbasierte Energieausweis wird als <a
title="Bedarfsausweis"
href="/bedarfsausweis/"><strong>Bedarfsausweis</strong></a
@@ -103,11 +104,10 @@ import FeatureCard from "#components/FeatureCard.svelte";
href="/energieausweis-erstellen/bedarfsausweis-erstellen"
>Energieausweis online erstellen</a
>
</li>
</ul>
</p>
</div>
<hr />
<div class="grid grid-cols-3 gap-4">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<FeatureCard heading="Verbrauchsausweis Wohngebäude" price={45} href="/energieausweis-erstellen/verbrauchsausweis-wohnen">
<div class="rpt_feature">Unsere Leistungen:</div>
<div class="rpt_feature">Prüfung durch Diplom Ingenieur</div>

2
src/pages/user/index.astro
View File

@@ -14,5 +14,5 @@ const user = await prisma.benutzer.findUnique({
---
<UserLayout title="Dashboard">
<UserModule user={user}></UserModule>
<UserModule user={user} client:load></UserModule>
</UserLayout>

118
src/style/576.scss
View File

@@ -83,101 +83,6 @@ footer a {
/*- Branding: -*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.headmargin {
margin-bottom: 40px;
display: block;
width: 100%;
min-height: 40px;
padding: 0 0 10px 0;
}
.headerBackgroundImage {
position: absolute;
top: 0;
height: 110px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.branding {
display: block;
margin-right: auto;
margin-left: auto;
min-height: 40px;
max-width: 90%;
position: relative;
padding: 30px 0px;
height: auto;
}
.header-logo {
position: absolute;
top: 10px;
right: 0px;
left: auto;
width: 220px;
cursor: pointer;
}
.nav-head {
background-color: #444f94;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 4%;
}
.headerButton {
width: auto;
font-size: 14px;
font-weight: 500;
color: rgb(255, 255, 255);
height: 40px;
max-height: 100%;
padding-bottom: 0px;
padding-top: 0px;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #444f94;
}
header a {
display: block;
padding: 8px 8px;
text-align: center;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.headerButton:hover {
color: #ffffff;
text-decoration: none;
background-color: #ff7d26;
}
.headerButton.active {
background-color: rgb(58, 74, 181);
}
/*-----------------------------------------------------------------*/
@@ -1010,11 +915,6 @@ content > *:nth-child(3) {
-ms-grid-column: 5;
}
#start_ul {
padding: 0 2em 0 1em;
margin-bottom: 0;
}
.rpt_plan img {
width: 50%;
margin: 15px auto;
@@ -1133,18 +1033,6 @@ content > *:nth-child(3) {
align-items: center;
}
#start_ul li::before,
#start_ul_1 li::before {
content: "";
left: 0;
top: 8px;
width: 7px;
height: 7px;
background-color: #ddd;
position: absolute;
border-radius: 0.1em;
}
.widget_nav ul li {
margin: 0;
padding: 0;
@@ -1199,7 +1087,7 @@ content > *:nth-child(3) {
}
/* NOTE: */
ul {
article ul {
margin-left: 1em;
list-style: disc;
font-weight: 400;
@@ -1207,7 +1095,7 @@ ul {
color: #212529;
}
ul li {
article ul li {
padding-left: 1.2em;
list-style-type: none;
position: relative;
@@ -1216,7 +1104,7 @@ ul li {
margin-bottom: 5px !important;
}
ul li::before {
article ul li::before {
content: "";
width: 10px;
height: 10px;

97
src/style/992.scss
View File

@@ -88,104 +88,7 @@
/*- Branding: -*/
/*- (min-width: 992px) and (max-width: 10000px) -*/
/*-----------------------------------------------------------------*/
.headmargin {
margin-bottom: 110px;
display: block;
width: 100%;
min-height: 100px;
padding: 0 0 10px 0;
}
.headerBackgroundImage {
position: absolute;
top: 0;
height: 210px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.branding {
display: block;
margin-right: auto;
margin-left: auto;
min-height: 40px;
max-width: 96%;
position: relative;
padding: 30px 0px;
height: auto;
}
.header-logo {
position: absolute;
top: 30px;
right: 0px;
left: auto;
width: 500px;
cursor: pointer;
}
.nav-head {
background-color: rgb(255, 125, 38);
display: flex;
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 1.2%;
}
.headerButton {
width: auto;
font-size: 20px;
font-weight: 500;
color: rgb(255, 255, 255);
background-color: rgb(255, 125, 38);
height: 40px;
max-height: 100%;
padding-bottom: 0px;
padding-top: 0px;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header a {
display: block;
padding: 8px 15px;
text-align: center;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.headerButton:hover {
color: #ffffff;
text-decoration: none;
background-color: rgb(58, 74, 181);
}
.headerButton.active {
background-color: rgb(58, 74, 181);
}
.hamburger_menu {
display: none !important;

2
src/style/global.scss
View File

@@ -17,7 +17,7 @@ article hr {
}
article {
@apply px-8 py-6 w-full relative bg-white;
@apply px-6 md:px-8 py-6 w-full relative bg-white;
}
article h1 {

116
tailwind.config.cjs
View File

@@ -2,21 +2,94 @@
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", "./node_modules/@ibcornelsen/ui/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
darkMode: "class",
plugins: [require("daisyui")],
plugins: [require("daisyui"), require("@tailwindcss/typography")],
daisyui: {
themes: [{light: {
primary: "rgb(255, 125, 38)",
secondary: "rgb(68, 79, 148)",
"gray-primary": "rgb(146, 151, 153)",
bg: "white",
"status-error": "red",
"status-success": "green",
themes: [{
light: {
'primary': '#ff7d26',
'primary-focus': '#ec6a13',
'primary-content': '#ffffff',
'secondary': '#444f94',
'secondary-focus': '#2f397f',
'secondary-content': '#ffffff',
'accent': '#7b37cd',
'accent-focus': '#5f25a7',
'accent-content': '#ffffff',
'neutral': '#3b424e',
'neutral-focus': '#2a2e37',
'neutral-content': '#ffffff',
'base-100': '#ffffff',
'base-200': '#f9fafb',
'base-300': '#ced3d9',
'base-content': '#1e2734',
'info': '#0689f4',
'success': '#04b964',
'warning': '#f49d1a',
"warning-content": "#ffffff",
'error': '#e43f3f',
"error-content": "#ffffff",
'--rounded-box': '1rem',
'--rounded-btn': '.5rem',
'--rounded-badge': '1.9rem',
'--animation-btn': '.25s',
'--animation-input': '.2s',
'--btn-text-case': 'normal',
'--navbar-padding': '.5rem',
'--border-btn': '1px',
"pdf-yellow-bright": "#f3cb00",
"pdf-yellow-light": "#fff6ca",
neutral: "#000",
"neutral-content": "#fff",
"base-content": "#000000"
}}],
},
'dark': {
'primary': '#ff7d26',
'primary-focus': '#ec6a13',
'primary-content': '#ffffff',
'secondary': '#444f94',
'secondary-focus': '#2f397f',
'secondary-content': '#ffffff',
'accent': '#8c45e3',
'accent-focus': '#7532c8',
'accent-content': '#ffffff',
'neutral': '#2a2e37',
'neutral-focus': '#16181d',
'neutral-content': '#ffffff',
'base-100': '#3b424e',
'base-200': '#2a2e37',
'base-300': '#16181d',
'base-content': '#ebecf0',
'info': '#0689f4',
'success': '#04b964',
'warning': '#f49d1a',
"warning-content": "#ffffff",
'error': '#ff6b6b',
"error-content": "#ffffff",
"pdf-yellow-bright": "#f3cb00",
"pdf-yellow-light": "#fff6ca",
'--rounded-box': '1rem',
'--rounded-btn': '.5rem',
'--rounded-badge': '1.9rem',
'--animation-btn': '.25s',
'--animation-input': '.2s',
'--btn-text-case': 'uppercase',
'--navbar-padding': '.5rem',
'--border-btn': '1px',
}
}, ],
darkTheme: "dark", // name of one of the included themes for dark mode
base: true, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
@@ -24,5 +97,22 @@ module.exports = {
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
themeRoot: ":root", // The element that receives theme color CSS variables
}
},
fontSize: {
sm: '0.750rem',
base: '1rem',
xl: '1.333rem',
'2xl': '1.777rem',
'3xl': '2.369rem',
'4xl': '3.158rem',
'5xl': '4.210rem',
},
fontFamily: {
heading: 'Poppins',
body: 'Poppins',
},
fontWeight: {
normal: '400',
bold: '700',
},
};