Supermercato no by @garghy64 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

acceptDefinisce e filtra il formato dei file per il tag <input type=file>
formSpecifica a quale form appartiene un elemento.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<blockquote>Inserisce citazioni in un documento HTML
autofocusAttiva un elemento al caricamento della pagina.

Users

Log in to search for users

Explore

Find inspiration

icons - social bar

Lola Harrel Project 2

Palinsesto Radio

Pagina HTML prova

Reti Informatiche

le mie materie preferite

Mare Luxus - Yachts di Lusso, Navi

I Nostri Servizi

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Supermercato</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Supermercato</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#prodotti">Prodotti</a></li>
                <li><a href="#contatti">Contatti</a></li>
                <li><a href="#feedback">Feedback</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Benvenuti a SuperMarket Plus</h2>
            <h3>Chi siamo</h3>
            <p>SuperMarket Plus è più di un semplice supermercato. Siamo il vostro partner di fiducia per una spesa quotidiana conveniente, di alta qualità e sostenibile. Dal 1990, abbiamo servito la nostra comunità con passione, innovazione e un impegno costante verso la qualità.</p>
            <h3>La nostra missione</h3>
            <p>La nostra missione è offrire ai nostri clienti prodotti freschi, sani e di alta qualità a prezzi accessibili. Ci impegniamo a creare un'esperienza di acquisto piacevole e senza stress, mettendo sempre al primo posto le esigenze dei nostri clienti.</p>
            <h3> La nostra Community</h3>
            <p> Plus è al centro della comunità. Organizziamo eventi locali, degustazioni di prodotti, corsi di cucina e molto altro. Partecipiamo attivamente a programmi di beneficenza per sostenere chi è in difficoltà.</p>
        </section>
        <section id="prodotti">
            <h2>I Nostri Prodotti</h2>
            <div class="product">
                <img src="https://d2j6dbq0eux0bg.cloudfront.net/images/73689327/4337941451.png" alt="Mela">
                <h3>Mela</h3>
                <p>Descrizione: Una mela fresca e croccante.</p>
                <p>Prezzo: €1,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="https://www.biobottega.com/media/catalog/product/cache/81cdebfeec0161cbb13a51aa3183b56e/b/i/biobottega-banane.jpg" alt="Banana">
                <h3>Banana</h3>
                <p>Descrizione: Banana matura e dolce.</p>
                <p>Prezzo: €1,50</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="https://www.gelcosurgelati.it/wp-content/uploads/2022/05/pane-e-affini-1-copy-1.png" alt="Pane">
                <h3>Pane</h3>
                <p>Descrizione: Pane fresco da forno.</p>
                <p>Prezzo: €2,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="https://sicalb.it/cdn/shop/products/ferruzzi-uova-confezioni-OPEN-XL-gabbia_1200x1200.jpg?v=1604239451" alt="Uova">
                <h3>Uova</h3>
                <p>Descrizione: Confezione di 12 uova biologiche.</p>
                <p>Prezzo: €3,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="latte-product">
                <img id="latte-img" src="path/to/latte1.jpg" alt="Latte">
                <h3 id="latte-title">Latte Marca 1</h3>
                <p id="latte-desc">Descrizione: Latte fresco intero di Marca 1.</p>
                <p id="latte-prezzo">Prezzo: €1,20</p>
                <label for="latte-brand">Marca:</label>
                <select id="latte-brand" name="brand">
                  <div class="select-container">
                    <option value="marca1">Marca 1</option>
                    <option value="marca2">Marca 2</option>
                    <option value="marca3">Marca 3</option>
                  </div>
                </select>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="pasta-product">
                <img id="pasta-img" src="path/to/pasta-penne-marca1.jpg" alt="Pasta">
                <h3 id="pasta-title">Penne Marca 1</h3>
                <p id="pasta-desc">Descrizione: Penne di grano duro Marca 1.</p>
                <p id="pasta-prezzo">Prezzo: €1,50</p>
                <label for="tipo-pasta">Tipo di Pasta:</label>
                <select id="tipo-pasta" name="tipo-pasta">
                  <div class="select-container">
                    <option value="penne">Penne</option>
                    <option value="spaghetti">Spaghetti</option>
                    <option value="fusilli">Fusilli</option>
                    <option value="rigatoni">Rigatoni</option>
                  </div>
                </select>
                <label for="pasta-brand">Marca:</label>
                <select id="pasta-brand" name="brand">
                  <div class="select-container">
                    <option value="marca1">Marca 1</option>
                    <option value="marca2">Marca 2</option>
                    <option value="marca3">Marca 3</option>
                  </div>
                </select>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product" id="biscotti-product"> 
              <img id="biscotti-img" src="path/to/biscotti-cioccolato-marca1.jpg" alt="Biscotti"> 
              <h3 id="biscotti-title">Biscotti al Cioccolato Marca 1</h3> 
              <p id="biscotti-desc">Descrizione: Biscotti croccanti al cioccolato Marca 1.</p> 
              <p id="biscotti-prezzo">Prezzo: €2,50</p> 
              <label for="tipo-biscotti">Tipo di Biscotti:</label> 
              <select id="tipo-biscotti" name="tipo-biscotti">
                <div class="select-container"> 
                  <option value="cioccolato">Cioccolato</option> 
                  <option value="vaniglia">Vaniglia</option> 
                  <option value="frollini">Frollini</option> 
                </div>
              </select> 
              <label for="biscotti-brand">Marca:</label> 
              <select id="biscotti-brand" name="brand"> 
                <div class="select-container">
                  <option value="marca1">Marca 1</option> 
                  <option value="marca2">Marca 2</option> 
                  <option value="marca3">Marca 3</option>
                </div> 
              </select> 
              <button>Aggiungi al carrello</button> 
            </div>
            <div class="product">
                <img src="path/to/succo.jpg" alt="Succo di frutta">
                <h3>Succo di frutta</h3>
                <p>Descrizione: Succo di frutta 100% naturale.</p>
                <p>Prezzo: €3,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product">
                <img src="path/to/riso.jpg" alt="Riso">
                <h3>Riso</h3>
                <p>Descrizione: Riso integrale biologico.</p>
                <p>Prezzo: €2,00</p>
                <button>Aggiungi al carrello</button>
            </div>
            <div class="product"> 
              <img src="path/to/pollo.jpg" alt="Pollo"> 
              <h3>Pollo</h3> 
              <p>Descrizione: Pollo fresco biologico.</p> 
              <p>Prezzo: €5,00</p> 
              <button>Aggiungi al carrello</button> 
            </div> 
            <div class="product"> 
              <img src="path/to/tonno.jpg" alt="Tonno"> 
              <h3>Tonno</h3> 
              <p>Descrizione: Tonno al naturale in scatola.</p> 
              <p>Prezzo: €1,80</p> 
              <button>Aggiungi al carrello</button> 
              </div> 
              <div class="product"> 
                <img src="path/to/acqua.jpg" alt="Acqua Minerale"> 
                <h3>Acqua Minerale</h3> 
                <p>Descrizione: Acqua minerale naturale.</p> 
                <p>Prezzo: €0,50</p> 
                <button>Aggiungi al carrello</button> 
              </div>
              <div class="product"> 
                <img src="path/to/elettrodomestico.jpg" alt="Elettrodomestico"> 
                <h3>Elettrodomestico</h3> 
                <p>Descrizione: Piccolo elettrodomestico per la cucina.</p> 
                <p>Prezzo: €30,00</p> 
                <button>Aggiungi al carrello</button> 
              </div> 
              <div class="product"> 
                <img src="path/to/abbigliamento.jpg" alt="Abbigliamento"> 
                <h3>Abbigliamento</h3> 
                <p>Descrizione: Vestiti alla moda per tutta la famiglia.</p> 
                <p>Prezzo: €25,00</p> 
                <button>Aggiungi al carrello</button> 
              </div> 
              <div class="product"> 
                <img src="path/to/giocattolo.jpg" alt="Giocattolo"> 
                <h3>Giocattolo</h3> 
                <p>Descrizione: Giocattolo educativo per bambini.</p> 
                <p>Prezzo: €15,00</p> 
                <button>Aggiungi al carrello</button> 
              </div>
              <div class="product"> 
                <img src="path/to/confezione-olio.jpg" alt="Confezione Olio"> 
                <h3>Confezione Olio di Oliva</h3> 
                <p>Descrizione: Confezione da 5 litri di olio di oliva extra vergine.</p> 
                <p>Prezzo: €20,00</p> 
                <button>Aggiungi al carrello</button> 
              </div>
            <!-- Aggiungi altri prodotti qui -->
        </section>
        <section id="feedback">
            <h2>Lascia il tuo Feedback</h2>
            <form id="feedback-form">
                <label for="name">Nome:</label>
                <input type="text" id="name" name="name" required>
                <label for="comment">Commento:</label>
                <textarea id="comment" name="comment" required></textarea>
                <button type="submit">Invia</button>
            </form>
            <div id="feedback-list">
                <h3>Commenti dei Clienti</h3>
                <ul>
                    <!-- I feedback verranno aggiunti qui -->
                </ul>
            </div>
        </section>
    </main>
    <footer>
        <section id="contatti">Telefono: +39 06 1234 5678<br>
          Email: info@supermarketplus.it
          <h4>Indirizzi e Orari di Apertura</h4>
          Sede Centrale: Via Roma, 123, 00100 Roma, Italia.
          Orari di Apertura: Lunedì - Sabato: 08:00 - 21:00, Domenica: 09:00 - 20:00.<br><br>
          &copy; 2024 Supermercato. Tutti i diritti riservati.
          </section>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 2rem;
}

.product {
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product img {
    max-width: 50%;
    height: auto;
    margin-bottom: 1rem;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#feedback {
    margin-top: 2rem;
}

#feedback-form {
    margin-bottom: 2rem;
}

#feedback-form label, #feedback-form input, #feedback-form textarea {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

#feedback-list ul {
    list-style-type: none;
    padding: 0;
}

#feedback-list ul li {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 1rem;
}

/* Stile base del selettore */
.select-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
  border: 2px solid #3498db;
  border-radius: 8px;
  background-color: #f7f7f7;
  font-family: 'Arial', sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Stile del dropdown */
.select-container select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  color: #333;
  appearance: none;
  cursor: pointer;
}

/* Icona del dropdown */
.select-container select:focus {
  outline: none;
  border-color: #2980b9;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Stile del menu aperto */
.select-container select option {
  padding: 10px;
  font-size: 16px;
}

.select-container::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  color: #666;
}

document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            alert('Prodotto aggiunto al carrello!');
        });
    });

    const feedbackForm = document.getElementById('feedback-form');
    const feedbackList = document.getElementById('feedback-list').querySelector('ul');

    feedbackForm.addEventListener('submit', function(event) {
        event.preventDefault();
        
        const name = document.getElementById('name').value;
        const comment = document.getElementById('comment').value;
        
        const feedbackItem = document.createElement('li');
        feedbackItem.innerHTML = `<strong>${name}</strong><p>${comment}</p>`;
        
        feedbackList.appendChild(feedbackItem);

        feedbackForm.reset();
    });

    // Gestione del prodotto latte
    const latteBrandSelect = document.getElementById('latte-brand');
    const latteImg = document.getElementById('latte-img');
    const latteTitle = document.getElementById('latte-title');
    const latteDesc = document.getElementById('latte-desc');
    const lattePrezzo = document.getElementById('latte-prezzo');

    const lattes = {
        marca1: {
            img: 'path/to/latte1.jpg',
            title: 'Latte Marca 1',
            desc: 'Descrizione: Latte fresco intero di Marca 1.',
            price: 'Prezzo: €1,20'
        },
        marca2: {
            img: 'path/to/latte2.jpg',
            title: 'Latte Marca 2',
            desc: 'Descrizione: Latte fresco intero di Marca 2.',
            price: 'Prezzo: €1,30'
        },
        marca3: {
            img: 'path/to/latte3.jpg',
            title: 'Latte Marca 3',
            desc: 'Descrizione: Latte fresco intero di Marca 3.',
            price: 'Prezzo: €1,40'
        }
    };

    latteBrandSelect.addEventListener('change', function() {
        const selectedBrand = latteBrandSelect.value;
        const latte = lattes[selectedBrand];

        latteImg.src = latte.img;
        latteTitle.textContent = latte.title;
        latteDesc.textContent = latte.desc;
        lattePrezzo.textContent = latte.price;
    });

    // Gestione del prodotto pasta
    const pastaSelect = document.getElementById('tipo-pasta');
    const pastaBrandSelect = document.getElementById('pasta-brand');
    const pastaImg = document.getElementById('pasta-img');
    const pastaTitle = document.getElementById('pasta-title');
    const pastaDesc = document.getElementById('pasta-desc');
    const pastaPrezzo = document.getElementById('pasta-prezzo');

    const pastas = {
        penne: {
            marca1: {
                img: 'path/to/pasta-penne-marca1.jpg',
                title: 'Penne Marca 1',
                desc: 'Descrizione: Penne di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-penne-marca2.jpg',
                title: 'Penne Marca 2',
                desc: 'Descrizione: Penne di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-penne-marca3.jpg',
                title: 'Penne Marca 3',
                desc: 'Descrizione: Penne di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        },
        spaghetti: {
            marca1: {
                img: 'path/to/pasta-spaghetti-marca1.jpg',
                title: 'Spaghetti Marca 1',
                desc: 'Descrizione: Spaghetti di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-spaghetti-marca2.jpg',
                title: 'Spaghetti Marca 2',
                desc: 'Descrizione: Spaghetti di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-spaghetti-marca3.jpg',
                title: 'Spaghetti Marca 3',
                desc: 'Descrizione: Spaghetti di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        },
        fusilli: {
            marca1: {
                img: 'path/to/pasta-fusilli-marca1.jpg',
                title: 'Fusilli Marca 1',
                desc: 'Descrizione: Fusilli di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-fusilli-marca2.jpg',
                title: 'Fusilli Marca 2',
                desc: 'Descrizione: Fusilli di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-fusilli-marca3.jpg',
                title: 'Fusilli Marca 3',
                desc: 'Descrizione: Fusilli di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        },
        rigatoni: {
            marca1: {
                img: 'path/to/pasta-rigatoni-marca1.jpg',
                title: 'Rigatoni Marca 1',
                desc: 'Descrizione: Rigatoni di grano duro Marca 1.',
                price: 'Prezzo: €1,50'
            },
            marca2: {
                img: 'path/to/pasta-rigatoni-marca2.jpg',
                title: 'Rigatoni Marca 2',
                desc: 'Descrizione: Rigatoni di grano duro Marca 2.',
                price: 'Prezzo: €1,60'
            },
            marca3: {
                img: 'path/to/pasta-rigatoni-marca3.jpg',
                title: 'Rigatoni Marca 3',
                desc: 'Descrizione: Rigatoni di grano duro Marca 3.',
                price: 'Prezzo: €1,70'
            }
        }
    };

    function updatePastaDetails() {
        const selectedPasta = pastaSelect.value;
        const selectedBrand = pastaBrandSelect.value;
        const pasta = pastas[selectedPasta][selectedBrand];

        pastaImg.src = pasta.img;
        pastaTitle.textContent = pasta.title;
        pastaDesc.textContent = pasta.desc;
        pastaPrezzo.textContent = pasta.price;
    }

    pastaSelect.addEventListener('change', updatePastaDetails);
    pastaBrandSelect.addEventListener('change', updatePastaDetails);

    const biscottiSelect = document.getElementById('tipo-biscotti');
    const biscottiBrandSelect = document.getElementById('biscotti-brand'); 
    const biscottiImg = document.getElementById('biscotti-img'); 
    const biscottiTitle = document.getElementById('biscotti-title'); 
    const biscottiDesc = document.getElementById('biscotti-desc'); 
    const biscottiPrezzo = document.getElementById('biscotti-prezzo'); 
    const biscotti = { 
        cioccolato: { 
            marca1: { 
                img: 'path/to/biscotti-cioccolato-marca1.jpg', 
                title: 'Biscotti al Cioccolato Marca 1', 
                desc: 'Descrizione: Biscotti al cioccolato croccanti Marca 1.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca2: { 
                img: 'path/to/biscotti-cioccolato-marca2.jpg', 
                title: 'Biscotti al Cioccolato Marca 2', 
                desc: 'Descrizione: Biscotti al cioccolato croccanti Marca 2.', 
                price: 'Prezzo: €2,60' 
            }, 
            marca3: { 
                img: 'path/to/biscotti-cioccolato-marca3.jpg', 
                title: 'Biscotti al Cioccolato Marca 3', 
                desc: 'Descrizione: Biscotti al cioccolato croccanti Marca 3.', 
                price: 'Prezzo: €2,70' 
            }, 
        } 
        vaniglia: { 
            marca1: { 
                img: 'path/to/biscotti-vaniglia-marca1.jpg', 
                title: 'Biscotti alla Vaniglia Marca 1', 
                desc: 'Descrizione: Biscotti alla vaniglia croccanti Marca 1.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca2: { 
                img: 'path/to/biscotti-vaniglia-marca2.jpg', 
                title: 'Biscotti alla Vaniglia Marca 2', 
                desc: 'Descrizione: Biscotti alla vaniglia croccanti Marca 2.',
                price: 'Prezzo: €2,40'
            },
            marca3: { 
                img: 'path/to/biscotti-vaniglia-marca3.jpg', 
                title: 'Biscotti alla Vaniglia Marca 3', 
                desc: 'Descrizione: Biscotti alla vaniglia croccanti Marca 3.',
                price: 'Prezzo: €2,40'
            },
        }
        frollini: { 
            marca1: { 
                img: 'path/to/biscotti-frollini-marca1.jpg', 
                title: 'Biscotti alla Frollini Marca 1', 
                desc: 'Descrizione: Biscotti alla frollini croccanti Marca 1.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca2: { 
                img: 'path/to/biscotti-frollini-marca2.jpg', 
                title: 'Biscotti alla Frollini Marca 2', 
                desc: 'Descrizione: Biscotti alla frollini croccanti Marca 2.', 
                price: 'Prezzo: €2,50' 
            }, 
            marca3: { 
                img: 'path/to/biscotti-frollini-marca3.jpg', 
                title: 'Biscotti alla Frollini Marca 3', 
                desc: 'Descrizione: Biscotti alla frollini croccanti Marca 3.', 
                price: 'Prezzo: €2,50' 
            }, 
        }
    }        
});