Site Builder

Editing: see2.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');

</nav>

/* ------------- FIXED HUD MENU BLOCK ------------- */
.t800-menu{
  position:fixed;           /* stays in top‑right on scroll */
  top:20px; right:20px;
  width:175px;
  background:#000;          /* own black panel */
  padding:10px 8px;
  border:1px solid #600;    /* faint border for definition */
  box-shadow:0 0 10px #d00;
  z-index:9999;
}

/* ----- Menu buttons ----- */
.t800-menu nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.t800-menu a{
  display:block;
  width:40px; height:40px;          /* perfect square */
  background:#ff0000;
  border:1px solid #d00;
  transition:background .2s, box-shadow .2s;
  text-decoration:none;
}
.t800-menu a:hover,
.t800-menu a:focus{
  background:#cc0000;
  box-shadow:0 0 6px #f40;
  outline:none;
}

/* ----- Scrolling / typing diagnostics ----- */
.scan-window{
  height:100px;                 /* fits about six lines */
  overflow:hidden;
  border-top:1px solid #400;
  padding-top:6px;
  line-height:1.1em;
  font-size:12px;
  color:#ff4444;
  background:#000;
  white-space:pre-wrap;
}

/* Optional caret effect (flashing underscore) */
.caret::after{
  content:"_";
  animation:blink 1s steps(2,start) infinite;
}
@keyframes blink{50%{opacity:0}}
</style>
</head>

<body>

<div class="t800-menu" role="navigation" aria-label="Promptinator quick menu">

<div id="scan" class="scan-window"></div>

</div>

const messages = [
  '>> INITIALIZING QUANTUM CORE',
  '>> LOCATING TARGET …',
  '>> TARGET ACQUIRED [ID: P‑N8R]',
  '>> ENGAGING LEXICAL MATRIX',
  '>> COMPILING PROMPT SEQUENCE',
  '>> EXECUTION COMPLETE',
  '>> AWAITING INPUT'
];

let line     = '';      // current line being typed
let msgIndex = 0;       // which message in the array
let charPos  = 0;       // which character within the message

function typeLoop(){
  // If the line is complete, wait briefly then start next one
  if(charPos === messages[msgIndex].length){
    scanEl.textContent += '\n';           // commit line
    msgIndex  = (msgIndex + 1) % messages.length;
    charPos   = 0;
    line      = '';
    // Keep log window to ~6 lines
    const lines = scanEl.textContent.trim().split('\n');
    if(lines.length > 6){
      scanEl.textContent = lines.slice(-6).join('\n') + '\n';
    }
    setTimeout(typeLoop, 500);            // pause before next
    return;
  }

// Add next character
  line += messages[msgIndex][charPos++];
  // Rewrite current display (remove caret, add new line w/ caret)
  const cleaned = scanEl.textContent.replace(/_?$/, ''); // strip old caret
  scanEl.textContent = cleaned + line;
  scanEl.classList.add('caret');

setTimeout(typeLoop, 40);               // typing speed (ms)
}

typeLoop();   // kick it off
</script>
 
</body>
</html>

Site Builder

Editing: see2.html

Site Builder