<!DOCTYPE html>
<html lang="es">
<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jerarquía de operaciones</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- jQuery y Figlet.js -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

     <!-- Custom JS -->
    <script src="script.js"></script>
</head>
  
 <div>
<p style="text-align: center; "><i> 
  <b style="text-align: center; color: orange;">El Tour de Mates</b>:
    la gran carrera de cálculo mental
    </i></p>
<p style="text-align: center; "><a href="https://eltourdemates.wordpress.com/">www.eltourdemates.wordpress.com</a></p>
</div>
<p style="text-align: center; "><h2 style="text-align: center;" class="display-6 mb-6">🚴‍♀️ Jerarquía de operaciones 🚴‍♂️</h2>
  
  <div class="container text-center py-10">
    </div>
<body class="bg-light">
    <div class="container text-center py-5">
        <div class="card mx-auto" style="max-width: 500px;">
            <div class="card-body">
                <h5 class="card-title">Selecciona un nivel</h5>
                <p class="card-text">Elige la dificultad del juego:</p>
                <select id="level" class="form-select mb-3">
                    <option value="29">Jerarquía de operaciones (nivel Tour de Mates)</option>
                  <!--<option value="1">++</option>
                  <option value="2">+-</option>
                  <option value="3">-+</option>
                  <option value="4">--</option>
                  <option value="5">*+</option>
                  <option value="6">+*</option>
                  <option value="7">*-</option>
                  <option value="8">-*</option>
                  <option value="9">:+</option>
                  <option value="10">+:</option>
                  <option value="11">:-</option>
                  <option value="12">-:</option>
                  <option value="13">(+)+</option>
                  <option value="14">(+)-</option>
                  <option value="15">(+)*</option>
                  <option value="16">(-)*</option>
                  <option value="17">+(-)</option>
                  <option value="18">-(-)</option>
                  <option value="19">*(+)</option>
                  <option value="20">*(-)</option>
                  <option value="21">**</option>
                  <option value="22">*:</option>
                  <option value="23">:*</option>
                  <option value="24">::</option> -->
                  <option value="25">Sumas y restas</option>
                  <option value="26">Sumar, restas, multiplicaciones y divisiones</option>
                  <option value="27">Paréntesis con sumas y restas</option>
                  <option value="28">Solo paréntesis</option>
                </select>
                <button id="start" class="btn btn-success w-100">Comenzar</button>

                <!-- Barra de progreso y reloj -->
                <div id="progress-bar" class="mt-4" style="display: none;">
                    <div class="progress">
                        <div id="progress" class="progress-bar bg-success" role="progressbar" style="width: 0%;"></div>
                    </div>
                </div>
                <div id="timer" class="mt-3 h5" style="display: none;">
                    ⏱️ Tiempo: <span id="time">00:00</span>
                </div>
            </div>
        </div>

        <!-- Área de operaciones -->
      <div id="figlet" class="mt-4 figlet"></div>
      <div id="problems" class="mt-4" ></div>
      <div id="score" class="mt-4 h4"></div>
      <div id="operations-list" class="mt-4"></div>

    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
