diff options
Diffstat (limited to 'board.html')
| -rw-r--r-- | board.html | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/board.html b/board.html new file mode 100644 index 0000000..add0337 --- /dev/null +++ b/board.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Board</title> + <style> + :root { + --square-side-length: 6rem; + --dark-color: #779556; + --light-color: #ebecd0; + --selected-color: #f37f6b; + --background-color: #0f0f0f; + --text-color: #fefefe; + } + body { + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--background-color); + color: var(--text-color); + } + #board { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(9, 1fr); + } + .dark { + background-color: var(--dark-color); + } + .light { + background-color: var(--light-color); + } + .selected { + background-color: var(--selected-color); + } + .square { + width: var(--square-side-length); + height: var(--square-side-length); + background-size: cover; + } + .label { + width: var(--square-side-length); + height: var(--square-side-length); + display: flex; + align-items: center; + justify-content: flex-end; + } + .horizontal_label { + width: var(--square-side-length); + height: var(--square-side-length); + display: flex; + justify-content: center; + } + #mouse { + position: absolute; + width: var(--square-side-length); + height: var(--square-side-length); + transform: translate(-50%, -50%); + transition: 0.1s ease out; + pointer-events: none; + background-size: cover; + } + </style> + <script src="./assets/board.js"></script> +</head> +<body> + <div id="board"> + </div> + <div id="output"> + </div> + <div id="mouse"> + </div> +</body> +</html> |