jeu.html (12926B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>PtiClic pre-alpha 0.2</title> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="target-densitydpi=device-dpi" /> 7 <script src="ressources/jquery-1.5.1.min.js"></script> 8 <script src="ressources/jquery-ui-1.8.11.custom.min.js"></script> 9 <script src="ressources/jquery.ba-hashchange.min.js"></script> 10 <script src="ressources/jquery.JSON.js"></script> 11 <script src="ressources/my-extensions.js"></script> 12 <script src="ressources/pticlic.js"></script> 13 <script src="server.php?callback=loadPrefs&action=7"></script> 14 <style> 15 .screen { display:none; } 16 img { border:none; } 17 body, html { margin:0; padding:0; height:100%; overflow:hidden; } 18 .screen { width:100%; height:100%; position:absolute; } 19 .highlight { display:none; width:100%; height:100%; border-width:medium; border-style:solid; -moz-border-radius:2em; -webkit-border-radius:2em; -o-border-radius:2em; position:absolute; } 20 #frontpage a { display:inline-block; width:30%; top:32%; position:absolute; } 21 #frontpage .icon-container img { display:block; position:relative; margin:0 auto; } 22 #frontpage .icon-label { width:100%; height:30%; position:relative; } 23 .button { text-decoration:none; padding:0.4em; margin:0; display:inline-block; border-width:medium; border-style:solid; border-radius:0.4em; -moz-border-radius:0.4em; -webkit-border-radius:0.4em; -o-border-radius:0.4em; cursor:pointer; } 24 .relationBox { border-width:3px; border-style:solid; border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; -o-border-radius:1em; padding:0.5em; width:95%; margin:0 auto; min-height: 20px; } 25 .formElement { width:46%; height:12%; position:absolute; } 26 #score { text-align:center; } 27 .marginBox { width:90%; height:90%; top:5%; left:5%; position:absolute; } 28 #message { left:30%; top:5%; width:40%; height:10%; position:absolute; border-width:medium; border-style:solid; border-radius:0.5em; -moz-border-radius:0.5em; -webkit-border-radius:0.5em; -o-border-radius:0.5em; text-align:center; opacity:0.9; } 29 #theme input { position:absolute; left: -9000px; top:-9000px; } 30 a { text-decoration:none; display:block; } 31 p > a { display:inline; text-decoration:underline; } 32 .fpButton:hover .highlight, .fpButton:focus .highlight { display:block; } 33 34 .transition { transition:all 0.7s linear; -moz-transition:all 0.7s linear; -webkit-transition:all 0.7s linear; } 35 .transition-bg { transition:background-color 0.7s linear; -moz-transition:background-color 0.7s linear; -webkit-transition:background-color 0.7s linear; } 36 37 #splash, #nojs { background-color:black; color:white; } 38 /* couleurs green */ 39 body.green, .green .screen { background-color:#ffffe0; color:black; } 40 .green .button { color:black; border-color:#4a4; background-color:#f0f8d0; } 41 .green #message { background-color:#f0f8d0; color:black; border-color:#4a4; } 42 .green a { color:black; } 43 .green #info a { color:#4a4; } 44 .green #mc-caption { color:#8b4; } 45 .green #mn-caption-bg { background-color:#f0f8d0; } 46 .green .mn-caption { color:#4a4; } 47 .green .borderbar { background-color:#4a4; } 48 .green .relationBox { background-color:#f0f8d0; border-color:#4a4; } 49 50 .green .highlight { background-color:#f0f8d0; border-color:#4a4; } 51 .green a.relationBox.hot { background-color:yellow; } 52 .green .relationBox:focus, .green .relationBox:hover, 53 .green input:focus+label.button, 54 .green .button:focus, .green .button:hover { border-color: #452; background-color:#aca; outline:none; } 55 .green #info a:hover, .green #info a:focus { color:#552; } 56 57 .green #black-theme-button { color:black; border-color: #000; background-color: #888; } 58 .green input:focus+label.button#black-theme-button, .green #black-theme-button:hover { color:white; border-color: #000; background-color: #444; } 59 60 /* couleurs black */ 61 body.black, .black .screen { background-color:black; color:white; } 62 .black .button { color:white; border-color:#aaa; background-color:#181818; } 63 .black #message { background-color:#222; color:white; border-color:#ccc; } 64 .black a { color:white; } 65 .black #info a { color:#aaa; } 66 .black #mc-caption { color:white; } 67 .black #mn-caption-bg { background-color:#222; } 68 .black .mn-caption { color:#ccc; } 69 .black .borderbar { background-color:#ccc; } 70 .black .relationBox { background-color:#111; border-color:#ccc; } 71 72 .black .highlight { background-color:#222; border-color:#ccc; } 73 .black a.relationBox.hot { background-color:#aaa; } 74 .black .relationBox:focus, .black .relationBox:hover, 75 .black input:focus+label.button, 76 .black .button:focus, .black .button:hover { border-color: #fff; background-color:#444; outline:none; } 77 .black #info a:hover, .black #info a:focus { color:#white; } 78 79 .black #green-theme-button { color:black; border-color:#4a4; background-color:#f0f8d0; } 80 .black input:focus+label.button#green-theme-button, .black #green-theme-button:hover { border-color: #452; background-color:#aca; outline:none; } 81 </style> 82 </head> 83 <body class="green"> 84 <a id="splash" class="screen" href="#frontpage"> 85 <img src="ressources/img/splash.png" class="center" style="width:320px; height: 480px;"/> 86 </a> 87 <div id="frontpage" class="screen fitFontGroup"> 88 <a id="back2site" href="index.php" style="width:23%; height:8%; top:4%; right:3%; position:absolute; padding: 0.1em;" class="fitFont button"> 89 <span class="center">Retour au site</span> 90 </a> 91 <div style="width:50%; height:24%; top:4%; left:25%; position:absolute;" class="fitFont"> 92 <span class="center">PtiClic</span> 93 </div> 94 <a class="fpButton" href="#game" style="right:55%; top:33%;"> 95 <div class="highlight"></div> 96 <div class="icon-container"><img alt="" class="icon" src="ressources/img/72/default.png" /></div> 97 <div class="icon-label subFitFont"><span class="text center">Jouer</span></div> 98 </a> 99 <a class="fpButton" href="#prefs" style="left:55%; top:33%;"> 100 <div class="highlight"></div> 101 <div class="icon-container"><img alt="" class="icon" src="ressources/img/72/default.png" /></div> 102 <div class="icon-label subFitFont"><span class="text center">Préférences</span></div> 103 </a> 104 <a class="fpButton" href="#connection" style="right:55%; top:66%;"> 105 <div class="highlight"></div> 106 <div class="icon-container"><img alt="" class="icon" src="ressources/img/72/default.png" /></div> 107 <div class="icon-label subFitFont"><span class="text dis-connect center">Connexion</span></div> 108 </a> 109 <a class="fpButton" href="#info" style="left:55%; top:66%;"> 110 <div class="highlight"></div> 111 <div class="icon-container"><img alt="" class="icon" src="ressources/img/72/default.png" /></div> 112 <div class="icon-label subFitFont"><span class="text center">À propos</span></div> 113 </a> 114 </div> 115 <div id="game" class="screen"> 116 <div class="header" style="width: 100%; height:20%; position:absolute;"> 117 <div style="width: 90%; height:37.5%; top:7.5%; left:5%; position:absolute;" class="fitFont"> 118 <div id="mc-caption" class="mc center">Mot central</div> 119 </div> 120 <div class="borderbar" style="height:5%; width:100%; top:52.5%; position:absolute;"></div> 121 <div id="mn-caption-bg" style="top:57.5%; height:37.5%; width:100%; position:absolute;"></div> 122 <div id="mn-caption-box" style="width: 90%; height:25%; top:63.75%; left: 5%; position:absolute;" class="fitFont"> 123 </div> 124 <div class="borderbar" style="height:5%; width:100%; top:95%; position:absolute;"></div> 125 </div> 126 <div class="relations fitFontGroup" style="height:80%; width:100%; top:20%; position:absolute;"> 127 </div> 128 </div> 129 <div id="score" class="screen"> 130 <h1 class="fitFont" style="width:100%; height:10%; top: 4%; position:absolute; margin:0; text-align:center;">Score total : <span class="scoreTotal"></span></h1> 131 <div class="scores fitFont" style="width:100%; height:50%; top:18%; position:absolute;"></div> 132 <p class="fitFont" style="text-align: center; width:90%; height:12%; top:72%; left:5%; position:absolute; margin:0; padding:0;"> 133 <a id="jaime" class="button" href="#frontpage" style="width30%; right:65%; position:absolute;">J'♥ cette partie</a> 134 <a id="jaimepas" class="button" href="#frontpage" style="width30%; left:65%; position:absolute;">J'♥ pas cette partie</a> 135 </p> 136 <p class="fitFont" style="clear:both; text-align: center; width:90%; height:12%; top:86%; left:5%; position:absolute; margin:0; padding:0;"> 137 <a class="button" href="#frontpage">J'ai vu !</a> 138 </p> 139 </div> 140 <div id="prefs" class="screen"> 141 <form action="#" method="GET" class="fitFontGroup" style="width:100%; height:100%;"> 142 <fieldset id="theme" class="subFitFont" style="width:50%; max-height:25%; margin:0 auto; top:25%; position:relative;"> 143 <legend>Thème</legend> 144 <div style="float:left;"> 145 <input type="radio" id="theme-green" name="theme" value="green" /> 146 <label id="green-theme-button" class="button" for="theme-green" style="margin: 0.2em;">Colline verdoyante</label> 147 </div> 148 <div style="float:right;"> 149 <input type="radio" id="theme-black" name="theme" value="black" /> 150 <label id="black-theme-button" class="button" for="theme-black" style="margin: 0.2em;">Bas-fond de cachot</label> 151 </div> 152 </fieldset> 153 <div class="formElement subFitFont" style="top:75%; right:52%; text-align:right;"> 154 <input class="button setFont" type="reset" value="Annuler" /> 155 </div> 156 <div class="formElement subFitFont" style="top:75%; left:52%; text-align:left;"> 157 <input class="button setFont" type="submit" value="Appliquer" /> 158 </div> 159 </form> 160 </div> 161 <div id="connection" class="screen"> 162 <form action="#" method="GET" style="width:100%; height:100%;" class="fitFontGroup"> 163 <div class="formElement subFitFont" style="right: 52%; top: 25%; text-align:right;"><label id="user-label" for="user">Login : </label></div> 164 <div class="formElement subFitFont" style="left: 52%; top: 25%; text-align:left;"><input type="text" name="user" id="user" class="setFont" /></div> 165 <div class="formElement subFitFont" style="right: 52%; top: 50%; text-align:right;"><label id="passwd-label" for="passwd">Mot de passe : </label></div> 166 <div class="formElement subFitFont" style="left: 52%; top: 50%; text-align:left;"><input type="password" name="passwd" id="passwd" class="setFont" /></div> 167 <div class="formElement subFitFont" style="right: 52%; top: 75%; text-align:right;"> 168 <a class="back button" href="#frontpage">Retour</a> 169 </div> 170 <div class="formElement subFitFont" style="left: 52%; top: 75%; text-align:left;"> 171 <input class="button setFont" type="submit" value="Se connecter" /> 172 </div> 173 </form> 174 </div> 175 <div id="info" class="screen"> 176 <div class="marginBox fitFont" style="height: 76%;"> 177 <p> 178 PtiClic a été conçu et développé par Mathieu Lafourcade 179 (LIRMM - Université Montpellier 2) et Virginie Zampa 180 (LIDILEM - Université Stendhal Grenoble 3) 181 </p> 182 <p> 183 La présente version pour SmartPhone sous Android™, en cours 184 de développement a été conçue et réalisée par des 185 étudiants en Master 1 à l'Université Montpellier 2 : 186 Yoann BONAVERO, Bertrand BRUN, John CHARRON et 187 Georges DUPÉRON. 188 </p> 189 <p> 190 Cette version du PtiClic est une version Alpha. Elle n'est 191 pas exempte de bogues. 192 </p> 193 <p> 194 Si vous souhaitez participer au projet en tant que 195 Bêta-testeur, rendez-vous sur le site 196 <a href="http://pticlic.fr/">http://pticlic.fr</a> 197 pour vous y inscrire. 198 </p> 199 <p> 200 Si vous souhaitez signaler des bogues ou nous faire part 201 de vos commentaires, vous pouvez nous contacter par 202 courriel à l'adresse suivante : <a href="mailto:pticlic.android.beta@gmail.com">pticlic.android.beta@gmail.com</a> 203 </p> 204 <p style="font-size:50%"> 205 Android is a trademark of Google Inc. Use of this trademark is subject to <a href="http://www.google.com/permissions/index.html">Google Permissions</a>. 206 </p> 207 </div> 208 <p class="fitFont" style="text-align: center; width:90%; height:12%; top:86%; left:5%; position:absolute; margin:0; padding:0;"> 209 <a class="button" href="#frontpage">Retour</a> 210 </p> 211 </div> 212 <div id="templates" style="display: none;"> 213 <a href="#" class="relationBox subFitFont"> 214 <img class="icon" alt="" src="ressources/img/72/default.png" style="width:72px; height:72px; float:left; vertical-align:middle;" /><!-- ignorer l'espace. 215 --><span class="text" style="vertical-align:middle;"></span><span class="display:block; clear:both;"></span> 216 </a> 217 <div class="scoreLine"> 218 <span class="word"></span> (<span class="score"></span>) 219 </div> 220 </div> 221 <div id="message" class="fitFont"><span class="text center">PtiClic…</span></div> 222 </body> 223 </html>