<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;
- }
+cat style.css
</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 id="centerer">
+ <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 id="loading">Loading...</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>
+
+ <div id="tabs">
+ <div id="instructions" class="selected-tab" style="height: 150px">
+ <div class="tabtab">Instructions</div>
+ <ol>
+ <li>Click letter tiles to make a word (they have to touch).</li>
+ <li>Click the last letter tile again.</li>
+ </ol>
+ </div>
+ <div id="definition" class="tab" style="height: 20px">
+ <div class="tabtab">Definition</div>
+ <div id="definition_body">When you make a word, a definition should appear here.</div>
+ </div>
+
+ <div id="logtab" class="tab" style="height: 20px">
+ <div class="tabtab">log</div>
+ <div id="log">
+ <div> </div>
+ <div> </div>
+ <div> </div>
+ <div> </div>
+ <div> </div>
+ </div>
+ </div>
+
+ <div id="restart" class="tab" style="height: 20px">
+ <div class="tabtab">New Game</div>
+
+ <p class="warning">Warning: There's no undo! This will clear your score and reset the board.</p>
+
+ <p><a id="start-over" href="#" class="button">New Game</a></p>
+ </div>
+ </div>
+
+ <div id="copyright">
+ ©2013 <a href="http://jasonwoof.com/" target="_blank">Jason Woofenden</a> – <a href="http://gitorious.org/hexbog" target="_blank">AGPLv3+</a>.
+ <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 letter tiles to make a word (they have to touch). <strong><br>2.</strong> Click the last letter tile 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">
- ©2013 <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>
+ <script>
+cat main_min.js
+ </script>
+ <script>
+cat wordlist_min.js
+ </script>
</body>
</html>
Got questions, comments, patches, etc.? Contact Jason Woofenden