Hugging Face's logo

Spaces:
Swathi6
/
Biryanihub
Sleeping

App Files Community
Swathi6 commited on
Commit
d831625
·
verified ·
1 Parent(s): 3a1137f

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +186 -0
templates/menu.html CHANGED
@@ -1 +1,187 @@
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Menu</title>
8
+ <!-- Bootstrap CSS -->
9
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
10
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
11
+ <style>
12
+ /* Custom Styling */
13
+ body {
14
+ font-family: Arial, sans-serif;
15
+ background-color: #fdf4e3; /* Background color */
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ }
21
+ .container {
22
+ max-width: 900px;
23
+ }
24
+ .menu-card {
25
+ max-width: 350px;
26
+ border-radius: 15px;
27
+ overflow: hidden;
28
+ background-color: #fff;
29
+ margin: auto;
30
+ display: flex;
31
+ flex-direction: column;
32
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
33
+ }
34
+
35
+ /* Hover Effect for the card */
36
+ .menu-card:hover {
37
+ transform: scale(1.05);
38
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
39
+ }
40
+
41
+ .menu-image {
42
+ height: 200px;
43
+ width: 100%;
44
+ object-fit: cover;
45
+ border-radius: 15px 15px 0 0;
46
+ cursor: pointer;
47
+ transition: transform 0.3s ease, opacity 0.3s ease;
48
+ }
49
+
50
+ /* Hover Effect for the image */
51
+ .menu-card:hover .menu-image {
52
+ transform: scale(1.1); /* Slight zoom on hover */
53
+ opacity: 0.8; /* Slight transparency for the zoom effect */
54
+ }
55
+
56
+ .card-title {
57
+ font-size: 1.2rem;
58
+ font-weight: bold;
59
+ margin: 10px 0;
60
+ }
61
+ .card-text {
62
+ font-size: 1rem;
63
+ color: #6c757d;
64
+ }
65
+ .btn-primary {
66
+ font-size: 13px;
67
+ font-weight: bold;
68
+ border-radius: 5px;
69
+ width: 100px;
70
+ background-color: #0FAA39;
71
+ border-color: #0FAA39;
72
+ }
73
+ .btn-primary:hover {
74
+ background-color: #0FAA39;
75
+ border-color: #0FAA39;
76
+ }
77
+ .btn-primary:active,
78
+ .btn-primary:focus {
79
+ background-color: #0FAA39;
80
+ border-color: #ffffff;
81
+ box-shadow: none;
82
+ }
83
+ /* Video Modal Styling */
84
+ .modal-content {
85
+ background-color: #fff;
86
+ border-radius: 10px;
87
+ padding: 20px;
88
+ }
89
+ #modal-video {
90
+ width: 100%;
91
+ height: auto;
92
+ }
93
+ /* Modal Header Styling */
94
+ .modal-header {
95
+ border-bottom: none;
96
+ }
97
+ .modal-title {
98
+ font-size: 1.5rem;
99
+ font-weight: bold;
100
+ }
101
+ </style>
102
+ </head>
103
+ <body>
104
+
105
+ <!-- Main Content: Menu Items -->
106
+ <div class="container mt-4">
107
+ <h1 class="text-center">Menu</h1>
108
+
109
+ <!-- Looping over menu items (Dynamically rendered) -->
110
+ {% for section, items in ordered_menu.items() %}
111
+ <h3>{{ section }}</h3>
112
+ <div class="row">
113
+ {% for item in items %}
114
+ <div class="col-md-6 mb-4">
115
+ <div class="card menu-card">
116
+ <!-- Image with video URL -->
117
+ <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
118
+ data-video-url="{{ item.Video_Url__c }}"
119
+ onerror="this.src='https://via.placeholder.com/300x200.jpg?text=Image+Not+Available';">
120
+ <div class="card-body">
121
+ <h5 class="card-title">{{ item.Name }}</h5>
122
+ <p class="card-text">${{ item.Price__c }}</p>
123
+ <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
124
+ onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}')">
125
+ Add
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ {% endfor %}
131
+ </div>
132
+ {% endfor %}
133
+ </div>
134
+
135
+ <!-- View Cart Button -->
136
+ <div class="view-cart-container">
137
+ <a href="/cart" class="view-cart-button">
138
+ View Cart
139
+ </a>
140
+ </div>
141
+
142
+ <!-- Video Modal (for displaying video when an image is clicked) -->
143
+ <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
144
+ <div class="modal-dialog modal-dialog-centered">
145
+ <div class="modal-content">
146
+ <div class="modal-header">
147
+ <h5 class="modal-title" id="videoModalLabel">Video</h5>
148
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
149
+ </div>
150
+ <div class="modal-body">
151
+ <!-- Video Player -->
152
+ <video id="modal-video" class="embed-responsive-item" controls>
153
+ <source id="video-source" src="" type="video/mp4">
154
+ Your browser does not support the video tag.
155
+ </video>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- JavaScript for Handling Video Display on Image Click -->
162
+ <script>
163
+ function showVideo(videoUrl) {
164
+ const videoElement = document.getElementById('modal-video');
165
+ const videoSource = document.getElementById('video-source');
166
+ videoSource.src = videoUrl;
167
+ videoElement.load(); // Reload the video element to apply the new source
168
+ const videoModal = new bootstrap.Modal(document.getElementById('videoModal'));
169
+ videoModal.show();
170
+ }
171
+
172
+ document.querySelectorAll('.menu-image').forEach((image) => {
173
+ image.addEventListener('click', function () {
174
+ const videoUrl = image.getAttribute('data-video-url');
175
+ if (videoUrl) {
176
+ showVideo(videoUrl); // Open the video modal
177
+ } else {
178
+ alert("No video associated with this image.");
179
+ }
180
+ });
181
+ });
182
+ </script>
183
+
184
+ <!-- Bootstrap JS -->
185
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
186
+ </body>
187
+ </html>