Site Builder

Editing: eye2.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Download Promptinator</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom, #333, #111);
      color: #fff;
      font-family: sans-serif;
    }
    .eye-container {
      position: relative;
      width: 300px;
      height: 300px;
      margin-bottom: 20px;
    }
    .metallic-surround {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff, #aaa 50%, #666 100%);
      box-shadow:
        inset 0 0 30px rgba(0,0,0,0.7),
        0 0 30px rgba(0,0,0,0.7);
    }
    .iris {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, #ff0000, #cc0000);
      box-shadow: 0 0 30px 10px #ff0000;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 30px 10px #ff0000; }
      50% { box-shadow: 0 0 50px 20px #ff0000; }
      100% { box-shadow: 0 0 30px 10px #ff0000; }
    }
    .pupil {
      position: absolute;
      width: 50px;
      height: 50px;
      background: black;
      border-radius: 50%;
      top: 75px;
      left: 75px;
      transform: translate(0, 0);
    }
    .download-link a {
      color: #fff;
      font-size: 1.2rem;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 0.5em 1em;
      background: #ff0000;
      border-radius: 4px;
      transition: background 0.3s;
    }
    .download-link a:hover {
      background: #cc0000;
    }
  </style>
</head>
<body>
  <svg width="100%" height="100%" style="position: absolute; top: 0; left: 0; opacity: 0.2; z-index: -1;">
    <path d="M150,100 Q200,50 250,100" stroke="#888" fill="none" />
    <path d="M200,150 Q200,170 200,190" stroke="#888" fill="none" />
    <path d="M180,200 Q200,220 220,200" stroke="#888" fill="none" />
  </svg>
  <div class="eye-container">
    <div class="metallic-surround">
      <div class="iris">
        <div class="pupil"></div>
      </div>
    </div>
  </div>
  <div class="download-link">
    <a href="Promptinator.zip" download>Download Promptinator</a>
  </div>
  <script>
    const iris = document.querySelector('.iris');
    const pupil = document.querySelector('.pupil');
    document.addEventListener('mousemove', (e) => {
      const irisRect = iris.getBoundingClientRect();
      const irisCenterX = irisRect.left + irisRect.width / 2;
      const irisCenterY = irisRect.top + irisRect.height / 2;
      const deltaX = e.clientX - irisCenterX;
      const deltaY = e.clientY - irisCenterY;
      const maxOffset = 20;
      const pupilX = (deltaX / window.innerWidth) * maxOffset;
      const pupilY = (deltaY / window.innerHeight) * maxOffset;
      pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
    });
  </script>
</body>
</html>

Site Builder

Editing: eye2.html

Site Builder