add navbar

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script>
     import Map from './map.svelte';
     import ControlPanel from './ControlPanel.svelte';
+    import Navbar from './Navbar.svelte';
     // import BurstCalculator from './BurstCalculator.svelte';
 
     let coordinates = {
@@ -15,6 +16,7 @@
 </script>
 
 <main>
+    <Navbar />
     <Map bind:coordinates>
         <ControlPanel 
             {coordinates}

src/routes/Navbar.svelte

@@ -0,0 +1,79 @@
+<script>
+    // Add any interactivity if needed.
+</script>
+
+<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top custom-navbar">
+    <div class="container-fluid white-bg">
+        <a class="navbar-brand" href="/">
+            <img src="/logo.svg" alt="Logo" height="36" />
+        </a>
+        <button
+            class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarNav"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+        >
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link nav-full-height {window.location.pathname === '/' ? 'active' : ''}" href="/">Прогнозирование</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link nav-full-height {window.location.pathname === '/page2' ? 'active' : ''}" href="/page2">Слежение</a>
+                </li>
+            </ul>
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link nav-full-height {window.location.pathname === '/login' ? 'active' : ''}" href="/login">Login</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<style>
+    .custom-navbar {
+        height: 44px;
+        padding-top: 0rem;
+        padding-bottom: 0rem;
+        z-index: 1000;
+        border: none; 
+    }
+
+    .nav-link {
+        color: inherit;
+        padding-left: 1rem !important; 
+        padding-right: 1rem !important; 
+        padding-top: 12px;
+        background-color: var(--bs-light); 
+        margin-right: 1px;
+    }
+
+    .nav-link:hover {
+        color: var(--bs-light); 
+        background-color: var(--bs-primary); 
+    }
+
+    .nav-link.active {
+        color: var(--bs-light); 
+        background-color: var(--bs-primary); 
+    }
+
+    .nav-full-height {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
+    .white-bg {
+        background-color: #fff !important; 
+    }
+    .navbar-brand {
+        margin-right: 1em;
+    }
+</style>

src/routes/leaflet.svelte

@@ -109,59 +109,6 @@
         `;
       });
   });
-
-  // Forecast request function
-  const getForecast = async () => {
-    // Create request object
-    const request = {
-      ascent_rate: parseFloat(ascentRate),
-      burst_altitude: parseFloat(burstAltitude),
-      dataset: new Date().toISOString(), // Current time as dataset timestamp
-      descent_rate: parseFloat(descentRate),
-      format: "json",
-      launch_altitude: parseFloat(startHeight),
-      launch_datetime: new Date(
-        `${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}T${startTime}:00Z`
-      ).toISOString(),
-      launch_latitude: parseFloat(inputLat),
-      launch_longitude: parseFloat(inputLng),
-      profile: flightProfile === 'Normal' ? 'standard_profile' : 'custom_profile',
-      version: 2
-    };
-
-    console.log("Sending request:", request);
-
-    try {
-      // Example POST request - replace with your actual API endpoint
-      const response = await fetch('https://api.example.com/forecast', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(request)
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-      console.log("Forecast response:", data);
-      alert("Forecast request successful!");
-      // Handle the response data as needed
-    } catch (error) {
-      console.error("Error sending forecast request:", error);
-      alert("Error getting forecast: " + error.message);
-    }
-  };
-
-  // Helper function to format date as YYYY-MM-DD
-  const formatDateForAPI = (date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
 </script>
 
 <div class="container-fluid position-relative h-100">

src/routes/map.svelte

@@ -75,8 +75,8 @@
 
 <div class="map-container">
     <div id="map"></div>
-    <div class="coordinates-display">
-        Lat: {mouseLat}, Long: {mouseLng}
+    <div class="card coordinates-display">
+        <p class="card-text"><b>Lat:</b> {mouseLat}, <b>Lon:</b> {mouseLng}</p>
     </div>
     <div class="panel-container">
         <slot></slot>
@@ -92,23 +92,24 @@
 
     #map {
         width: 100%;
-        height: 100%;
+        height: calc(100% - 44px); /* Adjust height to account for navbar */
         position: absolute;
-        top: 0;
+        top: 40px;
         left: 0;
     }
 
     .coordinates-display {
         position: absolute;
-        top: 10px;
+        top: 54px;
         right: 10px;
-        background: rgba(255, 255, 255, 0.8);
-        padding: 5px 10px;
-        border-radius: 3px;
+        background: #fff; /* Remove transparency */
+        padding: 3px 8px; /* Reduce padding */
         font-family: Arial, sans-serif;
         font-size: 14px;
         z-index: 1000; /* Ensure it's above the map */
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        border: 1px solid #ccc; /* Add card border */
+        width: 150px; /* Fixed width */
     }
 
     .panel-container {