Как сделать таймер обратного отсчёта дней, часов, минут и секунд? Есть карточка -
body {
background-color: #171923;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
.card-content {
padding: 1.5rem;
background-color: #ffffff;
width: 22.2222%;
border: 1px solid black;
border-radius: 32px;
height: 50%;
}
.is-flex-grow-1 {
flex-grow: 1!important;
}
.status-dot {
font-size: 12px;
line-height: 18px;
font-weight: 600;
display: inline-flex;
align-items: center;
vertical-align: middle;
padding: 4px 8px;
border-radius: 50px;
}
.status-dot svg {
font-size: 8px;
margin-right: 4px;
}
.custom-card {
font-size: 22px;
font-weight: 600;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.content-title {
font-size: 22px;
font-weight: 600;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.subtitle {
font-size: 15px;
font-weight: 600;
color: #888;
margin: 0!important;
}
.title {
font-weight: 600;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.soft-hard-cap {
font-size: 15px;
font-weight: 600;
color: var(--text-color);
margin: 0 0 0.25rem;
}
.soft-hard-cap span{
font-size: 20px;
font-weight: 600;
color: #f95192;
margin: 0;
}
.status-dot.inprogress {
background-color: #d1fae5;
color: #10b981;
}
.has-text-right {
color: #888;
}
.lockup-time p {
font-size: 15px;
font-weight: 600;
color: var(--text-color);
margin: 0;
}
.liquidity-percent p {
font-size: 15px;
font-weight: 600;
color: var(--text-color);
margin: 0;
}
.ant-progress-inner {
height: 8px;
position: relative;
display: inline-block;
width: 100%;
overflow: hidden;
vertical-align: middle;
background-color: #f5f5f5;
border-radius: 100px;
}
.custom-card .content-progress {
line-height: 1.125;
}
.soft-hard-cap p {
font-size: 15px;
font-weight: 600;
color: var(--text-color);
margin: 0 0 0.25rem;
}
.is-flex-grow-1 {
flex-grow: 1!important;
}
.sub-title {
font-size: 13px;
font-weight: 600;
color: #888;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="card-content is-flex-grow-1">
<div class="media is-flex is-align-items-center">
<div class="media-content">
<div class="is-flex is-justify-content-flex-end">
<div class="is-flex has-text-right is-flex-direction-column">
<div class="is-flex" style="text-align: right;">
<span class="is-flex status-dot inprogress">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"></path>
</svg>
<span>Sale Live</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="content-title">
<p class="title">SUPPERCOIN</p>
<p class="subtitle" >Fair Launch</p>
</div>
<div class="soft-hard-cap">
<p style="margin-top: 15px;">Soft </p>
<span>305 BNB</span>
</div>
<div class="content-progress" style="font-size: 15px;
font-weight: 600;
color: var(--text-color);
margin: 0 0 0.25rem;
">
<p class="title">Progress (0.00%)</p>
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default" style="margin-top: -4px;">
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 0%; height: 8px; background: rgba(72, 199, 116, 0.5);"></div>
<div class="ant-progress-success-bg" style="width: 0%; height: 8px; background-color: rgb(72, 199, 116);"></div>
</div>
</div>
</div>
<div class="sub-title is-flex is-align-items-center" style="padding-bottom: 10px;display: flex;">
<div class="is-flex-grow-1">0 BNB</div>
<div class="is-flex-grow-1 has-text-right" style="text-align: right;">305 BNB</div>
</div>
</div>
<div class="liquidity-percent">
<div class="is-flex is-align-items-center" style="display: flex;">
<p class="is-flex-grow-1">Liquidity %:</p>
<span class="is-flex-grow-1 has-text-right time-text" style="text-align: right;">70%</span>
</div>
</div>
<div class="lockup-time" style="border-bottom: 1px solid #a89f9f2b;margin: 0px 0px 0.25rem;">
<div class="is-flex is-align-items-center" style="display: flex;">
<p class="is-flex-grow-1">Lockup Time:</p>
<span class="is-flex-grow-1 has-text-right time-text" style="text-align: right;">365 days</span>
</div></div>
<div class="custom-card-footer">
<div class="is-flex is-align-items-center">
<div class="countdown is-flex-grow-1 is-flex-direction-column">
<div style="padding-top: 10px;">Sale Starts In:</div>
<div class="countdown-text">
<strong>
<span>00</span>
<span class="dotdot">:</span>
<span>01</span>
<span class="dotdot">:</span>
<span>22</span>
<span class="dotdot">:</span>
<span>06</span>
</strong>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Сюда нужно внедрить таймер
{days: 1, hours: 14, ...}
?