.<div class="wrapper-calendar-ortodox">
<div class="calendar-sacru">
<h1 class="titlu-anual">Ortodox</h1>
<div class="grid-luni" id="main-calendar"></div>
</div>
</div>
<style>
.wrapper-calendar-ortodox {
font-family: 'Segoe UI', Roboto, sans-serif;
background: #000000;
padding: 15px 5px;
max-width: 1200px;
margin: 0 auto;
}
.titlu-anual {
text-align: center;
color: #D4AF37;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 25px;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.grid-luni {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.luna-box {
background: #0a0a0a;
border-radius: 12px;
padding: 15px 10px;
border: 1px solid #1a1a1a;
}
/* Numele lunii scris cu verde deschis */
.nume-luna {
text-align: center;
color: #98FB98; /* Verde deschis pastelat */
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px dashed #222222;
}
.zile-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
text-align: center;
align-items: center;
}
/* Zilele săptămânii scrise cu verde deschis */
.cap-zi {
color: #a2ffa2;
font-size: 0.85rem;
font-weight: 700;
padding-bottom: 8px;
}
.cap-zi:nth-child(7) {
color: #D4AF37; /* Duminica rămâne evidențiată cu auriu */
}
.sp-gol {
height: 32px;
}
/* Numerele zilelor scrise cu verde deschis */
.btn-zi-cautare {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
margin: 0 auto;
border-radius: 50%;
color: #a2ffa2; /* Verde deschis pentru numere */
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-zi-cautare:hover {
background: #D4AF37 !important;
color: #000000 !important;
font-weight: 700;
}
/* Ziua de azi luminează elegant în auriu */
.btn-zi-cautare.azi {
background: rgba(212, 175, 55, 0.2) !important;
color: #D4AF37 !important;
border: 1px solid #D4AF37;
font-weight: 700;
box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
</style>
<script>
const infoLuni = [
{ n: "Ianuarie", z: 31, s: 3 }, { n: "Februarie", z: 28, s: 6 },
{ n: "Martie", z: 31, s: 6 }, { n: "Aprilie", z: 30, s: 2 },
{ n: "Mai", z: 31, s: 4 }, { n: "Iunie", z: 30, s: 0 },
{ n: "Iulie", z: 31, s: 2 }, { n: "August", z: 31, s: 5 },
{ n: "Septembrie", z: 30, s: 1 }, { n: "Octombrie", z: 31, s: 3 },
{ n: "Noiembrie", z: 30, s: 6 }, { n: "Decembrie", z: 31, s: 1 }
];
const dataAzi = new Date();
const ziuaAzi = dataAzi.getDate();
const lunaAziNume = infoLuni[dataAzi.getMonth()].n;
const containerCalendar = document.getElementById('main-calendar');
let totCalendarul = "";
infoLuni.forEach(luna => {
let blocLuna = `
<div class="luna-box">
<div class="nume-luna">${luna.n}</div>
<div class="zile-grid">
<div class="cap-zi">L</div><div class="cap-zi">M</div><div class="cap-zi">M</div>
<div class="cap-zi">J</div><div class="cap-zi">V</div><div class="cap-zi">S</div><div class="cap-zi">D</div>`;
for(let i=0; i < luna.s; i++) {
blocLuna += `<div class="sp-gol"></div>`;
}
for(let d=1; d <= luna.z; d++) {
let etichetaZi = d + '-' + luna.n;
let linkCautare = '/search/label/' + encodeURIComponent(etichetaZi);
let clasaAzi = (d === ziuaAzi && luna.n === lunaAziNume) ? ' azi' : '';
blocLuna += `<a href="${linkCautare}" class="btn-zi-cautare${clasaAzi}">${d}</a>`;
}
blocLuna += `</div></div>`;
totCalendarul += blocLuna;
});
containerCalendar.innerHTML = totCalendarul;
</script>.
