GUI revue

Geoffrey PREUD'HOMME
1 parent 8ba25957
Showing 5 changed files with 66 additions and 38 deletions Show diff stats
public/index.html
public/logo.svg
public/main.js
public/polydance.png
public/style.css
@@ -10,15 +10,15 @@
         <script type="text/javascript" src="/main.js"></script>
     </head>
     <body>
-        <div class="row">
-            <div class="col-md-4" style="margin-top: 30px">
+        <div id="header" class="row">
+            <div class="col-md-4">
                 <p>Un seul objectif : battre le meilleur score dans l'aventure épique de Trosh !<br/>
                 Alors prépare les flèches pour déplacer Trosh et les autres touches pour utiliser son rayon laser qui sort de ses yeux, et c'est parti !</p>
             </div>
             <div class="col-md-4">
                 <img src="title.png" class="center-block rainbow" id="logo"/>
             </div>
-            <div class="col-md-4" style="margin-top: 30px">
+            <div class="col-md-4">
                 <p>Le gagnant remporte une récompense ... mousseuse !</p>
                 <hr/>
                 <p>Une ch'tiote fin ? Venez manger nos bruschettas préparées avec amour pour 2€ seulement !</p>
@@ -26,12 +26,24 @@
  
         </div>
         <div id="main" class="row">
-            <div id="best" class="col-md-8">
+            <div id="best" class="col-md-7">
             </div>
-            <div id="scores" class="col-md-4">
+            <div id="scores" class="col-md-5">
+                <h1>Scores</h1>
                 <ol>
                 </ol>
             </div>
         </div>
+        <div id="footer" class="row">
+            <div class="col-md-3">
+                <img src="logo.svg" />
+            </div>
+            <div class="col-md-6">
+                <p>Trosh est un jeu développé par Maurice de stabyourself.net et édité par le Club Info.</p>
+            </div>
+            <div class="col-md-3">
+                <img src="polydance.png" class="center-block" />
+            </div>
+        </div>
     </body>
 </html>
@@ -12,9 +12,9 @@
    version="1.1"
    x="0px"
    y="0px"
-   width="1024"
-   height="594.44067"
-   viewBox="0 0 1024 594.44067"
+   width="937.22034"
+   height="483.7966"
+   viewBox="0 0 937.22034 483.7966"
    enable-background="new 0 0 1024 1024"
    xml:space="preserve"
    id="svg2"
@@ -22,7 +22,7 @@
    sodipodi:docname="logo.svg"><metadata
      id="metadata58"><rdf:RDF><cc:Work
          rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
      id="defs56" /><sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
@@ -32,30 +32,23 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1596"
-     inkscape:window-height="861"
+     inkscape:window-width="1600"
+     inkscape:window-height="882"
      id="namedview54"
      showgrid="false"
      inkscape:zoom="0.4609375"
-     inkscape:cx="172.26285"
-     inkscape:cy="403.71425"
+     inkscape:cx="-83.737149"
+     inkscape:cy="366.83289"
      inkscape:window-x="0"
-     inkscape:window-y="18"
+     inkscape:window-y="1042"
      inkscape:window-maximized="0"
      inkscape:current-layer="svg2"
      fit-margin-top="0"
      fit-margin-left="0"
      fit-margin-right="0"
      fit-margin-bottom="0" /><g
-     id="Fond"
-     transform="scale(1,0.58050847)"><rect
-       width="1024"
-       height="1024"
-       id="rect5"
-       x="0"
-       y="0" /></g><g
      id="Blanc"
-     transform="translate(0,-214.77966)"><g
+     transform="translate(-43.389831,-288.54237)"><g
        id="Le_Club_Info"
        transform="translate(-36.1065,0)"><path
          d="m 228.985,750.627 0,-108.617 6.076,0 0,102.393 30.58,0 0,6.225 -36.656,0 z"
@@ -139,6 +132,6 @@
          id="path50"
          inkscape:connector-curvature="0"
          style="fill:#ffffff" /><polygon
-         points="755.865,454.218 743.441,467.577 750.841,468.891 763.265,455.531 "
+         points="763.265,455.531 755.865,454.218 743.441,467.577 750.841,468.891 "
          id="polygon52"
          style="fill:#ffffff" /></g></g></svg>
 \ No newline at end of file
@@ -22,11 +22,13 @@ $(function() {
     function redrawScores() {
         var sortable = [];
         scores.sort(function(b, a) {return a.score - b.score})
-        var list = $('#lead ol');
+        var list = $('#scores ol');
         list.empty();
         for (i in scores) {
-            var obj = scores[i];
-            list.append($('<li>').text(obj.score + ' - ' + obj.name));
+            if (i < 15) {
+                var obj = scores[i];
+                list.append($('<li>').text(obj.score + ' - ' + obj.name));
+            }
         }
     }
  
 body {
+    position: fixed;
+    width: 100%;
+    height: 100%;
     background: black;
     color: white;
     font-family: "GeosansLight";
     padding: 30px;
     overflow: hidden;
+    font-size: 17pt;
 }
  
-p {
-    font-size: 150%;
+#header {
+    margin-top: 30px;
 }
  
 #logo {
-    margin-top: 50px;
+    margin-top: 20px;
     width: 100%;
     image-rendering: -moz-crisp-edges;
 }
  
-#tweets {
-    padding: 10px;
+#main {
+    margin-top: 20px;
+    font-family: Arcadepix;
+}
+
+#scores {
+    font-size: 110%;
+}
+
+#scores h1 {
+    font-weight: bold;
 }
  
-#lead {
-    font-size: 150%;
-    padding: 10px;
+#scores li {
+    text-transform: uppercase;
 }
  
-#sub {
-    min-height: 100px;
+#footer {
+    position: absolute;
+    bottom: 20px;
+    height: 100px;
+    width: 100%;
+}
+
+#footer p {
+    margin-top: 50px;
+    font-size: 75%;
+    text-align: center;
 }
  
-.tag {
-    margin-left: 50px;
+#footer div, #footer div img {
+    height: 100%;
 }