Adventný kalendár - test

<div id="gf-advent-calendar-wrapper">
<style>
#gf-advent-calendar-wrapper {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 20px auto;
max-width: 900px;
}

#gf-advent-calendar-title {
text-align: center;
margin-bottom: 10px;
color: #0c3b35; /* tmavozelená */
font-weight: 700;
font-size: 1.8rem;
}

#gf-advent-calendar-subtitle {
text-align: center;
margin-bottom: 20px;
color: #444;
font-size: 0.95rem;
}

#gf-advent-calendar {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
background: #0f2723;
padding: 18px;
border-radius: 18px;
position: relative;
}

@media (max-width: 768px) {
#gf-advent-calendar {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

.gf-day {
position: relative;
background: linear-gradient(145deg, #145347, #0c3b35);
border-radius: 14px;
padding: 10px;
text-align: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}

.gf-day::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.08) 0, transparent 50%),
radial-gradient(circle at 80% 0, rgba(255, 215, 0, 0.18) 0, transparent 55%);
opacity: 0.9;
pointer-events: none;
}

.gf-day-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}

.gf-day-number {
font-size: 1.4rem;
font-weight: 800;
color: #f7f4ec;
letter-spacing: 0.04em;
}

.gf-day-label {
font-size: 0.75rem;
color: #f5e9c8;
text-transform: uppercase;
letter-spacing: 0.08em;
}

.gf-lock {
font-size: 1rem;
margin-top: 4px;
opacity: 0.9;
}

.gf-day.locked {
cursor: default;
opacity: 0.7;
transform: none !important;
}

.gf-day.locked .gf-day-label {
color: #d2cbb2;
}

.gf-day.unlocked:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

.gf-day.unlocked .gf-lock {
display: none;
}

.gf-day.unlocked::after {
content: "★";
position: absolute;
top: 6px;
right: 8px;
font-size: 0.9rem;
color: #ffd700;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
z-index: 1;
}

.gf-day.opened {
background: linear-gradient(145deg, #f5e9c8, #fff9e6);
transform: translateY(-1px) scale(1.01);
}

.gf-day.opened .gf-day-number {
color: #0f2723;
}

.gf-day.opened .gf-day-label {
color: #8a6a24;
}

/* Info bar pod kalendárom */
#gf-advent-info {
margin-top: 10px;
font-size: 0.85rem;
text-align: center;
color: #555;
}

/* Modal (popup) */
#gf-advent-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}

#gf-advent-modal.active {
display: flex;
}

.gf-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}

.gf-modal-content {
position: relative;
background: #fdfaf3;
border-radius: 18px;
padding: 24px 20px 20px;
max-width: 380px;
width: 90%;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(12, 59, 53, 0.18);
animation: gf-modal-in 0.25s ease-out;
}

@keyframes gf-modal-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.gf-modal-close {
position: absolute;
top: 8px;
right: 10px;
border: none;
background: transparent;
font-size: 1.4rem;
cursor: pointer;
color: #555;
}

.gf-modal-title {
font-size: 1.2rem;
margin-bottom: 8px;
color: #0c3b35;
font-weight: 700;
}

.gf-modal-text {
font-size: 0.95rem;
color: #444;
margin-bottom: 14px;
}

.gf-modal-link {
display: inline-block;
text-decoration: none;
padding: 9px 16px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
border: none;
background: linear-gradient(135deg, #0c3b35, #145347);
color: #f7f4ec;
cursor: pointer;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.gf-modal-link:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}
</style>

<h2 id="gf-advent-calendar-title">🎄 Adventný kalendár Greenfieldshop</h2>
<div id="gf-advent-calendar-subtitle">
Každý deň v decembri sa otvorí nové okienko s prekvapením pre jazdcov a koníky.
</div>

<div id="gf-advent-calendar">


<div class="gf-day locked" data-day="1"
data-title="1. december – Dečky pre vaše hviezdy"
data-text="Začnime v teple – špeciálna ponuka pracovných a výbehových diek pre vaše kone."
data-link="https://www.greenfieldshop.sk/deky/">
<div class="gf-day-inner">
<div class="gf-day-number">1</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="2"
data-title="2. december – Rajtky & legíny"
data-text="Pohodlie v sedle po celý deň – pozri zimné rajtky a jazdecké legíny."
data-link="https://www.greenfieldshop.sk/rajtky/">
<div class="gf-day-inner">
<div class="gf-day-number">2</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="3"
data-title="3. december – Prilby & bezpečnosť"
data-text="Bezpečnosť je najväčší darček – objav výber prilieb pre každého jazdca."
data-link="https://www.greenfieldshop.sk/jazdecke-prilby/">
<div class="gf-day-inner">
<div class="gf-day-number">3</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="4"
data-title="4. december – Greenfield Equine vitamíny"
data-text="Podporte kondíciu svojho koňa – vitamíny a doplnky Greenfield Equine."
data-link="https://www.greenfieldshop.sk/greenfield-equine/">
<div class="gf-day-inner">
<div class="gf-day-number">4</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="5"
data-title="5. december – Darčeky pre psa"
data-text="Aj štvornohí parťáci si zaslúžia niečo pod stromček – deky, obojky a maškrty."
data-link="https://www.greenfieldshop.sk/pre-psa/">
<div class="gf-day-inner">
<div class="gf-day-number">5</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="6"
data-title="6. december – Mikiny a bundy"
data-text="Zahrej sa v štýle – zimné mikiny a bundy pre jazdcov."
data-link="https://www.greenfieldshop.sk/jazdecke-oblecenie/">
<div class="gf-day-inner">
<div class="gf-day-number">6</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="7"
data-title="7. december – Podsedlové dečky"
data-text="Farby, strihy, značky – vyber podsedlovku, ktorá vám fakt sadne."
data-link="https://www.greenfieldshop.sk/podsedlove-decky/">
<div class="gf-day-inner">
<div class="gf-day-number">7</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="8"
data-title="8. december – Ohlávky & vodítka"
data-text="Štýlové kombinácie, ktoré vyniknú v stáji aj na fotkách."
data-link="https://www.greenfieldshop.sk/ohlavky-a-voditka/">
<div class="gf-day-inner">
<div class="gf-day-number">8</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="9"
data-title="9. december – Doplnky na jazdenie"
data-text="Rukavice, ponožky, čiapky – drobnosti, ktoré potešia každého jazdca."
data-link="https://www.greenfieldshop.sk/doplnky-pre-jazdcov/">
<div class="gf-day-inner">
<div class="gf-day-number">9</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="10"
data-title="10. december – Starostlivosť o koňa"
data-text="Kefy, čistiace prostriedky a kozmetika pre vašeho parťáka."
data-link="https://www.greenfieldshop.sk/starostlivost-o-kona/">
<div class="gf-day-inner">
<div class="gf-day-number">10</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="11"
data-title="11. december – Snacky & maškrty"
data-text="Malé odmeny po tréningu – chutné a kvalitné maškrty."
data-link="https://www.greenfieldshop.sk/pamlsky/">
<div class="gf-day-inner">
<div class="gf-day-number">11</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="12"
data-title="12. december – Chrániče & bandáže"
data-text="Bezpečné nohy = pokojná myseľ – chrániče na tréning aj preteky."
data-link="https://www.greenfieldshop.sk/chranice/">
<div class="gf-day-inner">
<div class="gf-day-number">12</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="13"
data-title="13. december – Zimné výbehové deky"
data-text="Nech je v suchu a teple aj v najväčšej zime."
data-link="https://www.greenfieldshop.sk/vybehovky/">
<div class="gf-day-inner">
<div class="gf-day-number">13</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="14"
data-title="14. december – Dresové & skokové vybavenie"
data-text="Pre súťažné páry, ktoré chcú vyzerať aj fungovať top."
data-link="https://www.greenfieldshop.sk/preteky/">
<div class="gf-day-inner">
<div class="gf-day-number">14</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="15"
data-title="15. december – Značky Kingsland, Tommy, Equestro"
data-text="Prémiové značky, ktoré nosíte najradšej – pozri aktuálne kúsky."
data-link="https://www.greenfieldshop.sk/znacky/">
<div class="gf-day-inner">
<div class="gf-day-number">15</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="16"
data-title="16. december – Doplnky Greenfield Equine"
data-text="Kĺby, svaly, nervy – pozri kompletnú ponuku doplnkov na mieru."
data-link="https://www.greenfieldshop.sk/greenfield-equine/">
<div class="gf-day-inner">
<div class="gf-day-number">16</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="17"
data-title="17. december – Výpredaj & posledné kusy"
data-text="Výhodné kúsky, ktoré čakajú na svoju šancu."
data-link="https://www.greenfieldshop.sk/vypredaj/">
<div class="gf-day-inner">
<div class="gf-day-number">17</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="18"
data-title="18. december – Doplnky pre stajňu"
data-text="Praktické drobnosti, ktoré uľahčia život v stajni."
data-link="https://www.greenfieldshop.sk/stajnove-vybavenie/">
<div class="gf-day-inner">
<div class="gf-day-number">18</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="19"
data-title="19. december – Vianočné balíčky"
data-text="Hotové balíčky pre jazdcov, kone aj psov – darček bez stresu."
data-link="https://www.greenfieldshop.sk/vianocne-balicky/">
<div class="gf-day-inner">
<div class="gf-day-number">19</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="20"
data-title="20. december – Darčekové poukážky"
data-text="Keď nevieš veľkosť alebo chceš nechať výber na obdarovanom."
data-link="https://www.greenfieldshop.sk/darcekove-poukazky/">
<div class="gf-day-inner">
<div class="gf-day-number">20</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="21"
data-title="21. december – Posledné Vianočné tipy"
data-text="Rýchle tipy na darčeky na poslednú chvíľu."
data-link="https://www.greenfieldshop.sk/vianoce/">
<div class="gf-day-inner">
<div class="gf-day-number">21</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="22"
data-title="22. december – Zimná starostlivosť"
data-text="Krmy, doplnky a starostlivosť, aby váš kôň zvládol zimu v pohode."
data-link="https://www.greenfieldshop.sk/krmiva-a-doplnky-vyzivy/">
<div class="gf-day-inner">
<div class="gf-day-number">22</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="23"
data-title="23. december – Outfit pre Štedrý deň v sedle"
data-text="Skombinuj svoj vysnívaný vianočný jazdecký outfit."
data-link="https://www.greenfieldshop.sk/jazdecke-oblecenie/">
<div class="gf-day-inner">
<div class="gf-day-number">23</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>

<div class="gf-day locked" data-day="24"
data-title="24. december – Rozprávkové Vianoce v sedle"
data-text="Ďakujeme, že ste s nami celý rok – užite si sviatky so svojimi koňmi a štvornohými kamošmi. 💚"
data-link="https://www.greenfieldshop.sk">
<div class="gf-day-inner">
<div class="gf-day-number">24</div>
<div class="gf-day-label">Otvor darček</div>
<div class="gf-lock">🔒</div>
</div>
</div>
</div>

<div id="gf-advent-modal">
<div class="gf-modal-backdrop"></div>
<div class="gf-modal-content">
<button class="gf-modal-close" aria-label="Zavrieť">×</button>
<div class="gf-modal-title" id="gf-modal-title"></div>
<div class="gf-modal-text" id="gf-modal-text"></div>
<a class="gf-modal-link" id="gf-modal-link" href="#" target="_blank" rel="noopener noreferrer">
Pozrieť ponuku
</a>
</div>
</div>

const days = document.querySelectorAll("#gf-advent-calendar .gf-day");
const infoBar = document.getElementById("gf-advent-info");

const modal = document.getElementById("gf-advent-modal");
const modalTitle = document.getElementById("gf-modal-title");
const modalText = document.getElementById("gf-modal-text");
const modalLink = document.getElementById("gf-modal-link");
const modalCloseButtons = modal.querySelectorAll(".gf-modal-close, .gf-modal-backdrop");

function updateInfoBar(message) {
if (infoBar) {
infoBar.textContent = message;
}
}

if (currentMonth === 12) {
// Advent beží – odomykáme okienka podľa dňa
days.forEach(function (dayEl) {
const dayNumber = parseInt(dayEl.getAttribute("data-day"), 10);
if (dayNumber <= currentDay && dayNumber <= 24) {
dayEl.classList.remove("locked");
dayEl.classList.add("unlocked");
}
});

if (currentDay <= 24) {
updateInfoBar("Každý deň v decembri sa automaticky otvorí nové okienko. Dnes môžeš otvoriť všetky dni od 1 po " + currentDay + ".");
} else {
updateInfoBar("Adventný kalendár je dostupný od 1. do 24. decembra. Ďakujeme, že ste s nami! 💚");
// voliteľne: po 24. decembri odomkneme všetko
days.forEach(function (dayEl) {
dayEl.classList.remove("locked");
dayEl.classList.add("unlocked");
});
}
} else {
// Mimo decembra – všetko zamknuté, info text
updateInfoBar("Adventný kalendár sa aktivuje v decembri. Sleduj Greenfieldshop a nenechaj si ujsť prekvapenia. 🎄");
}

// Kliky na dni
days.forEach(function (dayEl) {
dayEl.addEventListener("click", function () {
if (!dayEl.classList.contains("unlocked")) return;

const title = dayEl.getAttribute("data-title") || "Adventný darček";
const text = dayEl.getAttribute("data-text") || "Pre tento deň si môžeš pripraviť vlastné prekvapenie.";
const link = dayEl.getAttribute("data-link") || "https://www.greenfieldshop.sk";

modalTitle.textContent = title;
modalText.textContent = text;
modalLink.setAttribute("href", link);

dayEl.classList.add("opened");
modal.classList.add("active");
});
});

// Zatváranie modalu
modalCloseButtons.forEach(function (btn) {
btn.addEventListener("click", function () {
modal.classList.remove("active");
});
});

document.addEventListener("keydown", function (e) {
if (e.key === "Escape") {
modal.classList.remove("active");
}
});
})();
</script>
</div>

Adventný kalendár - test

INFORMÁCIE K NÁKUPU

IMPORTANT LINKS

Doprava a platby

Login to your account