Site Builder

Editing: eye4.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Download Promptinator</title>

/* --------- Animated eye (foreground) --------- */
    .eye-container {
      position: relative;
      width: 300px;
      height: 300px;
      margin-bottom: 20px;
    }
    .metallic-surround {
      position: absolute;
      inset: 0;
      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 0%, #cc0000 70%);
      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;
      top: 75px; left: 75px;
      width: 50px; height: 50px;
      border-radius: 50%;
      background: #000;
      transform: translate(0, 0);
    }

/* --------- Download button --------- */
    .download-link a {
      display: inline-block;
      color: #fff;
      font-size: 1.1rem;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 0.5em 1.2em;
      background: #ff0000;
      border-radius: 4px;
      transition: background 0.3s;
    }
    .download-link a:hover,
    .download-link a:focus {
      background: #cc0000;
      outline: none;
    }
  </style>
</head>

<body>

<svg class="background-eye"
       width="100%" height="100%"
       viewBox="0 0 1000 1000"
       preserveAspectRatio="xMidYMid slice"
       style="position:absolute;top:0;left:0;z-index:-1">

<defs>
      <filter id="eyeBlur" x="-5%" y="-5%" width="110%" height="110%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
      </filter>
    </defs>

<path d="M100,500 L500,300 L900,500 L500,700 Z"
          fill="none"
          stroke="rgba(255,255,255,.15)"
          stroke-width="3"/>

<path d="M180,500 L500,360 L820,500 L500,640 Z"
          fill="none"
          stroke="rgba(255,255,255,.07)"
          stroke-width="2"
          filter="url(#eyeBlur)"/>
  </svg>

<div class="eye-container" aria-hidden="true">
    <div class="metallic-surround">
      <div class="iris">
        <div class="pupil"></div>
      </div>
    </div>
  </div>

<div class="download-link">
    <a href="Promptinator.zip" download aria-label="Download the Promptinator ZIP file">Download Promptinator</a>
  </div>

<script>
    const iris  = document.querySelector('.iris');
    const pupil = document.querySelector('.pupil');

Site Builder

Editing: eye4.html

Site Builder