204 lines
11 KiB
HTML
204 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>PtiClic pre-alpha 0.2</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="target-densitydpi=device-dpi" />
|
||
<script src="ressources/jquery-1.5.1.min.js"></script>
|
||
<script src="ressources/jquery-ui-1.8.11.custom.min.js"></script>
|
||
<script src="ressources/jquery.ba-hashchange.min.js"></script>
|
||
<script src="ressources/jquery.JSON.js"></script>
|
||
<script src="ressources/my-extensions.js"></script>
|
||
<script src="ressources/pticlic.js"></script>
|
||
<script src="server.php?callback=loadPrefs&action=7"></script>
|
||
<style>
|
||
.screen { display:none; }
|
||
img { border:none; }
|
||
body, html { margin:0; padding:0; height:100%; overflow:hidden; }
|
||
.screen { width:100%; height:100%; position:absolute; }
|
||
.highlight { display:none; width:100%; height:100%; border-width:medium; border-style:solid; border-radius:2em; position:absolute; }
|
||
a:hover .highlight, a:focus .highlight { display:block; }
|
||
#frontpage a { text-decoration:none; display:inline-block; width:30%; top:32%; position:absolute; }
|
||
#frontpage .icon-container img { display:block; position:relative; margin:0 auto; }
|
||
#frontpage .icon-label { width:100%; height:30%; position:relative; }
|
||
.button { text-decoration:none; padding:0.4em; margin:0; display:inline-block; border-width:medium; border-style:solid; border-radius:0.4em; cursor:pointer; }
|
||
.relationBox { border-width:3px; border-style:solid; border-radius:1em; padding:0.5em; width:95%; margin:0 auto; }
|
||
.formElement { width:46%; height:12%; position:absolute; }
|
||
#score { text-align:center; }
|
||
.marginBox { width:90%; height:90%; top:5%; left:5%; position:absolute; }
|
||
#message { left:30%; top:5%; width:40%; height:10%; position:absolute; border-width:medium; border-style:solid; border-radius:0.5em; text-align:center; opacity:0.9; }
|
||
.theme-button input { position:absolute; left: -9000px; top:-9000px; }
|
||
a:focus, :focus, input:focus+label { text-decoration:underline; }
|
||
|
||
.transition { transition:all 0.7s linear; -moz-transition:all 0.7s linear; -webkit-transition:all 0.7s linear; }
|
||
.transition-bg { transition:background-color 0.7s linear; -moz-transition:background-color 0.7s linear; -webkit-transition:background-color 0.7s linear; }
|
||
|
||
#splash, #nojs { background-color:black; color:white; }
|
||
/* couleurs green */
|
||
body, .screen { background-color:#ffffe0; color:black; }
|
||
.green.theme-button .button, .button { color:black; border-color:#4a4; background-color:#f0f8d0; }
|
||
#message { background-color:#f0f8d0; color:black; border-color:#4a4; }
|
||
a { color:black; }
|
||
#info a { color:#4a4; }
|
||
#mc-caption { color:#8b4; }
|
||
#mn-caption-bg { background-color:#f0f8d0; }
|
||
.mn-caption { color:#4a4; }
|
||
.borderbar { background-color:#4a4; }
|
||
.relationBox { background-color:#f0f8d0; border-color:#4a4; }
|
||
.highlight { background-color:#f0f8d0; border-color:#4a4; }
|
||
.hot { background-color:yellow; }
|
||
|
||
/* couleurs black */
|
||
body.black, .black .screen { background-color:black; color:white; }
|
||
.black .button { color:white; border-color:#ccc; background-color:#222; }
|
||
.green .black.theme-button .button { color:white; border-color: #000; background-color: #444; }
|
||
.black #message { background-color:#222; color:white; border-color:#ccc; }
|
||
.black a { color:white; }
|
||
.black #info a { color:#aaa; }
|
||
.black #mc-caption { color:white; }
|
||
.black #mn-caption-bg { background-color:#222; }
|
||
.black .mn-caption { color:#ccc; }
|
||
.black .borderbar { background-color:#ccc; }
|
||
.black .relationBox { background-color:#111; border-color:#ccc; }
|
||
.black .highlight { background-color:#222; border-color:#ccc; }
|
||
.black .hot { background-color:#aaa; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a id="splash" class="screen" href="#frontpage">
|
||
<img src="ressources/img/splash.png" class="center" style="width:320px; height: 480px;"/>
|
||
</a>
|
||
<div id="frontpage" class="screen fitFontGroup">
|
||
<a id="back2site" href="index.php" style="width:23%; height:8%; top:4%; right:3%; position:absolute; padding: 0.1em;" class="fitFont button">
|
||
<span class="center">Retour au site</span>
|
||
</a>
|
||
<div style="width:50%; height:24%; top:4%; left:25%; position:absolute;" class="fitFont">
|
||
<span class="center">PtiClic</span>
|
||
</div>
|
||
<a href="#game" style="right:55%; top:33%;">
|
||
<div class="highlight"></div>
|
||
<div class="icon-container"><img alt="" src="ressources/img/72/default.png" /></div>
|
||
<div class="icon-label subFitFont"><span class="text center">Jouer</span></div>
|
||
</a>
|
||
<a href="#prefs" style="left:55%; top:33%;">
|
||
<div class="highlight"></div>
|
||
<div class="icon-container"><img class="iconFitParent" alt="" src="ressources/img/72/default.png" /></div>
|
||
<div class="icon-label subFitFont"><span class="text center">Préférences</span></div>
|
||
</a>
|
||
<a href="#connection" style="right:55%; top:66%;">
|
||
<div class="highlight"></div>
|
||
<div class="icon-container"><img class="iconFitParent" alt="" src="ressources/img/72/default.png" /></div>
|
||
<div class="icon-label subFitFont"><span class="text center">Connexion</span></div>
|
||
</a>
|
||
<a href="#info" style="left:55%; top:66%;">
|
||
<div class="highlight"></div>
|
||
<div class="icon-container"><img class="iconFitParent" alt="" src="ressources/img/72/default.png" /></div>
|
||
<div class="icon-label subFitFont"><span class="text center">À propos</span></div>
|
||
</a>
|
||
</div>
|
||
<div id="game" class="screen">
|
||
<div style="width: 100%; height:40%; position:absolute;">
|
||
<div style="width: 90%; height:37.5%; top:7.5%; left:5%; position:absolute;" class="fitFont">
|
||
<div id="mc-caption" class="mc center">Mot central</div>
|
||
</div>
|
||
<div class="borderbar" style="height:5%; width:100%; top:52.5%; position:absolute;"></div>
|
||
<div id="mn-caption-bg" style="top:57.5%; height:37.5%; width:100%; position:absolute;"></div>
|
||
<div id="mn-caption-box" style="width: 90%; height:25%; top:63.75%; left: 5%; position:absolute;" class="fitFont">
|
||
</div>
|
||
<div class="borderbar" style="height:5%; width:100%; top:95%; position:absolute;"></div>
|
||
</div>
|
||
<div class="relations fitFontGroup" style="height:60%; width:100%; top:40%; position:absolute;">
|
||
</div>
|
||
</div>
|
||
<div id="score" class="screen">
|
||
<h1 class="fitFont" style="width:100%; height:8%; top: 6%; position:absolute; margin:0; text-align:center;">Score total : <span class="scoreTotal"></span></h1>
|
||
<div class="scores fitFont" style="width:100%; height:62%; top:20%; position:absolute;"></div>
|
||
<p class="fitFont" style="text-align: center; width:90%; height:12%; top:86%; left:5%; position:absolute; margin:0; padding:0;">
|
||
<a class="button" href="#">J'ai vu !</a>
|
||
</p>
|
||
</div>
|
||
<div id="prefs" class="screen">
|
||
<form action="#" method="GET" class="fitFontGroup" style="width:100%; height:100%;">
|
||
<fieldset id="theme" class="subFitFont" style="width:50%; max-height:25%; margin:0 auto; top:25%; position:relative;">
|
||
<legend>Thème</legend>
|
||
<div class="theme-button green" style="float:left;">
|
||
<input type="radio" id="theme-green" name="theme" value="green" />
|
||
<label class="button" for="theme-green" style="margin: 0.2em;">Colline verdoyante</label>
|
||
</div>
|
||
<div class="theme-button black" style="float:right;">
|
||
<input type="radio" id="theme-black" name="theme" value="black" />
|
||
<label class="button" for="theme-black" style="margin: 0.2em;">Bas-fond de cachot</label>
|
||
</div>
|
||
</fieldset>
|
||
<div class="formElement subFitFont" style="top:75%; right:52%; text-align:right;">
|
||
<input class="button setFont" type="reset" value="Annuler" />
|
||
</div>
|
||
<div class="formElement subFitFont" style="top:75%; left:52%; text-align:left;">
|
||
<input class="button setFont" type="submit" value="Appliquer" />
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div id="connection" class="screen">
|
||
<form action="#" method="GET" style="width:100%; height:100%;" class="fitFontGroup">
|
||
<div class="formElement subFitFont" style="right: 52%; top: 25%; text-align:right;"><label id="user-label" for="user">Login : </label></div>
|
||
<div class="formElement subFitFont" style="left: 52%; top: 25%; text-align:left;"><input type="text" name="user" id="user" class="setFont" /></div>
|
||
<div class="formElement subFitFont" style="right: 52%; top: 50%; text-align:right;"><label id="passwd-label" for="passwd">Mot de passe : </label></div>
|
||
<div class="formElement subFitFont" style="left: 52%; top: 50%; text-align:left;"><input type="password" name="passwd" id="passwd" class="setFont" /></div>
|
||
<div class="formElement subFitFont" style="right: 52%; top: 75%; text-align:right;">
|
||
<a class="button" href="#frontpage">Retour</a>
|
||
</div>
|
||
<div class="formElement subFitFont" style="left: 52%; top: 75%; text-align:left;">
|
||
<input class="button setFont" type="submit" value="Se connecter" />
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div id="info" class="screen">
|
||
<div class="marginBox fitFont" style="height: 76%;">
|
||
<p>
|
||
PtiClic a été conçu et développé par Mathieu Lafourcade
|
||
(LIRMM - Université Montpellier 2) et Virginie Zampa
|
||
(LIDILEM - Université Stendhal Grenoble 3)
|
||
</p>
|
||
<p>
|
||
La présente version pour SmartPhone sous Android™, en cours
|
||
de développement a été conçue et réalisée par des
|
||
étudiants en Master 1 à l'Université Montpellier 2 :
|
||
Yoann BONAVERO, Bertrand BRUN, John CHARRON et
|
||
Georges DUPÉRON.
|
||
</p>
|
||
<p>
|
||
Cette version du PtiClic est une version Alpha. Elle n'est
|
||
pas exempte de bogues.
|
||
</p>
|
||
<p>
|
||
Si vous souhaitez participer au projet en tant que
|
||
Bêta-testeur, rendez-vous sur le site
|
||
<a href="http://pticlic.fr/">http://pticlic.fr</a>
|
||
pour vous y inscrire.
|
||
</p>
|
||
<p>
|
||
Si vous souhaitez signaler des bogues ou nous faire part
|
||
de vos commentaires, vous pouvez nous contacter par
|
||
courriel à l'adresse suivante : <a href="mailto:pticlic.android.beta@gmail.com">pticlic.android.beta@gmail.com</a>
|
||
</p>
|
||
<p style="font-size:50%">
|
||
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>.
|
||
</p>
|
||
</div>
|
||
<p class="fitFont" style="text-align: center; width:90%; height:12%; top:86%; left:5%; position:absolute; margin:0; padding:0;">
|
||
<a class="button" href="#">Retour</a>
|
||
</p>
|
||
</div>
|
||
<div id="templates" style="display: none;">
|
||
<div class="relationBox subFitFont">
|
||
<img class="icon" alt="" src="ressources/img/72/default.png" style="width:72px; height:72px; display:inline-block; vertical-align:middle;" />
|
||
<span class="text" style="vertical-align:middle;"></span>
|
||
</div>
|
||
<div class="scoreLine">
|
||
<span class="word"></span> (<span class="score"></span>)
|
||
</div>
|
||
</div>
|
||
<div id="message" class="fitFont"><span class="text center">PtiClic…</span></div>
|
||
</body>
|
||
</html>
|