Prenotazione Appuntamento by @porcamadonna - Codewith.it

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

References

placeholderDefinisce un testo segnaposto per un elemento input o textarea
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<body>Tag primario di un documento HTML
<i>Formatta il testo in corsivo/italico non enfatizzato
<link>Collega il documento corrente con una risorsa esterna
<div>Crea contenitori generici o sezioni in una pagina

Users

Log in to search for users

Explore

Find inspiration

Collegamenti ipertestuali

HTML con classi

Heads Or Tails Random Tally

Titolo della Pagina

Quiz su Kylie Jenner

PERGAMEMORY - I Segreti dei Bevill

Gesù nostro signore(2)

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>