Prenotazione Appuntamento by @porcamadonna - Codewith.it

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

References

forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
srcIndica la provenienza di una risorsa esterna (tramite URL).
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<h1>Titolo di intestazione di primo livello
sizeDetermina le dimensioni dell'elemento in base al valore contenuto

Users

Log in to search for users

Explore

Find inspiration

Tracker delle attività giiornalie

Un Giorno a Napoli: Itinerario Det

Piano Distruzione pianeta terra

Comunicare sul Web [Template CSS]

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>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>