<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudoku</title> <link rel="stylesheet" type="text/css" href="/static/style.css" /> </head> <body> <main> <form method="POST" action="/"> <div id="sudoku-field"> <table> {% for row in range(1, 10) %} <tr class="{{ loop.cycle('odd', 'even') }} row-{{ row }}"> {% for col in range(1, 10) %} <td class="{{ loop.cycle('odd', 'even') }} col-{{ col }}"> {% if sudoku_original[row-1][col-1] %} <label class="sudoku-field sudoku-field-original"> {{ sudoku_fields[row-1][col-1] | default('', true) }} </label> {% else %} <input type="radio" id="sudoku-field-{{ row }}{{ col }}", name="sudoku-field" value="{{ row }}{{ col }}" class="sudoku-field"/> <label for="sudoku-field-{{ row }}{{ col }}" id="sudoku-field-{{ row }}{{ col }}-label" class="sudoku-field"> {{ sudoku_fields[row-1][col-1] | default('', true) }} </label> {% endif %} </td> {% endfor %} </tr> {% endfor %} </table> </div> <div id="sudoku-input"> <table> {% for row in range(0, 3) %} <tr> {% for col in range(1, 4) %} <td> <input type="submit" value="{{ row * 3 + col }}" name="number" /> </td> {% endfor %} </tr> {% endfor %} <tr> <td colspan="3"> <input type="submit" value="Delete" name="number" class="fill" /> </td> </tr> </table> </div> </form> </main> </body> </html>