week4/index.html

<!DOCTYPE html>
<html>

<head>
    <title>AA191A APIs and conditionals Lab</title>

    <meta charset="utf-8" />
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="styles/index.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

    <!-- MapLibreGL's css-->
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />

    <!-- MapLibreGL's JavaScript-->
    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>

    <!-- PapaParse Library-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>

<body>

    <header>
        <h1>BAY AREA RAPID TRANSIT</h1>
    </header>

    <main>
        <!-- hint: majority of your lab assignment can go here -->
        <div class="col1">
            <div id="survey">
                <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf3iP3m7qQe_8wxwSXV5Vs9R6Ap_hOoX7fD4wKwTpn7JROduQ/viewform?embedded=true" 
                width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>         
            </div>
        </div>

        <div class="col2">
            <div class="title"><h2>Survey Responses</h2></div>
            <div id="map">
                <!-- Map will be inserted here -->
                <div id="legend"></div>
            </div>
        </div>
    </main>

    <div id="footer">
        <p>COPYRIGHT 2024</p>
    </div>

    <script src="js/init.js"></script>

</body>

</html>