Spaces:
Sleeping
Sleeping
File size: 1,440 Bytes
8836d40 29a34fb 8836d40 29a34fb 8836d40 29a34fb 8836d40 29a34fb 8836d40 29a34fb 8836d40 29a34fb 8836d40 29a34fb 3a68a65 8836d40 3a68a65 8836d40 29a34fb 3a68a65 8836d40 29a34fb 85dbe98 3a68a65 8836d40 3a68a65 8836d40 85dbe98 3a68a65 8836d40 85dbe98 3a68a65 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/* Styling for the vertical food list */
#food-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
button {
width: 80%;
max-width: 400px;
padding: 10px;
font-size: 16px;
border-radius: 8px;
border: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
button:hover {
background-color: #f5f5f5;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Modal popup styling */
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
width: 400px;
max-width: 90%;
text-align: center;
}
#popup img {
width: 100%;
max-height: 200px;
object-fit: cover;
border-radius: 12px 12px 0 0;
}
#popup h3 {
margin-top: 20px;
font-size: 24px;
}
#popup table {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
}
#popup table td {
padding: 10px;
border: 1px solid #ddd;
}
/* Button to close the popup */
#close-popup {
margin-top: 20px;
background-color: #ff3333;
color: white;
border: none;
border-radius: 8px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#close-popup:hover {
background-color: #cc0000;
}
|