Untitled Page

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EcoTask - Ekologiczne wyzwania</title>

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            background-color: #f1f8f2;
            font-family: Arial, sans-serif;
        }

        .naglowek {
            color: #198754;
            font-weight: bold;
        }

        .zadanie {
            cursor: pointer;
            transition: 0.2s;
            border: 2px solid transparent;
        }

        .zadanie:hover {
            transform: translateY(-4px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
        }

        .zadanie.wykonane {
            background-color: #d1e7dd;
            border-color: #198754;
        }

        .punkty {
            font-size: 1.5rem;
            font-weight: bold;
            color: #198754;
        }
    </style>
</head>

<body>

    <main class="container py-5">

        <header class="text-center mb-4">
            <h1 class="naglowek">🌱 EcoTask</h1>
            <p class="text-muted">
                Wykonuj ekologiczne zadania i zdobywaj punkty!
            </p>
        </header>

        <!-- Licznik punktów -->
        <div class="alert alert-success text-center shadow-sm mb-4">
            <h2 class="h4 mb-2">Twój wynik</h2>
            <div class="punkty">
                <span id="punkty">0</span> pkt
            </div>
        </div>

        <h2 class="h4 text-center mb-3">
            Wybierz zadanie do wykonania
        </h2>

        <div class="row g-3">

            <!-- Zadanie 1 -->
            <div class="col-md-4">
                <div class="card zadanie h-100 shadow-sm"
                     onclick="zrobZadanie(this, 5)">

                    <div class="card-body text-center">
                        <div class="display-4">♻️</div>

                        <h3 class="h5 card-title mt-2">
                            Segreguj śmieci
                        </h3>

                        <p class="card-text">
                            Posegreguj odpady do odpowiednich pojemników.
                        </p>

                        <span class="badge bg-success">+5 pkt</span>

                        <p class="small text-muted mt-3 mb-0">
                            Kliknij, aby oznaczyć jako wykonane
                        </p>
                    </div>
                </div>
            </div>

            <!-- Zadanie 2 -->
            <div class="col-md-4">
                <div class="card zadanie h-100 shadow-sm"
                     onclick="zrobZadanie(this, 10)">

                    <div class="card-body text-center">
                        <div class="display-4">🚲</div>

                        <h3 class="h5 card-title mt-2">
                            Wybierz rower
                        </h3>

                        <p class="card-text">
                            Zamiast samochodu wybierz rower lub spacer.
                        </p>

                        <span class="badge bg-success">+10 pkt</span>

                        <p class="small text-muted mt-3 mb-0">
                            Kliknij, aby oznaczyć jako wykonane
                        </p>
                    </div>
                </div>
            </div>

            <!-- Zadanie 3 -->
            <div class="col-md-4">
                <div class="card zadanie h-100 shadow-sm"
                     onclick="zrobZadanie(this, 15)">

                    <div class="card-body text-center">
                        <div class="display-4">💧</div>

                        <h3 class="h5 card-title mt-2">
                            Oszczędzaj wodę
                        </h3>

                        <p class="card-text">
                            Zakręcaj kran podczas mycia zębów.
                        </p>

                        <span class="badge bg-success">+15 pkt</span>

                        <p class="small text-muted mt-3 mb-0">
                            Kliknij, aby oznaczyć jako wykonane
                        </p>
                    </div>
                </div>
            </div>

        </div>

        <!-- Resetowanie wyniku -->
        <div class="text-center mt-4">
            <button class="btn btn-outline-success"
                    onclick="wyzerujWynik()">
                Wyzeruj wynik
            </button>
        </div>

    </main>

    <!-- JavaScript -->
    <script>

        let wynik = 0;

        function zrobZadanie(element, punkty) {

            // Sprawdzenie, czy zadanie jest wykonane
            if (element.classList.contains("wykonane")) {

                // Cofnięcie zadania
                wynik -= punkty;

                element.classList.remove("wykonane");

                element.querySelector(".small").textContent =
                    "Kliknij, aby oznaczyć jako wykonane";

            } else {

                // Dodanie punktów
                wynik += punkty;

                element.classList.add("wykonane");

                element.querySelector(".small").textContent =
                    "✓ Zadanie wykonane!";
            }

            // Aktualizacja licznika punktów
            document.getElementById("punkty").textContent = wynik;
        }

        function wyzerujWynik() {

            wynik = 0;

            document.getElementById("punkty").textContent = wynik;

            // Odznaczenie wszystkich zadań
            document.querySelectorAll(".zadanie").forEach(function(element) {

                element.classList.remove("wykonane");

                element.querySelector(".small").textContent =
                    "Kliknij, aby oznaczyć jako wykonane";

            });
        }

    </script>

</body>
</html>