Spaces:
Sleeping
Sleeping
File size: 1,895 Bytes
b95e394 84aa492 10e9c4c b95e394 8ac09ad b95e394 |
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 |
<div id="modal" style="
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centers the modal on the page */
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
font-family: Arial, sans-serif;
z-index: 1000;
min-width: 350px; /* Minimum width of the modal */
min-height: 300px; /* Minimum height of the modal */
overflow-y: auto; /* Allow scrolling inside the modal if content is too tall */
">
<div style="text-align: right;">
<button onclick="closeModal()" style="
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
">×</button>
</div>
<img id="modal-image" style="
width: 100%;
height: auto;
border-radius: 12px;
margin-bottom: 15px;
" />
<h2 id="modal-name" style="margin-bottom: 10px; font-size: 22px; color: #333;"></h2>
<p id="modal-description" style="margin-bottom: 10px; color: #555; font-size: 16px;"></p>
<p id="modal-price" style="margin-bottom: 20px; font-size: 18px; font-weight: bold; color: #222;"></p>
<div style="display: flex; justify-content: space-between; align-items: center;">
<label for="quantity" style="font-weight: bold;">Quantity:</label>
<input type="number" id="quantity" value="1" min="1" style="
width: 60px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
" />
<button style="
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
" onclick="addToCart()">Add</button>
</div>
</div>
|