index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <!--
   3  * Copyright (c) 2012, Intel Corporation.
   4  *
   5  * This program is licensed under the terms and conditions of the
   6  * Apache License, version 2.0.  The full text of the Apache License is at
   7  * http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9 -->
  10 <html>
  11 <head>
  12 <meta id="viewport_meta" name="viewport" content="" />
  13 <script type="text/javascript">
  14         var viewport_meta = document.getElementById('viewport_meta');
  15         var w = screen.availWidth;
  16         var h = screen.availHeight;
  17         viewport_meta.setAttribute('content', 'width=' + w + ', height=' + h + ',user-scalable=no');
  18 </script>
  19 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  20 <title>Memory Cards for Older Kids</title>
  21 <link rel="stylesheet" type="text/css" href="css/main.css"></link>
  22 <link rel="stylesheet" type="text/css" href="css/license.css"></link>
  23 <link rel="stylesheet" type="text/css" href="css/help.css"></link>
  24 <script src="js/help.js"></script>
  25 <script src="js/license.js"></script>
  26 <script src="js/jquery-1.7.2.min.js"></script>
  27 <script src="js/localizer.js"></script>
  28 <script src="js/main.js"></script>
  29 <script src="js/card.js"></script>
  30 <script src="js/curvedtextdrawer.js"></script>
  31 <script src="js/vec2.js"></script>
  32 <script src="js/utils.js"></script>
  33 </head>
  34 <body>
  35         <!-- The "div.pagebg" is the root level div that will be resized to fill the whole screen area.
  36         This element has children div-elements for each view. These child divs are then shown or hidden
  37         as user navigates between views. -->
  38         <div id="licensepage" style="display: none">
  39                 <div id="licensetext">
  40                         <div id="licensescroll"></div>
  41                 </div>
  42                 <div id="licensebtnq" class="licensebtn">Back</div>
  43         </div>
  44         <div id="help_dialog" class="helpdialog">
  45                 <div class="inner">
  46                         <div id="help_close" class="close">x</div>
  47                         <div id="help_contents" class="contents">
  48                                 Can you make it through level four, and find all the matching
  49                                 pictures? <br>
  50                                 Start your journey at level one. Finish the level one
  51                                 challenge by finding all the pictures three times. After you’ve
  52                                 beaten level one, you’ve unlocked level two.  Each level gets
  53                                 tougher with more pictures to match. <br>
  54                                 Click a face-down picture card to peek at it. Click
  55                                 another to see if you found a match. If not, they’ll flip back over
  56                                 and you can try again. If they do match, they’ll remain face up, and
  57                                 you’re getting closer to winning! <br>
  58                                 If you want to restart and try a different unlocked level,
  59                                 click Home and you’ll go back to the beginning.
  60                         </div>
  61                 </div>
  62         </div>
  63         <div id="pagebg" class="game_page">
  64                 <div id="main_page" class="game_page" style="display: block">
  65                         <div id="main_bg"></div>
  66                         <div id="main_spetacular_title" class="main_sancreek_text2">THE
  67                                 SPECTACULAR</div>
  68                         <div id="main_memory_title" class="main_romantique_text">MEMORY</div>
  69                         <div id="main_extravaganza_title" class="main_sancreek_text">EXTRAVAGANZA!</div>
  70                 </div>
  71
  72                 <div id="selLevel_page" class="game_page" style="display: none">
  73                         <div id="selLevel_bg"></div>
  74                         <div id="selLevel_title" class="selLevel_sancreek_big">CHOOSE A
  75                                 LEVEL</div>
  76                         <div id="selLevel_hint" class="selLevel_sancreek_small">YOU
  77                                 MUST UNLOCK EACH LEVEL IN ORDER TO PLAY!</div>
  78
  79                         <div id="selLevel_levelCard1" class="selLevel_levelCard">1</div>
  80                         <div id="selLevel_levelCard2"
  81                                 class="selLevel_levelCard setLevel_lockedLevel">2</div>
  82                         <div id="selLevel_levelCard3"
  83                                 class="selLevel_levelCard setLevel_lockedLevel">3</div>
  84                         <div id="selLevel_levelCard4"
  85                                 class="selLevel_levelCard setLevel_lockedLevel">4</div>
  86
  87                         <div id="selLevel_resetLocked"></div>
  88                         <div id="licensebtnl" style="top: 560px; left: 984px;">i</div>
  89                         <div id="main_help" class="helplaunch">?</div>
  90                 </div>
  91
  92                 <div id="level1" class="game_page" style="display: none">
  93                         <div id="level1_bg"></div>
  94                         <div id="level1_indicator" class="level1_indicator_text">LEVEL
  95                                 1</div>
  96
  97                         <!-- Cards -->
  98                         <div id="level1_card_01" class="cardContainer">
  99                                 <div id="l1c1" class="card">
 100                                         <div id="level1_card_1_front" class="front"></div>
 101                                         <div class="back lev1CardBg"></div>
 102                                 </div>
 103                         </div>
 104                         <div id="level1_card_02" class="cardContainer">
 105                                 <div id="l1c2" class="card">
 106                                         <div id="level1_card_2_front" class="front"></div>
 107                                         <div class="back lev1CardBg"></div>
 108                                 </div>
 109                         </div>
 110                         <div id="level1_card_03" class="cardContainer">
 111                                 <div id="l1c3" class="card">
 112                                         <div id="level1_card_3_front" class="front"></div>
 113                                         <div class="back lev1CardBg"></div>
 114                                 </div>
 115                         </div>
 116                         <div id="level1_card_04" class="cardContainer">
 117                                 <div id="l1c4" class="card">
 118                                         <div id="level1_card_4_front" class="front"></div>
 119                                         <div class="back lev1CardBg"></div>
 120                                 </div>
 121                         </div>
 122                         <div id="level1_card_05" class="cardContainer">
 123                                 <div id="l1c5" class="card">
 124                                         <div id="level1_card_5_front" class="front"></div>
 125                                         <div class="back lev1CardBg"></div>
 126                                 </div>
 127                         </div>
 128                         <div id="level1_card_06" class="cardContainer">
 129                                 <div id="l1c6" class="card">
 130                                         <div id="level1_card_6_front" class="front"></div>
 131                                         <div class="back lev1CardBg"></div>
 132                                 </div>
 133                         </div>
 134                         <div id="level1_card_07" class="cardContainer">
 135                                 <div id="l1c7" class="card">
 136                                         <div id="level1_card_7_front" class="front"></div>
 137                                         <div class="back lev1CardBg"></div>
 138                                 </div>
 139                         </div>
 140                         <div id="level1_card_08" class="cardContainer">
 141                                 <div id="l1c8" class="card">
 142                                         <div id="level1_card_8_front" class="front"></div>
 143                                         <div class="back lev1CardBg"></div>
 144                                 </div>
 145                         </div>
 146                         <div id="level1_card_09" class="cardContainer">
 147                                 <div id="l1c9" class="card">
 148                                         <div id="level1_card_9_front" class="front"></div>
 149                                         <div class="back lev1CardBg"></div>
 150                                 </div>
 151                         </div>
 152                         <div id="level1_card_10" class="cardContainer">
 153                                 <div id="l1c10" class="card">
 154                                         <div id="level1_card_10_front" class="front"></div>
 155                                         <div class="back lev1CardBg"></div>
 156                                 </div>
 157                         </div>
 158                         <div id="level1_card_11" class="cardContainer">
 159                                 <div id="l1c11" class="card">
 160                                         <div id="level1_card_11_front" class="front"></div>
 161                                         <div class="back lev1CardBg"></div>
 162                                 </div>
 163                         </div>
 164                         <div id="level1_card_12" class="cardContainer">
 165                                 <div id="l1c12" class="card">
 166                                         <div id="level1_card_12_front" class="front"></div>
 167                                         <div class="back lev1CardBg"></div>
 168                                 </div>
 169                         </div>
 170
 171                 </div>
 172
 173                 <div id="level2" class="game_page" style="display: none">
 174                         <div id="level2_bg"></div>
 175                         <div id="level2_indicator" class="level2_indicator_text">LEVEL
 176                                 2</div>
 177
 178                         <!-- Cards -->
 179                         <div id="level2_card_01" class="cardContainer">
 180                                 <div id="l2c1" class="card">
 181                                         <div id="level2_card_1_front" class="front"></div>
 182                                         <div class="back lev2CardBg"></div>
 183                                 </div>
 184                         </div>
 185                         <div id="level2_card_02" class="cardContainer">
 186                                 <div id="l2c2" class="card">
 187                                         <div id="level2_card_2_front" class="front"></div>
 188                                         <div class="back lev2CardBg"></div>
 189                                 </div>
 190                         </div>
 191                         <div id="level2_card_03" class="cardContainer">
 192                                 <div id="l2c3" class="card">
 193                                         <div id="level2_card_3_front" class="front"></div>
 194                                         <div class="back lev2CardBg"></div>
 195                                 </div>
 196                         </div>
 197                         <div id="level2_card_04" class="cardContainer">
 198                                 <div id="l2c4" class="card">
 199                                         <div id="level2_card_4_front" class="front"></div>
 200                                         <div class="back lev2CardBg"></div>
 201                                 </div>
 202                         </div>
 203                         <div id="level2_card_05" class="cardContainer">
 204                                 <div id="l2c5" class="card">
 205                                         <div id="level2_card_5_front" class="front"></div>
 206                                         <div class="back lev2CardBg"></div>
 207                                 </div>
 208                         </div>
 209                         <div id="level2_card_06" class="cardContainer">
 210                                 <div id="l2c6" class="card">
 211                                         <div id="level2_card_6_front" class="front"></div>
 212                                         <div class="back lev2CardBg"></div>
 213                                 </div>
 214                         </div>
 215                         <div id="level2_card_07" class="cardContainer">
 216                                 <div id="l2c7" class="card">
 217                                         <div id="level2_card_7_front" class="front"></div>
 218                                         <div class="back lev2CardBg"></div>
 219                                 </div>
 220                         </div>
 221                         <div id="level2_card_08" class="cardContainer">
 222                                 <div id="l2c8" class="card">
 223                                         <div id="level2_card_8_front" class="front"></div>
 224                                         <div class="back lev2CardBg"></div>
 225                                 </div>
 226                         </div>
 227                         <div id="level2_card_09" class="cardContainer">
 228                                 <div id="l2c9" class="card">
 229                                         <div id="level2_card_9_front" class="front"></div>
 230                                         <div class="back lev2CardBg"></div>
 231                                 </div>
 232                         </div>
 233                         <div id="level2_card_10" class="cardContainer">
 234                                 <div id="l2c10" class="card">
 235                                         <div id="level2_card_10_front" class="front"></div>
 236                                         <div class="back lev2CardBg"></div>
 237                                 </div>
 238                         </div>
 239                         <div id="level2_card_11" class="cardContainer">
 240                                 <div id="l2c11" class="card">
 241                                         <div id="level2_card_11_front" class="front"></div>
 242                                         <div class="back lev2CardBg"></div>
 243                                 </div>
 244                         </div>
 245                         <div id="level2_card_12" class="cardContainer">
 246                                 <div id="l2c12" class="card">
 247                                         <div id="level2_card_12_front" class="front"></div>
 248                                         <div class="back lev2CardBg"></div>
 249                                 </div>
 250                         </div>
 251                         <div id="level2_card_13" class="cardContainer">
 252                                 <div id="l2c13" class="card">
 253                                         <div id="level2_card_13_front" class="front"></div>
 254                                         <div class="back lev2CardBg"></div>
 255                                 </div>
 256                         </div>
 257                         <div id="level2_card_14" class="cardContainer">
 258                                 <div id="l2c14" class="card">
 259                                         <div id="level2_card_14_front" class="front"></div>
 260                                         <div class="back lev2CardBg"></div>
 261                                 </div>
 262                         </div>
 263                         <div id="level2_card_15" class="cardContainer">
 264                                 <div id="l2c15" class="card">
 265                                         <div id="level2_card_15_front" class="front"></div>
 266                                         <div class="back lev2CardBg"></div>
 267                                 </div>
 268                         </div>
 269                         <div id="level2_card_16" class="cardContainer">
 270                                 <div id="l2c16" class="card">
 271                                         <div id="level2_card_16_front" class="front"></div>
 272                                         <div class="back lev2CardBg"></div>
 273                                 </div>
 274                         </div>
 275                         <div id="level2_card_17" class="cardContainer">
 276                                 <div id="l2c17" class="card">
 277                                         <div id="level2_card_17_front" class="front"></div>
 278                                         <div class="back lev2CardBg"></div>
 279                                 </div>
 280                         </div>
 281                         <div id="level2_card_18" class="cardContainer">
 282                                 <div id="l2c18" class="card">
 283                                         <div id="level2_card_18_front" class="front"></div>
 284                                         <div class="back lev2CardBg"></div>
 285                                 </div>
 286                         </div>
 287                 </div>
 288
 289                 <div id="level3" class="game_page" style="display: none">
 290                         <div id="level3_bg"></div>
 291                         <div id="level3_indicator" class="level3_indicator_text">LEVEL
 292                                 3</div>
 293
 294                         <!-- Cards -->
 295                         <div id="level3_card_01" class="cardContainer">
 296                                 <div id="l3c1" class="card">
 297                                         <div id="level3_card_1_front" class="front"></div>
 298                                         <div class="back lev3CardBg"></div>
 299                                 </div>
 300                         </div>
 301                         <div id="level3_card_02" class="cardContainer">
 302                                 <div id="l3c2" class="card">
 303                                         <div id="level3_card_2_front" class="front"></div>
 304                                         <div class="back lev3CardBg"></div>
 305                                 </div>
 306                         </div>
 307                         <div id="level3_card_03" class="cardContainer">
 308                                 <div id="l3c3" class="card">
 309                                         <div id="level3_card_3_front" class="front"></div>
 310                                         <div class="back lev3CardBg"></div>
 311                                 </div>
 312                         </div>
 313                         <div id="level3_card_04" class="cardContainer">
 314                                 <div id="l3c4" class="card">
 315                                         <div id="level3_card_4_front" class="front"></div>
 316                                         <div class="back lev3CardBg"></div>
 317                                 </div>
 318                         </div>
 319                         <div id="level3_card_05" class="cardContainer">
 320                                 <div id="l3c5" class="card">
 321                                         <div id="level3_card_5_front" class="front"></div>
 322                                         <div class="back lev3CardBg"></div>
 323                                 </div>
 324                         </div>
 325                         <div id="level3_card_06" class="cardContainer">
 326                                 <div id="l3c6" class="card">
 327                                         <div id="level3_card_6_front" class="front"></div>
 328                                         <div class="back lev3CardBg"></div>
 329                                 </div>
 330                         </div>
 331                         <div id="level3_card_07" class="cardContainer">
 332                                 <div id="l3c7" class="card">
 333                                         <div id="level3_card_7_front" class="front"></div>
 334                                         <div class="back lev3CardBg"></div>
 335                                 </div>
 336                         </div>
 337                         <div id="level3_card_08" class="cardContainer">
 338                                 <div id="l3c8" class="card">
 339                                         <div id="level3_card_8_front" class="front"></div>
 340                                         <div class="back lev3CardBg"></div>
 341                                 </div>
 342                         </div>
 343                         <div id="level3_card_09" class="cardContainer">
 344                                 <div id="l3c9" class="card">
 345                                         <div id="level3_card_9_front" class="front"></div>
 346                                         <div class="back lev3CardBg"></div>
 347                                 </div>
 348                         </div>
 349                         <div id="level3_card_10" class="cardContainer">
 350                                 <div id="l3c10" class="card">
 351                                         <div id="level3_card_10_front" class="front"></div>
 352                                         <div class="back lev3CardBg"></div>
 353                                 </div>
 354                         </div>
 355                         <div id="level3_card_11" class="cardContainer">
 356                                 <div id="l3c11" class="card">
 357                                         <div id="level3_card_11_front" class="front"></div>
 358                                         <div class="back lev3CardBg"></div>
 359                                 </div>
 360                         </div>
 361                         <div id="level3_card_12" class="cardContainer">
 362                                 <div id="l3c12" class="card">
 363                                         <div id="level3_card_12_front" class="front"></div>
 364                                         <div class="back lev3CardBg"></div>
 365                                 </div>
 366                         </div>
 367                         <div id="level3_card_13" class="cardContainer">
 368                                 <div id="l3c13" class="card">
 369                                         <div id="level3_card_13_front" class="front"></div>
 370                                         <div class="back lev3CardBg"></div>
 371                                 </div>
 372                         </div>
 373                         <div id="level3_card_14" class="cardContainer">
 374                                 <div id="l3c14" class="card">
 375                                         <div id="level3_card_14_front" class="front"></div>
 376                                         <div class="back lev3CardBg"></div>
 377                                 </div>
 378                         </div>
 379                         <div id="level3_card_15" class="cardContainer">
 380                                 <div id="l3c15" class="card">
 381                                         <div id="level3_card_15_front" class="front"></div>
 382                                         <div class="back lev3CardBg"></div>
 383                                 </div>
 384                         </div>
 385                         <div id="level3_card_16" class="cardContainer">
 386                                 <div id="l3c16" class="card">
 387                                         <div id="level3_card_16_front" class="front"></div>
 388                                         <div class="back lev3CardBg"></div>
 389                                 </div>
 390                         </div>
 391                         <div id="level3_card_17" class="cardContainer">
 392                                 <div id="l3c17" class="card">
 393                                         <div id="level3_card_17_front" class="front"></div>
 394                                         <div class="back lev3CardBg"></div>
 395                                 </div>
 396                         </div>
 397                         <div id="level3_card_18" class="cardContainer">
 398                                 <div id="l3c18" class="card">
 399                                         <div id="level3_card_18_front" class="front"></div>
 400                                         <div class="back lev3CardBg"></div>
 401                                 </div>
 402                         </div>
 403                         <div id="level3_card_19" class="cardContainer">
 404                                 <div id="l3c19" class="card">
 405                                         <div id="level3_card_19_front" class="front"></div>
 406                                         <div class="back lev3CardBg"></div>
 407                                 </div>
 408                         </div>
 409                         <div id="level3_card_20" class="cardContainer">
 410                                 <div id="l3c20" class="card">
 411                                         <div id="level3_card_20_front" class="front"></div>
 412                                         <div class="back lev3CardBg"></div>
 413                                 </div>
 414                         </div>
 415                         <div id="level3_card_21" class="cardContainer">
 416                                 <div id="l3c21" class="card">
 417                                         <div id="level3_card_21_front" class="front"></div>
 418                                         <div class="back lev3CardBg"></div>
 419                                 </div>
 420                         </div>
 421                         <div id="level3_card_22" class="cardContainer">
 422                                 <div id="l3c22" class="card">
 423                                         <div id="level3_card_22_front" class="front"></div>
 424                                         <div class="back lev3CardBg"></div>
 425                                 </div>
 426                         </div>
 427                         <div id="level3_card_23" class="cardContainer">
 428                                 <div id="l3c23" class="card">
 429                                         <div id="level3_card_23_front" class="front"></div>
 430                                         <div class="back lev3CardBg"></div>
 431                                 </div>
 432                         </div>
 433                         <div id="level3_card_24" class="cardContainer">
 434                                 <div id="l3c24" class="card">
 435                                         <div id="level3_card_24_front" class="front"></div>
 436                                         <div class="back lev3CardBg"></div>
 437                                 </div>
 438                         </div>
 439                 </div>
 440
 441                 <div id="level4" class="game_page" style="display: none">
 442                         <div id="level4_bg"></div>
 443                         <div id="level4_indicator" class="level3_indicator_text">FINALE!</div>
 444
 445                         <!-- Cards -->
 446                         <div id="level4_card_01" class="cardContainer">
 447                                 <div id="l4c1" class="card">
 448                                         <div id="level4_card_1_front" class="front"></div>
 449                                         <div class="back lev4CardBg"></div>
 450                                 </div>
 451                         </div>
 452                         <div id="level4_card_02" class="cardContainer">
 453                                 <div id="l4c2" class="card">
 454                                         <div id="level4_card_2_front" class="front"></div>
 455                                         <div class="back lev4CardBg"></div>
 456                                 </div>
 457                         </div>
 458                         <div id="level4_card_03" class="cardContainer">
 459                                 <div id="l4c3" class="card">
 460                                         <div id="level4_card_3_front" class="front"></div>
 461                                         <div class="back lev4CardBg"></div>
 462                                 </div>
 463                         </div>
 464                         <div id="level4_card_04" class="cardContainer">
 465                                 <div id="l4c4" class="card">
 466                                         <div id="level4_card_4_front" class="front"></div>
 467                                         <div class="back lev4CardBg"></div>
 468                                 </div>
 469                         </div>
 470                         <div id="level4_card_05" class="cardContainer">
 471                                 <div id="l4c5" class="card">
 472                                         <div id="level4_card_5_front" class="front"></div>
 473                                         <div class="back lev4CardBg"></div>
 474                                 </div>
 475                         </div>
 476                         <div id="level4_card_06" class="cardContainer">
 477                                 <div id="l4c6" class="card">
 478                                         <div id="level4_card_6_front" class="front"></div>
 479                                         <div class="back lev4CardBg"></div>
 480                                 </div>
 481                         </div>
 482                         <div id="level4_card_07" class="cardContainer">
 483                                 <div id="l4c7" class="card">
 484                                         <div id="level4_card_7_front" class="front"></div>
 485                                         <div class="back lev4CardBg"></div>
 486                                 </div>
 487                         </div>
 488                         <div id="level4_card_08" class="cardContainer">
 489                                 <div id="l4c8" class="card">
 490                                         <div id="level4_card_8_front" class="front"></div>
 491                                         <div class="back lev4CardBg"></div>
 492                                 </div>
 493                         </div>
 494                         <div id="level4_card_09" class="cardContainer">
 495                                 <div id="l4c9" class="card">
 496                                         <div id="level4_card_9_front" class="front"></div>
 497                                         <div class="back lev4CardBg"></div>
 498                                 </div>
 499                         </div>
 500                         <div id="level4_card_10" class="cardContainer">
 501                                 <div id="l4c10" class="card">
 502                                         <div id="level4_card_10_front" class="front"></div>
 503                                         <div class="back lev4CardBg"></div>
 504                                 </div>
 505                         </div>
 506                         <div id="level4_card_11" class="cardContainer">
 507                                 <div id="l4c11" class="card">
 508                                         <div id="level4_card_11_front" class="front"></div>
 509                                         <div class="back lev4CardBg"></div>
 510                                 </div>
 511                         </div>
 512                         <div id="level4_card_12" class="cardContainer">
 513                                 <div id="l4c12" class="card">
 514                                         <div id="level4_card_12_front" class="front"></div>
 515                                         <div class="back lev4CardBg"></div>
 516                                 </div>
 517                         </div>
 518                         <div id="level4_card_13" class="cardContainer">
 519                                 <div id="l4c13" class="card">
 520                                         <div id="level4_card_13_front" class="front"></div>
 521                                         <div class="back lev4CardBg"></div>
 522                                 </div>
 523                         </div>
 524                         <div id="level4_card_14" class="cardContainer">
 525                                 <div id="l4c14" class="card">
 526                                         <div id="level4_card_14_front" class="front"></div>
 527                                         <div class="back lev4CardBg"></div>
 528                                 </div>
 529                         </div>
 530                         <div id="level4_card_15" class="cardContainer">
 531                                 <div id="l4c15" class="card">
 532                                         <div id="level4_card_15_front" class="front"></div>
 533                                         <div class="back lev4CardBg"></div>
 534                                 </div>
 535                         </div>
 536                         <div id="level4_card_16" class="cardContainer">
 537                                 <div id="l4c16" class="card">
 538                                         <div id="level4_card_16_front" class="front"></div>
 539                                         <div class="back lev4CardBg"></div>
 540                                 </div>
 541                         </div>
 542                         <div id="level4_card_17" class="cardContainer">
 543                                 <div id="l4c17" class="card">
 544                                         <div id="level4_card_17_front" class="front"></div>
 545                                         <div class="back lev4CardBg"></div>
 546                                 </div>
 547                         </div>
 548                         <div id="level4_card_18" class="cardContainer">
 549                                 <div id="l4c18" class="card">
 550                                         <div id="level4_card_18_front" class="front"></div>
 551                                         <div class="back lev4CardBg"></div>
 552                                 </div>
 553                         </div>
 554                         <div id="level4_card_19" class="cardContainer">
 555                                 <div id="l4c19" class="card">
 556                                         <div id="level4_card_19_front" class="front"></div>
 557                                         <div class="back lev4CardBg"></div>
 558                                 </div>
 559                         </div>
 560                         <div id="level4_card_20" class="cardContainer">
 561                                 <div id="l4c20" class="card">
 562                                         <div id="level4_card_20_front" class="front"></div>
 563                                         <div class="back lev4CardBg"></div>
 564                                 </div>
 565                         </div>
 566                         <div id="level4_card_21" class="cardContainer">
 567                                 <div id="l4c21" class="card">
 568                                         <div id="level4_card_21_front" class="front"></div>
 569                                         <div class="back lev4CardBg"></div>
 570                                 </div>
 571                         </div>
 572                         <div id="level4_card_22" class="cardContainer">
 573                                 <div id="l4c22" class="card">
 574                                         <div id="level4_card_22_front" class="front"></div>
 575                                         <div class="back lev4CardBg"></div>
 576                                 </div>
 577                         </div>
 578                         <div id="level4_card_23" class="cardContainer">
 579                                 <div id="l4c23" class="card">
 580                                         <div id="level4_card_23_front" class="front"></div>
 581                                         <div class="back lev4CardBg"></div>
 582                                 </div>
 583                         </div>
 584                         <div id="level4_card_24" class="cardContainer">
 585                                 <div id="l4c24" class="card">
 586                                         <div id="level4_card_24_front" class="front"></div>
 587                                         <div class="back lev4CardBg"></div>
 588                                 </div>
 589                         </div>
 590                 </div>
 591
 592                 <div id="finaleIntro" class="game_page" style="display: none">
 593                         <div id="finaleIntro_bg"></div>
 594                         <div id="finaleIntro_introducing_title"
 595                                 class="finaleIntro_sancreek_text">INTRODUCING THE</div>
 596                         <div id="finaleIntro_finale_title"
 597                                 class="finaleIntro_romantique_text">FINALE</div>
 598                         <div id="finaleIntro_memorymatch_title"
 599                                 class="finaleIntro_sancreek_text2">MEMORY MATCH!</div>
 600                 </div>
 601
 602                 <div id="victory" class="game_page" style="display: none">
 603                         <div id="victory_bg"></div>
 604                         <div id="victory_playagain_box">
 605                                 <img id="victory_playagain_lines" src="images/play_again_lines.png" />
 606                                 <div id="victory_playagain_title"
 607                                         class="victory_playagain_title_text">PLAY AGAIN</div>
 608                         </div>
 609                         <canvas id="curvedText" width="690" height="210"></canvas>
 610                 </div>
 611
 612                 <!-- Game count indicator that looks like a hand holding a card. -->
 613                 <div id="handitem" style="display: none">
 614                         <div id="handitem_card_rect">
 615                                 <div id="handitem_gamenum_title" class="handitem_gamenum_title_text">GAME
 616                                         3</div>
 617                                 <div id="handitem_stars_container">
 618                                         <img id="handleitem_star1" src="images/purple_star.png"></img> <img
 619                                                 id="handleitem_star2" src="images/star.png"></img> <img
 620                                                 id="handleitem_star3" src="images/star.png"></img>
 621                                 </div>
 622                         </div>
 623                 </div>
 624
 625                 <!-- Home-button that exits the current game and returs back to main view. -->
 626                 <div id="homebutton_backtomain" style="display: none">
 627                         <img id="homebutton_icon" src="images/home.png"></img> <span
 628                                 id="homebutton_text" class="homebutton_backtomain_text"
 629                                 class="debugRect">HOME</span>
 630                 </div>
 631         </div>
 632
 633
 634         <audio id="flipcard_sound1" preload="auto">
 635         <source src="audio/FlipCard.wav" type="audio/wav" /></audio>
 636         <audio id="flipcard_sound2" preload="auto">
 637         <source src="audio/FlipCard.wav" type="audio/wav" /></audio>
 638         <audio id="startGame_sound" preload="auto" autoplay="autoplay">
 639         <source src="audio/StartPage.wav" type="audio/wav" /></audio>
 640         <audio id="finaleIntro_sound" preload="auto">
 641         <source src="audio/TheFinale.wav" type="audio/wav" /></audio>
 642         <audio id="winLevel_sound" preload="auto">
 643         <source src="audio/WinLevel.wav" type="audio/wav" /></audio>
 644         <audio id="victory_sound" preload="auto">
 645         <source src="audio/YouWin.wav" type="audio/wav" /></audio>
 646 </body>
 647 </html>