       <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geo-Surface Analyzer™ 2.0 Canada 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: 100%;
        height: 70vh; /* Set height of the map */
        max-height: 70vh; /* Prevent map from exceeding this height */
        overflow: hidden; /* Prevent overflow */
    }
    #chartContainer {
        width: 100%;
        height: 40vh;
        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: 150px;
        z-index: 1000;
        font-size: 13px;
    }
    .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>

<!-- Save as image container openign div -->
  <div id="myAppWrapper">

    <!-- Title Section (No Logo) -->
    <div id="titleSection" class="controls-section">
        <h1 style="font-size: 24px; margin: 0;">Geo-Surface Analyzer™ 2.0 Canada Edition</h1>
    </div>

    <!-- Map Controls Section -->
    <div id="mapControls" class="controls-section">
        <h3>Map Controls</h3>
        <div class="checkbox-group">
            <input checked="checked" id="showElevationMapCheckbox" type="checkbox">
            <label class="control-label" for="showElevationMapCheckbox">Toggle Elevation Map</label>
        </div>
        <div class="checkbox-group">
            <input id="showDEMCheckbox" type="checkbox">
            <label class="control-label" for="showDEMCheckbox">Terrain 3D Hi-Res</label>
        </div>
        <div class="checkbox-group">
            <input id="showMRDEMCheckbox" type="checkbox">
            <label class="control-label" for="showMRDEMCheckbox">Terrain 3D Med-Res</label>
        </div>
        <div class="checkbox-group">
            <input id="showDepressionsCheckbox" type="checkbox">
            <label class="control-label" for="showDepressionsCheckbox">Satellite Imagery (beta)</label>
        </div>
        <div class="checkbox-group">
            <input id="showContoursCheckbox" type="checkbox">
            <label class="control-label" for="showContoursCheckbox">Show Contours</label>
        </div>
        <div class="checkbox-group">
            <input id="showFlowCheckbox" type="checkbox">
            <label class="control-label" for="showFlowCheckbox">Show Flow/Drains</label>
        </div>
        <div class="checkbox-group">
            <input checked="checked" id="showQuarterSectionsCheckbox" type="checkbox">
            <label class="control-label" for="showQuarterSectionsCheckbox">Show Land Parcels</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">
        <button id="measureAreaButton" class="control-button">Measure Area</button>
    </div>

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

    <!-- Drawing Tools Section -->
    <label>
      <input checked="checked" id="enableSnappingCheckbox" type="checkbox">Connection Detection</label>
    <div id="drawingControls" class="controls-section">
        <h3>Drawing Tools</h3>
        <button class="control-button" id="getElevationMapButton">Get Elevation Map</button>
        <button class="control-button" id="drawButton">Draw Manual Survey</button>
        <button class="control-button" id="virtualSurveyToggleButton">GPS Survey Start/Stop</button>
        <button class="control-button" id="clearLinesButton">Clear ALL 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 Selected 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 / Refresh</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>

<!-- Ending div for save as image container -->
  </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="./gsa-region-canada-v101.js"></script>   
    <script src="./gsa-universal-v102.js"></script>   
</body>
</html>