Destructive sensor shut down4b

destructive-sensor-shut-down4b.markdown

Destructive sensor shut down4b

A Pen by istockmarket on CodePen.

License.

index.html

<div class="container">
    <div class="header">
        <h1>Live Security Dashboard</h1>
        <p>Real-time monitoring with visual indicators</p>
    </div>

    <div class="security-grid">
        <div class="sensor-section">
            <div class="sensor-card" id="sensor1">
                <h3>Front Door Sensor</h3>
                <p>Status: <span class="protection-status" id="status1"><span class="icon"></span></span></p>
                <div class="level-bar-container"><div class="level-bar" id="bar1"></div></div>
                <button>Check</button>
            </div>
            <div class="sensor-card" id="sensor2">
                <h3>Window Sensor</h3>
                <p>Status: <span class="protection-status" id="status2"><span class="icon"></span></span></p>
                <div class="level-bar-container"><div class="level-bar" id="bar2"></div></div>
                <button>Resolve</button>
            </div>
            <div class="sensor-card" id="sensor3">
                <h3>Garage Sensor</h3>
                <p>Status: <span class="protection-status" id="status3"><span class="icon"></span></span></p>
                <div class="level-bar-container"><div class="level-bar" id="bar3"></div></div>
                <button>Check</button>
            </div>
        </div>

        <div class="protection-panel">
            <h2>Protection Panel</h2>
            <ul class="protection-list">
                <li id="firewall">Firewall Active <span class="protection-status"><span class="icon"></span></span></li>
                <li id="ids">Intrusion Detection <span class="protection-status"><span class="icon"></span></span></li>
                <li id="backup">Backup System <span class="protection-status"><span class="icon"></span></span></li>
                <li id="antivirus">Antivirus <span class="protection-status"><span class="icon"></span></span></li>
            </ul>
        </div>
    </div>
</div>

script.js

const sensors = [
    {card: document.getElementById('sensor1'), status: document.getElementById('status1'), bar: document.getElementById('bar1')},
    {card: document.getElementById('sensor2'), status: document.getElementById('status2'), bar: document.getElementById('bar2')},
    {card: document.getElementById('sensor3'), status: document.getElementById('status3'), bar: document.getElementById('bar3')}
];

const panels = [
    document.getElementById('firewall'),
    document.getElementById('ids'),
    document.getElementById('backup'),
    document.getElementById('antivirus')
];

function randomStatus() {
    sensors.forEach(sensor=>{
        const secure = Math.random()>0.3;
        const level = Math.floor(Math.random()*100)+10;
        sensor.card.classList.remove('protected','compromised','pulse');
        sensor.bar.className='level-bar';
        if(secure){
            sensor.card.classList.add('protected','pulse');
            sensor.status.className='protection-status secure';
            sensor.status.innerHTML='<span class="icon"></span> Secure';
            sensor.bar.classList.add('secure');
        } else {
            sensor.card.classList.add('compromised');
            sensor.status.className='protection-status alert';
            sensor.status.innerHTML='<span class="icon"></span> Alert';
            sensor.bar.classList.add('alert');
        }
        sensor.bar.style.width=level+'%';
    });

    panels.forEach(panel=>{
        const secure=Math.random()>0.3;
        const icon=panel.querySelector('.icon');
        if(secure){
            panel.querySelector('.protection-status').className='protection-status secure';
            icon.style.backgroundColor='#28a745';
            panel.querySelector('.protection-status').innerHTML='<span class="icon"></span> Active';
        }else{
            panel.querySelector('.protection-status').className='protection-status alert';
            icon.style.backgroundColor='#dc3545';
            panel.querySelector('.protection-status').innerHTML='<span class="icon"></span> Breach';
        }
    });
}

randomStatus();
setInterval(randomStatus,5000);

style.css

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    min-height: 100vh;
    margin: 0;
}
.container {
    max-width: 1400px;
    margin: 0 auto;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(15px);
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.header { text-align:center; margin-bottom:30px; padding:20px; background:rgba(255,255,255,0.05); border-radius:15px; }
.security-grid { display:grid; grid-template-columns:2fr 1fr; gap:30px; margin-bottom:30px; }
@media(max-width:900px){.security-grid{grid-template-columns:1fr;}}
.sensor-section { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.sensor-card { background:rgba(255,255,255,0.15); border-radius:15px; padding:20px; border:2px solid rgba(255,255,255,0.2); transition:all 0.3s ease; position:relative; }
.sensor-card.protected { border-color:#28a745; box-shadow:0 0 20px rgba(40,167,69,0.3); }
.sensor-card.compromised { border-color:#dc3545; box-shadow:0 0 20px rgba(220,53,69,0.3); }
.protection-panel { background:rgba(40,167,69,0.1); border:2px solid #28a745; border-radius:15px; padding:20px; height:fit-content; }
.protection-list { list-style:none; padding:0; margin:20px 0; }
.protection-list li { background:rgba(255,255,255,0.1); margin:8px 0; padding:12px 15px; border-radius:8px; border-left:4px solid #28a745; display:flex; align-items:center; justify-content:space-between; transition:all 0.3s ease; }
.protection-list li:hover { background:rgba(255,255,255,0.2); transform:translateX(5px);}
.protection-status { display:flex; align-items:center; gap:10px; font-weight:bold; font-size:0.9rem; }
.protection-status .icon { width:16px; height:16px; border-radius:50%; display:inline-block; }
.protection-status.secure .icon { background-color:#28a745; }
.protection-status.alert .icon { background-color:#dc3545; }
button { padding:10px 20px; background-color:rgba(255,255,255,0.2); border:none; border-radius:12px; color:white; cursor:pointer; transition:all 0.3s ease; font-weight:bold; }
button:hover { background-color:rgba(255,255,255,0.3); transform:translateY(-2px);}
@keyframes pulse {0% {box-shadow:0 0 0 rgba(40,167,69,0.4);} 70% {box-shadow:0 0 20px rgba(40,167,69,0.4);} 100% {box-shadow:0 0 0 rgba(40,167,69,0.4);}}
.sensor-card.protected.pulse { animation:pulse 2s infinite; }
@media(max-width:500px){.protection-list li{flex-direction:column;align-items:flex-start;} button{width:100%;}}

/* Level Bars */
.level-bar-container { background: rgba(255,255,255,0.1); border-radius:10px; width:100%; height:12px; margin-top:10px; overflow:hidden; }
.level-bar { height:100%; border-radius:10px; transition: width 0.5s ease; }
.level-bar.secure { background-color:#28a745; }
.level-bar.alert { background-color:#dc3545; }