diff --git a/public/assets/logo.webp b/public/assets/logo.webp new file mode 100644 index 0000000..57ca387 Binary files /dev/null and b/public/assets/logo.webp differ diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro index 7161ced..3e379bb 100644 --- a/src/components/layout/Header.astro +++ b/src/components/layout/Header.astro @@ -17,8 +17,8 @@ const links = [ - - F + + FUZ Logo FUZ diff --git a/src/content/internet-swiatlowodowy/section.yaml b/src/content/internet-swiatlowodowy/section.yaml index 646860a..25eaaf3 100644 --- a/src/content/internet-swiatlowodowy/section.yaml +++ b/src/content/internet-swiatlowodowy/section.yaml @@ -1,23 +1,4 @@ sections: - # - title: - # image: - # dimmed: true - # type: default - # content: | - # Światłowody to najbardziej zaawansowana technologia przesyłu danych. - - # Gwarantują błyskawiczną prędkość, stabilność i niezawodność – bez względu na warunki. - - # Dedykowane pasmo,pełna prędkość tylko dla Ciebie. - - # Stała jakość, pogoda ani liczba użytkowników w sieci nie mają znaczenia. - - # Wiele urządzeń jednocześnie, komputer, telefon, tablet, konsola – wszystko działa płynnie. - - # Światłowód to również dostęp do telewizji i telefonu w najwyższej jakości. - - # Sprawdź naszą pełną ofertę i wybierz rozwiązanie dopasowane do Twoich potrzeb. - - title: Sprawdź dostępność usługi image: "/assets/internet/internet.webp" content: | @@ -25,7 +6,9 @@ sections: Sprawdź czy pod Twoim adresem dostępna jest nasza usługa internetu światłowodowego. - Tam gdzie nie docierają światłowody stosuje się inne technologie. Jeśli pod Twoim adresem nie ma jeszcze usług światłowodowych, to sprawdź czy dociera tam nasz [internet radiowy](/internet-radiowy) + Tam gdzie nie docierają światłowody stosuje się inne technologie. + + Jeśli pod Twoim adresem nie ma jeszcze usług światłowodowych, to sprawdź czy dociera tam nasz [internet radiowy →](/internet-radiowy) - title: Router WiFi 5 AC1200 image: "/assets/internet/E5400.webp" diff --git a/src/content/internet-telewizja/modal.yaml b/src/content/internet-telewizja/modal.yaml new file mode 100644 index 0000000..43a134b --- /dev/null +++ b/src/content/internet-telewizja/modal.yaml @@ -0,0 +1,50 @@ +catchup: + title: CATCHUP - ARCHIWUM TV + content: | + Funkcja CatchUp pozwala na oglądanie archiwalnych audycji na wybranych kanałach do 7 dni wstecz. + + Przegapiłeś jakiś program? Zapomniałeś nagrać? + + Odnajdź go w EPG, cofając się w lewo na osi czasu. + + ![Catchup screen](/assets/tv/jambox-kyanit-catchup1.png) + +nagrywarka: + title: NAGRYWARKA + content: | + Nasze dekodery posiadają możliwość nagrywania wybranych lub wszystkich kanałów, w zależności od modelu dekodera. + + Nagrywarka sieciowa pozwala na nagrywanie i oglądanie audycji bez dysku. + + Dzięki tej wersji nagrywarki możesz zlecać w tym samym czasie 3 niezależne nagrania. + + Korzyści jakie daje nagrywarka to między innymi możliwość oglądania nagrania od początku, nawet jak włączyłeś je w trakcie emisji na żywo. + + Przydatna funkcja to możliwość zaprogramowania nagrywarki także z aplikacji JAMBOX go! Nagrania są dostępne na dekoderze przez 7 dni. + + Nagrywanie w chmurze dostępne jest na dekoderach Abox M15, Hybroad Z123 oraz Arris VIP 4302. + + ![Nagrywarka](/assets/tv/jambox-kyanit-jpvr.png) + +startover: + title: STARTOVER - OGLĄDAJ OD POCZĄTKU + content: | + Funkcja StartOver pozwala na oglądanie od początku tych audycji, które już się rozpoczęły, lecz jeszcze nie skończyły. + + Spóźniłeś się na emisję na żywo? + + Nic nie szkodzi! Kliknij "Oglądaj od początku" i już nic Ci nie umknie! + + ![STARTOVER](/assets/tv/jambox-kyanit-startover1.png) + +nagrywanie_cykliczne: + title: NAGRYWANIE CZASOWE/CYKLICZNE + content: | + Jeśli lubisz oglądać każdego dnia wiadomości, albo chcesz nagrać Twojemu dziecku wszystkie wieczorynki to możesz teraz w prosty sposób zaplanować nagrania. + + Nagrywanie według czasu to funkcja, która umożliwia Ci zaprogramowanie nagrań powtarzających się. + + Zaplanuj nagrania codzienne, weekendowe czy w wybranych przez Ciebie dniach. Dodatkowo możesz nagrać dowolny przedział czasu na kanale. + + Nagrywanie czasowe jest dostępne na dekoderze wyposażonym w dysk dedykowany lub USB. + diff --git a/src/content/internet-telewizja/section.yaml b/src/content/internet-telewizja/section.yaml index 1874513..38ce2d9 100644 --- a/src/content/internet-telewizja/section.yaml +++ b/src/content/internet-telewizja/section.yaml @@ -2,17 +2,13 @@ sections: - title: Dodatkowe możliwości naszej telewizji" image: "/assets/tv/ekosystem-kyanit.png" content: | - - **Catchup** — na wybranych kanałach możesz obejrzeć audycję z ostatnich 7 dni. - [Poznaj szczegóły](#catchup) + - **Catchup** — na wybranych kanałach możesz obejrzeć audycję z ostatnich 7 dni. [Więcej →](#catchup) - - **Nagrywanie** — nagraj interesującą Cię audycję i obejrzyj ją kiedy chcesz. - [Poznaj szczegóły](#nagrywarka) + - **Nagrywanie** — nagraj interesującą Cię audycję i obejrzyj ją kiedy chcesz. [Więcej →](#nagrywarka) - - **StartOver** — obejrzyj od początku audycję, która już się rozpoczęła (do 3h wstecz). - [Poznaj szczegóły](#startover) + - **StartOver** — obejrzyj od początku audycję, która już się rozpoczęła (do 3h wstecz). [Więcej →](#startover) - - **Nagrywanie serii** — zaplanuj nagrywanie kolejnych odcinków ulubionego serialu. - [Poznaj szczegóły](#nagrywanie_cykliczne) + - **Nagrywanie serii** — zaplanuj nagrywanie kolejnych odcinków ulubionego serialu. [Więcej →](#nagrywanie_cykliczne) - **Pauzowanie** — zatrzymuj i cofaj audycje. diff --git a/src/islands/Markdown.jsx b/src/islands/Markdown.jsx index 1f301fb..03a1f9c 100644 --- a/src/islands/Markdown.jsx +++ b/src/islands/Markdown.jsx @@ -49,9 +49,13 @@ export default function FuzMarkdown({ text, ctx = {} }) { // Konwersja kinków na modal linki processed = processed.replace( /\[([^\]]+)\]\(#([^)]+)\)/g, - `$1` + `$1` ); + // processed = processed.replace( + // /\[([^\]]+)\]\(#([^)]+)\)/g, + // `` + // ); const html = marked(processed); return ( diff --git a/src/islands/Modal.jsx b/src/islands/Modal.jsx new file mode 100644 index 0000000..73db373 --- /dev/null +++ b/src/islands/Modal.jsx @@ -0,0 +1,69 @@ +import { marked } from "marked"; +import { useEffect, useState } from "preact/hooks"; +import "../styles/modal.css"; + +marked.setOptions({ + gfm: true, + breaks: true, + headerIds: false, + mangle: false, + smartLists: true, +}); + +export default function Modal({ modalData }) { + const [open, setOpen] = useState(false); + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + + useEffect(() => { + const clickHandler = (e) => { + const el = e.target.closest("[data-modal]"); + if (!el) return; + + // 🚀 BLOKADA WSZYSTKICH DOMYŚLNYCH ZACHOWAŃ + e.preventDefault(); + e.stopPropagation(); + + const id = el.getAttribute("data-modal"); + const modal = modalData[id]; + if (!modal) return; + + setTitle(modal.title || ""); + setContent((modal.content || "").replace(/\n(?!\n)/g, "\n\n")); + setOpen(true); + }; + + document.addEventListener("click", clickHandler, { capture: true }); + return () => + document.removeEventListener("click", clickHandler, { capture: true }); + }, [modalData]); + + if (!open) return null; + + return ( +
setOpen(false)}> + + +
e.stopPropagation()}> +
+

{title}

+ +
+
+
+
+ ); +} diff --git a/src/islands/Offers/OffersExtraServices.jsx b/src/islands/Offers/OffersExtraServices.jsx index 36d63ce..1899ef7 100644 --- a/src/islands/Offers/OffersExtraServices.jsx +++ b/src/islands/Offers/OffersExtraServices.jsx @@ -19,7 +19,7 @@ export default function OffersExtraServices({ Usługa Cena - Szczegóły + Więcej @@ -31,7 +31,7 @@ export default function OffersExtraServices({ {srv.cena} diff --git a/src/pages/internet-telewizja/index.astro b/src/pages/internet-telewizja/index.astro index 07cf4dc..4674b7b 100644 --- a/src/pages/internet-telewizja/index.astro +++ b/src/pages/internet-telewizja/index.astro @@ -3,6 +3,7 @@ import DefaultLayout from "../../layouts/DefaultLayout.astro"; import Hero from "../../components/hero/Hero.astro"; import SectionRenderer from "../../components/sections/SectionRenderer.astro"; import Markdown from "../../islands/Markdown.jsx"; +import Modal from "../../islands/Modal.jsx"; import OffersIsland from "../../islands/OffersIsland.jsx"; import yaml from "js-yaml"; @@ -17,6 +18,9 @@ const hero = yaml.load( const page = yaml.load( fs.readFileSync("./src/content/internet-telewizja/page.yaml", "utf8"), ); +const modalData = yaml.load( + fs.readFileSync("./src/content/internet-telewizja/modal.yaml", "utf8") +); type Paragraph = { title?: string; @@ -42,23 +46,19 @@ const rest = page.paragraphs.slice(1); - - {rest.map((p: Paragraph) => ( -
-
- {p.title &&

{p.title}

} - -
-
-))} + { + rest.map((p: Paragraph) => ( +
+
+ {p.title &&

{p.title}

} + +
+
+ )) + } - + + + diff --git a/src/styles/markdown.css b/src/styles/markdown.css index 8222350..a1b9a7f 100644 --- a/src/styles/markdown.css +++ b/src/styles/markdown.css @@ -41,9 +41,15 @@ } .fuz-markdown a { - @apply text-blue-600 dark:text-blue-400 underline hover:no-underline; + @apply no-underline hover:no-underline; + color: var(--fuz-accent); } +.fuz-markdown button.modal-link { + @apply no-underline hover:no-underline mt-2; + background: var(--fuz-bg); + color: var(--fuz-accent); +} .fuz-markdown blockquote { @apply border-l-4 border-gray-300 dark:border-gray-700 pl-4 italic mb-4; } diff --git a/src/styles/modal.css b/src/styles/modal.css new file mode 100644 index 0000000..468dc97 --- /dev/null +++ b/src/styles/modal.css @@ -0,0 +1,57 @@ +/* MODAL — FULLSCREEN OVERLAY */ + +.fuz-modal-overlay { + @apply fixed inset-0 z-[9999] flex flex-col; + background: rgba(0, 0, 0, 0.65); + backdrop-filter: blur(6px); + animation: fadeIn 0.25s ease-out forwards; +} + +/* CLOSE BUTTON */ +.fuz-modal-close { + @apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity; + color: var(--fuz-text); + opacity: 0.7; +} + +.fuz-modal-close:hover { + @apply opacity-100; +} + +/* PANEL — FULLSCREEN PANEL */ +.fuz-modal-panel { + @apply w-full h-full overflow-y-auto; + @apply px-6 py-8 md:px-12 md:py-12; + background: var(--fuz-bg); + color: var(--fuz-text); +} + +/* INNER LAYOUT */ +.fuz-modal-inner { + @apply max-w-4xl mx-auto; +} + +.fuz-modal-title { + @apply text-4xl font-bold mb-8 text-center; + color: var(--fuz-text); +} + +/* CONTENT STYLE */ +.fuz-modal-content p { + @apply leading-relaxed text-2xl text-center; +} + +.fuz-modal-content p img { + @apply mt-2 leading-relaxed; +} +/* ANIMATIONS */ + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} \ No newline at end of file diff --git a/src/styles/sections.css b/src/styles/sections.css index 598e2d1..15fcdff 100644 --- a/src/styles/sections.css +++ b/src/styles/sections.css @@ -1,5 +1,5 @@ .fuz-section { - @apply py-10 px-0; + @apply py-10 px-4; } .fuz-section-grid {