Skip to content

Commit 91ce09a

Browse files
iuuukhueeeeiuuukhueeee
authored
feat: add tea house landing page (#1)
1 parent d2da971 commit 91ce09a

File tree

1 file changed

+303
-0
lines changed

1 file changed

+303
-0
lines changed

‎tea-house/index.html

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Tea Houses</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
margin: 0;
15+
background-color: #f0f0f0;
16+
padding: 20px;
17+
box-sizing: border-box;
18+
}
19+
.form-container {
20+
background-color: white;
21+
border: 2px solid #ffa500;
22+
border-radius: 10px;
23+
padding: 20px;
24+
width: 100%;
25+
max-width: 300px;
26+
box-sizing: border-box;
27+
}
28+
h1,
29+
h2,
30+
label {
31+
color: #ffa500;
32+
}
33+
input[type="text"] {
34+
width: 100%;
35+
padding: 5px;
36+
margin-bottom: 10px;
37+
border: 1px solid #ffa500;
38+
border-radius: 5px;
39+
}
40+
.quantity-control {
41+
display: flex;
42+
align-items: center;
43+
justify-content: space-between;
44+
margin-bottom: 10px;
45+
flex-wrap: wrap;
46+
}
47+
.quantity-control label {
48+
flex: 1 1 60%;
49+
margin-bottom: 5px;
50+
}
51+
.quantity-control div {
52+
flex: 1 1 40%;
53+
display: flex;
54+
justify-content: flex-end;
55+
align-items: center;
56+
}
57+
.quantity-control button {
58+
background-color: white;
59+
border: 1px solid #ffa500;
60+
color: #ffa500;
61+
border-radius: 50%;
62+
width: 25px;
63+
height: 25px;
64+
cursor: pointer;
65+
font-size: 16px;
66+
}
67+
.quantity-control span {
68+
margin: 0 10px;
69+
}
70+
@media (max-width: 320px) {
71+
.form-container {
72+
padding: 10px;
73+
}
74+
h1 {
75+
font-size: 1.5em;
76+
}
77+
h2 {
78+
font-size: 1.2em;
79+
}
80+
}
81+
</style>
82+
</head>
83+
<body>
84+
<div id="app">
85+
<div class="form-container">
86+
<h1>TeaHouse Order Form</h1>
87+
<form id="orderForm">
88+
<input
89+
type="text"
90+
id="teahouse"
91+
placeholder="Name of TeaHouse"
92+
required
93+
/>
94+
<input
95+
type="text"
96+
id="person"
97+
placeholder="Name of Person"
98+
required
99+
/>
100+
101+
<h2>Food</h2>
102+
<div id="foodItems">
103+
<div class="quantity-control">
104+
<label for="meat">Meat</label>
105+
<div>
106+
<button type="button" onclick="updateQuantity('meat', -1)">
107+
-
108+
</button>
109+
<span id="meatQuantity">1</span>
110+
<button type="button" onclick="updateQuantity('meat', 1)">
111+
+
112+
</button>
113+
</div>
114+
</div>
115+
<div class="quantity-control">
116+
<label for="chicken">Chicken</label>
117+
<div>
118+
<button type="button" onclick="updateQuantity('chicken', -1)">
119+
-
120+
</button>
121+
<span id="chickenQuantity">1</span>
122+
<button type="button" onclick="updateQuantity('chicken', 1)">
123+
+
124+
</button>
125+
</div>
126+
</div>
127+
<div class="quantity-control">
128+
<label for="buff">Buff</label>
129+
<div>
130+
<button type="button" onclick="updateQuantity('buff', -1)">
131+
-
132+
</button>
133+
<span id="buffQuantity">1</span>
134+
<button type="button" onclick="updateQuantity('buff', 1)">
135+
+
136+
</button>
137+
</div>
138+
</div>
139+
<div class="quantity-control">
140+
<label for="pork">Pork</label>
141+
<div>
142+
<button type="button" onclick="updateQuantity('pork', -1)">
143+
-
144+
</button>
145+
<span id="porkQuantity">1</span>
146+
<button type="button" onclick="updateQuantity('pork', 1)">
147+
+
148+
</button>
149+
</div>
150+
</div>
151+
<div class="quantity-control">
152+
<label for="vegetables">Vegetables</label>
153+
<div>
154+
<button
155+
type="button"
156+
onclick="updateQuantity('vegetables', -1)"
157+
>
158+
-
159+
</button>
160+
<span id="vegetablesQuantity">1</span>
161+
<button type="button" onclick="updateQuantity('vegetables', 1)">
162+
+
163+
</button>
164+
</div>
165+
</div>
166+
<div class="quantity-control">
167+
<label for="bread">Bread</label>
168+
<div>
169+
<button type="button" onclick="updateQuantity('bread', -1)">
170+
-
171+
</button>
172+
<span id="breadQuantity">1</span>
173+
<button type="button" onclick="updateQuantity('bread', 1)">
174+
+
175+
</button>
176+
</div>
177+
</div>
178+
<div class="quantity-control">
179+
<label for="rice">Rice</label>
180+
<div>
181+
<button type="button" onclick="updateQuantity('rice', -1)">
182+
-
183+
</button>
184+
<span id="riceQuantity">1</span>
185+
<button type="button" onclick="updateQuantity('rice', 1)">
186+
+
187+
</button>
188+
</div>
189+
</div>
190+
</div>
191+
192+
<h2>Drinks</h2>
193+
<div>
194+
<input type="checkbox" id="tea" name="tea" />
195+
<label for="tea">Tea</label><br />
196+
<input type="checkbox" id="softDrinks" name="softDrinks" />
197+
<label for="softDrinks">Soft Drinks</label><br />
198+
<input type="checkbox" id="hardDrinks" name="hardDrinks" />
199+
<label for="hardDrinks">Hard Drinks</label>
200+
</div>
201+
202+
<h2>General Medicine</h2>
203+
<div>
204+
<input type="checkbox" id="paracetamol" name="paracetamol" />
205+
<label for="paracetamol">Paracetamol</label><br />
206+
<input type="checkbox" id="dimox" name="dimox" />
207+
<label for="dimox">Dimox</label><br />
208+
<input type="checkbox" id="oxygenCans" name="oxygenCans" />
209+
<label for="oxygenCans">Oxygen Cans</label>
210+
</div>
211+
212+
<h2>Other:</h2>
213+
<textarea type="text" id="other" placeholder="Other items"></textarea>
214+
<button type="submit" class="submit-button">Submit Order</button>
215+
</form>
216+
<div id="orderSummary"></div>
217+
</div>
218+
</div>
219+
<script>
220+
function updateQuantity(item, change) {
221+
const quantityElement = document.getElementById(`${item}Quantity`);
222+
let quantity = parseInt(quantityElement.textContent);
223+
quantity = Math.max(0, quantity + change);
224+
quantityElement.textContent = quantity;
225+
}
226+
227+
document
228+
.getElementById("orderForm")
229+
.addEventListener("submit", function (e) {
230+
e.preventDefault();
231+
232+
const teahouse = document.getElementById("teahouse").value;
233+
const person = document.getElementById("person").value;
234+
const other = document.getElementById("other").value;
235+
236+
let orderSummary = `<h2>Order Summary</h2>`;
237+
orderSummary += `<p><strong>TeaHouse:</strong> ${teahouse}</p>`;
238+
orderSummary += `<p><strong>Person:</strong> ${person}</p>`;
239+
orderSummary += `<h3>Food Items:</h3>`;
240+
241+
const foodItems = [
242+
"meat",
243+
"chicken",
244+
"buff",
245+
"pork",
246+
"vegetables",
247+
"bread",
248+
"rice",
249+
];
250+
foodItems.forEach((item) => {
251+
const quantity = document.getElementById(
252+
`${item}Quantity`
253+
).textContent;
254+
if (parseInt(quantity) > 0) {
255+
orderSummary += `<p>${item}: ${quantity}</p>`;
256+
}
257+
});
258+
259+
const drinks = [];
260+
const medicines = [];
261+
262+
// Select all the checkboxes in each section by name prefix
263+
const drinkCheckboxes = document.querySelectorAll(
264+
'input[name="tea"], input[name="softDrinks"], input[name="hardDrinks"]'
265+
);
266+
const medicineCheckboxes = document.querySelectorAll(
267+
'input[name="paracetamol"], input[name="dimox"], input[name="oxygenCans"]'
268+
);
269+
270+
// Collect selected drinks
271+
drinkCheckboxes.forEach((checkbox) => {
272+
if (checkbox.checked) drinks.push(checkbox.name);
273+
});
274+
275+
// Collect selected medicines
276+
medicineCheckboxes.forEach((checkbox) => {
277+
if (checkbox.checked) medicines.push(checkbox.name);
278+
});
279+
280+
let resultText = "";
281+
282+
if (drinks.length)
283+
resultText += `Selected Drinks: ${drinks.join(", ")}\n`;
284+
if (medicines.length)
285+
resultText += `Selected Medicines: ${medicines.join(", ")}`;
286+
287+
if (!resultText) resultText = "No items selected.";
288+
289+
orderSummary += resultText;
290+
291+
// other
292+
if (other) {
293+
orderSummary += `<h3>Other Items:</h3>`;
294+
orderSummary += `<p>${other}</p>`;
295+
}
296+
297+
const summaryElement = document.getElementById("orderSummary");
298+
summaryElement.innerHTML = orderSummary;
299+
summaryElement.style.display = "block";
300+
});
301+
</script>
302+
</body>
303+
</html>

0 commit comments

Comments
 (0)