Prenotazione Appuntamento by @porcamadonna - Codewith.it

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

Referenze

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<q>Indica una parte di testo come citazione breve
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
headersDetermina la relazione tra celle e celle di intestazione di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

I beneficii di avere un cane

Cheeseburger div

Il Piccolo Principe

La ricetta della torta della nonn

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prenotazione Appuntamento</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .container {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 360px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #fff;
        }

        p {
            font-size: 16px;
            margin-bottom: 20px;
        }

        input[type="date"] {
            padding: 10px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            background: #fff;
        }

        .timeslots {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .timeslot {
            background: #fff;
            color: #333;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
        }

        .timeslot.selected {
            background: #333;
            color: #fff;
        }

        .confirm-btn {
            background: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
            transition: background 0.3s;
        }

        .confirm-btn:hover {
            background: #555;
        }

        .hidden {
            display: none;
        }

        .timeslot.disabled {
            background: #e0e0e0;
            color: #a0a0a0;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Prenotazione Appuntamento</h1>
        <p>Seleziona una data e un orario disponibile:</p>
        <input type="date" id="appointment-date" min="2024-08-26">
        <div id="timeslot-container" class="hidden">
            <div class="timeslots">
                <button class="timeslot" data-time="10:00">10:00</button>
                <button class="timeslot" data-time="11:00">11:00</button>
                <button class="timeslot" data-time="12:00">12:00</button>
                <button class="timeslot" data-time="13:00">13:00</button>
                <button class="timeslot" data-time="14:00">14:00</button>
                <button class="timeslot" data-time="15:00">15:00</button>
                <button class="timeslot" data-time="16:00">16:00</button>
            </div>
            <button id="confirm" class="confirm-btn">Conferma Prenotazione</button>
        </div>
    </div>

    <script>
        const dateInput = document.getElementById('appointment-date');
        const timeslotContainer = document.getElementById('timeslot-container');
        const timeslots = document.querySelectorAll('.timeslot');
        let selectedSlot = null;

        dateInput.addEventListener('change', function() {
            const selectedDate = new Date(this.value);
            const day = selectedDate.getDay();
            
            // Abilita solo lunedì (1) e martedì (2)
            if (day === 1 || day === 2) {
                timeslotContainer.classList.remove('hidden');
                timeslots.forEach(slot => slot.classList.remove('disabled'));
            } else {
                timeslotContainer.classList.add('hidden');
                timeslots.forEach(slot => slot.classList.add('disabled'));
                alert('Puoi prenotare solo il Lunedì e il Martedì.');
            }
        });

        timeslots.forEach(slot => {
            slot.addEventListener('click', function() {
                if (!this.classList.contains('disabled')) {
                    if (selectedSlot) {
                        selectedSlot.classList.remove('selected');
                    }
                    this.classList.add('selected');
                    selectedSlot = this;
                }
            });
        });

        document.getElementById('confirm').addEventListener('click', function() {
            if (selectedSlot) {
                alert(`Hai prenotato un appuntamento per il ${dateInput.value} alle ${selectedSlot.dataset.time}`);
            } else {
                alert('Seleziona un orario prima di confermare.');
            }
        });
    </script>
</body>
</html>