1 files changed, 118 insertions, 0 deletions
diff --git a/pub/index.html b/pub/index.html
new file mode 100644
index 0000000..b920617
--- /dev/null
+++ b/pub/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta content="width=device-width,initial-scale=1" name="viewport">
+		<title>Blank Plays</title>
+		<link rel="icon" href="data:,"><!--TODO-->
+		<style>
+			body {
+				font-family: sans-serif;
+			}
+			#board {
+				display: grid;
+				grid-template-rows: repeat(15, 1fr);
+			}
+			.board-row {
+				display: grid;
+				grid-template-columns: repeat(15, 1fr);
+				grid-auto-flow: column;
+			}
+			.board-square {
+				margin: 2px;
+				background-color: #dde;
+				line-height: 1;
+				position: relative;
+			}
+			.board-square.double-letter {
+				background-color: #acf;
+			}
+			.board-square.triple-letter {
+				background-color: #458;
+			}
+			.board-square.double-word {
+				background-color: #fac;
+			}
+			.board-square.triple-word {
+				background-color: #900;
+			}
+			.tile {
+				background: #eca;
+				position: absolute;
+				top: 6%;
+				left: 6%;
+				width: 88%;
+				height: 88%;
+				border-radius: 4px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-weight: bold;
+			}
+			.blank {
+				color: #333;
+				font-weight: normal;
+			}
+			.highlight {
+				border: 4px solid #ff0;
+				width: calc(100% - 8px);
+				height: calc(100% - 8px);
+				position: absolute;
+				cursor: pointer;
+			}
+			.highlight.nothing {
+				border: 4px solid #f00;
+			}
+			.highlight.selected {
+				border: 4px solid #00f;
+			}
+			.point-container {
+				position: relative;
+				width: 100%;
+				height: 100%;
+			}
+			.point-value {
+				position: absolute;
+				bottom: 8%;
+				right: 8%;
+				text-align: center;
+				font-size: 40%;
+			}
+			#select-container {
+				display: grid;
+				grid-template-rows: repeat(2, 1fr);
+			}
+			.select-container-row {
+				display: grid;
+				grid-template-columns: repeat(15, 1fr);
+				grid-auto-flow: column;
+				width: 100%;
+			}
+			.select-tile-container {
+				position: relative;
+				cursor: pointer;
+			}
+			.select-tile-container .tile {
+				background-color: #c88;
+				font-weight: normal;
+			}
+			.select-tile-container .tile.possible {
+				background-color: #8c7;
+				font-weight: bold;
+			}
+		</style>
+		<script src="/blankplays.js" async></script>
+	</head>
+	<body>
+		Find all the possible plays with a single blank!
+		<button>All done!</button>
+		<div id="board"></div>
+		<div id="select" style="display: none;">
+			Select which letters can go here:
+			<div id="select-container">
+				<div class="select-container-row"></div>
+				<div class="select-container-row"></div>
+			</div>
+		</div>
+	</body>
+</html>