Skip to content

Instantly share code, notes, and snippets.

@srph

srph/index.html

Created April 28, 2023 03:08
Show Gist options
  • Save srph/129a40f68aba0227dad8877a9b7181e1 to your computer and use it in GitHub Desktop.
Save srph/129a40f68aba0227dad8877a9b7181e1 to your computer and use it in GitHub Desktop.
Download ZIP
Fixes - Countdown Timer
Raw
index.html
<script src="https://cdn.tailwindcss.com"></script>
<body class="relative w-full h-screen m-0 bg-gradient-to-b from-mostlyBlackBlue to-veryDarkBlue
font-redHatText">
</div>
<section class="w-full h-full flex flex-col justify-center items-center space-y-12">
<div class="text-4xl text-white tracking-[14px] font-bold">
WE'RE LAUNCHING SOON
</div>
<div class="flex justify-center items-center gap-[40px]">
<!--DAYS-->
<div class="flex flex-col-reverse justify-center items-center space-y-10">
<h1 class="mt-[30px] text-2xl text-grayishBlue font-bold">
DAYS
</h1>
<div class="flex justify-center items-center">
<div class="flex flex-col text-softRed space-y-[1px] rounded-xl container-shadow" data-days>
<!--Top-->
<span class="relative w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span class="translate-y-[46px]" data-card-top>
09
</span>
<!--FlipTop-->
<span data-flip-top class="absolute w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl top-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-top-num class="translate-y-[46px]" data-card-top>
09
</span>
</span>
</span>
<!--Bottom-->
<span class="relative w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-card-bot class="-translate-y-[45px]">09</span>
<!--FlipBottom-->
<span data-flip-bot class="absolute w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl bottom-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-bot-num class="-translate-y-[45px]">09</span>
</span>
</span>
</div>
</div>
</div>
<!--HOURS-->
<div class="flex flex-col-reverse justify-center items-center space-y-10">
<h1 class="mt-[30px] text-2xl text-grayishBlue font-bold">
HOURS
</h1>
<div class="flex justify-center items-center">
<div class="flex flex-col text-softRed space-y-[1px] rounded-xl container-shadow" data-hours>
<!--Top-->
<span class="relative w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span class="translate-y-[46px]" data-card-top>
00
</span>
<!--FlipTop-->
<span data-flip-top class="absolute w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl top-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-top-num class="translate-y-[46px]" data-card-top>
00
</span>
</span>
</span>
<!--Bottom-->
<span class="relative w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-card-bot class="-translate-y-[45px]">00</span>
<!--FlipBottom-->
<span data-flip-bot class="absolute w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl bottom-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-bot-num class="-translate-y-[45px]">00</span>
</span>
</span>
</div>
</div>
</div>
<!--MINUTES-->
<div class="flex flex-col-reverse justify-center items-center space-y-10">
<h1 class="mt-[30px] text-2xl text-grayishBlue font-bold">
MINUTES
</h1>
<div class="flex justify-center items-center">
<div class="flex flex-col text-softRed space-y-[1px] rounded-xl container-shadow" data-minutes>
<!--Top-->
<span class="relative w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span class="translate-y-[46px]" data-card-top>
00
</span>
<!--FlipTop-->
<span data-flip-top class="absolute w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl top-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-top-num class="translate-y-[46px]" data-card-top>
00
</span>
</span>
</span>
<!--Bottom-->
<span class="relative w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-card-bot class="-translate-y-[45px]">00</span>
<!--FlipBottom-->
<span data-flip-bot class="absolute w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl bottom-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-bot-num class="-translate-y-[45px]">00</span>
</span>
</span>
</div>
</div>
</div>
<!--Seconds-->
<div class="flex flex-col-reverse justify-center items-center space-y-10">
<h1 class="mt-[30px] text-2xl text-grayishBlue font-bold">
SECONDS
</h1>
<div class="flex justify-center items-center">
<div class="flex flex-col text-softRed space-y-[1px] rounded-xl container-shadow" data-seconds>
<!--Top-->
<span class="relative w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span class="translate-y-[46px]" data-card-top>
00
</span>
<!--FlipTop-->
<span data-flip-top class="absolute w-[180px] h-[90px] bg-slightlyDarkerDesBlue overflow-hidden
rounded-tl-xl rounded-tr-xl flex justify-center items-end text-8xl top-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-end">
<div class="w-[10px] h-[8px] rounded-tr-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-end">
<div class="w-[10px] h-[8px] rounded-tl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-top-num class="translate-y-[46px]" data-card-top>
00
</span>
</span>
</span>
<!--Bottom-->
<span class="relative w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-card-bot class="-translate-y-[45px]">00</span>
<!--FlipBottom-->
<span data-flip-bot class="absolute w-[180px] h-[90px] bg-darkDesaturatedBlue overflow-hidden
rounded-bl-xl rounded-br-xl flex justify-center items-end text-8xl bottom-flip-shadow">
<div class="absolute w-full h-full flex justify-start items-start">
<div class="w-[10px] h-[8px] rounded-br-full bg-veryDarkBlue"></div>
</div>
<div class="absolute w-full h-full flex justify-end items-start">
<div class="w-[10px] h-[8px] rounded-bl-full bg-veryDarkBlue"></div>
</div>
<span data-flip-bot-num class="-translate-y-[45px]">00</span>
</span>
</span>
</div>
</div>
</div>
</div>
</section>
</body>
Raw
index.js
const countToDate = new Date();
countToDate.setDate(new Date().getDate() + 9);
setInterval(() => {
const currentDate = new Date();
const timeBetweenDates = Math.ceil((countToDate - currentDate) / 1000);
flipAllcard(timeBetweenDates);
}, 1000);
function flipAllcard(time) {
const seconds = time % 60;
const minutes = Math.floor(time / 60) % 60;
const hours = Math.floor(time / 3600) % 24;
const days = Math.floor(time / 86400);
console.log("wtf", seconds, minutes, hours, days);
flip(document.querySelector("[data-days]"), days, true);
flip(document.querySelector("[data-hours]"), hours);
flip(document.querySelector("[data-minutes]"), minutes);
flip(document.querySelector("[data-seconds]"), seconds);
}
function flip(flipcard, newNumber, flag) {
const cardTop = flipcard.querySelector("[data-card-top]");
const startNumber = cardTop ? parseInt(cardTop.textContent, 10) : 0;
const cardBot = flipcard.querySelector("[data-card-bot]"),
topFlip = flipcard.querySelector("[data-flip-top]"),
botFlip = flipcard.querySelector("[data-flip-bot]"),
topFlipNum = flipcard.querySelector("[data-flip-top-num]"),
botFlipNum = flipcard.querySelector("[data-flip-bot-num]");
if (newNumber === startNumber) return;
const displayStartNum = String(startNumber).padStart(2, "0");
const displayNewNum = String(newNumber).padStart(2, "0");
if (flag) console.log("displayStartNum", displayStartNum, displayNewNum);
const once = (el, event, callback) => {
const handler = () => {
el.removeEventListener(event, handler);
callback();
};
el.addEventListener(event, handler);
};
cardTop.textContent = displayStartNum;
cardBot.textContent = displayStartNum;
topFlipNum.textContent = displayStartNum;
botFlipNum.textContent = displayNewNum;
topFlip.classList.add("flip-card-top");
botFlip.classList.add("flip-card-bottom");
once(topFlip, "animationstart", () => {
console.log("here");
cardTop.innerText = displayNewNum;
});
once(topFlip, "animationend", () => {
topFlipNum.innerText = displayNewNum;
topFlip.classList.remove("flip-card-top");
});
once(botFlip, "animationend", () => {
cardBot.innerText = displayNewNum;
botFlip.classList.remove("flip-card-bottom");
});
}
flip();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment