script.js

// Main script for interactive elements
document.addEventListener('DOMContentLoaded', function() {
    // Simulate alarm status for demo purposes
    const alarmDemoBtn = document.createElement('button');
    alarmDemoBtn.className = 'fixed bottom-4 right-4 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full shadow-lg flex items-center';
    alarmDemoBtn.innerHTML = '<i data-feather="alert-triangle" class="mr-2"></i> Demo Alarm';
    
    alarmDemoBtn.addEventListener('click', function() {
        const alarmBox = document.createElement('div');
        alarmBox.className = 'fixed inset-0 bg-red-500 bg-opacity-90 flex items-center justify-center z-50 alarm-active';
        alarmBox.innerHTML = `
            <div class="bg-white p-8 rounded-xl max-w-md text-center">
                <i data-feather="alert-octagon" class="w-16 h-16 text-red-500 mx-auto mb-4"></i>
                <h2 class="text-3xl font-bold text-red-600 mb-2">FIRE ALARM</h2>
                <p class="text-gray-700 mb-6">This is a simulation of the fire alarm activation. The system would now be sounding the alarm bell.</p>
                <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg mr-2">Silence</button>
                <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg">Reset System</button>
            </div>
        `;
        
        document.body.appendChild(alarmBox);
        feather.replace();
        
        // Add event listeners to demo buttons
        alarmBox.querySelector('button:first-child').addEventListener('click', () => {
            alarmBox.querySelector('h2').textContent = 'ALARM SILENCED';
            alarmBox.classList.remove('alarm-active');
        });
        
        alarmBox.querySelector('button:last-child').addEventListener('click', () => {
            document.body.removeChild(alarmBox);
        });
    });
    
    document.body.appendChild(alarmDemoBtn);
    feather.replace();
});