| <!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('Dec 12, 2010 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'), 'Отложено на 2 года', 30); |
| typeCountdownOnce(); |
| }); |
| </script> |
|
|
|
|
| </body> |
| </html> |
|
|
