#!/bin/bash

cat <<HEADER
<style>
  header h1, header h2 {
    text-align: left;
    line-break: anywhere;
  }

  header .separator-wrap {
    margin-top: 15px;
  }

  .cursor {
    background-color: var(--primary-fg);
    animation-name: blink-animation;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.83,-0.22, 0.54, 0.55);
  }

  @keyframes blink-animation {
    to {
      opacity: 0;
    }
  }

  .mobile { display: none; }

  @media screen and (max-width: 769px) {
    .mobile { display: block; }
    .desktop { display: none; }
  }
</style>

<script type="text/javascript">
  let mobileText = '$HEADER_TITLE_MOBILE';
  let desktopText = '$HEADER_TITLE';
  let isMobile = window.innerWidth < 769;

  function hideContent() {
    let mainContainer = document.querySelector('main');
    let footer = document.querySelector('footer');
    let headerSeparator = document.querySelector('header > .separator-wrap');
    mainContainer.style.opacity = '0';
    footer.style.opacity = '0';
    headerSeparator.style.opacity = '0';
  }

  function showContent() {
    let mainContainer = document.querySelector('main');
    let footer = document.querySelector('footer');
    let headerSeparator = document.querySelector('header > .separator-wrap');
    mainContainer.style.transition = '500ms';
    mainContainer.style.opacity = '1';
    footer.style.transition = '500ms';
    footer.style.opacity = '1';
    headerSeparator.style.transition = '500ms';
    headerSeparator.style.opacity = '1';

  }

  function typingAnimation(el, text, index, cb) {
    let char = text[index];
    if (char == ';') {
      el.innerHTML += '<br />';
    } else if (char == ' ') {
      el.innerHTML += '&ensp;';
    } else {
      el.innerText += char;
    }
    
    if (index < text.length - 1) {
      setTimeout(() => typingAnimation(el, text, index + 1, cb), 30);
    } else {
      cb();
    }
  }

  document.addEventListener('DOMContentLoaded', function(event) {
    hideContent();
    let titleMobile = document.querySelector("#header-title-mobile > .text");
    let titleDesktop = document.querySelector('#header-title > .text');

    if (isMobile) {
      titleMobile.innerHTML = '';
    } else {
      titleDesktop.innerHTML = '';
    }

    setTimeout(() => {
      if (isMobile) {
        typingAnimation(titleMobile, mobileText, 0, showContent);
      } else {
        typingAnimation(titleDesktop, desktopText, 0, showContent);
      }
    }, 200);
  });
</script>

<header>
  <h1 id="header-title" class="desktop">$ <span class="text">echo "Jefferson Julio" >> ./programadores</span><span class="cursor">&ensp;</span></h1>
  <h1 id="header-title-mobile" class="mobile">$ <span class="text">echo "Jefferson Julio" \\<br/> >> ./programadores</span><span class="cursor">&ensp;</span></h1>
  <div class="separator-wrap"><div class="separator"></div></div>
</header>
HEADER