Hugging Face's logo

Spaces:
Swathi6
/
Biryanihub
Sleeping

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

Update templates/menu.html

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