Hugging Face's logo

Spaces:
lokesh341
/
voicemenu1433
Sleeping

App Files Community
lokesh341 commited on
Commit
ce5c734
·
verified ·
1 Parent(s): cd2c91d

Update templates/menu_page.html

Browse files
Files changed (1) hide show
  1. templates/menu_page.html +40 -43
templates/menu_page.html CHANGED
@@ -4,53 +4,14 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Menu - Biryani Hub</title>
8
- <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
9
-
10
- <script>
11
- // Function to fetch menu from Flask API
12
- function fetchMenu() {
13
- fetch("/menu") // Use relative path to work inside Hugging Face Space
14
- .then(response => response.json())
15
- .then(data => {
16
- if (data.success) {
17
- let menuContainer = document.getElementById("menu-list");
18
- menuContainer.innerHTML = "";
19
-
20
- data.menu.forEach(item => {
21
- let menuItem = document.createElement("div");
22
- menuItem.classList.add("menu-item");
23
-
24
- menuItem.innerHTML = `
25
- <h3>${item.name}</h3>
26
- <p><strong>Category:</strong> ${item.category}</p>
27
- <p><strong>Price:</strong> $${item.price}</p>
28
- <p><strong>Ingredients:</strong> ${item.ingredients}</p>
29
- `;
30
-
31
- menuContainer.appendChild(menuItem);
32
- });
33
- } else {
34
- document.getElementById("menu-list").innerHTML = "<p>Error fetching menu.</p>";
35
- }
36
- })
37
- .catch(error => {
38
- console.error("Error fetching menu:", error);
39
- document.getElementById("menu-list").innerHTML = "<p>Unable to load menu.</p>";
40
- });
41
- }
42
-
43
- // Load menu when page loads
44
- window.onload = fetchMenu;
45
- </script>
46
-
47
  <style>
48
  body {
49
  font-family: Arial, sans-serif;
50
  background-color: #f8f9fa;
 
51
  margin: 0;
52
  padding: 20px;
53
- text-align: center;
54
  }
55
  h1 {
56
  color: #ff5722;
@@ -62,12 +23,13 @@
62
  margin-top: 20px;
63
  }
64
  .menu-item {
65
- background-color: white;
66
  padding: 15px;
67
  margin: 10px;
68
  border-radius: 8px;
69
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
70
  width: 300px;
 
71
  }
72
  .menu-item h3 {
73
  margin: 0;
@@ -80,9 +42,44 @@
80
  </style>
81
  </head>
82
  <body>
83
- <h1>Restaurant Menu</h1>
84
  <div class="menu-container" id="menu-list">
85
  <p>Loading menu...</p>
86
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  </body>
88
  </html>
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Restaurant Menu</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <style>
9
  body {
10
  font-family: Arial, sans-serif;
11
  background-color: #f8f9fa;
12
+ text-align: center;
13
  margin: 0;
14
  padding: 20px;
 
15
  }
16
  h1 {
17
  color: #ff5722;
 
23
  margin-top: 20px;
24
  }
25
  .menu-item {
26
+ background: white;
27
  padding: 15px;
28
  margin: 10px;
29
  border-radius: 8px;
30
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
31
  width: 300px;
32
+ text-align: left;
33
  }
34
  .menu-item h3 {
35
  margin: 0;
 
42
  </style>
43
  </head>
44
  <body>
45
+ <h1>Menu</h1>
46
  <div class="menu-container" id="menu-list">
47
  <p>Loading menu...</p>
48
  </div>
49
+
50
+ <script>
51
+ function fetchMenu() {
52
+ fetch("/menu") // Fetch from Flask API
53
+ .then(response => response.json())
54
+ .then(data => {
55
+ if (data.success) {
56
+ let menuContainer = document.getElementById("menu-list");
57
+ menuContainer.innerHTML = ""; // Clear existing content
58
+
59
+ data.menu.forEach(item => {
60
+ let menuItem = document.createElement("div");
61
+ menuItem.classList.add("menu-item");
62
+
63
+ menuItem.innerHTML = `
64
+ <h3>${item.name}</h3>
65
+ <p><strong>Category:</strong> ${item.category}</p>
66
+ <p><strong>Price:</strong> $${item.price}</p>
67
+ <p><strong>Ingredients:</strong> ${item.ingredients}</p>
68
+ `;
69
+
70
+ menuContainer.appendChild(menuItem);
71
+ });
72
+ } else {
73
+ document.getElementById("menu-list").innerHTML = "<p>Error loading menu.</p>";
74
+ }
75
+ })
76
+ .catch(error => {
77
+ console.error("Error fetching menu:", error);
78
+ document.getElementById("menu-list").innerHTML = "<p>Unable to load menu.</p>";
79
+ });
80
+ }
81
+
82
+ window.onload = fetchMenu;
83
+ </script>
84
  </body>
85
  </html>