Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plantation Shutter Design Tool</title>
    <style>
        body {
            font-family: 'League Spartan', Helvetica, sans-serif;
            text-align: center;
            padding: 30px;
        }

        canvas {
            border: 2px solid #333;
            margin-top: 20px;
            background-color: #fafafa;
        }

        .input-container {
            margin-bottom: 20px;
        }

        label, input, select {
            font-size: 18px;
            margin: 10px 0;
        }

        button {
            padding: 10px 20px;
            background-color: #FF7F00;
            color: white;
            font-size: 18px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
        }

        button:hover {
            background-color: #e67e00;
        }
    </style>
</head>
<body>
    <h1>Plantation Shutter Design Tool</h1>

    <div class="input-container">
        <label for="height">Height (mm):</label>
        <input type="number" id="height" placeholder="Enter height in mm" required>

        <label for="width">Width (mm):</label>
        <input type="number" id="width" placeholder="Enter width in mm" required>

        <label for="louvre-size">Louvre Size:</label>
        <select id="louvre-size" onchange="updateSlatSpacing()">
            <option value="47">47mm</option>
            <option value="63">63mm</option>
            <option value="76">76mm</option>
            <option value="89">89mm</option>
            <option value="114">114mm</option> <!-- New Louvre Size -->
        </select>

        <button onclick="drawShutter()">Design Shutter</button>
        <button onclick="downloadImage()">Download Design</button>
    </div>

    <canvas id="shutterCanvas" width="500" height="500"></canvas>

    <script>
        // Function to update the slat spacing based on the louvre size
        function updateSlatSpacing() {
            const louvreSize = document.getElementById('louvre-size').value;
            let slatSpacing;

            if (louvreSize == 47) {
                slatSpacing = 41;
            } else if (louvreSize == 63) {
                slatSpacing = 47;
            } else if (louvreSize == 76) {
                slatSpacing = 63;
            } else if (louvreSize == 89) {
                slatSpacing = 76;
            } else if (louvreSize == 114) { // New Louvre Size
                slatSpacing = 89;
            }

            // Automatically set the slat spacing value
            document.getElementById('slat-spacing').value = slatSpacing;
        }

        // Function to draw the shutter design
        function drawShutter() {
            const height = document.getElementById('height').value;
            const width = document.getElementById('width').value;
            const slatSpacing = document.getElementById('slat-spacing').value;
            const louvreSize = document.getElementById('louvre-size').value;

            const canvas = document.getElementById('shutterCanvas');
            const ctx = canvas.getContext('2d');

            // Clear previous design
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Convert mm to pixels for canvas scaling (simple conversion, adjust as necessary)
            const scale = 0.2;  // 1mm = 0.2px (adjust based on actual size)
            const scaledHeight = height * scale;
            const scaledWidth = width * scale;
            
            // Calculate available height for slats (subtract top and bottom rails)
            const availableHeight = scaledHeight;

            // Calculate the number of slats based on available height and louvre size
            const numSlats = Math.floor(availableHeight / (louvreSize * scale + slatSpacing * scale));

            // Calculate the total space taken up by the slats (louvre height + spacing)
            const totalSlatHeight = numSlats * (louvreSize * scale + slatSpacing * scale);

            // Calculate top and bottom rail sizes (evenly distribute remaining space)
            const remainingHeight = availableHeight - totalSlatHeight;
            const topBottomRailHeight = Math.max(76 * scale, remainingHeight / 2); // Ensure rails are at least 76mm

            // Draw Shutter Frame (including top and bottom rails)
            ctx.beginPath();
            ctx.rect(50, 50, scaledWidth, scaledHeight); // Position and size
            ctx.stroke();

            // Draw Top and Bottom Rails (calculated based on remaining space)
            ctx.beginPath();
            ctx.rect(50, 50, scaledWidth, topBottomRailHeight); // Top rail
            ctx.rect(50, 50 + scaledHeight - topBottomRailHeight, scaledWidth, topBottomRailHeight); // Bottom rail
            ctx.stroke();

            // Draw Shutter Slats (between the rails)
            for (let i = 0; i < numSlats; i++) {
                ctx.beginPath();
                ctx.moveTo(50, 50 + (topBottomRailHeight + i * (louvreSize * scale + slatSpacing * scale)));
                ctx.lineTo(50 + scaledWidth, 50 + (topBottomRailHeight + i * (louvreSize * scale + slatSpacing * scale)));
                ctx.stroke();
            }

            // Draw the Louvre Slats with the specified Louvre Size (adjust the height of each slat based on the louvre size selected)
            const louvreHeight = louvreSize * scale;

            // Draw Louvre Slats with the spe
Editor is loading...