Siin saate vaadata, kui palju on jäänud minu sünnipäevani (10.10.2008)
/* Сброс стандартных отступов */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Общий стиль */
html, body {
height: 100%; /* нужно для футера */
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
background: #f4f4f4;
color: #333;
display: flex;
flex-direction: column; /* вертикальная раскладка */
}
/* Шапка */
header {
background: #222;
color: #fff;
padding: 20px 0;
text-align: center;
}
header h1 {
font-size: 28px;
}
/* Навигация */
nav {
background: #444;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: background 0.3s;
}
nav ul li a:hover {
background: #666;
border-radius: 5px;
}
/* Контент */
main {
flex: 1; /* чтобы футер был снизу */
padding: 20px;
max-width: 1000px; /* фиксируем ширину */
width: 100%;
margin: 0 auto; /* центрируем main, как было раньше */
}
/* Секции */
section {
background: #fff;
margin-bottom: 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section h2 {
margin-bottom: 15px;
color: #222;
}
/* Картинки */
section img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
/* Галерея (media.html) */
#media_photos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
#media_photos img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s;
}
#media_photos img:hover {
transform: scale(1.05);
}
/* Таблички (teemad_lingid.html) — текст в столбик */
#osa1 ul, #osa3 ul {
display: block; /* обычный блок, элементы в колонку */
list-style: none;
padding: 0;
margin: 0;
}
#osa1 ul li, #osa3 ul li {
display: block; /* каждый пункт в отдельной строке */
margin-bottom: 5px; /* отступ между пунктами */
vertical-align: top;
}
/* Футер */
footer {
background: #222;
color: #fff;
text-align: center;
padding: 15px 0;
margin-top: auto; /* всегда снизу */
}
/* Кнопки навигации */
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
border-radius: 5px;
transition: color 0.3s, background 0.3s;
}
/* Эффект при наведении */
nav ul li a:hover {
background: #666;
color: #fff;
}
/* Эффект при нажатии (текст синий) */
nav ul li a:active {
color: #007BFF; /* синий текст при клике */
}
/* Эффект наведения на ссылки в колонке Lingid */
#osa3 ul li a:hover {
color: red; /* текст красный при наведении */
text-decoration: underline; /* подчеркивание при наведении */
}
.media_map_container {
display: flex; /* элементы в строку */
justify-content: space-between;
gap: 20px; /* расстояние между видео и картой */
flex-wrap: wrap; /* если места мало — перенос вниз */
}
.video_wrapper, .map_wrapper {
flex: 1 1 45%; /* занимают примерно половину секции, с минимальной гибкостью */
min-width: 300px; /* чтобы элементы не становились слишком узкими */
}
.video_wrapper iframe,
.map_wrapper iframe {
width: 100%; /* занимают всю ширину родителя */
height: auto; /* высота подстраивается автоматически */
aspect-ratio: 16/9; /* сохраняем пропорции 16:9 для видео и карты */
}
/*—————————————————————————————————————-*/
#aeg {
font-size: 1.5rem; /* Размер шрифта побольше */
padding: 12px 24px; /* Отступы вокруг текста (вертикально и горизонтально) */
background-color: lightgray; /* Серый фон кнопки */
color: black; /* Черный цвет текста */
border: none; /* Без рамки */
border-radius: 6px; /* Слегка скруглённые углы */
cursor: pointer; /* Курсор при наведении — указатель */
transition: background-color 0.3s ease; /* Плавное изменение цвета при наведении */
}
#aeg:hover {
background-color: #007BFF; /* Темнее синий при наведении */
}
#sunnipaev {
font-size: 1.5rem; /* Размер шрифта побольше */
padding: 12px 24px; /* Отступы вокруг текста (вертикально и горизонтально) */
background-color: lightgray; /* Серый фон кнопки */
color: black; /* Черный цвет текста */
border: none; /* Без рамки */
border-radius: 6px; /* Слегка скруглённые углы */
cursor: pointer; /* Курсор при наведении — указатель */
transition: background-color 0.3s ease; /* Плавное изменение цвета при наведении */
}
#sunnipaev:hover {
background-color: #007BFF; /* Темнее синий при наведении */
}
function kuupaevKellaaeg() {
const now = new Date();
const paev = now.getDate();
const kuu = now.getMonth() + 1; // месяцы с 0
const aasta = now.getFullYear();
const tunnid = now.getHours();
const minutid = now.getMinutes().toString().padStart(2, ‘0’);
const sekundid = now.getSeconds().toString().padStart(2, ‘0’);
// Форматируем дату и время в строки
const dateStr = `${paev}.${kuu}.${aasta}`;
const timeStr = `${tunnid}:${minutid}:${sekundid}`;
const dateTimeStr = `${dateStr} ${timeStr}`;
// Вывод на страницу
document.getElementById(‘dateOnly’).textContent = «Kuupäev: » + dateStr;
document.getElementById(‘timeOnly’).textContent = «Kellaaeg: » + timeStr;
document.getElementById(‘dateTime’).textContent = «Kuupäev ja kellaaeg: » + dateTimeStr;
// Вывод в консоль
console.log(«Kuupäev: » + dateStr);
console.log(«Kellaaeg: » + timeStr);
console.log(«Kuupäev ja kellaaeg: » + dateTimeStr);
}
//////////////////////////////////////////////////////////////////////// Сколько дней до днюхи
function näitaSünnipäeva() {
const now = new Date();
// День рождения (месяц с 0): 10 ноября
let sunnipaev = new Date(now.getFullYear(), 9, 10);
// Если день рождения уже прошёл в этом году, переходим на следующий год
if (sunnipaev < now) {
sunnipaev = new Date(now.getFullYear() + 1, 10, 10);
}
// Разница в миллисекундах
const ms = sunnipaev.getTime() — now.getTime();
// Переводим в дни и округляем в большую сторону
const paevad = Math.ceil(ms / (1000 * 60 * 60 * 24));
// Выводим результат в консоль
console.log(`Minu sünnipäevani on jäänud ${paevad} päeva.`);
// Можно вывести на страницу (если есть элемент с id="sunniTulemus")
const tulemusElem = document.getElementById('sunniTulemus');
if (tulemusElem) {
tulemusElem.textContent = `Minu sünnipäevani on jäänud ${paevad} päeva.`;
}
}
