| Current File : /home/users/barii/public_html/finansenl.com.pl/mmagnesy.fotomagnesy.pl/index.phpx |
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fotomagnesy – Komunia, Chrzest, Urodziny | Personalizowane Magnesy</title>
<meta name="description" content="Wyjątkowe fotomagnesy na komunię, chrzest i urodziny. Spersonalizowane magnesy ze zdjęciem dziecka to idealny prezent i piękna pamiątka.">
<link rel="stylesheet" href="https://use.typekit.net/pik8axj.css">
<style>
/* ========== RESET ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ========== BASE ========== */
body{font-family:"proxima-nova",sans-serif;background:#fff;color:#000;line-height:1.6}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
.page-inner{max-width:1200px;margin:auto;padding:20px}
/* ========== LOGO ========== */
.logo-container{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.logo-container img{height:40px}
/* ========== TOP ROW ========== */
.top-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.top-row h2{font-size:2rem;margin-bottom:10px}
.nav-and-arrows{display:flex;align-items:center;gap:12px}
nav.category-nav{display:flex;gap:8px;overflow-x:auto}
nav.category-nav::-webkit-scrollbar{height:6px}
nav.category-nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px}
nav.category-nav button{border:none;padding:8px 14px;border-radius:20px;background:#f1f1f1;white-space:nowrap;font-size:.9rem;transition:.25s}
nav.category-nav button.active,
nav.category-nav button:hover{background:#000;color:#fff}
.arrows{display:flex;gap:6px}
.arrows button{border:none;background:#000;color:#fff;width:38px;height:38px;border-radius:50%;font-size:1.2rem;display:grid;place-items:center}
.all-products{font-size:.9rem;margin-left:auto}
/* ========== SLIDER ========== */
.items{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-block:15px 30px}
.items::-webkit-scrollbar{height:8px}
.items::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px}
.card{flex:none;scroll-snap-align:start;background:#fff;border-radius:10px;overflow:hidden;transition:transform .3s,box-shadow .3s;min-width:260px}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.1)}
/* --- kwadratowy obraz --- */
.card-image{position:relative;width:100%;padding-top:100%;background:#f8f8f8}
.card-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;max-height:80%;object-fit:contain}
.card span{display:block;padding:10px 12px;text-align:left; font-size: 1.2rem;font-weight:500}
/* ========== CONTENT / SEO ========== */
.content{margin-top:80px;color:#1d1d1b;max-width:800px}
.content h1{font-size:2em;margin-top:1.6em}
.content h2{font-size:1.5em;margin-top:1.4em}
.content h3{font-size:1.2em;margin-top:1.2em}
.content p{margin-top:.8em}
.content ul{margin-top:.8em;padding-left:1.4em}
.content li{margin-bottom:.4em}
.welcome-title {
font-size: 2rem;
margin-top: 1.4em;
margin-bottom: 20px !important;
font-weight: 600;
display: flex
;
}
@media(max-width:980px) {
.welcome-title {
font-size: 1.2rem;
margin-top: 0.4em;
margin-bottom: 20px !important;
font-weight: 600;
line-height: 1.2;
display: flex;
}
.card span {
font-size: 0.95rem;
}
}
/* ========== RESPONSIVE ========== */
@media (min-width:900px){
.card{min-width:calc((100% - 72px) / 4); /* 4,3 karty na szerokim ekranie */ }
}
@media (max-width:600px){
.arrows button{width:34px;height:34px}
.card{min-width:70vw}
}
@media(min-width:980px) {
nav.category-nav button {
font-size: 1rem;
}
}
@media(max-width:980px) {
nav.category-nav {
display: flex;
gap: 8px;
overflow-x: auto;
width: 70vw;
padding-bottom: 10px;
overflow: scroll;
}
.arrows {
width: 20vw;
}
.nav-and-arrows {
display: flex;
align-items: flex-start;
gap: 8px;
}
}
.footer-info {
background: #f5f5f5;
color: #000000;
margin: 20px 0;
padding: 10px;
}
.cta-link{
margin-left:auto; /* trzyma się prawej strony paska */
padding:10px 18px;
background:#22ad5f; /* kontrast – dobierz do brandu */
color:#fff;
font-weight:600;
border-radius:28px;
transition:.25s;
}
.cta-link:hover{background:#22ad4f;transform:translateY(-2px)}
@media(max-width:980px) {
.cta-link {
font-size: .95rem;
line-height: 1.2;
}
}
</style>
</head>
<body>
<div class="page-inner">
<div class="logo-container">
<img src="logo.png" alt="Fotomagnes – Sklep z personalizowanymi magnesami na Komunię, Chrzest i Urodziny">
</div>
<span class="welcome-title">Wybierz produkt i uruchom kreator</span>
<!-- nawigacja + strzałki -->
<div class="top-row">
<div class="nav-and-arrows">
<nav class="category-nav"></nav>
<div class="arrows">
<button class="prev" aria-label="Poprzednie"><</button>
<button class="next" aria-label="Następne">></button>
</div>
</div>
</div>
<!-- slider -->
<section class="items" draggable="false"></section>
<div class="footer-info">
* Strona służy wyłącznie do przesyłania projektów w celu parowania zamówień z platformy <a href="https://allegro.pl/uzytkownik/manyak2">Allegro</a>.
</div>
<!-- seo -->
</div>
<script>
/********** DANE PRODUKTÓW **********/
const data = {
"Fotoprodukty":[
{img:"https://www.system.fotomagnesy.pl/img/glownezdjecia/22-roczek.jpg",title:"Roczek",href:"https://www.system.fotomagnesy.pl/roczek"},
{img:"https://www.system.fotomagnesy.pl/img/stopki1234.jpg",title:"Podziękowania – Stopki",href:"https://www.system.fotomagnesy.pl/stopka"},
{img:"https://www.system.fotomagnesy.pl/img/s2.png",title:"Kształt serca",href:"https://www.system.fotomagnesy.pl/serce"},
{img:"https://www.system.fotomagnesy.pl/img/glownezdjecia/03-prostokatny.png",title:"Klasyczne fotomagnesy",href:"https://www.system.fotomagnesy.pl/poziom"}
],
"Chrzest":[
{img:"https://a.allegroimg.com/original/1161a4/acb8cb694b5b8f8086009e157c5c/FOTO-MAGNES-Podziekowanie-dla-gosci-Chrzest-Roczek-10x7cm-Rodzaj-magnes",title:"Podziękowania",href:"https://www.system.fotomagnesy.pl/poziom?wzory=8"},
{img:"https://www.system.fotomagnesy.pl/img/stopki1234.jpg",title:"Stopki",href:"https://www.system.fotomagnesy.pl/stopki"},
{img:"https://www.system.fotomagnesy.pl/img/mini_spioszki.png",title:"Śpioszki",href:"https://www.system.fotomagnesy.pl/spioszki"},
{img:"https://www.system.fotomagnesy.pl/img/mis_mini2.png",title:"Miś",href:"https://www.system.fotomagnesy.pl/mis"},
{img:"https://www.system.fotomagnesy.pl/img/smoczek_mini.png",title:"Butelka",href:"https://www.system.fotomagnesy.pl/butelka"}
],
"Urodziny/Roczek":[
{img:"https://www.system.fotomagnesy.pl/img/glownezdjecia/22-roczek.jpg",title:"Roczek",href:"https://www.system.fotomagnesy.pl/roczek"},
{img:"https://www.system.fotomagnesy.pl/img/mis_mini2.png",title:"Miś",href:"https://www.system.fotomagnesy.pl/mis"},
{img:"https://a.allegroimg.com/s512/114e44/803ee4ce4823a5f3575b1def0cb0/PODZIEKOWANIA-foto-magnes-URODZINY-ROCZEK-7x10",title:"Uniwersalne",href:"#"}
],
"Świąteczne":[
{img:"https://www.fotomagnesy.pl/img/wyb1.png",title:"Kalendarz",href:"http://www.system.fotomagnesy.pl/kalendarz"},
{img:"https://www.fotomagnesy.pl/img/3.jpg",title:"Bombka",href:"https://www.system.fotomagnesy.pl/bombka?wzory=47&wzor=20181127224857"},
{img:"https://www.fotomagnesy.pl/img/wyb3.png",title:"Kartka świąteczna",href:"http://www.system.fotomagnesy.pl/kartkapion?wzory=47&wzor=20181114123209"}
],
"Inne":[
{img:"https://www.system.fotomagnesy.pl/img/3f5a43c643d2a5522084c296237a.jpg",title:"Podziękowania",href:"https://www.system.fotomagnesy.pl/poziom"},
{img:"https://www.system.fotomagnesy.pl/img/polaroid_mini.png",title:"Polaroid",href:"https://www.system.fotomagnesy.pl/Polaroid"}
],
"Komunijne":[
{img:"https://www.system.fotomagnesy.pl/img/s2.png",title:"Serce",href:"https://www.system.fotomagnesy.pl/serce?wzory=10"},
{img:"https://www.system.fotomagnesy.pl/img/kw5.jpg",title:"Prostokąt",href:"https://www.system.fotomagnesy.pl/poziom?wzory=10"},
{img:"https://www.system.fotomagnesy.pl/img/kw2.jpg",title:"Kwadrat",href:"https://www.system.fotomagnesy.pl/kwadrat?wzory=10"},
{img:"https://e.allegroimg.com/s512/01299b/eea91994475582434671bf2478de",title:"Koło",href:"https://www.system.fotomagnesy.pl/kolo?wzory=10"}
]
};
const navEl = document.querySelector('nav.category-nav');
const itemsEl = document.querySelector('section.items');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
/********** TWORZENIE NAWIGACJI **********/
function renderNav(){
Object.keys(data).forEach((cat,i)=>{
const btn=document.createElement('button');
btn.textContent=cat;
btn.addEventListener('click',()=>{
setCategory(cat);
document.querySelectorAll('nav.category-nav button')
.forEach(b=>b.classList.toggle('active',b===btn));
});
if(i===0) btn.classList.add('active');
navEl.appendChild(btn);
});
}
/********** ŁADOWANIE KATEGORII **********/
function setCategory(cat){
itemsEl.innerHTML='';
data[cat].forEach(item=>{
const link=document.createElement('a');
link.href=item.href;
link.className='card';
link.innerHTML=`
<div class="card-image">
<img src="${item.img}" alt="${item.title}">
</div>
<span>${item.title}</span>`;
itemsEl.appendChild(link);
});
}
/********** STRZAŁKI **********/
function scrollByPage(dir=1){
const offset=itemsEl.clientWidth*0.9;
itemsEl.scrollBy({left:dir*offset,behavior:'smooth'});
}
prevBtn.addEventListener('click',()=>scrollByPage(-1));
nextBtn.addEventListener('click',()=>scrollByPage(1));
/********** DRAG-TO-SCROLL z uwolnieniem linków **********/
let isDown = false, startX, scrollLeft;
itemsEl.addEventListener('pointerdown', e => {
// jeśli klikamy w samą kartę (<a>), pozwól na normalne kliknięcie
if (e.target.closest('a.card')) return;
isDown = true;
itemsEl.classList.add('dragging');
startX = e.pageX;
scrollLeft = itemsEl.scrollLeft;
itemsEl.setPointerCapture(e.pointerId);
});
itemsEl.addEventListener('pointermove', e => {
if (!isDown) return;
const dx = e.pageX - startX;
itemsEl.scrollLeft = scrollLeft - dx;
});
itemsEl.addEventListener('pointerup', e => {
isDown = false;
itemsEl.classList.remove('dragging');
itemsEl.releasePointerCapture(e.pointerId);
});
itemsEl.addEventListener('pointercancel', e => {
isDown = false;
itemsEl.classList.remove('dragging');
itemsEl.releasePointerCapture(e.pointerId);
});
itemsEl.addEventListener('pointerleave', e => {
if (!isDown) return;
isDown = false;
itemsEl.classList.remove('dragging');
itemsEl.releasePointerCapture(e.pointerId);
});
/********** INICJALIZACJA **********/
renderNav();
setCategory(Object.keys(data)[0]);
</script>
</body>
</html>