Merge primo prototipo Web UI (#2)

Reviewed-on: https://codeberg.org/ThisIsMiseryy/techstore/pulls/2
This commit is contained in:
2026-03-25 11:36:51 +01:00
2 changed files with 85 additions and 0 deletions

47
index.php Normal file
View File

@@ -0,0 +1,47 @@
<?php
include 'db_conf.php';
// Query per ottenere tutti i prodotti
$sql = "SELECT p.ProductID, p.ProductName, c.Name AS 'CategoryName', p.Description, p.Price, p.StockQuantity, p.ImagePath FROM Products p JOIN Categories c ON p.CategoryID=c.CategoryID";
$result = $conn->query($sql);
if ($result === false) {
die("Errore nella query: " . $conn->error);
}
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechStore - Prodotti</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f2f2f2; border-bottom: 1px solid #ddd;">
<div id="logo" style="font-size: 24px; font-weight: bold;">TechStore</div>
<div>
<button style="margin-left: 10px; padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Carrello</button>
<button style="margin-left: 10px; padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Accesso</button>
</div>
</header>
<?php if ($result->num_rows > 0): ?>
<div class="products-grid">
<?php while ($row = $result->fetch_assoc()): ?>
<div class="product-card">
<img src="img/<?php echo htmlspecialchars($row['ImagePath']); ?>" alt="Immagine prodotto">
<h3><?php echo htmlspecialchars($row['ProductName']); ?></h3>
<p><?php echo htmlspecialchars($row['Price']); ?>€</p>
<button>Aggiungi al carrello</button>
</div>
<?php endwhile; ?>
</div>
<?php else: ?>
<p>Nessun prodotto trovato.</p>
<?php endif; ?>
<?php $conn->close(); ?>
</body>
</html>

38
style.css Normal file
View File

@@ -0,0 +1,38 @@
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.product-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
text-align: center;
background-color: #fff;
}
.product-card img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.product-card h3 {
margin: 10px 0;
font-size: 18px;
}
.product-card p {
margin: 5px 0;
color: #666;
}
.product-card button {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
.product-card button:hover {
background-color: #0056b3;
}