suzanne.soy/2011-m1s2-ter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Page d'accueil.

Browse Source
This commit is contained in:
Georges Dupéron 2011-04-21 11:33:11 +02:00
parent b02831efef
commit b51d17fcf8
3 changed files with 40 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
code/html5/frontpage.html
View File

@ -11,6 +11,10 @@ body {
#screen { #screen {
background-color : #FFFFE0; background-color : #FFFFE0;
} }
.button {
text-align: center;
}
</style> </style>
<script src="jquery-1.5.1.min.js"></script> <script src="jquery-1.5.1.min.js"></script>
<script src="jquery-ui-1.8.11.custom.min.js"></script> <script src="jquery-ui-1.8.11.custom.min.js"></script>
@ -30,14 +34,26 @@ body {
<div id="about-text-block"></div> <div id="about-text-block"></div>
<span id="title">PtiClic</span> <span id="title">PtiClic</span>
<img class="game icon" alt="" src="img/mode_normal.png" /> <div class="button game">
<span class="game text">Jouer</span> <img class="icon" alt="" src="img/mode_normal.png" />
<img class="prefs icon" alt="" src="img/config.png" /> <br />
<span class="prefs text">Configuration</span> <span class="text">Jouer</span>
<img class="connection icon" alt="" src="img/config.png" /> </div>
<span class="connection text">Connexion</span> <div class="button prefs">
<img class="about icon" alt="" src="img/rel/default.png" /> <img class="icon" alt="" src="img/config.png" />
<span class="about text">A Propos</span> <br />
<span class="text">Configuration</span>
</div>
<div class="button connection">
<img class="icon" alt="" src="img/config.png" />
<br />
<span class="text">Connexion</span>
</div>
<div class="button about">
<img class="icon" alt="" src="img/rel/default.png" />
<br />
<span class="text">A Propos</span>
</div>
</div> </div>
</body> </body>
</html> </html>

64
code/html5/frontpage.js
View File

@ -21,59 +21,27 @@ function jss() {
$("#title-block") $("#title-block")
.wh(w*0.5, h*0.2) .wh(w*0.5, h*0.2)
.north($("#screen").north()); .north($("#screen").north());
$("#game-icon-block")
.wh(w*0.25, h*0.2)
.northWest($("#title-block").southWest());
$("#game-text-block")
.wh(w*0.25, h*0.2)
.north($('#game-icon-block').south());
$("#connection-icon-block")
.wh(w*0.25, h*0.2)
.north($('#game-text-block').south());
$("#connection-text-block")
.wh(w*0.25, h*0.2)
.north($('#connection-icon-block').south());
$("#about-icon-block")
.wh(w*0.25, h*0.2)
.northEast($("#title-block").southEast());
$("#about-text-block")
.wh(w*0.25, h*0.2)
.north($('#about-icon-block').south());
$("#prefs-icon-block")
.wh(w*0.25, h*0.2)
.north($('#about-text-block').south());
$("#prefs-text-block")
.wh(w*0.25, h*0.2)
.north($('#prefs-icon-block').south());
$("#title") $("#title")
.fitIn("#title-block", 0.1); .fitIn("#title-block", 0.2);
$(".icon")
.wh(72,72);
$(".game.icon")
.center($("#game-icon-block").center());
$(".about.icon")
.center($("#about-icon-block").center());
$(".prefs.icon")
.center($("#prefs-icon-block").center());
$(".connection.icon")
.center($("#connection-icon-block").center());
$(".text") $(".text")
.fitIn("#game-text-block", 0.2); .fitFont(w*0.25,(h-(72*4))*0.8*0.5,10);
$(".game.text") $(".button")
.center($("#game-text-block").center()); .width(w*0.4);
$(".about.text")
.center($("#about-text-block").center()); $(".button.game")
$(".connection.text") .northEast({left:w*0.45,top:h*0.3});
.center($("#connection-text-block").center()); $(".button.about")
$(".prefs.text") .northWest({left:w*0.55,top:h*0.3});
.center($("#prefs-text-block").center()); $(".button.connection")
.southEast({left:w*0.45,top:h*0.9});
$(".button.prefs")
.southWest({left:w*0.55,top:h*0.9});
} }
$(function() { $(function() {
$(window).resize(jss); $(window).resize(jss);
jss(); jss();
$(".button.game").click(function(){alert("Pour jouer, il faut payer !");});
}); });

1
code/html5/my-extensions.js
View File

@ -58,7 +58,6 @@ $.fn.fitIn = function(e, t, r, b, l) {
b *= h; b *= h;
l *= w; l *= w;
this.fitFont(w - r - l, h - t - b, 20).center(e.center()); this.fitFont(w - r - l, h - t - b, 20).center(e.center());
console.log(this);
return this; return this;
} }