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

963
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,8 +342,535 @@ body{
} }
/*DemTéléphone 1i Ecran*/
@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 {
background: var(--lightsedonca);
width: 19vw;
height: 30vw;
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: 5vw;
padding-left: 0.1vw;
margin-top: 1.5vw;
height:5vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.containcards{
height: 87vh;
overflow-x:auto;
display: flex;
flex-wrap: wrap;
padding-left: 2.5vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 27vw;
}
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 5.5vw;
left: 2.25vw;
top : -1vh;
}
.logo img{
position: absolute;
width: 45vw;
left: 28vw;
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: -10vw;
top: 5.5vw;
height: 15vw;
width: 50vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider{
position: absolute;
height: 13vw;
width: 47vw;
top: 1.1vw;
left: 1.5vw;
border-radius: 30px;
background-color: #B130DE;
}
#textjouer{
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 10vw;
margin-top: 0.2vw;
margin-left: 12.5vw;
color: var(--lightsedonca);
}
}
/*Ecran*/ /*Ecran*/
@media screen and (min-width: 960px) { @media screen and (min-width: 960px) {
.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: 10vw; width: 10vw;
@ -292,208 +1030,6 @@ left: 0vw;
z-index: 10; z-index: 10;
} }
/* PARTIE ANNEAU / ROND */
.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;
}
.retourstp{ .retourstp{
position: absolute; position: absolute;
} }
@ -505,29 +1041,6 @@ left: 0vw;
} }
.buttonretour{
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
table,
td {
border: 0px solid #333;
}
table{
height: 100%;
width: 100%;
}
/* J'ai trop avancé, mode multi*/ /* J'ai trop avancé, mode multi*/

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