Hugging Face's logo

Spaces:
Subbu1304
/
BiryaniHubflaskSalesTeam2subbu1
Sleeping

App Files Community
Subbu1304 commited on
Commit
7b24b17
·
verified ·
1 Parent(s): 86dddcc

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +108 -3
templates/menu.html CHANGED
@@ -227,21 +227,99 @@ h1.text-center {
227
  padding-top: 0 !important; /* Removed padding */
228
  font-weight: semi-bold; /* Make the "Menu" text bold */
229
  }
230
- .fixed-top-bar {
231
  /* Remove the fixed positioning */
232
  position: relative; /* Change from fixed to relative */
233
  top: 0;
234
  left: 0;
235
  width: 100%;
236
  height: 54px;
237
- background-color: #FF6B35;
238
  color: white;
239
  padding: 15px;
240
  display: flex;
241
  justify-content: space-between;
242
  align-items: center; /* Vertically align items */
243
  z-index: 1000; /* Make sure it's still above other content */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
  .search-bar-container {
246
  padding: 10px;
247
  position: absolute;
@@ -458,7 +536,7 @@ form-check-input addon-option{
458
  </head>
459
  <body>
460
 
461
- <div class="fixed-top-bar">
462
  <!-- Avatar and Dropdown -->
463
  <div class="avatar-dropdown-container">
464
  <div class="avatar-icon">
@@ -477,8 +555,35 @@ form-check-input addon-option{
477
  <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
478
  <i class="bi bi-search search-icon"></i> <!-- Search icon inside the input -->
479
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
480
  </div>
481
 
 
482
  <!-- Category Filter with Custom Radio Buttons -->
483
  <form method="get" action="/menu" class="text-center mb-4">
484
  <label class="form-label fw-bold">Select a Category:</label>
 
227
  padding-top: 0 !important; /* Removed padding */
228
  font-weight: semi-bold; /* Make the "Menu" text bold */
229
  }
230
+ /* .fixed-top-bar {
231
  /* Remove the fixed positioning */
232
  position: relative; /* Change from fixed to relative */
233
  top: 0;
234
  left: 0;
235
  width: 100%;
236
  height: 54px;
237
+ background: linear-gradient(135deg, #000000, #434343);
238
  color: white;
239
  padding: 15px;
240
  display: flex;
241
  justify-content: space-between;
242
  align-items: center; /* Vertically align items */
243
  z-index: 1000; /* Make sure it's still above other content */
244
+ } */
245
+ .fixed-top-bar {
246
+ position: fixed;
247
+ top: 0;
248
+ left: 0;
249
+ width: 100%;
250
+ background-color: #fff; /* Background color for the top bar */
251
+ display: flex;
252
+ justify-content: space-between;
253
+ align-items: center;
254
+ padding: 10px 20px;
255
+ z-index: 1000;
256
+ }
257
+
258
+ .logo-search-container {
259
+ display: flex;
260
+ align-items: center;
261
+ justify-content: center;
262
+ flex-grow: 1; /* Allow this section to take up available space */
263
+ position: relative;
264
+ }
265
+
266
+ .logo {
267
+ margin-right: 15px; /* Space between logo and search bar */
268
+ }
269
+
270
+ .logo-img {
271
+ height: 40px; /* Adjust logo size */
272
+ width: auto;
273
  }
274
+
275
+
276
+
277
+ .search-bar-container {
278
+ display: flex;
279
+ align-items: center;
280
+ width: 70%; /* Adjust the width as needed */
281
+ max-width: 600px; /* Optional: limit the maximum width */
282
+ }
283
+
284
+ .search-bar-container input {
285
+ width: 100%; /* Make the input field take up all available space */
286
+ padding: 10px;
287
+ font-size: 14px;
288
+ border-radius: 25px; /* Round the edges of the input */
289
+ border: 1px solid #ccc;
290
+ }
291
+
292
+ .search-icon {
293
+ position: absolute;
294
+ right: 15px;
295
+ pointer-events: none;
296
+ font-size: 16px;
297
+ }
298
+
299
+ .avatar-dropdown-container {
300
+ display: flex;
301
+ align-items: center;
302
+ }
303
+
304
+ .avatar-icon {
305
+ width: 40px;
306
+ height: 40px;
307
+ background-color: #f0f0f0;
308
+ border-radius: 50%;
309
+ display: flex;
310
+ justify-content: center;
311
+ align-items: center;
312
+ font-weight: bold;
313
+ margin-left: 10px;
314
+ }
315
+
316
+
317
+
318
+
319
+
320
+
321
+
322
+
323
  .search-bar-container {
324
  padding: 10px;
325
  position: absolute;
 
536
  </head>
537
  <body>
538
 
539
+ <!-- <div class="fixed-top-bar">
540
  <!-- Avatar and Dropdown -->
541
  <div class="avatar-dropdown-container">
542
  <div class="avatar-icon">
 
555
  <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
556
  <i class="bi bi-search search-icon"></i> <!-- Search icon inside the input -->
557
  </div>
558
+ </div> -->
559
+ <div class="fixed-top-bar">
560
+ <!-- Logo and Search Bar Section -->
561
+ <div class="logo-search-container">
562
+ <div class="logo">
563
+ <!-- Logo image or text -->
564
+ <img src="path-to-your-logo.png" alt="Logo" class="logo-img">
565
+ </div>
566
+
567
+ <div class="search-bar-container">
568
+ <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
569
+ <i class="bi bi-search search-icon"></i> <!-- Search icon inside the input -->
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Avatar and Dropdown -->
574
+ <div class="avatar-dropdown-container">
575
+ <div class="avatar-icon">
576
+ <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
577
+ </div>
578
+ <div class="dropdown-menu">
579
+ <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
580
+ <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
581
+ <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
582
+ </div>
583
+ </div>
584
  </div>
585
 
586
+
587
  <!-- Category Filter with Custom Radio Buttons -->
588
  <form method="get" action="/menu" class="text-center mb-4">
589
  <label class="form-label fw-bold">Select a Category:</label>