From 0faa144e4f254c059fbd21aa165aa31638ec685c Mon Sep 17 00:00:00 2001 From: rxf Date: Thu, 12 Mar 2026 09:11:43 +0100 Subject: [PATCH] nun Ohne Tailwind --- app/globals.css | 185 ++++++++++- app/layout.tsx | 15 +- app/login/page.tsx | 28 +- components/AppLayout.tsx | 18 +- components/LogoutButton.tsx | 2 +- package-lock.json | 644 +----------------------------------- package.json | 2 - postcss.config.mjs | 4 +- 8 files changed, 204 insertions(+), 694 deletions(-) diff --git a/app/globals.css b/app/globals.css index 7b16ff2..f109252 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,22 +1,15 @@ -@import "tailwindcss"; - :root { --background: #ffffff; --foreground: #171717; } -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - body { background: var(--background); color: var(--foreground); font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } main { @@ -49,7 +42,10 @@ main { .btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0; } /* ---- Table ---- */ -.table-container { overflow-x: auto; } +.table-container { + overflow-x: auto; + width: 100%; +} .main-table { width: 100%; @@ -118,3 +114,172 @@ main { } .modal input:disabled { background: #eee; color: #777; } .modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } + +/* ---- App Layout ---- */ +.app-wrapper { + min-height: 100vh; + padding: 32px 16px; +} + +.app-container { + max-width: 1264px; + margin: 0 auto; + border: 2px solid black; + border-radius: 12px; + background-color: #d1d5db; + padding: 24px; +} + +.app-title { + font-size: 2.25rem; + font-weight: bold; + text-align: center; + margin-bottom: 24px; + letter-spacing: -0.025em; +} + +.app-inner { + width: 97%; + margin: 0 auto; +} + +.app-logout-bar { + display: flex; + justify-content: flex-end; + margin-bottom: -2px; +} + +.btn-logout { + padding: 8px 16px; + background-color: #dc2626; + color: white; + font-size: 0.875rem; + border: none; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0,0,0,0.2); + cursor: pointer; +} +.btn-logout:hover { background-color: #b91c1c; } + +.app-main { + width: 96%; + border: 2px solid black; + border-radius: 8px; + padding: 24px; + background-color: #FFFFDD; +} + +.app-footer { + margin-top: 32px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.875rem; + color: #4b5563; + padding: 0 16px; +} +.app-footer a:hover { text-decoration: underline; } + +/* ---- Login Page ---- */ +.login-wrapper { + min-height: 100vh; + background-color: white; + padding: 16px; +} + +.login-outer { + max-width: 72rem; + margin: 0 auto; + border: 2px solid black; + border-radius: 8px; + padding: 24px; + background-color: #FFFFDD; +} + +.login-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; +} + +.login-page-title { + font-size: 1.875rem; + font-weight: bold; +} + +.login-center { + display: flex; + justify-content: center; + padding: 40px 0; +} + +.login-card { + width: 100%; + max-width: 24rem; + background: white; + border: 1px solid #d1d5db; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + padding: 32px; + box-sizing: border-box; +} + +.login-card-title { + font-size: 1.25rem; + font-weight: 600; + color: #111827; + margin-bottom: 24px; + text-align: center; +} + +.login-form { + display: flex; + flex-direction: column; + gap: 20px; +} + +.login-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: #374151; + margin-bottom: 4px; +} + +.login-input { + width: 100%; + padding: 8px 12px; + border: 2px solid #9ca3af; + border-radius: 8px; + background: white; + color: #111827; + font-size: 0.875rem; + outline: none; + box-sizing: border-box; +} +.login-input:focus { border-color: #3b82f6; } +.login-input:disabled { opacity: 0.6; cursor: not-allowed; } + +.login-error { + background-color: #fef2f2; + border: 1px solid #fca5a5; + color: #b91c1c; + padding: 8px 12px; + border-radius: 8px; + font-size: 0.875rem; +} + +.login-submit { + width: 100%; + padding: 8px 16px; + background-color: #85B7D7; + color: black; + font-weight: 500; + border: none; + border-radius: 8px; + font-size: 0.875rem; + cursor: pointer; +} +.login-submit:hover:not(:disabled) { background-color: #6a9fc5; } +.login-submit:disabled { opacity: 0.5; cursor: not-allowed; } diff --git a/app/layout.tsx b/app/layout.tsx index cab66b4..04220c8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,17 +1,6 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - export const metadata: Metadata = { title: "Tabletten-Übersicht", description: "Verwaltung von Medikamenten und Tabletten", @@ -24,9 +13,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/app/login/page.tsx b/app/login/page.tsx index 8e21df2..e4f3589 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -7,19 +7,19 @@ export default function LoginPage() { const [state, loginAction, isPending] = useActionState(login, undefined); return ( -
-
-
-

Tabletten-Übersicht

+
+
+
+

Tabletten-Übersicht

-
-
-

Anmeldung

+
+
+

Anmeldung

-
+
-
-
{state?.error && ( -
+
{state.error}
)} @@ -59,7 +59,7 @@ export default function LoginPage() { diff --git a/components/AppLayout.tsx b/components/AppLayout.tsx index 69b793f..032cfd9 100644 --- a/components/AppLayout.tsx +++ b/components/AppLayout.tsx @@ -12,26 +12,26 @@ export default function AppLayout({ children }: AppLayoutProps) { const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }); return ( -
-
+
+
{/* Seitentitel */} -

Tabletten-Check

+

Tabletten-Check

-
+
{/* Logout-Button oben rechts */} -
- +
+
{/* Inhaltsbereich */} -
+
{children}
-