From ea982e3760b79fd77da48d50642dbf6bc9da25a5 Mon Sep 17 00:00:00 2001 From: theo Date: Sun, 15 Nov 2020 16:30:33 +0100 Subject: [PATCH] =?UTF-8?q?AJOUT=20btn=20r=C3=A8gles=20et=20Code=20=C3=A9t?= =?UTF-8?q?hique=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- SwichGIT/.vs/SwichGIT/v16/.suo | Bin 0 -> 12288 bytes SwichGIT/.vs/VSWorkspaceState.json | 7 + SwichGIT/.vs/slnx.sqlite | Bin 0 -> 90112 bytes SwichGIT/src/css/PageDaccueil.css | 236 ++++++ SwichGIT/src/css/PartieGame.css | 15 + SwichGIT/src/css/Resp1.css | 311 ++++++++ SwichGIT/src/css/Resp2.css | 311 ++++++++ SwichGIT/src/css/Resp3.css | 311 ++++++++ SwichGIT/src/css/base.css | 96 +++ SwichGIT/src/css/style.css | 1154 ---------------------------- SwichGIT/src/index.html | 139 ++-- 11 files changed, 1370 insertions(+), 1210 deletions(-) create mode 100644 SwichGIT/.vs/SwichGIT/v16/.suo create mode 100644 SwichGIT/.vs/VSWorkspaceState.json create mode 100644 SwichGIT/.vs/slnx.sqlite create mode 100644 SwichGIT/src/css/PageDaccueil.css create mode 100644 SwichGIT/src/css/PartieGame.css create mode 100644 SwichGIT/src/css/Resp1.css create mode 100644 SwichGIT/src/css/Resp2.css create mode 100644 SwichGIT/src/css/Resp3.css create mode 100644 SwichGIT/src/css/base.css delete mode 100644 SwichGIT/src/css/style.css diff --git a/SwichGIT/.vs/SwichGIT/v16/.suo b/SwichGIT/.vs/SwichGIT/v16/.suo new file mode 100644 index 0000000000000000000000000000000000000000..133855cae88061facc63bb75491f6f061ee64132 GIT binary patch literal 12288 zcmeHNO>Y}T7#_E@&<{S!M}bnnMHQ-0uo6mJRGO%5+)z}aI<=D`5fnD|+Sz#HwY+QE zNF4YFhy&dD2XNrTofD!xafTZgegX~8GrMDt*X#9qlT@MgSi3trU(d`tGta#5yS{(# z*q=ZAbmA`&3NvEAc(8Ry9MsY?T3kFQWFFHVY;A2Zi*ZE9;eRB7Tf)K56IpRhH1KSR zO-^Ova9kYd%=xoJYTYk=Z|8scBl9%Mef^YQxBx^)tc#Cx^4GW$`8&$zNG?^Q%* zXe=OHg~sEEI`k0(Sal8E&mVR_34At1oiZu@D=2#=Xt*S`y*e~JOKN>Zu_kpe5BeS@ z;|AphJve@Hr{c&#<@9u(7lHaK7DP!(zy?wYh!(WK0{T>jEDTYD{+APZ#HbD4z*|^5 ze;@eVU*zGWtYE z2o=2D8OVbZ;2)mt)c?3!0$PcE(5F-iN`&#R;uJ8!b#?HdBk{?>dQW3jgi~|Eo2i&+VYN z&j0i~lkr;^wSo2CUG>T{&9lfG$jTSNKMFhP{@3yIU=vze8|VX19sQ&)AkW1vR9^Qe zKAudm|7fcz|9>3*BG4%rWq(Dg)8}-XS$widY;v&MTxtw6O?0M%J=0ZNucalzuQLha*}$g z40*I$SEW9@=T2ZNT}bcscGC2Ab~~Qgru3B_oVK5o|0P_r;-Xl_N$&4h7x9wR;T*(V zXqEKttRY^Maq12q;hSR#DccL%oqw)h_1#oo%Zo^7+t(+tRrTMyowxXyUWf5r3gnV` zFqJKN%KvKFLcA^gSpK(NA*S(f0(uBP?CS;jgZ?Nv+BCvs9TKmqdz3rp?z~lQIj&Rn za!Z!mHteF;u2@cP0a44_EIE$t=1Nu*x3<+R80ETAGbgf3X3Mpl#`M(r+$4V!*;#O7 zyJb!{%(mAu?1^lly=q(K8z$PQn~mw!$+OjS)eF_Bsmi%YFZ&a8n9B8hn6)eSYd0jC(!>h z{H8DpK1HYOuQ>eMl0h1-UB|riSfG!`w-5Ldglyt-81O^-(J73(mJBN zzJ6Wa-$@~V*5kJrhEeP<2lEhR|IwBk+kgHFltLYH%OYQ`{~<*aWvjKHbp7d#hV4Jv z1N1#LJ9=mDe%I?V4*Pdx{hy4b?Effy-vdQYL`D7|D6T)?pONvoUkBmS{%HW0dO7uP zV#fvA|LP1&Dt}@t{t1u2i@yn*XcfJ%Jvj1s#z0 zxIp`@I>h?wGU+lHm1hh6I=yz8E4g+Ve9LbE%=7TAoBr2akS3%B@x=~e`Al!(#LGd` w^T4;{T55+oiLx%o!~ZuBFNd!!JW;6w>LD$EZWyj-w$k(OnE&-zc>Lo30S1YHT>t<8 literal 0 HcmV?d00001 diff --git a/SwichGIT/.vs/VSWorkspaceState.json b/SwichGIT/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..bb42b5b --- /dev/null +++ b/SwichGIT/.vs/VSWorkspaceState.json @@ -0,0 +1,7 @@ +{ + "ExpandedNodes": [ + "", + "\\src" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/SwichGIT/.vs/slnx.sqlite b/SwichGIT/.vs/slnx.sqlite new file mode 100644 index 0000000000000000000000000000000000000000..87bd8479f55d14c1b475e3a8717b07c0d81a2ed8 GIT binary patch literal 90112 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 literal 0 HcmV?d00001 diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css new file mode 100644 index 0000000..89de8cf --- /dev/null +++ b/SwichGIT/src/css/PageDaccueil.css @@ -0,0 +1,236 @@ +#pageAccueil { + visibility: visible; +} + +#cloud { + z-index: 10 +} + +#mount1 { + z-index: 11; +} + +#mount2 { + z-index: 10; +} + + +/*Bouton info*/ +#infosec{ + z-index:15; +} + +#info { + color: #B7B7B7; + text-decoration: none; + font-size: 45px; +} + +#info:hover { + color: #E4E8E7; +} + +.activity { + padding: 0; + margin: 2em 0; + list-style: none; +} + +li { + -webkit-transition: box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-radius: 50%; + color: #B7B7B7; + display: inline-block; + font-size: 0.889em; + height: 3em; + margin: 0 1em 1em; + position: relative; + text-align: center; + text-transform: lowercase; + width: 3em; + line-height: 3em; +} + + li a { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + li:hover { + box-shadow: 0 0 0 7px #B7B7B7; + } + + li:before { + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; + border-radius: 50%; + bottom: 0; + box-shadow: 0 0 0 4px #B7B7B7; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; + background-color: #B130DE; + } + +#infosec { + position: absolute; + left: 57%; + top: 35%; +} + +/*Les rčgles popups*/ +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; + z-index: 21; +} + + .overlay:target { + visibility: visible; + opacity: 1; + } + +.popup { + margin: 70px auto; + padding: 20px; + background: #fff; + border-radius: 5px; + width: 30%; + position: relative; + top:25%; +} + + .popup h2 { + margin-top: 0; + color: #333; + font-family: Tahoma, Arial, sans-serif; + } + + .popup .close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; + } + + .popup .close:hover { + color: #06D85F; + } + + .popup .content { + max-height: 30%; + overflow: auto; + } + + +/* J'ai trop avancé, mode multi*/ + + +#containpseudo { + position: absolute; + height: 15%; + width: 30%; + z-index: 12; + left: 35%; + top: 30%; +} + +#pseudoenter { + background-color: red; + height: 100%; + border-radius: 45px; + background-color: #B130DE; +} + +#inputpseudo { + position: absolute; + width: 99%; + height: 65%; + border-radius: 30px; + font-size: 3vw; + background-color: transparent; + -moz-appearance: none; + text-align: center; + color: #707070; + border-color: transparent; + font-family: impact, Arial Black; + z-index: 11; +} + +#fondinput { + background-color: red; + position: absolute; + width: 97%; + background-color: var(--lightsedonca); + height: 90%; + border-radius: 40px; + left: 1.5%; + top: 5%; + z-index: 10; +} + +#buttonadd { + position: absolute; + top: 30%; + right: -12%; + height: 3vw; + width: 3vw; + border-radius: 2vw; + background-color: #B130DE; + z-index: 18; +} + +#textplus { + font-size: 3vw; + font-family: arial, Arial Black; + position: absolute; + margin-top: -0.15vw; + margin-left: 0.65vw; + color: var(--lightprima); +} + +#containplayers { + position: absolute; + background-color: transparent; + color: var(--lightsedonca); + width: 15vw; + height: 20vw; + z-index: 17; + right: 0%; + top: 8vw; +} + +.pseudojoueur { + float: right; + margin-top: 0px; + margin-bottom: 3%; + margin-right: 10%; + font-family: Lucida Console, Arial Black, Arial; + font-size: 2vw; +} + +#pseudolist { + width: 100%; + height: 1.7vw; +} diff --git a/SwichGIT/src/css/PartieGame.css b/SwichGIT/src/css/PartieGame.css new file mode 100644 index 0000000..a16ecc8 --- /dev/null +++ b/SwichGIT/src/css/PartieGame.css @@ -0,0 +1,15 @@ + +#pageGame { + visibility: hidden; +} + +.menuhaut { + height: 10vh; + width: inherit; + display: flex; +} + +.retourstp { + position: absolute; +} + diff --git a/SwichGIT/src/css/Resp1.css b/SwichGIT/src/css/Resp1.css new file mode 100644 index 0000000..1143ed9 --- /dev/null +++ b/SwichGIT/src/css/Resp1.css @@ -0,0 +1,311 @@ +/*Demi Ecran*/ +@media screen and (max-width: 960px) and (min-height: 600px) { + .anneau { + box-sizing: border-box; + background-color: #FFD100; + 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: #FFD100; + 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 { + 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); + } +} diff --git a/SwichGIT/src/css/Resp2.css b/SwichGIT/src/css/Resp2.css new file mode 100644 index 0000000..858e850 --- /dev/null +++ b/SwichGIT/src/css/Resp2.css @@ -0,0 +1,311 @@ +/*DemTĂ©lĂ©phone 1i Ecran*/ +@media screen and (max-width: 550px) 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); + } +} diff --git a/SwichGIT/src/css/Resp3.css b/SwichGIT/src/css/Resp3.css new file mode 100644 index 0000000..2e72a9e --- /dev/null +++ b/SwichGIT/src/css/Resp3.css @@ -0,0 +1,311 @@ +/*Ecran*/ +@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 { + 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; + } + + + .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 { + 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; + } + + .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); + } +} diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css new file mode 100644 index 0000000..cec154c --- /dev/null +++ b/SwichGIT/src/css/base.css @@ -0,0 +1,96 @@ +:root{ + /*couleur hĂ©hĂ©*/ + --lightprima: #DEDEDE; + --lightsedonca: #B7B7B7; + --lighttercia: #E6E6E6; +} + +@font-face { + font-family: "Montserrat"; + src: url("/fonts/MonstMontserrat-Black.woff") format("woff"), + url("/fonts/MonstMontserrat-Black.woff2") format("woff2"); +} + +a { + cursor: pointer; + z-index: 60; +} + + + +body { + background-color: var(--lightprima); + height: 100%; + overflow-x: hidden; + overflow-y: hidden; + /*Desactiver la selection*/ + -webkit-user-select: none; /* Chrome / Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE 10+ */ + user-select: none; +} + + +#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; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/SwichGIT/src/css/style.css b/SwichGIT/src/css/style.css deleted file mode 100644 index c06ce34..0000000 --- a/SwichGIT/src/css/style.css +++ /dev/null @@ -1,1154 +0,0 @@ -:root{ - /*couleur hĂ©hĂ©*/ - --lightprima: #DEDEDE; - --lightsedonca: #B7B7B7; - --lighttercia: #E6E6E6; -} - -@font-face { - font-family: "Montserrat"; - src: url("/fonts/MonstMontserrat-Black.woff") format("woff"), - url("/fonts/MonstMontserrat-Black.woff2") format("woff2"); -} - -a { - cursor: pointer; - z-index: 60; -} - -body{ - background-color: var(--lightprima); - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - /*Desactiver la selection*/ - -webkit-user-select: none; /* Chrome / Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE 10+ */ - user-select: none; -} -/*Demi Ecran*/ -@media screen and (max-width: 960px) and (min-height: 600px) { - .anneau{ - box-sizing: border-box; - background-color: #FFD100; - 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: #FFD100; - 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 { - 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); - } - -} - -/*DemTĂ©lĂ©phone 1i Ecran*/ -@media screen and (max-width: 550px) 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*/ -@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 { - 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; - } - - - .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 { - 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; - } - - .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; -} - - -/* J'ai trop avancĂ©, mode multi*/ - - -#containpseudo{ - position: absolute; - height: 15%; - width: 30%; - z-index: 12; - left: 35%; - top: 30%; -} - -#pseudoenter{ - background-color: red; - height: 100%; - border-radius: 45px; - background-color: #B130DE; -} - -#inputpseudo{ - position: absolute; - width: 99%; - height: 65%; - border-radius: 30px; - font-size: 3vw; - background-color: transparent; - appearance: none; - text-align: center; - color: #707070; - border-color: transparent; - font-family: impact, Arial Black; - z-index: 11; -} - -#fondinput{ - background-color: red; - position: absolute; - width: 97%; - background-color: var(--lightsedonca); - height: 90%; - border-radius: 40px; - left: 1.5%; - top: 5%; - z-index: 10; -} - -#buttonadd{ - position: absolute; - top: 30%; - right: -12%; - height: 3vw; - width: 3vw; - border-radius: 2vw; - background-color: #B130DE; - z-index: 18; -} - -#textplus{ - font-size: 3vw; - font-family: arial, Arial Black; - position: absolute; - margin-top: -0.15vw; - margin-left: 0.65vw; - color: var(--lightprima); -} - -#containplayers{ - position: absolute; - background-color: transparent; - color: var(--lightsedonca); - width: 15vw; - height: 20vw; - z-index: 17; - right: 0%; - top: 8vw; -} - -.pseudojoueur { - float: right; - margin-top: 0px; - margin-bottom: 3%; - margin-right: 10%; - font-family: Lucida Console, Arial Black, Arial; - font-size: 2vw; -} - -#pseudolist { - width: 100%; - height: 1.7vw; -} - - - - - - - - - - - - - - - - - - - - - diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index a27ce04..442ae7e 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -3,7 +3,13 @@ SwishGame - + + + + + + + @@ -11,12 +17,22 @@
- +
@@ -92,7 +119,7 @@
- +
@@ -111,44 +138,44 @@
- +
- - - -
+ + + + - -