Embed

<html><head><base href="https://www.accessdenied.com">
<meta charset="UTF-8">
<title>Access Denied</title>
<style>
:root {
  --glitch-color1: #ff0000;
  --glitch-color2: #0000ff;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: 'Courier New', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.container {
  text-align: center;
}

.glitch {
  font-size: 4em;
  font-weight: bold;
  position: relative;
  text-shadow: 0.05em 0 0 var(--glitch-color1), 
              -0.05em -0.025em 0 var(--glitch-color2);
  animation: glitch 1s infinite;
}

.warning {
  margin-top: 2em;
  font-size: 1.2em;
  opacity: 0;
  animation: fadeIn 2s forwards;
  animation-delay: 1s;
}

.terminal {
  margin-top: 2em;
  padding: 1em;
  background: rgba(0,0,0,0.8);
  border: 1px solid #333;
  width: 80%;
  max-width: 600px;
  margin: 2em auto;
}

.terminal-text {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  animation: typing 3.5s steps(40, end);
}

.cursor {
  display: inline-block;
  width: 10px;
  height: 20px;
  background: #fff;
  margin-left: 5px;
  animation: blink 1s infinite;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 var(--glitch-color1), 
                -0.05em -0.025em 0 var(--glitch-color2);
  }
  25% {
    text-shadow: -0.05em -0.025em 0 var(--glitch-color1), 
                0.025em 0.025em 0 var(--glitch-color2);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 var(--glitch-color1), 
                0 -0.05em 0 var(--glitch-color2);
  }
  75% {
    text-shadow: -0.05em -0.05em 0 var(--glitch-color1), 
                0.025em 0.025em 0 var(--glitch-color2);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { opacity: 0 }
}

#matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>
</head>
<body>
<canvas id="matrix-canvas"></canvas>
<div class="container">
  <div class="glitch">ACCESS DENIED</div>
  <div class="warning">UNAUTHORIZED ACCESS DETECTED</div>
  <div class="terminal">
    <p class="terminal-text">Initiating trace... Connection terminated.</p>
    <div class="cursor"></div>
  </div>
</div>

<script>
const canvas = document.getElementById('matrix-canvas');
const ctx = canvas.getContext('2d');

// Set canvas size to window size
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// Matrix rain effect
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()';
const fontSize = 14;
const columns = canvas.width/fontSize;
const drops = Array(Math.floor(columns)).fill(1);

function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = '#0F0';
    ctx.font = fontSize + 'px monospace';
    
    for(let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
        
        if(drops[i] * fontSize > canvas.height && Math.random() > 0.975)
            drops[i] = 0;
            
        drops[i]++;
    }
}

setInterval(draw, 33);

// Add glitch effect periodically
setInterval(() => {
    const glitch = document.querySelector('.glitch');
    glitch.style.setProperty('--glitch-color1', `rgb(${Math.random()*255},0,0)`);
    glitch.style.setProperty('--glitch-color2', `rgb(0,0,${Math.random()*255})`);
}, 2000);

// Simulate typing effect
const terminalText = document.querySelector('.terminal-text');
let currentText = terminalText.textContent;
terminalText.textContent = '';
let charIndex = 0;

function typeText() {
    if(charIndex < currentText.length) {
        terminalText.textContent += currentText.charAt(charIndex);
        charIndex++;
        setTimeout(typeText, 50);
    }
}

setTimeout(typeText, 1000);
</script>
</body></html>