Adminator
f22c5ebbfe
- 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>
61 lines
1.5 KiB
HTML
61 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kachel-Test</title>
|
|
<style>
|
|
body { margin:0; display:flex; align-items:center; justify-content:center; height:100vh; background:#e8e8e0; }
|
|
canvas { background:#c8d4b0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="cv" width="400" height="400"></canvas>
|
|
<script>
|
|
var cv = document.getElementById('cv')
|
|
var c = cv.getContext('2d')
|
|
var S = 300 // Kachelgroesse (Quadrat)
|
|
var x0 = 50 // Kachel links oben
|
|
var y0 = 50
|
|
var RW = S / 3 // Strassenbreite = 1/3 der Kachel
|
|
|
|
// === GRUENE GRUNDFLAECHE ===
|
|
c.fillStyle = '#7da84e'
|
|
c.fillRect(x0, y0, S, S)
|
|
c.strokeStyle = 'rgba(0,0,0,0.12)'
|
|
c.lineWidth = 1
|
|
c.strokeRect(x0, y0, S, S)
|
|
|
|
// === STRASSE NACH SUEDEN (von Mitte nach unten) ===
|
|
var roadX = x0 + S/2 - RW/2 // Strasse horizontal zentriert
|
|
var roadY = y0 + S/2 - RW/2 // Startet in der Mitte
|
|
c.fillStyle = '#3a3a3a'
|
|
c.fillRect(roadX, roadY, RW, S/2 + RW/2) // Von Mitte bis Unterkante
|
|
|
|
// === MITTELLINIE (gestrichelt) ===
|
|
c.strokeStyle = 'rgba(255,255,180,0.7)'
|
|
c.lineWidth = 3
|
|
c.setLineDash([16, 12])
|
|
c.beginPath()
|
|
c.moveTo(x0 + S/2, y0 + S/2)
|
|
c.lineTo(x0 + S/2, y0 + S)
|
|
c.stroke()
|
|
c.setLineDash([])
|
|
|
|
// === RANDLINIEN (solid, weiss) ===
|
|
c.strokeStyle = 'rgba(255,255,255,0.5)'
|
|
c.lineWidth = 2
|
|
// Links
|
|
c.beginPath()
|
|
c.moveTo(roadX, roadY)
|
|
c.lineTo(roadX, y0 + S)
|
|
c.stroke()
|
|
// Rechts
|
|
c.beginPath()
|
|
c.moveTo(roadX + RW, roadY)
|
|
c.lineTo(roadX + RW, y0 + S)
|
|
c.stroke()
|
|
</script>
|
|
</body>
|
|
</html>
|