<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Cake Ordering System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
h1 {
color: #ff4d4d;
text-align: center;
animation: bounce 1s infinite alternate;
}
@keyframes bounce {
to {
transform: translateY(-10px);
}
}
form {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
animation: slideIn 0.5s ease-in;
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
input,
select {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
background-color: #ff6666;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff4d4d;
}
#order-details {
margin-top: 20px;
}
.features-bar,
#history-container {
display: none;
}
.features-bar {
background-color: #fff;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.copy-btn {
background-color: #008CBA;
margin-top: 10px;
}
.add-cake-btn {
background-color: #66cc66;
}
#cake-list {
margin-top: 20px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 8px;
}
#total-amount {
font-weight: bold;
font-size: 1.2em;
margin-top: 20px;
text-align: right;
}
.emoji {
font-size: 1.5em;
margin: 0 5px;
}
</style>
</head>
<body>
<h1>🍰 Cake Ordering System 🎂</h1>
<form id=”order-form” onsubmit=”placeOrder(event)”>
<label for=”id-input”>Unique ID (If you have one):</label>
<input type=”text” id=”id-input” placeholder=”Enter your unique ID” oninput=”retrieveCustomerInfo()”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” placeholder=”Enter your name” required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” placeholder=”Enter your email” required>
<label for=”phone”>Phone:</label>
<input type=”text” id=”phone” placeholder=”Enter your phone number” required>
<label for=”address”>Address:</label>
<input type=”text” id=”address” placeholder=”Enter your address” required>
<label for=”cake-select”>Select Cake:</label>
<select id=”cake-select”>
<option value=”Chocolate Cake|1500″>Chocolate Cake – NPR 1500</option>
<option value=”Vanilla Cake|1200″>Vanilla Cake – NPR 1200</option>
<option value=”Strawberry Cake|1300″>Strawberry Cake – NPR 1300</option>
<option value=”Black Forest Cake|1600″>Black Forest Cake – NPR 1600</option>
<option value=”Red Velvet Cake|1800″>Red Velvet Cake – NPR 1800</option>
<option value=”Pineapple Cake|1400″>Pineapple Cake – NPR 1400</option>
<option value=”Butterscotch Cake|1700″>Butterscotch Cake – NPR 1700</option>
<option value=”Fruit Cake|1900″>Fruit Cake – NPR 1900</option>
<option value=”Coffee Cake|1500″>Coffee Cake – NPR 1500</option>
<option value=”Lemon Cake|1100″>Lemon Cake – NPR 1100</option>
</select>
<button type=”button” class=”add-cake-btn” onclick=”addCake()”>Add Cake</button>
<div id=”cake-list”></div>
<div id=”total-amount”>Total: NPR 0</div>
<button type=”submit”>Place Order</button>
</form>
<div id=”order-details”></div>
<div id=”history-container”>
<h2>📜 Order History</h2>
<ul id=”history-list”></ul>
</div>
<button class=”copy-btn” onclick=”copyUniqueId()”>Copy Unique ID</button>
<button onclick=”downloadJPEG()”>Download Bill as JPEG</button>
<button onclick=”toggleFeatures()”>Toggle Features</button>
<div id=”features-bar” class=”features-bar”>
<h2>🔍 Features</h2>
<ul>
<li>Copy Unique ID</li>
<li>Print Bill as JPEG</li>
<li>Order History Storage</li>
<li>Dynamic Pricing</li>
<li>Advanced Animations</li>
<li>Multiple Cake Selection</li>
<li>And many more hidden features!</li>
</ul>
</div>
<script>
let totalAmount = 0;
const selectedCakes = [];
function generateUniqueId() {
return ‘ID-‘ + Math.random().toString(36).substr(2, 9);
}
function addCake() {
const cakeSelect = document.getElementById(‘cake-select’);
const [cakeName, cakePrice] = cakeSelect.value.split(‘|’);
const increasedPrice = parseFloat(cakePrice) * 1.10;
selectedCakes.push({ cakeName, price: increasedPrice });
totalAmount += increasedPrice;
displaySelectedCakes();
updateTotalAmount();
}
function displaySelectedCakes() {
const cakeList = document.getElementById(‘cake-list’);
cakeList.innerHTML = ”;
selectedCakes.forEach((cake, index) => {
const cakeItem = document.createElement(‘div’);
cakeItem.innerHTML = `${cake.cakeName} – NPR ${cake.price.toFixed(2)} <button onclick=”removeCake(${index})”>Remove</button>`;
cakeList.appendChild(cakeItem);
});
}
function updateTotalAmount() {
document.getElementById(‘total-amount’).innerText = `Total: NPR ${totalAmount.toFixed(2)}`;
}
function removeCake(index) {
totalAmount -= selectedCakes[index].price;
selectedCakes.splice(index, 1);
displaySelectedCakes();
updateTotalAmount();
}
function placeOrder(event) {
event.preventDefault();
const name = document.getElementById(‘name’).value;
const email = document.getElementById(’email’).value;
const phone = document.getElementById(‘phone’).value;
const address = document.getElementById(‘address’).value;
const uniqueId = document.getElementById(‘id-input’).value || generateUniqueId();
let orderDetails = `
Unique ID: ${uniqueId}<br>
Name: ${name}<br>
Email: ${email}<br>
Phone: ${phone}<br>
Address: ${address}<br>
<br><strong>Ordered Cakes:</strong><br>
`;
selectedCakes.forEach(cake => {
orderDetails += `${cake.cakeName} – NPR ${cake.price.toFixed(2)}<br>`;
});
orderDetails += `<br><strong>Total Price: NPR ${totalAmount.toFixed(2)}</strong>`;
document.getElementById(‘order-details’).innerHTML = orderDetails;
storeOrder(uniqueId, orderDetails);
clearForm();
alert(‘Order placed successfully! Your Unique ID is ‘ + uniqueId);
}
function retrieveCustomerInfo() {
const uniqueId = document.getElementById(‘id-input’).value;
const orders = JSON.parse(localStorage.getItem(‘orderHistory’)) || [];
const order = orders.find(order => order.id === uniqueId);
if (order) {
const details = order.details;
document.getElementById(‘name’).value = extractDetail(details, ‘Name’);
document.getElementById(’email’).value = extractDetail(details, ‘Email’);
document.getElementById(‘phone’).value = extractDetail(details, ‘Phone’);
document.getElementById(‘address’).value = extractDetail(details, ‘Address’);
selectedCakes.length = 0; // Clear previous cakes
totalAmount = 0;
displaySelectedCakes();
updateTotalAmount();
}
}
function extractDetail(details, field) {
const regex = new RegExp(`${field}: (.*)`);
const match = details.match(regex);
return match ? match[1] : ”;
}
function storeOrder(uniqueId, orderDetails) {
const orders = JSON.parse(localStorage.getItem(‘orderHistory’)) || [];
orders.push({ id: uniqueId, details: orderDetails });
localStorage.setItem(‘orderHistory’, JSON.stringify(orders));
displayOrderHistory();
}
function displayOrderHistory() {
const historyList = document.getElementById(‘history-list’);
const orders = JSON.parse(localStorage.getItem(‘orderHistory’)) || [];
historyList.innerHTML = ”;
orders.forEach(order => {
const listItem = document.createElement(‘li’);
listItem.innerHTML = `<strong>ID:</strong> ${order.id} <br> ${order.details}`;
historyList.appendChild(listItem);
});
}
function copyUniqueId() {
const uniqueId = document.getElementById(‘id-input’).value;
if (uniqueId) {
navigator.clipboard.writeText(uniqueId)
.then(() => alert(‘Unique ID copied to clipboard!’))
.catch(err => console.error(‘Failed to copy Unique ID:’, err));
} else {
alert(‘Please enter a Unique ID to copy.’);
}
}
function downloadJPEG() {
html2canvas(document.getElementById(‘order-details’)).then(canvas => {
const link = document.createElement(‘a’);
link.href = canvas.toDataURL(‘image/jpeg’);
link.download = ‘order-bill.jpeg’;
link.click();
});
}
function toggleFeatures() {
const featuresBar = document.getElementById(‘features-bar’);
featuresBar.style.display = featuresBar.style.display === ‘none’ ? ‘block’ : ‘none’;
}
function clearForm() {
document.getElementById(‘order-form’).reset();
selectedCakes.length = 0; // Clear selected cakes
totalAmount = 0;
displaySelectedCakes();
updateTotalAmount();
}
// Load order history on page load
window.onload = displayOrderHistory;
</script>
<!– Include html2canvas library –>
<script src=”https://html2canvas.hertzen.com/dist/html2canvas.min.js”></script>
</body>
</html>