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 </head>
  25 <body>
  26     <!-- The "div.pagebg" is the root level div that will be resized to fill the whole screen area.
  27         This element has children div-elements for each view. These child divs are then shown or hidden
  28         as user navigates between views. -->
  29     <div id="licensepage" style="display: none">
  30         <div id="licensetext"><div id="licensescroll"></div></div>
  31         <div id="licensebtnq" class="licensebtn">Back</div>
  32     </div>
  33     <div id="help_dialog" class="helpdialog">
  34          <div class="inner">
  35            <div id="help_close" class="close"> x </div>
  36            <div id="help_contents" class="contents">
  37                Can you make it through level four,
  38                and find all the matching pictures?
  39                <br><br>
  40                Start your journey at level one. Finish the level one
  41                challenge by finding all the pictures three times.
  42                After you’ve beaten level one, you’ve unlocked level two.
  43                Each level gets tougher with more pictures to match.
  44                <br><br>
  45                Click a face-down picture card to peek at it. Click another
  46                to see if you found a match. If not, they’ll flip back over
  47                and you can try again. If they do match, they’ll remain face up,
  48                and you’re getting closer to winning!
  49                <br><br>
  50                If you want to restart and try a different unlocked level,
  51                click Home and you’ll go back to the beginning.
  52            </div>
  53          </div>
  54     </div>
  55     <div id="pagebg" class="game_page">
  56         <div id="main_page" class="game_page" style="display:block">
  57             <div id="main_bg"></div>
  58             <div id="main_spetacular_title" class="main_sancreek_text2">THE SPECTACULAR</div>
  59             <div id="main_memory_title" class="main_romantique_text">MEMORY</div>
  60             <div id="main_extravaganza_title" class="main_sancreek_text">EXTRAVAGANZA!</div>
  61         </div>
  62
  63         <div id="selLevel_page" class="game_page" style="display:none">
  64             <div id="selLevel_bg"></div>
  65             <div id="selLevel_title" class="selLevel_sancreek_big">CHOOSE A LEVEL</div>
  66             <div id="selLevel_hint" class="selLevel_sancreek_small">YOU MUST UNLOCK EACH LEVEL IN ORDER TO PLAY!</div>
  67
  68             <div id="selLevel_levelCard1" class="selLevel_levelCard">1</div>
  69             <div id="selLevel_levelCard2" class="selLevel_levelCard setLevel_lockedLevel">2</div>
  70             <div id="selLevel_levelCard3" class="selLevel_levelCard setLevel_lockedLevel">3</div>
  71             <div id="selLevel_levelCard4" class="selLevel_levelCard setLevel_lockedLevel">4</div>
  72
  73             <div id="selLevel_resetLocked"></div>
  74             <div id="licensebtnl" style="top: 560px; left: 984px;"> i </div>
  75             <div id="main_help" class="helplaunch"> ? </div>
  76         </div>
  77
  78         <div id="level1" class="game_page" style="display:none">
  79             <div id="level1_bg"></div>
  80             <div id="level1_indicator" class="level1_indicator_text">LEVEL 1</div>
  81
  82             <!-- Cards -->
  83             <div id="level1_card_01" class="cardContainer"><div id="l1c1" class="card"><div id="level1_card_1_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  84             <div id="level1_card_02" class="cardContainer"><div id="l1c2" class="card"><div id="level1_card_2_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  85             <div id="level1_card_03" class="cardContainer"><div id="l1c3" class="card"><div id="level1_card_3_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  86             <div id="level1_card_04" class="cardContainer"><div id="l1c4" class="card"><div id="level1_card_4_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  87             <div id="level1_card_05" class="cardContainer"><div id="l1c5" class="card"><div id="level1_card_5_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  88             <div id="level1_card_06" class="cardContainer"><div id="l1c6" class="card"><div id="level1_card_6_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  89             <div id="level1_card_07" class="cardContainer"><div id="l1c7" class="card"><div id="level1_card_7_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  90             <div id="level1_card_08" class="cardContainer"><div id="l1c8" class="card"><div id="level1_card_8_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  91             <div id="level1_card_09" class="cardContainer"><div id="l1c9" class="card"><div id="level1_card_9_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  92             <div id="level1_card_10" class="cardContainer"><div id="l1c10" class="card"><div id="level1_card_10_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  93             <div id="level1_card_11" class="cardContainer"><div id="l1c11" class="card"><div id="level1_card_11_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  94             <div id="level1_card_12" class="cardContainer"><div id="l1c12" class="card"><div id="level1_card_12_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
  95
  96         </div>
  97
  98         <div id="level2" class="game_page" style="display:none">
  99             <div id="level2_bg"></div>
 100             <div id="level2_indicator" class="level2_indicator_text">LEVEL 2</div>
 101
 102             <!-- Cards -->
 103             <div id="level2_card_01" class="cardContainer"><div id="l2c1" class="card"><div id="level2_card_1_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 104             <div id="level2_card_02" class="cardContainer"><div id="l2c2" class="card"><div id="level2_card_2_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 105             <div id="level2_card_03" class="cardContainer"><div id="l2c3" class="card"><div id="level2_card_3_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 106             <div id="level2_card_04" class="cardContainer"><div id="l2c4" class="card"><div id="level2_card_4_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 107             <div id="level2_card_05" class="cardContainer"><div id="l2c5" class="card"><div id="level2_card_5_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 108             <div id="level2_card_06" class="cardContainer"><div id="l2c6" class="card"><div id="level2_card_6_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 109             <div id="level2_card_07" class="cardContainer"><div id="l2c7" class="card"><div id="level2_card_7_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 110             <div id="level2_card_08" class="cardContainer"><div id="l2c8" class="card"><div id="level2_card_8_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 111             <div id="level2_card_09" class="cardContainer"><div id="l2c9" class="card"><div id="level2_card_9_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 112             <div id="level2_card_10" class="cardContainer"><div id="l2c10" class="card"><div id="level2_card_10_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 113             <div id="level2_card_11" class="cardContainer"><div id="l2c11" class="card"><div id="level2_card_11_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 114             <div id="level2_card_12" class="cardContainer"><div id="l2c12" class="card"><div id="level2_card_12_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 115             <div id="level2_card_13" class="cardContainer"><div id="l2c13" class="card"><div id="level2_card_13_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 116             <div id="level2_card_14" class="cardContainer"><div id="l2c14" class="card"><div id="level2_card_14_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 117             <div id="level2_card_15" class="cardContainer"><div id="l2c15" class="card"><div id="level2_card_15_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 118             <div id="level2_card_16" class="cardContainer"><div id="l2c16" class="card"><div id="level2_card_16_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 119             <div id="level2_card_17" class="cardContainer"><div id="l2c17" class="card"><div id="level2_card_17_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 120             <div id="level2_card_18" class="cardContainer"><div id="l2c18" class="card"><div id="level2_card_18_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
 121         </div>
 122
 123         <div id="level3" class="game_page" style="display:none">
 124             <div id="level3_bg"></div>
 125             <div id="level3_indicator" class="level3_indicator_text">LEVEL 3</div>
 126
 127             <!-- Cards -->
 128             <div id="level3_card_01" class="cardContainer"><div id="l3c1" class="card"><div id="level3_card_1_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 129             <div id="level3_card_02" class="cardContainer"><div id="l3c2" class="card"><div id="level3_card_2_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 130             <div id="level3_card_03" class="cardContainer"><div id="l3c3" class="card"><div id="level3_card_3_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 131             <div id="level3_card_04" class="cardContainer"><div id="l3c4" class="card"><div id="level3_card_4_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 132             <div id="level3_card_05" class="cardContainer"><div id="l3c5" class="card"><div id="level3_card_5_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 133             <div id="level3_card_06" class="cardContainer"><div id="l3c6" class="card"><div id="level3_card_6_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 134             <div id="level3_card_07" class="cardContainer"><div id="l3c7" class="card"><div id="level3_card_7_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 135             <div id="level3_card_08" class="cardContainer"><div id="l3c8" class="card"><div id="level3_card_8_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 136             <div id="level3_card_09" class="cardContainer"><div id="l3c9" class="card"><div id="level3_card_9_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 137             <div id="level3_card_10" class="cardContainer"><div id="l3c10" class="card"><div id="level3_card_10_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 138             <div id="level3_card_11" class="cardContainer"><div id="l3c11" class="card"><div id="level3_card_11_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 139             <div id="level3_card_12" class="cardContainer"><div id="l3c12" class="card"><div id="level3_card_12_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 140             <div id="level3_card_13" class="cardContainer"><div id="l3c13" class="card"><div id="level3_card_13_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 141             <div id="level3_card_14" class="cardContainer"><div id="l3c14" class="card"><div id="level3_card_14_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 142             <div id="level3_card_15" class="cardContainer"><div id="l3c15" class="card"><div id="level3_card_15_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 143             <div id="level3_card_16" class="cardContainer"><div id="l3c16" class="card"><div id="level3_card_16_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 144             <div id="level3_card_17" class="cardContainer"><div id="l3c17" class="card"><div id="level3_card_17_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 145             <div id="level3_card_18" class="cardContainer"><div id="l3c18" class="card"><div id="level3_card_18_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 146             <div id="level3_card_19" class="cardContainer"><div id="l3c19" class="card"><div id="level3_card_19_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 147             <div id="level3_card_20" class="cardContainer"><div id="l3c20" class="card"><div id="level3_card_20_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 148             <div id="level3_card_21" class="cardContainer"><div id="l3c21" class="card"><div id="level3_card_21_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 149             <div id="level3_card_22" class="cardContainer"><div id="l3c22" class="card"><div id="level3_card_22_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 150             <div id="level3_card_23" class="cardContainer"><div id="l3c23" class="card"><div id="level3_card_23_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 151             <div id="level3_card_24" class="cardContainer"><div id="l3c24" class="card"><div id="level3_card_24_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
 152         </div>
 153
 154         <div id="level4" class="game_page" style="display:none">
 155             <div id="level4_bg"></div>
 156             <div id="level4_indicator" class="level3_indicator_text">FINALE!</div>
 157
 158             <!-- Cards -->
 159             <div id="level4_card_01" class="cardContainer"><div id="l4c1" class="card"><div id="level4_card_1_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 160             <div id="level4_card_02" class="cardContainer"><div id="l4c2" class="card"><div id="level4_card_2_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 161             <div id="level4_card_03" class="cardContainer"><div id="l4c3" class="card"><div id="level4_card_3_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 162             <div id="level4_card_04" class="cardContainer"><div id="l4c4" class="card"><div id="level4_card_4_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 163             <div id="level4_card_05" class="cardContainer"><div id="l4c5" class="card"><div id="level4_card_5_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 164             <div id="level4_card_06" class="cardContainer"><div id="l4c6" class="card"><div id="level4_card_6_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 165             <div id="level4_card_07" class="cardContainer"><div id="l4c7" class="card"><div id="level4_card_7_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 166             <div id="level4_card_08" class="cardContainer"><div id="l4c8" class="card"><div id="level4_card_8_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 167             <div id="level4_card_09" class="cardContainer"><div id="l4c9" class="card"><div id="level4_card_9_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 168             <div id="level4_card_10" class="cardContainer"><div id="l4c10" class="card"><div id="level4_card_10_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 169             <div id="level4_card_11" class="cardContainer"><div id="l4c11" class="card"><div id="level4_card_11_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 170             <div id="level4_card_12" class="cardContainer"><div id="l4c12" class="card"><div id="level4_card_12_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 171             <div id="level4_card_13" class="cardContainer"><div id="l4c13" class="card"><div id="level4_card_13_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 172             <div id="level4_card_14" class="cardContainer"><div id="l4c14" class="card"><div id="level4_card_14_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 173             <div id="level4_card_15" class="cardContainer"><div id="l4c15" class="card"><div id="level4_card_15_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 174             <div id="level4_card_16" class="cardContainer"><div id="l4c16" class="card"><div id="level4_card_16_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 175             <div id="level4_card_17" class="cardContainer"><div id="l4c17" class="card"><div id="level4_card_17_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 176             <div id="level4_card_18" class="cardContainer"><div id="l4c18" class="card"><div id="level4_card_18_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 177             <div id="level4_card_19" class="cardContainer"><div id="l4c19" class="card"><div id="level4_card_19_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 178             <div id="level4_card_20" class="cardContainer"><div id="l4c20" class="card"><div id="level4_card_20_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 179             <div id="level4_card_21" class="cardContainer"><div id="l4c21" class="card"><div id="level4_card_21_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 180             <div id="level4_card_22" class="cardContainer"><div id="l4c22" class="card"><div id="level4_card_22_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 181             <div id="level4_card_23" class="cardContainer"><div id="l4c23" class="card"><div id="level4_card_23_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 182             <div id="level4_card_24" class="cardContainer"><div id="l4c24" class="card"><div id="level4_card_24_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
 183         </div>
 184
 185         <div id="finaleIntro" class="game_page" style="display:none">
 186             <div id="finaleIntro_bg"></div>
 187             <div id="finaleIntro_introducing_title" class="finaleIntro_sancreek_text">INTRODUCING THE</div>
 188             <div id="finaleIntro_finale_title" class="finaleIntro_romantique_text">FINALE</div>
 189             <div id="finaleIntro_memorymatch_title" class="finaleIntro_sancreek_text2">MEMORY MATCH!</div>
 190         </div>
 191
 192         <div id="victory" class="game_page" style="display:none">
 193             <div id="victory_bg"></div>
 194             <div id="victory_playagain_box">
 195                 <img id="victory_playagain_lines" src="images/play_again_lines.png"/>
 196                 <div id="victory_playagain_title" class="victory_playagain_title_text">PLAY AGAIN</div>
 197             </div>
 198             <canvas id="curvedText" width="690" height="210"></canvas>
 199         </div>
 200
 201         <!-- Game count indicator that looks like a hand holding a card. -->
 202         <div id="handitem" style="display:none">
 203             <div id="handitem_card_rect">
 204                 <div id="handitem_gamenum_title" class="handitem_gamenum_title_text">GAME 3</div>
 205                 <div id="handitem_stars_container">
 206                     <img id="handleitem_star1" src="images/purple_star.png"></img>
 207                     <img id="handleitem_star2" src="images/star.png"></img>
 208                     <img id="handleitem_star3" src="images/star.png"></img>
 209                 </div>
 210             </div>
 211         </div>
 212
 213         <!-- Home-button that exits the current game and returs back to main view. -->
 214         <div id="homebutton_backtomain" style="display:none">
 215             <img id="homebutton_icon" src="images/home.png"></img>
 216             <span id="homebutton_text" class="homebutton_backtomain_text" class="debugRect">HOME</span>
 217         </div>
 218     </div>
 219     <script src="js/help.js"></script>
 220     <script src="js/license.js"></script>
 221     <script src="js/jquery-1.7.2.min.js"></script>
 222     <script src="js/main.js"></script>
 223         <script src="js/vec2.js"></script>
 224     <script src="js/utils.js"></script>
 225     <script src="js/curvedtextdrawer.js"></script>
 226 </body>
 227 </html>