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

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. 

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]);

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);

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,66 +53,66 @@ 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">
+          <div class="f-addon-checkbox">
-    <input
+            <input
-      type="checkbox"
+              type="checkbox"
-      checked={qty > 0}
+              checked={qty > 0}
-      onChange={() => toggleCheckboxAddon(a.id)}
+              onChange={() => toggleCheckboxAddon(a)}
-    />
+            />
-  </div>
+          </div>
 
-  <div class="f-addon-main">
+          <div class="f-addon-main">
-    <div class="f-addon-name">{a.nazwa}</div>
+            <div class="f-addon-name">{a.nazwa}</div>
 
-    {termPricing && (
+            {termPricing && (
-      <div class="mt-2 flex flex-wrap gap-3 text-sm" onClick={(e) => e.stopPropagation()}>
+              <div class="mt-2 flex flex-wrap gap-3 text-sm" onClick={(e) => e.stopPropagation()}>
-        <label class="inline-flex items-center gap-2">
+                <label class="inline-flex items-center gap-2">
-          <input
+                  <input
-            type="radio"
+                    type="radio"
-            name={`term-${a.id}`}
+                    name={`term-${a.id}`}
-            checked={(tvTerm[a.id] || "12m") === "12m"}
+                    checked={(tvTerm[a.id] || "12m") === "12m"}
-            onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "12m" }))}
+                    onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "12m" }))}
-          />
+                  />
-          <span>12 miesięcy</span>
+                  <span>12 miesięcy</span>
+                </label>
+
+                <label class="inline-flex items-center gap-2">
+                  <input
+                    type="radio"
+                    name={`term-${a.id}`}
+                    checked={(tvTerm[a.id] || "12m") === "bezterminowo"}
+                    onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "bezterminowo" }))}
+                  />
+                  <span>Bezterminowo</span>
+                </label>
+              </div>
+            )}
+          </div>
+
+          <div class="f-addon-price">{money(unit)} {cenaOpis}</div>
+
+          {/* ✅ osobny wiersz na pełną szerokość */}
+          {(a.tid || a.opis) && (
+            <div class="f-addon-below" onClick={(e) => e.stopPropagation()}>
+              {a.tid ? (
+                <a
+                  class="f-addon-more"
+                  href={`/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(a.tid)}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`Więcej informacji o pakiecie ${a.nazwa ?? ""} (otwiera się w nowej karcie)`}
+                  title={`Więcej o pakiecie ${a.nazwa ?? ""}`}
+                >
+                  Przejdź do szczegółowych informacji pakietu {a.nazwa ?? ""}
+                </a>
+              ) : (
+                a.opis ? <div class="f-addon-desc">{a.opis}</div> : null
+              )}
+            </div>
+          )}
         </label>
 
-        <label class="inline-flex items-center gap-2">
-          <input
-            type="radio"
-            name={`term-${a.id}`}
-            checked={(tvTerm[a.id] || "12m") === "bezterminowo"}
-            onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "bezterminowo" }))}
-          />
-          <span>Bezterminowo</span>
-        </label>
-      </div>
-    )}
-  </div>
-
-  <div class="f-addon-price">{money(unit)} {cenaOpis}</div>
-
-  {/* ✅ osobny wiersz na pełną szerokość */}
-  {(a.tid || a.opis) && (
-    <div class="f-addon-below" onClick={(e) => e.stopPropagation()}>
-      {a.tid ? (
-        <a
-          class="f-addon-more"
-          href={`/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(a.tid)}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label={`Więcej informacji o pakiecie ${a.nazwa ?? ""} (otwiera się w nowej karcie)`}
-          title={`Więcej o pakiecie ${a.nazwa ?? ""}`}
-        >
-          Przejdź do szczegółowych informacji pakietu {a.nazwa ?? ""}
-        </a>
-      ) : (
-        a.opis ? <div class="f-addon-desc">{a.opis}</div> : null
-      )}
-    </div>
-  )}
-</label>
-
       );
     }
 

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,
     }));
 }

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 {

src/styles/theme.css

@@ -1,176 +1,185 @@
 * {
-  --brand: #0af;
+  --f-navbar-height: 84px;
-  --brand: hsla(200 100% 50% 1);
 
   --brand-hue: 200;
   --brand-saturation: 100%;
   --brand-lightness: 50%;
-
+  --brand-dark: hsl(200 calc(100% / 0.2) calc(50% / 1.5));
-  --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);
-
 }
 
 :root {
-  --f-hero-text: var(--text3-dark);
+  --f-hero-text: #d1d6d9;
-  --f-hero-header: var(--text3-dark);
+  --f-hero-header: #d1d6d9;
 
   /* --- Background and Text --- */
-  --f-background: var(--surface3-light);
+  --f-background: #e0e6eb;
-  --f-text: var(--text2-light);
+  --f-text: #36525e;
-  --f-header: var(--text1-light);
+  --f-header: #001a33;
-  --f-header-items: (var(--text1-light));
+  --f-header-items: (#001a33);
   /*--- Navbar --- */
-  --f-navbar-background: var(--surface6-light);
+  --f-navbar-background: #b3b8ba;
-  --f-navbar-link: var(--link-color-light);
+  --f-navbar-link: #0066cc;
-  --f-navbar-link-hover: var(--link-hover-light);
+  --f-navbar-link-hover: #1a6655;
   /*--- Footer --- */
-  --f-footer-background: var(--surface4-light);
+  --f-footer-background: #ccd6db;
-  --f-footer-link-text: var(--link-color-light);
+  --f-footer-link-text: #0066cc;
   /* --- Linki --- */
-  --f-link-text: var(--link-color-light);
+  --f-link-text: #0066cc;
-  --f-link-text-hover: var(--link-hover-light);
+  --f-link-text-hover: #1a6655;
-  /* Buttons Input */
+  --btn-background: #0066cc;
-  /*
+  --btn-text: #ccd6db;
-  --btn-background: var(--link-color-light);
+  --btn-background-hover: #ccd6db;
-  --btn-text: var(--surface4-light); 
+  --btn-text-hover: #0066cc;
-  --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-background-toast: var(--surface2-dark);
+  --f-background-toast: #22262b;
 
-  --f-input-border: var(--surface4-light);
+  --f-input-border: #ccd6db;
-  --f-autocomplete-hover-bg: var(--surface3-dark);
+  --f-autocomplete-hover-bg: #2d3133;
-  --f-autocomplete-hover-text: var(--text1-dark);
+  --f-autocomplete-hover-text: #d1d6d9;
   /* --- Switchery --- */
-  --f-background-switch: var(--surface4-light);
+  --f-background-switch: #ccd6db;
-
+  --f-switcher-background: #0066cc;
-  --f-switcher-background: var(--link-color-light);
+  --f-switcher-text: #ccd6db;
-  --f-switcher-text: var(--surface4-light);
+  --f-switcher-background-hover: #fcfcfd;
-  --f-switcher-background-hover: var(--surface2-light);
   --f-switcher-text-hover: var(--f-link-text-hover);
   /* --- Cookie --- */
-  --f-cookie-background: var(--surface2-light);
+  --f-cookie-background: #fcfcfd;
-  --f-cookie-text: var(--text1-light);
+  --f-cookie-text: #001a33;
-  --f-cookie-accept-background: var(--link-color-light);
+  --f-cookie-accept-background: #0066cc;
-  --f-cookie-accept-text: var(--surface4-light);
+  --f-cookie-accept-text: #ccd6db;
-  --f-cookie-reject-background: var(--surface4-light);
+  --f-cookie-reject-background: #ccd6db;
-  --f-cookie-reject-text: var(--surface1-dark);
+  --f-cookie-reject-text: #171a1a;
   /* --- Offers --- */
-  --f-offers-border: var(--surface4-light);
+  --f-offers-border: #ccd6db;
-  --f-offers-price: var(--brand-light);
+  --f-offers-price: #00aaff;
-  --f-offers-popular: var(--brand-light);
+  --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 {
+:root.dark3 {
-  --f-hero-text: var(--text3-dark);
+  --header: #f4442e;
-  --f-hero-header: var(--text3-dark);
+  --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-background: #343a40;
-  --f-navbar-link: var(--brand-dark);
+  --f-navbar-link: var(--text-link);
-  --f-navbar-link-hover: var(--link-hover-dark);
+  --f-navbar-link-hover: #ff9f1c;
+
   /*--- Footer --- */
-  --f-footer-background: var(--surface2-dark);
+  --f-footer-background: #343a40;
-  --f-footer-link-text: var(--brand-dark);
+  --f-footer-link-text: var(--text-link);
-  /* --- Linki --- */
+
-  --f-link-text: var(--brand-dark);
+  --f-link-text: var(--text-link);
-  --f-link-text-hover: var(--link-hover-dark);
+  --f-link-text-hover: #f2e6b3;
+
   /* Buttons Input */
-  --btn-background: var(--f-link-text);
+  --btn-background: #343a40;
-  --btn-text: var(--surface1-dark);
+  --btn-text: var(--text-link);
-  --btn-background-hover: var(--surface4-dark);
+  --btn-background-hover: var(--btn-text);
-  --btn-text-hover: var(--f-link-text-hover);
+  --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);
+  /* --- Offers --- */
-  --f-autocomplete-hover-bg: var(--surface3-dark);
+  --f-offers-border: #3d3f40;
-  --f-autocomplete-hover-text: var(--text1-dark);
+  --f-offers-price: #eae2b7;
 
-  /* --- Switchery --- */
+  --f-background-toast: #22262b;
-  --f-background-switch: var(--surface3-dark);
 
-  --f-switcher-background: var(--f-link-text);
+  --f-input-border: #3d3f40;
-  --f-switcher-text: var(--surface1-dark);
+  --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-background: #3d3f40;
-  --f-cookie-text: var(--surface2-light);
+  --f-cookie-text: #fcfcfd;
   --f-cookie-accept-background: var(--f-link-text);
-  --f-cookie-accept-text: var(--surface1-dark);
+  --f-cookie-accept-text: #171a1a;
-  --f-cookie-reject-background: var(--surface3-dark);
+  --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;
+
 }