<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
background: #f5f7fa;
padding: 20px;
}
h1 {
text-align: center;
color: #111;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.card {
background: white;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
text-align: center;
}
.card img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px;
background: #ddd;
}
.name {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.category {
color: #666;
font-size: 14px;
}
.price {
font-size: 20px;
font-weight: bold;
color: #0a7c32;
margin: 8px 0;
}
input {
width: 60px;
padding: 6px;
text-align: center;
}
button {
margin-top: 20px;
width: 100%;
padding: 14px;
background: #111;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Rockland Aquarium Customer Order Form</h1>
<div id="fishGrid" class="grid"></div>
<button onclick="submitOrder()">Submit Order</button>
<script>
let fishList = [];
google.script.run.withSuccessHandler(function(data) {
fishList = data;
const grid = document.getElementById("fishGrid");
data.forEach((fish, index) => {
grid.innerHTML += `
<div class="card">
<img src="${fish.image || ''}">
<div class="name">${fish.name}</div>
<div class="category">${fish.category}</div>
<div>${fish.size}</div>
<div class="price">$${fish.price}</div>
Qty: <input type="number" min="0" value="0" id="qty${index}">
</div>
`;
});
}).getFishList();
function submitOrder() {
let order = [];
fishList.forEach((fish, index) => {
let qty = document.getElementById("qty" + index).value;
if (qty > 0) {
order.push(`${fish.name} x ${qty}`);
}
});
if (order.length === 0) {
alert("Please select at least one fish.");
return;
}
alert("Order submitted:\n\n" + order.join("\n"));
}
</script>
</body>
</html>