style: Keyfarbe #051e23 + Pfandlogo einbauen
- Tailwind brand-Palette neu verankert: #051e23 = brand-900 (Keyfarbe), brand-50..950 als dunkles Teal-Spektrum (warm) - btn-primary: bg-brand-900 hover:bg-brand-800 (statt indigo) - input/badge: focus/text auf brand-700/900 - public/pfandlogo.jpg eingebaut als: - Favicon + Apple-Touch-Icon - Login (zentral, statt P-Box) - TopNav-Header (statt P-Box) - SuperAdmin-Header (statt P-Box) - index.html theme-color #051e23 - manifest.json theme_color #051e23 + Logo als zusaetzliches Icon
This commit is contained in:
christian
@@ -1,8 +1,7 @@
|
||||
# Dockerfile für statisches React-Frontend mit Nginx
|
||||
FROM node:20 AS build
|
||||
FROM node:20-alpine AS build
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY package.json ./
|
||||
RUN npm install --no-audit --no-fund
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
|
||||
@@ -2,9 +2,10 @@
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/jpeg" href="/pfandlogo.jpg" />
|
||||
<link rel="apple-touch-icon" href="/pfandlogo.jpg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="theme-color" content="#4338ca" />
|
||||
<meta name="theme-color" content="#051e23" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
|
||||
@@ -4,9 +4,10 @@
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#f8fafc",
|
||||
"theme_color": "#4338ca",
|
||||
"theme_color": "#051e23",
|
||||
"description": "Digitale Pfand- und Tourenverwaltung",
|
||||
"icons": [
|
||||
{ "src": "pfandlogo.jpg", "sizes": "1000x1000", "type": "image/jpeg" },
|
||||
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
|
||||
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
|
||||
]
|
||||
|
||||
5721
package-lock.json
generated
5721
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -4,9 +4,10 @@
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#f8fafc",
|
||||
"theme_color": "#4338ca",
|
||||
"theme_color": "#051e23",
|
||||
"description": "Digitale Pfand- und Tourenverwaltung",
|
||||
"icons": [
|
||||
{ "src": "pfandlogo.jpg", "sizes": "1000x1000", "type": "image/jpeg" },
|
||||
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
|
||||
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
|
||||
]
|
||||
|
||||
BIN
public/pfandlogo.jpg
Normal file
BIN
public/pfandlogo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -27,10 +27,9 @@ export default function Login({ onLogin }) {
|
||||
<div className="min-h-screen flex items-center justify-center px-4 py-12 bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="text-center mb-6">
|
||||
<div className="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-brand-600 text-white text-xl font-bold mb-3 shadow-soft">
|
||||
P
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight text-slate-900">Pfandsystem</h1>
|
||||
<img src="/pfandlogo.jpg" alt="Pfandsystem"
|
||||
className="h-20 w-20 mx-auto mb-3 object-contain" />
|
||||
<h1 className="text-2xl font-bold tracking-tight text-brand-900">Pfandsystem</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Demo-Portal</p>
|
||||
</div>
|
||||
|
||||
@@ -57,7 +56,7 @@ export default function Login({ onLogin }) {
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" onClick={() => setShowTenant(true)}
|
||||
className="text-xs text-brand-600 hover:text-brand-700">
|
||||
className="text-xs text-brand-700 hover:text-brand-900">
|
||||
Mehrere Konten? Tenant-Kennung angeben
|
||||
</button>
|
||||
)}
|
||||
@@ -74,7 +73,7 @@ export default function Login({ onLogin }) {
|
||||
</form>
|
||||
|
||||
<p className="text-center text-xs text-slate-400 mt-6">
|
||||
Kein Zugang? Demo-Account anfragen unter <a className="text-brand-600 hover:underline" href="mailto:demo@dockly.de">demo@dockly.de</a>
|
||||
Kein Zugang? Demo-Account anfragen unter <a className="text-brand-700 hover:underline" href="mailto:demo@dockly.de">demo@dockly.de</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function TopNav({ user, activeView, setActiveView, onLogout }) {
|
||||
<header className="bg-white border-b border-slate-200 sticky top-0 z-30">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 flex items-center h-14">
|
||||
<div className="flex items-center gap-2 mr-6">
|
||||
<div className="h-8 w-8 rounded-lg bg-brand-600 text-white grid place-items-center font-bold">P</div>
|
||||
<img src="/pfandlogo.jpg" alt="" className="h-8 w-8 rounded-lg object-contain bg-white ring-1 ring-slate-200 p-0.5" />
|
||||
<span className="font-semibold text-slate-900">Pfandsystem</span>
|
||||
{user.tenant_typ === 'demo' && (
|
||||
<span className="badge-amber ml-2">Demo</span>
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function SuperAdmin({ user, onLogout }) {
|
||||
<header className="bg-white border-b border-slate-200 sticky top-0 z-30">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<div className="h-8 w-8 rounded-lg bg-slate-900 text-white grid place-items-center font-bold">P</div>
|
||||
<img src="/pfandlogo.jpg" alt="" className="h-8 w-8 rounded-lg object-contain bg-white ring-1 ring-slate-200 p-0.5" />
|
||||
<span className="font-semibold">Pfandsystem · SuperAdmin</span>
|
||||
</div>
|
||||
<div className="text-sm text-slate-500 mr-3 hidden sm:block">{user.email}</div>
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
|
||||
text-sm font-semibold shadow-sm transition
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
|
||||
focus-visible:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
focus-visible:ring-brand-700 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
.btn-primary { @apply btn bg-brand-600 text-white hover:bg-brand-700; }
|
||||
.btn-primary { @apply btn bg-brand-900 text-white hover:bg-brand-800; }
|
||||
.btn-secondary { @apply btn bg-white text-slate-700 ring-1 ring-slate-300 hover:bg-slate-50; }
|
||||
.btn-danger { @apply btn bg-rose-600 text-white hover:bg-rose-700; }
|
||||
.btn-ghost { @apply btn bg-transparent text-slate-600 hover:bg-slate-100 shadow-none; }
|
||||
@@ -22,7 +22,7 @@
|
||||
.input {
|
||||
@apply block w-full rounded-lg border-0 bg-white px-3.5 py-2.5
|
||||
text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300
|
||||
placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-brand-600
|
||||
placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-brand-700
|
||||
sm:text-sm sm:leading-6 disabled:bg-slate-50 disabled:text-slate-500;
|
||||
}
|
||||
.label { @apply block text-sm font-medium text-slate-700 mb-1.5; }
|
||||
@@ -39,5 +39,9 @@
|
||||
.badge-amber { @apply badge bg-amber-50 text-amber-800 ring-amber-200; }
|
||||
.badge-rose { @apply badge bg-rose-50 text-rose-700 ring-rose-200; }
|
||||
.badge-slate { @apply badge bg-slate-100 text-slate-700 ring-slate-200; }
|
||||
.badge-brand { @apply badge bg-brand-50 text-brand-700 ring-brand-200; }
|
||||
.badge-brand { @apply badge bg-brand-50 text-brand-900 ring-brand-200; }
|
||||
|
||||
.brand-logo {
|
||||
@apply h-9 w-9 rounded-lg object-contain bg-white ring-1 ring-slate-200 p-1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,17 +7,19 @@ export default {
|
||||
sans: ['Inter', 'system-ui', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
// Dark Teal Brand - anchored on user keyfarbe #051e23 (= brand-900)
|
||||
brand: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#6366f1',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81',
|
||||
50: '#f1f7f8',
|
||||
100: '#dde9eb',
|
||||
200: '#b9d2d7',
|
||||
300: '#8eb3bb',
|
||||
400: '#5f8e98',
|
||||
500: '#3f6e78',
|
||||
600: '#285860',
|
||||
700: '#1a4148',
|
||||
800: '#102e34',
|
||||
900: '#051e23',
|
||||
950: '#03161a',
|
||||
}
|
||||
},
|
||||
boxShadow: {
|
||||
|
||||
Reference in New Issue
Block a user