/ public_html / index.html
index.html
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Catan</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="main.css"> 7 <script src="catan.js" defer></script> 8 </head> 9 <body> 10 <div id="alert"></div> 11 <div id="game"> 12 <div class="ports"> 13 <div class="port"></div> 14 <div class="port"></div> 15 <div class="port"></div> 16 <div class="port"></div> 17 <div class="port"></div> 18 <div class="port"></div> 19 <div class="port"></div> 20 <div class="port"></div> 21 <div class="port"></div> 22 </div> 23 <div id="tiles"> 24 <div class="tile_row"> 25 <div class="tile"></div> 26 <div class="tile"></div> 27 <div class="tile"></div> 28 </div> 29 <div class="tile_row"> 30 <div class="tile"></div> 31 <div class="tile"></div> 32 <div class="tile"></div> 33 <div class="tile"></div> 34 </div> 35 <div class="tile_row"> 36 <div class="tile"></div> 37 <div class="tile"></div> 38 <div class="tile"></div> 39 <div class="tile"></div> 40 <div class="tile"></div> 41 </div> 42 <div class="tile_row"> 43 <div class="tile"></div> 44 <div class="tile"></div> 45 <div class="tile"></div> 46 <div class="tile"></div> 47 </div> 48 <div class="tile_row"> 49 <div class="tile"></div> 50 <div class="tile"></div> 51 <div class="tile"></div> 52 </div> 53 </div> 54 <div id="roads"> 55 <div class="road_row long"> 56 <div class="road"></div> 57 <div class="road"></div> 58 <div class="road"></div> 59 <div class="road"></div> 60 <div class="road"></div> 61 <div class="road"></div> 62 </div> 63 <div class="road_row tall"> 64 <div class="road"></div> 65 <div class="road"></div> 66 <div class="road"></div> 67 <div class="road"></div> 68 </div> 69 <div class="road_row long"> 70 <div class="road"></div> 71 <div class="road"></div> 72 <div class="road"></div> 73 <div class="road"></div> 74 <div class="road"></div> 75 <div class="road"></div> 76 <div class="road"></div> 77 <div class="road"></div> 78 </div> 79 <div class="road_row tall"> 80 <div class="road"></div> 81 <div class="road"></div> 82 <div class="road"></div> 83 <div class="road"></div> 84 <div class="road"></div> 85 </div> 86 <div class="road_row long"> 87 <div class="road"></div> 88 <div class="road"></div> 89 <div class="road"></div> 90 <div class="road"></div> 91 <div class="road"></div> 92 <div class="road"></div> 93 <div class="road"></div> 94 <div class="road"></div> 95 <div class="road"></div> 96 <div class="road"></div> 97 </div> 98 <div class="road_row tall"> 99 <div class="road"></div> 100 <div class="road"></div> 101 <div class="road"></div> 102 <div class="road"></div> 103 <div class="road"></div> 104 <div class="road"></div> 105 </div> 106 <div class="road_row long rev"> 107 <div class="road"></div> 108 <div class="road"></div> 109 <div class="road"></div> 110 <div class="road"></div> 111 <div class="road"></div> 112 <div class="road"></div> 113 <div class="road"></div> 114 <div class="road"></div> 115 <div class="road"></div> 116 <div class="road"></div> 117 </div> 118 <div class="road_row tall"> 119 <div class="road"></div> 120 <div class="road"></div> 121 <div class="road"></div> 122 <div class="road"></div> 123 <div class="road"></div> 124 </div> 125 <div class="road_row long rev"> 126 <div class="road"></div> 127 <div class="road"></div> 128 <div class="road"></div> 129 <div class="road"></div> 130 <div class="road"></div> 131 <div class="road"></div> 132 <div class="road"></div> 133 <div class="road"></div> 134 </div> 135 <div class="road_row tall"> 136 <div class="road"></div> 137 <div class="road"></div> 138 <div class="road"></div> 139 <div class="road"></div> 140 </div> 141 <div class="road_row long rev"> 142 <div class="road"></div> 143 <div class="road"></div> 144 <div class="road"></div> 145 <div class="road"></div> 146 <div class="road"></div> 147 <div class="road"></div> 148 </div> 149 </div> 150 <div id="houses"> 151 <div class="house_row"> 152 <div class="house"></div> 153 <div class="house"></div> 154 <div class="house"></div> 155 <div class="house"></div> 156 <div class="house"></div> 157 <div class="house"></div> 158 <div class="house"></div> 159 </div> 160 <div class="house_row"> 161 <div class="house"></div> 162 <div class="house"></div> 163 <div class="house"></div> 164 <div class="house"></div> 165 <div class="house"></div> 166 <div class="house"></div> 167 <div class="house"></div> 168 <div class="house"></div> 169 <div class="house"></div> 170 </div> 171 <div class="house_row"> 172 <div class="house"></div> 173 <div class="house"></div> 174 <div class="house"></div> 175 <div class="house"></div> 176 <div class="house"></div> 177 <div class="house"></div> 178 <div class="house"></div> 179 <div class="house"></div> 180 <div class="house"></div> 181 <div class="house"></div> 182 <div class="house"></div> 183 </div> 184 <div class="house_row"> 185 <div class="house"></div> 186 <div class="house"></div> 187 <div class="house"></div> 188 <div class="house"></div> 189 <div class="house"></div> 190 <div class="house"></div> 191 <div class="house"></div> 192 <div class="house"></div> 193 <div class="house"></div> 194 <div class="house"></div> 195 <div class="house"></div> 196 </div> 197 <div class="house_row"> 198 <div class="house"></div> 199 <div class="house"></div> 200 <div class="house"></div> 201 <div class="house"></div> 202 <div class="house"></div> 203 <div class="house"></div> 204 <div class="house"></div> 205 <div class="house"></div> 206 <div class="house"></div> 207 </div> 208 <div class="house_row"> 209 <div class="house"></div> 210 <div class="house"></div> 211 <div class="house"></div> 212 <div class="house"></div> 213 <div class="house"></div> 214 <div class="house"></div> 215 <div class="house"></div> 216 </div> 217 </div> 218 <div id="players"> 219 <div class="player"> 220 <div class="name"></div> 221 <div class="cards"></div> 222 <div class="points"></div> 223 <div class="prizes"></div> 224 </div> 225 <div class="player" style="left: 35%;"> 226 <div class="name"></div> 227 <div class="cards"></div> 228 <div class="points"></div> 229 <div class="prizes"></div> 230 </div> 231 <div class="player" style="right: 0;"> 232 <div class="name"></div> 233 <div class="cards"></div> 234 <div class="points"></div> 235 <div class="prizes"></div> 236 </div> 237 <div class="player me"> 238 <div class="name"></div> 239 <div class="cards"></div> 240 <div class="points"></div> 241 <div class="prizes"></div> 242 </div> 243 </div> 244 <div id="dice"> 245 <img src="image/ydie1.png" id="yellowdie"> 246 <img src="image/rdie1.png" id="reddie"> 247 </div> 248 <div id="gui"> 249 <div class="container"> 250 <div id="buy-dev-card"> 251 Buy development card (<span id="dev-cards-left"></span>) 252 </div> 253 <div id="play-dev-card"> 254 Play development card 255 </div> 256 <div id="init-trade"> 257 Trade 258 </div> 259 <div id="end-turn"> 260 End turn 261 </div> 262 </div> 263 </div> 264 </div> 265 <div id="chatbox-container"><div id="messages-container"><div id="chatbox-messages"></div></div><input id="chatbox-input" placeholder="Press <enter> to chat..."></div> 266 <div class="overlay" id="start_form"> 267 <span class="va-middle"></span> 268 <form action="#" onsubmit="return false;" class="va-middle"> 269 <input type="text" name="game" id="game_name" placeholder="Game name" autocomplete="off" required tabindex="1"> 270 <input type="text" name="name" id="your_name" placeholder="Your name" autocomplete="off" required tabindex="2"> 271 <button>Start game</button> 272 </form> 273 <div id="start_form_error"></div> 274 </div> 275 <div class="overlay" id="file-upload"></div> 276 <div class="overlay" id="request-overlay"><span class="va-middle"></span><div class="va-middle" id="request-form"></div></div> 277 <button id="start_game">Start!</button> 278 </body> 279 </html>