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</title>
  21 <link rel="stylesheet" type="text/css" href="css/license.css"></link>
  22 <link rel="stylesheet" type="text/css" href="css/main.css"></link>
  23 <link rel="stylesheet" type="text/css" href="css/help.css"></link>
  24 <script src="js/jquery-1.7.2.min.js"></script>
  25 <script src="js/help.js"></script>
  26 <script src="js/license.js"></script>
  27 <script src="js/main.js"></script>
  28 </head>
  29 <body>
  30         <div id="main_page" class="game_page">
  31                 <div id="main_bg"></div>
  32                 <div id="main_title"></div>
  33                 <div id="licensebtnl" style="top: 560px; left: 620px;">i</div>
  34                 <div id="main_lvl1btn" class="main_btn_text main_lvl1btn_off"
  35                         onmousedown="this.className='main_btn_text main_lvl1btn_on'">Level
  36                         1</div>
  37                 <div id="main_lvl2btn" class="main_btn_text main_lvl2btn_off"
  38                         onmousedown="this.className='main_btn_text main_lvl2btn_on'">Level
  39                         2</div>
  40                 <div id="main_lvl3btn" class="main_btn_text main_lvl3btn_off"
  41                         onmousedown="this.className='main_btn_text main_lvl3btn_on'">Level
  42                         3</div>
  43                 <div id="main_help" class="helplaunch">?</div>
  44         </div>
  45         <div id="help_dialog" class="helpdialog">
  46                 <div class="inner">
  47                         <div id="help_close" class="close">x</div>
  48                         <div id="help_contents" class="contents">
  49                                 Can you find all the matching pictures?<br>
  50                                 First, choose a level. The higher the level, the more
  51                                 picture cards you’ll get.<br>
  52                                 Then click a face-down card to peek at it. Click another
  53                                 to see if you’ve found a match. If not, they’ll flip back over and
  54                                 you can try again. If they do match, they’ll remain face up, and
  55                                 you’re getting closer to winning! If you get stuck, click Hint to
  56                                 uncover a match. <br>
  57                                 When you finish a game, you can click:<br>
  58                                 <ul>
  59                                         <li>Replay to play that level again</li>
  60                                         <li>Next Level to move up to more picture cards</li>
  61                                         <li>Quit to go back to the beginning</li>
  62                                 </ul>
  63                         </div>
  64                 </div>
  65         </div>
  66         <div id="licensepage" style="display: none">
  67                 <div id="licensetext">
  68                         <div id="licensescroll"></div>
  69                 </div>
  70                 <div id="licensebtnq" class="licensebtn">Back</div>
  71         </div>
  72         <div id="lvl1_page" class="game_page" style="display: none">
  73                 <div id="lvl1_bg"></div>
  74                 <div id="lvl1_bg_mtn3"></div>
  75                 <div id="lvl1_cloud2_4" class="lvl1_cloud2_class"></div>
  76                 <div id="lvl1_cloud2_3" class="lvl1_cloud2_class"></div>
  77                 <div id="lvl1_cloud2_5" class="lvl1_cloud2_class"></div>
  78                 <div id="lvl1_cloud2_6" class="lvl1_cloud2_class"></div>
  79                 <div id="lvl1_cloud2_1" class="lvl1_cloud2_class"></div>
  80                 <div id="lvl1_cloud2_2" class="lvl1_cloud2_class"></div>
  81                 <div id="lvl1_moon"></div>
  82                 <div id="lvl1_bg_mtn1"></div>
  83                 <div id="lvl1_cloud1_5" class="lvl1_cloud1_class"></div>
  84                 <div id="lvl1_cloud1_6" class="lvl1_cloud1_class"></div>
  85                 <div id="lvl1_bg_mtn2"></div>
  86                 <div id="lvl1_cloud1_1" class="lvl1_cloud1_class"></div>
  87                 <div id="lvl1_cloud1_2" class="lvl1_cloud1_class"></div>
  88                 <div id="lvl1_cloud1_3" class="lvl1_cloud1_class"></div>
  89                 <div id="lvl1_cloud1_4" class="lvl1_cloud1_class"></div>
  90                 <div id="lvl1_quit" class="quit">&nbsp;&nbsp;&nbsp;Quit</div>
  91                 <div id="lvl1_matches" class="matches">Matches 0/4</div>
  92                 <div id="lvl1_hint" class="hint">Hint</div>
  93                 <div id="lvl1_hintrays" class="hintrays"></div>
  94                 <div id="lvl1_card1" class="card lvl1_card">
  95                         <div class="front lvl1_card_type1"></div>
  96                         <div class="back lvl1_card_back"></div>
  97                 </div>
  98                 <div id="lvl1_card2" class="card lvl1_card">
  99                         <div class="front lvl1_card_type2"></div>
 100                         <div class="back lvl1_card_back"></div>
 101                 </div>
 102                 <div id="lvl1_card3" class="card lvl1_card">
 103                         <div class="front lvl1_card_type3"></div>
 104                         <div class="back lvl1_card_back"></div>
 105                 </div>
 106                 <div id="lvl1_card4" class="card lvl1_card">
 107                         <div class="front lvl1_card_type4"></div>
 108                         <div class="back lvl1_card_back"></div>
 109                 </div>
 110                 <div id="lvl1_card5" class="card lvl1_card">
 111                         <div class="front lvl1_card_type1"></div>
 112                         <div class="back lvl1_card_back"></div>
 113                 </div>
 114                 <div id="lvl1_card6" class="card lvl1_card">
 115                         <div class="front lvl1_card_type2"></div>
 116                         <div class="back lvl1_card_back"></div>
 117                 </div>
 118                 <div id="lvl1_card7" class="card lvl1_card">
 119                         <div class="front lvl1_card_type3"></div>
 120                         <div class="back lvl1_card_back"></div>
 121                 </div>
 122                 <div id="lvl1_card8" class="card lvl1_card">
 123                         <div class="front lvl1_card_type4"></div>
 124                         <div class="back lvl1_card_back"></div>
 125                 </div>
 126                 <div id="lvl1_help" class="helplaunch">?</div>
 127         </div>
 128         <div id="lvl2_page" class="game_page" style="display: none">
 129                 <div id="lvl2_bg"></div>
 130                 <div id="lvl2_cloud1"></div>
 131                 <div id="lvl2_cloud2"></div>
 132                 <div id="lvl2_cloud3"></div>
 133                 <div id="lvl2_cloud4"></div>
 134                 <div id="lvl2_cloud5"></div>
 135                 <div id="lvl2_cloud6"></div>
 136                 <div id="lvl2_boat"></div>
 137                 <div id="lvl2_waves"></div>
 138                 <div id="lvl2_tree"></div>
 139                 <div id="lvl2_bfish"></div>
 140                 <div id="lvl2_pfish1"></div>
 141                 <div id="lvl2_pfish2"></div>
 142                 <div id="lvl2_drop1"></div>
 143                 <div id="lvl2_drop2"></div>
 144                 <div id="lvl2_drop3"></div>
 145
 146                 <div id="lvl2_quit" class="quit">&nbsp;&nbsp;&nbsp;Quit</div>
 147                 <div id="lvl2_matches" class="matches">Matches 0/6</div>
 148                 <div id="lvl2_hint" class="hint">Hint</div>
 149                 <div id="lvl2_hintrays" class="hintrays"></div>
 150                 <div id="lvl2_card1" class="card lvl2_card">
 151                         <div class="front lvl2_card_type1"></div>
 152                         <div class="back lvl2_card_back"></div>
 153                 </div>
 154                 <div id="lvl2_card2" class="card lvl2_card">
 155                         <div class="front lvl2_card_type2"></div>
 156                         <div class="back lvl2_card_back"></div>
 157                 </div>
 158                 <div id="lvl2_card3" class="card lvl2_card">
 159                         <div class="front lvl2_card_type3"></div>
 160                         <div class="back lvl2_card_back"></div>
 161                 </div>
 162                 <div id="lvl2_card4" class="card lvl2_card">
 163                         <div class="front lvl2_card_type4"></div>
 164                         <div class="back lvl2_card_back"></div>
 165                 </div>
 166                 <div id="lvl2_card5" class="card lvl2_card">
 167                         <div class="front lvl2_card_type5"></div>
 168                         <div class="back lvl2_card_back"></div>
 169                 </div>
 170                 <div id="lvl2_card6" class="card lvl2_card">
 171                         <div class="front lvl2_card_type6"></div>
 172                         <div class="back lvl2_card_back"></div>
 173                 </div>
 174                 <div id="lvl2_card7" class="card lvl2_card">
 175                         <div class="front lvl2_card_type1"></div>
 176                         <div class="back lvl2_card_back"></div>
 177                 </div>
 178                 <div id="lvl2_card8" class="card lvl2_card">
 179                         <div class="front lvl2_card_type2"></div>
 180                         <div class="back lvl2_card_back"></div>
 181                 </div>
 182                 <div id="lvl2_card9" class="card lvl2_card">
 183                         <div class="front lvl2_card_type3"></div>
 184                         <div class="back lvl2_card_back"></div>
 185                 </div>
 186                 <div id="lvl2_card10" class="card lvl2_card">
 187                         <div class="front lvl2_card_type4"></div>
 188                         <div class="back lvl2_card_back"></div>
 189                 </div>
 190                 <div id="lvl2_card11" class="card lvl2_card">
 191                         <div class="front lvl2_card_type5"></div>
 192                         <div class="back lvl2_card_back"></div>
 193                 </div>
 194                 <div id="lvl2_card12" class="card lvl2_card">
 195                         <div class="front lvl2_card_type6"></div>
 196                         <div class="back lvl2_card_back"></div>
 197                 </div>
 198                 <div id="lvl2_help" class="helplaunch">?</div>
 199         </div>
 200         <div id="lvl3_page" class="game_page" style="display: none">
 201                 <div id="lvl3_bg"></div>
 202                 <div id="lvl3_micro_light"></div>
 203                 <div id="lvl3_micro_time"></div>
 204                 <div id="lvl3_mouse"></div>
 205                 <div id="lvl3_drop1"></div>
 206                 <div id="lvl3_drop2"></div>
 207                 <div id="lvl3_blinds"></div>
 208                 <div id="lvl3_cloud1"></div>
 209                 <div id="lvl3_cloud2"></div>
 210
 211                 <div id="lvl3_quit" class="quit">&nbsp;&nbsp;&nbsp;Quit</div>
 212                 <div id="lvl3_matches" class="matches">Matches 0/8</div>
 213                 <div id="lvl3_hint" class="hint">Hint</div>
 214                 <div id="lvl3_hintrays" class="hintrays"></div>
 215                 <div id="lvl3_card1" class="card lvl3_card">
 216                         <div class="front lvl3_card_type1"></div>
 217                         <div class="back lvl3_card_back"></div>
 218                 </div>
 219                 <div id="lvl3_card2" class="card lvl3_card">
 220                         <div class="front lvl3_card_type2"></div>
 221                         <div class="back lvl3_card_back"></div>
 222                 </div>
 223                 <div id="lvl3_card3" class="card lvl3_card">
 224                         <div class="front lvl3_card_type3"></div>
 225                         <div class="back lvl3_card_back"></div>
 226                 </div>
 227                 <div id="lvl3_card4" class="card lvl3_card">
 228                         <div class="front lvl3_card_type4"></div>
 229                         <div class="back lvl3_card_back"></div>
 230                 </div>
 231                 <div id="lvl3_card5" class="card lvl3_card">
 232                         <div class="front lvl3_card_type5"></div>
 233                         <div class="back lvl3_card_back"></div>
 234                 </div>
 235                 <div id="lvl3_card6" class="card lvl3_card">
 236                         <div class="front lvl3_card_type6"></div>
 237                         <div class="back lvl3_card_back"></div>
 238                 </div>
 239                 <div id="lvl3_card7" class="card lvl3_card">
 240                         <div class="front lvl3_card_type7"></div>
 241                         <div class="back lvl3_card_back"></div>
 242                 </div>
 243                 <div id="lvl3_card8" class="card lvl3_card">
 244                         <div class="front lvl3_card_type8"></div>
 245                         <div class="back lvl3_card_back"></div>
 246                 </div>
 247                 <div id="lvl3_card9" class="card lvl3_card">
 248                         <div class="front lvl3_card_type1"></div>
 249                         <div class="back lvl3_card_back"></div>
 250                 </div>
 251                 <div id="lvl3_card10" class="card lvl3_card">
 252                         <div class="front lvl3_card_type2"></div>
 253                         <div class="back lvl3_card_back"></div>
 254                 </div>
 255                 <div id="lvl3_card11" class="card lvl3_card">
 256                         <div class="front lvl3_card_type3"></div>
 257                         <div class="back lvl3_card_back"></div>
 258                 </div>
 259                 <div id="lvl3_card12" class="card lvl3_card">
 260                         <div class="front lvl3_card_type4"></div>
 261                         <div class="back lvl3_card_back"></div>
 262                 </div>
 263                 <div id="lvl3_card13" class="card lvl3_card">
 264                         <div class="front lvl3_card_type5"></div>
 265                         <div class="back lvl3_card_back"></div>
 266                 </div>
 267                 <div id="lvl3_card14" class="card lvl3_card">
 268                         <div class="front lvl3_card_type6"></div>
 269                         <div class="back lvl3_card_back"></div>
 270                 </div>
 271                 <div id="lvl3_card15" class="card lvl3_card">
 272                         <div class="front lvl3_card_type7"></div>
 273                         <div class="back lvl3_card_back"></div>
 274                 </div>
 275                 <div id="lvl3_card16" class="card lvl3_card">
 276                         <div class="front lvl3_card_type8"></div>
 277                         <div class="back lvl3_card_back"></div>
 278                 </div>
 279                 <div id="lvl3_help" class="helplaunch">?</div>
 280         </div>
 281         <div id="win_dlg_page" style="display: none">
 282                 <div id="win_dlg">
 283                         <div id="win_dlg_text">
 284                                 CONGRATULATIONS! <b>YOU WIN!</b>
 285                         </div>
 286                         <div id="win_btn1" class="win_btn1_off"
 287                                 onmousedown="this.className='win_btn1_on'">REPLAY</div>
 288                         <div id="win_btn2" class="win_btn2_off"
 289                                 onmousedown="this.className='win_btn2_on'">NEXT LEVEL</div>
 290                         <div id="win_btn3" class="win_btn3_off"
 291                                 onmousedown="this.className='win_btn3_on'">QUIT</div>
 292                 </div>
 293         </div>
 294
 295         <audio class="lvl1_bg_sound" preload="auto">
 296         <source src="audio/Nightsky.wav" type="audio/wav" /></audio>
 297         <audio class="lvl2_bg_sound" preload="auto">
 298         <source src="audio/Ocean.wav" type="audio/wav" /></audio>
 299         <audio class="lvl3_bg_sound" preload="auto">
 300         <source src="audio/Kitchen.wav" type="audio/wav" /></audio>
 301         <audio class="flip_sound" preload="auto">
 302         <source src="audio/FlipCard.wav" type="audio/wav" /></audio>
 303         <audio class="match_sound" preload="auto">
 304         <source src="audio/GetMatch.wav" type="audio/wav" /></audio>
 305         <audio class="mismatch_sound" preload="auto">
 306         <source src="audio/WrongLose.wav" type="audio/wav" /></audio>
 307         <audio class="click_sound" preload="auto">
 308         <source src="audio/NavClick.wav" type="audio/wav" /></audio>
 309         <audio class="win_sound" preload="auto">
 310         <source src="audio/WinLevel.wav" type="audio/wav" /></audio>
 311 </body>
 312 </html>