Poprawki w stylach oraz zmienne środowiskowe dla smtp

docker-compose.prod.yml

@@ -11,6 +11,8 @@ services:
       - .env
     environment:
       - FUZ_DB_PATH=/app/data/ServicesRange.db
+      - SMTP_FROM_NAME="Formularz kontaktowy FUZ"
+      - SMTP_TO="cieniu2009@gmail.com"
     ports:
       - "4000:4321"
     networks:

src/components/layout/Footer.astro

@@ -1,55 +1,47 @@
 ---
 import yaml from "js-yaml";
 import fs from "fs";
-import "../../styles/footer.css";
 
 const footer = yaml.load(
   fs.readFileSync("./src/content/site/footer.yaml", "utf8"),
 );
 ---
 
-<footer
-  class="fuz-footer mt-0 border-t border-gray-200 dark:border-slate-700"
->
-  <!-- GŁÓWNY GRID -->
-  <div class="footer-inner max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12">
-    <!-- Kolumna 1 – Firma -->
-    <div class="footer-col space-y-3">
-      <h3 class="fuz-footer-title">{footer.company.name}</h3>
-      <p class="fuz-footer-text leading-relaxed">
+<footer class="f-footer">
+  <div class="f-footer-inner">
+    <div class="f-footer-col space-y-1">
+      <h3 class="f-footer-col-title">{footer.company.name}</h3>
+      <p class="f-footer-col-text">
         {footer.company.address.line1}<br />
         {footer.company.address.line2}
       </p>
     </div>
 
-    <!-- Kolumna 2 – Kontakt -->
-    <div class="footer-col space-y-1">
-      <h4 class="fuz-footer-title">Kontakt</h4>
+    <div class="f-footer-col space-y-1">
+      <h4 class="f-footer-col-title">Kontakt</h4>
       {
         footer.contact.phones.map((phone: string) => (
-          <p class="fuz-footer-text">
-            <a href={`tel:${phone.replace(/\s/g, "")}`} class="fuz-footer-link">
-              {phone}
-            </a>
+          <p class="f-footer=col-text">
+            {/* <a href={`tel:${phone.replace(/\s/g, "")}`} class="fuz-footer-link"> */}
+            {phone}
+            {/* </a> */}
           </p>
         ))
       }
-
-      <p class="fuz-footer-text">
-        <a href={`mailto:${footer.contact.email}`} class="fuz-footer-link">
+      <p class="f-footer-col-text">
+        <a href={`mailto:${footer.contact.email}`}>
           {footer.contact.email}
         </a>
       </p>
     </div>
 
-    <!-- Kolumna 3 – Usługi -->
-    <div class="footer-col">
-      <h4 class="fuz-footer-title">Usługi</h4>
-      <ul class="space-y-1">
+    <div class="f-footer-col space-y-1">
+      <h4 class="f-footer-col-title">Usługi</h4>
+      <ul>
         {
           footer.services.map((item: any) => (
             <li>
-              <a href={item.url} class="fuz-footer-link" title={item.title}>
+              <a href={item.url} title={item.title}>
                 {item.name}
               </a>
             </li>
@@ -59,16 +51,9 @@ const footer = yaml.load(
     </div>
   </div>
 
-  <!-- DÓŁ FOOTERA -->
-  <div
-    class="text-center py-0 text-sm"
-  >
+  <div class="f-footer-copyright">
     © {new Date().getFullYear()} FUZ Adam Rojek. Wszystkie prawa zastrzeżone.
 
-    <!-- ReCAPTCHA info -->
-    <div
-      class="mt-2 fuz-footer-text text-xs"
-      set:html={footer.recaptcha}
-    />
+    <div class="f-footer-recaptcha" set:html={footer.recaptcha} />
   </div>
 </footer>

src/components/layout/Header.astro

@@ -8,29 +8,37 @@ const links = [
   { name: "INTERNET RADIOWY", href: "/internet-radiowy" },
   { name: "TELEFON", href: "/telefon" },
   { name: "ZASIĘG SIECI", href: "/mapa-zasiegu" },
-  { name: "KONTAKT", href: "/#contact" }
+  { name: "KONTAKT", href: "/#contact" },
+  {
+    name: "BOK",
+    href: "https://panel.fuz.pl/userpanel/auth",
+    external: true,
+    target: "_blank",
+  },
 ];
 ---
 
 <nav class="fuz-navbar">
   <div class="fuz-navbar-inner">
-
-    <!-- Logo -->
     <a href="/" class="flex items-center gap-2 font-semibold">
-      <!-- <span class="inline-flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold"> -->
-        <img src="/assets/logo.webp" alt="FUZ Logo" class="my-0"/>
-      </span>
-      <!-- <span>FUZ</span> -->
+      <img src="/assets/logo.webp" alt="FUZ Logo" class="my-0" />
     </a>
 
-    <!-- Linki desktop -->
     <div class="hidden md:flex fuz-navbar-links">
-      {links.map(link => (
-        <a href={link.href} class="fuz-navbar-link">{link.name}</a>
-      ))}
+      {
+        links.map((link) => (
+          <a
+            href={link.href}
+            class="fuz-navbar-link"
+            target={link.target}
+            rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
+          >
+            {link.name}
+          </a>
+        ))
+      }
     </div>
 
-    <!-- Mobilne menu (hamburger + panel) -->
     <MobileMenu client:load links={links} />
   </div>
 </nav>

src/content/contact/contact.yaml

@@ -21,10 +21,6 @@ contactFormTitle: Pisząc wiadomość ...
 maps:
   mapId: "8e0a97af9476f2d3"
 
-mail:
-  from_name: "www.fuz.pl"
-  to: "cieniu2009@gmail.com"
-
 form:
   firstName:
     placeholder: "Imię"

src/islands/Cookie.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "preact/hooks";
-import "../styles/cookie.css";
+// import "../styles/cookie.css";
 
 export default function Cookie({ config }) {
   const [visible, setVisible] = useState(false);
@@ -27,20 +27,20 @@ export default function Cookie({ config }) {
         transform: visible ? "translateY(0)" : "translateY(100%)",
       }}
     >
-      <div class="cookie-panel-inner max-w-4xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+      <div class="f-cookie-panel-inner">
 
-        <p class="text-sm leading-snug">
+        <p class="f-cookie-text">
           {config.text.message}
-          <a href={config.links.privacy} class="cookie-privacy-link ml-1">
+          <a href={config.links.privacy} class="f-cookie-privacy-link" rel="noopener noreferrer">
             {config.text.more}
           </a>
         </p>
 
         <div class="flex gap-3 shrink-0">
-          <button onClick={() => handle("accepted")} class="cookie-accept">
+          <button onClick={() => handle("accepted")} class="f-cookie-accept">
             {config.text.accept}
           </button>
-          <button onClick={() => handle("rejected")} class="cookie-reject">
+          <button onClick={() => handle("rejected")} class="f-cookie-reject">
             {config.text.reject}
           </button>
         </div>

src/pages/api/contact.ts

@@ -1,36 +1,27 @@
 import type { APIRoute } from "astro";
 import nodemailer from "nodemailer";
-import yaml from "js-yaml";
-import fs from "fs";
 
 export const POST: APIRoute = async ({ request }) => {
   try {
     const form = await request.json();
 
-    // Wczytanie YAML
-    const mailCfg = yaml.load(
-      fs.readFileSync("./src/content/contact/contact.yaml", "utf8")
-    ) as any;
-
-    // Stworzenie transportera
     const transporter = nodemailer.createTransport({
       host: import.meta.env.SMTP_HOST,
       port: Number(import.meta.env.SMTP_PORT),
-      secure: true,
+      secure: true, // 465 = SSL
       auth: {
         user: import.meta.env.SMTP_USER,
         pass: import.meta.env.SMTP_PASS,
       },
       tls: {
-        rejectUnauthorized: false,
-      },
+        rejectUnauthorized: false, // wymagane przez Webio
+      }
     });
 
-    // Wysyłka
     await transporter.sendMail({
-      from: `"${mailCfg.mail.from_name}" <${import.meta.env.SMTP_USER}>`,
-      to: mailCfg.mail.to,
-      subject: `Od ${form.firstName} ${form.lastName}`,
+      from: `"${import.meta.env.SMTP_FROM_NAME}" <${import.meta.env.SMTP_USER}>`,
+      to: import.meta.env.SMTP_TO,
+      subject: `FUZ: wiadomość od ${form.firstName} ${form.lastName}`,
       text: `
 Imię: ${form.firstName}
 Nazwisko: ${form.lastName}
@@ -40,13 +31,13 @@ Temat: ${form.subject}
 
 Wiadomość:
 ${form.message}
-      `,
+      `.trim()
     });
 
     return new Response(JSON.stringify({ ok: true }), { status: 200 });
 
   } catch (error) {
     console.error("MAIL ERROR:", error);
-    return new Response(JSON.stringify({ ok: false, error }), { status: 500 });
+    return new Response(JSON.stringify({ ok: false }), { status: 500 });
   }
 };

src/styles/base.css

@@ -5,6 +5,8 @@
 @import "./buttons.css";
 @import "./sections.css";
 @import "./markdown.css";
+@import "./footer.css";
+@import "./cookie.css";
 
 .grecaptcha-badge {
   display: none !important;

src/styles/cookie.css

@@ -1,50 +1,48 @@
-#cookie-banner {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  transform: translateY(100%);
-  transition: transform 0.4s ease;
-  /* z-index: 9999; */
+@layer components {
+  #cookie-banner {
+    @apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out;
+    background: var(--fuz-bg-invert);
+    color: var(--fuz-text-invert);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
 
- background: var(--fuz-bg-invert);
-  color: var(--fuz-text-invert);
-  border-top: 1px solid rgba(0,0,0,0.1);
-}
+  .f-cookie-panel-inner {
+    @apply max-w-4xl mx-auto flex flex-col md:flex-row items-start 
+    md:items-center justify-between gap-4 px-6 py-6;
+  }
 
-.cookie-panel-inner {
-  padding: 1rem 1.5rem;
-}
+  .f-cookie-text{
+    @apply text-base leading-snug;
+  }
 
-.cookie-privacy-link {
-  color: var(--fuz-link);
-  text-decoration: underline;
-}
+  .f-cookie-privacy-link {
+    @apply ml-3;
+    color: var(--btn-outline-invert);
+  }
 
-.cookie-privacy-link:hover {
-  color: var(--fuz-link-hover);
-}
+  .f-cookie-accept,
+  .f-cookie-reject {
+    @apply px-4 py-2 rounded-md text-sm font-medium transition-colors;
+  }
 
-.cookie-accept,
-.cookie-reject {
-  @apply px-4 py-2 rounded-md text-sm font-medium;
-}
+   .f-cookie-accept {
+    background: var(--btn-bg-invert);
+    color: var(--btn-text-invert);
+  }
 
-.cookie-accept {
- background: var(--btn-bg-invert);
-  color: var(--btn-text-invert);
-}
+  .f-cookie-accept:hover {
+    background: var(--fuz-accent-hover);
+  }
 
-.cookie-accept:hover {
-  background: var(--fuz-accent-hover);
-}
+  .f-cookie-reject {
+    @apply border;
+    border-color: var(--btn-outline-invert);
+    color: var(--btn-outline-invert);
+    background: transparent;
+  }
 
-.cookie-reject {
- background: transparent;
-  border: 1px solid var(--btn-outline-invert);
-  color: var(--btn-outline-invert);
-}
+  .f-cookie-reject:hover {
+    background: var(--btn-outline-bg-invert);
+  }
 
-.cookie-reject:hover {
-   background: var(--btn-outline-bg-invert);
-}
+}

src/styles/footer.css

@@ -1,26 +1,31 @@
-.fuz-footer-title {
-    @apply text-xl font-semibold;
+@layer components {
+    .f-footer {
+        @apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--fuz-bg)] text-[var(--fuz-text)] pt-2;
+    }
+
+    .f-footer-inner {
+       @apply max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12;
+    }
+
+    .f-footer-col {
+        @apply max-w-sm pt-4;
+    }
+
+    .f-footer-col-title {
+        @apply text-xl font-semibold;
+
+    }
+
+    .f-footer-col-text {
+        @apply text-base;
+    }
+
+    .f-footer-copyright {
+        @apply text-center py-4 text-base text-[var(--fuz-text)];
+        /* text-center py-0 text-sm */
+    }
+
+     .f-footer-recaptcha {
+        @apply text-base;
+    }
 }
-
-.fuz-footer-text {
-    @apply text-base;
-}
-
-/* Linki */
-/* .fuz-footer-link {
-    color: var(--fuz-text);
-    text-decoration: none;
-    transition: opacity 0.2s ease;
-}
-
-.fuz-footer-link:hover {
-    opacity: 0.7;
-} */
-
-.footer-col {
-    @apply max-w-sm pt-4;
-}
-
-.footer-inner {
-    @apply w-full px-6 max-w-screen-2xl mx-auto flex flex-col gap-10 md:flex-row md:justify-between md:items-start;
-}

src/styles/theme.css

@@ -29,6 +29,7 @@
 
   --btn-ghost-text: var(--fuz-text);
   --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
+  --fuz-border: rgb(229, 231, 235);
 }
 
 :root.dark {
@@ -61,6 +62,8 @@
 
   --btn-ghost-text: var(--fuz-text);
   --btn-ghost-hover-bg: rgba(255,255,255,0.08);
+
+  --fuz-border: rgb(229, 231, 235);
 }
 
 /* Body */