<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>System Breach - Glitch Effect</title>
</head>
<body>
  <div id="root">
    <div class="min-h-screen bg-black text-green-500 flex items-center justify-center p-4">
      <div class="max-w-2xl w-full">
        <div class="text-center mb-8">
          <h1 class="text-6xl font-bold mb-4 glitch-text" data-text="SYSTEM::BREACH">
            SYSTEM::BREACH
          </h1>
          <p class="text-xl text-green-400 typing-text">Initializing security protocols...</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8" id="status-cards">
          <!-- Cards will be inserted here by JavaScript -->
        </div>

        <div class="text-center">
          <button class="bg-green-500 text-black px-8 py-3 rounded-lg font-bold hover:bg-green-400 transition-colors duration-300 glitch-button">
            INITIALIZE SEQUENCE
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Add Lucide Icons via CDN -->
  <script src="https://unpkg.com/lucide@latest"></script>
</body>
</html>
/* Tailwind CDN classes */
.min-h-screen { min-height: 100vh; }
.bg-black { background-color: #000; }
.text-green-500 { color: #10B981; }
.text-green-400 { color: #34D399; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.p-4 { padding: 1rem; }
.max-w-2xl { max-width: 42rem; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.mb-8 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-bold { font-weight: 700; }
.grid { display: grid; }
.gap-6 { gap: 1.5rem; }
.p-6 { padding: 1.5rem; }
.rounded-lg { border-radius: 0.5rem; }
.border { border-width: 1px; }
.border-green-500 { border-color: #10B981; }
.bg-green-500 { background-color: #10B981; }
.text-black { color: #000; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.cursor-pointer { cursor: pointer; }
.transition-all { transition-property: all; }
.transition-colors { transition-property: color, background-color, border-color; }
.duration-300 { transition-duration: 300ms; }

@media (min-width: 768px) {
  .md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Custom animations */
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

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

.typing-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  width: 0;
  animation: typing 3s steps(40) forwards;
}

@media (prefers-reduced-motion: no-preference) {
  .glitch-text {
    position: relative;
    animation: glitch 500ms infinite;
  }

  .glitch-text::before,
  .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 #ff00ff;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch 3s infinite linear alternate-reverse;
  }

  .glitch-text::after {
    left: -2px;
    text-shadow: -2px 0 #00ff00;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch 2s infinite linear alternate-reverse;
  }

  .glitch-card:hover {
    animation: glitch 200ms infinite;
  }

  .glitch-button:hover {
    animation: glitch 100ms infinite;
  }
}

/* Card styles */
.status-card {
  border: 1px solid #10B981;
  padding: 1.5rem;
  border-radius: 0.5rem;
  transition: all 300ms;
  cursor: pointer;
}

.status-card:hover {
  background-color: rgba(16, 185, 129, 0.1);
}

.status-card svg {
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glitch-text,
  .glitch-card:hover,
  .glitch-button:hover {
    animation: none;
  }
  
  .typing-text {
    animation: none;
    width: 100%;
  }
  
  .glitch-text::before,
  .glitch-text::after {
    display: none;
  }
}
// Initialize Lucide icons
lucide.createIcons();

// Status card data
const statusCards = [
  { icon: 'terminal', title: "Terminal Access", desc: "Connected to mainframe" },
  { icon: 'shield', title: "Security Status", desc: "Breach detected" },
  { icon: 'zap', title: "System Power", desc: "87% capacity" }
];

// Create status cards
const statusCardsContainer = document.getElementById('status-cards');

statusCards.forEach(card => {
  const cardElement = document.createElement('div');
  cardElement.className = 'status-card glitch-card';
  
  cardElement.innerHTML = `
    <i data-lucide="${card.icon}"></i>
    <h2 class="text-xl font-bold mb-2">${card.title}</h2>
    <p class="text-green-400">${card.desc}</p>
  `;
  
  statusCardsContainer.appendChild(cardElement);
});

// Re-initialize icons after adding cards
lucide.createIcons();

// Add hover effects
const cards = document.querySelectorAll('.status-card');
cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.transform = 'scale(1.02)';
  });
  
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'scale(1)';
  });
});

// Initialize button functionality
const initButton = document.querySelector('.glitch-button');
initButton.addEventListener('click', () => {
  // Add glitch effect on click
  initButton.style.animation = 'glitch 100ms infinite';
  
  setTimeout(() => {
    initButton.style.animation = '';
  }, 500);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.