feat(01-01): scaffold Vite project with CSS design system and project structure
- Vite 6 + TypeScript + Biome + Vitest configured - All directories from spec section 13 created - CSS custom properties for full color palette and finger colors - index.html with 5 screen sections and Google Fonts - Dev server binds to 0.0.0.0:5173 for VPS access Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
+10
@@ -1 +1,11 @@
|
||||
# Dependencies
|
||||
node_modules
|
||||
|
||||
# Build output
|
||||
dist
|
||||
|
||||
# API config (contains secrets)
|
||||
public/config.json
|
||||
|
||||
# Local env files
|
||||
*.local
|
||||
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
|
||||
"organizeImports": {
|
||||
"enabled": true
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "tab",
|
||||
"lineWidth": 100
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"recommended": true
|
||||
}
|
||||
},
|
||||
"files": {
|
||||
"ignore": ["dist", "node_modules"]
|
||||
}
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Zauberwald</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Nunito:wght@400;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<section id="screen-welcome" class="screen screen--active"></section>
|
||||
<section id="screen-forest" class="screen"></section>
|
||||
<section id="screen-lesson" class="screen"></section>
|
||||
<section id="screen-reward" class="screen"></section>
|
||||
<section id="screen-parent" class="screen"></section>
|
||||
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1766
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "zauberwald",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview --host --port 4173",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"lint": "biome check .",
|
||||
"lint:fix": "biome check --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~5.8.0",
|
||||
"vite": "^6.0.0",
|
||||
"vitest": "^3.0.0",
|
||||
"@biomejs/biome": "^1.9.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"geminiApiKey": "YOUR_API_KEY_HERE",
|
||||
"geminiModel": "gemini-2.5-flash",
|
||||
"imageModel": "gemini-3.1-flash-image-preview"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import "./styles/main.css";
|
||||
|
||||
console.log("Zauberwald loaded");
|
||||
@@ -0,0 +1,57 @@
|
||||
/* Zauberwald Design System */
|
||||
|
||||
:root {
|
||||
/* Grundpalette — warm, einladend, Waldstimmung */
|
||||
--bg-cream: #FFF8F0;
|
||||
--bg-forest: #E8F5E4;
|
||||
--text-dark: #3D3225;
|
||||
--text-warm: #5C4A3A;
|
||||
--text-light: #8B7D6B;
|
||||
--accent-green: #6DB87D;
|
||||
--accent-gold: #E8B84B;
|
||||
--accent-pink: #E88BAE;
|
||||
--accent-purple: #9B7DC4;
|
||||
--accent-blue: #7DB8D4;
|
||||
|
||||
/* Fingerfarben — weiche Pastelltoene */
|
||||
--finger-l-pinky: #E8B4C8;
|
||||
--finger-l-ring: #C4A8D4;
|
||||
--finger-l-mid: #A8C4E0;
|
||||
--finger-l-index: #A8D8B8;
|
||||
--finger-r-index: #D4D8A8;
|
||||
--finger-r-mid: #E0C4A8;
|
||||
--finger-r-ring: #D4A8A8;
|
||||
--finger-r-pinky: #C8B4E8;
|
||||
--finger-thumb: #D4CFC8;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: "Nunito", sans-serif;
|
||||
background: var(--bg-cream);
|
||||
color: var(--text-dark);
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: "Quicksand", sans-serif;
|
||||
}
|
||||
|
||||
/* Screen management */
|
||||
.screen {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.screen--active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedIndexedAccess": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
server: { host: "0.0.0.0", port: 5173 },
|
||||
preview: { host: "0.0.0.0", port: 4173 },
|
||||
});
|
||||
Reference in New Issue
Block a user