feat: scaffold MUI theme, providers, color mode and i18n
This commit is contained in:
MrFrostDev
@@ -0,0 +1,249 @@
|
||||
:root {
|
||||
--pp-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04),
|
||||
0 4px 12px -2px rgba(15, 23, 42, 0.06);
|
||||
--pp-shadow-elevated: 0 12px 32px -12px rgba(15, 23, 42, 0.18),
|
||||
0 2px 6px -2px rgba(15, 23, 42, 0.08);
|
||||
--pp-shadow-brand: 0 8px 24px -8px rgba(255, 107, 0, 0.45);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(255, 107, 0, 0.25);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(120, 120, 120, 0.35);
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(120, 120, 120, 0.6);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@keyframes pp-pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pp-dot {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pp-typing span {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin: 0 2px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
animation: pp-dot 1.2s infinite ease-in-out;
|
||||
}
|
||||
.pp-typing span:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
.pp-typing span:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.pp-grid-bg {
|
||||
background-image: radial-gradient(
|
||||
circle at 1px 1px,
|
||||
rgba(120, 120, 120, 0.12) 1px,
|
||||
transparent 0
|
||||
);
|
||||
background-size: 28px 28px;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
FullCalendar — themed to PatchPilot
|
||||
=========================== */
|
||||
.fc {
|
||||
font-family: inherit;
|
||||
--fc-border-color: rgba(120, 120, 120, 0.18);
|
||||
--fc-page-bg-color: transparent;
|
||||
--fc-neutral-bg-color: transparent;
|
||||
--fc-list-event-hover-bg-color: rgba(255, 107, 0, 0.06);
|
||||
--fc-today-bg-color: rgba(255, 107, 0, 0.08);
|
||||
--fc-now-indicator-color: #ff6b00;
|
||||
--fc-event-bg-color: #ff6b00;
|
||||
--fc-event-border-color: #ff6b00;
|
||||
--fc-event-text-color: #ffffff;
|
||||
color: inherit;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.fc .fc-toolbar {
|
||||
margin-bottom: 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
.fc .fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 0.95rem !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.fc .fc-button {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--fc-border-color) !important;
|
||||
color: inherit !important;
|
||||
text-transform: none !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.78rem !important;
|
||||
padding: 4px 10px !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: none !important;
|
||||
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.fc .fc-button:not(:disabled):hover {
|
||||
background: rgba(255, 107, 0, 0.08) !important;
|
||||
border-color: rgba(255, 107, 0, 0.45) !important;
|
||||
color: #ff6b00 !important;
|
||||
}
|
||||
.fc .fc-button-primary:not(:disabled).fc-button-active {
|
||||
background: #ff6b00 !important;
|
||||
border-color: #ff6b00 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.fc .fc-button-group > .fc-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.fc .fc-button-group > .fc-button:first-child {
|
||||
border-top-left-radius: 8px !important;
|
||||
border-bottom-left-radius: 8px !important;
|
||||
}
|
||||
.fc .fc-button-group > .fc-button:last-child {
|
||||
border-top-right-radius: 8px !important;
|
||||
border-bottom-right-radius: 8px !important;
|
||||
}
|
||||
|
||||
.fc .fc-col-header-cell {
|
||||
background: transparent !important;
|
||||
font-weight: 700;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(120, 120, 120, 1);
|
||||
padding: 8px 0 !important;
|
||||
}
|
||||
.fc .fc-col-header-cell-cushion {
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
padding: 4px 8px !important;
|
||||
}
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th,
|
||||
.fc-theme-standard .fc-scrollgrid {
|
||||
border-color: var(--fc-border-color) !important;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-day-frame {
|
||||
min-height: 56px;
|
||||
padding: 2px;
|
||||
}
|
||||
.fc .fc-daygrid-day-number {
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
padding: 4px 6px !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.fc .fc-day-today .fc-daygrid-day-number {
|
||||
background: #ff6b00;
|
||||
color: #fff !important;
|
||||
border-radius: 8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
.fc .fc-day-other .fc-daygrid-day-number {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border-radius: 6px !important;
|
||||
border: none !important;
|
||||
font-size: 0.72rem !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 2px 6px !important;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.fc-event:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.fc-event.fc-bg-event {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
|
||||
.fc-h-event,
|
||||
.fc-v-event {
|
||||
background: var(--fc-event-bg-color) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fc .fc-timegrid-slot-label-cushion {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
color: rgba(120, 120, 120, 1);
|
||||
}
|
||||
|
||||
/* Compact mode for in-modal calendar */
|
||||
.pp-calendar-compact .fc-toolbar-title {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
.pp-calendar-compact .fc-daygrid-day-frame {
|
||||
min-height: 38px;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
import Providers from './providers';
|
||||
import './globals.css';
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
variable: '--pp-font-sans',
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: 'PatchPilot — KI-gestütztes Repair Café',
|
||||
template: '%s · PatchPilot',
|
||||
},
|
||||
description:
|
||||
'Buche Werkzeuge, finde Anleitungen und repariere klüger — mit KI-gestützter Hilfe in deinem Repair Café.',
|
||||
applicationName: 'PatchPilot',
|
||||
keywords: ['Repair Café', 'Werkzeuge', 'Reparatur', 'KI', 'Reservierung'],
|
||||
authors: [{ name: 'PatchPilot Team' }],
|
||||
icons: {
|
||||
icon: [{ url: '/logo.png', type: 'image/png' }],
|
||||
apple: [{ url: '/logo.png', type: 'image/png' }],
|
||||
},
|
||||
openGraph: {
|
||||
title: 'PatchPilot — KI-gestütztes Repair Café',
|
||||
description: 'Buche Werkzeuge, finde Anleitungen, repariere klüger.',
|
||||
type: 'website',
|
||||
locale: 'de_DE',
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: 'device-width',
|
||||
initialScale: 1,
|
||||
themeColor: [
|
||||
{ media: '(prefers-color-scheme: light)', color: '#F9FAFB' },
|
||||
{ media: '(prefers-color-scheme: dark)', color: '#121212' },
|
||||
],
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="de" className={inter.variable}>
|
||||
<body>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { I18nProvider } from '../services/i18n';
|
||||
import { ColorModeProvider } from '../services/color-mode';
|
||||
|
||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<I18nProvider>
|
||||
<ColorModeProvider>{children}</ColorModeProvider>
|
||||
</I18nProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user