robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Industrial Dark UI Overhaul: Updated colors, typography, navigation, and component styling across the application

Browse Source
This commit is contained in:
robin
2025-12-22 00:05:31 +01:00
parent cf491d83b6
commit f0588418c8
28 changed files with 582 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/global-error.tsx
View File

@@ -12,10 +12,10 @@ export default function GlobalError({
return (
<html lang="de">
<body>
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
<div className="bg-white dark:bg-zinc-900 p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl max-w-md w-full space-y-6">
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-black text-center">
<div className="bg-zinc-900 p-8 rounded-[32px] border border-zinc-800 shadow-xl max-w-md w-full space-y-6">
<div className="space-y-2">
<h2 className="text-2xl font-black text-zinc-900 dark:text-white">Kritischer Fehler</h2>
<h2 className="text-2xl font-bold text-white uppercase tracking-tighter">Kritischer Fehler</h2>
<p className="text-zinc-500 text-sm">
Ein schwerwiegender Fehler ist aufgetreten. Bitte versuche die Seite neu zu laden.
</p>
@@ -23,7 +23,7 @@ export default function GlobalError({
<button
onClick={() => reset()}
className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-orange-950/20"
>
<RefreshCcw size={18} />
Erneut versuchen

27
src/app/globals.css
View File

@@ -4,16 +4,24 @@
@layer base {
:root {
--background: #0F1014;
--surface: #1A1B20;
--primary: #C89D46;
--text-secondary: #8F9096;
--border: rgba(255, 255, 255, 0.1);
--background: #09090b;
/* zinc-950 */
--surface: #18181b;
/* zinc-900 */
--primary: #ea580c;
/* orange-600 */
--secondary: #f97316;
/* orange-500 */
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--border: #27272a;
/* zinc-800 */
--ring: #f97316;
}
}
body {
@apply bg-[#0F1014] text-white antialiased;
@apply bg-[#09090b] text-[#fafafa] antialiased;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
@@ -22,16 +30,17 @@ h2,
h3,
h4,
.font-display {
font-family: var(--font-playfair), serif;
font-family: var(--font-inter), system-ui, sans-serif;
letter-spacing: -0.02em;
}
@layer utilities {
.glass {
@apply backdrop-blur-md bg-white/5 border border-white/10;
@apply backdrop-blur-md bg-zinc-900/50 border border-zinc-800/50;
}
.glass-dark {
@apply backdrop-blur-md bg-black/40 border border-white/5;
@apply backdrop-blur-md bg-zinc-950/80 border border-zinc-900/50;
}
.scrollbar-hide::-webkit-scrollbar {

7
src/app/layout.tsx
View File

@@ -12,16 +12,13 @@ import AuthListener from "@/components/AuthListener";
import SyncHandler from "@/components/SyncHandler";
const inter = Inter({ subsets: ["latin"], variable: '--font-inter' });
const playfair = Playfair_Display({ subsets: ["latin"], variable: '--font-playfair' });
import { Playfair_Display } from "next/font/google";
export const metadata: Metadata = {
title: {
default: "DramLog",
template: "%s | DramLog"
},
description: "Premium Digitaler Tasting Begleiter für Genießer.",
description: "Modern Whisky Enthusiast Tool",
manifest: "/manifest.webmanifest",
appleWebApp: {
capable: true,
@@ -48,7 +45,7 @@ export default function RootLayout({
}>) {
return (
<html lang="de">
<body className={`${inter.variable} ${playfair.variable} font-sans`}>
<body className={`${inter.variable} font-sans`}>
<I18nProvider>
<SessionProvider>
<AuthListener />

6
src/app/loading.tsx
View File

@@ -2,10 +2,10 @@ import { Loader2 } from 'lucide-react';
export default function Loading() {
return (
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-black text-center">
<div className="flex flex-col items-center gap-4">
<Loader2 size={40} className="animate-spin text-amber-600" />
<p className="text-zinc-500 font-medium animate-pulse">Whisky Vault wird geladen...</p>
<Loader2 size={40} className="animate-spin text-orange-600" />
<p className="text-zinc-500 font-bold animate-pulse uppercase tracking-widest text-[10px]">Whisky Vault wird geladen...</p>
</div>
</div>
);

10
src/app/not-found.tsx
View File

@@ -3,12 +3,12 @@ import { Home, MoveLeft } from 'lucide-react';
export default function NotFound() {
return (
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
<div className="bg-white dark:bg-zinc-900 p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl max-w-md w-full space-y-6">
<div className="text-8xl font-black text-amber-600/20">404</div>
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-black text-center">
<div className="bg-zinc-900 p-8 rounded-[32px] border border-zinc-800 shadow-xl max-w-md w-full space-y-6">
<div className="text-8xl font-bold text-orange-600/10 tracking-tighter">404</div>
<div className="space-y-2">
<h2 className="text-2xl font-black text-zinc-900 dark:text-white">Seite nicht gefunden</h2>
<h2 className="text-2xl font-bold text-white uppercase tracking-tighter">Seite nicht gefunden</h2>
<p className="text-zinc-500 text-sm">
Die gesuchte Seite existiert leider nicht oder wurde verschoben.
</p>
@@ -17,7 +17,7 @@ export default function NotFound() {
<div className="pt-4">
<Link
href="/"
className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-amber-600/20"
className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-orange-950/20"
>
<Home size={18} />
Zurück zum Vault

42
src/app/page.tsx
View File

@@ -151,13 +151,13 @@ export default function Home() {
if (!user) {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-6 bg-[#0F1014]">
<main className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-950">
<div className="mb-12 text-center animate-in fade-in zoom-in duration-1000">
<h1 className="text-6xl font-display font-bold text-white tracking-tighter mb-4">
DRAM<span className="text-[#C89D46]">LOG</span>
<h1 className="text-6xl font-bold text-zinc-50 tracking-tighter mb-4">
DRAM<span className="text-orange-600">LOG</span>
</h1>
<p className="text-[#8F9096] max-w-sm mx-auto font-sans tracking-wide">
Premium Digitaler Tasting Begleiter für Genießer.
<p className="text-zinc-500 max-w-sm mx-auto font-bold tracking-wide">
Modern Minimalist Tasting Tool.
</p>
<div className="mt-8">
<LanguageSwitcher />
@@ -169,20 +169,20 @@ export default function Home() {
}
return (
<main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-[#0F1014] pb-32">
<main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-zinc-950 pb-32">
<div className="z-10 max-w-5xl w-full flex flex-col items-center gap-12">
<header className="w-full flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-0">
<div className="flex flex-col items-center sm:items-start group">
<h1 className="text-4xl font-display font-bold text-white tracking-tighter">
DRAM<span className="text-[#C89D46]">LOG</span>
<h1 className="text-4xl font-bold text-zinc-50 tracking-tighter">
DRAM<span className="text-orange-600">LOG</span>
</h1>
{activeSession && (
<div className="flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-700">
<div className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#C89D46] opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-[#C89D46]"></span>
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-600 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
</div>
<span className="text-[9px] font-sans font-bold uppercase tracking-widest text-[#C89D46] flex items-center gap-1">
<span className="text-[9px] font-bold uppercase tracking-widest text-orange-600 flex items-center gap-1">
<Sparkles size={10} className="animate-pulse" />
Live: {activeSession.name}
</span>
@@ -195,7 +195,7 @@ export default function Home() {
<DramOfTheDay bottles={bottles} />
<button
onClick={handleLogout}
className="text-xs font-sans font-bold uppercase tracking-widest text-[#8F9096] hover:text-white transition-colors"
className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white transition-colors"
>
{t('home.logout')}
</button>
@@ -206,7 +206,7 @@ export default function Home() {
<StatsDashboard bottles={bottles} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 w-full max-w-5xl">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-5xl">
<div className="flex flex-col gap-8">
<SessionList />
</div>
@@ -215,27 +215,27 @@ export default function Home() {
</div>
</div>
<div className="w-full mt-4">
<div className="w-full mt-4" id="collection">
<div className="flex items-end justify-between mb-8">
<h2 className="text-3xl font-display font-bold text-white">
<h2 className="text-3xl font-bold text-zinc-50 uppercase tracking-tight">
Collection
</h2>
<span className="text-xs font-sans font-bold text-[#8F9096] uppercase tracking-widest pb-1">
<span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest pb-1">
{bottles.length} Bottles
</span>
</div>
{isLoading ? (
<div className="flex justify-center py-20">
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-[#C89D46]"></div>
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-orange-600"></div>
</div>
) : fetchError ? (
<div className="p-12 bg-[#1A1B20] border border-white/10 rounded-3xl text-center">
<p className="text-white font-display text-xl mb-4">{t('common.error')}</p>
<p className="text-[#8F9096] text-sm italic mb-8 mx-auto max-w-xs">{fetchError}</p>
<div className="p-12 bg-zinc-900 border border-zinc-800 rounded-3xl text-center">
<p className="text-zinc-50 font-bold text-xl mb-2">{t('common.error')}</p>
<p className="text-zinc-500 text-xs italic mb-8 mx-auto max-w-xs">{fetchError}</p>
<button
onClick={fetchCollection}
className="px-10 py-4 bg-[#C89D46] hover:bg-[#E0B456] text-[#0F1014] rounded-full text-xs font-sans font-bold uppercase tracking-widest transition-all"
className="px-10 py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl text-[10px] font-bold uppercase tracking-widest transition-all shadow-lg shadow-orange-950/20"
>
{t('home.reTry')}
</button>