Hugging Face's logo

Spaces:
SathvikGanta
/
3D-Menu
Sleeping

App Files Community
SathvikGanta commited on
Commit
8836d40
·
verified ·
1 Parent(s): 3d58636

Update components/styles.py

Browse files
Files changed (1) hide show
  1. components/styles.py +68 -67
components/styles.py CHANGED
@@ -1,91 +1,92 @@
1
- .food-card {
2
- border: 2px solid #ccc;
3
- border-radius: 12px;
4
- box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
5
- width: 350px;
6
- background-color: #fff;
7
- overflow: hidden;
8
- font-family: 'Arial', sans-serif;
9
- margin: auto;
10
- position: relative;
11
- }
12
-
13
- .card-header {
14
- position: relative;
15
- height: 150px;
16
- background: #f0f0f0;
17
  display: flex;
 
18
  align-items: center;
19
- justify-content: center;
20
- }
21
-
22
- .food-image {
23
- max-height: 100%;
24
- width: auto;
25
- object-fit: contain;
26
  }
27
 
28
- .close-btn {
29
- position: absolute;
30
- top: 10px;
31
- right: 10px;
32
- background: #ff3333;
33
- border: none;
34
- color: white;
35
- border-radius: 50%;
36
- width: 25px;
37
- height: 25px;
38
  font-size: 16px;
 
 
39
  cursor: pointer;
 
40
  }
41
 
42
- .card-content {
43
- padding: 16px;
 
44
  }
45
 
46
- .nutrition-details h3 {
47
- margin-bottom: 12px;
48
- text-align: center;
49
- font-size: 18px;
 
 
 
 
 
 
 
 
 
 
50
  }
51
 
52
- .nutrition-details table {
53
- width: 100%;
54
- border-spacing: 0;
55
- font-size: 14px;
56
  }
57
 
58
- .nutrition-details td {
59
- padding: 8px 0;
60
- border-bottom: 1px solid #eee;
 
 
 
 
 
 
61
  }
62
 
63
- .portion-details {
64
- text-align: right;
65
- font-size: 14px;
66
- margin-top: 12px;
67
- color: #555;
68
  }
69
 
70
- /* Cards for food list */
71
- #food-list {
72
- display: flex;
73
- flex-wrap: wrap;
74
- justify-content: center;
75
- gap: 20px;
 
 
 
76
  }
77
 
78
- .food-item-card {
 
79
  border: 1px solid #ddd;
80
- border-radius: 8px;
81
- padding: 10px 20px;
82
- text-align: center;
83
- font-size: 16px;
84
- cursor: pointer;
85
- transition: all 0.3s ease;
86
  }
87
 
88
- .food-item-card:hover {
89
- background-color: #f9f9f9;
90
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
91
  }
 
1
+ /* Styling for the vertical food list */
2
+ #food-list {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  display: flex;
4
+ flex-direction: column;
5
  align-items: center;
6
+ gap: 10px;
 
 
 
 
 
 
7
  }
8
 
9
+ button {
10
+ width: 80%;
11
+ max-width: 400px;
12
+ padding: 10px;
 
 
 
 
 
 
13
  font-size: 16px;
14
+ border-radius: 8px;
15
+ border: 1px solid #ddd;
16
  cursor: pointer;
17
+ transition: background-color 0.3s ease, box-shadow 0.3s ease;
18
  }
19
 
20
+ button:hover {
21
+ background-color: #f5f5f5;
22
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
  }
24
 
25
+ /* Styling for the popup */
26
+ #popup-container {
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ position: fixed;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100vw;
34
+ height: 100vh;
35
+ background-color: rgba(0, 0, 0, 0.5);
36
+ visibility: hidden;
37
+ opacity: 0;
38
+ transition: visibility 0s, opacity 0.3s;
39
  }
40
 
41
+ #popup-container.visible {
42
+ visibility: visible;
43
+ opacity: 1;
 
44
  }
45
 
46
+ .food-card {
47
+ width: 400px;
48
+ max-width: 90%;
49
+ background-color: #fff;
50
+ border-radius: 12px;
51
+ padding: 20px;
52
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
53
+ text-align: center;
54
+ position: relative;
55
  }
56
 
57
+ .food-card img {
58
+ width: 100%;
59
+ max-height: 200px;
60
+ object-fit: cover;
61
+ border-radius: 12px 12px 0 0;
62
  }
63
 
64
+ .food-card h3 {
65
+ margin-top: 20px;
66
+ font-size: 24px;
67
+ }
68
+
69
+ .food-card table {
70
+ width: 100%;
71
+ margin-top: 10px;
72
+ border-collapse: collapse;
73
  }
74
 
75
+ .food-card table td {
76
+ padding: 10px;
77
  border: 1px solid #ddd;
 
 
 
 
 
 
78
  }
79
 
80
+ .close-btn {
81
+ position: absolute;
82
+ top: 10px;
83
+ right: 10px;
84
+ background: #ff3333;
85
+ border: none;
86
+ color: white;
87
+ border-radius: 50%;
88
+ width: 30px;
89
+ height: 30px;
90
+ font-size: 18px;
91
+ cursor: pointer;
92
  }