"Interfaz simple"
Pure CSS 0.6.2 Snippet by Caro

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.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>Prueba de interfaz con Bootstrap</title> <!-- Enlace a Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: black; font-family: 'Arial Narrow Bold', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; } .container-custom { background-color: midnightblue; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); width: 400px; text-align: center; color: white; } .indicator { display: inline-block; width: 100px; padding: 10px; margin: 5px; background-color: #f0f0f0; border-radius: 5px; } .indicator-true { background-color: darkgreen; color: honeydew; } .indicator-false { background-color: darkred; color: honeydew; } .numeric-value { font-size: 20px; padding: 10px; margin: 5px; background-color: white; color: black; border-radius: 5px; } </style> </head> <body> <div class="container container-custom"> <!-- Botones Booleanos --> <div class="section mb-4"> <h3>Seleccione Opción</h3> <button class="btn btn-primary" onclick="toggleBoolean(1)">Opción A</button> <button class="btn btn-primary" onclick="toggleBoolean(2)">Opción B</button> <button class="btn btn-primary" onclick="toggleBoolean(3)">Opción C</button> </div> <!-- Indicadores Booleanos --> <div class="section mb-4"> <h3>Opción seleccionada</h3> <div id="indicator1" class="indicator indicator-false">Falso</div> <div id="indicator2" class="indicator indicator-false">Falso</div> <div id="indicator3" class="indicator indicator-false">Falso</div> </div> <!-- Controles Numéricos --> <div class="section mb-4"> <h3>Coloque valor numérico</h3> <input type="number" class="form-control mb-2" id="control1" value="0"> <input type="number" class="form-control mb-2" id="control2" value="0"> <input type="number" class="form-control mb-2" id="control3" value="0"> </div> <!-- Indicadores Numéricos --> <div class="section"> <h3>Valor Numérico</h3> <div id="numeric1" class="numeric-value">0</div> <div id="numeric2" class="numeric-value">0</div> <div id="numeric3" class="numeric-value">0</div> </div> </div> <!-- Enlace a Bootstrap JS y dependencias --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> let booleanStates = [false, false, false]; function toggleBoolean(buttonNumber) { booleanStates[buttonNumber - 1] = !booleanStates[buttonNumber - 1]; updateBooleanIndicators(); } function updateBooleanIndicators() { for (let i = 1; i <= 3; i++) { const indicator = document.getElementById(`indicator${i}`); if (booleanStates[i - 1]) { indicator.classList.remove('indicator-false'); indicator.classList.add('indicator-true'); indicator.textContent = 'Verdadero'; } else { indicator.classList.remove('indicator-true'); indicator.classList.add('indicator-false'); indicator.textContent = 'Falso'; } } } document.getElementById('control1').addEventListener('input', function() { document.getElementById('numeric1').textContent = this.value; }); document.getElementById('control2').addEventListener('input', function() { document.getElementById('numeric2').textContent = this.value; }); document.getElementById('control3').addEventListener('input', function() { document.getElementById('numeric3').textContent = this.value; }); </script> </body> </html>

Related: See More

Material Kit PRO React

Questions / Comments: