|
|
<!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; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
|
|
|
.logo-image { |
|
|
border-radius: 30%; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border: 2px solid #333; |
|
|
padding: 2px; |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-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('March 29, 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> |
|
|
|
