Dragon-Eye-Menu-3

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon's Eye - Finale Meisterversion</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght_700&display=swap');

body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at center, #1a1a1a, #0a0a0a);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: 'Cinzel', serif;
}

/* === CANVAS FÜR FEUER-PARTIKEL === */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#menu-system {
  position: relative;
  width: 180px;
  height: 180px;
  z-index: 10;
}

/* === AUGEN-BUTTON (Lebendiges System) === */
#eye-button {
  width: 100%;
  height: 100%;
  border: 4px solid #8B0000;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4B0000, #1A0A0A);
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(255, 100, 0, 0.7);
  transition: transform 0.3s ease;
  --pupil-size: 20%;
  --pupil-x: 0px;
  --pupil-y: 0px;
  --pupil-slit: 0.3;
}

#eye-button:hover {
  transform: scale(1.02);
}

/* Iris */
.iris {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFEA00, #FF4500 40%, #8B0000 80%);
  box-shadow: inset 0 0 25px rgba(0,0,0,0.8);
}

/* ELLIPTISCHE PUPILLE (vertikal schlitzförmig) */
.pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pupil-size);
  height: var(--pupil-size);
  background: #000;
  border-radius: calc(50% + var(--pupil-slit) * 0%) / calc(50% + var(--pupil-slit) * 200%);
  transform: translate(calc(-50% + var(--pupil-x)), calc(-50% +...