File size: 2,177 Bytes
eb38e94 | 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 | {% extends 'base.html' %}
{% block content %}
<div class="text-center my-4">
<h1 class="text-3xl font-bold mb-4">Wildfire Alert Service</h1>
<!-- Search Bar -->
<div class="flex justify-center mb-4 relative">
<div class="relative w-96">
<input type="text" id="search" class="p-2 border rounded-l w-full" placeholder="Enter Location"
autocomplete="off">
<!-- Suggestions Dropdown -->
<div id="suggestions" class="absolute left-0 mt-1 w-full"></div>
</div>
<button id="searchBtn" class="p-2 bg-blue-500 text-white rounded-r">Search</button>
</div>
<!-- Map Display -->
<div id="map" class="w-full max-w-lg h-96 mx-auto mb-4 border-2 border-blue-500 rounded"></div>
<!-- Alert Subscription Form -->
<form id="alertForm" class="max-w-md mx-auto">
<div class="mb-4">
<label for="email" class="block text-gray-700 font-bold mb-2">Your Email:</label>
<input type="email" id="email" name="email" class="p-2 border rounded w-full" required>
</div>
<button type="submit" class="p-2 bg-blue-500 text-white rounded w-full">Receive Alerts</button>
</form>
<!-- Alert Message Display -->
<div id="message" class="mt-4 text-center"></div>
</div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<!-- JavaScript for Alert Map -->
<script src="{{ url_for('static', filename='js/alert_map.js') }}"></script>
<!-- Defining MapBox access token -->
<script>
</script>
<!-- CSS for Suggestions Dropdown -->
<style>
#suggestions {
background: white;
border: 1px solid #ccc;
border-top: none;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
}
.suggestion-item {
padding: 10px;
cursor: pointer;
text-align: left;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
</style>
{% endblock %} |