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

avancement responsive

Browse Source
Golfier
frperalde 5 years ago
parent 3118c5f1d7
commit 004cc4dc94
2 changed files with 741 additions and 228 deletions
Show Stats Download Patch File Download Diff File

717
src/css/style.css
Unescape View File

@ -29,6 +29,217 @@ body{
} }
/*Demi Ecran*/ /*Demi Ecran*/
@media screen and (max-width: 960px) and (min-height: 600px) { @media screen and (max-width: 960px) and (min-height: 600px) {
.anneau{
box-sizing: border-box;
background-color: #DE3030;
border-radius: 3vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
.rondinterieur{
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform{
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
.rond{
display: table;
margin: 0 auto;
background-color: #DE3030;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre{
background-color: #30C0DE;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
.carreinterieur{
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre{
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle{
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
}
.trianglerinterieur{
position: absolute;
margin-left:-1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
}
.ptriangle{
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze{
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze{
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte{
position: absolute;
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte{
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep{
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep{
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut{
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
}
.losangepbas{
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
}
.losangephauti{
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi{
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc{
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc{
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
.buttonretour{
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
.flex-item { .flex-item {
background: var(--lightsedonca); background: var(--lightsedonca);
width: 15vw; width: 15vw;
@ -131,12 +342,223 @@ body{
} }
/*Ecran*/ /*DemTéléphone 1i Ecran*/
@media screen and (min-width: 960px) { @media screen and (min-width: 350px) and (max-height: 850px) {
.anneau{
box-sizing: border-box;
background-color: #DE3030;
border-radius: 3vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
.rondinterieur{
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform{
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
.rond{
display: table;
margin: 0 auto;
background-color: #DE3030;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre{
background-color: #30C0DE;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
.carreinterieur{
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre{
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle{
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
}
.trianglerinterieur{
position: absolute;
margin-left:-1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
}
.ptriangle{
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze{
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze{
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte{
position: absolute;
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte{
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep{
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep{
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut{
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
}
.losangepbas{
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
}
.losangephauti{
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi{
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc{
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc{
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
.buttonretour{
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 9.5vw;
top: 6.75vw;
}
.flex-item { .flex-item {
background: var(--lightsedonca); background: var(--lightsedonca);
width: 10vw; width: 19vw;
height: 15vw; height: 30vw;
border-radius: 2vw; border-radius: 2vw;
padding-right: 0.4vw; padding-right: 0.4vw;
padding-left: 0.4vw; padding-left: 0.4vw;
@ -145,18 +567,18 @@ body{
list-style: none; list-style: none;
display: flex; display: flex;
margin-right: 0.4vw; margin-right: 1.75vw;
margin-left: 0.4vw; margin-left: 1.75vw;
-webkit-flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content: space-around; justify-content: space-around;
} }
.item-form { .item-form {
width: 3vw; width: 5vw;
padding-left: 0.1vw; padding-left: 0.1vw;
margin-top: 0.5vw; margin-top: 1.5vw;
height: 3vw; height:5vw;
border-radius: 10px; border-radius: 10px;
background-color: var(--lighttercia); background-color: var(--lighttercia);
} }
@ -166,7 +588,7 @@ body{
overflow-x:auto; overflow-x:auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 3vw; padding-left: 2.5vw;
padding-top: 2.5vw; padding-top: 2.5vw;
} }
@ -174,23 +596,22 @@ body{
width: 20vh; width: 20vh;
padding-top: 1vh; padding-top: 1vh;
position: relative; position: relative;
left: 43.5vw; left: 27vw;
} }
.txt{ .txt{
position: absolute; position: absolute;
font-family: Arial Black; font-family: Arial Black;
color: var(--lightprima); color: var(--lightprima);
font-size: 1.5vw; font-size: 5.5vw;
left: 0.4vw; left: 2.25vw;
top : -1.6vh; top : -1vh;
} }
.logo img{ .logo img{
position: absolute; position: absolute;
width: 12vw; width: 45vw;
left: 44vw; left: 28vw;
top: 13%; top: 13%;
z-index: 11; z-index: 11;
} }
@ -200,99 +621,45 @@ body{
height: 100%; height: 100%;
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
margin-left: -10px; margin-left: -1vw;
margin-top: -1vw;
object-fit: cover;
} }
#contourbuttonvalider{ #contourbuttonvalider{
position: absolute; position: absolute;
border-radius: 45px; border-radius: 45px;
left: 9.2vw; left: -10vw;
top: 5.5vw; top: 5.5vw;
height: 4vw; height: 15vw;
width: 12vw; width: 50vw;
background-color: var(--lightsedonca); background-color: var(--lightsedonca);
z-index: 15; z-index: 15;
} }
.bouttonvalider{ .bouttonvalider{
position: absolute; position: absolute;
height: 3.4vw; height: 13vw;
width: 11.4vw; width: 47vw;
top: 0.3vw; top: 1.1vw;
left: 0.3vw; left: 1.5vw;
border-radius: 30px; border-radius: 30px;
background-color: #B130DE; background-color: #B130DE;
} }
#textjouer{ #textjouer{
font-family: Montserrat, impact, Arial Black; font-family: Montserrat, impact, Arial Black;
position: absolute; position: absolute;
font-size: 2.5vw; font-size: 10vw;
margin-top: 0.2vw; margin-top: 0.2vw;
margin-left: 2.7vw; margin-left: 12.5vw;
color: var(--lightsedonca); color: var(--lightsedonca);
} }
}
#ContainBottom {
position: absolute;
margin-left: 25vw;
height: 12vw;
width: auto;
bottom: 0;
z-index: 20;
}
#clic{
position: absolute;
left: 55vw;
top : 7vw;
height: auto;
width: 15vw;
}
#card-conteneur{
z-index: 20;
position: absolute;
left: 0vw;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: -7vw;
}
#pageGame{
visibility: hidden;
}
#pageAccueil{
visibility: visible;
}
#cloud{
z-index: 10
}
#mount1 {
z-index: 11;
} }
#mount2 { /*Ecran*/
z-index: 10; @media screen and (min-width: 960px) {
}
/* PARTIE ANNEAU / ROND */
.anneau{ .anneau{
box-sizing: border-box; box-sizing: border-box;
background-color: #DE3030; background-color: #DE3030;
@ -493,19 +860,6 @@ left: 0vw;
border-top: 1.5vw solid #B130DE; border-top: 1.5vw solid #B130DE;
} }
.retourstp{
position: absolute;
}
.menuhaut{
height: 10vh;
width: inherit;
display: flex;
}
.buttonretour{ .buttonretour{
position: relative; position: relative;
height: 4vh; height: 4vh;
@ -517,14 +871,173 @@ left: 0vw;
top: 1.75vw; top: 1.75vw;
} }
table, .flex-item {
td { background: var(--lightsedonca);
border: 0px solid #333; 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;
}
.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;
} }
table{ .mounts img {
position: absolute;
height: 100%; height: 100%;
width: 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;
}
.bouttonvalider{
position: absolute;
height: 3.4vw;
width: 11.4vw;
top: 0.3vw;
left: 0.3vw;
border-radius: 30px;
background-color: #B130DE;
}
#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;
height: 12vw;
width: auto;
bottom: 0;
z-index: 20;
}
#clic{
position: absolute;
left: 55vw;
top : 7vw;
height: auto;
width: 15vw;
}
#card-conteneur{
z-index: 20;
position: absolute;
left: 0vw;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: -7vw;
}
#pageGame{
visibility: hidden;
}
#pageAccueil{
visibility: visible;
}
#cloud{
z-index: 10
}
#mount1 {
z-index: 11;
}
#mount2 {
z-index: 10;
}
.retourstp{
position: absolute;
}
.menuhaut{
height: 10vh;
width: inherit;
display: flex;
} }

6
src/js/main.js
Unescape View File

@ -70,17 +70,17 @@ function retour(){
//PARTIE SELECTION //PARTIE SELECTION
function selectioncarte(lcarte){ function selectioncarte(lcarte){
lacarte = "card"+ lcarte ; lacarte = "card"+ lcarte ;
if(document.getElementById(lacarte).style.border != "") if(document.getElementById(lacarte).style.boxShadow != "")
{ {
var pos = carteselect.indexOf(lacarte); var pos = carteselect.indexOf(lacarte);
carteselect.splice(pos, 1); carteselect.splice(pos, 1);
document.getElementById(lacarte).style.border = ""; document.getElementById(lacarte).style.boxShadow = "";
} }
else{ else{
if(carteselect.length < 5) if(carteselect.length < 5)
{ {
carteselect.push(lacarte); carteselect.push(lacarte);
document.getElementById(lacarte).style.border = "2px inset green"; document.getElementById(lacarte).style.boxShadow = "0 0 1vw red, 0 0 1vw red";
} }
else else
window.alert("Bonjour !"); window.alert("Bonjour !");

Write Preview
Loading…
Cancel
Save