Dodanie grupy dla kanałow tematycznych. Porządki w theme.css

2025-12-17 15:45:19 +01:00
parent 345fa23f84
commit 0203e95cfc
7 changed files with 252 additions and 207 deletions
--- a/src/content/internet-telewizja/tv-addons.yaml
+++ b/src/content/internet-telewizja/tv-addons.yaml
@@ -24,8 +24,10 @@ dodatki:
          - Bogaty
        12m: 24.99
        bezterminowo: 28.99
+  
  - id: canal_super_sport
    nazwa: CANAL+ Super Sport
+    tid: 48
    typ: checkbox
    opis: Pakiet sportowy Canal+.
    cena:
@@ -38,9 +40,10 @@ dodatki:
          - Bogaty
        12m: 64.99
        bezterminowo: 68.99
-    tid: 48
+  
  - id: cinemax
    nazwa: Cinemax
+    tid: 18
    typ: checkbox
    opis: Kanały Cinemax.
    cena:
@@ -55,9 +58,9 @@ dodatki:
          - Optimum
          - Platinum
        bezterminowo: 14.9
-    tid: 18
  - id: eleven
    nazwa: Eleven
+    tid: 61
    typ: checkbox
    opis: Kanały Eleven Sports.
    cena:
@@ -67,9 +70,10 @@ dodatki:
          - Bogaty
        12m: 15
        bezterminowo: 25
-    tid: 61
+
  - id: filmbox
    nazwa: FilmBox+
+    tid: 19
    typ: checkbox
    opis: Kanały FilmBox.
    cena:
@@ -79,10 +83,13 @@ dodatki:
          - Bogaty
        12m: 10
        bezterminowo: 15
-    tid: 19
+    
  - id: hbo_max_podstawowy
    nazwa: HBO + Max Podstawowy
+    tid: 20
    typ: checkbox
+    group: hbo_max
+    group_mode: single
    opis: |
      W ramach Pakietu Podstawowego HBO Max możesz oglądać filmy i seriale w jakości FullHD na dwóch urządzeniach jednocześnie.
      Pakiet Podstawowy HBO Max to również dostęp do bogatej Biblioteki TVN oraz możliwość śledzenia kanału live TVN.
@@ -97,10 +104,13 @@ dodatki:
          - Bogaty
        12m: 27.99
        bezterminowo: 29.99
-    tid: 20
+
  - id: hbo_max_standardowy
    nazwa: HBO + Max Standardowy
+    tid: 96
    typ: checkbox
+    group: hbo_max
+    group_mode: single
    opis: HBO + Max (wariant standardowy).
    cena:
      - pakiety:
@@ -112,10 +122,13 @@ dodatki:
          - Bogaty
        12m: 36.99
        bezterminowo: 39.99
-    tid: 96
+    
  - id: hbo_max_premium
    nazwa: HBO + Max Premium
+    tid: 97
    typ: checkbox
+    group: hbo_max
+    group_mode: single
    opis: HBO + Max (wariant premium).
    cena:
      - pakiety:
@@ -127,9 +140,10 @@ dodatki:
          - Bogaty
        12m: 44.99
        bezterminowo: 49.99
-    tid: 97
+    
  - id: wiecej_sportu_plus
    nazwa: Więcej Sportu Plus
+    tid: 79
    typ: checkbox
    opis: Dodatkowy pakiet sportowy.
    cena:
@@ -139,9 +153,10 @@ dodatki:
          - Bogaty
        12m: 15
        bezterminowo: 25
-    tid: 79
+    
  - id: wiecej_erotyki
    nazwa: Więcej Erotyki
+    tid: 80
    typ: checkbox
    opis: Pakiet kanałów erotycznych.
    cena:
@@ -151,10 +166,12 @@ dodatki:
          - Bogaty
        12m: 15
        bezterminowo: 25
-    tid: 80
-  - id: disney_standard
+    
+  - id: _standard
    nazwa: Disney+ Standard
    typ: checkbox
+    group: disney
+    group_mode: single
    tid: 10001
    opis: |
      Historie na całe życie czekają. Odkryj hity filmowe, nowe seriale i produkcje oryginalne ze świata Disneya, Pixara, Gwiezdnych wojen, Marvela, a także produkcje Hulu, National Geographic i FX. 
@@ -178,9 +195,12 @@ dodatki:
          - Korzystny
          - Bogaty
        bezterminowo: 34.99
+  
  - id: disney_premium
    nazwa: Disney+ Premium
    typ: checkbox
+    group: disney
+    group_mode: single
    tid: 10002
    opis: |
      Historie na całe życie czekają. Odkryj hity filmowe, nowe seriale i produkcje oryginalne ze świata Disneya, Pixara, Gwiezdnych wojen, Marvela, a także produkcje Hulu, National Geographic i FX. 
--- a/src/islands/Internet/InternetAddonsModal.jsx
+++ b/src/islands/Internet/InternetAddonsModal.jsx
@@ -17,10 +17,8 @@ export default function InternetAddonsModal({
  isOpen,
  onClose,
  plan,
-
  phoneCards = [],
  addons = [],
-
  cenaOpis = "zł / mies.",
 }) {
  const phonePlans = useMemo(() => mapPhoneYamlToPlans(phoneCards), [phoneCards]);
--- a/src/islands/Internet/InternetCards.jsx
+++ b/src/islands/Internet/InternetCards.jsx
@@ -8,7 +8,7 @@ function formatMoney(amount, currency = "PLN") {
  if (typeof amount !== "number" || Number.isNaN(amount)) return "";
  try {
    return new Intl.NumberFormat("pl-PL", {
-      style: "currency",
+      style: "",
      currency,
      maximumFractionDigits: 0,
    }).format(amount);
--- a/src/islands/modals/sections/TvAddonsSection.jsx
+++ b/src/islands/modals/sections/TvAddonsSection.jsx
@@ -14,10 +14,26 @@ export default function TvAddonsSection({
  setTvTerm,
  tvAddonsPrice,
 }) {
-  const toggleCheckboxAddon = (id) => {
+
+  const toggleCheckboxAddon = (addon) => {
    setSelectedQty((prev) => {
      const next = { ...prev };
-      next[id] = (next[id] || 0) > 0 ? 0 : 1;
+
+      const isOn = (next[addon.id] || 0) > 0;
+      const willTurnOn = !isOn;
+
+      // ✅ jeśli grupa "single" i włączamy -> wyłącz inne z tej grupy
+      if (willTurnOn && addon.group && addon.group_mode === "single") {
+        for (const a of tvAddonsVisible) {
+          if (a.id !== addon.id && a.group === addon.group) {
+            next[a.id] = 0;
+          }
+        }
+      }
+
+      // toggle bieżącego
+      next[addon.id] = willTurnOn ? 1 : 0;
+
      return next;
    });
  };
@@ -37,12 +53,12 @@ export default function TvAddonsSection({

    if (!isQty) {
      return (
-<label class="f-addon-item f-addon-item--tv" key={"tv-" + a.id}>
+        <label class="f-addon-item f-addon-item--tv" key={"tv-" + a.id}>
          <div class="f-addon-checkbox">
            <input
              type="checkbox"
              checked={qty > 0}
-      onChange={() => toggleCheckboxAddon(a.id)}
+              onChange={() => toggleCheckboxAddon(a)}
            />
          </div>

@@ -95,7 +111,7 @@ export default function TvAddonsSection({
              )}
            </div>
          )}
-</label>
+        </label>

      );
    }
--- a/src/lib/offer-normalize.js
+++ b/src/lib/offer-normalize.js
@@ -43,5 +43,7 @@ export function normalizeAddons(addons) {
      opis: a.opis ? String(a.opis) : "",
      cena: a.cena ?? 0,
      tid: a.tid != null ? String(a.tid) : "",
+      group: a.group ? String(a.group) : null,
+      group_mode: a.group_mode === "single" ? "single" : null,
    }));
 }
--- a/src/styles/addons.css
+++ b/src/styles/addons.css
@@ -121,7 +121,7 @@
 }

 .f-addon-more {
-  @apply text-sm underline opacity-80;
+  @apply text-sm opacity-80;
 }

 .f-addon-price {
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,176 +1,185 @@
 * {
-  --brand: #0af;
-  --brand: hsla(200 100% 50% 1);
+  --f-navbar-height: 84px;

  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
-
-  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
-  --link-color-light: hsla(210, 100%, 40%, 1);
-  --link-hover-light: hsla(165, 80%, 25%, 1);
-
-  --text1-light: hsla(200, 100%, 10%, 1);
-  --text2-light: hsla(200, 30%, 30%, 1);
-  --text3-light: hsla(200, 15%, 85%, 1);
-
-  --surface1-light: hsla(200, 25%, 90%, 1);
-  --surface2-light: hsla(200, 20%, 99%, 1);
-  --surface3-light: hsla(200, 20%, 92%, 1);
-  --surface4-light: hsla(200, 20%, 85%, 1);
-  --surface5-light: hsla(217, 70%, 26%, 1);
-  --surface6-light: hsla(200, 5%, 75%, 1);
-
-
-  --surface-shadow-light: var(--brand-hue) 10% 20%;
-  --shadow-strength-light: .02;
-  --border1-light: hsl(var(--brand-hue) 5% 80%);
-
-
-  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
-
-  --text1-dark: hsla(200, 15%, 85%, 1);
-  --text2-dark: hsla(200, 5%, 65%, 1);
-  --text3-dark: hsla(200, 5%, 100%, 1);
-
-  --surface1-dark: hsla(200, 10%, 10%, 1);
-  --surface2-dark: hsla(200, 10%, 15%, 1);
-  --surface3-dark: hsla(200, 5%, 20%, 1);
-  --surface4-dark: hsla(200, 5%, 25%, 1);
-  --surface5-dark: hsla(200, 35%, 25%, 1);
-  --surface6-dark: hsla(205, 51%, 41%, 1);
-
-
-  --card-ring: hsla(217 91% 60% / 0.45);
-  --card-shadow-deep: hsla(221 47% 11% / 0.18);
-
-  --surface-shadow-dark: var(--brand-hue) 50% 3%;
-  --shadow-strength-dark: .8;
-  --border1-dark: hsl(var(--brand-hue) 40% 70%);
-
-
-  --link-hover-dark: hsla(45, 80%, 70%, 1);
-  --cookie-accept-dark: hsla(120, 60%, 45%, 1);
-  --f-navbar-height: 84px;
-
-  /* Wyróznienie ceny */
-  --f-addons-text: hsla(45, 100%, 92%, 1);
-  --f-addons-background: hsla(165, 80%, 25%, 1);
-
+  --brand-dark: hsl(200 calc(100% / 0.2) calc(50% / 1.5));
 }

 :root {
-  --f-hero-text: var(--text3-dark);
-  --f-hero-header: var(--text3-dark);
+  --f-hero-text: #d1d6d9;
+  --f-hero-header: #d1d6d9;

  /* --- Background and Text --- */
-  --f-background: var(--surface3-light);
-  --f-text: var(--text2-light);
-  --f-header: var(--text1-light);
-  --f-header-items: (var(--text1-light));
+  --f-background: #e0e6eb;
+  --f-text: #36525e;
+  --f-header: #001a33;
+  --f-header-items: (#001a33);
  /*--- Navbar --- */
-  --f-navbar-background: var(--surface6-light);
-  --f-navbar-link: var(--link-color-light);
-  --f-navbar-link-hover: var(--link-hover-light);
+  --f-navbar-background: #b3b8ba;
+  --f-navbar-link: #0066cc;
+  --f-navbar-link-hover: #1a6655;
  /*--- Footer --- */
-  --f-footer-background: var(--surface4-light);
-  --f-footer-link-text: var(--link-color-light);
+  --f-footer-background: #ccd6db;
+  --f-footer-link-text: #0066cc;
  /* --- Linki --- */
-  --f-link-text: var(--link-color-light);
-  --f-link-text-hover: var(--link-hover-light);
-  /* Buttons Input */
-  /*
-  --btn-background: var(--link-color-light);
-  --btn-text: var(--surface4-light); 
-  --btn-background-hover: var(--surface4-light);
-  --btn-text-hover: var(--link-color-light);
-  */
-  --btn-background: var(--link-color-light);
-  /* var(--surface4-light); */
-  --btn-text: var(--surface4-light);
-  /* var(--link-color-light); */
-  --btn-background-hover: var(--surface4-light);
-  /* var(--link-color-light); */
-  --btn-text-hover: var(--link-color-light);
-  /* var(--surface4-light); */
+  --f-link-text: #0066cc;
+  --f-link-text-hover: #1a6655;
+  --btn-background: #0066cc;
+  --btn-text: #ccd6db;
+  --btn-background-hover: #ccd6db;
+  --btn-text-hover: #0066cc;

-  --f-background-toast: var(--surface2-dark);
+  --f-background-toast: #22262b;

-  --f-input-border: var(--surface4-light);
-  --f-autocomplete-hover-bg: var(--surface3-dark);
-  --f-autocomplete-hover-text: var(--text1-dark);
+  --f-input-border: #ccd6db;
+  --f-autocomplete-hover-bg: #2d3133;
+  --f-autocomplete-hover-text: #d1d6d9;
  /* --- Switchery --- */
-  --f-background-switch: var(--surface4-light);
-
-  --f-switcher-background: var(--link-color-light);
-  --f-switcher-text: var(--surface4-light);
-  --f-switcher-background-hover: var(--surface2-light);
+  --f-background-switch: #ccd6db;
+  --f-switcher-background: #0066cc;
+  --f-switcher-text: #ccd6db;
+  --f-switcher-background-hover: #fcfcfd;
  --f-switcher-text-hover: var(--f-link-text-hover);
  /* --- Cookie --- */
-  --f-cookie-background: var(--surface2-light);
-  --f-cookie-text: var(--text1-light);
-  --f-cookie-accept-background: var(--link-color-light);
-  --f-cookie-accept-text: var(--surface4-light);
-  --f-cookie-reject-background: var(--surface4-light);
-  --f-cookie-reject-text: var(--surface1-dark);
+  --f-cookie-background: #fcfcfd;
+  --f-cookie-text: #001a33;
+  --f-cookie-accept-background: #0066cc;
+  --f-cookie-accept-text: #ccd6db;
+  --f-cookie-reject-background: #ccd6db;
+  --f-cookie-reject-text: #171a1a;
  /* --- Offers --- */
-  --f-offers-border: var(--surface4-light);
-  --f-offers-price: var(--brand-light);
-  --f-offers-popular: var(--brand-light);
+  --f-offers-border: #ccd6db;
+  --f-offers-price: #00aaff;
+  --f-offers-popular: #00aaff;
  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
+  --f-addons-text: #fffae6;
+  --f-addons-background: #1a6655;
+
 }

-:root.dark {
-  --f-hero-text: var(--text3-dark);
-  --f-hero-header: var(--text3-dark);
+:root.dark3 {
+  --header: #f4442e;
+  --text: #adb5bd;
+  --text-link: #f48c06;
+  /* #ffd60a; */
+
+  --f-hero-header: var(--header);
+  --f-hero-text: var(--text);
+
+  --f-background: #171a1a;
+  --f-header: var(--header);
+  --f-text: var(--text);

-  /* --- Background and Text --- */
-  --f-background: var(--surface1-dark);
-  --f-text: var(--text2-dark);
-  --f-header: var(--text1-dark);
-  --f-header-items: (var(--text1-dark));
  /*--- Navbar --- */
-  --f-navbar-background: var(--surface2-dark);
-  --f-navbar-link: var(--brand-dark);
-  --f-navbar-link-hover: var(--link-hover-dark);
+  --f-navbar-background: #343a40;
+  --f-navbar-link: var(--text-link);
+  --f-navbar-link-hover: #ff9f1c;
+
  /*--- Footer --- */
-  --f-footer-background: var(--surface2-dark);
-  --f-footer-link-text: var(--brand-dark);
-  /* --- Linki --- */
-  --f-link-text: var(--brand-dark);
-  --f-link-text-hover: var(--link-hover-dark);
+  --f-footer-background: #343a40;
+  --f-footer-link-text: var(--text-link);
+
+  --f-link-text: var(--text-link);
+  --f-link-text-hover: #f2e6b3;
+
  /* Buttons Input */
-  --btn-background: var(--f-link-text);
-  --btn-text: var(--surface1-dark);
-  --btn-background-hover: var(--surface4-dark);
-  --btn-text-hover: var(--f-link-text-hover);
+  --btn-background: #343a40;
+  --btn-text: var(--text-link);
+  --btn-background-hover: var(--btn-text);
+  --btn-text-hover: var(--btn-background);

-  --f-background-toast: var(--surface2-dark);
+  --f-background-switch: #343a40;
+  --f-switcher-background: var(--text-link);
+  --f-switcher-text: #343a40;
+  /* --f-switcher-background-hover: #3d3f40;
+  --f-switcher-text-hover: var(--f-link-text-hover); */

-  --f-input-border: var(--surface4-dark);
-  --f-autocomplete-hover-bg: var(--surface3-dark);
-  --f-autocomplete-hover-text: var(--text1-dark);
+  /* --- Offers --- */
+  --f-offers-border: #3d3f40;
+  --f-offers-price: #eae2b7;

-  /* --- Switchery --- */
-  --f-background-switch: var(--surface3-dark);
+  --f-background-toast: #22262b;

-  --f-switcher-background: var(--f-link-text);
-  --f-switcher-text: var(--surface1-dark);
+  --f-input-border: #3d3f40;
+  --f-autocomplete-hover-bg: #2d3133;
+  --f-autocomplete-hover-text: #d1d6d9;

-  --f-switcher-background-hover: var(--surface4-dark);
-  --f-switcher-text-hover: var(--f-link-text-hover);

  /* --- Cookie --- */
-  --f-cookie-background: var(--surface4-dark);
-  --f-cookie-text: var(--surface2-light);
+  --f-cookie-background: #3d3f40;
+  --f-cookie-text: #fcfcfd;
  --f-cookie-accept-background: var(--f-link-text);
-  --f-cookie-accept-text: var(--surface1-dark);
-  --f-cookie-reject-background: var(--surface3-dark);
+  --f-cookie-accept-text: #171a1a;
+  --f-cookie-reject-background: #2d3133;
  --f-cookie-reject-text: var(--f-link-text);

  /* --- Offers --- */
-  --f-offers-border: var(--surface4-dark);
+
+  --f-offers-popular: var(--brand-dark);
+  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
+
+  --f-addons-text: #fffae6;
+  --f-addons-background: #1a6655;
+
+}
+
+:root.dark {
+  --f-hero-text: #d1d6d9;
+  --f-hero-header: #d1d6d9;
+
+  /* --- Background and Text --- */
+  --f-background: #171a1a;
+  --f-text: #9fa5a8;
+  --f-header: #d1d6d9;
+  --f-header-items: (#d1d6d9);
+  /*--- Navbar --- */
+  --f-navbar-background: #22262b;
+  --f-navbar-link: var(--brand-dark);
+  --f-navbar-link-hover: #f2e6b3;
+  /*--- Footer --- */
+  --f-footer-background: #22262b;
+  --f-footer-link-text: var(--brand-dark);
+  /* --- Linki --- */
+  --f-link-text: var(--brand-dark);
+  --f-link-text-hover: #f2e6b3;
+  /* Buttons Input */
+  --btn-background: var(--f-link-text);
+  --btn-text: #171a1a;
+  --btn-background-hover: #3d3f40;
+  --btn-text-hover: var(--f-link-text-hover);
+
+  --f-background-toast: #22262b;
+
+  --f-input-border: #3d3f40;
+  --f-autocomplete-hover-bg: #2d3133;
+  --f-autocomplete-hover-text: #d1d6d9;
+
+  /* --- Switchery --- */
+  --f-background-switch: #2d3133;
+
+  --f-switcher-background: var(--f-link-text);
+  --f-switcher-text: #171a1a;
+
+  --f-switcher-background-hover: #3d3f40;
+  --f-switcher-text-hover: var(--f-link-text-hover);
+
+  /* --- Cookie --- */
+  --f-cookie-background: #3d3f40;
+  --f-cookie-text: #fcfcfd;
+  --f-cookie-accept-background: var(--f-link-text);
+  --f-cookie-accept-text: #171a1a;
+  --f-cookie-reject-background: #2d3133;
+  --f-cookie-reject-text: var(--f-link-text);
+
+  /* --- Offers --- */
+  --f-offers-border: #3d3f40;
  --f-offers-price: var(--brand-dark);
  --f-offers-popular: var(--brand-dark);
  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
+
+  --f-addons-text: #fffae6;
+  --f-addons-background: #1a6655;
+
 }