Meta Description" name="description" />
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Old Sport Fragrances</title><style>
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background: linear-gradient(to bottom, #000, #111);
color: #fff;
}
.hero {
text-align: center;
padding: 60px 20px;
}
.hero img {
width: 180px;
}
.hero h1 {
font-size: 36px;
margin: 10px 0 5px;
}
.hero p {
color: #bbb;
}
.products {
padding: 20px;
}
.products img {
width: 100%;
border-radius: 12px;
}
.cart {
background: #0d0d0d;
padding: 30px;
}
input, select {
width: 100%;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
border: none;
}
button {
background: gold;
color: black;
border: none;
padding: 10px;
margin-top: 10px;
width: 100%;
cursor: pointer;
border-radius: 8px;
}
.checkout { background: green; color: white; }
.messenger { background: #0084ff; color: white; }
.gcash {
background: #1a1a1a;
padding: 15px;
margin-top: 10px;
border-radius: 10px;
}
</style></head><body><section class="hero">
<!-- YOUR LOGO IMAGE -->
<img src="logo.jpg" alt="Old Sport Logo">
<h1>OLD SPORT</h1>
<p>Premium Fragrances Collection</p>
</section><section class="products"><!-- SHOPEE-STYLE PRODUCT GRID --><div style="display:grid;grid-template-columns:repeat(2,1fr);gap:15px;"><div style="background:#111;padding:10px;border-radius:12px;text-align:center;">
<img src="herconfession.jpg">
<h4>HER CONFESSION</h4>
<p>β±500</p>
<button onclick="addToCart('HER CONFESSION')">Add to Cart</button>
</div><div style="background:#111;padding:10px;border-radius:12px;text-align:center;">
<img src="legacy.jpg">
<h4>LEGACY</h4>
<p>β±500</p>
<button onclick="addToCart('LEGACY')">Add to Cart</button>
</div><div style="background:#111;padding:10px;border-radius:12px;text-align:center;">
<img src="luminous.jpg">
<h4>LUMINOUS</h4>
<p>β±500</p>
<button onclick="addToCart('LUMINOUS')">Add to Cart</button>
</div><div style="background:#111;padding:10px;border-radius:12px;text-align:center;">
<img src="afterhours.jpg">
<h4>AFTER HOURS</h4>
<p>β±500</p>
<button onclick="addToCart('AFTER HOURS')">Add to Cart</button>
</div></div></section><section class="cart">
<h2>π Checkout</h2><div id="cartItems"></div>
<p>Total: β±<span id="total">0</span></p><h3>Customer Details</h3>
<input type="text" id="name" placeholder="Full Name">
<input type="text" id="address" placeholder="Address">
<input type="text" id="phone" placeholder="Phone Number"><select id="payment" onchange="showPayment()">
<option value="">Select Payment</option>
<option value="GCash">GCash</option>
<option value="Cash on Delivery">Cash on Delivery</option>
</select><div id="gcashBox" class="gcash" style="display:none;">
<p><b>GCash Number:</b> 09251568934</p>
<p><b>Name:</b> OLD SPORT FRAGRANCE</p>
</div><button class="checkout" onclick="placeOrder()">Review Order</button> <button class="messenger" onclick="sendToMessenger()">Order via Messenger</button>
</section><script>
let cart = [];
let total = 0;
function addToCart(product) {
cart.push(product);
total += 500;
displayCart();
}
function displayCart() {
let items = document.getElementById("cartItems");
items.innerHTML = "";
cart.forEach(item => {
items.innerHTML += `<p>${item} - β±500</p>`;
});
document.getElementById("total").innerText = total;
}
function showPayment() {
let payment = document.getElementById("payment").value;
document.getElementById("gcashBox").style.display =
payment === "GCash" ? "block" : "none";
}
function getOrderText() {
let name = document.getElementById("name").value;
let address = document.getElementById("address").value;
let phone = document.getElementById("phone").value;
let payment = document.getElementById("payment").value;
if(name === "" || address === "" || phone === "" || payment === "") {
alert("Please complete all details!");
return null;
}
return `ORDER DETAILS:%0A
Name: ${name}%0A
Address: ${address}%0A
Phone: ${phone}%0A
Payment: ${payment}%0A%0A
Total: β±${total}`;
}
function placeOrder() {
let order = getOrderText();
if(order){
alert("Order ready! Click 'Order via Messenger'");
}
}
function sendToMessenger() {
let order = getOrderText();
if(!order) return;
let url = "https://m.me/YOUR_FACEBOOK_USERNAME?text=" + order;
window.open(url, "_blank");
}
</script></body>
</html>6
1
5KB
6KB
116.0ms
304.0ms
121.0ms