Stand 2026-04-13: PHP/MySQL Infrastruktur, Flussmanagement, Stadt-Prototyp
- PHP/MySQL Backend (XAMPP + Produktionsserver) - Front-Controller, API-Endpunkte, Session-Management - Flussmanagement-Simulation (Echtzeit, Punkt-basierter Fluss) - Stadt & Raumplanung (Prototyp, Top-Down Kachelsystem) - Klimawaechter 3D: Deiche kleiner, Baeume kippen, Budget angepasst - persistence.ts: Dualer Speicher (localStorage + Server-API) - 6 Unit-Test-Dateien fuer bestehende Simulationen Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
/* ========================================
|
||||
GeoGraSim Base Styles
|
||||
======================================== */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');
|
||||
@import './tokens.css';
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html { font-size: 16px; scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height);
|
||||
letter-spacing: var(--letter-spacing);
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- Typografie --- */
|
||||
h1, h2, h3, h4 { font-weight: var(--font-weight-black); line-height: 1.2; }
|
||||
h1 { font-size: var(--font-size-xxl); }
|
||||
h2 { font-size: var(--font-size-xl); }
|
||||
h3 { font-size: var(--font-size-lg); }
|
||||
h4 { font-size: var(--font-size-md); }
|
||||
p { margin-bottom: var(--space-md); }
|
||||
a { color: var(--color-fjord); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* --- Container --- */
|
||||
.container {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-lg);
|
||||
}
|
||||
|
||||
/* --- Card --- */
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: var(--space-lg);
|
||||
transition: transform var(--duration-normal) var(--ease-out),
|
||||
box-shadow var(--duration-normal) var(--ease-out);
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* --- Button --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: 0.6rem 1.4rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-sm);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--color-fjord);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #3d6b78;
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: var(--color-surface-alt);
|
||||
color: var(--color-text);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-bg-warm);
|
||||
}
|
||||
|
||||
/* --- Badge / Tag --- */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.tag-k1 { background: var(--color-fjord-light); color: var(--color-fjord); }
|
||||
.tag-k2 { background: var(--color-moss-light); color: var(--color-moss); }
|
||||
.tag-k3 { background: var(--color-sand-light); color: var(--color-sand); }
|
||||
.tag-k4 { background: var(--color-coral-light); color: var(--color-coral); }
|
||||
|
||||
/* --- Section spacing --- */
|
||||
section { padding: var(--space-xxl) 0; }
|
||||
.section-label {
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-fjord);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/* ========================================
|
||||
GeoGraSim Design Tokens
|
||||
Stil: Scandinavian Minimal
|
||||
======================================== */
|
||||
|
||||
:root {
|
||||
/* --- Farben: Gedeckte Naturpalette --- */
|
||||
--color-bg: #fafaf8;
|
||||
--color-bg-warm: #f5f3ef;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-alt: #f0eeea;
|
||||
|
||||
--color-text: #1a1a1a;
|
||||
--color-text-secondary: #5a5a5a;
|
||||
--color-text-muted: #8a8a8a;
|
||||
|
||||
/* Akzentfarben — gedeckt, natürlich */
|
||||
--color-fjord: #4a7c8a; /* Petrol/Fjord-Blau */
|
||||
--color-fjord-light: #dae8ec;
|
||||
--color-moss: #5a8a5e; /* Moos-Grün */
|
||||
--color-moss-light: #dceadd;
|
||||
--color-sand: #c4a35a; /* Sandstein */
|
||||
--color-sand-light: #f2eacc;
|
||||
--color-coral: #c07a6b; /* Gedecktes Korall */
|
||||
--color-coral-light: #f2ddd8;
|
||||
--color-slate: #6a6a7a; /* Schiefer */
|
||||
--color-slate-light: #e2e2e8;
|
||||
|
||||
/* Klassen-Farben */
|
||||
--color-k1: #4a7c8a; /* 1. Klasse: Fjord */
|
||||
--color-k2: #5a8a5e; /* 2. Klasse: Moos */
|
||||
--color-k3: #c4a35a; /* 3. Klasse: Sand */
|
||||
--color-k4: #c07a6b; /* 4. Klasse: Korall */
|
||||
|
||||
/* Feedback */
|
||||
--color-success: #5a8a5e;
|
||||
--color-warning: #c4a35a;
|
||||
--color-error: #b55a4a;
|
||||
--color-info: #4a7c8a;
|
||||
|
||||
/* --- Typografie --- */
|
||||
--font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.85rem;
|
||||
--font-size-base: 0.95rem;
|
||||
--font-size-md: 1.1rem;
|
||||
--font-size-lg: 1.4rem;
|
||||
--font-size-xl: 2rem;
|
||||
--font-size-xxl: 3rem;
|
||||
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 600;
|
||||
--font-weight-black: 800;
|
||||
|
||||
--line-height: 1.65;
|
||||
--letter-spacing: -0.01em;
|
||||
|
||||
/* --- Spacing --- */
|
||||
--space-xs: 0.25rem;
|
||||
--space-sm: 0.5rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2.5rem;
|
||||
--space-xxl: 4rem;
|
||||
|
||||
/* --- Radien --- */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
--radius-full: 999px;
|
||||
|
||||
/* --- Schatten --- */
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.06);
|
||||
--shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
|
||||
--shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
|
||||
|
||||
/* --- Animation --- */
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 300ms;
|
||||
--duration-slow: 600ms;
|
||||
--duration-scenic: 20s; /* Für Deko-Animationen */
|
||||
|
||||
/* --- Layout --- */
|
||||
--max-width: 1140px;
|
||||
--nav-height: 60px;
|
||||
}
|
||||
Reference in New Issue
Block a user