<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Taxi-Be</title>
	<script src="assets/js/script.js"></script>
	<link rel="icon" href="assets/img/Screenshot-2024-12-02-120712-modified.ico" type="image/x-icon">
	<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/bootstrap-icons/bootstrap-icons.css">
	<link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
	<!-- Barre de navigation -->
	<nav class="navbar navbar-light bg-light fixed-top">
		<div class="container-fluid">

			<button class="navbar-toggler " type="button" data-bs-toggle="offcanvas"
				data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
				<span class="navbar-toggler-icon"></span>
			</button>
			<img src="assets/img/bus-scolaire (1).gif" alt=""
				style=" width: 50px; height: 50px; align-items: center; margin-right: 40%; background: none;">
			<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
				aria-labelledby="offcanvasNavbarLabel">
				<div class="offcanvas-header">
					<h5 class="offcanvas-title" id="offcanvasNavbarLabel">menu liste</h5>
					<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
						aria-label="Close"></button>
				</div>
				<div class="offcanvas-body">
					<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
						<!-- <li class="nav-item">
							<a class="nav-link active" aria-current="page" href="#">Acceil</a>
						</li> -->

						<!-- <li class="nav-item">
							<a class="nav-link" href="#">Don-nakely</a>
						</li> -->
					</ul>

					<div class="navbar text-center">
						Des mises à jour arrivent bientôt !🚀<br>
						- Pour le moment, seules les suggestions de recherche peuvent être effectuées. La
						recherche
						avancée sera bientôt disponible.
					</div>

					<h1 style="color: black;"> lignes des Bus disponible</h1>

					<div class="ligne-list" id="ligneList" style="color: black;">
						<!-- Les lignes seront affichées ici -->
					</div>

					<a href="jeuxmatrix.html" style="text-decoration: none; margin-left: 1%;"> <img src="jeux.gif"
							alt="" style="width: 50px; height: 50px;">
						jeux</a>
				</div>
				<div class="contact-icons">
					<!-- Facebook -->
					<a href="https://web.facebook.com/profile.php?id=100074029996836" target="_blank"
						title="Facebook">
						<i class="bi bi-facebook"></i>
					</a>
					<!-- WhatsApp -->
					<a href="https://wa.me/+261345974321" target="_blank" title="WhatsApp">
						<i class="bi bi-whatsapp"></i>
					</a>
					<!-- Email -->
					<a href="mailto:24rmstech24@gmail.com" title="Email">
						<i class="bi bi-envelope-fill"></i>
					</a>
					<!-- Mvola -->

				</div>
				<p class="mb-5">© 2024 Créé par <a href="https://web.facebook.com/profile.php?id=100074029996836"
						style="text-decoration: none;">Rms lido</a></p>
	</nav>
	<div id="myModal" class="modal">
		<div class="modal-content">
			<span class="close">&times;</span>
			<h2>Itinéraire</h2>
			<p id="itineraireContent"></p>
		</div>
	</div>

	<!-- Contenu principal -->
	<div class="container mt-4">


		<form>
			<!-- Position actuelle -->
			<h4 class="text-center mb-3" style="color: #007bff;">Trouver une ligne</h4>
			<div class="mb-3">
				<label for="currentPosition" class="form-label">Position actuelle</label>
				<input type="text" class="form-control" id="currentPosition"
					placeholder="Entrez votre position actuelle " oninput="showSuggestions('currentPosition')"
					required>
				<div id="suggestions-currentPosition" class="suggestions"></div>
			</div>
			<img src="destination.gif" alt="" style="margin-left: 43%; width: 50px; height: 50px;">
			<!-- Destination -->
			<div class="mb-3">
				<label for="destination" class="form-label">Destination</label>
				<input type="text" class="form-control" id="destination" placeholder="Entrez votre destination"
					oninput="showSuggestions('destination')" required>
				<div id="suggestions-destination" class="suggestions"></div>
			</div>
			<!-- Bouton rechercher -->
			<div class="text-center">
				<button type="button" class="btn btn-primary button" onclick="searchLine()">Rechercher</button>
			</div>
		</form>

		<div id="result" style="display: none; margin-top: 20px;" class="alert alert-info"></div>



		<div id="meteo">
			<h6 class="text-center">Antananarivo</h6>
			<p>Température : <span id="temperature"></span>°C / <span id="temperatureF"></span>°F</p>
			<p>Pluie : <span id="rain"></span></p>
			<p>Humidité : <span id="humidity"></span>%</p>
			<p>Vitesse du vent : <span id="wind"></span> km/h</p>
			<p>Dernière mise à jour : <span id="updateTime"></span></p>
			<p>Conditions : <span id="conditions"></span></p>
		</div>
	</div>
	<!-- Zone de publicité -->
	<div class="advertisement">
		<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel" data-bs-interval="30000">
			<div class="carousel-inner" id="carouselImages">
				<div class="carousel-item active">
					<img src="assets/imgpub/Go-travel-Madagascar-768x432.jpg" class="d-block w-100" alt="Image 1">
					<div class="carousel-caption-bottom">
						<a href="https://gotravelmadagascar.com/fr/#"><button
								class="btn btn-primary">visiter</button></a>
					</div>
				</div>
				<div class="carousel-item">
					<img src="assets/imgpub/cotsiss-pub.webp" class="d-block w-100" alt="Image 2">
					<div class="carousel-caption-bottom mb-5">
						<a href="https://www.cotisse-transport.com/home"><button
								class="btn btn-primary">visiter</button></a>
					</div>
				</div>
				<div class="carousel-item">
					<img src="assets/imgpub/universel.jpg" class="d-block w-100" alt="Image 3">
					<!-- <div class="carousel-caption-bottom">
						<a href="tel:+261345974321"><button class="btn btn-primary">Appeler</button></a>
					</div> -->
				</div>
				<div class="carousel-item">
					<img src="assets/imgpub/piqla-open-graph-image.png" class="d-block w-100 h-50" alt="Image 4">
					<div class="carousel-caption-bottom">
						<a href="https://www.piqla.com/"><button class="btn btn-primary">Visiter</button></a>
					</div>
				</div>
			</div>
		</div>
	</div>



	<script src="assets/bootstrap/js/bootstrap.min.js"></script>

	<script src="assets/js/stockage.Js"></script>
	<!-- Div pour afficher la notification -->
	<div id="notification">Les outils de développement sont désactivés sur cette page !</div>



</body>

</html>