From bbcc5dc05e272074d6b348e173cb8471ce5a3dd2 Mon Sep 17 00:00:00 2001
From: Kenso Grimm <Kenso@webklar.com>
Date: Mon, 25 May 2026 16:47:15 +0200
Subject: [PATCH] design 2.0

---
 public/dashboard.html |  29 ++--
 public/login.css      | 352 ++++++++++++++++++++++++++++++++++++++++--
 public/login.html     |  12 +-
 3 files changed, 367 insertions(+), 26 deletions(-)
diff --git a/public/dashboard.html b/public/dashboard.html
index 692019b..25d1560 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -4,22 +4,31 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Meine Projekte – Webklar Kundenbereich</title>
-  <link rel="stylesheet" href="/style.css">
+  <link rel="stylesheet" href="/login.css">
 </head>
-<body>
-  <header>
-    <h1>Meine Website-Projekte</h1>
-    <div>
-      <span class="meta" id="customer-meta"></span>
-      <button type="button" class="link-btn" id="logout-btn">Abmelden</button>
+<body class="portal-page dashboard-page">
+  <div class="dot-background" aria-hidden="true">
+    <div class="dot-pattern"></div>
+    <div class="dot-fade"></div>
+  </div>
+
+  <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>
   </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="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>
-    <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>
+
   <script src="/app.js"></script>
   <script>
     initDashboardPage();
diff --git a/public/login.css b/public/login.css
index 63f12ee..8395a51 100644
--- a/public/login.css
+++ b/public/login.css
@@ -1,5 +1,6 @@
-/* Login-Seite – angelehnt an Fandom Sign-in (Drawer + AuthForm) */
+/* Webklar Portal – gemeinsames Theme (Login + Dashboard) */
 
+.portal-page,
 .login-page {
   --primary: #9d3dfe;
   --error: #f9191d;
@@ -7,15 +8,19 @@
   --input-size: 50px;
   --input-gap: 10px;
   --input-radius: 20px;
+  --glass: rgba(255, 255, 255, 0.25);
+  --glass-border: rgba(255, 255, 255, 0.12);
   min-height: 100svh;
   margin: 0;
   background: #0a0a0a;
   color: #fff;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow-x: hidden;
+  line-height: 1.5;
 }
 
 @media (min-width: 62em) {
+  .portal-page,
   .login-page {
     --input-size: 64px;
     --input-gap: 5px;
@@ -23,7 +28,7 @@
   }
 }
 
-.login-page::before {
+.portal-page:not(.dashboard-page):not(.login-page)::before {
   content: '';
   position: fixed;
   inset: 0;
@@ -34,13 +39,155 @@
     radial-gradient(ellipse 80% 50% at 50% 50%, #1a1030 0%, #0a0a0a 70%);
 }
 
-.login-bg {
+.portal-bg {
   position: fixed;
   inset: 0;
   z-index: 0;
   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 {
   position: fixed;
   top: 0;
@@ -50,17 +197,27 @@
   padding: 24px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  box-sizing: border-box;
   pointer-events: none;
 }
 
+.portal-header > *,
+.login-header > * {
+  pointer-events: auto;
+}
+
 @media (min-width: 62em) {
+  .portal-header,
   .login-header {
     padding: 42px 50px;
   }
 }
 
+.portal-logo,
 .login-logo {
-  pointer-events: auto;
   text-decoration: none;
   color: #fff;
   font-size: 1.125rem;
@@ -70,20 +227,92 @@
   transition: color 0.25s var(--ease-out);
 }
 
+.portal-logo:hover,
+.portal-logo:focus-visible,
 .login-logo:hover,
 .login-logo:focus-visible {
   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 {
   position: relative;
   z-index: 1;
   min-height: 100svh;
+  box-sizing: border-box;
+}
+
+.login-main {
   display: flex;
   justify-content: flex-end;
   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 {
   width: 100%;
   max-width: 730px;
@@ -136,7 +365,7 @@
 
 .auth-input {
   color: #fff;
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(--glass);
   padding-inline: 40px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
@@ -164,10 +393,12 @@
   border: 2px solid var(--error);
 }
 
-.login-form .error {
+.login-form .error,
+.portal-page .error {
   text-align: center;
   margin: 0;
   font-size: 0.875rem;
+  color: #fca5a5;
 }
 
 .auth-button {
@@ -186,6 +417,7 @@
   align-items: center;
   justify-content: center;
   gap: 10px;
+  position: relative;
   transition:
     color 0.25s var(--ease-out),
     background-color 0.25s var(--ease-out),
@@ -227,10 +459,6 @@
   position: absolute;
 }
 
-.auth-button {
-  position: relative;
-}
-
 .loading-spinner {
   animation: login-spin 1s linear infinite;
 }
@@ -251,10 +479,99 @@
   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;
 }
 
+/* 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) {
   .login-main {
     justify-content: center;
@@ -264,4 +581,17 @@
     max-width: none;
     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;
+  }
 }
diff --git a/public/login.html b/public/login.html
index e03c4b6..a1897df 100644
--- a/public/login.html
+++ b/public/login.html
@@ -6,16 +6,18 @@
   <title>Anmelden – Webklar Kundenbereich</title>
   <link rel="stylesheet" href="/login.css">
 </head>
-<body class="login-page">
-  <div class="login-bg" aria-hidden="true"></div>
+<body class="portal-page login-page">
+  <div class="aurora-background" aria-hidden="true">
+    <div class="aurora-beams"></div>
+  </div>
 
-  <header class="login-header">
-    <a class="login-logo" href="/login.html">Webklar</a>
+  <header class="portal-header login-header">
+    <a class="portal-logo login-logo" href="/login.html">Webklar</a>
   </header>
 
   <main class="login-main">
     <div class="login-panel">
-      <div class="AuthForm">
+      <div class="AuthForm login-content-reveal">
         <div class="login-section">
           <p class="auth-label">Anmelden</p>
           <form id="login-form" class="login-form" novalidate>
