Untitled Page

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projekt EcoTask</title>
    <!-- Najnowszy Bootstrap 5 CDN -->
    <link href="https://jsdelivr.net" rel="stylesheet">
    <!-- Ikony Bootstrap (opcjonalnie dla ikony listka w nagłówku) -->
    <link href="https://jsdelivr.net" rel="stylesheet">
    <style>
        /* Styl dla zaznaczonego kafelka zadania */
        .task-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .task-card.active-task {
            background-color: #d1e7dd !important; /* Zielone tło */
            border-color: #a3cfbb !important;     /* Zielone obramowanie */
        }
    </style>
</head>
<body class="bg-light">

    <div class="container min-vh-100 d-flex flex-column justify-content-center align-items-center py-5">
        
        <!-- Nagłówek główny -->
        <h1 class="mb-4 text-success fw-bold">
            <i class="bi bi-leaf-fill"></i> EcoTask
        </h1>

        <!-- Widoczny element statusu (karta alertu z licznikiem) -->
        <div class="alert alert-info text-center w-100 style-alert mb-4 shadow-sm" style="max-width: 500px;" role="alert">
            <h4 class="alert-heading mb-1">Twój Wynik</h4>
            <span class="fs-2 fw-bold" id="punkty">0</span> <span class="fs-4">pkt</span>
        </div>

        <!-- Kontener na kafelki zadań ekologicznych -->
        <div class="row g-3 w-100 justify-content-center" style="max-width: 800px;">
            
            <!-- Kafelek 1 -->
            <div class="col-md-4">
                <div class="card h-100 text-center shadow-sm task-card text-dark bg-white" onclick="zrobZadanie(this, 5)">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <h5 class="card-title mb-3">Zakręcenie wody podczas mycia zębów</h5>
                        <span class="badge bg-success fs-6 align-self-center">+5 pkt</span>
                    </div>
                </div>
            </div>

            <!-- Kafelek 2 -->
            <div class="col-md-4">
                <div class="card h-100 text-center shadow-sm task-card text-dark bg-white" onclick="zrobZadanie(this, 10)">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <h5 class="card-title mb-3">Używanie torby wielorazowej na zakupach</h5>
                        <span class="badge bg-success fs-6 align-self-center">+10 pkt</span>
                    </div>
                </div>
            </div>

            <!-- Kafelek 3 -->
            <div class="col-md-4">
                <div class="card h-100 text-center shadow-sm task-card text-dark bg-white" onclick="zrobZadanie(this, 15)">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <h5 class="card-title mb-3">Posadzenie rośliny miododajnej</h5>
                        <span class="badge bg-success fs-6 align-self-center">+15 pkt</span>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!-- Implementacja logiki w JavaScript -->
    <script>
        // Globalna zmienna przechowująca aktualny ogólny wynik
        let sumaPunktow = 0;

        /**
         * Funkcja obsługująca kliknięcie w kafelek zadania.
         * @param {HTMLElement} element - Kliknięty element kafelka (this)
         * @param {number} punkty - Liczba punktów przypisana do zadania
         */
        function zrobZadanie(element, punkty) {
            // Sprawdzenie, czy kafelek posiada już klasę aktywnego zaznaczenia
            const czyZaznaczone = element.classList.contains('active-task');

            if (!czyZaznaczone) {
                // Sytuacja: ZAZNACZENIE ZADANIA
                element.classList.add('active-task'); // Dodanie zielonego tła/obramowania
                sumaPunktow += punkty;               // Dodanie punktów do ogólnego wyniku
            } else {
                // Sytuacja: ODZNACZENIE ZADANIA (ponowne kliknięcie)
                element.classList.remove('active-task'); // Usunięcie stylu zaznaczenia
                sumaPunktow -= punkty;                  // Odjęcie punktów od ogólnego wyniku
            }

            // Dynamiczne zaktualizowanie wyniku wyświetlanego na ekranie
            document.getElementById('punkty').innerText = sumaPunktow;
        }
    </script>

    <!-- Skrypt Bootstrap 5 (opcjonalny, wymagany do komponentów JS Bootstrapa) -->
    <script src="https://jsdelivr.net"></script>
</body>
</html>