knso/Webklar-Kundenbereich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design 2.0

Browse Source
This commit is contained in:
Kenso Grimm
2026-05-25 16:47:15 +02:00
parent d83bc33fd9
commit bbcc5dc05e
3 changed files with 367 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/dashboard.html
View File

@@ -4,22 +4,31 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine Projekte – Webklar Kundenbereich</title> <title>Meine Projekte – Webklar Kundenbereich</title>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/login.css">
</head> </head>
<body> <body class="portal-page dashboard-page">
<header> <div class="dot-background" aria-hidden="true">
<h1>Meine Website-Projekte</h1> <div class="dot-pattern"></div>
<div> <div class="dot-fade"></div>
<span class="meta" id="customer-meta"></span> </div>
<button type="button" class="link-btn" id="logout-btn">Abmelden</button>
<header class="portal-header">
<a class="portal-logo" href="/dashboard.html">Webklar</a>
<div class="portal-header-actions">
<span class="portal-meta" id="customer-meta"></span>
<button type="button" class="portal-btn-outline" id="logout-btn">Abmelden</button>
</div> </div>
</header> </header>
<main>
<main class="portal-main dashboard-content-reveal">
<h1 class="portal-title">Meine Website-Projekte</h1>
<p id="load-error" class="error hidden"></p> <p id="load-error" class="error hidden"></p>
<p id="loading" class="muted">Projekte werden geladen…</p> <p id="loading" class="muted portal-status">Projekte werden geladen…</p>
<ul id="projects" class="projects hidden"></ul> <ul id="projects" class="projects hidden"></ul>
<p id="empty" class="card hidden">Noch keine Website-Projekte zugewiesen.</p> <p id="empty" class="portal-card hidden portal-status">Noch keine Website-Projekte zugewiesen.</p>
</main> </main>
<script src="/app.js"></script> <script src="/app.js"></script>
<script> <script>
initDashboardPage(); initDashboardPage();

352
public/login.css
View File

@@ -1,5 +1,6 @@
/* Login-Seite – angelehnt an Fandom Sign-in (Drawer + AuthForm) */ /* Webklar Portal – gemeinsames Theme (Login + Dashboard) */
.portal-page,
.login-page { .login-page {
--primary: #9d3dfe; --primary: #9d3dfe;
--error: #f9191d; --error: #f9191d;
@@ -7,15 +8,19 @@
--input-size: 50px; --input-size: 50px;
--input-gap: 10px; --input-gap: 10px;
--input-radius: 20px; --input-radius: 20px;
--glass: rgba(255, 255, 255, 0.25);
--glass-border: rgba(255, 255, 255, 0.12);
min-height: 100svh; min-height: 100svh;
margin: 0; margin: 0;
background: #0a0a0a; background: #0a0a0a;
color: #fff; color: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow-x: hidden; overflow-x: hidden;
line-height: 1.5;
} }
@media (min-width: 62em) { @media (min-width: 62em) {
.portal-page,
.login-page { .login-page {
--input-size: 64px; --input-size: 64px;
--input-gap: 5px; --input-gap: 5px;
@@ -23,7 +28,7 @@
} }
} }
.login-page::before { .portal-page:not(.dashboard-page):not(.login-page)::before {
content: ''; content: '';
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -34,13 +39,155 @@
radial-gradient(ellipse 80% 50% at 50% 50%, #1a1030 0%, #0a0a0a 70%); radial-gradient(ellipse 80% 50% at 50% 50%, #1a1030 0%, #0a0a0a 70%);
} }
.login-bg { .portal-bg {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 0; z-index: 0;
background: #0a0a0a; background: #0a0a0a;
} }
/* Aceternity Dot Background (CSS-Port für Dashboard) */
.dashboard-page {
background: #000;
}
.dashboard-page::before {
display: none;
}
.dot-background {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
background: #000;
pointer-events: none;
}
.dot-pattern {
position: absolute;
inset: 0;
background-size: 20px 20px;
background-image: radial-gradient(#404040 1px, transparent 1px);
}
.dot-fade {
position: absolute;
inset: 0;
pointer-events: none;
background: #000;
-webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, #000);
mask-image: radial-gradient(ellipse at center, transparent 20%, #000);
}
.dashboard-content-reveal {
animation: login-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.dashboard-content-reveal {
animation: none;
}
}
/* Aceternity Aurora Background (CSS-Port für Vanilla HTML) */
.login-page {
background: #09090b;
}
.aurora-background {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
background: #09090b;
pointer-events: none;
}
.aurora-beams {
position: absolute;
inset: -10px;
opacity: 0.55;
filter: blur(12px);
will-change: transform, background-position;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6;
--indigo-300: #a5b4fc;
--violet-200: #ddd6fe;
--aurora: repeating-linear-gradient(
100deg,
var(--blue-500) 10%,
var(--indigo-300) 15%,
var(--blue-300) 20%,
var(--violet-200) 25%,
var(--blue-400) 30%
);
--dark-gradient: repeating-linear-gradient(
100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%
);
background-image: var(--dark-gradient), var(--aurora);
background-size: 300% 200%, 300% 200%;
background-position: 50% 50%, 50% 50%;
-webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
animation: aurora-drift 60s linear infinite;
}
.aurora-beams::after {
content: '';
position: absolute;
inset: 0;
background-image: var(--dark-gradient), var(--aurora);
background-size: 200% 100%, 200% 100%;
background-attachment: fixed;
background-position: 50% 50%, 50% 50%;
animation: aurora-drift 60s linear infinite reverse;
}
@keyframes aurora-drift {
0% {
background-position: 50% 50%, 50% 50%;
}
100% {
background-position: 350% 50%, 350% 50%;
}
}
.login-content-reveal {
animation: login-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes login-reveal {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.aurora-beams,
.aurora-beams::after {
animation: none;
}
.login-content-reveal {
animation: none;
}
}
.portal-header,
.login-header { .login-header {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -50,17 +197,27 @@
padding: 24px; padding: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
box-sizing: border-box;
pointer-events: none; pointer-events: none;
} }
.portal-header > *,
.login-header > * {
pointer-events: auto;
}
@media (min-width: 62em) { @media (min-width: 62em) {
.portal-header,
.login-header { .login-header {
padding: 42px 50px; padding: 42px 50px;
} }
} }
.portal-logo,
.login-logo { .login-logo {
pointer-events: auto;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
font-size: 1.125rem; font-size: 1.125rem;
@@ -70,20 +227,92 @@
transition: color 0.25s var(--ease-out); transition: color 0.25s var(--ease-out);
} }
.portal-logo:hover,
.portal-logo:focus-visible,
.login-logo:hover, .login-logo:hover,
.login-logo:focus-visible { .login-logo:focus-visible {
color: var(--primary); color: var(--primary);
} }
.portal-header-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.portal-meta {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.65);
}
.portal-btn-outline {
border: 1px solid var(--glass-border);
background: var(--glass);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
border-radius: 32px;
padding: 10px 24px;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
transition:
color 0.25s var(--ease-out),
background-color 0.25s var(--ease-out),
border-color 0.25s var(--ease-out);
}
.portal-btn-outline:hover {
background: #fff;
color: #1c1c1c;
border-color: #fff;
}
.portal-main,
.login-main { .login-main {
position: relative; position: relative;
z-index: 1; z-index: 1;
min-height: 100svh; min-height: 100svh;
box-sizing: border-box;
}
.login-main {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: stretch; align-items: stretch;
} }
.portal-main {
padding: 100px 24px 60px;
max-width: 900px;
margin: 0 auto;
}
@media (min-width: 62em) {
.portal-main {
padding: 140px 50px 80px;
}
}
.portal-title {
margin: 0 0 2rem;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
color: #fff;
}
@media (min-width: 62em) {
.portal-title {
font-size: 1rem;
}
}
.login-panel { .login-panel {
width: 100%; width: 100%;
max-width: 730px; max-width: 730px;
@@ -136,7 +365,7 @@
.auth-input { .auth-input {
color: #fff; color: #fff;
background-color: rgba(255, 255, 255, 0.25); background-color: var(--glass);
padding-inline: 40px; padding-inline: 40px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
@@ -164,10 +393,12 @@
border: 2px solid var(--error); border: 2px solid var(--error);
} }
.login-form .error { .login-form .error,
.portal-page .error {
text-align: center; text-align: center;
margin: 0; margin: 0;
font-size: 0.875rem; font-size: 0.875rem;
color: #fca5a5;
} }
.auth-button { .auth-button {
@@ -186,6 +417,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
position: relative;
transition: transition:
color 0.25s var(--ease-out), color 0.25s var(--ease-out),
background-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out),
@@ -227,10 +459,6 @@
position: absolute; position: absolute;
} }
.auth-button {
position: relative;
}
.loading-spinner { .loading-spinner {
animation: login-spin 1s linear infinite; animation: login-spin 1s linear infinite;
} }
@@ -251,10 +479,99 @@
margin-inline: auto; margin-inline: auto;
} }
.login-page .hidden { .portal-page .muted {
color: rgba(255, 255, 255, 0.55);
font-size: 0.9rem;
}
.portal-page .hidden {
display: none !important; display: none !important;
} }
/* Dashboard */
.projects {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.project-card,
.portal-card {
background: var(--glass);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: var(--input-radius);
padding: 1.5rem 1.75rem;
margin: 0;
}
.project-card h2 {
margin: 0 0 1rem;
font-size: 1.125rem;
font-weight: 600;
color: #fff;
}
.project-card dl {
margin: 0;
display: grid;
grid-template-columns: 8rem 1fr;
gap: 0.35rem 1rem;
}
.project-card dt {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.project-card dd {
margin: 0;
color: #fff;
word-break: break-word;
}
.project-card a {
color: var(--primary);
text-decoration: none;
transition: opacity 0.2s var(--ease-out);
}
.project-card a:hover {
opacity: 0.85;
text-decoration: underline;
}
.feature-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.feature-tag {
background: rgba(157, 61, 254, 0.25);
border: 1px solid rgba(157, 61, 254, 0.45);
border-radius: 999px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff;
}
.portal-status {
text-align: center;
padding: 2rem 1rem;
}
@media (max-width: 48em) { @media (max-width: 48em) {
.login-main { .login-main {
justify-content: center; justify-content: center;
@@ -264,4 +581,17 @@
max-width: none; max-width: none;
padding: 100px 24px 60px; padding: 100px 24px 60px;
} }
.project-card dl {
grid-template-columns: 1fr;
gap: 0.15rem;
}
.project-card dt {
margin-top: 0.5rem;
}
.project-card dt:first-of-type {
margin-top: 0;
}
} }

12
public/login.html
View File

@@ -6,16 +6,18 @@
<title>Anmelden – Webklar Kundenbereich</title> <title>Anmelden – Webklar Kundenbereich</title>
<link rel="stylesheet" href="/login.css"> <link rel="stylesheet" href="/login.css">
</head> </head>
<body class="login-page"> <body class="portal-page login-page">
<div class="login-bg" aria-hidden="true"></div> <div class="aurora-background" aria-hidden="true">
<div class="aurora-beams"></div>
</div>
<header class="login-header"> <header class="portal-header login-header">
<a class="login-logo" href="/login.html">Webklar</a> <a class="portal-logo login-logo" href="/login.html">Webklar</a>
</header> </header>
<main class="login-main"> <main class="login-main">
<div class="login-panel"> <div class="login-panel">
<div class="AuthForm"> <div class="AuthForm login-content-reveal">
<div class="login-section"> <div class="login-section">
<p class="auth-label">Anmelden</p> <p class="auth-label">Anmelden</p>
<form id="login-form" class="login-form" novalidate> <form id="login-form" class="login-form" novalidate>