<!DOCTYPE html>
<html>
<head>
    <title>Secret Key</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
            font-family: Arial, sans-serif;
            color: #fff;
        }

        .secret-button {
            padding: 15px 30px;
            font-size: 18px;
            cursor: pointer;
            background: #4CAF50;
            border: none;
            border-radius: 5px;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .secret-button:hover {
            transform: scale(1.05);
            background: #45a049;
        }

        .message {
            font-size: 24px;
            margin-top: 20px;
            opacity: 0;
            transition: opacity 0.5s ease;
            text-align: center;
            max-width: 80%;
        }

        .show {
            opacity: 1;
        }

        .troll-face {
            font-size: 50px;
            margin-top: 20px;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
    </style>
</head>
<body>
    <button class="secret-button" onclick="revealMessage()">Click for the key</button>
    <div id="message" class="message"></div>
    <div id="trollFace" class="troll-face">😜</div>

    <script>
        function revealMessage() {
            const messages = [
                "Hah! You thought you were clever... nice try bypassing!",
                "Better luck next time, hacker... nice try bypassing!",
                "The key has left the building... nice try bypassing!",
                "404: Key not found... nice try bypassing!",
                "You'll need more than that to get this key... nice try bypassing!"
            ];
            
            const messageElement = document.getElementById('message');
            const trollFace = document.getElementById('trollFace');
            const randomMessage = messages[Math.floor(Math.random() * messages.length)];
            
            messageElement.textContent = randomMessage;
            messageElement.classList.add('show');
            trollFace.classList.add('show');
            
            const button = document.querySelector('.secret-button');
            button.style.transform = 'scale(0.95)';
            setTimeout(() => button.style.transform = 'scale(1)', 200);
        }
    </script>
</body>
</html>