www

commit b51d17fcf84592df5b120ab23e73ed32d7a80bc3
parent b02831efef25706a9c947f1688428833336c2ae4
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date:   Thu, 21 Apr 2011 11:33:11 +0200

Page d'accueil.

Diffstat:
M
code/html5/frontpage.html
 | 
32
++++++++++++++++++++++++--------
M
code/html5/frontpage.js
 | 
64
++++++++++++++++------------------------------------------------
M
code/html5/my-extensions.js
 | 
1
-

3 files changed, 40 insertions(+), 57 deletions(-)
diff --git a/code/html5/frontpage.html b/code/html5/frontpage.html
@@ -11,6 +11,10 @@ body {
 #screen {
 	background-color : #FFFFE0;
 }
+
+.button {
+	text-align: center;
+}
 		</style>
 		<script src="jquery-1.5.1.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>
 
 			<span id="title">PtiClic</span>
-			<img class="game icon" alt="" src="img/mode_normal.png" />
-			<span class="game text">Jouer</span>
-			<img class="prefs icon" alt="" src="img/config.png" />
-			<span class="prefs text">Configuration</span>
-			<img class="connection icon" alt="" src="img/config.png" />
-			<span class="connection text">Connexion</span>
-			<img class="about icon" alt="" src="img/rel/default.png" />
-			<span class="about text">A Propos</span>
+			<div class="button game">
+				<img class="icon" alt="" src="img/mode_normal.png" />
+				<br />
+				<span class="text">Jouer</span>
+			</div>
+			<div class="button prefs">
+				<img class="icon" alt="" src="img/config.png" />
+				<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>
 	</body>
 </html>
diff --git a/code/html5/frontpage.js b/code/html5/frontpage.js
@@ -21,59 +21,27 @@ function jss() {
 	$("#title-block")
 		.wh(w*0.5, h*0.2)
 		.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")
-		.fitIn("#title-block", 0.1);
-	$(".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());
-
+		.fitIn("#title-block", 0.2);
+	
 	$(".text")
-		.fitIn("#game-text-block", 0.2);
-	$(".game.text")
-		.center($("#game-text-block").center());
-	$(".about.text")
-		.center($("#about-text-block").center());
-	$(".connection.text")
-		.center($("#connection-text-block").center());
-	$(".prefs.text")
-		.center($("#prefs-text-block").center());
+		.fitFont(w*0.25,(h-(72*4))*0.8*0.5,10);
+	$(".button")
+		.width(w*0.4);
+
+	$(".button.game")
+		.northEast({left:w*0.45,top:h*0.3});
+	$(".button.about")
+		.northWest({left:w*0.55,top:h*0.3});
+	$(".button.connection")
+		.southEast({left:w*0.45,top:h*0.9});
+	$(".button.prefs")
+		.southWest({left:w*0.55,top:h*0.9});
+	
 }
 
 $(function() {
 	$(window).resize(jss);
 	jss();
+	$(".button.game").click(function(){alert("Pour jouer, il faut payer !");});
 });
 \ No newline at end of file
diff --git a/code/html5/my-extensions.js b/code/html5/my-extensions.js
@@ -58,7 +58,6 @@ $.fn.fitIn = function(e, t, r, b, l) {
 	b *= h;
 	l *= w;
 	this.fitFont(w - r - l, h - t - b, 20).center(e.center());
-	console.log(this);
 	return this;
 }