Sales timer

1<div class='announcement-section-1'>
2 <div class='container'>
3  <div class='announcement-wrapper'>
4   <span class='clock-down_text'>New Year Sale Ends In</span>
5   <div class='holiday-clock' id='js-clock'>
6    <div class='box-3'>
7     <div class='clock-number-2' id='js-clock-hours'>00</div>
8     <div class='clock-label-2'>Hrs</div>
9    </div>
10    <div class='text-block-countdown'>:</div>
11    <div class='box-3'>
12     <div class='clock-number-2' id='js-clock-minutes'>00</div>
13     <div class='clock-label-2'>Min</div>
14    </div>
15    <div class='text-block-countdown'>:</div>
16    <div class='box-3'>
17     <div class='clock-number-2' id='js-clock-seconds'>00</div>
18     <div class='clock-label-2'>Sec</div>
19    </div>
20   </div>
21  </div>
22 </div>
23</div>
24
25<style>
26.announcement-section-1 {
27    background: linear-gradient(45deg, #BDE6FF, #6A93AC, #174059);
28    background-size: 400% 400%;
29    animation: primaryGradient 5s ease infinite;
30    color: #fff;
31    text-align: center;
32    padding: 10px 0;
33}
34
35.announcement-wrapper {
36    font-size: 16px;
37    font-weight: 700;
38    line-height: 19.7px;
39    letter-spacing: -0.01em;
40    display: flex;
41    justify-content: center;
42    align-items: center;
43    gap: 1rem;
44}
45
46.holiday-clock {
47    display: flex;
48    justify-content: center;
49    align-items: center;
50    color: #2a2552;
51    border-radius: 3px;
52}
53
54.box-3 {
55    display: flex;
56    flex-direction: column;
57    justify-content: center;
58    align-items: center;
59    background-color: #fff;
60    border-radius: 2px;
61    width: 2.5rem;
62    height: 3rem;
63    margin: 0 2px;
64    padding: 3px;
65    font-size: 12px;
66    line-height: 20px;
67}
68
69.clock-number-2 {
70    font-size: 14px;
71    font-weight: 900;
72    line-height: 1;
73}
74
75.clock-label-2 {
76    font-size: 1rem;
77    line-height: 1;
78    text-transform: uppercase;
79}
80
81.text-block-countdown {
82    color: #fff;
83    padding: 0 0.15rem;
84    font-weight: 800;
85}
86
87.atcButton button {
88    background: #039d00 !important;
89    color: #fff;
90    padding: 5px 20px !important;
91    border-radius: 5px;
92    font-size: 13px;
93    min-height: 40px;
94}
95
96@keyframes primaryGradient {
97  0% { background-position: 0% 50%; }
98  50% { background-position: 100% 50%; }
99}
100
101@media (max-width: 740px) {
102    .announcement-wrapper {
103        font-size: 16px;
104        padding: 0px 0;
105        gap: 7px;
106    }
107.clock-number-2 {
108    font-size: 15px!important;
109    font-weight: 900;
110    line-height: 1;
111}
112.clock-label-2 {
113    font-size: 7px!important;
114    line-height: 1;
115    text-transform: uppercase;
116}
117    .holiday-clock {
118        flex-wrap: wrap;
119    }
120
121    .box-3 {
122        width: 1.5rem;
123        height: 1.75rem;
124    }
125
126    .clock-number-2 {
127        font-size: 0.8rem;
128    }
129
130    .clock-label-2 {
131        font-size: 0.45rem;
132    }
133}
134
135@media (max-width: 379px) {
136    .announcement-wrapper {
137        font-size: 15px;
138        gap: 5px;
139    }
140
141    .box-3 {
142        width: 2.5rem;
143        height: 3rem;
144    }
145
146    .text-block-countdown {
147        padding: 0 0.1rem;
148    }
149}
150
151@media (max-width: 360px) {
152    .atcButton button {
153        padding-inline: 20px;
154    }
155}
156</style>
157
158<script>
159// Countdown Timer Script
160(function() {
161    const endTime = new Date("January 25, 2025 00:00:00").getTime();
162
163    function updateTimer() {
164        const now = new Date().getTime();
165        const timeLeft = endTime - now;
166
167        if (timeLeft < 0) {
168            document.getElementById('js-clock').innerHTML = '<span>Sale Ended</span>';
169            return;
170        }
171
172        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
173        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
174        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
175
176        document.getElementById('js-clock-hours').textContent = String(hours).padStart(2, '0');
177        document.getElementById('js-clock-minutes').textContent = String(minutes).padStart(2, '0');
178        document.getElementById('js-clock-seconds').textContent = String(seconds).padStart(2, '0');
179    }
180
181    setInterval(updateTimer, 1000);
182    updateTimer(); // Initial call to avoid delay
183})();
184</script>