Spaces:

Rammohan0504
/

Dynamic_Menu1

Sleeping

App Files Files Community

Rammohan0504 commited on Dec 17, 2024

Commit

3988812

verified ·

1 Parent(s): 50379b2

Update index.html

Browse files

Files changed (1) hide show

index.html +0 -153

index.html CHANGED Viewed

@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub Menu</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
-            margin: 0;
-            padding: 0;
-        }
-        h1 {
-            text-align: center;
-            color: #444;
-        }
-        .category-buttons {
-            text-align: center;
-            margin: 20px 0;
-        }
-        .category-buttons button {
-            margin: 5px;
-            padding: 10px 20px;
-            border: none;
-            background-color: #007bff;
-            color: white;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-        .category-buttons button:hover {
-            background-color: #0056b3;
-        }
-        #menu {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 20px;
-        }
-        .dish-card {
-            border: 1px solid #ddd;
-            padding: 10px;
-            border-radius: 10px;
-            width: 200px;
-            text-align: center;
-            background-color: #fff;
-            cursor: pointer;
-        }
-        .dish-card img {
-            width: 100%;
-            height: 120px;
-            object-fit: cover;
-            border-radius: 10px;
-        }
-        .details {
-            text-align: center;
-            margin: 20px;
-        }
-        .order-section {
-            margin: 20px auto;
-            text-align: center;
-        }
-        select, button {
-            margin-top: 10px;
-            padding: 8px;
-            font-size: 16px;
-        }
-    </style>
-</head>
-<body>
-    <h1>🍛 Biryani Hub Menu 🍛</h1>
-    <div class="category-buttons">
-        <button onclick="showMenu('ALL')">ALL</button>
-        <button onclick="showMenu('VEGAN')">VEGAN</button>
-        <button onclick="showMenu('HALAL')">HALAL</button>
-    </div>
-    <div id="menu"></div>
-    <div class="details" id="dish-details" style="display: none;">
-        <img id="dish-image" src="" alt="Dish Image" style="width: 200px; height: 150px; border-radius: 10px;">
-        <h2 id="dish-name"></h2>
-        <p id="dish-description"></p>
-        <div class="order-section">
-            <label for="spice-level">Spice Level:</label>
-            <select id="spice-level">
-                <option>🌶 Mild</option>
-                <option>🌶🌶 Medium</option>
-                <option>🌶🌶🌶 High</option>
-            </select>
-            <label for="portion-size">Portion Size:</label>
-            <select id="portion-size">
-                <option>🧆 Small</option>
-                <option>🍽 Medium</option>
-                <option>🍛 Large</option>
-            </select>
-            <br>
-            <button onclick="placeOrder()">Place Order</button>
-        </div>
-        <h3 id="order-status"></h3>
-    </div>
-    <script>
-        const menuData = [
-            { name: "Veg Burger", category: "VEGAN", image: "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg", description: "A delicious vegan burger with plant-based patty, lettuce, and tomato." },
-            { name: "Chicken Biryani", category: "HALAL", image: "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg", description: "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces." },
-            { name: "Paneer Butter Masala", category: "VEGAN", image: "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg", description: "Paneer cooked in a rich and creamy tomato-based gravy." },
-            { name: "Beef Steak", category: "HALAL", image: "https://upload.wikimedia.org/wikipedia/commons/d/d5/Beef_Steak.jpg", description: "Juicy beef steak served with mashed potatoes and grilled vegetables." },
-            { name: "Mushroom Soup", category: "VEGAN", image: "https://upload.wikimedia.org/wikipedia/commons/3/3c/Mushroom_Soup.jpg", description: "Creamy mushroom soup with fresh herbs." }
-        ];
-        function showMenu(category) {
-            const menu = document.getElementById("menu");
-            menu.innerHTML = ""; // Clear previous items
-            const filteredDishes = menuData.filter(dish => category === "ALL" || dish.category === category);
-            filteredDishes.forEach(dish => {
-                const card = document.createElement("div");
-                card.className = "dish-card";
-                card.innerHTML = `
-                    <img src="${dish.image}" alt="${dish.name}">
-                    <h4>${dish.name}</h4>
-                `;
-                card.onclick = () => showDetails(dish);
-                menu.appendChild(card);
-            });
-        }
-        function showDetails(dish) {
-            document.getElementById("dish-details").style.display = "block";
-            document.getElementById("dish-image").src = dish.image;
-            document.getElementById("dish-name").innerText = dish.name;
-            document.getElementById("dish-description").innerText = dish.description;
-        }
-        function placeOrder() {
-            const dishName = document.getElementById("dish-name").innerText;
-            const spiceLevel = document.getElementById("spice-level").value;
-            const portionSize = document.getElementById("portion-size").value;
-            if (dishName) {
-                document.getElementById("order-status").innerText = `✅ Order Confirmed: '${dishName}' with ${spiceLevel} spice level and ${portionSize} portion size.`;
-            } else {
-                document.getElementById("order-status").innerText = "⚠️ Please select a dish before placing an order.";
-            }
-        }
-        // Show all dishes on load
-        showMenu("ALL");
-    </script>
-</body>
-</html>