<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geo-Surface Analyzer™ 2.0 Canadian Prairies LiDAR Edition</title>
    <!-- Include viewport meta tag for responsiveness and disable zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Include OpenLayers CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.3.0/ol.css">
    <!-- Chart.js for plotting the elevation profile -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Include Chart.js Data Labels plugin -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <!-- Include Turf.js for geometric operations -->
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
    <!-- Include html2canvas for capturing the page as an image -->
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

    <style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    /* Map and chart styles */
    #map {
        width: 95%;
        height: 65vh; /* Set height of the map */
        max-height: 65vh; /* Prevent map from exceeding this height */
        overflow: hidden; /* Prevent overflow */
    }
    #chartContainer {
        width: 95%;
        height: 50vh;
        padding: 0;
        margin: 0;
    }
    #elevationChart {
        width: 100%;
        height: 100%;
    }

    /* Controls styles */
    .controls-section {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #f9f9f9;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
    .controls-section h3 {
        width: 100%;
        margin: 10px 0;
        font-size: 18px;
        color: #333;
    }
    .control-group {
        display: flex;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .control-label {
        margin-right: 5px;
        font-size: 14px;
    }
    .control-input {
        margin-right: 10px;
        padding: 6px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 14px;
        width: 60px;
    }
    .control-button {
        margin-right: 10px;
        margin-bottom: 10px;
        background: #007BFF;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        border: none;
        transition: background 0.3s;
    }
    .control-button:hover {
        background: #0056b3;
    }
    .checkbox-group {
        display: flex;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .checkbox-group input {
        margin-right: 5px;
    }

    #gradeDisplay {
        display: none;
        margin: 10px 0;
        padding: 10px;
        background: #e9ecef;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
    }

    .ol-popup {
        position: absolute;
        background-color: white;
        padding: 3px;
        border-radius: 1px;
        border: 3px solid #cccccc;
        min-width: 140px;
        z-index: 1000;
        font-size: 12px;
    }
    .ol-popup * {
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    #footerDisclaimer {
        font-size: 14px;
        line-height: 1.5;
        background: #f9f9f9;
        padding: 20px;
        border-top: 1px solid #ddd;
        margin-top: 20px;
    }
    #footerDisclaimer h3 {
        margin-top: 0;
    }
    #footerDisclaimer p {
        margin-bottom: 10px;
    }
    #footerDisclaimer strong {
        font-weight: bold;
    }

    @media screen and (max-width: 768px) {
        .control-group, .checkbox-group {
            flex-direction: column;
            align-items: flex-start;
        }
        .control-input {
            width: 100%;
            margin-bottom: 5px;
        }
        .control-button {
            width: 100%;
            text-align: center;
        }
        .control-group label {
            margin-bottom: 5px;
        }
        .controls-section {
            align-items: flex-start;
        }
    }
    </style>
</head>
<body>
    <!-- Title Section (No Logo) -->
    <div id="titleSection" class="controls-section">
        <h1 style="font-size: 24px; margin: 0;">Geo-Surface Analyzer™ 2.0 Canadian Prairies LiDAR Edition</h1>
    </div>

    <!-- Map Controls Section -->
    <div id="mapControls" class="controls-section">
        <h3>Map Controls</h3>
        <div class="checkbox-group">
            <input id="showDEMCheckbox" type="checkbox">
            <label class="control-label" for="showDEMCheckbox">Hi Res Coverage 3D</label>
        </div>
        <div class="checkbox-group">
            <input id="showMRDEMCheckbox" type="checkbox">
            <label class="control-label" for="showMRDEMCheckbox">Med. Res Coverage 3D</label>
        </div>
        <div class="checkbox-group">
            <input id="showDepressionsCheckbox" type="checkbox">
            <label class="control-label" for="showDepressionsCheckbox">Show Satellite Crop Imagery (beta)</label>
        </div>
        <div class="checkbox-group">
            <input id="showContoursCheckbox" type="checkbox">
            <label class="control-label" for="showContoursCheckbox">Show 2ft Contours</label>
        </div>
        <div class="checkbox-group">
            <input id="showFlowCheckbox" type="checkbox">
            <label class="control-label" for="showFlowCheckbox">Show Flow & Hydro Network Layer</label>
        </div>
        <div class="checkbox-group">
            <input checked="checked" id="showQuarterSectionsCheckbox" type="checkbox">
            <label class="control-label" for="showQuarterSectionsCheckbox">Show LLD Sections</label>
        </div>
        <button class="control-button" id="toggleGeolocationButton">Start Geolocation</button>
        <button class="control-button" id="importTiffButton">Import GeoTIFF</button>
        <input style="display: none;" accept=".tif,.tiff" id="importTiffInput" type="file">
    </div>

    <!-- Map -->
    <div id="map"></div>

    <!-- Drawing Tools Section -->
    <label>
      <input checked="checked" id="enableSnappingCheckbox" type="checkbox"> Enable Snapping
    </label>
    <div id="drawingControls" class="controls-section">
        <h3>Drawing Tools</h3>
        <button class="control-button" id="drawButton">Draw Survey Profile</button>
        <button class="control-button" id="clearLinesButton">Clear Profiles</button>
        <div class="control-group">
            <label class="control-label" for="lineList">Select Profile:</label>
            <select style="width: 120px;" class="control-input" id="lineList">
                <option selected="selected" disabled="disabled" value="">Select</option>
            </select>
        </div>
        <button class="control-button" id="deleteLineButton">Delete Profile</button>
        <button class="control-button" id="trimLinesButton">Trim Laterals</button>
        <!-- Offset Line Controls -->
        <div style="align-items: baseline; flex-wrap: wrap;" class="control-group">
            <label class="control-label" for="offsetDistanceInput">Offset Distance (ft):</label>
            <input value="40" class="control-input" id="offsetDistanceInput" type="number">
            <label class="control-label" for="numberOfOffsetsInput">Number of Offsets:</label>
            <select class="control-input" id="numberOfOffsetsInput">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <label class="control-label" for="offsetDirectionInput">Offset Direction:</label>
            <select class="control-input" id="offsetDirectionInput">
                <option value="left">Left</option>
                <option value="right">Right</option>
            </select>
            <button class="control-button" id="offsetLineButton">Offset New Line</button>
        </div>
    </div>

    <!-- Chart Container -->
    <div id="chartContainer">
        <canvas id="elevationChart"></canvas>
    </div>

    <!-- Profile Controls Section -->
    <div id="profileControls" class="controls-section">
        <h3>Profile Controls</h3>
        <div class="control-group">
            <label class="control-label" for="offsetInput">Offset Depth (in):</label>
            <input class="control-input" id="offsetInput" type="number">
            <button class="control-button" id="applyOffsetButton">Apply Offset</button>
        </div>
        <div class="control-group">
            <label class="control-label" for="minDepthInput">Min Depth (in):</label>
            <input class="control-input" id="minDepthInput" type="number">
            <label class="control-label" for="maxDepthInput">Max Depth (in):</label>
            <input class="control-input" id="maxDepthInput" type="number">
            <button class="control-button" id="applyDepthButton">Show Depths</button>
        </div>
        <div class="control-group">
            <label class="control-label" for="widthInput">Width (ft):</label>
            <input value="8" class="control-input" id="widthInput" type="number">
            <label class="control-label" for="minGradeInput">Min Grade (%):</label>
            <input value="0.05" class="control-input" id="minGradeInput" type="number">
        </div>
        <button class="control-button" id="drawBestFitButton">Draw Best Fit</button>
        <button disabled="disabled" class="control-button" id="reverseOutletButton">Reverse Outlet</button>
        <button class="control-button" id="clearButton">Clear Grades</button>
        <button class="control-button" id="refreshProfileButton">Refresh Profile Data</button>
        <button class="control-button" id="exportDesignButton">Export 3D Line</button>
        <div id="gradeDisplay"></div>
    </div>

    <!-- File and Project Controls Section -->
    <div id="fileControls" class="controls-section">
        <h3>File and Project Controls</h3>
        <button class="control-button" id="saveImageButton">Save Image</button>
        <button class="control-button" id="exportKmlButton">Export KML</button>
        <button class="control-button" id="importKmlButton">Import KML</button>
        <input style="display: none;" accept=".kml" id="importKmlInput" type="file">
        <button class="control-button" id="exportProjectButton">Export Project</button>
        <button class="control-button" id="importProjectButton">Import Project</button>
        <input style="display: none;" accept=".json" id="importProjectInput" type="file">
    </div>

    <!-- DISCLAIMER & LICENSE SECTION -->
    <div id="footerDisclaimer">
        <h3>Disclaimer & License</h3>
        <p><strong>Disclaimer:</strong></p>
        <p>This tool is provided solely for informational and educational purposes and does not imply any license, right, or permission to build, operate, or maintain water control works or any other engineering installations. It is not a substitute for professional judgment, legal counsel, licensed land surveying, or properly qualified geospatial engineering services. The developer makes no warranties, express or implied, regarding the accuracy, completeness, fitness for a particular purpose, or reliability of any data, results, or information produced by this tool.</p>
        <p>By accessing and using this tool, you acknowledge and agree that:</p>
        <ol>
            <li>You assume full responsibility for any decisions, actions, or outcomes arising from its use.</li>
            <li>The developer shall not be held liable for any errors, omissions, inaccuracies, or any direct, indirect, incidental, consequential, special, or exemplary damages resulting from the application of information provided by the tool.</li>
            <li>You will consult with licensed professionals, such as qualified surveyors, engineers, and legal advisors, for site-specific guidance, and will not rely on the tool as definitive or authoritative.</li>
            <li>Your access and use of this tool constitutes a full and final waiver of all claims, known or unknown, present or future, against the developer arising from or relating to the tool’s use, functionality, or any data derived therefrom.</li>
        </ol>
        <p>If you do not agree with any part of this disclaimer, you should discontinue use of the tool immediately.</p>
        <p><strong>License:</strong></p>
        <p>This tool and its associated data, code, and materials are licensed for use only in accordance with the terms of the license purchased by the user. Different license types may carry specific restrictions regarding usage, number of authorized users, and permitted applications. You must at all times remain in full compliance with the terms of the license that you have purchased. Unauthorized use, sharing, or distribution beyond the scope defined in your purchased license is strictly prohibited.</p>
        <p><strong>© 2025 Simon Knutson. All rights reserved.</strong> Any copying, modification, reverse engineering, redistribution, or use not explicitly authorized by the purchased license is strictly prohibited. Violations may result in immediate termination of the license and potential legal action.</p>
    </div>

    <!-- Include OpenLayers JS -->
    <script src="https://cdn.jsdelivr.net/npm/ol@7.3.0/dist/ol.js"></script>
    <!-- Main JavaScript Code -->
    <script src="https://cdn.jsdelivr.net/npm/geotiff@2.1.3/dist-browser/geotiff.min.js"></script>
    <script src="https://cdn.shopify.com/s/files/1/0727/1582/9473/files/gsa-mb-sk-obfuscated.js?v=1734380777"></script>
</body>
</html>