<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>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interfaz de Usuario</title>
</head>
<body>
<h1>Interfaz de Usuario</h1>
<div>
<button onclick="toggleButton(1)">Botón 1</button>
<button onclick="toggleButton(2)">Botón 2</button>
<button onclick="toggleButton(3)">Botón 3</button>
</div>
<h2>Indicadores Booleanos</h2>
<p>Estado 1: <span id="indicator1">✖</span></p>
<p>Estado 2: <span id="indicator2">✖</span></p>
<p>Estado 3: <span id="indicator3">✖</span></p>
<h2>Controles Numéricos</h2>
<input type="number" id="control1">
<input type="number" id="control2">
<input type="number" id="control3">
<h2>Indicadores Numéricos</h2>
<p>Resultado 1: <span id="result1">0</span></p>
<p>Resultado 2: <span id="result2">0</span></p>
<p>Resultado 3: <span id="result3">0</span></p>
<script>
