/* ===== LINKI (mono / kolor / top) ===== */
.btn-mono,
.btn-kolor,
.btn-top {
display: inline-block;
cursor: pointer;
margin-right: 20px;
position: relative;
}
/* kreska */
.btn-mono::after,
.btn-kolor::after,
.btn-top::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0%;
height: 1px;
background: black;
transition: width 0.3s ease;
}
/* hover */
.btn-mono:hover::after,
.btn-kolor:hover::after,
.btn-top:hover::after {
width: 100%;
}
/* AKTYWNY STAN */
.btn-mono.active::after,
.btn-kolor.active::after,
.btn-top.active::after {
width: 100%;
}
/* opcjonalnie: lekko przygaszone nieaktywne */
.btn-mono,
.btn-kolor,
.btn-top {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.btn-mono.active,
.btn-kolor.active,
.btn-top.active {
opacity: 1;
}
/* ===== FADE SEKCJI ===== */
.sekcja {
transition: opacity 0.3s ease;
}
document.addEventListener("DOMContentLoaded", function() {
const monoBtn = document.querySelector(".btn-mono");
const kolorBtn = document.querySelector(".btn-kolor");
const topBtn = document.querySelector(".btn-top");
const mono = document.querySelector(".galeria-mono");
const kolor = document.querySelector(".galeria-kolor");
const about = document.querySelector(".sekcja-about");
if (!monoBtn || !kolorBtn || !topBtn || !mono || !kolor || !about) {
console.log("Brakuje klas — sprawdź nazwy");
return;
}
// helper: aktywny link
function setActive(activeBtn) {
monoBtn.classList.remove("active");
kolorBtn.classList.remove("active");
topBtn.classList.remove("active");
activeBtn.classList.add("active");
}
// helper: pokaż sekcję z fade
function showSection(show, hide1, hide2) {
show.style.display = "block";
hide1.style.display = "none";
hide2.style.display = "none";
}
// START
kolor.style.display = "none";
about.style.display = "none";
setActive(monoBtn);
// CLICK EVENTS
monoBtn.addEventListener("click", function(e) {
e.preventDefault();
showSection(mono, kolor, about);
setActive(monoBtn);
});
kolorBtn.addEventListener("click", function(e) {
e.preventDefault();
showSection(kolor, mono, about);
setActive(kolorBtn);
});
topBtn.addEventListener("click", function(e) {
e.preventDefault();
showSection(about, mono, kolor);
setActive(topBtn);
});
});
