"Untitled"
Bootstrap 4.1.1 Snippet by AxelRocha22

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interfaz de Control</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .section { margin-bottom: 20px; } button { margin-right: 10px; } input[type="number"] { width: 50px; margin-right: 10px; } .indicator { display: inline-block; width: 20px; text-align: center; } </style> </head> <body> <h1>Control de Sistema</h1> <div class="section"> <h2>Controles Booleanos</h2> <button id="btnLuz">Activar Luz</button> <button id="btnAhorro">Modo Ahorro Energía</button> <button id="btnAlarma">Alarma de Seguridad</button> </div> <div class="section"> <h2>Indicadores Booleanos</h2> <span>Luz Activada: <span id="indicadorLuz" class="indicator">❌</span></span><br> <span>Ahorro Energía: <span id="indicadorAhorro" class="indicator">❌</span></span><br> <span>Alarma Activada: <span id="indicadorAlarma" class="indicator">❌</span></span> </div> <div class="section"> <h2>Controles Numéricos</h2> <label>Brillo de Luz: <input type="number" id="brillo" min="0" max="100" value="75"></label><br> <label>Temperatura: <input type="number" id="temperatura" min="15" max="30" value="22"> °C</label><br> <label>Tiempo de Funcionamiento: <input type="number" id="tiempo" min="0" max="24" value="12"> horas</label> </div> <div class="section"> <h2>Indicadores Numéricos</h2> <span>Brillo Actual: <span id="brilloActual" class="indicator">75</span></span><br> <span>Temperatura Actual: <span id="temperaturaActual" class="indicator">22</span></span><br> <span>Tiempo Restante: <span id="tiempoRestante" class="indicator">12</span></span> </div> <script> // Funciones para actualizar los indicadores numéricos function updateNumericalIndicators() { document.getElementById('brilloActual').textContent = document.getElementById('brillo').value; document.getElementById('temperaturaActual').textContent = document.getElementById('temperatura').value; document.getElementById('tiempoRestante').textContent = document.getElementById('tiempo').value; } // Eventos de cambio para los controles numéricos document.getElementById('brillo').oninput = updateNumericalIndicators; document.getElementById('temperatura').oninput = updateNumericalIndicators; document.getElementById('tiempo').oninput = updateNumericalIndicators; // Eventos para los botones booleanos document.getElementById('btnLuz').onclick = function() { let indicadorLuz = document.getElementById('indicadorLuz'); indicadorLuz.textContent = indicadorLuz.textContent === '✔️' ? '❌' : '✔️'; }; document.getElementById('btnAhorro').onclick = function() { let indicadorAhorro = document.getElementById('indicadorAhorro'); indicadorAhorro.textContent = indicadorAhorro.textContent === '✔️' ? '❌' : '✔️'; }; document.getElementById('btnAlarma').onclick = function() { let indicadorAlarma = document.getElementById('indicadorAlarma'); indicadorAlarma.textContent = indicadorAlarma.textContent === '✔️' ? '❌' : '✔️'; }; // Inicializa los indicadores numéricos al cargar updateNumericalIndicators(); </script> </body> </html>

Related: See More

Paper Dashboard PRO React

Questions / Comments: