main.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>HexBog</title>
   5         <meta charset="utf-8" />
   6         <link rel="shortcut icon" href="favicon.ico" />
   7         <style>
   8                 body {
   9                         background: #eef;
  10                         color: black;
  11                         font: 14px Verdana, Arial, free-sans, sans-serif;
  12                 }
  13                 #boarder {
  14                         margin: 10px;
  15                         padding: 15px;
  16                         background: #f5f5ff;
  17                         float: left;
  18                         border-radius: 3px;
  19                         box-shadow: inset 1px 1px 4px #888;
  20                         overflow: hidden;
  21                 }
  22                 #board {
  23                         position: relative;
  24                         height: 410px;
  25                         width: 358px;
  26                 }
  27                 #right {
  28                         float: left;
  29                         width: 250px;
  30                 }
  31                 h1 {
  32                         color: #55f;
  33                         margin: 4px 0 0 0;
  34                         text-align: center;
  35                 }
  36                 #subhead {
  37                         margin-bottom: 10px;
  38                         text-align: center;
  39                 }
  40                 .tile {
  41                         padding-top: 4px;
  42                         height: 38px;
  43                         width: 42px;
  44                         background-color: #aaf;
  45                         color: #000;
  46                         font-size: 30px;
  47                         display: block;
  48                         position: absolute;
  49                         border-radius: 13px;
  50                         text-align: center;
  51                         cursor: pointer;
  52                         user-select: none;
  53                         -khtml-user-select: none;
  54                         -o-user-select: none;
  55                         -moz-user-select: -moz-none;
  56                         -webkit-user-select: none;
  57                         box-shadow: 1px 1px 2px #666;
  58                 }
  59                 .tile.selected, .tile.selected_word {
  60                         background-color: #ffa;
  61                         box-shadow: inset 1px 1px 5px #444;
  62                 }
  63                 .tile.selected_word {
  64                         background-color: #cfc;
  65                 }
  66                 #loading {
  67                         position: absolute;
  68                         top: 140px;
  69                         right: 140px;
  70                         font-size: 32px;
  71                 }
  72                 .head {
  73                         margin-top: -4px;
  74                         height: 42px;
  75                         width: 42px;
  76                         position: relative;
  77                         border-radius: 13px;
  78                 }
  79                 .eye1, .eye2 {
  80                         width: 6px;
  81                         height: 6px;
  82                         border: 2px solid #a83;
  83                         border-radius: 9px;
  84                         background-color: white;
  85                         position: absolute;
  86                 }
  87                 .eye1 {
  88                         top: -8px;
  89                         right: -1px;
  90                         width: 5px;
  91                         border-width: 4px 4px 3px 4px;
  92                 }
  93                 .eye2 {
  94                         right: -9px;
  95                         top: 1px;
  96                         border-width: 3px 4px 4px 2px;
  97                 }
  98                 .tooth1, .tooth2, .tooth3, .tooth4 {
  99                         width: 6px;
 100                         height: 6px;
 101                         border: 2px solid #a83;
 102                         background-color: white;
 103                         position: absolute;
 104                 }
 105                 .tooth1 {
 106                         top: -2px;
 107                         left: 22px;
 108                         width: 7px;
 109                         border-width: 2px 0 2px 2px;
 110                 }
 111                 .tooth2 {
 112                         height: 7px;
 113                         top: 12px;
 114                         right: -3px;
 115                         border-width: 0 2px 2px 2px;
 116                 }
 117                 .pate {
 118                         position: absolute;
 119                         top: -2px;
 120                         right: -3px;
 121                         width: 12px;
 122                         height: 12px;
 123                         background: white;
 124                         border: 2px solid #a83;
 125                         border-radius: 0 13px 0 0;
 126                 }
 127                 .tooth3 {
 128                         width: 7px;
 129                         bottom: -3px;
 130                         left: 12px;
 131                         border-width: 2px 2px 2px 0;
 132                 }
 133                 .tooth4 {
 134                         height: 7px;
 135                         bottom: 11px;
 136                         left: -2px;
 137                         border-width: 2px 2px 0 2px;
 138                 }
 139                 .chin {
 140                         position: absolute;
 141                         bottom: -3px;
 142                         left: -2px;
 143                         width: 12px;
 144                         height: 12px;
 145                         background: white;
 146                         border: 2px solid #a83;
 147                         border-radius: 0 0 0 13px;
 148                 }
 149                 #definition {
 150                         height: 180px;
 151                         padding: 5px;
 152                         box-shadow: 1px 1px 3px #888;
 153                         background: #ddf;
 154                         border-radius: 3px;
 155                         overflow: auto;
 156                         margin-bottom: 0;
 157                 }
 158                 #definition_credit {
 159                         margin-top: 2px;
 160                         font-size: 12px;
 161                 }
 162                 #copyright {
 163                         font-size: 85%;
 164                         padding: 0 0 15px 15px;
 165                 }
 166         </style>
 167 </head>
 168
 169 <body>
 170         <div id="boarder">
 171                 <div id="board">
 172                         <div class="tile" style="background-color: #aaf; overflow: hiden">
 173                                 <div class="head">
 174                                         J
 175                                         <div class="chin"></div>
 176                                         <div class="pate"></div>
 177                                         <div class="tooth1"></div>
 178                                         <div class="tooth2"></div>
 179                                         <div class="tooth3"></div>
 180                                         <div class="tooth4"></div>
 181                                         <div class="eye1"></div>
 182                                         <div class="eye2"></div>
 183                                 </div>
 184                         </div>
 185                         <div id="loading">Loading...</div>
 186                 </div>
 187         </div>
 188         <div id="right">
 189                 <h1>HexBog</h1>
 190                 <div id="subhead">&mdash; A simple word game &mdash;</div>
 191                 <div>Selection: "<span id="selection"></span>"</div>
 192                 <div>Score: <span id="score">0</span></div>
 193                 <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>
 194                 <p id="definition_credit"></p>
 195                 <pre id="log"><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div></pre>
 196                 <p>Stuck? <a id="start-over" href="#">Start over</a>.</p>
 197         </div>
 198         <div id="copyright"style="clear: both">
 199                 &copy;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>
 200 </body>
 201 </html>