index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Web Development Triad</title>
<!-- CSS: Presentation Layer -->
<style>
.trio-card { max-width: 400px; margin: 40px auto; padding: 24px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.08); text-align: center; font-family: system-ui, sans-serif; }
.active-state { background: #ecfdf5; border: 2px solid #10b981; }
.btn-toggle { background: #2563eb; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; margin-top: 15px; }
.btn-toggle:hover { background: #1d4ed8; }
</style>
</head>
<body>
<!-- HTML: Structural Layer -->
<div class="trio-card" id="cardElement">
<h2>Web Development Triad</h2>
<p id="statusText">Current State: Default Mode</p>
<button type="button" class="btn-toggle" id="actionBtn">Toggle Interactive Mode</button>
</div>
<!-- JavaScript: Behavioral Layer -->
<script>
const card = document.getElementById('cardElement');
const text = document.getElementById('statusText');
const btn = document.getElementById('actionBtn');
btn.addEventListener('click', () => {
card.classList.toggle('active-state');
const isActive = card.classList.contains('active-state');
text.textContent = isActive ? 'Current State: Activated via JavaScript!' : 'Current State: Default Mode';
});
</script>
</body>
</html>