<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome</title>
  <style>
    /* Full white background */
    body {
      margin: 0;
      padding: 0;
      background-color: white;
      height: 100vh;
      display: flex;
      align-items: center;  /* Vertically center */
      justify-content: center;  /* Horizontally center */
      flex-direction: column;  /* Stack elements vertically */
    }

    /* Text container styling */
    #text {
      font-family: Arial, sans-serif;
      font-size: 2rem;
      font-weight: bold;
      color: black;
      text-align: center; /* Center the text within the container */
      display: flex; /* Flex layout to align letters */
      flex-wrap: wrap; /* Allows word wrapping */
      margin-bottom: 20px; /* Space between text and boxes */
    }

    /* Individual letter styling */
    #text span {
      opacity: 0; /* Hidden by default */
      transition: opacity 0.8s ease-in; /* Slower smooth fade-in for each letter */
    }

    /* Add fade-out transition */
    #text.fade-out {
      transition: opacity 2s ease-in-out; /* Smooth fade-out effect */
      opacity: 0;
    }

    /* Button styling */
    #arrowButton {
      font-size: 1.5rem;
      font-weight: bold;
      color: Black;
      background-color: #ff0000; /* Blue color */
      padding: 15px 30px;
      border-radius: 50px;
      text-decoration: none;
      display: none;
      margin-top: 20px;
      transition: background-color 0.3s ease;
    }

    /* Hover effect for the button */
    #arrowButton:hover {
      background-color: #5599e0;
    }

    /* Arrow icon styling */
    #arrowButton::after {
      content: "→";  /* Right arrow symbol */
      font-size: 2rem;
      margin-left: 10px;
    }

    /* Style for the boxes */
    .box {
      width: 150px;
      height: 150px;
      margin: 10px;
      display: inline-block;
      text-decoration: none;
      border-radius: 10px;
      transition: transform 0.3s ease;
    }

    /* Add hover effect for the boxes */
    .box:hover {
      transform: scale(1.1);
    }

    /* Colors for the boxes */
    #greenBox {
      background-color: #77DD77; /* Pastel Green */
    }

    #blueBox {
      background-color: #77B5FE; /* Pastel Blue */
    }

    #pinkBox {
      background-color: #FFB6C1; /* Pastel Pink */
    }
  </style>
</head>
<body>
  <div id="text"></div>
  <a href="boxesPage.html" id="arrowButton">To Boxes</a> <!-- The button -->
  <div id="boxes" style="display: none;">
    <a href="greenPage.html" class="box" id="greenBox"></a>
    <a href="bluePage.html" class="box" id="blueBox"></a>
    <a href="pinkPage.html" class="box" id="pinkBox"></a>
  </div>

  <script>
    // Define the text to display
    const startMessage = "Hello Alex.....";
    const secondMessage = "Please select one of the three boxes ";

    // Get the text container element
    const textElement = document.getElementById('text');
    const boxesElement = document.getElementById('boxes');
    const arrowButton = document.getElementById('arrowButton');

    // Function to display letters with smooth fade-in and slow down the typing
    function typeWriterEffect(textContent, callback) {
      textContent.split("").forEach((char, index) => {
        const span = document.createElement('span'); // Create a span for each letter

        // Check if the character is a space
        if (char === ' ') {
          span.textContent = '\u00A0'; // Use non-breaking space character
        } else {
          span.textContent = char; // Set the letter
        }

        textElement.appendChild(span); // Add to the container

        // Add fade-in effect with delay
        setTimeout(() => {
          span.style.opacity = 1; // Fade the letter in
        }, index * 200); // Increase delay between letters (200ms instead of 100ms)
      });

      // Trigger fade-out after the full text is displayed
      setTimeout(() => {
        textElement.classList.add('fade-out'); // Add fade-out class
      }, textContent.length * 200 + 1000); // Adjust timing with new letter delay

      // Invoke callback after the fade-out transition of the first message
      setTimeout(callback, textContent.length * 200 + 1000 + 2000); // Wait for fade-out
    }

    // Function to trigger the second message after the first message is done
    function displaySecondMessage() {
      // Clear previous text and fade in the second message
      textElement.textContent = '';
      textElement.classList.remove('fade-out'); // Reset the fade-out class
      typeWriterEffect(secondMessage, displayArrowButton); // Call next function after typing second message
    }

    // Function to display the arrow button after the second message is done
    function displayArrowButton() {
      arrowButton.style.display = 'inline-block'; // Show the "To Boxes" button
    }

    // Start the typewriter effect for the first message
    typeWriterEffect(startMessage, displaySecondMessage);
  </script>
</body>
</html>