85 lines
2.5 KiB
Svelte
85 lines
2.5 KiB
Svelte
<script lang='ts'>
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
|
|
let targetDate = new Date("2024-07-14");
|
|
|
|
let days = '-';
|
|
let hours = '-';
|
|
let minutes = '-';
|
|
let seconds = '-';
|
|
|
|
const updateTime = () => {
|
|
// Get the current time in the Berlin timezone
|
|
const berlinTimeZone = 'Europe/Berlin';
|
|
const berlinCurrentTime = new Date().toLocaleString('en-US', { timeZone: berlinTimeZone });
|
|
const currentTime = new Date(berlinCurrentTime);
|
|
|
|
// Calculate the time difference between the current time and the target date
|
|
const timeDiff = targetDate - currentTime;
|
|
|
|
// Calculate the remaining days, hours, minutes, and seconds
|
|
const totalSeconds = Math.floor(timeDiff / 1000);
|
|
seconds = totalSeconds % 60;
|
|
minutes = Math.floor((totalSeconds % 3600) / 60);
|
|
hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
|
|
days = Math.floor(totalSeconds / (3600 * 24));
|
|
};
|
|
|
|
|
|
updateTime()
|
|
|
|
onMount( () => {
|
|
|
|
const interval = setInterval(updateTime, 1000);
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="lg:max-w-xl w-full bg-gradient-to-r from-orange-400 to-purple-900 p-4 rounded-none sm:rounded-lg shadow-md m-auto">
|
|
<div class="container bg-gradient-to-r from-orange-400 to-purple-900 p-4 mt-4">
|
|
<h2 class="text-2xl font-bold text-white text-center">50% OFF Your Subscription!</h2>
|
|
</div>
|
|
<div class="container text-center">
|
|
<p class="text-white font-bold text-xl">
|
|
Use Promo Code: <span class="font-extrabold text-[#FFF374]">SUMMER50</span>
|
|
</p>
|
|
<div class="grid grid-flow-col gap-5 text-[#FFF374] font-bold text-center m-auto auto-cols-max justify-center mt-6">
|
|
<div class="flex flex-col text-xs">
|
|
<span class="countdown font-mono text-xl sm:text-2xl">
|
|
<span style="--value:{days};"></span>
|
|
</span>
|
|
days
|
|
</div>
|
|
<div class="flex flex-col text-xs">
|
|
<span class="countdown font-mono text-xl sm:text-2xl">
|
|
<span style="--value:{hours};"></span>
|
|
</span>
|
|
hours
|
|
</div>
|
|
<div class="flex flex-col text-xs">
|
|
<span class="countdown font-mono text-xl sm:text-2xl">
|
|
<span style="--value:{minutes};"></span>
|
|
</span>
|
|
min
|
|
</div>
|
|
<div class="flex flex-col text-xs">
|
|
<span class="countdown font-mono text-xl sm:text-2xl">
|
|
<span style="--value:{seconds};"></span>
|
|
</span>
|
|
sec
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|