--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>HexBog</title>
+ <meta charset="utf-8" />
+ <link rel="shortcut icon" href="favicon.ico" />
+ <style>
+ body {
+ background: #eef;
+ color: black;
+ font: 14px Verdana, Arial, free-sans, sans-serif;
+ }
+ #boarder {
+ margin: 10px;
+ padding: 15px;
+ background: #f5f5ff;
+ float: left;
+ border-radius: 3px;
+ box-shadow: inset 1px 1px 4px #888;
+ overflow: hidden;
+ }
+ #board {
+ position: relative;
+ height: 410px;
+ width: 358px;
+ }
+ #right {
+ float: left;
+ width: 250px;
+ }
+ h1 {
+ color: #55f;
+ margin: 4px 0 0 0;
+ text-align: center;
+ }
+ #subhead {
+ margin-bottom: 10px;
+ text-align: center;
+ }
+ .tile {
+ padding-top: 4px;
+ height: 38px;
+ width: 42px;
+ background-color: #aaf;
+ color: #000;
+ font-size: 30px;
+ display: block;
+ position: absolute;
+ border-radius: 13px;
+ text-align: center;
+ cursor: pointer;
+ user-select: none;
+ -khtml-user-select: none;
+ -o-user-select: none;
+ -moz-user-select: -moz-none;
+ -webkit-user-select: none;
+ box-shadow: 1px 1px 2px #666;
+ }
+ .tile.selected, .tile.selected_word {
+ background-color: #ffa;
+ box-shadow: inset 1px 1px 5px #444;
+ }
+ .tile.selected_word {
+ background-color: #cfc;
+ }
+ #loading {
+ position: absolute;
+ top: 140px;
+ right: 140px;
+ font-size: 32px;
+ }
+ .head {
+ margin-top: -4px;
+ height: 42px;
+ width: 42px;
+ position: relative;
+ border-radius: 13px;
+ }
+ .eye1, .eye2 {
+ width: 6px;
+ height: 6px;
+ border: 2px solid #a83;
+ border-radius: 9px;
+ background-color: white;
+ position: absolute;
+ }
+ .eye1 {
+ top: -8px;
+ right: -1px;
+ width: 5px;
+ border-width: 4px 4px 3px 4px;
+ }
+ .eye2 {
+ right: -9px;
+ top: 1px;
+ border-width: 3px 4px 4px 2px;
+ }
+ .tooth1, .tooth2, .tooth3, .tooth4 {
+ width: 6px;
+ height: 6px;
+ border: 2px solid #a83;
+ background-color: white;
+ position: absolute;
+ }
+ .tooth1 {
+ top: -2px;
+ left: 22px;
+ width: 7px;
+ border-width: 2px 0 2px 2px;
+ }
+ .tooth2 {
+ height: 7px;
+ top: 12px;
+ right: -3px;
+ border-width: 0 2px 2px 2px;
+ }
+ .pate {
+ position: absolute;
+ top: -2px;
+ right: -3px;
+ width: 12px;
+ height: 12px;
+ background: white;
+ border: 2px solid #a83;
+ border-radius: 0 13px 0 0;
+ }
+ .tooth3 {
+ width: 7px;
+ bottom: -3px;
+ left: 12px;
+ border-width: 2px 2px 2px 0;
+ }
+ .tooth4 {
+ height: 7px;
+ bottom: 11px;
+ left: -2px;
+ border-width: 2px 2px 0 2px;
+ }
+ .chin {
+ position: absolute;
+ bottom: -3px;
+ left: -2px;
+ width: 12px;
+ height: 12px;
+ background: white;
+ border: 2px solid #a83;
+ border-radius: 0 0 0 13px;
+ }
+ #definition {
+ height: 180px;
+ padding: 5px;
+ box-shadow: 1px 1px 3px #888;
+ background: #ddf;
+ border-radius: 3px;
+ overflow: auto;
+ margin-bottom: 0;
+ }
+ #definition_credit {
+ margin-top: 2px;
+ font-size: 12px;
+ }
+ #copyright {
+ font-size: 85%;
+ padding: 0 0 15px 15px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="boarder">
+ <div id="board">
+ <div class="tile" style="background-color: #aaf; overflow: hiden">
+ <div class="head">
+ J
+ <div class="chin"></div>
+ <div class="pate"></div>
+ <div class="tooth1"></div>
+ <div class="tooth2"></div>
+ <div class="tooth3"></div>
+ <div class="tooth4"></div>
+ <div class="eye1"></div>
+ <div class="eye2"></div>
+ </div>
+ </div>
+ <div id="loading">Loading...</div>
+ </div>
+ </div>
+ <div id="right">
+ <h1>HexBog</h1>
+ <div id="subhead">— A simple word game —</div>
+ <div>Selection: "<span id="selection"></span>"</div>
+ <div>Score: <span id="score">0</span></div>
+ <p id="definition"><a href="./" target="_blank" id="definition_link"><span id="definition_word">HexBog</span></a>, <span id="definition_type">proper noun</span><span id="definition_language"></span>: <span id="definition_text">A simple word game.<br><br><strong>Instructions:<br>1.</strong> Click contiguous letter tiles to make a word. <strong><br>2.</strong> Click the last letter again.</span></p>
+ <p id="definition_credit"></p>
+ <pre id="log"><div> </div><div> </div><div> </div><div> </div><div> </div></pre>
+ <p>Stuck? <a id="start-over" href="#">Start over</a>.</p>
+ </div>
+ <div id="copyright"style="clear: both">
+ ©2011 <a href="http://jasonwoof.com/" target="_blank">Jason Woofenden</a>. <a href="http://gitorious.org/hexbog" target="_blank">Source code</a> is <a href="http://www.gnu.org/licenses/agpl-3.0.html" target="_blank">AGPLv3+</a>.<div>
+</body>
+</html>
Got questions, comments, patches, etc.? Contact Jason Woofenden