<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NayaNayaaa's Kitchen Product Post</title>
<style>
/* Basic styling for the post */
.product-post {
border: 1px solid #ccc;
padding: 20px;
max-width: 400px;
margin: 50px auto;
text-align: center;
}
#buyButton {
background-color: #4CAF50; /* Green */
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
border-radius: 5px;
}
#orderForm, #message {
margin-top: 20px;
padding: 10px;
border: 1px dashed #333;
display: none; /* Starts hidden */
text-align: left;
}
#placeOrderButton {
background-color: #008CBA; /* Blue */
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="product-post">
<p style="font-size: 24px; font-weight: bold;">Manual Product Name</p>
<p style="font-size: 18px; color: #e91e63;">$99.99</p>
<p>A little about this amazing kitchen product...</p>
<button id="buyButton" onclick="showAddressForm()">Buy Now!</button>
<div id="orderForm">
<h3 style="margin-top: 0;">Shipping Information</h3>
<label for="name">Name:</label><br>
<input type="text" id="name" required style="width: 90%; margin-bottom: 10px;"><br>
<label for="address">Address:</label><br>
<textarea id="address" required style="width: 90%; margin-bottom: 10px;"></textarea><br>
<label for="email">Email:</label><br>
<input type="email" id="email" required style="width: 90%; margin-bottom: 15px;"><br>
<button id="placeOrderButton" onclick="placeOrder()">Place Your Order</button>
</div>
<div id="message"></div>
</div>
<script>
// Function to show the address form when "Buy Now" is pressed
function showAddressForm() {
document.getElementById('buyButton').style.display = 'none'; // Hide Buy button
document.getElementById('orderForm').style.display = 'block'; // Show Form
}
// Function to handle the final order process
function placeOrder() {
// --- Input Validation (Crucial step!) ---
const name = document.getElementById('name').value;
const address = document.getElementById('address').value;
const email = document.getElementById('email').value;
if (!name || !address || !email) {
alert("Please fill out all fields before placing your order.");
return; // Stop if validation fails
}
const messageDiv = document.getElementById('message');
messageDiv.style.display = 'block'; // Show the message area
messageDiv.innerHTML = '✅ Order received! Preparing confirmation...';
// --- 1. MAILTO CALL ---
// Construct the email subject and body with the order details
const subject = encodeURIComponent("New Order for Manual Product Name");
const body = encodeURIComponent(`
--- ORDER DETAILS ---
Product: Manual Product Name
Name: ${name}
Address: ${address}
Email: ${email}
`);
const mailtoLink = `mailto:yourbusiness@example.com?subject=${subject}&body=${body}`;
// NOTE: This attempts to open the user's default email client.
window.location.href = mailtoLink;
// --- 2. 5-SECOND DELAY PRINT CALL ---
// Use setTimeout to create the delay
setTimeout(function() {
messageDiv.innerHTML = '✅ Order Placed! A confirmation email has been sent.<br>Thank you for your purchase!';
// --- PRINT CALL (Optional, as print is usually user-initiated) ---
// If you actually need a 'print' action, uncomment the next line.
// window.print();
}, 5000); // 5000 milliseconds = 5 seconds
document.getElementById('orderForm').style.display = 'none'; // Hide the form
}
</script>
</body>
</html>
No comments:
Post a Comment