Untitled Page

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>EcoTask</title>
  <!-- Bootstrap 5 przez CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { background: #f1f5ee; }
    .kafelek {
      cursor: pointer;
      border: 2px solid #cfd8c8;
      transition: background-color .2s, border-color .2s;
      user-select: none;
    }
    .kafelek:hover { border-color: #6aa84f; }
    .kafelek.zrobione {
      background-color: #d4edda;
      border-color: #198754;
    }
  </style>
</head>
<body>
  <div class="container text-center py-5" style="max-width: 720px;">
    <h1 class="mb-4">🌱 EcoTask</h1>

    <!-- Karta statusu z licznikiem punktów -->
    <div class="alert alert-success shadow-sm fs-4" role="alert">
      Twoje punkty: <strong id="punkty">0</strong>
    </div>

    <!-- Kafelki zadań -->
    <div class="row g-3 mt-2">
      <div class="col-12 col-md-4">
        <div class="card kafelek h-100" onclick="zrobZadanie(this, 5)">
          <div class="card-body">
            <h5 class="card-title">Wyłącz światło</h5>
            <p class="card-text">Wyłącz światło, gdy wychodzisz z pokoju.</p>
            <span class="badge text-bg-success">+5 pkt</span>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card kafelek h-100" onclick="zrobZadanie(this, 10)">
          <div class="card-body">
            <h5 class="card-title">Segreguj śmieci</h5>
            <p class="card-text">Posegreguj dziś odpady w domu.</p>
            <span class="badge text-bg-success">+10 pkt</span>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card kafelek h-100" onclick="zrobZadanie(this, 15)">
          <div class="card-body">
            <h5 class="card-title">Rower zamiast auta</h5>
            <p class="card-text">Dojedź do szkoły rowerem lub pieszo.</p>
            <span class="badge text-bg-success">+15 pkt</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let wynik = 0;
    const licznik = document.getElementById("punkty");

    function zrobZadanie(element, punkty) {
      // przełączanie stanu kafelka
      const zaznaczone = element.classList.toggle("zrobione");

      // dodawanie lub odejmowanie punktów
      wynik += zaznaczone ? punkty : -punkty;

      // dynamiczne wyświetlanie 
wyniku
      licznik.textContent = wynik;
    }
  </script>
</body>
</html>