"Untitled"
Bootstrap 4.1.1 Snippet by Victor84

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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interfaz de Usuario</title> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <style> .indicator-boolean, .indicator-num { font-weight: bold; margin-left: 10px; } </style> </head> <body> <div class="container mt-5"> <h2 class="text-center">Interfaz de Usuario</h2> <div class="row"> <!-- Botones Booleanos --> <div class="col-md-4"> <h4>Botones Booleanos</h4> <button id="btnBoolean1" class="btn btn-danger btn-block" onclick="toggleBoolean(1)">Botón Booleano 1</button> <button id="btnBoolean2" class="btn btn-danger btn-block mt-3" onclick="toggleBoolean(2)">Botón Booleano 2</button> <button id="btnBoolean3" class="btn btn-danger btn-block mt-3" onclick="toggleBoolean(3)">Botón Booleano 3</button> </div> <!-- Indicadores Booleanos --> <div class="col-md-4"> <h4>Indicadores Booleanos</h4> <p>Indicador 1: <span id="indBoolean1" class="indicator-boolean text-danger">Apagado</span></p> <p>Indicador 2: <span id="indBoolean2" class="indicator-boolean text-danger">Apagado</span></p> <p>Indicador 3: <span id="indBoolean3" class="indicator-boolean text-danger">Apagado</span></p> </div> <!-- Controles Numéricos --> <div class="col-md-4"> <h4>Controles Numéricos</h4> <input type="number" id="controlNum1" class="form-control" value="0" onchange="updateNumericIndicator(1)"> <input type="number" id="controlNum2" class="form-control mt-3" value="0" onchange="updateNumericIndicator(2)"> <input type="number" id="controlNum3" class="form-control mt-3" value="0" onchange="updateNumericIndicator(3)"> </div> </div> <div class="row mt-5"> <!-- Indicadores Numéricos a la derecha --> <div class="col-md-4 offset-md-8"> <h4>Indicadores Numéricos</h4> <p>Indicador Numérico 1: <span id="indNum1" class="indicator-num">0</span></p> <p>Indicador Numérico 2: <span id="indNum2" class="indicator-num">0</span></p> <p>Indicador Numérico 3: <span id="indNum3" class="indicator-num">0</span></p> </div> </div> </div> <!-- Bootstrap JS and dependencies --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> // Función para alternar los botones booleanos function toggleBoolean(id) { const button = document.getElementById(`btnBoolean${id}`); const indicator = document.getElementById(`indBoolean${id}`); if (button.classList.contains('btn-danger')) { button.classList.remove('btn-danger'); button.classList.add('btn-success'); indicator.textContent = 'Encendido'; indicator.classList.remove('text-danger'); indicator.classList.add('text-success'); } else { button.classList.remove('btn-success'); button.classList.add('btn-danger'); indicator.textContent = 'Apagado'; indicator.classList.remove('text-success'); indicator.classList.add('text-danger'); } } // Función para actualizar los indicadores numéricos function updateNumericIndicator(id) { const control = document.getElementById(`controlNum${id}`).value; const indicator = document.getElementById(`indNum${id}`); indicator.textContent = control; } </script> </body> </html>

Related: See More

Material Dashboard Dark Edition

Questions / Comments: