Question

<!doctype HTML>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pastimes - Admin Login</title>
<link rel="stylesheet" href="style.css">
</head>

<?php
session_start();
include('DBConn.php');

// Handle the form submission to fetch item price
if (isset($_POST['itemId'])) {
$itemId = $_POST['itemId'];

// Fetch item details from the database to get the price
$query = "SELECT itemPrice FROM tbl_item WHERE itemId = $itemId";
$result = mysqli_query($conn, $query);

if ($result) {
$itemRow = mysqli_fetch_assoc($result);
// Display an alert with the price
echo "<script>alert('Item added to cart! Price: $" . $itemRow['itemPrice'] . "');</script>";
} else {
echo "<script>alert('Error fetching item price: " . mysqli_error($conn) . "');</script>";
}
}

// Fetch all verified items from the database
$query = "SELECT * FROM tbl_item WHERE itemVerified = 1";
$result = mysqli_query($conn, $query);

if ($result) {
echo '<table>';
echo '<tr><th>Item Image</th><th>Item Name</th><th>Price</th><th>Description</th><th>Add to Cart</th></tr>';

while ($itemRow = mysqli_fetch_assoc($result)) {
echo '<tr>';
// Display item image dynamically
echo '<td><img src="' . $itemRow['itemImage'] . '" alt="' . $itemRow['itemName'] . '" width="100"></td>';
// Display item details
echo '<td>' . $itemRow['itemName'] . '</td>';
echo '<td>$' . $itemRow['itemPrice'] . '</td>';
echo '<td>' . $itemRow['itemDescription'] . '</td>';
// Add to Cart button
echo '<td><form method="POST" name="addTocart">';
echo '<input type="hidden" name="itemId" value="' . $itemRow['itemId'] . '">';
echo '<button type="submit">Add to Cart</button>';
echo '</form></td>';
echo '</tr>';
}

echo '</table>';
} else {
echo "Error fetching items: " . mysqli_error($conn);
}

// Close the connection
mysqli_close($conn);
?>

</body>
</html>

create a css styling sheet to style the images
GPT-4o mini
Here’s a CSS style sheet that will help you style the images and table in your HTML document effectively. You can save this code in a file named `style.css` and link it to your HTML document as you have already done.

```css
/* General Reset and Body Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #007bff;
color: white;
}

/* Row Hover Effect */
tr:hover {
background-color: #f1f1f1;
}

/* Image Styling */
td img {
border-radius: 10px;
transition: transform 0.2s; /* Smooth scaling effect */
}

td img:hover {
transform: scale(1.1); /* Scale image on hover */
}

/* Button Styling */
button {
background-color: #28a745; /* Green background */
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #218838; /* Darker green on hover */
}

/* Responsive Design */
@media (max-width: 600px) {
table, img {
width: 100%;
display: block;
}
td {
display: block;
text-align: center;
}
td img {
margin: 0 auto;
}
}
```

### Explanation of the CSS:
1. **General Reset**: Sets box-sizing and removes default margin and padding.
2. **Body Styling**: Sets a simple background and text color, along with padding.
3. **Table Styling**: Styles the table with full width, padding, and a box shadow for a clean look.
4. **Row Hover Effect**: Changes the background color of table rows when hovered over.
5. **Image Styling**: Applies rounded corners to images and adds a scaling effect on hover.
6. **Button Styling**: Styles the "Add to Cart" button with a green background and hover effect.
7. **Responsive Design**: Makes sure that buttons and images are displayed correctly on smaller screens.

This CSS will enhance the aesthetics of your item's display table, making it more visually appealing and user-friendly.