OSI Model Explorer
INTERACTIVE 7-LAYER VISUALIZATION

body {
  background: linear-gradient(135deg, #1e3a8a, #1e1e1e);
  overflow-x: hidden;
}

/* Staggered slide-in entrance for each layer */
.layer {
  transition: all 0.3s ease;
  transform: translateX(-100%);
  animation: slideIn 0.5s ease forwards;
  animation-delay: calc(var(--index) * 0.1s);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.layer:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(255, 255, 255, 0.2);
}

/* Description box fade-in */
#description {
  transition: all 0.5s ease;
  opacity: 0;
  transform: translateY(20px);
}

#description.show {
  opacity: 1;
  transform: translateY(0);
}

/* Slide-in from left */
@keyframes slideIn {
  to { transform: translateX(0); }
}

/* Glow animation for selected layer */
.glow {
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
  to   { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
}

// OSI layer descriptions
const descriptions = {
  7: "Application Layer (Layer 7): Interfaces directly with end-user applications, enabling services like HTTP, FTP, DNS, and SMTP for seamless user communication.",
  6: "Presentation Layer (Layer 6): Translates, encrypts, and compresses data to ensure compatibility and security between systems (e.g., SSL/TLS, JPEG, ASCII encoding).",
  5: "Session Layer (Layer 5): Manages sessions by establishing, maintaining, and terminating connections between applications for reliable data exchange.",
  4: "Transport Layer (Layer 4): Ensures reliable end-to-end data delivery with error correction, flow control, and segmentation (e.g., TCP, UDP).",
  3: "Network Layer (Layer 3): Routes and forwards data packets across networks, handling logical IP addressing and path selection (e.g., IP protocol, routers).",
  2: "Data Link Layer (Layer 2): Ensures error-free data transfer over the physical medium, managing MAC addressing and protocols like Ethernet and switches.",
  1: "Physical Layer (Layer 1): Transmits raw bits over physical mediums like copper cables, fiber optics, and radio waves — defines hardware electrical and mechanical specs."
};

const layers = document.querySelectorAll('.layer');
const descriptionBox = document.getElementById('description');

// Add click listener to each layer
layers.forEach(layer => {
  layer.addEventListener('click', () => {
    const layerNum = layer.getAttribute('data-layer');

    // Update description text
    descriptionBox.textContent = descriptions[layerNum];

    // Trigger fade-in animation by forcing reflow
    descriptionBox.classList.remove('show');
    void descriptionBox.offsetWidth; // reflow
    descriptionBox.classList.add('show');

    // Remove glow from all layers, add to clicked
    layers.forEach(l => l.classList.remove('glow'));
    layer.classList.add('glow');
  });
});