Stylizacja strony dokumenty, czyszczenie informacji z wyboru opcji do kontaktu po wyslaniu, odswieżeniu

src/pages/api/contact/contact.js

@@ -145,7 +145,7 @@ ${form.message || ""}
       subject,
       text,
       html,
-      replyTo: form.email ? String(form.email) : undefined, // wygodne do "Odpowiedz"
+      replyTo: form.email ? String(form.email) : undefined,
     });
 
     return new Response(JSON.stringify({ ok: true }), {

src/pages/dokumenty/[slug].astro

@@ -3,6 +3,7 @@ import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import Markdown from "../../islands/Markdown.jsx";
 import { marked } from "marked";
 import { getDocumentBySlug } from "../../lib/documents";
+import "../../styles/document.css";
 
 const { slug } = Astro.params;
 
@@ -17,7 +18,7 @@ const html = marked.parse(doc.content);
 <DefaultLayout title={doc.title}>
   <section class="f-section">
     <div class="f-section-grid-single">
-      <a href="/dokumenty" class="text-sm opacity-70 hover:opacity-100">
+      <a href="/dokumenty" class="f-document-link">
         ← Wróć do dokumentów
       </a>
 

src/pages/dokumenty/index.astro

@@ -1,29 +1,28 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import { listDocuments } from "../../lib/documents";
+import "../../styles/document.css";
 
 const documents = listDocuments().filter((d) => d.visible === true);
 ---
 
 <DefaultLayout title="Dokumenty">
-  <section class="max-w-6xl mx-auto px-4 py-10">
-    <h1 class="text-4xl md:text-5xl font-bold text-[--f-header]">Dokumenty</h1>
+  <section class="f-documents">
+    <h1 class="f-documents-title">Dokumenty</h1>
 
-    <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    <div class="f-documents-grid">
       {documents.map((doc) => (
         <a
           href={`/dokumenty/${doc.slug}`}
-          class="group rounded-2xl border border-[--f-border-color]
-                 bg-[--f-background] p-5 shadow-sm
-                 transition hover:-translate-y-0.5 hover:shadow-md"
+          class="f-document-card"
         >
-          <h3 class="text-xl font-bold group-hover:underline">{doc.title}</h3>
+          <h3 class="f-document-title">{doc.title}</h3>
 
           {doc.intro && (
-            <p class="mt-3 text-sm opacity-80 leading-relaxed">{doc.intro}</p>
+            <p class="f-document-intro">{doc.intro}</p>
           )}
 
-          <span class="mt-4 inline-block text-sm opacity-70">Otwórz →</span>
+          <span class="f-document-link">Otwórz →</span>
         </a>
       ))}
     </div>

src/pages/kontakt/index.astro

@@ -18,104 +18,108 @@ const form = data.form;
 ---
 
 <DefaultLayout seo={seo}>
-<section class="f-section">
-  <div class="f-section-grid md:grid-cols-2 gap-10 items-start">
-    <div>
-      <h2 class="f-section-title">{data.title}</h2>
-      <div class="f-contact-item" set:html={data.description} />
+  <section class="f-section">
+    <div class="f-section-grid md:grid-cols-2 gap-10 items-start">
+      <div>
+        <h2 class="f-section-title">{data.title}</h2>
+        <div class="f-contact-item" set:html={data.description} />
+      </div>
+
+      <div>
+        <h2 class="f-section-title">{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-1 sm: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
+            type="submit"
+            class="btn btn-primary w-full py-3"
+            title={form.submit.title}
+          >
+            {form.submit.label}
+          </button>
+        </form>
+      </div>
     </div>
 
-    <div>
-      <h2 class="f-section-title">{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-1 sm: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
+    <div class="mt-10">
+      <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}
         />
-
-        <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 type="submit" class="btn btn-primary w-full py-3" title={form.submit.title}>
-          {form.submit.label}
-        </button>
-      </form>
+      </div>
     </div>
-  </div>
 
-  <div class="mt-10">
-    <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>
+    <div id="toast" class="f-toast"></div>
 
-  <div id="toast" class="f-toast"></div>
-
-  <input type="hidden" name="offerConfig" id="offerConfig" />
-</section>
+    <input type="hidden" name="offerConfig" id="offerConfig" />
+  </section>
 
   <!-- ReCaptcha v3 -->
   <script
@@ -182,63 +186,72 @@ const form = data.form;
 
       // ----------
       const LS_KEY = "fuz_offer_config_v1";
+      const SS_INJECTED_KEY = "fuz_offer_injected_v1";
 
-function formatOfferSummary(o) {
-  if (!o || !o.pkg) return "";
+      function clearOfferDraft() {
+        try {
+          localStorage.removeItem(LS_KEY);
+          sessionStorage.removeItem(SS_INJECTED_KEY);
 
-  const lines = [];
-  lines.push(`Wybrana oferta: ${o.pkg.name} (${o.totals?.base ?? 0} ${o.totals?.currencyLabel ?? ""})`);
+          const hidden = document.getElementById("offerConfig");
+          if (hidden) hidden.value = "";
+        } catch {}
+      }
 
-  if (o.decoder) lines.push(`Dekoder: ${o.decoder.name} (+${o.decoder.price} ${o.totals?.currencyLabel ?? ""})`);
-  if (o.phone) lines.push(`Telefon: ${o.phone.name} (+${o.phone.price} ${o.totals?.currencyLabel ?? ""})`);
+      function hydrateOfferIntoForm() {
+        try {
+          if (sessionStorage.getItem(SS_INJECTED_KEY) === "1") return;
 
-  if (Array.isArray(o.tvAddons) && o.tvAddons.length) {
-    lines.push("Pakiety TV:");
-    o.tvAddons.forEach((x) => {
-      const term = x.term ? `, ${x.term}` : "";
-      lines.push(`- ${x.nazwa} x${x.qty} (${x.unit} ${o.totals?.currencyLabel ?? ""}${term})`);
-    });
-  }
+          const raw = localStorage.getItem(LS_KEY);
+          if (!raw) return;
 
-  if (Array.isArray(o.addons) && o.addons.length) {
-    lines.push("Dodatki:");
-    o.addons.forEach((x) =>
-      lines.push(`- ${x.nazwa} x${x.qty} (${x.unit} ${o.totals?.currencyLabel ?? ""})`),
-    );
-  }
+          const payload = JSON.parse(raw);
 
-  lines.push(`RAZEM: ${o.totals?.total ?? 0} ${o.totals?.currencyLabel ?? ""}`);
-  return lines.join("\n");
-}
+          const msg = document.querySelector('textarea[name="message"]');
+          const subject = document.querySelector('input[name="subject"]');
+          const hidden = document.getElementById("offerConfig");
 
-function hydrateOfferIntoForm() {
-  try {
-    const raw = localStorage.getItem(LS_KEY);
-    if (!raw) return;
+          const offerText =
+            typeof payload?.message === "string" && payload.message.trim()
+              ? payload.message
+              : null;
 
-    const payload = JSON.parse(raw);
-    const msg = document.querySelector('textarea[name="message"]');
-    const subject = document.querySelector('input[name="subject"]');
+          if (!offerText) return;
 
-    const offerText =
-      typeof payload?.message === "string" && payload.message.trim()
-        ? payload.message
-        : null;
+          if (subject && !subject.value) {
+            subject.value = `Zapytanie: ${payload?.pkg?.name || "Oferta"}`;
+          }
 
-    if (!offerText) return;
+          if (msg) {
+            const marker = "Wybrana oferta:";
+            const alreadyHas = msg.value && msg.value.includes(marker);
+            if (!alreadyHas) {
+              msg.value = (msg.value ? msg.value + "\n\n" : "") + offerText;
+            }
+          }
 
-    if (subject && !subject.value) {
-      subject.value = `Zapytanie: ${payload?.pkg?.name || "Oferta"}`;
-    }
+          if (hidden) hidden.value = offerText;
 
-    if (msg) {
-      msg.value = (msg.value ? msg.value + "\n\n" : "") + offerText;
-    }
-  } catch {}
-}
+          sessionStorage.setItem(SS_INJECTED_KEY, "1");
+        } catch {}
+      }
 
-hydrateOfferIntoForm();
+      hydrateOfferIntoForm();
 
+      function onSubmitSuccessCleanup() {
+        clearOfferDraft();
+      }
+
+      function onLeaveCleanup() {
+        clearOfferDraft();
+      }
+
+      window.addEventListener("pagehide", onLeaveCleanup);
+      window.addEventListener("beforeunload", onLeaveCleanup);
+      if (json.ok) {
+        form.reset();
+        onSubmitSuccessCleanup();
+      }
       // ----------
     });
   </script>