index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>web-server//port:7878</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .container {
        background-color: white;
        padding: 2rem;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
      }
      h1 {
        color: #333;
        transition: color 0.3s ease;
        cursor: pointer; /* making header clickable */
      }
      h1:hover {
        animation: flicker 2s forwards;
      }
      @keyframes flicker {
        0%, 18%, 22%, 25%, 53%, 57%, 100% {
          filter: drop-shadow(0px 0px 12px rgb(21, 227, 221));
          opacity: 1;
        }
        15%, 20%, 24% {       
          filter: none;
          opacity: .3;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 onclick="searchBinary()">01001000 01000101 01001100 01001100 01001111</h1>
      <p>Web Server Running<span id="dots"></span></p>
    </div>

    <script>
      function searchBinary() {
        const binaryCode = "01001000 01000101 01001100 01001100 01001111";
        const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(binaryCode)}`;
        window.open(searchUrl, '_blank');
      }

      
      function animateDots() {
        const dots = document.getElementById('dots');
        let count = 0;
        setInterval(() => {
          dots.textContent = '.'.repeat(count % 4);
          count++;
        }, 500);
      }

      
      window.onload = animateDots;
    </script>
  </body>
</html>