Untitled

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #161616;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

    #lights {
      width: 100%;
      height: 50vh;
      background-color: transparent;
    }

    .light {
      width: 10px;
      height: 100%;
      position: absolute;
      bottom: 0;
      animation: lightEffect 4s infinite ease-in-out;
      transform-origin: bottom center;
    }

    @keyframes lightEffect {
      0% {
        height: 100%;
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.4);
        transform: scaleY(1);
      }
      50% {
        height: 50%;
        opacity: 0.7;
        background-color: rgba(0, 255, 255, 0.4);
        transform: scaleY(0.5);
      }
      100% {
        height: 100%;
        opacity: 1;
        background-color: rgba(255, 0, 255, 0.4);
        transform: scaleY(1);
      }
    }

    .box {
      width: 40px;
      height: 40px;
      margin: 5px;
      background-color: rgba(255, 255, 255, 0.7);
      animation: colorChange 3s infinite;
    }

    @keyframes colorChange {
      0% {
        background-color: rgba(255, 255, 255, 0.7);
      }
      50% {
        background-color: rgba(0, 255, 0, 0.7);
      }
      100% {
        background-color: rgba(255, 0, 0, 0.7);
      }
    }
  </style>
</head>
<body>
  <div id="lights"></div>

  <div id="grid-container"></div>

  <script>
    const gridContainer = document.getElementById('grid-container');
    const numColumns = 10;
    const numRows = 5;

    for (let i = 0; i < numRows; i++) {
      const gridRow = document.createElement('div');
      gridRow.classList.add('grid-row');
      
      for (let j = 0; j < numColumns; j++) {
        const box = document.createElement('div');
        box.classList.add('box');
        gridRow.appendChild(box);
      }
      
      gridContainer.appendChild(gridRow);
    }

    const boxes = document.querySelectorAll('.box');

    setInterval(() => {
      boxes.forEach(box => {
        box.style.backgroundColor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`;
      });
    }, 3000);
  </script>
</body>
</html>
Editor is loading...