Ruota delle Cucine by @loziocristian - Codewith.it

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

Referenze

<pre>Indica una parte di testo preformattato
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<textarea>Area di testo libero espandibile per form HTML
downloadConsente di scaricare file al click di collegamento ipertestuale.
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Guida galattica per autostoppisti

I giornali online

Portfolio | DFD Design

Cascaded-Treemap

conta vocali nella stringa

Array of Colors

POESIA UNA AL GIORNO

Prep. Esame pt.4

Pagina di esempio

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>Ruota delle Cucine</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap" rel="stylesheet">
    <style>
        /* Font personalizzato e stile base */
        body {
            font-family: 'Quicksand', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f7f7f9;
            color: #333;
            margin: 0;
            padding: 20px;
            text-align: center;
            transition: transform 3s ease-out;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
            color: #333;
        }

        /* Contenitore principale della ruota */
        .ruota-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Design della ruota */
        .ruota {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 10px solid #444;
            position: relative;
            overflow: hidden;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
            transition: transform 3s ease-out;
            background: radial-gradient(circle at 50% 50%, #f7f7f9, #bbb);
        }

        /* Sezioni della ruota */
        .settore {
            position: absolute;
            width: 100%;
            height: 100%;
            clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #fff;
            font-size: 1.5em;
            text-transform: uppercase;
        }

        .settore.italiana { background-color: #E63946; transform: rotate(0deg) skewY(-30deg); }
        .settore.cinese { background-color: #F1A208; transform: rotate(90deg) skewY(-30deg); }
        .settore.greca { background-color: #457B9D; transform: rotate(180deg) skewY(-30deg); }
        .settore.messicana { background-color: #2A9D8F; transform: rotate(270deg) skewY(-30deg); }

        /* Puntatore con animazione */
        .puntatore {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 30px solid #333;
            margin-bottom: -20px;
            animation: pulse 1s infinite alternate;
        }

        /* Bottone animato */
        button {
            margin-top: 20px;
            padding: 15px 30px;
            font-size: 1.2em;
            font-weight: bold;
            background-color: #457B9D;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
        }

        button:hover {
            background-color: #1D3557;
        }

        #risultato {
            margin-top: 30px;
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
        }

        /* Animazione per puntatore */
        @keyframes pulse {
            0% { transform: translateY(0); }
            100% { transform: translateY(-5px); }
        }

        /* Animazione per rotazione della pagina */
        .giraPagina {
            animation: paginaGira 3s ease-out;
        }

        /* Keyframes per animazione rotazione della pagina */
        @keyframes paginaGira {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(20deg); }
            100% { transform: rotate(0deg); }
        }
    </style>
</head>
<body>
    <div class="ruota-container">
        <h1>Ruota delle Cucine</h1>
        <div class="puntatore"></div>
        <div class="ruota" id="ruota">
            <div class="settore italiana">Italiana</div>
            <div class="settore cinese">Cinese</div>
            <div class="settore greca">Greca</div>
            <div class="settore messicana">Messicana</div>
        </div>
        <button onclick="giraRuota()">Gira la ruota!</button>
        <p id="risultato"></p>
    </div>

    <script>
        function giraRuota() {
            // Aggiungi classe per animazione rotazione pagina
            document.body.classList.add('giraPagina');

            // Cucine e scelta casuale
            const cucine = ["Italiana", "Cinese", "Greca", "Messicana"];
            const cucinaCasuale = cucine[Math.floor(Math.random() * cucine.length)];

            // Calcola angoli di rotazione casuali
            const rotazioni = Math.floor(Math.random() * 5) + 3; // Tra 3 e 7 rotazioni
            const angolo = cucine.indexOf(cucinaCasuale) * 90 + 360 * rotazioni;

            // Rotazione animata della ruota
            const ruota = document.getElementById("ruota");
            ruota.style.transition = "transform 3s ease-out";
            ruota.style.transform = `rotate(${angolo}deg)`;

            // Rimuove l'animazione della pagina alla fine
            setTimeout(() => {
                document.body.classList.remove('giraPagina');
                document.getElementById("risultato").innerText = `Cucina: ${cucinaCasuale}`;
            }, 3000);
        }
    </script>
</body>
</html>