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 bebc58c377
commit 3118c5f1d7
3 changed files with 481 additions and 586 deletions
Show Stats Download Patch File Download Diff File

253
src/css/style.css
Unescape View File

@ -27,34 +27,194 @@ body{
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
/* versions mobiles, tablette à faire*/
/*Demi Ecran*/
@media screen and (max-width: 960px) and (min-height: 600px) {
.flex-item {
background: var(--lightsedonca);
width: 15vw;
height: 18vw;
border-radius: 2vw;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-bottom: 0.8vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
margin-right: 1.75vw;
margin-left: 1.75vw;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 4vw;
padding-left: 0.1vw;
margin-top: 0.5vw;
height: 4vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.containcards{
height: 87vh;
overflow-x:auto;
display: flex;
flex-wrap: wrap;
padding-left: 10vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 38vw;
}
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 2.5vw;
left: 1vw;
top : -1vh;
}
.logo img{
position: absolute;
width: 25vw;
left: 38vw;
top: 13%;
z-index: 11;
}
.mounts img {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -1vw;
margin-top: -1vw;
object-fit: cover;
}
#contourbuttonvalider{
position: absolute;
border-radius: 45px;
left: 3vw;
top: 5.5vw;
height: 9vw;
width: 25vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider{
position: absolute;
height: 6.8vw;
width: 22.8vw;
top: 1.1vw;
left: 1.1vw;
border-radius: 30px;
background-color: #B130DE;
}
#textjouer{
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 5vw;
margin-top: 0.2vw;
margin-left: 5.5vw;
color: var(--lightsedonca);
}
}
/*Ecran*/
@media screen and (min-width: 960px) {
.flex-item {
background: var(--lightsedonca);
width: 10vw;
height: 15vw;
border-radius: 2vw;
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);
}
.containcards{
height: 87vh;
overflow-x:auto;
display: flex;
flex-wrap: wrap;
padding-left: 3vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 43.5vw;
}
.logo img{
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 1.5vw;
left: 0.4vw;
top : -1.6vh;
}
.logo img{
position: absolute;
width: 12vw;
left: 44vw;
top: 13%;
z-index: 11;
}
.mounts img {
}
.mounts img {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -10px;
}
#contourbuttonvalider{
position: absolute;
border-radius: 45px;
left: 9.2vw;
top: 5.5vw;
height: 4vw;
width: 12vw;
background-color: var(--lightsedonca);
z-index: 15;
}
}
#contourbuttonvalider{
position: absolute;
border-radius: 45px;
left: 9.2vw;
top: 5.5vw;
height: 4vw;
width: 12vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider{
.bouttonvalider{
position: absolute;
height: 3.4vw;
width: 11.4vw;
@ -62,15 +222,17 @@ z-index: 15;
left: 0.3vw;
border-radius: 30px;
background-color: #B130DE;
}
#textjouer{
}
#textjouer{
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 2.5vw;
margin-top: 0.2vw;
margin-left: 2.7vw;
color: var(--lightsedonca);
}
}
#ContainBottom {
position: absolute;
margin-left: 25vw;
@ -130,37 +292,6 @@ left: 0vw;
z-index: 10;
}
.flex-item {
background: var(--lightsedonca);
width: 10vw;
height: 15vw;
border-radius: 2vw;
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{
box-sizing: border-box;
@ -373,22 +504,7 @@ left: 0vw;
display: flex;
}
.containcards{
height: 87vh;
overflow-x:auto;
display: flex;
flex-wrap: wrap;
padding-left: 3vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 43.5vw;
}
.buttonretour{
position: relative;
@ -401,15 +517,6 @@ left: 0vw;
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;

327
src/index.html
Unescape View File

@ -140,7 +140,8 @@
<div class="containcards">
<div class="flex-item">
<a onclick="selectioncarte(1)">
<div class="flex-item" id="card1">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -154,7 +155,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(2)">
<div class="flex-item" id="card2">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -168,7 +171,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(3)">
<div class="flex-item" id="card3">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -182,7 +187,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(4)">
<div class="flex-item" id="card4">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -196,7 +203,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(5)">
<div class="flex-item" id="card5">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -210,7 +219,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(6)">
<div class="flex-item" id="card6">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -224,7 +235,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(7)">
<div class="flex-item" id="card7">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -238,7 +251,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(8)">
<div class="flex-item" id="card8">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -252,7 +267,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(9)">
<div class="flex-item" id="card9">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -266,7 +283,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(10)">
<div class="flex-item" id="card10">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -280,7 +299,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(11)">
<div class="flex-item" id="card11">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -294,7 +315,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(12)">
<div class="flex-item" id="card12">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -308,7 +331,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(13)">
<div class="flex-item" id="card13">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -322,7 +347,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(14)">
<div class="flex-item" id="card14">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -336,7 +363,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(15)">
<div class="flex-item" id="card15">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -350,7 +379,9 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
</a>
<a onclick="selectioncarte(16)">
<div class="flex-item" id="card16">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
@ -364,270 +395,8 @@
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<!--
<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>

21
src/js/main.js
Unescape View File

@ -7,6 +7,7 @@ var lighttercia = "#E6E6E6";
var darkprima = "#474747";
var darkseconda = "#393939";
var darktercia = "#606060";
var carteselect = [];
function journuit(){
//mode jour
@ -66,7 +67,25 @@ function retour(){
document.getElementById("pageGame").style.visibility = "hidden";
}
//PARTIE SELECTION
function selectioncarte(lcarte){
lacarte = "card"+ lcarte ;
if(document.getElementById(lacarte).style.border != "")
{
var pos = carteselect.indexOf(lacarte);
carteselect.splice(pos, 1);
document.getElementById(lacarte).style.border = "";
}
else{
if(carteselect.length < 5)
{
carteselect.push(lacarte);
document.getElementById(lacarte).style.border = "2px inset green";
}
else
window.alert("Bonjour !");
}
}

Write Preview
Loading…
Cancel
Save