<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>