Commit ba814e442304e2f1f76b2cf51f0d48b2a1d344ff
1 parent
8ba25957
GUI revue
Showing
5 changed files
with
66 additions
and
38 deletions
Show diff stats
public/index.html
| @@ -10,15 +10,15 @@ | @@ -10,15 +10,15 @@ | ||
| 10 | <script type="text/javascript" src="/main.js"></script> | 10 | <script type="text/javascript" src="/main.js"></script> |
| 11 | </head> | 11 | </head> |
| 12 | <body> | 12 | <body> |
| 13 | - <div class="row"> | ||
| 14 | - <div class="col-md-4" style="margin-top: 30px"> | 13 | + <div id="header" class="row"> |
| 14 | + <div class="col-md-4"> | ||
| 15 | <p>Un seul objectif : battre le meilleur score dans l'aventure épique de Trosh !<br/> | 15 | <p>Un seul objectif : battre le meilleur score dans l'aventure épique de Trosh !<br/> |
| 16 | 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> | 16 | 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> |
| 17 | </div> | 17 | </div> |
| 18 | <div class="col-md-4"> | 18 | <div class="col-md-4"> |
| 19 | <img src="title.png" class="center-block rainbow" id="logo"/> | 19 | <img src="title.png" class="center-block rainbow" id="logo"/> |
| 20 | </div> | 20 | </div> |
| 21 | - <div class="col-md-4" style="margin-top: 30px"> | 21 | + <div class="col-md-4"> |
| 22 | <p>Le gagnant remporte une récompense ... mousseuse !</p> | 22 | <p>Le gagnant remporte une récompense ... mousseuse !</p> |
| 23 | <hr/> | 23 | <hr/> |
| 24 | <p>Une ch'tiote fin ? Venez manger nos bruschettas préparées avec amour pour 2€ seulement !</p> | 24 | <p>Une ch'tiote fin ? Venez manger nos bruschettas préparées avec amour pour 2€ seulement !</p> |
| @@ -26,12 +26,24 @@ | @@ -26,12 +26,24 @@ | ||
| 26 | 26 | ||
| 27 | </div> | 27 | </div> |
| 28 | <div id="main" class="row"> | 28 | <div id="main" class="row"> |
| 29 | - <div id="best" class="col-md-8"> | 29 | + <div id="best" class="col-md-7"> |
| 30 | </div> | 30 | </div> |
| 31 | - <div id="scores" class="col-md-4"> | 31 | + <div id="scores" class="col-md-5"> |
| 32 | + <h1>Scores</h1> | ||
| 32 | <ol> | 33 | <ol> |
| 33 | </ol> | 34 | </ol> |
| 34 | </div> | 35 | </div> |
| 35 | </div> | 36 | </div> |
| 37 | + <div id="footer" class="row"> | ||
| 38 | + <div class="col-md-3"> | ||
| 39 | + <img src="logo.svg" /> | ||
| 40 | + </div> | ||
| 41 | + <div class="col-md-6"> | ||
| 42 | + <p>Trosh est un jeu développé par Maurice de stabyourself.net et édité par le Club Info.</p> | ||
| 43 | + </div> | ||
| 44 | + <div class="col-md-3"> | ||
| 45 | + <img src="polydance.png" class="center-block" /> | ||
| 46 | + </div> | ||
| 47 | + </div> | ||
| 36 | </body> | 48 | </body> |
| 37 | </html> | 49 | </html> |
public/logo.svg
| @@ -12,9 +12,9 @@ | @@ -12,9 +12,9 @@ | ||
| 12 | version="1.1" | 12 | version="1.1" |
| 13 | x="0px" | 13 | x="0px" |
| 14 | y="0px" | 14 | y="0px" |
| 15 | - width="1024" | ||
| 16 | - height="594.44067" | ||
| 17 | - viewBox="0 0 1024 594.44067" | 15 | + width="937.22034" |
| 16 | + height="483.7966" | ||
| 17 | + viewBox="0 0 937.22034 483.7966" | ||
| 18 | enable-background="new 0 0 1024 1024" | 18 | enable-background="new 0 0 1024 1024" |
| 19 | xml:space="preserve" | 19 | xml:space="preserve" |
| 20 | id="svg2" | 20 | id="svg2" |
| @@ -22,7 +22,7 @@ | @@ -22,7 +22,7 @@ | ||
| 22 | sodipodi:docname="logo.svg"><metadata | 22 | sodipodi:docname="logo.svg"><metadata |
| 23 | id="metadata58"><rdf:RDF><cc:Work | 23 | id="metadata58"><rdf:RDF><cc:Work |
| 24 | rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type | 24 | rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type |
| 25 | - rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs | 25 | + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs |
| 26 | id="defs56" /><sodipodi:namedview | 26 | id="defs56" /><sodipodi:namedview |
| 27 | pagecolor="#ffffff" | 27 | pagecolor="#ffffff" |
| 28 | bordercolor="#666666" | 28 | bordercolor="#666666" |
| @@ -32,30 +32,23 @@ | @@ -32,30 +32,23 @@ | ||
| 32 | guidetolerance="10" | 32 | guidetolerance="10" |
| 33 | inkscape:pageopacity="0" | 33 | inkscape:pageopacity="0" |
| 34 | inkscape:pageshadow="2" | 34 | inkscape:pageshadow="2" |
| 35 | - inkscape:window-width="1596" | ||
| 36 | - inkscape:window-height="861" | 35 | + inkscape:window-width="1600" |
| 36 | + inkscape:window-height="882" | ||
| 37 | id="namedview54" | 37 | id="namedview54" |
| 38 | showgrid="false" | 38 | showgrid="false" |
| 39 | inkscape:zoom="0.4609375" | 39 | inkscape:zoom="0.4609375" |
| 40 | - inkscape:cx="172.26285" | ||
| 41 | - inkscape:cy="403.71425" | 40 | + inkscape:cx="-83.737149" |
| 41 | + inkscape:cy="366.83289" | ||
| 42 | inkscape:window-x="0" | 42 | inkscape:window-x="0" |
| 43 | - inkscape:window-y="18" | 43 | + inkscape:window-y="1042" |
| 44 | inkscape:window-maximized="0" | 44 | inkscape:window-maximized="0" |
| 45 | inkscape:current-layer="svg2" | 45 | inkscape:current-layer="svg2" |
| 46 | fit-margin-top="0" | 46 | fit-margin-top="0" |
| 47 | fit-margin-left="0" | 47 | fit-margin-left="0" |
| 48 | fit-margin-right="0" | 48 | fit-margin-right="0" |
| 49 | fit-margin-bottom="0" /><g | 49 | fit-margin-bottom="0" /><g |
| 50 | - id="Fond" | ||
| 51 | - transform="scale(1,0.58050847)"><rect | ||
| 52 | - width="1024" | ||
| 53 | - height="1024" | ||
| 54 | - id="rect5" | ||
| 55 | - x="0" | ||
| 56 | - y="0" /></g><g | ||
| 57 | id="Blanc" | 50 | id="Blanc" |
| 58 | - transform="translate(0,-214.77966)"><g | 51 | + transform="translate(-43.389831,-288.54237)"><g |
| 59 | id="Le_Club_Info" | 52 | id="Le_Club_Info" |
| 60 | transform="translate(-36.1065,0)"><path | 53 | transform="translate(-36.1065,0)"><path |
| 61 | 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" | 54 | 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 @@ | @@ -139,6 +132,6 @@ | ||
| 139 | id="path50" | 132 | id="path50" |
| 140 | inkscape:connector-curvature="0" | 133 | inkscape:connector-curvature="0" |
| 141 | style="fill:#ffffff" /><polygon | 134 | style="fill:#ffffff" /><polygon |
| 142 | - points="755.865,454.218 743.441,467.577 750.841,468.891 763.265,455.531 " | 135 | + points="763.265,455.531 755.865,454.218 743.441,467.577 750.841,468.891 " |
| 143 | id="polygon52" | 136 | id="polygon52" |
| 144 | style="fill:#ffffff" /></g></g></svg> | 137 | style="fill:#ffffff" /></g></g></svg> |
| 145 | \ No newline at end of file | 138 | \ No newline at end of file |
public/main.js
| @@ -22,11 +22,13 @@ $(function() { | @@ -22,11 +22,13 @@ $(function() { | ||
| 22 | function redrawScores() { | 22 | function redrawScores() { |
| 23 | var sortable = []; | 23 | var sortable = []; |
| 24 | scores.sort(function(b, a) {return a.score - b.score}) | 24 | scores.sort(function(b, a) {return a.score - b.score}) |
| 25 | - var list = $('#lead ol'); | 25 | + var list = $('#scores ol'); |
| 26 | list.empty(); | 26 | list.empty(); |
| 27 | for (i in scores) { | 27 | for (i in scores) { |
| 28 | - var obj = scores[i]; | ||
| 29 | - list.append($('<li>').text(obj.score + ' - ' + obj.name)); | 28 | + if (i < 15) { |
| 29 | + var obj = scores[i]; | ||
| 30 | + list.append($('<li>').text(obj.score + ' - ' + obj.name)); | ||
| 31 | + } | ||
| 30 | } | 32 | } |
| 31 | } | 33 | } |
| 32 | 34 |
285 KB
public/style.css
| 1 | body { | 1 | body { |
| 2 | + position: fixed; | ||
| 3 | + width: 100%; | ||
| 4 | + height: 100%; | ||
| 2 | background: black; | 5 | background: black; |
| 3 | color: white; | 6 | color: white; |
| 4 | font-family: "GeosansLight"; | 7 | font-family: "GeosansLight"; |
| 5 | padding: 30px; | 8 | padding: 30px; |
| 6 | overflow: hidden; | 9 | overflow: hidden; |
| 10 | + font-size: 17pt; | ||
| 7 | } | 11 | } |
| 8 | 12 | ||
| 9 | -p { | ||
| 10 | - font-size: 150%; | 13 | +#header { |
| 14 | + margin-top: 30px; | ||
| 11 | } | 15 | } |
| 12 | 16 | ||
| 13 | #logo { | 17 | #logo { |
| 14 | - margin-top: 50px; | 18 | + margin-top: 20px; |
| 15 | width: 100%; | 19 | width: 100%; |
| 16 | image-rendering: -moz-crisp-edges; | 20 | image-rendering: -moz-crisp-edges; |
| 17 | } | 21 | } |
| 18 | 22 | ||
| 19 | -#tweets { | ||
| 20 | - padding: 10px; | 23 | +#main { |
| 24 | + margin-top: 20px; | ||
| 25 | + font-family: Arcadepix; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +#scores { | ||
| 29 | + font-size: 110%; | ||
| 30 | +} | ||
| 31 | + | ||
| 32 | +#scores h1 { | ||
| 33 | + font-weight: bold; | ||
| 21 | } | 34 | } |
| 22 | 35 | ||
| 23 | -#lead { | ||
| 24 | - font-size: 150%; | ||
| 25 | - padding: 10px; | 36 | +#scores li { |
| 37 | + text-transform: uppercase; | ||
| 26 | } | 38 | } |
| 27 | 39 | ||
| 28 | -#sub { | ||
| 29 | - min-height: 100px; | 40 | +#footer { |
| 41 | + position: absolute; | ||
| 42 | + bottom: 20px; | ||
| 43 | + height: 100px; | ||
| 44 | + width: 100%; | ||
| 45 | +} | ||
| 46 | + | ||
| 47 | +#footer p { | ||
| 48 | + margin-top: 50px; | ||
| 49 | + font-size: 75%; | ||
| 50 | + text-align: center; | ||
| 30 | } | 51 | } |
| 31 | 52 | ||
| 32 | -.tag { | ||
| 33 | - margin-left: 50px; | 53 | +#footer div, #footer div img { |
| 54 | + height: 100%; | ||
| 34 | } | 55 | } |