Fire Alarm System

Fire Alarm System Monitoring

System: Normal

body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; } .container { max-width: 900px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; margin-bottom: 20px; } .control-panel { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } #resetBtn { background-color: #f44336; } #resetBtn:hover { background-color: #d32f2f; } .status { padding: 10px 20px; background-color: #e0e0e0; border-radius: 5px; font-weight: bold; } #alarmSystem { display: block; margin: 0 auto; background-color: white; border: 1px solid #ddd; border-radius: 5px; } .alarm-active { animation: alarmFlash 0.5s infinite alternate; } @keyframes alarmFlash { from { opacity: 1; } to { opacity: 0.5; } } document.addEventListener('DOMContentLoaded', () => { const testBtn = document.getElementById('testBtn'); const resetBtn = document.getElementById('resetBtn'); const systemStatus = document.getElementById('systemStatus'); const alarms = [ document.getElementById('alarm1'), document.getElementById('alarm2'), document.getElementById('alarm3'), document.getElementById('alarm4') ]; const extinguishers = [ document.getElementById('extinguisher1'), document.getElementById('extinguisher2') ]; const sprinklers = [ document.getElementById('sprinkler1'), document.getElementById('sprinkler2'), document.getElementById('sprinkler3'), document.getElementById('sprinkler4') ]; const fires = [ document.getElementById('fire1'), document.getElementById('fire2'), document.getElementById('fire3'), document.getElementById('fire4') ]; let alarmActive = false; // Test system functionality testBtn.addEventListener('click', () => { if (alarmActive) return; // Activate all alarms activateAlarm(0); setTimeout(() => activateAlarm(1), 500); setTimeout(() => activateAlarm(2), 1000); setTimeout(() => activateAlarm(3), 1500); systemStatus.textContent = "System: TESTING"; systemStatus.style.backgroundColor = "#ffeb3b"; }); // Reset system resetBtn.addEventListener('click', () => { resetSystem(); }); // Simulate fire detection function activateAlarm(zone) { alarmActive = true; // Activate alarm alarms[zone].querySelector('circle:last-child').setAttribute('fill', '#f00'); alarms[zone].setAttribute('filter', 'url(#alarmGlow)'); alarms[zone].classList.add('alarm-active'); // Activate sprinkler sprinklers[zone].querySelector('circle:last-child').setAttribute('fill', '#00f'); sprinklers[zone].setAttribute('filter', 'url(#alarmGlow)'); // Show fire fires[zone].removeAttribute('display'); systemStatus.textContent = `System: ALARM (Zone ${zone + 1})`; systemStatus.style.backgroundColor = "#f44336"; } function resetSystem() { alarmActive = false; // Reset alarms alarms.forEach(alarm => { alarm.querySelector('circle:last-child').setAttribute('fill', '#f00'); alarm.removeAttribute('filter'); alarm.classList.remove('alarm-active'); }); // Reset sprinklers sprinklers.forEach(sprinkler => { sprinkler.querySelector('circle:last-child').setAttribute('fill', '#00f'); sprinkler.removeAttribute('filter'); }); // Hide fires fires.forEach(fire => { fire.setAttribute('display', 'none'); }); systemStatus.textContent = "System: Normal"; systemStatus.style.backgroundColor = "#e0e0e0"; } // Simulate random fire detection (for demo purposes) setInterval(() => { if (!alarmActive && Math.random() < 0.005) { const randomZone = Math.floor(Math.random() * 4); activateAlarm(randomZone); } }, 1000); });