Dynamic-Dragon-Eye-Menu-1

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Wyrm's Gaze (Centered)</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    
    <!-- ============================================= -->
    <!-- =============== CSS STYLES ================== -->
    <!-- ============================================= -->
    <style>
        :root {
            --dragon-red: #660000;
            --ember-orange: #CC5500;
            --lava-yellow: #FFD700;
            --smoke-grey: #2F4F4F;
            --ash-black: #0A0A0A;
            --sclera-color: #E0C09A; /* A more realistic off-white */
            --iris-color: #B87333; /* A metallic copper/bronze */
            --menu-radius: 140px;
        }

        body {
            margin: 0;
            font-family: 'Cinzel', serif;
            background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" style="font-size: 20px;"><text y="20">🔥</text></svg>'), auto;
        }

        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');

        .menu-wrapper {
            position: relative;
            width: 150px;
            height: 150px;
            filter: drop-shadow(0 0 25px rgba(204, 85, 0, 0.4));
        }

        /* --- The Hyper-Realistic Wyrm's Eye --- */
        .central-button {
            position: relative;
            z-index: 20;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: var(--sclera-color);
            border: 8px solid...