index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>Test Livraison Locpin</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div id="loading" class="alert alert-info" role="alert"><b>Un instant !</b> Chargement en cours...</div>

		<div class="logos"">
			<img alt="La Poste" class="singlelogo" src="assets/img/Logo-laposte.png">
			<img alt="Locpin" class="singlelogo" src="assets/img/locpin-r-cropped.png">
		</div>

		<div class="panel panel-primary">
			<div class="panel-heading">
				<h1 class="panel-title">Localiser avec un numéro de téléphone</h1>
			</div>
			<div class="panel-content ">
				<div class="input-group">
					<span class="input-group-addon" id="basic-addon3"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
					<input id="phoneInput" type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" class="form-control input-lg" id="basic-url" aria-describedby="basic-addon3" placeholder="0123456789">
					<span class="input-group-btn">
						<button id="phoneBtn" class="btn btn-default btn-lg" type="button">OK<span class="glyphicon glyphicon-chevron-right"></button>
						</span>
					</div>
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h1 class="panel-title">Localiser avec un nom - prénom</h1>
				</div>
				<div class="panel-content ">
					<button id="geolocBtn" class="btn btn-default btn-lg" role="button" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			          Activer la géolocalisation
			        </button>
			        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
				      <div class="panel-body">
						<div class="input-group">
							<span class="input-group-addon" id="basic-addon3"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
							<input id="personInput" class="form-control input-lg" id="basic-url" aria-describedby="basic-addon3" placeholder="Prénom Nom">
							<span class="input-group-btn">
								<button id="personBtn" class="btn btn-default btn-lg" type="button">OK<span class="glyphicon glyphicon-chevron-right"></button>
								</span>
							</div>
						</div>
				      </div>
				    </div>
				</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h1 class="panel-title">Localiser avec un code-barre</h1>
				</div>
				<div class="panel-content">
					<div class="btn-group btn-group-justified" role="group">
						<!-- Realtime barcode scanning! It's incomplete for now, but you can go ahead and try it. -->
						<!-- <div class="btn-group" role="group">
							<button id="quaggaBtn" type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-barcode"></span><br/>Scan</button>
						</div> -->
						<div class="btn-group" role="group">
							<div class="fake-btn">
								<label class="btn btn-default btn-file btn-lg label-btn"><span class="glyphicon glyphicon-camera"></span> <span class="glyphicon glyphicon-barcode"></span><br/>Photographier un code-barre<input id="photoBtn" type="file" accept="image/*" style="display:none;" capture>
							</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<p id="barcode"></p>

			<!-- Barcode Realtime Scan Modal (disabled) -->
			<div class="modal fade" id="scanModal" tabindex="-1" role="dialog" aria-labelledby="scanModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="scanModalLabel">Infos livraison</h4>
						</div>
						<div id="scanModalBody" class="modal-body">
							<div id="quaggaDiv"></div>
						</div>
						<div class="modal-footer">
							<p id="code"></p>
							<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Locpin Infos Modal -->
			<div class="modal fade" id="infosModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">Infos livraison</h4>
						</div>
						<div id="modalBody" class="modal-body">
							<img src="assets/img/ajax-loader.gif" style="width: 10%; display: block; margin: 0 auto;"/>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
						</div>
					</div>
				</div>
			</div>

			<!-- Google Static Maps Image View Modal (disabled)-->
			<div class="modal fade" id="satelliteViewModal" tabindex="-1" role="dialog" aria-labelledby="satelliteViewLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="satelliteViewLabel">Photo satellite</h4>
						</div>
						<div id="satelliteViewContent" class="modal-body">
							<img src="assets/img/ajax-loader.gif" style="width: 100%; display: block; margin: 0 auto;"/>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Retour</button>
						</div>
					</div>
				</div>
			</div>


		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/quagga.js"></script>
		<script src="js/quagga_file_input.js"></script>
		<script src="js/mainpage.js"></script>
	</body>
</html>