Сергей Ракипов,
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="shortcut icon" href="izobrazhenie/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="index">
<meta name="Keywords" content="index">
<style>
.sobranie_blok {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto auto auto;
grid-template-areas: "sobranie_nazvanie sobranie_cherez_ckolko granitsa_right" "sobranie_den_nedeli_vremya sobranie_cherez_ckolko granitsa_right" "sobranie_adres sobranie_adres granitsa_right" "sobranie_opisanie sobranie_opisanie granitsa_right" "sobranie_karta sobranie_karta granitsa_right" "sobranie_kak_proiti sobranie_kak_proiti granitsa_right";
row-gap: 0px;
column-gap: 0px;
justify-content: center;
--tset_osnovnoi: #0000FF;
--tset_dopolnitelnyi: #000000;
}
.granitsa_right {
grid-area: granitsa_right;
width: 1px;
margin: -20px 0px -20px 0px;
}
.sobranie_nazvanie {
width: 360px;
grid-area: sobranie_nazvanie;
font-size: 2.0rem;
font-weight: 700;
color: var(--tset_osnovnoi);
padding: 0px 0px 5px 0px;
}
.sobranie_den_nedeli_vremya {
grid-area: sobranie_den_nedeli_vremya;
padding: 0px 0px 0px 0px;
}
.den_nedeli_vremya {
font-size: .8rem;
}
.sobranie_cherez_ckolko {
grid-area: sobranie_cherez_ckolko;
padding: 0px 20px 0px 20px;
align-self: center;
border-left: 1px solid var(--tset_osnovnoi);
}
.cherez_ckolko {
text-align: center;
font-size: .8rem;
}
.cherez_ckolko_vremya {
display: flex;
align-items: center;
justify-content: center;
}
#dot {
margin: -3px 2px 0px 2px;
}
.sobranie_opisanie {
grid-area: sobranie_opisanie;
padding: 5px 0px 20px 0px;
}
.sobranie_adres {
grid-area: sobranie_adres;
padding: 20px 0px 0px 0px;
}
.sobranie_karta {
grid-area: sobranie_karta;
padding: 0px 0px 10px 0px;
width: 100%;
}
.ikonka_tekst {
display: flex;
align-items: center;
}
.ikonka {
width: 48px;
}
.tekst {
padding: 0px 0px 0px 15px;
}
.sobranie_kak_proiti a:hover {
color: var(--tset_dopolnitelnyi);
}
.sobranie_karta a:hover {
color: var(--tset_dopolnitelnyi);
text-decoration: none;
}
.karta {
display: block;
}
.sobranie_kak_proiti {
grid-area: sobranie_kak_proiti;
padding: 0px 0px 0px 0px;
width: 100%;
}
.blok_kak_proiti_kartinka {
display: block;
max-width: 520px;
}
.kak_proiti_kartinka {
width: 100%;
}
</style>
</head>
<body>
<main>
<div class="sobranie_blok" data-weekday="2">
<div class="granitsa_right">
</div>
<div class="sobranie_nazvanie">
Калитка
</div>
<div class="sobranie_den_nedeli_vremya">
<div class="den_nedeli_vremya">
Вторник / 15:00
</div>
</div>
<div class="sobranie_cherez_ckolko">
<div class="cherez_ckolko">
Собрание Начнется через:<br>
<div data-begin="15_00"></div>
</div>
</div>
<div class="sobranie_opisanie">
Описание собрание: <br>
<span class="malenkii_chrift">Ежедневник</span>
</div>
<div class="sobranie_adres">
ул. Декабристов 27<br>
<span class="malenkii_chrift">Во дворе, домофон 2222, цокольный этаж</span>
</div>
<div class="sobranie_karta">
<a href="#">Карта</a>
</div>
<div class="sobranie_kak_proiti">
<a href="#">Как пройти</a>
</div>
</div>
<br><br>
<div class="sobranie_blok" data-weekday="2">
<div class="granitsa_right">
</div>
<div class="sobranie_nazvanie">
Единство
</div>
<div class="sobranie_den_nedeli_vremya">
<div class="den_nedeli_vremya">
Вторник / 11:00
</div>
</div>
<div class="sobranie_cherez_ckolko">
<div class="cherez_ckolko">
Собрание Начнется через:<br>
<div data-begin="11_00"></div>
</div>
</div>
<div class="sobranie_opisanie">
Описание собрание: <br>
<span class="malenkii_chrift">Ежедневник</span>
</div>
<div class="sobranie_adres">
ул. Декабристов 27<br>
<span class="malenkii_chrift">Во дворе, домофон 2222, цокольный этаж</span>
</div>
<div class="sobranie_karta">
<a href="#">Карта</a>
</div>
<div class="sobranie_kak_proiti">
<a href="#">Как пройти</a>
</div>
</div>
</main>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const formatter = new Intl.DateTimeFormat("ru", {
hour: "2-digit",
minute: "2-digit"
});
let data = Array.from(document.querySelectorAll("[data-weekday]"), div => {
let weekday = +div.dataset.weekday;
let divLong = div.querySelector("[data-begin]");
let [hour, minute] = divLong.dataset.begin.split("_");
hour = +hour;
minute = +minute;
let oldHtml = "";
let txt = divLong.parentNode.firstChild;
return {
div,
weekday,
divLong,
hour,
minute,
oldHtml,
txt
}
})
const timer = () => {
requestAnimationFrame(timer);
const localTime = new Date;
const day = localTime.getDay();
data.forEach(obj => {
let {
div,
weekday,
divLong,
hour,
minute,
oldHtml,
txt
} = obj;
const beginTime = new Date;
beginTime.setHours(+hour, +minute, 0, 0);
const endTime = new Date;
hour += 1;
minute += 15;
endTime.setHours(hour, minute, 0, 0);
let time = endTime - localTime;
if (weekday == day && time > 0) {
let long = beginTime - localTime;
let status = long > 0 ? (long += 60000, `Собрание Начнется через:`) : `Собрание идет:`;
long = new Date(Math.abs(long) + localTime.getTimezoneOffset() * 60000);
long = formatter.format(long);
if (oldHtml == long) return;
div.style.display = "grid";
txt.data = status;
divLong.innerHTML = obj.oldHtml = long;
} else if (div.style.display != "none") div.style.display = "none";
})
}
requestAnimationFrame(timer);
});
</script>
</body>
</html>
