Scribd
Upload
6 views5 pages

Lafi

The document is an HTML template for a women's boutique website named 'Lafi Business'. It features a payment form for customers to order products using Orange Money, including geolocation functionality to enhance the user experience. The design includes a responsive layout with a navbar, hero section, and footer, all styled with CSS for a visually appealing interface.

Uploaded by

yveskoala195
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views5 pages

Lafi

The document is an HTML template for a women's boutique website named 'Lafi Business'. It features a payment form for customers to order products using Orange Money, including geolocation functionality to enhance the user experience. The design includes a responsive layout with a navbar, hero section, and footer, all styled with CSS for a visually appealing interface.

Uploaded by

yveskoala195
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lafi Business - Boutique Femme</title>
<style>
:root {
--primary-color: #e83e8c;
--secondary-color: #fff0f6;
--dark-text: #3a3a3a;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: var(--secondary-color);
color: var(--dark-text);
}

.navbar {
background: linear-gradient(135deg, #ff69b4, #e83e8c);
padding: 20px 10%;
box-shadow: 0 2px 15px rgba(232, 62, 140, 0.2);
}

.logo {
color: white;
font-size: 28px;
font-weight: bold;
letter-spacing: 1.5px;
}

.hero-section {
padding: 5% 10%;
text-align: center;
}

.order-form {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 0 25px rgba(232, 62, 140, 0.15);
max-width: 600px;
margin: 0 auto;
}

.form-title {
color: var(--primary-color);
margin-bottom: 25px;
}

.form-input {
width: 100%;
padding: 12px 20px;
margin: 10px 0;
border: 2px solid var(--primary-color);
border-radius: 30px;
font-size: 16px;
}

.gps-button {
background: #ffffff;
color: var(--primary-color);
border: 2px solid var(--primary-color);
margin: 15px 0;
transition: all 0.3s ease;
}

.gps-button:hover {
background: var(--primary-color);
color: white;
}

#map {
height: 300px;
width: 100%;
border-radius: 15px;
margin: 20px 0;
border: 2px solid var(--primary-color);
}

.submit-button {
background: var(--primary-color);
color: white;
font-weight: bold;
padding: 15px 30px;
transition: transform 0.3s ease;
}

.submit-button:hover {
transform: scale(1.05);
}

footer {
background: linear-gradient(135deg, #ff69b4, #e83e8c);
color: white;
text-align: center;
padding: 20px;
margin-top: 50px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">LAFI BUSINESS 🌸</div>
</nav>

<section class="hero-section">
<div class="order-form">
<h2 class="form-title">Commander Maintenant</h2>
<form id="paymentForm" onsubmit="event.preventDefault();
processPayment()">
<input type="tel" class="form-input"
placeholder="Votre numéro Orange Money"
pattern="(77|76|70|78)\d{7}"
required>

<input type="number" class="form-input"


placeholder="Montant en FCFA"
min="1000"
required>

<button type="button" class="form-input gps-button"


onclick="getLocation()">
📍 Activer la Géolocalisation
</button>

<div id="map"></div>

<button type="submit" class="form-input submit-button">


Payer avec Orange Money
</button>
</form>
</div>
</section>

<footer>
<p>Livraison rapide • Paiement sécurisé • Service client 24/7</p>
<p>📞 (+221) 77 123 45 67 • 📍 Dakar, Sénégal</p>
</footer>

<script>
// Géolocalisation
let userPosition = null;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
userPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
initMap();
},
error => {
alert("Erreur de localisation : " + error.message);
}
);
} else {
alert("La géolocalisation n'est pas supportée par votre navigateur.");
}
}

// Initialisation de la carte
function initMap() {
if (userPosition) {
const map = new google.maps.Map(document.getElementById("map"), {
center: userPosition,
zoom: 16
});

new google.maps.Marker({
position: userPosition,
map: map,
title: "Votre position",
icon: "http://maps.google.com/mapfiles/ms/icons/pink-dot.png"
});
}
}

// Traitement du paiement
async function processPayment() {
const phone = document.querySelector('input[type="tel"]').value;
const amount = document.querySelector('input[type="number"]').value;

if (!userPosition) {
alert("Veuillez activer la géolocalisation !");
return;
}

// À remplacer par l'appel réel à l'API Orange Money


const response = await fetch('https://votre-api.com/payment', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
phone: phone,
amount: amount,
position: userPosition
})
});

alert("Paiement initié !\nComposez *144# pour confirmer");


}
</script>

<!-- Intégration Google Maps -->


<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

You might also like