<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/book_cab.css">
  <!--=============== Mapbox Interactive Maps ===============-->
  <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">
  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
  <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css" />
  <!--=============== REMIXICONS ===============-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css">
  <title>Cab Navigation</title>
  <style>
    #map {  
      width: 100%;
      height: 90vh; 
    }

    .book-taxi-button {
      display: block;
      margin: auto;
      padding: 10px 20px;
      background-color: #ffa600;
      color: white;
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-top:10px;
      margin-bottom: 10px;
    }

    .book-taxi-button:hover {
      background-color: #eaa903;
    }
  </style>
</head>
<body>

<nav>
  <ul>
    <li class="logo"><a href="/">UTS</a></li>
    
    <li><a href="#">Home</a></li>
    <li><a href="/account">Account</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Activity</a></li>
  </ul>
</nav>
<div class="container">
    <h1 style="color: white;">Where to?</h1>
    <div class="search-box">
        <input type="text" id="searchInput" placeholder="Search">
        <button class="voicebtn" id="voiceBtn"><i class="ri-mic-line"></i></button>
    </div>
    <div id="status"></div>
    <div id="searchResults"></div>
</div>
<button class="book-taxi-button" onclick="inter()" id="startNavigation">Book Taxi</button>
<div id="map"></div>

    
    <script type="module" src="js/config.js"></script>
    <script type="module" src="js/script.js"></script>
    <script>
      function inter() {
    
    window.location.href = '/user_inter';
  }
    </script>
</body>
</html>
