page.js

let currentTime = document.getElementById("current-time");
let timePosition = document.querySelector('.time');
let date = document.getElementById("current-date");
let datePosition = document.querySelector('.date');
let hideButton = document.querySelector('.hide-header-btn');
let showButton = document.querySelector('.show-header-btn');
let header = document.querySelector('.header');
let cloud = document.querySelector('.cloud')

function updateTime(){
  let d = new Date();
  currentTime.innerHTML = d.toLocaleTimeString();
  updateGreeting();
}

function updateDate(){
  let d = new Date();
  date.innerHTML = d.toLocaleDateString();
}

function updateGreeting(){
  const welcomeMessage = document.getElementById('welcome');
  const currentHour = new Date().getHours();

  if (currentHour >= 6 && currentHour < 12){
    welcomeMessage.innerHTML =  "Good morning!";
  } else if  (currentHour >= 12 && currentHour < 18){
    welcomeMessage.innerHTML = "Good afternoon!";
  } else {
    welcomeMessage.innerHTML = "Good night!"
  }
}

function checkOrientation() {
  const warning = document.getElementById('landscape-warning');
  if (window.innerHeight > window.innerWidth) {
    // Device is in portrait mode
    warning.style.display = 'flex'; // Show the warning
  } else {
    // Device is in landscape mode
    warning.style.display = 'none'; // Hide the warning
  }
}

// Check orientation on load and on resize
window.addEventListener('load', checkOrientation);
window.addEventListener('resize', checkOrientation);

updateDate();
updateTime();
setInterval(updateTime,1000);
setInterval(updateDate,1000);

if('ontouchstart' in window){
  hideButton.addEventListener('touchend',function(){
    header.classList.add('hidden');
    hideButton.style.display = 'none';
    showButton.style.display = 'block';
  
    datePosition.style.top = 'calc(50% - 5%)';
    timePosition.style.top = 'calc(50% - 5%)';
    cloud.style.top = 'calc(50% - 5%)';
  });

  showButton.addEventListener('touchend',function(){
    header.classList.remove('hidden');
    hideButton.style.display = 'block';
    showButton.style.display = 'none';
  
    datePosition.style.top = '50%';
    timePosition.style.top = '50%';
    cloud.style.top = '50%';
  });
}else{
  hideButton.addEventListener('click',function(){
    header.classList.add('hidden');
    hideButton.style.display = 'none';
    showButton.style.display = 'block';
  
    datePosition.style.top = 'calc(50% - 10%)';
    timePosition.style.top = 'calc(50% - 10%)';
    cloud.style.top = 'calc(50% - 10%)';
  });
  
  showButton.addEventListener('click',function(){
    header.classList.remove('hidden');
    hideButton.style.display = 'block';
    showButton.style.display = 'none';
  
    datePosition.style.top = '50%';
    timePosition.style.top = '50%';
    cloud.style.top = '50%';
  });
}