File size: 5,509 Bytes
afd3a21 878edc4 afd3a21 7455789 afd3a21 ba50e1c 2f9b891 aba6130 daf6e93 afd3a21 ba50e1c afd3a21 9a7732b 2f9b891 9a7732b 2f9b891 aba6130 a4ef0f1 2f9b891 afd3a21 670a20f afd3a21 602aa97 2aa621d afd3a21 e1de4c0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
<style>
html, body{height:100%;margin:0;font-family:"Courier New", Courier, monospace;}
.bgimg{
background: url('1ace1e83-4c7e-4271-927a-a7beb7130120.png') center/cover no-repeat;
height:100%;position:relative;color:#fff;
font-size:25px;
}
.topleft, .bottomleft{
position:absolute;left:16px;color:#fff;
}
.topleft{top:0;}
.bottomleft{bottom:0;}
.middle{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;
}
hr{margin:auto;width:40%;}
.typing-cursor::after{
content:"|";
animation:blink 1s steps(2) infinite;
}
@keyframes blink{
50%{opacity:0;}
}
.logo-container {
display: flex; /* Используем flexbox для выравнивания */
align-items: center; /* Выравнивание по вертикальному центру */
gap: 10px; /* Добавляем небольшое расстояние между текстом и изображением */
font-size: 1.2em; /* Увеличим размер текста для наглядности */
}
/* Стили для самого изображения (логотипа) */
.logo-image {
border-radius: 30%; /* Закругленные углы */
width: 40px; /* Ширина */
height: 40px; /* Высота */
border: 2px solid #333; /* Рамка: толщина 2px, сплошная, темно-серого цвета */
padding: 2px; /* Небольшой отступ внутри рамки */
animation: bounce 2s infinite; /* Применяем анимацию "bounce" */
}
/* Определение анимации движения вверх-вниз */
@keyframes bounce {
0%, 100% {
transform: translateY(0); /* Начальное и конечное положение (без смещения) */
}
50% {
transform: translateY(-5px); /* Середина анимации (смещение вверх на 5px) */
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
h2 {margin-top:0;}
.fa {font-size:30px; cursor:pointer; margin-right:5px;}
.fa.checked {color:orange;}
.fa.disabled {color:#ccc; cursor:not-allowed;}
table {width:100%; border-collapse:collapse; margin-top:20px;}
td, th {border:1px solid #ddd; padding:8px; text-align:center;}
.right {text-align:right;}
</style>
</head>
<body>
<div class="bgimg" class="top-container">
<div class="topleft"> <div class="logo-container">
<span>FrostICE</span>
<img src="12fa3178-eceb-490c-9930-adcd65e4cd30.png" class="logo-image" alt="Логотип FrostICE">
</div>
</div>
<div class="middle">
<h1 id="it" class="typing-cursor"></h1>
<hr>
<p id="demo" class="typing-cursor"></p>
</div>
<div class="bottomleft"><p id="about" class="typing-cursor"></p></div>
</div>
<button class="collapsible">Скоро будет...</button>
<div class="content">
<p>Тут пока ничего нет</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
<script>
function typeTextInto(elem, txt, speed = 50, onComplete) {
let i = 0;
elem.innerHTML = '';
function type() {
if (i < txt.length) {
elem.innerHTML += txt.charAt(i);
i++;
setTimeout(type, speed);
} else if (typeof onComplete === 'function') {
onComplete();
}
}
type();
}
const targetDate = new Date('Dec 12, 2026 04:59:57').getTime();
const demoEl = document.getElementById('demo');
let timerInt;
function getTimeString() {
const now = Date.now();
const diff = targetDate - now;
if (diff <= 0) return 'ВЫШЛО';
const d = Math.floor(diff / (1000 * 60 * 60 * 24));
const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const s = Math.floor((diff % (1000 * 60)) / 1000);
return `${d}d ${h}h ${m}m ${s}s`;
}
function startTimer() {
timerInt = setInterval(() => {
demoEl.innerHTML = getTimeString();
}, 1000);
}
function typeCountdownOnce() {
const first = getTimeString();
typeTextInto(demoEl, first, 70, () => {
demoEl.classList.remove('typing-cursor');
startTimer();
});
}
document.addEventListener('DOMContentLoaded', () => {
typeTextInto(document.getElementById('it'), 'До выхода проекта осталось', 50);
typeTextInto(document.getElementById('about'), 'Скоро выйдет проект', 30);
typeCountdownOnce();
});
</script>
</body>
</html>
|