pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

src/

Browse Source
Golfier
frperalde 5 years ago
parent 306df22344
commit cb1454afbb
2 changed files with 370 additions and 311 deletions
Show Stats Download Patch File Download Diff File

219
src/css/style.css
Unescape View File

@ -30,15 +30,8 @@ body{
/* versions mobiles, tablette à faire*/
/*Version mobile V1*/
@media only screen and (min-width: 320px) {
@media only screen and (min-width: 500px) {
.logop2 img {
position: absolute;
width: 25vw;
left: 37vw;
top: 98vw;
z-index: 30;
}
.logo img{
position: absolute;
@ -119,71 +112,12 @@ body{
margin-top: -3vw;
}
.flex-item {
background: var(--lightsedonca);
width: 25vw;
height: 40vw;
margin-top: 8vw;
border-radius: 25px;
line-height: 10vw;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 6vw;
padding-left: 0.8vw;
margin-top: 0.9vw;
height: 7.5vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.buttonretour{
position: absolute;
height: 6vw;
width: 6vw;
left: 63vw;
top: 99vw;
border-radius: 55vw;
background-color: var(--lightsedonca);
}
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 5vw;
padding-left: 1vw;
top : -2.9vw;
}
}
/*Grande version*/
@media only screen and (min-width: 1280px) {
.logop2 img {
position: absolute;
width: 12vw;
left: 44vw;
top: 22vw;
z-index: 30;
}
.logo img{
position: absolute;
width: 12vw;
@ -268,61 +202,6 @@ body{
justify-content: space-around;
margin-top: -7vw;
}
.flex-item {
background: var(--lightsedonca);
width: 14vw;
height: 19vw;
margin-top: 8vw;
border-radius: 25px;
line-height: 10vw;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-top: 0.4vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 3vw;
padding-left: 0.8vw;
margin-top: 0.55vw;
height: 3.5vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.buttonretour{
position: absolute;
height: 3vw;
width: 3vw;
left: 57vw;
top: 22.6vw;
border-radius: 25px;
background-color: var(--lightsedonca);
}
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 2vw;
padding-left: 0.7vw;
top : -0.9vw;
}
}
@ -348,6 +227,35 @@ body{
}
.flex-item {
background: var(--lightsedonca);
width: auto;
height: auto;
border-radius: 25px;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-bottom: 0.8vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
margin-right: 0.4vw;
margin-left: 0.4vw;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 3vw;
padding-left: 0.1vw;
margin-top: 0.5vw;
height: 3vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
/* PARTIE ANNEAU / ROND */
.anneau{
@ -503,26 +411,26 @@ body{
.losangephaut{
display: table;
margin: 0 auto;
margin-top: -6vh;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 6vh solid #B130DE;
border-bottom: 3vw solid #B130DE;
}
.losangepbas{
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 6vh solid #B130DE;
border-top: 3vw solid #B130DE;
}
.losangephauti{
display: table;
margin: 0 auto;
margin-top: -3vh;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vh solid var(--lightsedonca);
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi{
@ -530,16 +438,16 @@ body{
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vh solid var(--lightsedonca);
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc{
display: table;
margin: 0 auto;
margin-top: -3vh;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vh solid #B130DE;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc{
@ -547,7 +455,7 @@ body{
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vh solid #B130DE;
border-top: 1.5vw solid #B130DE;
}
@ -555,6 +463,55 @@ body{
position: absolute;
}
.menuhaut{
height: 10vh;
width: inherit;
display: flex;
}
.containcards{
height: 87vh;
overflow-x:auto;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 43.5vw;
}
.buttonretour{
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 1.5vw;
left: 0.4vw;
top : -1.6vh;
}
table,
td {
border: 0px solid #333;
}
table{
height: 100%;
width: 100%;
}
/* J'ai trop avancé, mode multi*/

460
src/index.html
Unescape View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/main.js"></script>
@ -125,190 +126,291 @@
<div id="pageGame">
<div class="logop2">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo2">
<div class="menuhaut">
<div class="logop2">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo2">
</a>
</div>
<a class="retourstp" onclick="retour()">
<div class="buttonretour">
<h1 class="txt">X</h1>
</div>
</a>
</div>
<a class="retourstp" onclick="retour()">
<div class="buttonretour">
<h1 class="txt">X</h1>
</div>
</a>
<div id="card-conteneur">
<div class="flex-container">
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</div>
<div class="containcards">
<table>
<tr>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
<td>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</td>
</tr>
</table>
</div>
<!--
<div id="card-conteneur">
</div>-->
</div>
</body>

Write Preview
Loading…
Cancel
Save