text: let slide_content = document.querySelector('#slide-content')
  
  let signin_form = document.querySelector('#signin-form')
  
  let signin_btn = document.querySelector('#signin-btn')
  
  let darkmode_toggle = document.querySelector('#darkmode-toggle')
  
  let slide_index = 0
  
  slide = () => {
      let slide_items = slide_content.querySelectorAll('img')
      slide_items.forEach(e => e.classList.remove('active'))
      slide_index = slide_index + 1 === slide_items.length ? 0 : slide_index + 1
      slide_items[slide_index].classList.add('active')
  }
  
  setInterval(slide, 2000)
  
  // animate input
  document.querySelectorAll('.animate-input').forEach(e => {
      let input = e.querySelector('input')
      let button = e.querySelector('button')
      input.onkeyup = () => {
          if (input.value.length > 0) {
              e.classList.add('active')
          } else {
              e.classList.remove('active')
          }
  
      }
  
      // show password button
      if (button) {
          button.onclick = () => {
              if (input.getAttribute('type') === 'text') {
                  input.setAttribute('type', 'password')
                  button.innerHTML = 'Show'
              } else {
                  input.setAttribute('type', 'text')
                  button.innerHTML = 'Hide'
              }
          }
      }
  })
  
  checkSigninInput = () => {
      let inputs = signin_form.querySelectorAll('input')
      return Array.from(inputs).every(input => {
          return input.value.trim().length >= 6
      })
  }
  
  // darkmode toggle
  darkmode_toggle.onclick = (e) => {
      e.preventDefault()
      let body = document.querySelector('body')
      body.classList.toggle('dark')
      darkmode_toggle.innerHTML = body.classList.contains('dark') ? 'Lightmode' : 'Darkmode'
  }
  // var pas = document.getElementById('password');
  // pas.oninvalid = function(event) {
  //     event.target.setCustomValidity('PassWord Phải Lớn Hơn 6 Ký Tự Và Không Chứa Các Ký Tự Đặc Biệt');
  
  