<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Granite Off-Cut Website</title>
    <style>
        /* Add your styles here */
        .project-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .project {
            border: 1px solid #ddd;
            padding: 10px;
            cursor: pointer;
        }

        .project img {
            max-width: 100%;
            height: auto;
        }

        #options-container {
            display: none;
        }
    </style>
</head>
<body>

    <div class="project-container">
        <!-- Table Top -->
        <div class="project" onclick="showOptions('Table Top')">
            <img src="table_top_placeholder.jpg" alt="Table Top">
            <p>Table Top</p>
        </div>

        <!-- Shower Tray -->
        <div class="project" onclick="showOptions('Shower Tray')">
            <img src="shower_tray_placeholder.jpg" alt="Shower Tray">
            <p>Shower Tray</p>
        </div>

        <!-- Vanity Top -->
        <div class="project" onclick="showOptions('Vanity Top')">
            <img src="vanity_top_placeholder.jpg" alt="Vanity Top">
            <p>Vanity Top</p>
        </div>
    </div>

    <div id="options-container">
        <!-- Options for Table Top -->
        <div id="table-top-options" class="options" style="display: none;">
            <label for="round-option">Round:</label>
            <input type="checkbox" id="round-option">
            <br>
            <label for="diameter">Diameter (mm):</label>
            <input type="number" id="diameter" disabled>
        </div>

        <!-- Options for Shower Tray -->
        <div id="shower-tray-options" class="options" style="display: none;">
            <label for="drying-area">Drying Area:</label>
            <input type="checkbox" id="drying-area">
        </div>

        <!-- Options for Vanity Top -->
        <div id="vanity-top-options" class="options" style="display: none;">
            <label for="cutouts">Number of Cutouts:</label>
            <select id="cutouts">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <br>
            <label for="polished">Polished Cutouts:</label>
            <input type="checkbox" id="polished">
        </div>
    </div>

    <script>
        function showOptions(projectType) {
            // Hide all options initially
            document.querySelectorAll('.options').forEach(option => option.style.display = 'none');

            // Show options based on the selected project type
            switch (projectType) {
                case 'Table Top':
                    document.getElementById('table-top-options').style.display = 'block';
                    break;
                case 'Shower Tray':
                    document.getElementById('shower-tray-options').style.display = 'block';
                    break;
                case 'Vanity Top':
                    document.getElementById('vanity-top-options').style.display = 'block';
                    break;
            }

            // Show the options container
            document.getElementById('options-container').style.display = 'block';
        }
    </script>

</body>
</html>