<title>Real-Time Map</title>

<style>
    /* Ensures the map takes up the full screen */
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }
    #map {
        height: 100%;
        width: 100%;
    }
</style>

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

<!-- Leaflet JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Socket.io JS -->
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js" integrity="sha384-mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRTMh1RR0Q6+" crossorigin="anonymous"></script>
<!-- Local JS Logic -->
<script src="/scripts/script.js"></script>