<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verschattungsberechnung</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"></script>
</head>
<body>
    <h1>Verschattungsberechnung</h1>
    <form id="inputForm">
        <label for="latitude">Breitengrad:</label>
        <input type="number" id="latitude" name="latitude" step="any" required>
        <label for="longitude">Längengrad:</label>
        <input type="number" id="longitude" name="longitude" step="any" required>
        <label for="length">Firstlänge (m):</label>
        <input type="number" id="length" name="length" required>
        <label for="width">Ortgang (m):</label>
        <input type="number" id="width" name="width" required>
        <label for="slope">Dachneigung (Grad):</label>
        <input type="number" id="slope" name="slope" required>
        <label for="height">Firsthöhe (m):</label>
        <input type="number" id="height" name="height" required>
        <label for="azimuth">Azimut der Dachfläche (Grad):</label>
        <input type="number" id="azimuth" name="azimuth" required>
        <label for="objectHeight">Höhe des Störobjekts (m):</label>
        <input type="number" id="objectHeight" name="objectHeight" required>
        <label for="objectLength">Länge des Störobjekts (m):</label>
        <input type="number" id="objectLength" name="objectLength" required>
        <label for="objectWidth">Breite des Störobjekts (m):</label>
        <input type="number" id="objectWidth" name="objectWidth" required>
        <label for="objectPositionX">Position X des Störobjekts (m):</label>
        <input type="number" id="objectPositionX" name="objectPositionX" required>
        <label for="objectPositionY">Position Y des Störobjekts (m):</label>
        <input type="number" id="objectPositionY" name="objectPositionY" required>
        <label for="date">Datum:</label>
        <input type="date" id="date" name="date" required>
        <label for="time">Zeit:</label>
        <input type="time" id="time" name="time" value="12:00" required>
        <label for="fullDay">Schattenverlauf für ganzen Tag anzeigen:</label>
        <input type="checkbox" id="fullDay" name="fullDay">
        <button type="button" onclick="calculateShadow()">Berechnen</button>
    </form>
 <canvas id="shadowCanvas" width="1200" height="800"></canvas>
    <div id="legendContainer">
        <h2>Legende</h2>
        <div id="legend"></div>
    </div>
    <script src="script.js"></script>
</body>
