crisiswatch.github.io/index.html at main · Slick9000/crisiswatch.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hurricane Alerts - Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
        }
        header {
            background: #007bff;
            color: white;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        #map {
            height: 330px;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <header>
        <h1 style="margin: 0">Hurricane Alerts</h1>
    </header>

    <h2>Select Your Location</h2>

    <div id="map"></div>

    <!-- About Section -->
    <div class="navbck">
        <div class="container">
            <h2>CrisisWatch – Your Personal Natural Disaster News Alert and Community Forum</h2>
            <p>CrisisWatch is dedicated to keeping you informed, prepared, and supported during natural disasters.</p>
            <p>We provide a reliable and resourceful platform to assist Caribbean countries like Barbados, Jamaica, and Trinidad with disaster readiness and response.</p>
            <p>Our services include real-time hurricane alerts, accurate weather forecasts, a damage reporting system, and practical hurricane preparedness tips — all designed to help protect lives and communities.</p>
        </div>
        <p>&copy CrisisWatch 2025. All rights reserved.</p>
    </div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        const parishCoords = {
            "Christ Church": [13.08257,-59.53946],
            "Saint Andrew": [13.2459239,-59.5627175],
            "Saint George": [13.138653,-59.561673],
            "Saint James": [13.1856979,-59.6374323],
            "Saint Thomas": [13.1863465, -59.5771509],
            "Saint John": [13.1839916,-59.5019033],
            "Saint Joseph": [13.2003197,-59.5387963],
            "Saint Lucy": [13.3040108,-59.6098562],
            "Saint Michael": [13.0980849,-59.6172935],
            "Saint Peter": [13.2676304,-59.6210298],
            "Saint Philip": [13.1192573,-59.4761998],
        };

        const map = L.map("map").setView([13.1774,-59.5263], 10);
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "&copy; OpenStreetMap contributors",
        }).addTo(map);

        Object.entries(parishCoords).forEach(([parish, coords]) => {
            L.marker(coords)
                .addTo(map)
                .bindPopup(parish)
                .on("click", () => {
                    window.location.href = `alerts.html?lat=${coords[0]}&lon=${coords[1]}`;
                });
        });

        map.on("click", (e) => {
            const clickedCoords = e.latlng;

            const clickedMarker = L.marker(clickedCoords).addTo(map);

            const confirmSelection = confirm(`Confirm location?`);
            if (confirmSelection) {
                window.location.href = `alerts.html?lat=${clickedCoords.lat}&lon=${clickedCoords.lng}`;
                map.removeLayer(clickedMarker);
            } else {
                map.removeLayer(clickedMarker);
            }
        });
    </script>
</body>
</html>