design 2.0
This commit is contained in:
@@ -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();
|
||||
|
||||
352
public/login.css
352
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user