123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- import './bootstrap';
-
- import '@fortawesome/fontawesome-free/css/all.min.css';
-
-
-
- const countdownDate = new Date('2024-08-17T11:00:00').getTime();
-
-
- const countdownElement = document.getElementById('countdown');
- const countdownTimer = setInterval(() => {
-
- const now = new Date().getTime();
-
-
- const distance = countdownDate - now;
-
-
- const days = Math.floor(distance / (1000 * 60 * 60 * 24));
- const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
- const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
- const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-
- const countdownHTML = `
- <div class="flex flex-col">
- <div class="flex gap-8 justify-center">
- <div class="font-medium text-gray-500">${days}</div>
- <div class="font-medium text-gray-500">:</div>
- <div class="font-medium text-gray-500">${hours.toString().padStart(2, '0')}</div>
- <div class="font-medium text-gray-500">:</div>
- <div class="font-medium text-gray-500">${minutes.toString().padStart(2, '0')}</div>
- <div class="font-medium text-gray-500">:</div>
- <div class="font-medium text-gray-500">${seconds.toString().padStart(2, '0')}</div>
- </div>
- <div class="flex gap-14 justify-center">
- <div class="font-medium text-gray-600">Hari</div>
- <div class="font-medium text-gray-600">Jam</div>
- <div class="font-medium text-gray-600">Minit</div>
- <div class="font-medium text-gray-600">Saat</div>
- </div>
- </div>
- `;
-
-
- countdownElement.innerHTML = countdownHTML;
-
-
- if (distance < 0) {
- clearInterval(countdownTimer);
- countdownElement.innerHTML = 'Majlis berlangsung';
- }
- }, 1000);
-
- $(function() {
- var partLeftPos = 0;
- var partRightPos = 0;
-
- $(window).scroll(function(event) {
- var distance = $(this).scrollTop() * 2;
- var left = partLeftPos - distance;
- var right = partRightPos - distance;
-
- $('.left').css('left', left + "px");
- $('.right').css('right', right + "px");
-
-
- var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
-
-
- var isLeftOffScreen = leftPartRightEdge <= 0;
-
-
- if (isLeftOffScreen && left < 0) {
- $('.parent').removeClass(['z-30']);
- } else {
- $('.parent').addClass(['z-30']);
- }
- });
-
-
- $(window).trigger('scroll');
-
- document.addEventListener('DOMContentLoaded', function() {
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- entry.target.classList.add('animate-fadeUp');
- entry.target.classList.remove('opacity-0');
- }
- });
- }, {
- threshold: 0.1
- });
-
- document.querySelectorAll('.fade-up').forEach(element => {
- observer.observe(element);
- });
- });
- });
|