Туц
Основы: словарь, календарь, астрономия, языки
Сообщений 1 страница 3 из 3
Поделиться2Вчера 16:00:03
[html]
<div id="auden-calendar">
<style>
#auden-calendar {
--grey:#756F73;
--plum:#35152F;
--berry:#963F59;
--sand:#C8B9A5;
--paper:#F0E9E2;
--muted:#C5B9C0;
--dark:#171317;
background:var(--dark);
color:var(--paper);
border:1px solid var(--grey);
max-width:1050px;
margin:20px auto;
font:15px/1.7 Arial,Helvetica,sans-serif;
overflow:hidden;
}
#auden-calendar * {box-sizing:border-box}
#auden-calendar button,
#auden-calendar select {font:inherit}
#auden-calendar button {cursor:pointer}
#auden-calendar .cal-head {
padding:32px 20px 27px;
text-align:center;
background:
radial-gradient(ellipse at 50% 0%,#963F5950,transparent 70%),
linear-gradient(145deg,#35152F,#171317);
border-bottom:3px solid var(--berry);
}
#auden-calendar .cal-symbol {
color:var(--sand);
letter-spacing:10px;
font-size:22px;
}
#auden-calendar .cal-kicker {
color:#D9A5B3;
font-size:10px;
text-transform:uppercase;
letter-spacing:4px;
}
#auden-calendar h2.cal-title {
color:var(--sand);
font:500 clamp(29px,5vw,43px)/1.25 Georgia,serif;
letter-spacing:3px;
margin:12px 0;
}
#auden-calendar .cal-subtitle {
color:#D7C9CE;
font:italic 15px/1.8 Georgia,serif;
}
#auden-calendar .cal-content {padding:22px}
#auden-calendar .season-bar {
display:grid;
grid-template-columns:3fr 5fr 5fr;
gap:5px;
margin-bottom:22px;
}
#auden-calendar .season {
text-align:center;
padding:12px 5px;
border:1px solid #756F7380;
background:#211921;
color:var(--muted);
font-size:12px;
line-height:1.5;
}
#auden-calendar .season strong {
display:block;
font-size:13px;
font-weight:600;
margin-bottom:3px;
}
#auden-calendar .season.snow {border-top:4px solid var(--grey)}
#auden-calendar .season.mid {border-top:4px solid #668E4B}
#auden-calendar .season.warm {border-top:4px solid #D98240}
#auden-calendar .season.active {
background:#35152F;
color:var(--paper);
border-bottom-color:var(--sand);
}
#auden-calendar .season.active.snow {border-top-color:var(--grey)}
#auden-calendar .season.active.mid {border-top-color:#86AC69}
#auden-calendar .season.active.warm {border-top-color:#F1A35D}
#auden-calendar .cal-picker {
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:22px;
}
#auden-calendar .month-btn {
flex:1 1 100px;
min-width:0;
padding:10px 7px;
color:var(--paper);
background:#211921;
border:1px solid #756F7380;
font-size:12px;
transition:.2s;
}
#auden-calendar .month-btn:hover {border-color:var(--sand)}
#auden-calendar .month-btn.active {
background:var(--berry);
border-color:var(--sand);
color:white;
}
#auden-calendar .month-btn small {
display:block;
color:#D7C9CE;
font-size:10px;
margin-top:2px;
}
#auden-calendar .month-heading {
padding:18px;
background:#211921;
border:1px solid #756F7380;
border-bottom:3px solid var(--berry);
margin-bottom:16px;
}
#auden-calendar .month-label {
color:#D9A5B3;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
}
#auden-calendar h3.month-name {
color:var(--sand);
font:500 clamp(24px,4vw,32px)/1.4 Georgia,serif;
margin:4px 0;
}
#auden-calendar .month-meta {
color:var(--muted);
font-size:12px;
}
#auden-calendar .month-description {
color:#D7C9CE;
margin-top:9px;
font:italic 14px/1.7 Georgia,serif;
}
#auden-calendar .calendar-grid {
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
border-top:1px solid var(--grey);
border-left:1px solid var(--grey);
}
#auden-calendar .weekday {
min-width:0;
text-align:center;
padding:8px 1px;
color:var(--sand);
background:#35152F;
border-right:1px solid var(--grey);
border-bottom:1px solid var(--grey);
font-size:11px;
font-weight:600;
}
#auden-calendar .day {
position:relative;
min-width:0;
min-height:57px;
padding:7px 2px;
text-align:center;
color:var(--paper);
background:#1D191E;
border:0;
border-right:1px solid #756F7380;
border-bottom:1px solid #756F7380;
border-radius:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
}
#auden-calendar .day:hover {
background:#49303F;
box-shadow:inset 0 0 0 1px var(--sand);
}
#auden-calendar .day .num {
font-size:15px;
line-height:1.4;
}
#auden-calendar .day .mark {
font-size:9px;
line-height:1.2;
color:var(--sand);
}
#auden-calendar .day.weekend {
color:#FFB4BD;
background:#38202B;
}
#auden-calendar .day.weekend .num {font-weight:600}
#auden-calendar .day.sacred {
background:#49303F;
box-shadow:inset 0 0 0 2px var(--sand);
}
#auden-calendar .day.sacred .num {
color:#FFE4B2;
font-weight:700;
}
#auden-calendar .day.extra {
color:#FFB4BD;
background:#572A38;
box-shadow:inset 0 0 0 1px var(--berry);
}
#auden-calendar .day.empty {
background:#151217;
pointer-events:none;
}
#auden-calendar .legend {
display:flex;
flex-wrap:wrap;
gap:10px 18px;
margin:16px 0 20px;
color:var(--muted);
font-size:12px;
}
#auden-calendar .legend-item {
display:flex;
align-items:center;
gap:7px;
}
#auden-calendar .legend-swatch {
width:13px;
height:13px;
border:1px solid var(--grey);
flex-shrink:0;
}
#auden-calendar .legend-swatch.sacred {background:#49303F;border:2px solid var(--sand)}
#auden-calendar .legend-swatch.weekend {background:#38202B}
#auden-calendar .legend-swatch.extra {background:#572A38}
#auden-calendar .selected-day {
border:1px solid var(--grey);
background:#211921;
padding:17px;
margin-top:18px;
min-height:94px;
}
#auden-calendar .selected-day .selected-label {
color:#D9A5B3;
text-transform:uppercase;
font-size:10px;
letter-spacing:2px;
}
#auden-calendar .selected-day h4 {
margin:5px 0;
color:var(--sand);
font:500 19px/1.4 Georgia,serif;
}
#auden-calendar .selected-day p {
color:var(--paper);
margin:0;
font-size:13px;
line-height:1.7;
}
#auden-calendar .cal-bottom {
margin-top:22px;
border-top:1px solid var(--grey);
padding-top:20px;
}
#auden-calendar h3.info-title {
color:var(--sand);
font:500 22px/1.4 Georgia,serif;
margin:0 0 12px;
}
#auden-calendar .info-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
#auden-calendar .info-card {
padding:15px;
background:#211921;
border:1px solid #756F7380;
}
#auden-calendar .info-card strong {
display:block;
color:var(--sand);
font-size:14px;
margin-bottom:5px;
}
#auden-calendar .info-card p {
color:var(--muted);
font-size:13px;
line-height:1.8;
margin:0;
}
#auden-calendar .cal-note {
padding:16px;
margin-top:16px;
background:#35152F70;
border-left:3px solid var(--berry);
color:#E5D9DE;
font-size:13px;
line-height:1.9;
}
#auden-calendar .cal-footer {
padding:18px 12px;
text-align:center;
background:#211921;
border-top:1px solid var(--grey);
color:var(--sand);
font-size:10px;
letter-spacing:3px;
}
@media(max-width:600px) {
#auden-calendar .cal-content {padding:12px}
#auden-calendar .cal-head {padding:27px 13px}
#auden-calendar .season {font-size:10px;padding:9px 2px}
#auden-calendar .season strong {font-size:11px}
#auden-calendar .month-btn {flex:1 1 28%;font-size:11px}
#auden-calendar .day {min-height:46px}
#auden-calendar .day .num {font-size:13px}
#auden-calendar .weekday {font-size:9px}
#auden-calendar .day .mark {font-size:8px}
#auden-calendar .info-grid {grid-template-columns:1fr}
#auden-calendar .legend {gap:9px 12px}
}
</style>
<header class="cal-head">
<div class="cal-symbol">✧ ☽ ✧</div>
<div class="cal-kicker">Летосчисление Ауденвилля</div>
<h2 class="cal-title">Календарь Витков</h2>
<div class="cal-subtitle">
Три сезона. Тринадцать Витков. Память о древних богах.
</div>
</header>
<div class="cal-content">
<div class="season-bar">
<div class="season snow active" data-season="snow">
<strong>❄ Сезон Снегов</strong>
3 Витка
</div>
<div class="season mid" data-season="mid">
<strong>✧ Межсезонье</strong>
5 Витков
</div>
<div class="season warm" data-season="warm">
<strong>☼ Сезон Тепла и Урожая</strong>
5 Витков
</div>
</div>
<nav class="cal-picker" aria-label="Выбор Витка">
<button class="month-btn active" data-month="0">Лидар<small>69 дней</small></button>
<button class="month-btn" data-month="1">Тиранель<small>23 дня</small></button>
<button class="month-btn" data-month="2">Дарали<small>23 дня</small></button>
<button class="month-btn" data-month="3">Рохнас<small>23 дня</small></button>
<button class="month-btn" data-month="4">Моласель<small>23 дня</small></button>
<button class="month-btn" data-month="5">Тиврон<small>23 дня</small></button>
<button class="month-btn" data-month="6">Эльхне<small>23 дня</small></button>
<button class="month-btn" data-month="7">Ламилан<small>23 дня</small></button>
<button class="month-btn" data-month="8">Риштан<small>23 дня</small></button>
<button class="month-btn" data-month="9">Кассанэль<small>23 дня</small></button>
<button class="month-btn" data-month="10">Салис<small>23 дня</small></button>
<button class="month-btn" data-month="11">Дардо<small>23 дня</small></button>
<button class="month-btn" data-month="12">Хадиэль<small>46 дней</small></button>
</nav>
<section class="month-heading">
<div class="month-label" id="ac-season-label">Сезон Снегов</div>
<h3 class="month-name" id="ac-month-name">Виток Лидара</h3>
<div class="month-meta" id="ac-month-meta">69 дней · 14 выходных</div>
<div class="month-description" id="ac-month-desc">
Начало календарного круга. Первый день посвящён древнему богу, чьё имя хранит этот Виток.
</div>
</section>
<div class="calendar-grid" id="ac-calendar-grid" aria-label="Дни Витка"></div>
<div class="legend">
<div class="legend-item">
<span class="legend-swatch sacred"></span>
Первый день Витка: почитание древнего бога
</div>
<div class="legend-item">
<span class="legend-swatch weekend"></span>
Каждый пятый день: выходной
</div>
<div class="legend-item">
<span class="legend-swatch extra"></span>
Дополнительные выходные Хадиэля
</div>
</div>
<div class="selected-day" id="ac-selected-day" aria-live="polite">
<div class="selected-label">Выбранный день</div>
<h4>1-й день Витка Лидара</h4>
<p>День почитания древнего бога, давшего имя Витку.</p>
</div>
<div class="cal-bottom">
<h3 class="info-title">О календаре Ауденвилля</h3>
<div class="info-grid">
<div class="info-card">
<strong>❄ Сезон Снегов</strong>
<p>Лидар — 69 дней. Тиранель — 23 дня. Дарали — 23 дня.</p>
</div>
<div class="info-card">
<strong>✧ Межсезонье</strong>
<p>Рохнас, Моласель, Тиврон, Эльхне и Ламилан. Каждый Виток длится 23 дня.</p>
</div>
<div class="info-card">
<strong>☼ Сезон Тепла и Урожая</strong>
<p>Риштан, Кассанэль, Салис и Дардо длятся 23 дня. Хадиэль завершается на 46-й день.</p>
</div>
<div class="info-card">
<strong>Праздники и выходные</strong>
<p>Первый день каждого Витка посвящён древнему богу. Каждый пятый день является выходным.</p>
</div>
</div>
<div class="cal-note">
Названия Витков пережили смену верований. Когда-то каждый из них был посвящён определённому древнему богу, чьё имя произносили в первый день. Религии исчезали, менялись и уступали место новым, но имена Витков сохранились. Поэтому даже те, кто больше не поклоняется старым богам, продолжают жить по календарю, оставленному далёкими предками.
</div>
</div>
</div>
<footer class="cal-footer">
AUDENVILLE · THE THIRTEEN TURNS
</footer>
<script>
(function () {
var root = document.getElementById("auden-calendar");
if (!root) return;
var months = [
{name:"Лидар",days:69,season:"snow",label:"Сезон Снегов",desc:"Начало календарного круга. Первый день посвящён древнему богу, чьё имя хранит этот Виток."},
{name:"Тиранель",days:23,season:"snow",label:"Сезон Снегов",desc:"Виток Тиранеля. Его первый день сохраняет древний обычай почитания божества-покровителя."},
{name:"Дарали",days:23,season:"snow",label:"Сезон Снегов",desc:"Завершающий Виток Сезона Снегов."},
{name:"Рохнас",days:23,season:"mid",label:"Межсезонье",desc:"Первый Виток Межсезонья, сохраняющий имя древнего божества."},
{name:"Моласель",days:23,season:"mid",label:"Межсезонье",desc:"Виток Моласеля. Первый день посвящён древнему богу."},
{name:"Тиврон",days:23,season:"mid",label:"Межсезонье",desc:"Срединный Виток Межсезонья."},
{name:"Эльхне",days:23,season:"mid",label:"Межсезонье",desc:"Виток, чьё имя сохранилось сквозь смену религий."},
{name:"Ламилан",days:23,season:"mid",label:"Межсезонье",desc:"Завершает Межсезонье. Первый день посвящён древнему богу Ламилана."},
{name:"Риштан",days:23,season:"warm",label:"Сезон Тепла и Урожая",desc:"Первый Виток сезона тепла и урожая."},
{name:"Кассанэль",days:23,season:"warm",label:"Сезон Тепла и Урожая",desc:"Виток Кассанэля. Его название напоминает о древних верованиях."},
{name:"Салис",days:23,season:"warm",label:"Сезон Тепла и Урожая",desc:"Виток Салиса, следующий за Кассанэлем."},
{name:"Дардо",days:23,season:"warm",label:"Сезон Тепла и Урожая",desc:"Предпоследний короткий Виток года."},
{name:"Хадиэль",days:46,season:"warm",label:"Сезон Тепла и Урожая",desc:"Последний Виток календарного круга. Его 45-й и 46-й дни являются дополнительными выходными."}
];
var grid = root.querySelector("#ac-calendar-grid");
var picker = root.querySelectorAll(".month-btn");
var seasonBoxes = root.querySelectorAll(".season");
var seasonLabel = root.querySelector("#ac-season-label");
var monthName = root.querySelector("#ac-month-name");
var monthMeta = root.querySelector("#ac-month-meta");
var monthDesc = root.querySelector("#ac-month-desc");
var selected = root.querySelector("#ac-selected-day");
var current = 0;
var weekdays = ["День","День","День","День","Выходной","День","День"];
function dayInfo(monthIndex, day) {
var month = months[monthIndex];
var extra = month.name === "Хадиэль" && (day === 45 || day === 46);
var weekend = day % 5 === 0 || extra;
var sacred = day === 1;
var tags = [];
if (sacred) tags.push("День почитания древнего бога");
if (weekend) tags.push("Выходной день");
if (extra) tags.push("Дополнительный выходной");
return {
weekend:weekend,
sacred:sacred,
extra:extra,
title:tags.join(" · ") || "Обычный день Витка"
};
}
function selectDay(day) {
var month = months[current];
var info = dayInfo(current,day);
var title = day + "-й день Витка " + month.name;
var description = "";
if (info.sacred) {
description = "Первый день Витка посвящён почитанию древнего бога, в честь которого назван месяц.";
} else {
description = info.weekend ? "Сегодня выходной день." : "Обычный день Витка.";
}
if (info.extra) {
description = "Дополнительный выходной день в завершении Витка Хадиэля.";
}
selected.innerHTML =
'<div class="selected-label">Выбранный день</div>' +
'<h4>' + title + '</h4>' +
'<p>' + description + '</p>';
}
function renderMonth(index) {
current = index;
var month = months[index];
var weekends = 0;
for (var d = 1; d <= month.days; d++) {
if (dayInfo(index,d).weekend) weekends++;
}
picker.forEach(function (btn,i) {
btn.classList.toggle("active",i === index);
btn.setAttribute("aria-pressed",i === index ? "true" : "false");
});
seasonBoxes.forEach(function (box) {
box.classList.toggle("active",box.getAttribute("data-season") === month.season);
});
seasonLabel.textContent = month.label;
monthName.textContent = "Виток " + month.name;
monthMeta.textContent = month.days + " дней · " + weekends + " выходных";
monthDesc.textContent = month.desc;
grid.innerHTML = "";
weekdays.forEach(function (label,i) {
var cell = document.createElement("div");
cell.className = "weekday";
cell.textContent = i === 4 ? "Вых." : "День";
cell.title = i === 4 ? "Колонка для визуального разделения дней" : "День Витка";
grid.appendChild(cell);
});
for (var day = 1; day <= month.days; day++) {
var info = dayInfo(index,day);
var button = document.createElement("button");
button.type = "button";
button.className = "day";
if (info.weekend) button.classList.add("weekend");
if (info.sacred) button.classList.add("sacred");
if (info.extra) button.classList.add("extra");
var mark = "";
if (info.sacred) mark = "✧";
else if (info.extra) mark = "Выходной";
else if (info.weekend) mark = "Отдых";
button.innerHTML =
'<span class="num">' + day + '</span>' +
(mark ? '<span class="mark">' + mark + '</span>' : '');
button.title = "Виток " + month.name + ", день " + day + ": " + info.title;
button.setAttribute("aria-label",button.title);
button.addEventListener("click",function(d) {
return function() { selectDay(d); };
}(day));
grid.appendChild(button);
}
selectDay(1);
}
picker.forEach(function (btn) {
btn.addEventListener("click",function () {
renderMonth(Number(btn.getAttribute("data-month")));
});
});
renderMonth(0);
})();
</script>
</div>
[/html]
Поделиться3Вчера 16:30:04
[html]
<div id="auden-calendar">
<style>
#auden-calendar{
--grey:#756F73;--plum:#35152F;--berry:#963F59;
--sand:#C8B9A5;--paper:#F0E9E2;--muted:#C5B9C0;
--dark:#171317;
background:var(--dark);color:var(--paper);
border:1px solid var(--grey);max-width:1050px;
margin:20px auto;font:15px/1.8 Arial,Helvetica,sans-serif;
overflow:hidden
}
#auden-calendar *{box-sizing:border-box}
#auden-calendar button{font:inherit;cursor:pointer}
#auden-calendar .cal-head{
padding:32px 20px 27px;text-align:center;
background:radial-gradient(ellipse at 50% 0%,#963F5950,transparent 70%),linear-gradient(145deg,#35152F,#171317);
border-bottom:3px solid var(--berry)
}
#auden-calendar .sigil{color:var(--sand);letter-spacing:10px;font-size:22px}
#auden-calendar .eyebrow{color:#D9A5B3;font-size:10px;text-transform:uppercase;letter-spacing:4px}
#auden-calendar h2.cal-title{color:var(--sand);font:500 clamp(29px,5vw,43px)/1.25 Georgia,serif;letter-spacing:3px;margin:12px 0}
#auden-calendar .subtitle{color:#D7C9CE;font:italic 15px/1.8 Georgia,serif}
#auden-calendar .content{padding:22px}
#auden-calendar .season-bar{display:grid;grid-template-columns:3fr 5fr 5fr;gap:5px;margin-bottom:22px}
#auden-calendar .season{
text-align:center;padding:12px 5px;border:1px solid #756F7380;
background:#211921;color:var(--muted);font-size:12px
}
#auden-calendar .season strong{display:block;font-size:13px;margin-bottom:3px}
#auden-calendar .season.snow{border-top:4px solid var(--grey)}
#auden-calendar .season.mid{border-top:4px solid #668E4B}
#auden-calendar .season.warm{border-top:4px solid #D98240}
#auden-calendar .season.active{background:#35152F;color:var(--paper);border-bottom-color:var(--sand)}
#auden-calendar .season.active.mid{border-top-color:#86AC69}
#auden-calendar .season.active.warm{border-top-color:#F1A35D}
#auden-calendar .picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
#auden-calendar .month-btn{
flex:1 1 100px;min-width:0;padding:10px 7px;color:var(--paper);
background:#211921;border:1px solid #756F7380;font-size:12px
}
#auden-calendar .month-btn:hover{border-color:var(--sand)}
#auden-calendar .month-btn.active{background:var(--berry);border-color:var(--sand);color:white}
#auden-calendar .month-btn small{display:block;color:#D7C9CE;font-size:10px;margin-top:2px}
#auden-calendar .month-heading{padding:18px;background:#211921;border:1px solid #756F7380;border-bottom:3px solid var(--berry);margin-bottom:16px}
#auden-calendar .month-label{color:#D9A5B3;font-size:10px;letter-spacing:3px;text-transform:uppercase}
#auden-calendar h3.month-name{color:var(--sand);font:500 clamp(24px,4vw,32px)/1.4 Georgia,serif;margin:4px 0}
#auden-calendar .month-meta{color:var(--muted);font-size:12px}
#auden-calendar .month-desc{color:#D7C9CE;margin-top:9px;font:italic 14px/1.7 Georgia,serif}
#auden-calendar .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--grey);border-left:1px solid var(--grey)}
#auden-calendar .weekday{min-width:0;text-align:center;padding:8px 1px;color:var(--sand);background:#35152F;border-right:1px solid var(--grey);border-bottom:1px solid var(--grey);font-size:11px;font-weight:600}
#auden-calendar .day{
position:relative;min-width:0;min-height:62px;padding:5px 1px;
text-align:center;color:var(--paper);background:#1D191E;
border:0;border-radius:0;border-right:1px solid #756F7380;
border-bottom:1px solid #756F7380;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:2px
}
#auden-calendar .day:hover{background:#49303F;box-shadow:inset 0 0 0 1px var(--sand)}
#auden-calendar .day .num{font-size:15px;line-height:1.3}
#auden-calendar .day .mark{font-size:9px;line-height:1.2;color:var(--sand);max-width:100%;overflow:hidden}
#auden-calendar .day.weekend{color:#FFB4BD;background:#38202B}
#auden-calendar .day.weekend .num{font-weight:600}
#auden-calendar .day.sacred{background:#49303F;box-shadow:inset 0 0 0 2px var(--sand)}
#auden-calendar .day.sacred .num{color:#FFE4B2;font-weight:700}
#auden-calendar .day.extra{color:#FFB4BD;background:#572A38;box-shadow:inset 0 0 0 1px var(--berry)}
#auden-calendar .day.holiday{background:#3B2637}
#auden-calendar .day.holiday .mark{color:#F1B7C5}
#auden-calendar .day.extra.holiday{background:#623146}
#auden-calendar .legend{display:flex;flex-wrap:wrap;gap:9px 17px;margin:15px 0 20px;color:var(--muted);font-size:12px}
#auden-calendar .legend-item{display:flex;align-items:center;gap:7px}
#auden-calendar .swatch{width:13px;height:13px;border:1px solid var(--grey);flex-shrink:0}
#auden-calendar .swatch.sacred{background:#49303F;border:2px solid var(--sand)}
#auden-calendar .swatch.weekend{background:#38202B}
#auden-calendar .swatch.holiday{background:#3B2637;border-color:#D9A5B3}
#auden-calendar .swatch.extra{background:#572A38}
#auden-calendar .selected{
border:1px solid var(--grey);background:#211921;padding:18px;margin-top:18px;min-height:110px
}
#auden-calendar .selected-label{color:#D9A5B3;text-transform:uppercase;font-size:10px;letter-spacing:2px}
#auden-calendar h4.selected-title{margin:5px 0;color:var(--sand);font:500 20px/1.4 Georgia,serif}
#auden-calendar .selected p{color:var(--paper);margin:5px 0 0;font-size:14px;line-height:1.85}
#auden-calendar .badge{
display:inline-block;margin:8px 5px 0 0;padding:3px 8px;
font-size:10px;border:1px solid var(--berry);color:#F1B7C5
}
#auden-calendar .bottom{margin-top:25px;border-top:1px solid var(--grey);padding-top:20px}
#auden-calendar h3.info-title{color:var(--sand);font:500 22px/1.4 Georgia,serif;margin:0 0 12px}
#auden-calendar .info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#auden-calendar .info-card{padding:15px;background:#211921;border:1px solid #756F7380}
#auden-calendar .info-card strong{display:block;color:var(--sand);font-size:14px;margin-bottom:5px}
#auden-calendar .info-card p{color:var(--muted);font-size:13px;line-height:1.8;margin:0}
#auden-calendar .note{padding:17px;margin-top:17px;background:#35152F70;border-left:3px solid var(--berry);color:#E5D9DE;font-size:13px;line-height:1.9}
#auden-calendar .holiday-list{margin-top:24px}
#auden-calendar details{border:1px solid #756F7380;margin:7px 0;background:#211921}
#auden-calendar details summary{cursor:pointer;padding:12px 15px;color:var(--sand);font-size:14px}
#auden-calendar details summary:hover{background:#35152F}
#auden-calendar .detail-body{padding:0 15px 15px;color:#E5D9DE;font-size:13px;line-height:1.9}
#auden-calendar .detail-body p{margin:7px 0}
#auden-calendar .cal-footer{padding:18px 12px;text-align:center;background:#211921;border-top:1px solid var(--grey);color:var(--sand);font-size:10px;letter-spacing:3px}
@media(max-width:600px){
#auden-calendar .content{padding:12px}
#auden-calendar .cal-head{padding:27px 13px}
#auden-calendar .season{font-size:10px;padding:9px 2px}
#auden-calendar .season strong{font-size:10px}
#auden-calendar .month-btn{flex:1 1 28%;font-size:11px}
#auden-calendar .day{min-height:48px}
#auden-calendar .day .num{font-size:13px}
#auden-calendar .weekday{font-size:9px}
#auden-calendar .day .mark{font-size:8px}
#auden-calendar .info-grid{grid-template-columns:1fr}
}
</style>
<header class="cal-head">
<div class="sigil">✧ ☽ ✧</div>
<div class="eyebrow">Летосчисление Ауденвилля</div>
<h2 class="cal-title">Календарь Витков</h2>
<div class="subtitle">Три сезона. Тринадцать Витков. Память о древних богах.</div>
</header>
<div class="content">
<div class="season-bar">
<div class="season snow active" data-season="snow"><strong>❄ Сезон Снегов</strong>3 Витка</div>
<div class="season mid" data-season="mid"><strong>✧ Межсезонье</strong>5 Витков</div>
<div class="season warm" data-season="warm"><strong>☼ Сезон Тепла и Урожая</strong>5 Витков</div>
</div>
<nav class="picker" aria-label="Выбор Витка">
<button class="month-btn active" data-month="0">Лидар<small>69 дней</small></button>
<button class="month-btn" data-month="1">Тиранель<small>23 дня</small></button>
<button class="month-btn" data-month="2">Дарали<small>23 дня</small></button>
<button class="month-btn" data-month="3">Рохнас<small>23 дня</small></button>
<button class="month-btn" data-month="4">Моласель<small>23 дня</small></button>
<button class="month-btn" data-month="5">Тиврон<small>23 дня</small></button>
<button class="month-btn" data-month="6">Эльхне<small>23 дня</small></button>
<button class="month-btn" data-month="7">Ламилан<small>23 дня</small></button>
<button class="month-btn" data-month="8">Риштан<small>23 дня</small></button>
<button class="month-btn" data-month="9">Кассанэль<small>23 дня</small></button>
<button class="month-btn" data-month="10">Салис<small>23 дня</small></button>
<button class="month-btn" data-month="11">Дардо<small>23 дня</small></button>
<button class="month-btn" data-month="12">Хадиэль<small>46 дней</small></button>
</nav>
<section class="month-heading">
<div class="month-label" id="ac-season-label">Сезон Снегов</div>
<h3 class="month-name" id="ac-month-name">Виток Лидара</h3>
<div class="month-meta" id="ac-month-meta"></div>
<div class="month-desc" id="ac-month-desc"></div>
</section>
<div class="grid" id="ac-calendar-grid" aria-label="Дни Витка"></div>
<div class="legend">
<div class="legend-item"><span class="swatch sacred"></span>Первый день Витка</div>
<div class="legend-item"><span class="swatch holiday"></span>Праздничные дни</div>
<div class="legend-item"><span class="swatch weekend"></span>Каждый пятый день — выходной</div>
<div class="legend-item"><span class="swatch extra"></span>Дополнительные выходные</div>
</div>
<div class="selected" id="ac-selected-day" aria-live="polite"></div>
<div class="bottom">
<h3 class="info-title">Три сезона Ауденвилля</h3>
<div class="info-grid">
<div class="info-card"><strong>❄ Сезон Снегов</strong><p>Лидар — 69 дней, Тиранель и Дарали — по 23 дня. Начало календарного Круга и время зимних традиций.</p></div>
<div class="info-card"><strong>✧ Межсезонье</strong><p>Рохнас, Моласель, Тиврон, Эльхне и Ламилан. Морской промысел, брачные обряды, игры и торговые ярмарки.</p></div>
<div class="info-card"><strong>☼ Сезон Тепла и Урожая</strong><p>Риштан, Кассанэль, Салис, Дардо и Хадиэль. Время воинских торжеств, купаний, сбора урожая и подготовки к новому Кругу.</p></div>
<div class="info-card"><strong>Праздничный обычай</strong><p>Первый день каждого Витка посвящён древнему богу, чьё имя он носит. В разных землях обряды могут различаться.</p></div>
</div>
<div class="note">
Названия Витков пережили смену верований. Когда-то каждый из них был посвящён определённому древнему богу, чьё имя произносили в первый день. Религии исчезали, менялись и уступали место новым, но имена Витков сохранились. Поэтому даже те, кто больше не поклоняется старым богам, продолжают жить по календарю, оставленному далёкими предками.
</div>
<div class="holiday-list">
<h3 class="info-title">Круг праздников</h3>
<div id="ac-holiday-list"></div>
</div>
</div>
</div>
<footer class="cal-footer">AUDENVILLE · THE THIRTEEN TURNS</footer>
<script>
(function(){
var root=document.getElementById("auden-calendar");
if(!root)return;
var months=[
{name:"Лидар",days:69,season:"snow",label:"Сезон Снегов",
desc:"Начало нового Круга. На большей части мира наступают снега, а жители Техбургера отмечают начало нового года.",
holidays:{
1:{name:"Праздник Нового Круга",text:"Первый день нового Круга посвящён Лидару, эльфийскому Создателю, который, согласно древним преданиям, пришёл на бесплотную пустыню и вдохнул в неё жизнь. В этот день вспоминают сотворение мира, возжигают огни и просят благословения на грядущий Круг."},
2:{name:"Праздник Тепла и Уюта",text:"День домашнего очага, близких и гостеприимства. Семьи собираются за общим столом, делятся запасами, зажигают светильники и дарят друг другу небольшие подарки. В Техбургере этот день входит в празднование Нового Круга."},
3:{name:"День Перерождения",text:"Завершающий день праздника Нового Круга. Он посвящён обновлению, новым начинаниям и надежде. Принято отпускать старые обиды, давать обещания на будущий год и встречать наступающие снега вместе с близкими."}
}},
{name:"Тиранель",days:23,season:"snow",label:"Сезон Снегов",
desc:"Виток мудрости и знаний. Время благодарить тех, кто сохраняет знания и помогает пережить суровую пору.",
holidays:{
1:{name:"День Тиранеля",text:"Тиранель, бог мудрости и знания, считается ближайшим к Лидару среди первородных. Согласно вере, он способен слышать глас Создателя и передавать его слово своим братьям и сёстрам. В этот день воздают почести учёным, наставникам, писцам и хранителям знаний, а также благодарят за окончание самого сурового месяца."},
6:{name:"Праздник Тиранеля",text:"Начало праздничных дней в честь бога мудрости. В библиотеках и школах проводят чтения, диспуты и состязания умов."},
7:{name:"Дни знания",text:"Продолжаются встречи учёных, обмен рукописями и публичные лекции. Ученики благодарят наставников."},
8:{name:"День наставника",text:"Принято чтить тех, кто передаёт знания следующим поколениям, и обещать беречь полученную мудрость."},
9:{name:"Завершение праздника Тиранеля",text:"Последний день праздничного цикла. Семьи и общины устраивают общие трапезы, отмечая завершение самой суровой поры."}
}},
{name:"Дарали",days:23,season:"snow",label:"Сезон Снегов",
desc:"Виток природы, материнства и продолжения жизни.",
holidays:{
1:{name:"День Дарали",text:"Дарали, богиня природы, хранительница жизни и всех живых существ. В первый день Витка ей воздают почести, просят благополучия для семей, здоровья детей и защиты живого мира."},
10:{name:"День Женщины и Матери",text:"Праздник женщин, матерей и хранительниц семейного очага. Женщинам дарят цветы, украшения и знаки благодарности. Многие пары стремятся заключить брак именно в этот день, считая его благоприятным для создания семьи."}
}},
{name:"Рохнас",days:23,season:"mid",label:"Межсезонье",
desc:"Начало Межсезонья и морского времени. Авитания открывает сезон плаваний, торговли и пиратских пиров.",
holidays:{
1:{name:"День Рохнаса",text:"Первый день Витка посвящён древнему богу, чьё имя сохранилось в календаре. В Межсезонье особенно чтят обычаи, связанные с реками, морями и путешествиями."},
5:{name:"День Пирата",text:"Главный праздник Авитании и начало морского сезона. В портах поднимают флаги, устраивают пиры, состязания и представления. Моряки благословляют суда перед выходом в море, а капитаны собирают команды и заключают торговые соглашения."},
6:{name:"Начало морского сезона",text:"Порты оживают, суда готовятся к плаванию, рыбаки и торговцы совершают обряды на удачу. В Авитании продолжаются праздничные гулянья."},
7:{name:"Праздник морских команд",text:"Моряки чествуют товарищей, делятся историями о путешествиях и устраивают состязания в ловкости."},
8:{name:"День свободного ветра",text:"День удачных отплытий и новых маршрутов. Корабли выходят из гаваней, а торговцы договариваются о поставках."},
9:{name:"Праздник портов",text:"Прибрежные поселения устраивают ярмарки и пиры. Праздничные дни объединяют мореходов, рыбаков и купцов."},
10:{name:"Завершение морской недели",text:"Завершается первая череда торжеств морского сезона. В портах благословляют команды и желают им безопасных путешествий."},
23:{name:"День Моря",text:"В этот день жители приносят зерно к водам морей и рек, благодаря их за жизнь и прося обилия рыбы. В некоторых поселениях зерно опускают в воду с молитвами, в других устраивают общие трапезы у берега."}
}},
{name:"Моласель",days:23,season:"mid",label:"Межсезонье",
desc:"Виток красоты, любви и брачных обетов.",
holidays:{
1:{name:"День Моласель",text:"Первый день Витка посвящён древней богине, чьё имя хранится в календаре. В этот день вспоминают любовь, красоту и жертвы, совершённые ради счастья других."},
14:{name:"День Влюблённых",text:"По легенде, Моласель отказалась от собственной любви ради счастья всех далиров, разумных существ. В память о её выборе люди дарят друг другу цветы, украшения и письма, признаются в чувствах и просят благословения для своих союзов."},
15:{name:"День Красоты и Обетов",text:"Продолжение праздника любви. День считается благоприятным для вступления в брак, помолвок и примирения. Красоту почитают не только во внешности, но и в поступках, верности и способности отказаться от личной выгоды ради другого."}
}},
{name:"Тиврон",days:23,season:"mid",label:"Межсезонье",
desc:"Время игр, состязаний, охоты и воинского мастерства.",
holidays:{
1:{name:"День Тиврона",text:"Первый день Витка посвящён древнему богу Тиврону. Вспоминают доблесть, дисциплину и уважение к сопернику."},
20:{name:"Начало Тивроновых игр",text:"В Кипсбурге, Бейлине и городах Свободных земель, следующих Вере Лидара, начинаются Тивроновы игры. Соревнуются лучники, бойцы и охотники, проходят состязания в меткости, силе и выносливости."},
21:{name:"День охотников и лучников",text:"Продолжаются охотничьи состязания и турниры лучников. Участники демонстрируют не только меткость, но и умение обращаться с оружием ответственно."},
22:{name:"День соколов",text:"Проводятся выставки соколов и состязания ловчих. Птиц показывают в полёте, а лучшие сокольники делятся опытом."},
23:{name:"Завершение Тивроновых игр",text:"Финальный день игр посвящён награждению победителей и чествованию участников. Соперники обмениваются дарами, а общины устраивают общие пиры."}
}},
{name:"Эльхне",days:23,season:"mid",label:"Межсезонье",
desc:"Виток домашнего очага, семейных уз и памяти о близких.",
holidays:{
1:{name:"День Эльхне",text:"Первый день Витка посвящён древней богине Эльхне, хранительнице домашнего очага. Её просят о мире в доме, согласии между поколениями и защите семьи."},
8:{name:"День Семьи и Роа-пения",text:"Праздник семьи и домашнего очага. Родственники собираются вместе, навещают старших, примиряются после ссор и поют традиционные роа-песни в честь Эльхне. В разных землях песни и обряды могут отличаться."}
}},
{name:"Ламилан",days:23,season:"mid",label:"Межсезонье",
desc:"Виток богатства, обмена и дальних торговых путей.",
holidays:{
1:{name:"День Ламилана",text:"Первый день Витка посвящён древнему богу Ламилану. Ему воздают почести, прося удачи в делах, разумных сделок и благополучия."},
18:{name:"Начало Великой ярмарки",text:"В городах Степей открываются крупнейшие торжища. Купцы и путешественники со всего мира привозят товары, заключают сделки и обмениваются новостями."},
19:{name:"День торговых союзов",text:"Продолжаются ярмарки, переговоры и заключение договоров. Купеческие дома представляют свои товары, а путешественники находят новых партнёров."},
20:{name:"Завершение ярмарочных дней",text:"Последний из главных дней Великой ярмарки. Подводят итоги торговли, отмечают удачные сделки и готовят обозы к дальней дороге."}
}},
{name:"Риштан",days:23,season:"warm",label:"Сезон Тепла и Урожая",
desc:"Виток воинов, мужества, долга и памяти о павших.",
holidays:{
1:{name:"День Риштана и воинской службы",text:"Первый день Витка посвящён древнему богу Риштану. Воины, служащие и защитники земель принимают поздравления. Вспоминают долг перед домом и народом."},
2:{name:"День бойцов",text:"Проводятся состязания воинов, демонстрации боевого мастерства и испытания силы."},
3:{name:"День конных турниров",text:"На площадях и в поместьях устраивают конные состязания, турниры и показательные выступления всадников."},
4:{name:"День памяти павших",text:"Завершение воинских торжеств посвящено тем, кто погиб, защищая других. У памятников и могил возлагают цветы, называют имена павших и дают обещания хранить память о них."},
23:{name:"День Соединения светил",text:"Оба светила надолго задерживаются в небе, и день становится самым длинным в Круге. Праздник сопровождается ночными гуляньями, огнями и наблюдениями за небом."}
}},
{name:"Кассанэль",days:23,season:"warm",label:"Сезон Тепла и Урожая",
desc:"Виток тепла, веселья и уважения к старшим.",
holidays:{
1:{name:"День Кассанэля",text:"Первый день Витка посвящён древнему богу Кассанэлю. Его почитают как часть старого календарного наследия."},
10:{name:"Праздник Тепла",text:"Начало праздничных дней, посвящённых теплу, общению и радости жизни. На улицах устраивают гулянья, а дома открывают для гостей."},
11:{name:"День Веселья",text:"Проводятся представления, музыкальные вечера, игры и общие трапезы. Принято делиться радостью с соседями и теми, кто остался один."},
12:{name:"День Старших",text:"Праздник пожилых людей и памяти поколений. Согласно преданию, глаза бога Кассанэля были выжжены, но до него всё равно следует донести радость мира. Люди навещают старших, приносят им подарки и рассказывают о добрых событиях."}
}},
{name:"Салис",days:23,season:"warm",label:"Сезон Тепла и Урожая",
desc:"Виток летних вод, танцев, знакомств и любовных поисков.",
holidays:{
1:{name:"День Салиса",text:"Первый день Витка посвящён древнему божеству Салису."},
5:{name:"Начало Салисовых купаний",text:"Начинаются любимые праздники молодёжи. Крестьяне собираются у рек и озёр, купаются по ночам, танцуют у костров и знакомятся. В городах устраивают гулянья и открытые музыкальные вечера."},
6:{name:"День речных встреч",text:"У воды собираются семьи и молодёжь. Принято знакомиться, обмениваться лентами и небольшими подарками."},
7:{name:"Ночь костров",text:"У рек и озёр зажигают костры, поют и танцуют до рассвета. В некоторых землях молодые люди загадывают желания о будущей любви."},
8:{name:"День признаний",text:"Праздник признаний, знакомств и ухаживаний. Считается подходящим временем, чтобы открыто рассказать о своих чувствах."},
9:{name:"День водных обетов",text:"Влюблённые обмениваются обещаниями и дарами у воды. В разных землях обряды отличаются."},
10:{name:"Балы у воды",text:"Знать и аристократия устраивают балы у фонтанов и озёр, присматривая подходящие партии для себя и своих детей."},
11:{name:"День сватовства",text:"Продолжаются знакомства, помолвки и переговоры семей о будущих браках."},
12:{name:"День цветов и лент",text:"Принято украшать одежду цветами и лентами, дарить знаки внимания и приглашать понравившихся людей на танец."},
13:{name:"Ночь песен",text:"Музыка звучит у рек, озёр и на городских площадях. Праздник объединяет разные сословия, хотя у каждого народа сохраняются свои обычаи."},
14:{name:"День обещаний",text:"Влюблённые подтверждают намерения, семьи обсуждают помолвки и будущие союзы."},
15:{name:"Завершение Салисовых купаний",text:"Последний день праздника. Участники прощаются с летними гуляньями, благодарят воды и возвращаются к повседневным делам."}
}},
{name:"Дардо",days:23,season:"warm",label:"Сезон Тепла и Урожая",
desc:"Виток завершения полевых работ, благодарности земле и подготовки к снегам.",
holidays:{
1:{name:"День Дардо",text:"Первый день Витка посвящён древнему божеству Дардо."},
20:{name:"Дни последних урожаев",text:"Начинается завершение сбора урожая. Семьи свозят последние плоды, зерно и овощи, делятся излишками и благодарят землю за плодородие."},
21:{name:"День полей",text:"Крестьяне завершают полевые работы, чинят инструменты и готовят землю к наступлению снегов."},
22:{name:"День запасов",text:"Проверяют амбары, складывают припасы на холодный сезон и помогают тем, кому не удалось собрать достаточно урожая."},
23:{name:"Завершение урожая",text:"Последний день урожайных торжеств. В общинах устраивают благодарственные трапезы, а в некоторых землях оставляют часть урожая в дар нуждающимся."}
}},
{name:"Хадиэль",days:46,season:"warm",label:"Сезон Тепла и Урожая",
desc:"Последний Виток Круга. Время памяти об усопших, примирения, исполнения обещаний и завершения дел.",
holidays:{
1:{name:"День Хадиэля",text:"Первый день Витка посвящён древнему божеству Хадиэлю. Вспоминают завершение пути, неизбежность перемен и ответственность перед будущим Кругом."},
20:{name:"День Усопших",text:"День памяти умерших. Семьи посещают могилы, зажигают светильники, приносят цветы и вспоминают тех, кого больше нет рядом. В некоторых землях устраивают поминальные трапезы."},
30:{name:"Дни Предков",text:"Начинаются дни покоя и смирения. Семьи вспоминают предков, рассказывают истории о старших поколениях и примиряются с теми, с кем были в ссоре."},
31:{name:"День тишины",text:"Время спокойствия, размышлений и семейной памяти. Избегают громких торжеств и стараются завершить старые споры."},
32:{name:"День примирения",text:"Принято просить прощения, возвращать долги и восстанавливать разрушенные отношения. Мир между живыми считается достойным даром предкам."},
33:{name:"Завершение Дней Предков",text:"Завершающий день памяти. Семьи благодарят предков за наследие и обещают сохранить лучшие традиции."},
44:{name:"Дни Завершения Круга",text:"Начинается время окончания незавершённых дел, исполнения обещаний и подготовки к новому Кругу. Люди стараются вернуть долги, завершить работу и примириться."},
45:{name:"День исполненных обещаний",text:"Дополнительный выходной. День предназначен для исполнения данных обещаний, завершения важных дел и подготовки дома к новому Кругу."},
46:{name:"Прощание с Кругом",text:"Последний день года и дополнительный выходной. Время подведения итогов, прощания с уходящим Кругом и приготовления к празднику Лидара. Считается добрым знаком войти в новый Круг, не оставив за собой невыполненных обещаний."}
}}
];
var grid=root.querySelector("#ac-calendar-grid");
var picker=root.querySelectorAll(".month-btn");
var seasonBoxes=root.querySelectorAll(".season");
var seasonLabel=root.querySelector("#ac-season-label");
var monthName=root.querySelector("#ac-month-name");
var monthMeta=root.querySelector("#ac-month-meta");
var monthDesc=root.querySelector("#ac-month-desc");
var selected=root.querySelector("#ac-selected-day");
var holidayList=root.querySelector("#ac-holiday-list");
var current=0;
var weekdays=["1","2","3","4","5","6","7"];
function isExtra(m,d){return m.name==="Хадиэль"&&(d===45||d===46)}
function isWeekend(m,d){return d%5===0||isExtra(m,d)}
function isSacred(d){return d===1}
function holidayCount(m){return Object.keys(m.holidays).length}
function dayInfo(m,d){
return {
extra:isExtra(m,d),
weekend:isWeekend(m,d),
sacred:isSacred(d),
holiday:m.holidays[d]||null
}
}
function safe(text){
return String(text).replace(/[&<>"']/g,function(c){
return {"&":"&","<":"<",">":">",'"':""","'":"'"}[c]
})
}
function selectDay(day){
var m=months[current],info=dayInfo(m,day);
var title=day+"-й день Витка "+m.name;
var html='<div class="selected-label">Выбранный день</div><h4 class="selected-title">'+safe(title)+'</h4>';
var tags=[];
if(info.sacred)tags.push("Почитание древнего бога");
if(info.holiday)tags.push("Праздник");
if(info.weekend)tags.push("Выходной");
if(info.extra)tags.push("Дополнительный выходной");
tags.forEach(function(t){html+='<span class="badge">'+safe(t)+'</span>'});
if(info.holiday){
html+='<p><strong>'+safe(info.holiday.name)+'.</strong> '+safe(info.holiday.text)+'</p>';
}else if(info.sacred){
html+='<p>Первый день Витка посвящён древнему богу, чьё имя сохранилось в календаре. Конкретные обряды зависят от верований народа и местных традиций.</p>';
}else{
html+='<p>'+(info.weekend?"Сегодня выходной день. ":"Обычный день Витка. ")+(info.extra?"Это дополнительный выходной в завершении календарного Круга.":"")+'</p>';
}
selected.innerHTML=html;
}
function renderMonth(index){
current=index;
var m=months[index],weekends=0;
for(var d=1;d<=m.days;d++)if(isWeekend(m,d))weekends++;
picker.forEach(function(btn,i){
btn.classList.toggle("active",i===index);
btn.setAttribute("aria-pressed",i===index?"true":"false")
});
seasonBoxes.forEach(function(box){
box.classList.toggle("active",box.getAttribute("data-season")===m.season)
});
seasonLabel.textContent=m.label;
monthName.textContent="Виток "+m.name;
monthMeta.textContent=m.days+" дней · "+weekends+" выходных · "+holidayCount(m)+" праздничных дат";
monthDesc.textContent=m.desc;
grid.innerHTML="";
weekdays.forEach(function(_,i){
var cell=document.createElement("div");
cell.className="weekday";
cell.textContent=["День","День","День","День","Вых.","День","День"][i];
grid.appendChild(cell);
});
for(var day=1;day<=m.days;day++){
var info=dayInfo(m,day);
var button=document.createElement("button");
button.type="button";
button.className="day";
if(info.weekend)button.classList.add("weekend");
if(info.sacred)button.classList.add("sacred");
if(info.extra)button.classList.add("extra");
if(info.holiday)button.classList.add("holiday");
var mark=info.holiday?(info.holiday.name.length>15?"✧ праздник":info.holiday.name):(info.sacred?"✧":(info.weekend?"Отдых":""));
button.innerHTML='<span class="num">'+day+'</span>'+(mark?'<span class="mark">'+safe(mark)+'</span>':'');
button.title="Виток "+m.name+", день "+day+(info.holiday?": "+info.holiday.name:"")+(info.weekend?" · выходной":"");
button.setAttribute("aria-label",button.title);
button.addEventListener("click",function(d){return function(){selectDay(d)}}(day));
grid.appendChild(button);
}
renderHolidayList();
selectDay(1);
}
function renderHolidayList(){
var m=months[current],html="";
Object.keys(m.holidays).map(Number).sort(function(a,b){return a-b}).forEach(function(day){
var h=m.holidays[day];
html+='<details><summary>'+day+'-й день · '+safe(h.name)+'</summary><div class="detail-body"><p>'+safe(h.text)+'</p>'+(isWeekend(m,day)?'<p><strong>Выходной день.</strong></p>':'')+'</div></details>';
});
holidayList.innerHTML=html;
}
picker.forEach(function(btn){
btn.addEventListener("click",function(){renderMonth(Number(btn.getAttribute("data-month")))});
});
renderMonth(0);
})();
</script>
</div>
[/html]