dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stylizacja, zmiana mapy zasięgu

Browse Source
This commit is contained in:
dm
2025-11-26 14:37:07 +01:00
parent 8bf578e6d9
commit a0f4e8fbab
29 changed files with 339 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/hero/Hero.astro
View File

@@ -9,7 +9,6 @@ const {
ctas = []
} = Astro.props;
// Automatyczne wczytanie wszystkich obrazów hero
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.{png,jpg,jpeg,webp,avif}', {
eager: true
});
@@ -44,7 +43,6 @@ const isLCP = true;
)}
<div class="f-hero-inner">
{Array.isArray(title)
? title.map(line => (
<h1>{line}</h1>

2
src/components/layout/Header.astro
View File

@@ -7,7 +7,7 @@ const links = [
{ name: "INTERNET I TELEWIZJA", href: "/internet-telewizja" },
{ name: "TELEFON", href: "/telefon" },
{ name: "ZASIĘG SIECI", href: "/mapa-zasiegu" },
{ name: "KONTAKT", href: "/#contact" },
{ name: "KONTAKT", href: "/kontakt" },
{
name: "BOK",
href: "https://panel.fuz.pl/userpanel/auth",

5
src/components/maps/CitiesList.astro
View File

@@ -1,12 +1,10 @@
---
const { cities = [] } = Astro.props;
// sortujemy alfabetycznie
const sorted = cities.sort((a: string, b: any) => a.localeCompare(b, "pl"));
---
<div class="fuz-cities-box">
<h4 class="fuz-cities-title">Miejscowości w zasięgu sieci światłowodowej i radiowej</h4>
<h4 class="fuz-cities-title">Miejscowości w zasięgu sieci światłowodowej</h4>
<div class="fuz-cities-grid">
{sorted.map((city: unknown) => (
@@ -20,7 +18,6 @@ const sorted = cities.sort((a: string, b: any) => a.localeCompare(b, "pl"));
background: var(--f-background);
color: var(--f-text);
padding: 16px;
}

10
src/components/maps/MapGoogle.astro
View File

@@ -13,7 +13,7 @@ const {
description = "",
showMarker = false,
mode = "full",
mapStyleId = "8e0a97af9476f2d3" // Google DEMO mapId (legalne, bez warningów)
mapStyleId = "8e0a97af9476f2d3"
} = Astro.props;
/** ID kontenera w DOM */
@@ -119,9 +119,11 @@ const domId = `fuz-map-${Math.random().toString(36).slice(2)}`;
if (title || desc) {
const info = new InfoWindow({
content: `
<div class="fuz-map-infowindow">
<strong>${title}</strong><br/>
${desc}
<div class="f-info-window">
<div class="f-info-header">
<div class="f-info-city">${title}</div>
<div class="f-info-street">${desc}</div>
</div>
</div>
`
});

15
src/components/maps/MapSwitch.astro
View File

@@ -1,15 +0,0 @@
---
const { id, label } = Astro.props;
---
<label class="flex items-center gap-2 cursor-pointer select-none text-sm">
<input
id={id}
type="checkbox"
class="h-4 w-4 rounded border-gray-400"
onchange={id === "fiber-toggle"
? "fiberRangeShow()"
: "radioRangeShow()"}
/>
<span>{label}</span>
</label>

247
src/components/sections/SectionContact.astro
View File

@@ -1,184 +1,125 @@
---
import yaml from "js-yaml";
import fs from "fs";
import MapGoogle from "../maps/MapGoogle.astro";
// import "../../styles/contact.css";
import MapGoogle from "../../components/maps/MapGoogle.astro";
const data = yaml.load(
fs.readFileSync("./src/content/contact/contact.yaml", "utf8"),
fs.readFileSync("./src/content/contact/contact.yaml", "utf8")
);
const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
const form = data.form;
---
<section id="contact" class="f-section">
<div class="f-contact-grid">
<!-- Lewa kolumna -->
<div class="f-contact-col-1">
<h2>{data.title}</h2>
<div class="f-contact-item" set:html={data.description} />
</div>
<!-- Formularz -->
<div class="f-contact-col-2">
<h2>{data.contactFormTitle}</h2>
<form id="contactForm" class="f-contact-form">
<div class="f-contact-form-inner">
<input
type="text"
name="firstName"
placeholder={form.firstName.placeholder}
class="f-input"
required
/>
<input
type="text"
name="lastName"
placeholder={form.lastName.placeholder}
class="f-input"
required
/>
</div>
<div class="grid grid-cols-2 gap-4">
<input
type="email"
name="email"
placeholder={form.email.placeholder}
class="f-input"
required
autocomplete="email"
/>
<input
type="tel"
name="phone"
placeholder={form.phone.placeholder}
class="f-input"
required
autocomplete="tel"
/>
</div>
<input
type="text"
name="subject"
placeholder={form.subject.placeholder}
class="f-input"
required
/>
<textarea
name="message"
rows={form.message.rows}
placeholder={form.message.placeholder}
class="f-input"
required></textarea>
<label class="f-rodo">
<input type="checkbox" name="rodo" required />
<span>
{form.rodo.label}
<a
href={form.rodo.policyLink}
title={form.rodo.policyTitle}
>{form.rodo.policyText}</a
>.
</span>
</label>
<button title={form.submit.title}>
{form.submit.label}
</button>
</form>
</div>
<section id="kontakt" class="f-section">
<div class="f-contact-grid">
<!-- Kolumna lewa -->
<div class="f-contact-col-1">
<h2>{data.title}</h2>
<div class="f-contact-item" set:html={data.description}></div>
</div>
<div class="f-contact-map">
<MapGoogle
apiKey={apiKey}
lat={data.lat}
lon={data.lng}
zoom={16}
title={data.markerTitle}
description={data.markerAddress}
showMarker={true}
mode="contact"
mapStyleId={data.maps.mapId}
/>
<div class="f-contact-col-2">
<h2>{data.contactFormTitle}</h2>
<form id="contactForm" class="f-contact-form">
<div class="f-contact-form-inner">
<input type="text" name="firstName" placeholder={form.firstName.placeholder} class="f-input" required />
<input type="text" name="lastName" placeholder={form.lastName.placeholder} class="f-input" required />
</div>
<div class="grid grid-cols-2 gap-4">
<input type="email" name="email" placeholder={form.email.placeholder} class="f-input" required autocomplete="email" />
<input type="tel" name="phone" placeholder={form.phone.placeholder} class="f-input" required autocomplete="tel" />
</div>
<input type="text" name="subject" placeholder={form.subject.placeholder} class="f-input" required />
<textarea name="message" rows={form.message.rows} placeholder={form.message.placeholder} class="f-input" required></textarea>
<label class="f-rodo">
<input type="checkbox" name="rodo" required />
<span>
{form.rodo.label}
<a href={form.rodo.policyLink} title={form.rodo.policyTitle}>{form.rodo.policyText}</a>.
</span>
</label>
<button title={form.submit.title}>{form.submit.label}</button>
</form>
</div>
<!-- TODO: Poprawić obslugę błedu wysyłania wiadomości by pojawiał sie toast i ulozyć css -->
<div id="toast" class="f-toast"></div>
</div>
<div class="f-contact-map">
<MapGoogle
apiKey={apiKey}
lat={data.lat}
lon={data.lng}
zoom={16}
title={data.markerTitle}
description={data.markerAddress}
showMarker={true}
mode="contact"
mapStyleId={data.maps.mapId}
/>
</div>
<div id="toast" class="f-toast"></div>
</section>
<!-- ReCaptcha -->
<script
is:inline
define:vars={{ siteKey: import.meta.env.PUBLIC_RECAPTCHA_SITE_KEY }}
>
window.FUZ_RECAPTCHA_KEY = siteKey;
<!-- ReCaptcha v3 -->
<script is:inline define:vars={{ siteKey: import.meta.env.PUBLIC_RECAPTCHA_SITE_KEY }}>
window.FUZ_RECAPTCHA_KEY = siteKey;
const recaptchaScript = document.createElement("script");
recaptchaScript.src =
"https://www.google.com/recaptcha/api.js?render=" + siteKey;
document.head.appendChild(recaptchaScript);
const s = document.createElement("script");
s.src = "https://www.google.com/recaptcha/api.js?render=" + siteKey;
s.async = true;
document.head.appendChild(s);
</script>
<script
is:inline
define:vars={{
successMsg: JSON.stringify(form.submit.successMessage),
errorMsg: JSON.stringify(form.submit.errorMessage),
}}
is:inline
define:vars={{
successMsg: form.successMessage,
errorMsg: form.errorMessage
}}
>
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("contactForm");
const toast = document.getElementById("toast");
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("contactForm");
const toast = document.getElementById("toast");
if (!form) return;
if (!form) return;
form.addEventListener("submit", async (e) => {
if (!form.reportValidity()) return;
form.addEventListener("submit", async (e) => {
if (!form.reportValidity()) return;
e.preventDefault();
e.preventDefault();
const data = Object.fromEntries(new FormData(form).entries());
data.rodo = form.rodo.checked;
const formData = new FormData(form);
const token = await grecaptcha.execute(window.FUZ_RECAPTCHA_KEY, { action: "submit" });
data.recaptcha = token;
const payload = Object.fromEntries(formData.entries());
payload.rodo = formData.get("rodo") === "on";
const resp = await fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
const token = await grecaptcha.execute(window.FUZ_RECAPTCHA_KEY, {
action: "submit",
});
payload.recaptcha = token;
const json = await resp.json();
const resp = await fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
showToast(json.ok ? successMsg : errorMsg, json.ok ? "success" : "error");
const json = await resp.json();
showToast(
json.ok ? JSON.parse(successMsg) : JSON.parse(errorMsg),
json.ok ? "success" : "error",
);
if (json.ok) form.reset();
});
function showToast(message, type = "success") {
toast.innerHTML = `
<div class="fuz-toast-msg ${type}">
${message}
</div>
`;
toast.classList.remove("visible");
void toast.offsetWidth;
toast.classList.add("visible");
setTimeout(() => {
toast.classList.remove("visible");
}, 3000);
}
if (json.ok) form.reset();
});
function showToast(msg, type) {
toast.innerHTML = `<div class="f-toast-msg ${type}">${msg}</div>`;
toast.classList.remove("visible");
void toast.offsetWidth;
toast.classList.add("visible");
setTimeout(() => toast.classList.remove("visible"), 3000);
}
});
</script>

12
src/content/mapa-zasiegu/page.yaml
View File

@@ -1,12 +0,0 @@
przelaczniki:
- id: "zasieg"
etykieta: "Rodzaj zasiegu"
domyslny: "none"
title: "Zmień rodzaj"
opcje:
- id: "swiatlowodowy"
nazwa: "Światłowodowy"
- id: "radiowy"
nazwa: "Radiowy"
- id: "none"
nazwa: "Ukryj zasięgi"

2
src/content/seo/home.yaml
View File

@@ -1,5 +1,5 @@
site:
name: "FUZ – Internet światłowodowy i radiowy w Wyszkowie"
name: "FUZ – Internet światłowodowy w Wyszkowie"
description: "Stabilny i szybki internet"
url: "https://www.fuz.pl"
lang: "pl"

33
src/islands/MapRangeSwitch.jsx
View File

@@ -1,33 +0,0 @@
import { useState } from "preact/hooks";
import "../styles/offers/offers-switches.css";
export default function MapRangeSwitch() {
const [selected, setSelected] = useState("none");
const options = [
{ id: "swiatlowodowy", nazwa: "Światłowodowy" },
{ id: "radiowy", nazwa: "Radiowy" },
{ id: "none", nazwa: "Ukryj" }
];
const update = (id) => {
setSelected(id);
window?.handleMapSwitch?.(id);
};
return (
<div class="map-range-switch fuz-switches-wrapper">
<div class="fuz-switch-group flex sm:flex-row flex-col w-full">
{options.map((op) => (
<button
type="button"
class={`fuz-switch ${selected === op.id ? "active" : ""} w-full sm:w-auto`}
onClick={() => update(op.id)}
>
{op.nazwa}
</button>
))}
</div>
</div>
);
}

32
src/islands/RangeForm.jsx
View File

@@ -22,9 +22,6 @@ export default function RangeForm() {
let timeoutCity = null;
let timeoutStreet = null;
// =====================================================
// AUTOCOMPLETE MIASTO
// =====================================================
async function fetchCitySuggestions(q) {
const res = await fetch(`/api/cities-autocomplete?q=${encodeURIComponent(q)}`);
setCitySuggest(await res.json());
@@ -80,9 +77,6 @@ export default function RangeForm() {
cityListRef.current.children[highlightIndex]?.scrollIntoView({ block: "nearest" });
}, [highlightIndex]);
// =====================================================
// AUTO-MATCH MIASTO — NOWE!
// =====================================================
useEffect(() => {
if (!citySuggest.length) return;
@@ -98,9 +92,6 @@ export default function RangeForm() {
}
}, [city, citySuggest]);
// =====================================================
// DOSTĘPNOŚĆ ULIC
// =====================================================
async function updateStreetAvailability(currentCity) {
if (!currentCity) {
setStreetDisabled(true);
@@ -133,9 +124,6 @@ export default function RangeForm() {
updateStreetAvailability(city);
}, [city]);
// =====================================================
// AUTOCOMPLETE ULICA
// =====================================================
async function fetchStreetSuggestions(q, c) {
const res = await fetch(
`/api/streets-autocomplete?city=${encodeURIComponent(c)}&q=${encodeURIComponent(q)}`
@@ -194,9 +182,6 @@ export default function RangeForm() {
streetListRef.current.children[streetHighlightIndex]?.scrollIntoView({ block: "nearest" });
}, [streetHighlightIndex]);
// =====================================================
// AUTO-MATCH ULICA — NOWE!
// =====================================================
useEffect(() => {
if (!streetSuggest.length) return;
@@ -211,9 +196,6 @@ export default function RangeForm() {
}
}, [street, streetSuggest]);
// =====================================================
// SUBMIT
// =====================================================
async function onSubmit(e) {
e.preventDefault();
setError("");
@@ -248,17 +230,13 @@ export default function RangeForm() {
setLoading(false);
}
// =====================================================
// RENDER
// =====================================================
return (
<form class="flex flex-col gap-2" onSubmit={onSubmit} autocomplete="off">
{/* CITY */}
<div class="autocomplete-wrapper">
<input
class={`f-input ${citySuggest.length ? "autocomplete-open" : ""}`}
name="formCity"
placeholder="Wpisz miejscowość..."
value={city}
onInput={onCityInput}
@@ -295,6 +273,7 @@ export default function RangeForm() {
? "W tej miejscowości nie występują"
: "Wpisz ulicę..."
}
name="formStreet"
value={street}
readOnly={streetDisabled}
onInput={streetDisabled ? undefined : onStreetInput}
@@ -323,24 +302,23 @@ export default function RangeForm() {
{/* NUMBER */}
<input
class="f-input"
name="formNumber"
placeholder="np. 1A"
value={number}
onInput={(e) => setNumber(e.target.value)}
required
/>
{/* ERROR */}
{error && (
<p class="text-red-600 dark:text-red-400 text-sm">{error}</p>
<p class="text-red-600text-lg">{error}</p>
)}
{/* BUTTON */}
<button
class="btn btn-outline"
disabled={loading}
>
{loading ? (
<span class="w-5 h-5 border-2 border-[var(--fuz-accent)] border-t-transparent rounded-full animate-spin"></span>
<span class="w-5 h-5 border-2 border-[var(--f-text)] border-t-transparent rounded-full animate-spin"></span>
) : (
"Sprawdź dostępność →"
)}

8
src/pages/api/contact.ts
View File

@@ -8,14 +8,12 @@ export const POST: APIRoute = async ({ request }) => {
const transporter = nodemailer.createTransport({
host: import.meta.env.SMTP_HOST,
port: Number(import.meta.env.SMTP_PORT),
secure: true, // 465 = SSL
secure: true,
auth: {
user: import.meta.env.SMTP_USER,
pass: import.meta.env.SMTP_PASS,
},
tls: {
rejectUnauthorized: false, // wymagane przez Webio
}
tls: { rejectUnauthorized: false }
});
await transporter.sendMail({
@@ -31,7 +29,7 @@ Temat: ${form.subject}
Wiadomość:
${form.message}
`.trim()
`.trim(),
});
return new Response(JSON.stringify({ ok: true }), { status: 200 });

2
src/pages/index.astro
View File

@@ -14,5 +14,5 @@ const hero = yaml.load(fs.readFileSync("./src/content/home/hero.yaml", "utf8"));
<DefaultLayout seo={seo}>
<Hero {...hero} />
<SectionRenderer src="./src/content/site/site.section.yaml" />
<SectionContact />
<!-- <SectionContact /> -->
</DefaultLayout>

10
src/pages/kontakt/index.astro
View File

@@ -1,5 +1,6 @@
---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import SectionContact from "../../components/sections/SectionContact.astro";
const seo = {
title: "Kontakt – FUZ",
@@ -9,12 +10,5 @@ const seo = {
---
<DefaultLayout seo={seo}>
<section class="fuz-section">
<div class="fuz-container">
<h1 class="fuz-hero-title">Kontakt – FUZ</h1>
<p class="mt-4 text-gray-600 dark:text-gray-300">
Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.
</p>
</div>
</section>
<SectionContact />
</DefaultLayout>

187
src/pages/mapa-zasiegu/index.astro
View File

@@ -1,9 +1,7 @@
---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import MapGoogle from "../../components/maps/MapGoogle.astro";
import MapRangeSwitch from "../../islands/MapRangeSwitch.jsx";
import RangeForm from "../../islands/RangeForm.jsx";
//import CitiesList from "../../components/maps/CitiesList.astro";
import "../../styles/map-google.css";
@@ -11,49 +9,40 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
const lat = 52.597388;
const lon = 21.456797;
const mapStyleId = "8e0a97af9476f2d3";
// const res = await fetch(new URL("/api/all-cities", Astro.site));
// const cities = await res.json();
---
<script>
declare global {
interface Window {
handleMapSwitch?: (mode: string) => void;
showAddressOnMap?: (result: any) => void;
fuzMaps?: any;
}
}
</script>
<DefaultLayout title="FUZ Mapa zasięgu sieci">
<DefaultLayout title="FUZ Mapa zasięgu sieci światłowodowej">
<section class="flex flex-col md:flex-row h-full min-h-[80vh]">
<!-- PANEL -->
<!-- PANEL LEWY -->
<aside
class="w-full md:w-[340px] bg-[var(--f-background)] text-[var(--f-text)]
border-r border-gray-200 dark:border-slate-700 pt-6 px-6
flex flex-col gap-6 overflow-y-auto z-40"
pt-6 px-6 flex flex-col gap-6 overflow-y-auto z-40"
>
<h3 class="text-3xl">Sprawdź dostępność usług</h3>
<p class="text-sm">
Wybierz swoją miejscowość i ulicę oraz numer budynku, aby sprawdzić dostępność naszych
usług internetowych w Twojej okolicy.
Wybierz swoją miejscowość i ulicę oraz numer budynku, aby sprawdzić
dostępność usług światłowodowych FUZ.
</p>
<!-- 🔵 WYNIOSŁY FORMULARZ (ISLAND) -->
<RangeForm client:load />
</aside>
<!-- MAPA -->
<div class="flex-1 relative min-h-[50vh] md:min-h-0">
<div class="map-range-container">
<MapRangeSwitch client:load />
</div>
<MapGoogle
apiKey={apiKey}
lat={lat}
lon={lon}
zoom={12}
zoom={17}
showMarker={true}
mode="full"
mapStyleId={mapStyleId}
@@ -61,82 +50,45 @@ const mapStyleId = "8e0a97af9476f2d3";
</div>
</section>
<!-- <CitiesList cities={cities} /> -->
<!-- ===================================================== -->
<!-- WARSTWY KML -->
<!-- ===================================================== -->
<script is:inline>
let fiberLayer = null;
let radioLayer = null;
window.getActiveMap = function () {
if (!window.fuzMaps) return null;
return Object.values(window.fuzMaps)[0] || null;
};
window.fiberRangeShow = function (show) {
function enableFiberLayer() {
const map = window.getActiveMap();
if (!map) return;
if (!show && fiberLayer) {
if (fiberLayer) {
fiberLayer.setMap(null);
fiberLayer = null;
return;
}
if (show && !fiberLayer) {
fiberLayer = new google.maps.KmlLayer(
"https://www.google.com/maps/d/kml?mid=1Or8SF_9qx6QMdidS-99V_jqQuhF9de0&forcekml=1",
{ suppressInfoWindows: true, preserveViewport: false },
);
fiberLayer.setMap(map);
}
};
fiberLayer = new google.maps.KmlLayer(
"https://www.google.com/maps/d/kml?mid=1Or8SF_9qx6QMdidS-99V_jqQuhF9de0&forcekml=1",
{ suppressInfoWindows: true, preserveViewport: false },
);
fiberLayer.setMap(map);
}
window.radioRangeShow = function (show) {
// Czekamy aż mapa się załaduje
const int = setInterval(() => {
const map = window.getActiveMap();
if (!map) return;
if (!show && radioLayer) {
radioLayer.setMap(null);
radioLayer = null;
return;
if (map && window.google?.maps) {
clearInterval(int);
enableFiberLayer();
}
if (show && !radioLayer) {
radioLayer = new google.maps.KmlLayer(
"https://www.google.com/maps/d/kml?mid=1c08LxJ9uCbWWfCCyopJmAMLQI1rmTkA&forcekml=1",
{ suppressInfoWindows: true, preserveViewport: false },
);
radioLayer.setMap(map);
}
};
window.handleMapSwitch = function (mode) {
if (mode === "swiatlowodowy") {
window.fiberRangeShow(true);
window.radioRangeShow(false);
} else if (mode === "radiowy") {
window.fiberRangeShow(false);
window.radioRangeShow(true);
} else {
window.fiberRangeShow(false);
window.radioRangeShow(false);
}
};
}, 100);
</script>
<!-- ===================================================== -->
<!-- FUNKCJA: POKAZYWANIE MARKERA NA MAPIE -->
<!-- ===================================================== -->
<script is:inline>
window.showAddressOnMap = async function (result) {
const map = window.getActiveMap();
if (!map) return;
// Jeśli API jeszcze się nie załadowało – czekamy na Promise
// Czekamy aż API będzie gotowe
if (!window.google?.maps?.importLibrary) {
await new Promise((resolve) => {
const int = setInterval(() => {
@@ -148,84 +100,71 @@ const mapStyleId = "8e0a97af9476f2d3";
});
}
// NOWE LIBRARIES
const { AdvancedMarkerElement } =
await google.maps.importLibrary("marker");
const { InfoWindow } = await google.maps.importLibrary("maps");
// Kasujemy stare
if (window._activeMarker) window._activeMarker.map = null;
if (window._activeInfo) window._activeInfo.close();
const pos = { lat: result.lat, lng: result.lon };
// ★ Nowy marker
const overlay = document.createElement("div");
overlay.className = "pulse-marker";
const projection = map.getProjection();
if (projection) {
const point = projection.fromLatLngToPoint(new google.maps.LatLng(pos));
overlay.style.left = point.x + "px";
overlay.style.top = point.y + "px";
}
setTimeout(() => {
overlay.remove();
}, 1500);
map.getDiv().appendChild(overlay);
map.panTo(pos);
let targetZoom = 16;
setTimeout(() => {
map.setZoom(targetZoom);
}, 250);
const marker = new AdvancedMarkerElement({
map,
position: pos,
title: `${result.city} ${result.street ?? ""} ${result.number}`,
className: "marker-bounce",
});
window._activeMarker = marker;
// ★ Nowy infoWindow — działa tak samo, ale z importLibrary
// InfoWindow
const html = `
<div style="font-size:14px; line-height:1.5; padding:2px; color:#000;">
<div style="margin-bottom:6px;">
<strong>${result.city}</strong><br/>
<strong>${result.street ?? ""} ${result.number}</strong>
</div>
<div>
${
result.availableFiber
? '✔ <span style="color:green;">Internet światłowodowy dostępny</span>'
: '✖ <span style="color:red;">Internet światłowodowy niedostępny</span>'
}<br/>
${
result.availableRadio
? '✔ <span style="color:green;">Internet radiowy dostępny</span>'
: '✖ <span style="color:red;">Internet radiowy niedostępny</span>'
}
</div>
<a href="/#kontakt"
style="display:block; margin-top:8px;
background:#00aaff; color:white;
padding:6px 8px; text-align:center;
text-decoration:none; border-radius:6px;"
title="Przejdź do formularza kontaktowego">
Przejdź do kontaktu →
</a>
<div class="f-info-window">
<div class="f-info-header">
<div class="f-info-heading">
${
result.availableFiber
? `<span class="ok">✔</span> Internet światłowodowy dostępny`
: `<span class="no">✖</span> Światłowód niedostępny`
}
</div>
`;
<div class="f-info-city">${result.city}</div>
<div class="f-info-street">${result.street ?? ""} ${result.number}</div>
</div>
</div>
<div class="w-full flex justify-center mb-4">
<a href="/kontakt" class="btn btn-outline">Przejdź do kontaktu →</a>
</div>
</div>
`;
const info = new InfoWindow({ content: html });
window._activeInfo = info;
info.open({
map,
anchor: marker,
});
map.setCenter(pos);
map.setZoom(16);
info.open({ map, anchor: marker });
};
</script>
</DefaultLayout>
<style is:global>
.fade-in {
animation: fuzFadeIn 0.25s ease-out forwards;
}
@keyframes fuzFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

5
src/styles/base.css
View File

@@ -15,7 +15,6 @@
@import "./offers/offers-main.css";
@import "./offers/offers-switches.css";
html {
font-family: 'Nunito', sans-serif;
/* font-family: "Lora", sans-serif; */
@@ -24,10 +23,6 @@ html {
scroll-behavior: smooth;
}
body {
/* @apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased; */
}
.grecaptcha-badge {
display: none !important;
}

48
src/styles/buttons.css
View File

@@ -3,46 +3,39 @@
}
.btn-primary {
@apply border-none;
background: var(--btn-background);
color: var(--btn-text);
@apply border-none bg-[--btn-background] text-[--btn-text];
}
.btn-primary:hover {
filter: brightness(0.95);
@apply brightness-[0.95];
}
.btn-outline {
@apply border border-solid;
border-color: var(--btn-outline-border);
color: var(--btn-outline-text);
background: var(--btn-outline-background);
@apply border border-solid border-[--btn-outline-border] text-[--btn-outline-text] bg-[--btn-outline-background];
}
.btn-outline:hover {
background-color: var(--btn-outline-background-hover);
color: var(--btn-outline-text-hover);
@apply bg-[--btn-outline-background-hover] text-[--btn-outline-text-hover];
}
.btn-ghost {
background-color: transparent;
color: var(--btn-ghost-text);
.btn-ghost {
@apply bg-transparent text-[--btn-ghost-text];
}
.btn-ghost:hover {
background-color: var(--btn-ghost-hover-bg);
@apply bg-[--btn-ghost-hover-bg];
}
.f-input {
@apply w-full py-3 px-4 rounded-xl border border-[var(--f-input-border)] bg-[var(--f-background)] text-[var(--f-text)] transition-all duration-200;
@apply w-full py-3 px-4 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] transition-all duration-200;
}
.f-input:hover {
@apply border-[var(--f-text)] opacity-[0.9];
@apply border-[--f-text] opacity-[0.9];
}
.f-input:focus {
@apply outline-none border-[var(--f-header)];
@apply outline-none border-[--f-header];
box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-header) 40%, transparent);
}
@@ -50,48 +43,31 @@
color: color-mix(in srgb, var(--f-text) 40%, transparent);
}
/* Error */
.fuz-input-error {
border-color: #ff4d4f !important;
box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.3) !important;
}
/* Disabled */
.fuz-input:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: color-mix(in srgb, var(--f-background) 80%, #888);
}
/* Textarea */
/* textarea.fuz-input {
resize: none;
} */
/* .fuz-link {
color: var(--fuz-accent);
transition: color 0.2s ease;
} */
/* Kapsuła — input + dropdown jako jedna całość */
.autocomplete-wrapper {
position: relative;
}
/* Input (gdy dropdown otwarty) */
.autocomplete-open {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-width: 0 !important;
}
/* Dropdown */
.autocomplete-list {
@apply absolute left-0 right-0 z-50 bg-[var(--f-background)] text-[var(--f-text)] border border-gray-300 dark:border-slate-700 rounded-b-xl shadow-xl max-h-56 overflow-auto;
@apply absolute left-0 right-0 z-50 bg-[--f-background] text-[--f-text] border border-gray-300 dark:border-slate-700 rounded-b-xl shadow-xl max-h-56 overflow-auto;
border-top: none;
/* ważne */
animation: fadeIn 0.12s ease-out;
}
@@ -101,7 +77,7 @@
.autocomplete-list li:hover,
.autocomplete-list li.active {
@apply bg-gray-100 dark:bg-slate-800;
@apply bg-[--f-autocomplete-hover-bg] text-[--f-autocomplete-hover-text];
}
@keyframes fadeIn {

26
src/styles/contact.css
View File

@@ -15,7 +15,7 @@
}
.f-contact-col-2 {
@apply bg-[var(--f-background)] text-[var(--f-text)];
@apply bg-[--f-background] text-[--f-text];
h1,
h2,
@@ -32,11 +32,11 @@
h2,
h3,
h4 {
@apply text-2xl font-semibold text-[var(--f-text)] m-0;
@apply text-2xl font-semibold text-[--f-text] m-0;
}
p {
@apply text-xl mt-4 leading-relaxed text-[var(--f-text)];
@apply text-xl mt-4 leading-relaxed text-[--f-text];
}
}
@@ -49,14 +49,14 @@
}
.f-rodo {
@apply flex items-start gap-3 text-lg text-[var(--f-text)];
@apply flex items-start gap-3 text-lg text-[--f-text];
a {
@apply text-[var(--f-link-text)];
@apply text-[--f-link-text];
}
a:hover {
@apply text-[var(--fuz-link-hover)];
@apply text-[--fuz-link-hover];
}
input {
@@ -73,8 +73,10 @@
@apply w-full max-w-7xl mx-auto mt-6;
}
.s-toast {
@apply fixed top-5 left-1/2 z-[9999] pointer-events-none;
.f-toast {
@apply fixed left-1/2 z-[999999] pointer-events-none;
top: calc(var(--nav-height, 80px) + 20px);
@apply opacity-0 -translate-y-3 -translate-x-1/2 transition-all duration-300 ease-out;
}
@@ -83,15 +85,13 @@
}
.f-toast-msg {
@apply px-5 py-3 rounded-xl shadow-lg text-sm;
background: var(--fuz-accent);
color: var(--fuz-accent-text);
@apply px-5 py-3 rounded-xl shadow-lg text-lg bg-[--f-background-o] text-[--f-text];
}
.f-toast-msg.success {
background: var(--fuz-accent);
@apply bg-green-900 text-white;
}
.f-toast-msg.error {
@apply bg-red-500 text-white;
}
}

14
src/styles/cookie.css
View File

@@ -1,9 +1,6 @@
@layer components {
#cookie-banner {
@apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out;
background: var(--f-cookie-background);
color: var(--f-cookie-text);
/* border-top: 1px solid rgba(0, 0, 0, 0.1); */
@apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out bg-[--f-cookie-background] text-[--f-cookie-text];
}
.f-cookie-panel-inner {
@@ -15,8 +12,7 @@
}
.f-cookie-privacy-link {
@apply ml-3;
color: var(--f-link-text);
@apply ml-3 text-[--f-link-text];
}
.f-cookie-accept,
@@ -25,12 +21,10 @@
}
.f-cookie-accept {
background: var(--f-cookie-accept-background);
color: var(--f-cookie-accept-text);
@apply bg-[--f-cookie-accept-background] text-[--f-cookie-accept-text]
}
.f-cookie-reject {
background: var(--f-cookie-reject-background);
color: var(--f-cookie-reject-text);
@apply bg-[--f-cookie-reject-background] text-[--f-cookie-reject-text]
}
}

12
src/styles/footer.css
View File

@@ -1,6 +1,6 @@
@layer components {
.f-footer {
@apply mt-2 border-t border-[var(--f-input-border)] bg-[var(--f-background-o)] text-[var(--f-text)] pt-2;
@apply mt-2 border-t border-[--f-input-border] bg-[--f-background-o] text-[--f-text] pt-2;
}
.f-footer-inner {
@@ -16,15 +16,15 @@
h4,
h5,
h6 {
@apply text-xl font-semibold text-[var(--f-header)];
@apply text-xl font-semibold text-[--f-header];
}
a {
@apply text-[var(--f-link-text)];
@apply text-[--f-link-text];
}
a:hover {
@apply text-[var(--fuz-link-hover)];
@apply text-[--fuz-link-hover];
}
p {
@@ -33,14 +33,14 @@
}
.f-footer-copyright {
@apply text-center py-4 text-base text-[var(--f-text)];
@apply text-center py-4 text-base text-[--f-text];
}
.f-footer-recaptcha {
@apply text-base;
a {
@apply text-[var(--f-link-text)];
@apply text-[--f-link-text];
}
}
}

19
src/styles/hero.css
View File

@@ -1,25 +1,20 @@
.f-hero {
@apply relative overflow-hidden text-center py-32 px-6;
background: linear-gradient(to right,
var(--fuz-hero-from),
var(--fuz-hero-to));
color: var(--f-text);
@apply relative overflow-hidden text-center py-28 px-6;
}
.f-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.4];
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.6];
}
.f-hero-inner {
@apply relative max-w-7xl mx-auto text-[var(--f-text)];
@apply relative max-w-7xl mx-auto text-[f-text];
h1 {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[--f-header];
}
h2 {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[--f-header-2];
animation-name: fade-in;
animation-duration: 0.8s;
animation-timing-function: ease-out;
@@ -27,13 +22,13 @@
}
p {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[--f-header-items];
animation: fade-in 0.3s ease-out forwards;
animation-delay: calc(var(--delay) * 0.4s);
}
p.description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[--f-text];
}
}

94
src/styles/map-google.css
View File

@@ -31,24 +31,92 @@
}
.map-range-switch {
background: var(--f-background);
/* Pulsująca obwódka budynku */
.pulse-marker {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 170, 255, 0.55);
position: absolute;
transform: translate(-50%, -50%);
animation: pulseAnim 1.3s ease-out forwards;
}
.map-range-switch .fuz-switch-group {
display: flex;
gap: 8px;
@keyframes pulseAnim {
0% {
transform: translate(-50%, -50%) scale(0.2);
opacity: 1;
}
80% {
transform: translate(-50%, -50%) scale(1.6);
opacity: 0.3;
}
100% {
opacity: 0;
}
}
/* Mobile: pionowo */
@media (max-width: 640px) {
.map-range-switch .fuz-switch-group {
flex-direction: column;
width: 100%;
/* Animacja markera */
.marker-bounce {
animation: markerBounce 0.35s ease-out forwards;
}
@keyframes markerBounce {
0% {
transform: translateY(-18px);
opacity: 0;
}
.map-range-switch .fuz-switch {
width: 100%;
text-align: center;
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Info window */
.f-info-window {
@apply p-3;
}
/* HEADER */
.f-info-header {
margin-bottom: 10px;
}
.f-info-heading {
@apply text-lg uppercase;
.ok {
color: green;
}
.no {
color: #d00;
}
}
.f-info-city,
.f-info-street {
@apply text-xl ml-3;
}
.gm-style {
background: var(--f--background) !important;
}
.gm-style-iw-c {
background: var(--f-background) !important;
border-radius: 14px !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.12) !important;
padding: 0 !important;
}
.gm-style-iw-d {
overflow: visible !important;
padding: 0 !important;
background: transparent !important;
}

9
src/styles/markdown.css
View File

@@ -33,21 +33,16 @@
}
.fuz-markdown ul li::marker {
color: var(--fuz-accent);
@apply text-[--f-text];
}
.dark .fuz-markdown ul li::marker {
color: var(--fuz-accent);
}
.fuz-markdown a {
@apply no-underline hover:no-underline text-[var(--f-link-text)];
}
.fuz-markdown button.modal-link {
@apply no-underline hover:no-underline mt-2;
background: var(--f-background);
color: var(--fuz-accent);
@apply no-underline hover:no-underline mt-2 bg-[--f-background] text-[--f-link-text];
}
.fuz-markdown blockquote {
@apply border-l-4 border-gray-300 dark:border-gray-700 pl-4 italic mb-4;

18
src/styles/modal.css
View File

@@ -9,34 +9,25 @@
/* CLOSE BUTTON */
.fuz-modal-close {
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
color: var(--f-text);
opacity: 0.7;
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity text-[--f-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(--f-background);
color: var(--f-text);
@apply w-full h-full overflow-y-auto px-6 py-8 md:px-12 md:py-12 bg-[--f-background] text-[--f-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(--f-text);
@apply text-4xl font-bold mb-8 text-center text-[--f-text];
}
/* CONTENT STYLE */
.fuz-modal-content p {
@apply leading-relaxed text-2xl text-center;
}
@@ -44,7 +35,6 @@
.fuz-modal-content p img {
@apply mt-2 leading-relaxed;
}
/* ANIMATIONS */
@keyframes fadeIn {
from {
@@ -52,6 +42,6 @@
}
to {
opacity: 1;
opacity: 2;
}
}

11
src/styles/navbar.css
View File

@@ -1,5 +1,5 @@
.f-navbar {
@apply w-full shadow-sm sticky top-0 z-50 bg-[var(--f-background)] text-[var(--f-text)];
@apply w-full shadow-sm sticky top-0 z-50 bg-[--f-background] text-[--f-text];
}
.f-navbar-inner {
@@ -11,16 +11,16 @@
}
.f-navbar-link{
@apply text-base hover:text-[var(--fuz-accent)] transition-colors;
@apply text-base hover:text-[--fuz-accent] transition-colors;
}
.f-mobile-toggle {
@apply text-3xl p-2 text-[var(--f-text)];
@apply text-3xl p-2 text-[--f-text];
}
.f-mobile-menu {
@apply fixed top-0 right-0 h-full w-64 bg-[var(--f-background)] shadow-lg transform translate-x-full transition-transform duration-300 flex flex-col gap-4 p-6;
@apply fixed top-0 right-0 h-full w-64 bg-[--f-background] shadow-lg transform translate-x-full transition-transform duration-300 flex flex-col gap-4 p-6;
}
.f-mobile-menu.open {
@@ -28,8 +28,7 @@
}
.f-mobile-link {
@apply text-lg py-2 border-b text-[var(--f-text)] hover:text-[var(--fuz-accent)];
border-color: var(--f-border-color);
@apply text-lg py-2 border-b text-[--f-text] hover:text-[--fuz-accent] border-[--f-border-color];
}
.f-navbar-logo{

4
src/styles/offers/offers-extra.css
View File

@@ -14,9 +14,9 @@
}
.f-feature-link {
@apply underline cursor-pointer w-full h-full text-[var(--f-link-text)];
@apply cursor-pointer w-full h-full text-[--f-link-text] text-lg;
}
.f-feature-link:hover {
@apply text-[var(--f-link-text-hover)];
@apply text-[--f-link-text-hover];
}

4
src/styles/offers/offers-switches.css
View File

@@ -3,7 +3,7 @@
}
.f-switch-group {
@apply inline-flex overflow-hidden relative bg-[var(--f-background-switch)] mt-8;
@apply inline-flex overflow-hidden relative bg-[--f-background-switch] mt-8;
}
.f-switch {
@@ -11,7 +11,7 @@
}
.f-switch.active {
@apply text-[var(--f-text-switcher)] bg-[var(--f-background-switcher)] ;
@apply text-[--f-text-switcher] bg-[--f-background-switcher] ;
}
.f-switch:hover {

11
src/styles/offers/offers-table.css
View File

@@ -1,5 +1,5 @@
.f-table-wrapper {
@apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[var(--f-offers-border)];
@apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[--f-offers-border];
}
.f-table {
@@ -23,7 +23,7 @@
}
.f-plan-price {
@apply text-2xl font-extrabold mb-1 text-[var(--f-offers-price)];
@apply text-2xl font-extrabold mb-1 text-[--f-offers-price];
}
/* Na ten moment ukryte */
@@ -74,13 +74,6 @@
border-bottom: 2px solid var(--f-offers-popular);
}
/* .f-popular-col.f-feature-cell,
.f-popular-col.f-feature-yes,
.f-popular-col.f-feature-no {
border-top: none !important;
} */
.f-popular-badge {
@apply bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full inline-block mb-2 uppercase tracking-wide;
/* background: #3b82f6;

32
src/styles/sections.css
View File

@@ -1,7 +1,7 @@
@layer components {
.f-section-header {
@apply text-3xl md:text-4xl font-bold mb-6 text-[var(--f-header)];
@apply text-3xl md:text-4xl font-bold mb-6 text-[--f-header];
}
.f-section {
@@ -33,7 +33,7 @@
}
.f-section-title {
@apply text-4xl md:text-5xl font-bold mb-2 text-[var(--f-header)];
@apply text-4xl md:text-5xl font-bold mb-2 text-[--f-header];
}
.f-section-nav {
@@ -42,34 +42,10 @@
}
.f-section-channel {
@apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-2;
}
.f-channel-box {
@apply flex flex-col items-center p-4 rounded-xl bg-[var(--f-background)] border border-[var(--f-offers-border)] shadow-sm hover:shadow-md transition
}
/* .fuz-iframe-box {
@apply bg-white dark:bg-slate-800 p-4 rounded-xl border border-gray-200 dark:border-slate-700 shadow;
}
.fuz-iframe-wrapper {
@apply w-full overflow-hidden border-0 shadow-none;
background: transparent !important;
aspect-ratio: 16/9;
}
.fuz-iframe {
@apply w-full h-full border-0 shadow-none;
background: transparent !important;
}
.dark .fuz-iframe-wrapper {
background: transparent !important;
}
.dark .fuz-iframe {
background: transparent !important;
} */
@apply flex flex-col items-center p-4 rounded-xl bg-[--f-background] border border-[--f-offers-border] shadow-sm hover:shadow-md transition
}

22
src/styles/theme.css
View File

@@ -33,6 +33,8 @@
:root {
--f-background: var(--surface2-light);
--f-text: var(--text2-light);
--f-text-1: var(--text1-light);
--f-background-switch: var(--surface3-light);
--f-text-switcher: var(--brand-dark);
@@ -42,8 +44,7 @@
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-light));
--f-text: var(--text2-light);
--f-text-1: var(--text1-light);
--f-link-text: var(--brand-dim);
@@ -75,10 +76,21 @@
--f-cookie-accept-background: green;
/* --f-cookie-accept-text: */
--f-cookie-reject-background: var(--text2-light);
--f-autocomplete-hover-bg: var(--surface4-light);
--f-autocomplete-hover-text: var(--surface2-light);
-fuz-hero-from: #3b82f6;
/* niebieski - kolor początkowy */
--fuz-hero-to: #8b5cf6;
/* fioletowy - kolor końcowy */
}
:root.dark {
--f-background: var(--surface1-dark);
--f-text: var(--text1-dark);
--f-text-1: var(--text1-dark);
--f-background-switch: var(--surface2-dark);
--f-background-switch: var(--surface3-dark);
@@ -89,8 +101,7 @@
--f-header-2: var(--text1-dark);
--f-header-items: (var(--text2-dark));
--f-text: var(--text1-dark);
--f-text-1: var(--text1-dark);
--f-link-text: var(--brand-dark);
--f-link-text-hover: var(--f-text2-dark);
@@ -119,6 +130,9 @@
--f-cookie-accept-background: green;
/* --f-cookie-accept-text: */
--f-cookie-reject-background: var(--text2-light);
--f-autocomplete-hover-bg: var(--surface3-dark);
--f-autocomplete-hover-text: var(--text1-dark);
}
/* Body */