ClaudeandClaude Opus 5.5
20bf5afe28
Auf dem Handy (unter 880 px und Handys quer) sieht der Kundenbereich aus wie eine App; der Desktop bleibt pixelgleich. - Kopfzeile als App-Leiste: Logo, beim Scrollen der Seitentitel, Avatar - Navigation als Tab-Leiste unten mit Symbolen und Zaehlern; neuer Tab "Wartung" mit der Abo-Karte, Stundenkonto/Bestellung und Uebernahmegutschrift als Unterseiten mit Zurueck (auch Android-Geste) - Konto als Bottom-Sheet (Ansprechpartner, Vertraege kuendigen/widerrufen, Rechtliches, Abmelden), am Desktop als Popover unter dem Avatar - Rechnungen als Karten, Fortschritt als Zeitleiste, Chat fuellt den Bildschirm; bei offener Tastatur verschwindet die Tab-Leiste (kommt auch nach der Android-Zurueck-Geste wieder) - Installierbar: Manifest, App-Icons (WEBklar-Logo), Favicon, Hinweis "Zum Home-Bildschirm"; Service Worker nur fuer die Offline-Seite, Kundendaten werden nicht zwischengespeichert - Installierte App: Kuendigen/Widerrufen mit Link zurueck in den Kundenbereich (nur dort sichtbar, Texte unveraendert); Login-Links zu Bedingungen/Datenschutz/Impressum oeffnen wie im Dashboard ein neues Fenster - Login mit App-Icon und Abstaenden fuer Statusleiste/Home-Balken - Hinweise "in der Seitenleiste" haben auf dem Handy eine eigene Fassung Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
636 lines
11 KiB
CSS
636 lines
11 KiB
CSS
/* Webklar Portal – gemeinsames Theme (Login + Dashboard) */
|
||
|
||
.portal-page,
|
||
.login-page {
|
||
--primary: #9d3dfe;
|
||
--error: #f9191d;
|
||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--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;
|
||
--input-radius: 25px;
|
||
}
|
||
}
|
||
|
||
.portal-page:not(.dashboard-page):not(.login-page)::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background:
|
||
radial-gradient(circle at 50% 45%, rgba(157, 61, 254, 0.35) 0%, transparent 55%),
|
||
radial-gradient(ellipse 80% 50% at 50% 50%, #1a1030 0%, #0a0a0a 70%);
|
||
}
|
||
|
||
.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;
|
||
left: 0;
|
||
z-index: 2;
|
||
width: 100%;
|
||
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 {
|
||
text-decoration: none;
|
||
color: #fff;
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
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;
|
||
min-height: 100svh;
|
||
padding: 60px 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.login-panel {
|
||
padding: 164px 40px;
|
||
}
|
||
}
|
||
|
||
.AuthForm {
|
||
width: 100%;
|
||
max-width: 420px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.AuthForm .login-section {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.auth-label {
|
||
text-align: center;
|
||
margin: 0 0 50px;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
line-height: 1;
|
||
color: #fff;
|
||
}
|
||
|
||
@media (min-width: 62em) {
|
||
.auth-label {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
.login-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--input-gap);
|
||
}
|
||
|
||
.auth-input {
|
||
color: #fff;
|
||
background-color: var(--glass);
|
||
padding-inline: 40px;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border-radius: var(--input-radius);
|
||
width: 100%;
|
||
height: var(--input-size);
|
||
border: none;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
font-size: 1rem;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.auth-input::placeholder {
|
||
color: #fff;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.auth-input:focus {
|
||
outline: 2px solid rgba(157, 61, 254, 0.6);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.auth-input.invalid {
|
||
border: 2px solid var(--error);
|
||
}
|
||
|
||
.login-form .error,
|
||
.portal-page .error {
|
||
text-align: center;
|
||
margin: 0;
|
||
font-size: 0.875rem;
|
||
color: #fca5a5;
|
||
}
|
||
|
||
.auth-button {
|
||
width: 100%;
|
||
height: var(--input-size);
|
||
margin-top: var(--input-gap);
|
||
border: none;
|
||
border-radius: 32px;
|
||
background: #fff;
|
||
color: #1c1c1c;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
position: relative;
|
||
transition:
|
||
color 0.25s var(--ease-out),
|
||
background-color 0.25s var(--ease-out),
|
||
transform 0.25s var(--ease-out);
|
||
}
|
||
|
||
.auth-button svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.auth-button:hover:not(:disabled) {
|
||
background: #1c1c1c;
|
||
color: #fff;
|
||
}
|
||
|
||
.auth-button:active:not(:disabled) {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.auth-button:disabled {
|
||
opacity: 0.65;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.auth-button.is-loading .button-label {
|
||
opacity: 0;
|
||
}
|
||
|
||
.auth-button .loading-spinner {
|
||
display: none;
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.auth-button.is-loading .loading-spinner {
|
||
display: block;
|
||
position: absolute;
|
||
}
|
||
|
||
.loading-spinner {
|
||
animation: login-spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes login-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.login-hint {
|
||
text-align: center;
|
||
margin: 50px 0 0;
|
||
font-size: 0.875rem;
|
||
line-height: 1.5;
|
||
color: rgba(255, 255, 255, 0.55);
|
||
max-width: 420px;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.login-panel {
|
||
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;
|
||
}
|
||
}
|
||
|
||
/* Login als App (Handy): App-Icon ueber dem Formular, Abstand zu Statusleiste und Home-Balken */
|
||
.login-app-brand {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 48em) {
|
||
.login-header {
|
||
padding-top: calc(24px + env(safe-area-inset-top));
|
||
}
|
||
|
||
.login-panel {
|
||
padding-top: calc(88px + env(safe-area-inset-top));
|
||
padding-bottom: calc(40px + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.login-app-brand {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin: 0 0 40px;
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.login-app-brand img {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 10px 30px rgba(157, 61, 254, 0.35);
|
||
}
|
||
|
||
.auth-label {
|
||
margin-bottom: 28px;
|
||
}
|
||
}
|