Fix design responsive

Fix problemi header su mobile
Aggiunta design responsive (by Perona)
2026-05-14 14:52:04 +00:00 · 2026-04-22 09:00:31 +02:00 · 2026-04-21 09:47:02 +02:00 · 2026-04-21 09:26:38 +02:00 · 2026-04-17 12:42:43 +02:00 · 2026-04-17 12:38:14 +02:00
6 changed files with 593 additions and 53 deletions
@@ -0,0 +1,25 @@
+services:
+  techstore:
+    image: andrestork/techstore:latest
+    ports:
+      - 8069:80
+    environment:
+      DB_HOST: db
+      DB_USERNAME: techstore
+      DB_PASSWORD: changeme
+      DB_DATABASE: TechStore
+    volumes:
+      - ./images:/var/www/html/img
+    restart: unless-stopped
+    depends_on:
+      - db
+  db:
+    image: mariadb
+    restart: unless-stopped
+    environment:
+      MARIADB_ROOT_PASSWORD: changemeplease
+      MARIADB_USER: techstore
+      MARIADB_PASSWORD: changeme
+      MARIADB_DATABASE: TechStore
+    volumes:
+      - ./db:/var/lib/mysql
@@ -1,3 +1,7 @@
+<?php
+session_start();
+include '../db_conf.php';
+?>
 <!DOCTYPE html>
 <html lang="it">
 <head>
@@ -8,9 +12,6 @@
 </head>
 <body>
    <?php
-        session_start();
-        include '../db_conf.php';
-        
        if (!isset($_SESSION['id'])) {
            header('Location: ../login.php');
            exit();
@@ -1,3 +1,7 @@
+<?php
+session_start();
+include '../db_conf.php';
+?>
 <!DOCTYPE html>
 <html lang="it">
 <head>
@@ -8,9 +12,6 @@
 </head>
 <body>
    <?php
-        session_start();
-        include '../db_conf.php';
-        
        if (!isset($_SESSION['id'])) {
            header('Location: ../login.php');
            exit();
@@ -1,5 +1,150 @@
-body{
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+}
+
+body {
    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.6;
+}
+
+/* Header responsive */
+header {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: 10px !important;
+    background-color: #f2f2f2 !important;
+    border-bottom: 1px solid #ddd !important;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+header #logo {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+header #logo img {
+    height: 32px;
+    width: auto;
+}
+
+header > div:last-child {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+header button, header a button {
+    padding: 8px 12px;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+header span {
+    font-size: 14px;
+}
+
+@media (max-width: 768px) {
+    header {
+        flex-direction: row;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding: 8px !important;
+        gap: 5px;
+    }
+    
+    header #logo {
+        margin-bottom: 0;
+        flex-shrink: 0;
+    }
+    
+    header > div:last-child {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 3px;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 1;
+    }
+    
+    header button, header a button {
+        padding: 6px 8px;
+        font-size: 11px;
+        flex: 0 1 auto;
+        white-space: nowrap;
+    }
+    
+    header span {
+        font-size: 11px;
+        white-space: nowrap;
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    header {
+        padding: 6px !important;
+        gap: 3px;
+    }
+    
+    header #logo img {
+        height: 28px;
+    }
+    
+    header button, header a button {
+        padding: 5px 6px;
+        font-size: 10px;
+        margin-right: 2px !important;
+    }
+    
+    header span {
+        font-size: 10px;
+        display: none;
+    }
+    
+    .admin-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 5px;
+        min-width: 60px;
+    }
+    
+    .product-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 5px;
+        min-width: 70px;
+    }
+    
+    .cart-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 5px;
+        min-width: 60px;
+    }
 }
 .products-grid {
    display: grid;
@@ -7,6 +152,22 @@ body{
    gap: 20px;
    padding: 20px;
 }
+
+@media (max-width: 768px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 15px;
+        padding: 15px;
+    }
+}
+
+@media (max-width: 480px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 10px;
+        padding: 10px;
+    }
+}
 .product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
@@ -599,3 +760,351 @@ form button:hover {
 .btn-reset:hover {
    background-color: #138496;
 }
+
+/* ============================================
+   MEDIA QUERIES RESPONSIVE - Tablet
+   ============================================ */
+
+@media (max-width: 768px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 15px;
+        padding: 15px;
+    }
+    
+    .product-card {
+        padding: 12px;
+    }
+    
+    .product-card h3 {
+        font-size: 16px;
+    }
+    
+    .product-card button {
+        padding: 6px 12px;
+        font-size: 13px;
+        width: 100%;
+    }
+    
+    .cart-table {
+        font-size: 12px;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 8px;
+    }
+    
+    .cart-table button {
+        padding: 4px 8px;
+        font-size: 11px;
+    }
+    
+    .product-table {
+        font-size: 12px;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 8px;
+    }
+    
+    .cart-container {
+        padding: 15px;
+        margin: 15px auto;
+    }
+    
+    form {
+        padding: 15px;
+        margin: 30px auto;
+        width: 95%;
+    }
+    
+    form h2 {
+        font-size: 20px;
+        margin-bottom: 15px;
+    }
+    
+    .admin-stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+    
+    .admin-stat-card h2 {
+        font-size: 28px;
+    }
+    
+    .admin-table {
+        font-size: 12px;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 8px;
+    }
+    
+    .order-card {
+        padding: 15px;
+    }
+    
+    .order-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+}
+
+/* ============================================
+   MEDIA QUERIES RESPONSIVE - Mobile
+   ============================================ */
+
+@media (max-width: 480px) {
+    html {
+        font-size: 14px;
+    }
+    
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 10px;
+        padding: 10px;
+    }
+    
+    .product-card {
+        padding: 10px;
+    }
+    
+    .product-card h3 {
+        font-size: 14px;
+        margin: 8px 0;
+    }
+    
+    .product-card p {
+        font-size: 12px;
+    }
+    
+    .product-card button {
+        padding: 6px 10px;
+        font-size: 12px;
+        width: 100%;
+    }
+    
+    .cart-table {
+        font-size: 11px;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .cart-table button {
+        padding: 3px 6px;
+        font-size: 10px;
+        width: 100%;
+    }
+    
+    .product-table {
+        font-size: 11px;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .cart-container {
+        max-width: 100%;
+        padding: 10px;
+        margin: 10px auto;
+    }
+    
+    .cart-container h1 {
+        font-size: 18px;
+    }
+    
+    .clear-cart-btn, .checkout-btn {
+        padding: 8px 12px;
+        font-size: 12px;
+        margin-left: 0;
+        margin-right: 5px;
+        width: 48%;
+        display: inline-block;
+    }
+    
+    .cart-summary {
+        font-size: 14px;
+    }
+    
+    form {
+        max-width: 95%;
+        margin: 20px auto;
+        padding: 12px;
+        width: 95%;
+    }
+    
+    form h2 {
+        font-size: 18px;
+        margin-bottom: 12px;
+    }
+    
+    form label {
+        font-size: 13px;
+        margin-bottom: 4px;
+    }
+    
+    form input[type=\"text\"],
+    form input[type=\"password\"],
+    form input[type=\"email\"],
+    form button {
+        font-size: 14px;
+        padding: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .product-detail {
+        max-width: 95%;
+        margin: 10px auto;
+        padding: 12px;
+    }
+    
+    .product-detail h2 {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+    
+    .add-product-panel {
+        padding: 12px;
+        margin-bottom: 15px;
+    }
+    
+    .add-product-panel h2 {
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    
+    .admin-stats-grid {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+    
+    .admin-stat-card {
+        padding: 15px;
+    }
+    
+    .admin-stat-card h2 {
+        font-size: 28px;
+        margin-bottom: 8px;
+    }
+    
+    .admin-stat-card p {
+        font-size: 12px;
+    }
+    
+    .admin-table {
+        font-size: 11px;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .btn-delete, .btn-reset {
+        padding: 4px 8px;
+        font-size: 10px;
+    }
+    
+    .order-card {
+        padding: 12px;
+    }
+    
+    .order-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .order-header h3 {
+        font-size: 14px;
+    }
+    
+    .order-status {
+        padding: 4px 8px;
+        font-size: 10px;
+    }
+    
+    .order-details p {
+        font-size: 12px;
+        margin: 3px 0;
+    }
+    
+    .account-layout {
+        gap: 15px;
+        margin: 15px auto;
+        padding: 0 10px;
+    }
+    
+    .my-sidebar, .my-container {
+        flex: 1 1 100%;
+        padding: 15px;
+    }
+    
+    .my-container h1 {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+    
+    .my-container p {
+        font-size: 12px;
+        margin-bottom: 8px;
+    }
+    
+    .empty-cart {
+        padding: 25px;
+        font-size: 14px;
+    }
+}
+
+/* Header buttons styling */
+header a button,
+header button {
+    margin-left: 0 !important;
+    margin-right: 5px !important;
+    padding: 8px 12px !important;
+    background-color: #007bff !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 4px !important;
+    cursor: pointer !important;
+    transition: background-color 0.3s ease;
+}
+
+header a[href*="logout"] button,
+header a:has(button[style*="#dc3545"]) button {
+    background-color: #dc3545 !important;
+}
+
+header a[href*="login"] button,
+header a:has(button[style*="#28a745"]) button {
+    background-color: #28a745 !important;
+}
+
+header button:hover {
+    opacity: 0.9;
+}
+
+/* Responsive nav adjustments */
+@media (max-width: 768px) {
+    header a button,
+    header button {
+        margin-right: 3px !important;
+        padding: 6px 10px !important;
+        font-size: 12px !important;
+    }
+}
+
+@media (max-width: 480px) {
+    header a button,
+    header button {
+        margin-right: 3px !important;
+        padding: 6px 8px !important;
+        font-size: 11px !important;
+    }
+}
@@ -5,12 +5,13 @@ $username = getenv("DB_USERNAME") ?:'techstore';
 $password = getenv("DB_PASSWORD") ?: 'dioporco';
 $database = getenv("DB_DATABASE") ?: 'TechStore';

-// Creazione connessione
-$conn = mysqli_connect($host, $username, $password, $database);
-
-// Controllo connessione
-if ($conn->connect_error) {
-    die("Connessione fallita: " . $conn->connect_error);
+// Creazione e gestione eccezioni connessione
+try{
+    $conn = mysqli_connect($host, $username, $password, $database);
+}
+catch(Exception $e) {
+    error_log("Errore connessione database: " . $e->getMessage());
+    die("Errore di connessione al database. Riprova più tardi.");
 }

 // Opzionale: impostare charset
@@ -1,19 +1,10 @@
-<!DOCTYPE html>
-<html lang="it">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - TechStore</title>
-    <link rel="stylesheet" href="assets/style.css">
-</head>
-<body>
-    <?php
-        session_start();
-        include 'db_conf.php';
+<?php
+session_start();
+include 'db_conf.php';

-        $error = '';
+$error = '';

-        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email = $_POST['email'];
    $password = $_POST['password'];
    
@@ -45,8 +36,20 @@
    } else {
        $error = 'Errore nel database.';
    }
-        }
-    ?>
+}
+
+$conn->close();
+?>
+
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - TechStore</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
    <form action="" method="POST">
        <h2>Login</h2>
        <label for="email">Indirizzo e-mail:</label>
Author	SHA1	Message	Date
AndreStork	f01cde84a6	Fix design responsive	2026-04-22 09:00:31 +02:00
AndreStork	1836ffe086	Fix problemi header su mobile	2026-04-21 09:47:02 +02:00
AndreStork	2c2d1456d4	Aggiunta design responsive (by Perona)	2026-04-21 09:26:38 +02:00
AndreStork	00176f0424	Cambio tag immagine in compose	2026-04-17 12:42:43 +02:00
AndreStork	65fb68d68e	Aggiustamenti docker compose	2026-04-17 12:38:14 +02:00
AndreStork	65888cc865	Fix problemi sessione Apache	2026-04-17 12:05:10 +02:00
AndreStork	5fa3aa7c24	Aggiunto compose base	2026-04-15 12:13:08 +02:00
AndreStork	0e393b9318	Finalizzazione implementazione Docker	2026-04-15 11:44:15 +02:00
AndreStork	1823553f55	Fix gestione errori connessione db (password mostrata in chiaro in pagina)	2026-04-15 11:39:59 +02:00
AndreStork	cfcc449614	Implementazione variabili d'ambiente database	2026-04-15 11:26:39 +02:00
AndreStork	a8690feafc	fix: login non funzionante in apache (container)	2026-04-15 11:20:15 +02:00
AndreStork	3ffa3435a4	Fix warning session_start()	2026-04-15 11:16:44 +02:00