<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="sudoku.js"></script> <style> body { background-color: #222; } .sudoku { float: left; color: hwb(0 20% 80%); opacity: 0.90 } .sudoku:hover { opacity: 1; } .sudoku-dark { background-color: #222 !important; color: #ffffff; opacity: 0.8 } .sudoku-dark > .sudoku-field { color: #333333; } .sudoku-dark>.sudoku-field-selected { color: black; } .sudoku-dark>.grid-item { border: none; border: 1px solid #333; } </style> </head> <body> <pre style="opacity: 0.8; color: #fff;margin:0;padding:10;text-align: left"> Refresh the page for different theme. The widgets are in two colors and multiple sizes available. These keyboard shortcuts are available for active puzzle widget: - `d` for deleting last filled field. - `a` for auto resolving. - `u` for unlimited undo's. - `r` for a tip. Developer notes: - Widget size is defined by font size on the .soduku css class or as html attribute to the component. - You can use an existing puzzle by setting the puzzle attribute on a component. It must contain at least 81 digits to be valid. </pre> <my-sudoku size="17" class="sudoku sudoku-dark" puzzle=" A nice generated puzzle. It will parse, even with this nonsense above it. Cool huh? 0 0 8 0 9 0 0 0 0 0 9 0 0 0 0 0 0 7 0 0 0 0 2 0 0 0 0 0 0 3 0 0 0 0 0 0 5 0 0 0 8 0 0 0 0 0 0 6 0 0 0 0 0 0 0 0 0 0 0 3 9 0 0 9 1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 "> </my-sudoku> <my-sudoku size="8" class="sudoku" puzzle="generate"> Small generated puzzle </my-sudoku> <my-sudoku class="sudoku" puzzle="generate"> Default generated puzzle </my-sudoku> <my-sudoku class="sudoku"> Default empty puzzle </my-sudoku> </body> </html>