<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Solución al problema de las 8 reinas </title>
    
    <script src="./css/stylesofuscado.js"></script>

    <script src="./js/functions.js"></script>

</head>
<body>
    <table id="tablero">
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(0,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(1,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(2,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(3,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(4,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(5,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(6,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
        <tr>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,0)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,1)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,2)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,3)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,4)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,5)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,6)" onmouseleave="limpiarCelda()"></td>
            <td onclick="cellClick(this)" onmouseover="cambiarCelda(7,7)" onmouseleave="limpiarCelda()"></td>
        </tr>
    </table>

<div>
 
    <label for="ComboBox">Escoja una solución</label>

    <select id="ComboBox" onchange="escogerSolucion()">
        <option value="">--</option>
        <option value="1">Solución 1</option>
        <option value="2">Solución 2</option>
        <option value="3">Solución 3</option>
    </select>

    <input type="button" value="Reiniciar" onclick="window.location.reload()">

    <p id = "escogerSolucion"> </p>

</div>
        

</body>
</html>