AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add discount component

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-28 13:32:22 +02:00
parent ea4be97bc0
commit 68163cd7c9
2 changed files with 90 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/lib/components/Discount.svelte Normal file
View File

@ -0,0 +1,82 @@
<script lang='ts'>
import { onMount } from 'svelte';
let targetDate = new Date("2024-07-03");
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));
};
onMount(async () => {
const interval = setInterval(updateTime, 1000);
return () => {
clearInterval(interval);
};
});
</script>
<div class="lg:max-w-md w-full bg-primary p-4 rounded-none sm:rounded-lg shadow-md m-auto">
<div class="container bg-primary p-4 mt-4">
<h2 class="text-2xl font-bold text-white">75% OFF Your Annual Subscription!</h2>
</div>
<div class="container ">
<p class="text-white font-bold text-xl">
Use Promo Code: <span class="font-extrabold text-[#FFF374]">SUMMER75</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>

16
src/routes/+page.svelte
View File

@ -1,8 +1,6 @@
<script lang='ts'>
<script lang='ts'>
import { userRegion, numberOfUnreadNotification} from '$lib/store';
import Discount from '$lib/components/Discount.svelte';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
@ -22,8 +20,6 @@
const frontendStars = data?.getFrontendStars;
const backendStars = data?.getBackendStars;
</script>
@ -124,15 +120,19 @@
</div>
</div>
<Discount />
</div>
</div>
<!-- End Column -->
<h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold sm:mt-10">
<h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold mt-10">
Explore High Quality Datasets
</h1>
<div class="overlay m-auto flex justify-center items-center w-fit sm:w-[820px] h-full">