Subbu1304's picture
Update Templates/index.html
d5ab082 verified
raw
history blame
1.74 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Customization Assistant</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>Food Customization Assistant</h2>
</div>
<div class="chat-box" id="chat-box">
<div class="bot-message">
<p>Hi! Would you like to customize food?</p>
</div>
</div>
<div class="user-input">
<input type="text" id="user-message" placeholder="Type 'yes' or 'yeah' to start" />
<button id="submit-btn">Submit</button>
</div>
<div class="category-selection">
<select id="category-dropdown" class="dropdown" hidden>
<option value="Veg">Veg</option>
<option value="Non-Veg">Non-Veg</option>
<option value="Vegan">Vegan</option>
<option value="Pasta & Noodles">Pasta & Noodles</option>
<option value="Breads & Baked Goods">Breads & Baked Goods</option>
</select>
</div>
<div class="nutrition-selection" hidden>
<select id="nutrition-dropdown" class="dropdown">
<option value="Protein Rich">Protein Rich</option>
<option value="Low Carbs">Low Carbs</option>
<option value="Gluten-Free">Gluten-Free</option>
</select>
</div>
<div class="ingredient-selection" hidden>
<select id="ingredient-dropdown" class="dropdown">
<!-- Ingredients will be populated dynamically -->
</select>
</div>
<div class="response">
<div id="bot-response" class="bot-message"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>