diff --git a/SwichGIT/MorpionMulti/.idea/.gitignore b/SwichGIT/MorpionMulti/.idea/.gitignore deleted file mode 100644 index 36c467d..0000000 --- a/SwichGIT/MorpionMulti/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Datasource local storage ignored files -/../../../../../../:\wamp64\www\Test\TP2\.idea/dataSources/ -/dataSources.local.xml -# Editor-based HTTP Client requests -/httpRequests/ diff --git a/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml b/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml deleted file mode 100644 index a55e7a1..0000000 --- a/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml b/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml deleted file mode 100644 index 5512eb5..0000000 --- a/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/modules.xml b/SwichGIT/MorpionMulti/.idea/.idea/modules.xml deleted file mode 100644 index 08f54a6..0000000 --- a/SwichGIT/MorpionMulti/.idea/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.name b/SwichGIT/MorpionMulti/.idea/.name deleted file mode 100644 index 40daab1..0000000 --- a/SwichGIT/MorpionMulti/.idea/.name +++ /dev/null @@ -1 +0,0 @@ -bddt.php \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/TP2.iml b/SwichGIT/MorpionMulti/.idea/TP2.iml deleted file mode 100644 index c956989..0000000 --- a/SwichGIT/MorpionMulti/.idea/TP2.iml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml b/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml deleted file mode 100644 index a55e7a1..0000000 --- a/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/DB.php b/SwichGIT/MorpionMulti/DB.php deleted file mode 100644 index d7ed019..0000000 --- a/SwichGIT/MorpionMulti/DB.php +++ /dev/null @@ -1,134 +0,0 @@ - - - - - -
- -
-
- - -
-

Morpion

- -
- - - -
- - -

- -query('INSERT INTO partie(Id) VALUES("'.$partiecreer.'")'); - $idpartie=$partiecreer; - require("DB.php"); -} -if($action=="Rejoindre"){ - $idpartie=$_POST['placer']; - $idpartie=$partiecreer; - require("DB.php"); -} - -echo "

Id : $idpartie

" ; -$colonne=""; - -if(isset($_POST['case'])){ - - if($_POST['case']=='1'){ - $colonne='un'; -} -elseif ($_POST['case']=='2'){ - $colonne='deux'; -} -elseif ($_POST['case']=='3'){ - $colonne='trois'; -} -elseif ($_POST['case']=='4'){ - $colonne='quatre'; -} -elseif ($_POST['case']=='5'){ - $colonne='cinq'; -} -elseif ($_POST['case']=='6'){ - $colonne='six'; -} -elseif ($_POST['case']=='7'){ - $colonne='sept'; -} -elseif ($_POST['case']=='8'){ - $colonne='huit'; -} -elseif ($_POST['case']=='9'){ - $colonne='neuf'; -} - else{ - $colonne='null'; - } -} -$valeur=""; -if(isset($_POST['forme'])){ - $valeur=$_POST['forme']; -} - - -header("refresh: 2"); -//$db->exec('CREATE TABLE partie(Id STRING,un STRING,deux STRING,trois STRING, quatre STRING,cinq STRING,six STRING,sept STRING,huit STRING,neuf STRING)'); -if(isset($colonne)and $valeur!="" and $colonne!=''){ - - $aff=$db->query('SELECT "'.$colonne.'" FROM partie where Id="'.$idpartie.'" '); - $res = $aff->fetchArray(); - - if(strlen($res[$colonne])==1){ - echo "

Insertion impossible une valeur est déjà à l'intérieur


"; - } - else{ - $update = $db->query('UPDATE partie SET "'.$colonne.'" = "'.$valeur.'" where Id="'.$idpartie.'" '); - } -} - -$afficher = $db->query('SELECT * FROM partie where Id="'.$idpartie.'" '); -while ($row = $afficher->fetchArray()) { - -$un=$row['un']; -$deux=$row['deux']; -$trois=$row['trois']; -$quatre=$row['quatre']; -$cinq=$row['cinq']; -$six=$row['six']; -$sept=$row['sept']; -$huit=$row['huit']; -$neuf=$row['neuf']; -} -echo " - - - - - - - - - - - - - - - - -
$un$deux$trois
$quatre$cinq$six
$sept$huit$neuf
- "; - -?> diff --git a/SwichGIT/MorpionMulti/accueil.php b/SwichGIT/MorpionMulti/accueil.php deleted file mode 100644 index f395f27..0000000 --- a/SwichGIT/MorpionMulti/accueil.php +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - -

-

- - - - - - -
-
- -
- -

- - - - - - - diff --git a/SwichGIT/MorpionMulti/bddt.php b/SwichGIT/MorpionMulti/bddt.php deleted file mode 100644 index 5eef32f..0000000 --- a/SwichGIT/MorpionMulti/bddt.php +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/js.js b/SwichGIT/MorpionMulti/js.js deleted file mode 100644 index e69de29..0000000 diff --git a/SwichGIT/MorpionMulti/mysqlitedb.db b/SwichGIT/MorpionMulti/mysqlitedb.db deleted file mode 100644 index cea990e..0000000 Binary files a/SwichGIT/MorpionMulti/mysqlitedb.db and /dev/null differ diff --git a/SwichGIT/MorpionMulti/.idea/.idea/.idea.iml b/SwichGIT/MorpionPhp/.idea/MorpionPhp.iml similarity index 100% rename from SwichGIT/MorpionMulti/.idea/.idea/.idea.iml rename to SwichGIT/MorpionPhp/.idea/MorpionPhp.iml diff --git a/SwichGIT/MorpionPhp/.idea/dataSources.local.xml b/SwichGIT/MorpionPhp/.idea/dataSources.local.xml new file mode 100644 index 0000000..d38783c --- /dev/null +++ b/SwichGIT/MorpionPhp/.idea/dataSources.local.xml @@ -0,0 +1,10 @@ + + + + + + no-auth + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionPhp/.idea/dataSources.xml b/SwichGIT/MorpionPhp/.idea/dataSources.xml new file mode 100644 index 0000000..fec054a --- /dev/null +++ b/SwichGIT/MorpionPhp/.idea/dataSources.xml @@ -0,0 +1,12 @@ + + + + + sqlite.xerial + true + org.sqlite.JDBC + jdbc:sqlite:D:\wamp64\www\Test\MorpionPhp\mysqlitedb.db + $ProjectFileDir$ + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/deployment.xml b/SwichGIT/MorpionPhp/.idea/deployment.xml similarity index 86% rename from SwichGIT/MorpionMulti/.idea/deployment.xml rename to SwichGIT/MorpionPhp/.idea/deployment.xml index f921b39..64a32fd 100644 --- a/SwichGIT/MorpionMulti/.idea/deployment.xml +++ b/SwichGIT/MorpionPhp/.idea/deployment.xml @@ -5,7 +5,7 @@ - + diff --git a/SwichGIT/MorpionMulti/.idea/modules.xml b/SwichGIT/MorpionPhp/.idea/modules.xml similarity index 54% rename from SwichGIT/MorpionMulti/.idea/modules.xml rename to SwichGIT/MorpionPhp/.idea/modules.xml index c693d56..eba4f80 100644 --- a/SwichGIT/MorpionMulti/.idea/modules.xml +++ b/SwichGIT/MorpionPhp/.idea/modules.xml @@ -2,7 +2,7 @@ - + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/php.xml b/SwichGIT/MorpionPhp/.idea/php.xml similarity index 100% rename from SwichGIT/MorpionMulti/.idea/php.xml rename to SwichGIT/MorpionPhp/.idea/php.xml diff --git a/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml b/SwichGIT/MorpionPhp/.idea/workspace.xml similarity index 61% rename from SwichGIT/MorpionMulti/.idea/.idea/workspace.xml rename to SwichGIT/MorpionPhp/.idea/workspace.xml index 5161708..b9e793c 100644 --- a/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml +++ b/SwichGIT/MorpionPhp/.idea/workspace.xml @@ -1,7 +1,7 @@ - + \ No newline at end of file diff --git a/SwichGIT/MorpionPhp/ActualiserIDPartie.php b/SwichGIT/MorpionPhp/ActualiserIDPartie.php new file mode 100644 index 0000000..279412d --- /dev/null +++ b/SwichGIT/MorpionPhp/ActualiserIDPartie.php @@ -0,0 +1,7 @@ +Identifiant partie : $idparte " ; +echo ""; +?> + diff --git a/SwichGIT/MorpionPhp/ActualiserMorpion.php b/SwichGIT/MorpionPhp/ActualiserMorpion.php new file mode 100644 index 0000000..f023169 --- /dev/null +++ b/SwichGIT/MorpionPhp/ActualiserMorpion.php @@ -0,0 +1,63 @@ +open('mysqlitedb.db'); + } +} + + + +session_start(); +$idpartie = $_SESSION['idpartie']; +$db = new MyDB(); + +$rows = $db->query('SELECT COUNT(*) as count FROM partie where Id="'.$idpartie.'" '); +$row = $rows->fetchArray(); +$numRows = $row['count']; + +$afficher = $db->query('SELECT * FROM partie where Id="'.$idpartie.'" '); +while ($row = $afficher->fetchArray()) { + +$un=$row['un']; +$deux=$row['deux']; +$trois=$row['trois']; +$quatre=$row['quatre']; +$cinq=$row['cinq']; +$six=$row['six']; +$sept=$row['sept']; +$huit=$row['huit']; +$neuf=$row['neuf']; + + +} +if($numRows!=1){ + echo "

Identifiant inconnu

"; +} +else{ + echo " + + + + + + + + + + + + + + + + +
$un$deux$trois
$quatre$cinq$six
$sept$huit$neuf
+ +"; +} + + +?> diff --git a/SwichGIT/MorpionMulti/MyDB.php b/SwichGIT/MorpionPhp/MaDB.php similarity index 99% rename from SwichGIT/MorpionMulti/MyDB.php rename to SwichGIT/MorpionPhp/MaDB.php index 1c579bd..58e90b3 100644 --- a/SwichGIT/MorpionMulti/MyDB.php +++ b/SwichGIT/MorpionPhp/MaDB.php @@ -1,6 +1,4 @@ + + + + Morpion + + + + + + + + +

Morpion

+ + + +
+ + +
+Identifiant partie : $idpartie"; +?> + + + +
+ + + +
+ + + +
+ + + + + + + + +
+
+ + + +query('SELECT "'.$colonne.'" FROM partie where Id="'.$idpartie.'" '); + $res = $aff->fetchArray(); + + if(strlen($res[$colonne])!=0){ + echo "

Insertion impossible une valeur est déjà à l'intérieur


"; + } + else{ + $update = $db->query('UPDATE partie SET "'.$colonne.'" = "'.$valeur.'" where Id="'.$idpartie.'" '); + } + +} \ No newline at end of file diff --git a/SwichGIT/MorpionPhp/SupprimerPartieActuelEtCreer.php b/SwichGIT/MorpionPhp/SupprimerPartieActuelEtCreer.php new file mode 100644 index 0000000..a31418a --- /dev/null +++ b/SwichGIT/MorpionPhp/SupprimerPartieActuelEtCreer.php @@ -0,0 +1,12 @@ +query($requete); + +$newid=genererChaineAleatoire(10); +$_SESSION['idpartie']=$newid; +$db->query('INSERT INTO partie(Id) VALUES("'.$newid.'")'); \ No newline at end of file diff --git a/SwichGIT/MorpionPhp/SupprimerPartieActuelle.php b/SwichGIT/MorpionPhp/SupprimerPartieActuelle.php new file mode 100644 index 0000000..e86d695 --- /dev/null +++ b/SwichGIT/MorpionPhp/SupprimerPartieActuelle.php @@ -0,0 +1,10 @@ +query($requete); + + diff --git a/SwichGIT/MorpionMulti/css.css b/SwichGIT/MorpionPhp/css.css similarity index 84% rename from SwichGIT/MorpionMulti/css.css rename to SwichGIT/MorpionPhp/css.css index b0e2494..690d7dc 100644 --- a/SwichGIT/MorpionMulti/css.css +++ b/SwichGIT/MorpionPhp/css.css @@ -1,9 +1,14 @@ body{ margin: 0; /* pour éviter les marges */ text-align: center; /* pour corriger le bug de centrage IE */ + background-color: #9DD9D2; } - +.myInput{ + background-color: #ff8500; + height: 0px; + width: 0px; +} h1 { font-size: 4em; font-weight: 700; @@ -34,7 +39,3 @@ p{ text-align: center; color: #F43C3F } - - - - diff --git a/SwichGIT/MorpionPhp/js.js b/SwichGIT/MorpionPhp/js.js new file mode 100644 index 0000000..38977a6 --- /dev/null +++ b/SwichGIT/MorpionPhp/js.js @@ -0,0 +1,14 @@ +function myFunction() { + /* Get the text field */ + var copyText = document.getElementById("myInput"); + + /* Select the text field */ + copyText.select(); + copyText.setSelectionRange(0, 99999); /* For mobile devices */ + + /* Copy the text inside the text field */ + document.execCommand("copy"); + + /* Alert the copied text */ + alert("Copied the text: " + copyText.value); +} \ No newline at end of file diff --git a/SwichGIT/MorpionPhp/mysqlitedb.db b/SwichGIT/MorpionPhp/mysqlitedb.db new file mode 100644 index 0000000..9555096 Binary files /dev/null and b/SwichGIT/MorpionPhp/mysqlitedb.db differ diff --git a/SwichGIT/MorpionMulti/test.ico b/SwichGIT/MorpionPhp/test.ico similarity index 100% rename from SwichGIT/MorpionMulti/test.ico rename to SwichGIT/MorpionPhp/test.ico diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css index ceeebe6..de5e84c 100644 --- a/SwichGIT/src/css/PageDaccueil.css +++ b/SwichGIT/src/css/PageDaccueil.css @@ -8,6 +8,7 @@ #mount1 { z-index: 11; + position: absolute; } #mount2 { @@ -31,7 +32,6 @@ #couleurs{ z-index: 1; - top: -20vw; } .pannel{ @@ -43,6 +43,7 @@ #pickrcontner{ position: relative; display: flex; + flex-wrap: wrap; justify-content: space-around; } @@ -100,70 +101,6 @@ display: table-cell; vertical-align: middle; } -.settingRond{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: circle(50% at 50% 50%); - clip-path: circle(50% at 50% 50%); -} -.settingCarre{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: inset(0 0 0 0); - clip-path: inset(0 0 0 0); -} -.settingTriangle{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); - clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -} -.settingCroix{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); - clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); -} -.settingLosange{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); -} -.settingPenta{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); - clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); -} -.settingHexa{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); -} -.settingHocto{ - height: 80%; - width: 80%; - margin-left: 10%; - margin-top: 10%; - -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); - clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); -} .settingShape{ background-color: #333; } @@ -444,6 +381,73 @@ label:active:after { z-index: 10; } +#choosemode { + height: 4vw; + width: 16vw; + position: absolute; + left: 42vw; + top: 50vh; + z-index: 15; +} + +#conteneurmode{ + width: 80%; + height: 2vw; + left : 10%; + top : 25%; + position: absolute; + margin: 0 auto; + background-color: var(--lightsedonca); + border-radius: 5vw; +} + +#modeprec{ + height: 100%; + width: 15%; + float: left; + position: relative; +} + +#modesuiv{ + height: 100%; + width: 15%; + float: right; + position: relative; +} + +#textdumode{ + height: 100%; + width: 70%; + position: absolute; + left: 15%; +} + +#textmode { + font-family: Lucida Console, Arial Black, Arial; + font-size: 1vw; + color: #707070; + text-align:center; + margin: 5% auto 0 auto; +} + +#triangleprec{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-right: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; +} + +#trianglesuiv{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-left: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; +} + #buttonadd { position: absolute; top: 30%; diff --git a/SwichGIT/src/css/Resp1.css b/SwichGIT/src/css/Resp1.css deleted file mode 100644 index 4ad3c72..0000000 --- a/SwichGIT/src/css/Resp1.css +++ /dev/null @@ -1,321 +0,0 @@ -/*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(--lighttercia); - 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: 10vw; - height: 13vw; - 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.25vw; - 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; - } - - .bouttonvalider2 { - position: absolute; - height: 6.8vw; - width: 22.8vw; - top: 1.1vw; - left: 1.1vw; - border-radius: 30px; - background-color: #00CC66; - } - - #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 deleted file mode 100644 index 1296054..0000000 --- a/SwichGIT/src/css/Resp2.css +++ /dev/null @@ -1,321 +0,0 @@ -/*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(--lighttercia); - 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: 10vw; - height: 13vw; - 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: 0.25vw; - 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; - } - - .bouttonvalider2 { - position: absolute; - height: 6.8vw; - width: 22.8vw; - top: 1.1vw; - left: 1.1vw; - border-radius: 30px; - background-color: #00CC66; - } - - #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 index 47f2071..105b755 100644 --- a/SwichGIT/src/css/Resp3.css +++ b/SwichGIT/src/css/Resp3.css @@ -1,566 +1,77 @@ /*Ecran*/ @media screen and (min-width: 960px) { - - - /*PARTIE FORMES*/ - - - .containform { - position: relative; - height: var(--x); - width: var(--x); - display: table-cell; - vertical-align: middle; - } /*ROND*/ .anneau { position: relative; background-color: var(--colorbase); - border-radius: var(--y); - height: var(--y); - width: var(--y); + border-radius: var(--v); + height: var(--v); + width: var(--v); display: table-cell; vertical-align: middle; } .anneau2 { position: relative; background-color: white; - border-radius: var(--y); - height: var(--y); - width: var(--y); - left : calc((var(--x) - var(--y))/2); + border-radius: var(--v); + height: var(--v); + width: var(--v); + left : calc((var(--u) - var(--v))/2); display: table-cell; vertical-align: middle; } .anneau3 { position: relative; background-color: var(--colorbase); - border-radius: var(--y); - height: var(--y); - width: var(--y); + border-radius: var(--v); + height: var(--v); + width: var(--v); margin-left: auto; margin-right: auto; } .rondinterieur { - background-color: white; - height: var(--z); - width: var(--z); + background-color: var(--lighttercia); + height: var(--w); + width: var(--w); display: table; margin: 0 auto; - border-radius: var(--z); + border-radius: var(--w); } .rond { display: table; margin: 0 auto; background-color: var(--colorbase); - height: var(--z); - width: var(--z); - border-radius: var(--z); + height: var(--w); + width: var(--w); + border-radius: var(--w); } .rond2 { display: table; margin: 0 auto; background-color: white; - height: var(--z); - width: var(--z); - border-radius: var(--z); + height: var(--w); + width: var(--w); + border-radius: var(--w); } .rond3 { position: relative; - top : calc((var(--y) - var(--z))/ 2); - left : calc((var(--y) - var(--z))/2); + top : calc((var(--v) - var(--w))/ 2); + left : calc((var(--v) - var(--w))/2); display: table-cell; vertical-align: middle; background-color: white; - height: var(--z); - width: var(--z); - border-radius: var(--z); + height: var(--w); + width: var(--w); + border-radius: var(--w); } .rond4 { display: table; margin: 0 auto; background-color: var(--colorbase); - height: var(--z); - width: var(--z); - border-radius: var(--z); - } - - /* PARTIE CARRE */ - .carre { - position: relative; - background-color: blacke); - height: var(--y); - width: var(--y); - margin-left: auto; - margin-right: auto; - } - - .carreinterieur { - position: relative; - top : calc((var(--y) - var(--z))/2); - left : calc((var(--y) - var(--z))/2); - display: table-cell; - vertical-align: middle; - background-color: white; - height: var(--z); - width: var(--z); - } - .carre2 { - background-color: blacke); - height: var(--z); - width: var(--z); - display: table; - margin: 0 auto; - } - .carreinterieur2 { - background-color: white; - height: var(--z); - width: var(--z); - display: table; - margin-left: auto; - margin-right: auto; - } - .carreinterieur3 { - position: relative; - background-color: white; - height: var(--y); - width: var(--y); - left : calc((var(--x) - var(--y))/2); - display: table-cell; - vertical-align: middle; - } - .carrev2 { - position: relative; - background-color: blacke); - height: var(--y); - width: var(--y); - margin-left: auto; - margin-right: auto; - } - .carreinterieur4 { - position : relative; - top : calc((var(--y) - var(--z)) / 2); - left : calc((var(--y) - var(--z)) / 2); - background-color: white; - height: var(--z); - width: var(--z); - display: table-cell; - vertical-align: middle; - } - .carre3 { - background-color: blacke); - height: var(--z); - width: var(--z); - display: table; - margin: 0 auto; - } - /*A SUPPRIMER - =========================================== - */ - .pcarre { - background-color: blacke); - height: var(--z); - width: var(--z); - display: table; - margin: 0 auto; - } - /*========================================*/ - - /* PARTIE TRIANGLE */ - .triangle { - display: table; - margin: 0 auto; - border-left: calc(var(--y) /2) solid transparent; - border-right: calc(var(--y) /2) solid transparent; - border-bottom: var(--y) solid var(--colortwo); - } - .trianglerinterieur { - position: absolute; - bottom: calc((var(--x) - var(--z))/2.2); - left : calc((var(--x) - var(--z))/2); - border-left: calc(var(--z) /2) solid transparent; - border-right: calc(var(--z) /2) solid transparent; - border-bottom: var(--z) solid white; - } - .trianglerinterieur2 { - position: absolute; - bottom: calc((var(--x) - var(--z))/2); - left : calc((var(--x) - var(--z))/2); - border-left: calc(var(--z) /2) solid transparent; - border-right: calc(var(--z) /2) solid transparent; - border-bottom: var(--z) solid white; - } - .ptriangle { - position: absolute; - bottom: calc(((var(--x) - var(--y))/1.5) + ((var(--y) - var(--z))/3)); - left : calc((var(--x) - var(--z))/2); - border-left: calc(var(--z) /2) solid transparent; - border-right: calc(var(--z) /2) solid transparent; - border-bottom: var(--z) solid var(--colortwo); - } - .triangle2 { - display: table; - margin: 0 auto; - border-left: calc(var(--y) /2) solid transparent; - border-right: calc(var(--y) /2) solid transparent; - border-bottom: var(--y) solid white; - } - - /* Croix */ - .croix{ - position: absolute; - left: calc((var(--x) - var(--y)) / 2); - bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) ); - } - .croixinté{ - z-index: 2; - position: absolute; - left: calc((var(--x) - var(--z))/2); - bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) ); - } - .croixgauche{ - position: relative; - background-color: var(--couleur); - height: calc(var(--y)/4); - width: var(--y); - top : calc(var(--y) / 8); - transform: rotate(45deg); - } - .croixdroite{ - position: relative; - background-color: var(--couleur); - height: calc(var(--y)/4); - width: var(--y); - bottom : calc(var(--y) / 8); - transform: rotate(-45deg); - } - .croixgauche2{ - position: relative; - background-color: white; - height: calc(var(--y)/4); - width: var(--y); - top : calc(var(--y) / 8); - transform: rotate(45deg); - } - - .croixdroite2{ - position: relative; - background-color: white; - height: calc(var(--y)/4); - width: var(--y); - bottom : calc(var(--y) / 8); - transform: rotate(-45deg); - } - - .croixgaucheinte{ - position: relative; - background-color: white; - height: calc(var(--z)/16); - width: calc(var(--z)); - top : calc(var(--z) / 32); - transform: rotate(45deg); - } - .croixdroiteinte{ - position: relative; - background-color: white; - height: calc(var(--z)/16); - width: calc(var(--z)); - bottom : calc(var(--z) / 32); - transform: rotate(-45deg); - } - .croixgaucheinte2{ - position: relative; - background-color: var(--couleur); - height: calc(var(--z)/16); - width: calc(var(--z)); - top : calc(var(--z) / 32); - transform: rotate(45deg); - } - .croixdroiteinte2{ - position: relative; - background-color: var(--couleur); - height: calc(var(--z)/16); - width: calc(var(--z)); - bottom : calc(var(--z) / 32); - transform: rotate(-45deg); - } - /*LOSANGE*/ - .losange{ - width: var(--y); - height: var(--y); - display: table; - margin: 0 auto; - background: var(--couleur); - clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - } - .losange2{ - width: var(--y); - height: var(--y); - display: table; - margin: 0 auto; - background: white; - clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - } - .losangeinte{ - position: absolute; - z-index: 2; - width: var(--z); - height: var(--z); - bottom : calc( ((var(--x) - var(--z))/2)); - left : calc((var(--x) - var(--z))/2); - background: white; - clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - } - .losangeinte2{ - width: var(--z); - height: var(--z); - display: table; - margin: 0 auto; - background: var(--couleur); - clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - } - /*PENTA*/ - .trapeze{ - width: var(--y); - height: var(--y); - background: var(--couleur); - position: relative; - left: calc((var(--x) - var(--y)) / 2); - clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); - } - .trapeze2{ - width: var(--y); - height: var(--y); - background: white; - position: relative; - left: calc((var(--x) - var(--y)) / 2); - clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); - } - .trapezeinte{ - width: var(--z); - height: var(--z); - background: white; - position: absolute; - z-index: 2; - bottom : calc( ((var(--x) - var(--z))/2)); - left: calc((var(--x) - var(--z))/2); - clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); - } - .trapezeinte2{ - width: var(--z); - height: var(--z); - background: var(--couleur); - position: absolute; - z-index: 2; - bottom : calc( ((var(--x) - var(--z))/2)); - left: calc((var(--x) - var(--z))/2); - clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); - } - .octogon{ - width: var(--y); - height: var(--y); - background: var(--couleur); - position: relative; - left: calc((var(--x) - var(--y)) / 2); - clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); - } - .octogon2{ - width: var(--y); - height: var(--y); - background: white; - position: relative; - left: calc((var(--x) - var(--y)) / 2); - clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); - } - .octogoninte{ - width: var(--z); - height: var(--z); - background: white; - position: absolute; - z-index: 2; - bottom : calc( ((var(--x) - var(--z))/2)); - left: calc((var(--x) - var(--z))/2); - clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); - } - .octogoninte2{ - width: var(--z); - height: var(--z); - background: var(--couleur); - position: absolute; - z-index: 2; - bottom : calc( ((var(--x) - var(--z))/2)); - left: calc((var(--x) - var(--z))/2); - clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); - } - /*HEXAGONE*/ - .hexa{ - width: var(--y); - height: var(--y); - display: table; - margin: 0 auto; - background: var(--couleur); - clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); - } - .hexa2{ - width: var(--y); - height: var(--y); - display: table; - margin: 0 auto; - background: white; - clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); - } - .hexainte{ - position: absolute; - z-index: 2; - width: var(--z); - height: var(--z); - bottom : calc( ((var(--x) - var(--z))/2)); - left : calc((var(--x) - var(--z))/2); - background: white; - clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); - } - .hexainte2{ - display: table; - margin: 0 auto; - width: var(--z); - height: var(--z); - background: var(--couleur); - clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); - } - - - - - - - - - - - /*===========================================*/ - - - - - /*Externe*/ - - .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: 13vw; - border-radius: 0.75vw; - padding-right: 0.15vw; - padding-left: 0.15vw; - padding-bottom: 0.25vw; - 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.25vw; - 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; - } - - - .bouttonvalider2 { - position: absolute; - height: 3.4vw; - width: 11.4vw; - top: 0.3vw; - left: 0.3vw; - border-radius: 30px; - background-color: #00CC66; - } - - #textjouer { - font-family: Montserrat, impact, Arial Black; - position: absolute; - font-size: 2.5vw; - margin-top: 0.2vw; - margin-left: 2.7vw; - color: var(--lightsedonca); - text-align:center; + height: var(--w); + width: var(--w); + border-radius: var(--w); } } + + \ No newline at end of file diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css index 03422a9..1523516 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -9,26 +9,23 @@ --colorone : #00CBFF; --colortwo : #00FF6E; --colorthree : #C800FF; + --colorfour : #E6DA27; + --colorfive : #2E6DB4; + --colorsix : #E6792F; /*Les formes*/ - --x : 4vw; - --y : 2.5vw; /*taille anneau*/ - --z : 1.5vw; /*taille rond*/ - --d : calc(var(--x)/2); - --l : calc(var(--x)/2); - - + --u: calc(var(--x) / 2.75); + --v: calc(var(--y) / 2.75); + --w: calc(var(--z) / 2.75); + /*Les formes settings*/ + --x : 10vw; + --y : 7vw; + --z : 3.75vw; } .test{ color: black; } -@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; diff --git a/SwichGIT/src/css/desktops.css b/SwichGIT/src/css/desktops.css new file mode 100644 index 0000000..6f0704a --- /dev/null +++ b/SwichGIT/src/css/desktops.css @@ -0,0 +1,134 @@ +/*Ecran*/ +@media screen and (min-width: 992px) { + + + /*PARTIE FORMES*/ + + + /*===========================================*/ + + + + + /*Externe*/ + + .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: 13vw; + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + 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.25vw; + 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; + } + + + .bouttonvalider2 { + position: absolute; + height: 3.4vw; + width: 11.4vw; + top: 0.3vw; + left: 0.3vw; + border-radius: 30px; + background-color: #00CC66; + } + + #textjouer { + font-family: Montserrat, impact, Arial Black; + position: absolute; + font-size: 2.5vw; + margin-top: 0.2vw; + margin-left: 2.7vw; + color: var(--lightsedonca); + text-align:center; + } +} diff --git a/SwichGIT/src/css/fonts/Montserrat-Black.ttf b/SwichGIT/src/css/fonts/Montserrat-Black.ttf deleted file mode 100644 index 437b115..0000000 Binary files a/SwichGIT/src/css/fonts/Montserrat-Black.ttf and /dev/null differ diff --git a/SwichGIT/src/css/fonts/Montserrat-Black.woff b/SwichGIT/src/css/fonts/Montserrat-Black.woff deleted file mode 100644 index de437e0..0000000 Binary files a/SwichGIT/src/css/fonts/Montserrat-Black.woff and /dev/null differ diff --git a/SwichGIT/src/css/fonts/Montserrat-Black.woff2 b/SwichGIT/src/css/fonts/Montserrat-Black.woff2 deleted file mode 100644 index 63265f8..0000000 Binary files a/SwichGIT/src/css/fonts/Montserrat-Black.woff2 and /dev/null differ diff --git a/SwichGIT/src/css/fonts/Montserrat-ExtraBold.ttf b/SwichGIT/src/css/fonts/Montserrat-ExtraBold.ttf deleted file mode 100644 index 80ea806..0000000 Binary files a/SwichGIT/src/css/fonts/Montserrat-ExtraBold.ttf and /dev/null differ diff --git a/SwichGIT/src/css/fonts/Montserrat-ExtraBold.woff2 b/SwichGIT/src/css/fonts/Montserrat-ExtraBold.woff2 deleted file mode 100644 index 9e51d11..0000000 Binary files a/SwichGIT/src/css/fonts/Montserrat-ExtraBold.woff2 and /dev/null differ diff --git a/SwichGIT/src/css/formes.css b/SwichGIT/src/css/formes.css new file mode 100644 index 0000000..2b2ad2e --- /dev/null +++ b/SwichGIT/src/css/formes.css @@ -0,0 +1,191 @@ +.containform { + position: relative; + /*height: var(--x); + width: var(--x);*/ + display: table-cell; + vertical-align: middle; +} + +.containform3 { + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; + vertical-align: middle; +} + +.containform2{ + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; + vertical-align: middle; + background-color: black; +} +/*ROND*/ +.containexte{ + height: var(--y); + width: var(--y); + margin: 0 auto; + position: relative; + top: calc(var(--x)/8); +} + +#cacherond{ + display: none; +} + +#formSize{ + margin : 0 auto; + width: 100%; + height: 3vw; +} + +.slider-container .bar .fill { + display: block; + width: 50%; + height: 100%; + background-color: #6200ee; +} + +.slider-container .slider { + position: relative; + z-index: 2; + -webkit-appearance: none; + width: 100%; + height: 10px; + border-radius: 5px; + outline: none; + background-color: transparent; +} +.slider.container{ + position: relative; +} +.slider-container .bar { + position: absolute; + z-index: 1; + left: 0; + width: 100%; + height: 10px; + border-radius: 5px; + background-color: #c6aee7; + overflow: hidden; +} +/*Moz*/ +.slider-container .slider::-moz-range-thumb { + -webkit-appearance: none; + width: 1vw; + height: 1vw; + background-color: #6200ee; + border-radius: 1vw; + cursor: pointer; + outline: none; + box-shadow: 0 0 0 0 rgba(98, 0 ,238, .1); + transition: .3s ease-in-out; +} + +.slider-container .slider::-moz-range-thumb:hover { + box-shadow: 0 0 0 10px rgba(98,0,238,.1); +} +.slider-container .slider:active::-moz-range-thumb { + box-shadow: 0 0 0 20px rgba(98,0,238,.2); +} + + +.containinte{ + /*PROBLEME SIZE*/ + top: calc((var(--y) - var(--z)) / 2); + left: calc((var(--y) - var(--z)) / 2); + height: var(--z); + width: var(--z); + z-index: 2; + position: absolute; +} + +.cache{ + top: calc((var(--x) - var(--y)) / 2.8); + left: calc((var(--x) - var(--y)) / 2.2); + height: calc(var(--y)*1.05); + width: calc(var(--y)*1.05); + z-index: 2; + position: absolute; + z-index: 15; + +} + +.rond{ + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); +} + +.round{ + border-radius: 5vw; +} + +.cb{ + background-color: white; +} + +.cn{ + background-color: black; +} + +.formeinte{ + height: 90%; + width: 90%; + margin: 0 auto; +} +.formeexte{ + height: 100%; + width: 100%; +} + +.carre{ + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); +} + +.triangle{ + -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); +} + +.castriangle{ + margin-top: calc( (var(--y) - var(--z)) / 5); +} + +.caspenta{ + margin-top: calc( (var(--y) - var(--z)) / 10); +} + +.losange{ + -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} + +.croix{ + -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); + clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); +} + +.croixinte{ + -webkit-clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%); + clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%); + +} + +.penta{ + -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} + +.hexa{ + -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); +} + +.hocto{ + -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} + diff --git a/SwichGIT/src/css/phone.css b/SwichGIT/src/css/phone.css new file mode 100644 index 0000000..2418cd2 --- /dev/null +++ b/SwichGIT/src/css/phone.css @@ -0,0 +1,6 @@ +/*Demi Ecran*/ +@media screen and (max-width: 768px) { + body{ + background-color: green; + } +} diff --git a/SwichGIT/src/css/pickr.min.css b/SwichGIT/src/css/pickr.min.css index 2e6aac6..86073cf 100644 --- a/SwichGIT/src/css/pickr.min.css +++ b/SwichGIT/src/css/pickr.min.css @@ -1,132 +1,1018 @@ -/*! Pickr 1.0.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)} -.pickr *{box-sizing:border-box} -.pickr .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s} -.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto} -.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em} -.pickr .pcr-button:after{transition:background .3s;background:currentColor} -.pickr .pcr-button.clear{background-size:70%} -.pickr .pcr-button.clear:before{opacity:0} -.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pickr .pcr-button.disabled{cursor:not-allowed} -.pcr-app button,.pcr-app input,.pickr button,.pickr input{outline:none;border:none;-webkit-appearance:none} -.pcr-app button:focus,.pcr-app input:focus,.pickr button:focus,.pickr input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0} -.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1} -.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em} -.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0} -@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)} -} - -/*! Pickr2 1.0.1 MIT | https://github.com/Simonwep/pickr2 */.pickr2{position:relative;overflow:visible;transform:translateY(0)} -.pickr2 *{box-sizing:border-box} -.pickr2 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s} -.pickr2 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto} -.pickr2 .pcr-button:after,.pickr2 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em} -.pickr2 .pcr-button:after{transition:background .3s;background:currentColor} -.pickr2 .pcr-button.clear{background-size:70%} -.pickr2 .pcr-button.clear:before{opacity:0} -.pickr2 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pickr2 .pcr-button.disabled{cursor:not-allowed} -.pcr-app button,.pcr-app input,.pickr2 button,.pickr2 input{outline:none;border:none;-webkit-appearance:none} -.pcr-app button:focus,.pcr-app input:focus,.pickr2 button:focus,.pickr2 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0} -.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1} -.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em} -.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0} -@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)} -} - -/*! Pickr3 1.0.1 MIT | https://github.com/Simonwep/pickr3 */.pickr3{position:relative;overflow:visible;transform:translateY(0)} -.pickr3 *{box-sizing:border-box} -.pickr3 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s} -.pickr3 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto} -.pickr3 .pcr-button:after,.pickr3 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em} -.pickr3 .pcr-button:after{transition:background .3s;background:currentColor} -.pickr3 .pcr-button.clear{background-size:70%} -.pickr3 .pcr-button.clear:before{opacity:0} -.pickr3 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pickr3 .pcr-button.disabled{cursor:not-allowed} -.pcr-app button,.pcr-app input,.pickr3 button,.pickr3 input{outline:none;border:none;-webkit-appearance:none} -.pcr-app button:focus,.pcr-app input:focus,.pickr3 button:focus,.pickr3 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0} -.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1} -.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em} -.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0} -@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)} -} - - -/*! Pickr4 1.0.1 MIT | https://github.com/Simonwep/pickr4 */.pickr4{position:relative;overflow:visible;transform:translateY(0)} -.pickr4 *{box-sizing:border-box} -.pickr4 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s} -.pickr4 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto} -.pickr4 .pcr-button:after,.pickr4 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em} -.pickr4 .pcr-button:after{transition:background .3s;background:currentColor} -.pickr4 .pcr-button.clear{background-size:70%} -.pickr4 .pcr-button.clear:before{opacity:0} -.pickr4 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pickr4 .pcr-button.disabled{cursor:not-allowed} -.pcr-app button,.pcr-app input,.pickr4 button,.pickr4 input{outline:none;border:none;-webkit-appearance:none} -.pcr-app button:focus,.pcr-app input:focus,.pickr4 button:focus,.pickr4 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0} -.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1} -.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em} -.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0} -@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)} -} - - -/*! Pickr5 1.0.1 MIT | https://github.com/Simonwep/pickr5 */.pickr5{position:relative;overflow:visible;transform:translateY(0)} -.pickr5 *{box-sizing:border-box} -.pickr5 .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s} -.pickr5 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto} -.pickr5 .pcr-button:after,.pickr5 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em} -.pickr5 .pcr-button:after{transition:background .3s;background:currentColor} -.pickr5 .pcr-button.clear{background-size:70%} -.pickr5 .pcr-button.clear:before{opacity:0} -.pickr5 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pickr5 .pcr-button.disabled{cursor:not-allowed} -.pcr-app button,.pcr-app input,.pickr5 button,.pickr5 input{outline:none;border:none;-webkit-appearance:none} -.pcr-app button:focus,.pcr-app input:focus,.pickr5 button:focus,.pickr5 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor} -.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0} -.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1} -.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em} -.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0} -@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)} -} - -.pcr-app[data-theme=classic] .pcr-swatches>button{position:relative;width:1.75em;height:1.75em;border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1} -.pcr-app[data-theme=classic] .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:6px;border-radius:.15em;z-index:-1} -.pcr-app[data-theme=classic] .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box} -.pcr-app[data-theme=classic] .pcr-swatches>button:hover{filter:brightness(1.05)} -.pcr-app[data-theme=classic] .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em} -.pcr-app[data-theme=classic] .pcr-interaction>*{margin:0 .2em} -.pcr-app[data-theme=classic] .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em} -.pcr-app[data-theme=classic] .pcr-interaction input:hover{filter:brightness(.975)} -.pcr-app[data-theme=classic] .pcr-interaction input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(66,133,244,.75)} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{width:auto;color:#fff} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:hover,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save:hover{filter:brightness(.925)} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{background:#4285f4} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear{background:#f44250} -.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(244,66,80,.75)} -.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1} -.pcr-app[data-theme=classic] .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;user-select:none} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;transition:background-color .3s,box-shadow .3s;border-radius:.15em .15em 0 0;z-index:2} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{background:currentColor;width:100%;height:50%} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{position:relative;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(180deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)} -.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(180deg,transparent,#000),url('data:image/svg+xml;utf8, ');background-size:100%,50%} +/*! Pickr 1.0.1 MIT | https://github.com/Simonwep/pickr */ +.pickr{ + position:relative; + overflow:visible; + transform:translateY(0); + +} +.pickr *{ + box-sizing:border-box +} +.pickr .pcr-button{ + position:relative; + height:var(--y); + width: var(--y); + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s; +} +.pickr .pcr-button:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr .pcr-button:after,.pickr .pcr-button:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; +} +.pickr .pcr-button:after{ + transition:background .3s; + background:currentColor +} +.pickr .pcr-button.clear{ + background-size:70% +} +.pickr .pcr-button.clear:before{ + opacity:0 +} +.pickr .pcr-button.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr .pcr-button.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr button,.pickr input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr button:focus,.pickr input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} + +/*! Pickr2 1.0.1 MIT | https://github.com/Simonwep/pickr2 */ +.pickr2{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + +} +.pickr2 *{ + box-sizing:border-box +} +.pickr2 .pcr-button2{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s +} +.pickr2 .pcr-button2:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr2 .pcr-button2:after,.pickr2 .pcr-button2:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em +} +.pickr2 .pcr-button2:after{ + transition:background .3s; + background:currentColor +} +.pickr2 .pcr-button2.clear{ + background-size:70% +} +.pickr2 .pcr-button2.clear:before{ + opacity:0 +} +.pickr2 .pcr-button2.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr2 .pcr-button2.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr2 button,.pickr2 input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr2 button:focus,.pickr2 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} + +/*! Pickr3 1.0.1 MIT | https://github.com/Simonwep/pickr3 */ +.pickr3{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; +} +.pickr3 *{ + box-sizing:border-box +} +.pickr3 .pcr-button3{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s +} +.pickr3 .pcr-button3:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr3 .pcr-button3:after,.pickr3 .pcr-button3:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em +} +.pickr3 .pcr-button3:after{ + transition:background .3s; + background:currentColor +} +.pickr3 .pcr-button3.clear{ + background-size:70% +} +.pickr3 .pcr-button3.clear:before{ + opacity:0 +} +.pickr3 .pcr-button3.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr3 .pcr-button3.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr3 button,.pickr3 input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr3 button:focus,.pickr3 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} + + +/*! Pickr4 1.0.1 MIT | https://github.com/Simonwep/pickr4 */ +.pickr4{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; +} +.pickr4 *{ + box-sizing:border-box +} +.pickr4 .pcr-button4{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s +} +.pickr4 .pcr-button4:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr4 .pcr-button4:after,.pickr4 .pcr-button4:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em +} +.pickr4 .pcr-button4:after{ + transition:background .3s; + background:currentColor +} +.pickr4 .pcr-button4.clear{ + background-size:70% +} +.pickr4 .pcr-button4.clear:before{ + opacity:0 +} +.pickr4 .pcr-button4.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr4 .pcr-button4.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr4 button,.pickr4 input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr4 button:focus,.pickr4 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} + + +/*! Pickr5 1.0.1 MIT | https://github.com/Simonwep/pickr5 */ +.pickr5{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; +} +.pickr5 *{ + box-sizing:border-box +} +.pickr5 .pcr-button5{ + position:relative; + height:2em; + width:2em; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s +} +.pickr5 .pcr-button5:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr5 .pcr-button5:after,.pickr5 .pcr-button5:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em +} +.pickr5 .pcr-button5:after{ + transition:background .3s; + background:currentColor +} +.pickr5 .pcr-button5.clear{ + background-size:70% +} +.pickr5 .pcr-button5.clear:before{ + opacity:0 +} +.pickr5 .pcr-button5.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr5 .pcr-button5.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr5 button,.pickr5 input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr5 button:focus,.pickr5 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} + +.pcr-app[data-theme=classic] .pcr-swatches>button{ + position:relative; + width:1.75em; + height:1.75em; + border-radius:.15em; + cursor:pointer; + margin:2.5px; + flex-shrink:0; + justify-self:center; + transition:all .15s; + overflow:hidden; + background:transparent; + z-index:1 +} +.pcr-app[data-theme=classic] .pcr-swatches>button:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:6px; + border-radius:.15em; + z-index:-1 +} +.pcr-app[data-theme=classic] .pcr-swatches>button:after{ + content:""; + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + background:currentColor; + border:1px solid rgba(0,0,0,.05); + border-radius:.15em; + box-sizing:border-box +} +.pcr-app[data-theme=classic] .pcr-swatches>button:hover{ + filter:brightness(1.05) +} +.pcr-app[data-theme=classic] .pcr-interaction{ + display:flex; + flex-wrap:wrap; + align-items:center; + margin:0 -.2em +} +.pcr-app[data-theme=classic] .pcr-interaction>*{ + margin:0 .2em +} +.pcr-app[data-theme=classic] .pcr-interaction input{ + letter-spacing:.07em; + font-size:.75em; + text-align:center; + cursor:pointer; + color:#75797e; + background:#f1f3f4; + border-radius:.15em; + transition:all .15s; + padding:.45em .5em; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-interaction input:hover{ + filter:brightness(.975) +} +.pcr-app[data-theme=classic] .pcr-interaction input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(66,133,244,.75) +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-result{ + color:#75797e; + text-align:left; + flex:1 1 8em; + min-width:8em; + transition:all .2s; + border-radius:.15em; + background:#f1f3f4; + cursor:text +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-result::selection{ + background:#4285f4; + color:#fff +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-type.active{ + color:#fff; + background:#4285f4 +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{ + width:auto; + color:#fff +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:hover,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save:hover{ + filter:brightness(.925) +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{ + background:#4285f4 +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear{ + background:#f44250 +} +.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(244,66,80,.75) +} +.pcr-app[data-theme=classic] .pcr-selection{ + display:flex; + justify-content:space-between; + flex-grow:1 +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-picker{ + position:absolute; + height:18px; + width:18px; + border:2px solid #fff; + border-radius:100%; + user-select:none +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{ + position:relative; + z-index:1; + width:2em; + display:flex; + flex-direction:column; + justify-content:space-between; + margin-right:.75em +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + border-radius:.15em; + z-index:-1 +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{ + cursor:pointer; + transition:background-color .3s,box-shadow .3s; + border-radius:.15em .15em 0 0; + z-index:2 +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{ + border-radius:0 0 .15em .15em +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{ + background:currentColor; + width:100%; + height:50% +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{ + position:relative; + user-select:none; + display:flex; + flex-direction:column; + cursor:grab; + cursor:-moz-grab; + cursor:-webkit-grab +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette:active{ + cursor:grabbing; + cursor:-moz-grabbing; + cursor:-webkit-grabbing +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{ + width:100%; + height:8em; + z-index:1 +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{ + flex-grow:1; + border-radius:.15em +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + border-radius:.15em; + z-index:-1 +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{ + margin-left:.75em +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{ + left:50%; + transform:translateX(-50%) +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{ + width:8px; + flex-grow:1; + border-radius:50em +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{ + background:linear-gradient(180deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red) +} +.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{ + background:linear-gradient(180deg,transparent,#000),url('data:image/svg+xml; utf8, '); + background-size:100%,50% +} + + +/*! Pickr6 1.0.1 MIT | https://github.com/Simonwep/pickr6 */ +.pickr6{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; +} +.pickr6 *{ + box-sizing:border-box +} +.pickr6 .pcr-button6{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s +} +.pickr6 .pcr-button6:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr6 .pcr-button6:after,.pickr6 .pcr-button6:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em +} +.pickr6 .pcr-button6:after{ + transition:background .3s; + background:currentColor +} +.pickr6 .pcr-button6.clear{ + background-size:70% +} +.pickr6 .pcr-button6.clear:before{ + opacity:0 +} +.pickr6 .pcr-button6.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr6 .pcr-button6.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr6 button,.pickr6 input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr6 button:focus,.pickr6 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} + + +/*! Pickr7 1.0.1 MIT | https://github.com/Simonwep/pickr7 */ +.pickr7{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; +} +.pickr7 *{ + box-sizing:border-box +} +.pickr7 .pcr-button7{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s +} +.pickr7 .pcr-button7:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr7 .pcr-button7:after,.pickr7 .pcr-button7:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em +} +.pickr7 .pcr-button7:after{ + transition:background .3s; + background:currentColor +} +.pickr7 .pcr-button7.clear{ + background-size:70% +} +.pickr7 .pcr-button7.clear:before{ + opacity:0 +} +.pickr7 .pcr-button7.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr7 .pcr-button7.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr7 button,.pickr7 input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr7 button:focus,.pickr7 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} + + +/*! Pickr8 1.0.1 MIT | https://github.com/Simonwep/pickr8 */ +.pickr8{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; +} +.pickr8 *{ + box-sizing:border-box +} +.pickr8 .pcr-button8{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s +} +.pickr8 .pcr-button8:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto +} +.pickr8 .pcr-button8:after,.pickr8 .pcr-button8:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em +} +.pickr8 .pcr-button8:after{ + transition:background .3s; + background:currentColor +} +.pickr8 .pcr-button8.clear{ + background-size:70% +} +.pickr8 .pcr-button8.clear:before{ + opacity:0 +} +.pickr8 .pcr-button8.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pickr8 .pcr-button8.disabled{ + cursor:not-allowed +} +.pcr-app button,.pcr-app input,.pickr8 button,.pickr8 input{ + outline:none; + border:none; + -webkit-appearance:none +} +.pcr-app button:focus,.pcr-app input:focus,.pickr8 button:focus,.pickr8 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor +} +.pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 +} +.pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 +} +.pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em +} +.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 +} +@supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) +} + +} \ No newline at end of file diff --git a/SwichGIT/src/css/tablet.css b/SwichGIT/src/css/tablet.css new file mode 100644 index 0000000..dd8eda2 --- /dev/null +++ b/SwichGIT/src/css/tablet.css @@ -0,0 +1,79 @@ +/*DemTéléphone 1i Ecran*/ +@media screen and (min-width: 669px) and (max-width: 992px) { + body{ + background-color: red; + } + .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; + } + + .bouttonvalider2 { + position: absolute; + height: 6.8vw; + width: 22.8vw; + top: 1.1vw; + left: 1.1vw; + border-radius: 30px; + background-color: #00CC66; + } + + #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/index.html b/SwichGIT/src/index.html index 9e22aff..46d376f 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -1,21 +1,25 @@ - + + SwishGame - - - + + + + + + - + @@ -73,60 +77,90 @@
-

Les Paramètres

+

Paramètres

×
-
-


+
-
-
-
-
-
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+
+
+ + + +
- - -
-
-
- -
-

Les couleurs

-
- -
-
@@ -141,6 +175,9 @@ var couleur3 = varColorToHex('--colorone'); var couleur4 = varColorToHex('--colortwo'); var couleur5 = varColorToHex('--colorthree'); + var couleur6 = varColorToHex('--colorfour'); + var couleur7 = varColorToHex('--colorfive'); + var couleur8 = varColorToHex('--colorsix'); const pickr = Pickr.create({ el: '.color-picker', theme: 'classic', // or 'monolith', or 'nano' @@ -341,6 +378,130 @@ } } }); + const pickr6 = Pickr.create({ + el: '.color-picker6', + theme: 'classic', // or 'monolith', or 'nano' + default: couleur6, + + swatches: [ + '#df0024', + '#f3c300', + '#00ab9f', + '#2e6db4', + '#1bff7e', + '#fe1b00', + '#7f00ff', + '#29F073', + '#E6792F', + '#E6DA27', + '#E8695A', + '#2E294E', + '#64A6BD', + '#659157' + ], + + components: { + // Main components + preview: true, + opacity: false, + hue: true, + // Input / output Options + interaction: { + hex: false, + rgba: false, + hsla: false, + hsva: false, + cmyk: false, + input: true, + clear: false, + save: true + } + } + }); + const pickr7 = Pickr.create({ + el: '.color-picker7', + theme: 'classic', // or 'monolith', or 'nano' + default: couleur7, + + swatches: [ + '#df0024', + '#f3c300', + '#00ab9f', + '#2e6db4', + '#1bff7e', + '#fe1b00', + '#7f00ff', + '#29F073', + '#E6792F', + '#E6DA27', + '#E8695A', + '#2E294E', + '#64A6BD', + '#659157' + ], + + components: { + // Main components + preview: true, + opacity: false, + hue: true, + // Input / output Options + interaction: { + hex: false, + rgba: false, + hsla: false, + hsva: false, + cmyk: false, + input: true, + clear: false, + save: true + } + } + }); + const pickr8 = Pickr.create({ + el: '.color-picker8', + theme: 'classic', // or 'monolith', or 'nano' + default: couleur8, + + swatches: [ + '#df0024', + '#f3c300', + '#00ab9f', + '#2e6db4', + '#1bff7e', + '#fe1b00', + '#7f00ff', + '#29F073', + '#E6792F', + '#E6DA27', + '#E8695A', + '#2E294E', + '#64A6BD', + '#659157' + ], + + components: { + // Main components + preview: true, + opacity: false, + hue: true, + // Input / output Options + interaction: { + hex: false, + rgba: false, + hsla: false, + hsva: false, + cmyk: false, + input: true, + clear: false, + save: true + } + } + }); + + + + //changement de couleur pickr.on('change', (...args) => { let color = args[0].toRGBA(); @@ -372,6 +533,24 @@ let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` document.documentElement.style.setProperty('--colorthree', newcouleur); }); + pickr6.on('change', (...args) => { + let color = args[0].toRGBA(); + console.log(color); + let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` + document.documentElement.style.setProperty('--colorfour', newcouleur); + }); + pickr7.on('change', (...args) => { + let color = args[0].toRGBA(); + console.log(color); + let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` + document.documentElement.style.setProperty('--colorfive', newcouleur); + }); + pickr8.on('change', (...args) => { + let color = args[0].toRGBA(); + console.log(color); + let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` + document.documentElement.style.setProperty('--colorsix', newcouleur); + }); @@ -379,14 +558,13 @@ - +
-
- -
-
-
+
+ +
+
+ +
+
+ + +
+

Modedddd

+ +
+
+ +
+
+ + +
-
-
-
+
+
+
+ + +
+ - -
-
-
-
-
-
-
-
@@ -434,8 +620,7 @@
- -
+
diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index a8c6b19..8449b51 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -8,8 +8,8 @@ var darkprima = "#474747"; var darkseconda = "#393939"; var darktercia = "#606060"; var carteselect = []; -var deckPartie = []; //Ensemble des cartes affichées a l'ecran -var TasDuJEU = []; // Ensemble de toutes les cartes présente dans le jeu +var deckPartie = []; //Ensemble des cartes affichees a l'ecran +var TasDuJEU = []; // Ensemble de toutes les cartes presente dans le jeu @@ -17,7 +17,7 @@ var TasDuJEU = []; // Ensemble de toutes les cartes présente dans le jeu class Carte { - constructor(id, allFigure/*,row,column,nbForme*/) { //à décommenter quand il y aura des prametres de partie + constructor(id, allFigure/*,row,column,nbForme*/) { //a decommenter quand il y aura des prametres de partie //Attribut de Classe this.identifiant = id; this.row = 4 /*row*/; @@ -37,7 +37,7 @@ class Carte { divconteneur.className = "flex-item"; divconteneur.id = "card" + this.identifiant; - for (var i = 0; i < 12; i++) { + for (var i = 0; i < this.row * this.column; i++) { var divcase = document.createElement('div'); divcase.className = "item-form"; @@ -65,7 +65,7 @@ class Carte { var lacarte = "card" + macarte; for (var i = 0; i < deckPartie.length; i++) { if (this.id == deckPartie[i].identifiant) { - var laCarte = deckPartie[i];//Carte liée avec le code HTML + var laCarte = deckPartie[i];//Carte liee avec le code HTML } } if (document.getElementById(lacarte).style.boxShadow != "") { @@ -186,7 +186,7 @@ class Figure { } var unRond = document.createElement('div'); - unRond.className = "rondinterieur inté"; + unRond.className = "rondinterieur inte"; unCercle.appendChild(unRond); divContainForm.appendChild(unCercle); @@ -309,7 +309,7 @@ function journuit() { function lancerpartie() { document.getElementById("pageAccueil").style.visibility = "hidden"; - //fonction de création de partie à changer en fonction du test voulu + //fonction de creation de partie a changer en fonction du test voulu creePartieClassique(); document.getElementById("pageGame").style.visibility = "visible"; } @@ -332,7 +332,7 @@ function redistribuer() { deckPartie = []; for (var i = 0; i < 16; i++) { var index = getRandom(0, TasDuJEU.length - 1) - var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + var dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -340,7 +340,7 @@ function redistribuer() { } while (dejaPresente == true) { index = getRandom(0, TasDuJEU.length - 1) - dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -354,7 +354,7 @@ function redistribuer() { } //================================================================================================================================================================ -//Fonction créations de game +//Fonction creations de game function genererTouteslesCartes3_4Possibles() { deckPartie = []; @@ -431,7 +431,7 @@ function creePartieClassique() { } for (var i = 0; i < 16; i++) { var index = getRandom(0, TasDuJEU.length - 1) - var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + var dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -439,7 +439,7 @@ function creePartieClassique() { } while (dejaPresente == true) { index = getRandom(0, TasDuJEU.length - 1) - dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -475,7 +475,7 @@ function creePartieInfini() { Coy2 = getRandom(0, 3); } AllFigure.push(new Figure(new Array(TypeFigure.Moyen), FormeFigure.Rond, Cox2, Coy2)); - //Code de Génération de Figure + //Code de Generation de Figure var uneCarte = new Carte(j, AllFigure); deckPartie.push(uneCarte); @@ -493,7 +493,7 @@ function changerlesCartesDeTasDeJeu() { TasDuJEU.splice(unIndex, 1); if (TasDuJEU.length > 16) { var index2 = getRandom(0, TasDuJEU.length - 1) - var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + var dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -501,7 +501,7 @@ function changerlesCartesDeTasDeJeu() { } while (dejaPresente == true) { index2 = getRandom(0, TasDuJEU.length - 1) - dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -546,7 +546,7 @@ function remplacerLaCarte(uneCarte) { Coy2 = getRandom(0, 3); } AllFigure.push(new Figure(new Array(TypeFigure.Moyen), FormeFigure.Rond, Cox2, Coy2)); - //Code de Génération de Figure + //Code de Generation de Figure var newCarte = new Carte(pos + 1, AllFigure); deckPartie[pos] = newCarte; } @@ -615,7 +615,63 @@ function creaMatrice(row, column) { } //================================================================================= -//chercheCombi => Compte les combinainsons de 2 cartes à l'écran +//chercheCombi => Compte les combinainsons de 2 à 5 cartes a l'ecran +//Pour changer le nombre de carte maximum dans une liste il faut changer la valeur max de N + +function chercherCombinaison() { + var Cptsolution = 0; + /* + Pour toutes les longueurs possible d’un tas de carte (N = 0, N<4 ; N++) + Pour toutes les échantillon de cartes ( i = 0 ; i<16 – N ; i ++) + Pour toutes les autres cartes (j=0 ;j<15-i-N ;j++) + DeckTest = vide ; + DeckTest.push(DeckPartie[i]) + Pour N + 2 cartes (k=1 ;k<2+N ;k++) + DeckTest.push(DeckPartie[i+k+j]) + Tab = AssemblageArbre(copie(Decktest) , Decktest[0]) + Pour toutes les valeurs de tab + Si tab[m] == N+2 + //Woula j’ai trouvé*/ + for (var N = 0; N < 4; N++) { + for (var i = 0; i < 16 - N; i++) { + for (var j = 0; j < 15 - i - N; j++) { + var DeckTeste = []; + var tabCode = []; + var tab = []; + var copie = []; + DeckTeste.push(deckPartie[i]); + for (var k = 1; k < N + 2; k++) { + DeckTeste.push(deckPartie[i + k + j]) + } + tab = AssemblageARBRE(copieListeDeCarte(DeckTeste), copieCarte(DeckTeste[0])); + + //Recupération de code + + var solution = true; + for (var h = 0; h < tab.length; h++) { + tabCode.push(tab[h].code); + } + //Reagarde si il y a une solution + for (var g = 0; g < tab.length; g++) { + if (tab[g].code == DeckTeste.length) { + solution = false; + } + } + //Reagarde si il y a une solution + if (!solution) { + Cptsolution++; + var recup = []; + for (var h = 0; h < DeckTeste.length; h++) { + recup.push(deckPartie.indexOf(DeckTeste[h]) + 1); + } + window.alert("Combinaison a " + (N + 2) + " cartes trouvée : " + recup); + } + } + } + } + window.alert("Nombre de combinaison: " + Cptsolution); +} + function chercheCombi2() { var Cptsolution = 0; @@ -656,15 +712,15 @@ function chercheCombi2() { } if (!solution) { Cptsolution++; - window.alert("Combinaison a 2 trouvé: " + (i + 1) + " " + (i + j + 2)); + window.alert("Combinaison a 2 trouve: " + (i + 1) + " " + (i + j + 2)); } } } - window.alert("Nombre de solution à 2 cartes : " + Cptsolution); + window.alert("Nombre de solution a 2 cartes : " + Cptsolution); } //================================================================================= -//chercheCombi => Compte les combinainsons de 3 cartes à l'écran +//chercheCombi => Compte les combinainsons de 3 cartes a l'ecran function chercheCombi3() { var Cptsolution = 0; for (var i = 0; i < 15; i++) { //Partie fixe @@ -710,7 +766,7 @@ function chercheCombi3() { } if (!solution) { Cptsolution++; - window.alert("Combinaison a 3 trouvé: " + (i + 1) + " " + (i + j + 2) + " " + (k + j + i + 3)); + window.alert("Combinaison a 3 trouve: " + (i + 1) + " " + (i + j + 2) + " " + (k + j + i + 3)); } } } @@ -718,12 +774,12 @@ function chercheCombi3() { if (Cptsolution == 0) { window.alert("Pas de solution"); } - window.alert("Nombre de solution à 3 cartes : " + Cptsolution); + window.alert("Nombre de solution a 3 cartes : " + Cptsolution); } //================================================================================= -//FONCTION DE TEST => permet de tester des fonctionnalité via le bouton VALIDER +//FONCTION DE TEST => permet de tester des fonctionnalite via le bouton VALIDER function testPourJeuInfini() { try { @@ -752,7 +808,7 @@ function testPourJeuInfini() { } } if (solution) { - window.alert("Rien trouvé chef !!!"); + window.alert("Rien trouve chef !!!"); } if (!solution) { window.alert("J'ai une solution chef !!!!"); @@ -793,7 +849,7 @@ function testPourJeuClassique() { } } if (solution) { - window.alert("Rien trouvé chef !!!"); + window.alert("Rien trouve chef !!!"); } if (!solution) { window.alert("J'ai une solution chef !!!!"); @@ -916,7 +972,7 @@ function comparaisonARBRE(CarteMereEntree, CarteFilleEntree) { for (var j = 0; j < CarteMere.SesFigures.length; j++) { if (CarteFille.SesFigures[i].X == CarteMere.SesFigures[j].X) { if (CarteFille.SesFigures[i].Y == CarteMere.SesFigures[j].Y) { - //Coordonnées identiques + //Coordonnees identiques if (CarteFille.SesFigures[i].forme == CarteMere.SesFigures[j].forme) { //Forme identiques for (var k = 0; k < CarteMere.SesFigures[j].type.length; k++) { @@ -940,7 +996,7 @@ function comparaisonARBRE(CarteMereEntree, CarteFilleEntree) { } } } - //Si le type de la figure n'y est pas on l'ajoute à la liste de carte Mere; + //Si le type de la figure n'y est pas on l'ajoute a la liste de carte Mere; liaison = liaison + 1; CarteMere.SesFigures[j].type.push(CarteFille.SesFigures[i].type[0]); } else { @@ -1012,21 +1068,21 @@ function EnvoyerNouveauNom() { -/* + function addplayer(){ - //j'ai mis une limite de 6joueurs, mais c'est à voir + //j'ai mis une limite de 6joueurs, mais c'est a voir if(nbplayers < 7){ - //création de la div contenant le pseudo + //creation de la div contenant le pseudo var divpseudo = document.createElement('div'); divpseudo.id = 'pseudolist'; - //reprise du pseudo entré par le joueur + //reprise du pseudo entre par le joueur var pseudo = document.getElementById("inputpseudo").value; - //vérification si pseudo vide pour lui donner un pseudo du style "Joueur3" + //verification si pseudo vide pour lui donner un pseudo du style "Joueur3" if(pseudo == "") { pseudo = "Joueur " + nbplayers; } - //création du text-pseudo + //creation du text-pseudo var tag = document.createElement("p"); tag.className = "pseudojoueur"; var text = document.createTextNode(pseudo); @@ -1046,7 +1102,7 @@ function ajouterplayer(event){ addplayer(); } -*/ + function doublonInterdit(uneCarte) { var lesCoPetit = []; diff --git a/SwichGIT/src/js/menu.js b/SwichGIT/src/js/menu.js index ced97d3..ef2ecd3 100644 --- a/SwichGIT/src/js/menu.js +++ b/SwichGIT/src/js/menu.js @@ -1,41 +1,39 @@ var FormeSelect = []; var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"] +var ListeClassForme = ["rond","carre","triangle","losange","croix","penta","hexa","hocto"] + //3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes var mode = 0; +var valRange; +function settingOpen(){ + var elements = document.getElementsByClassName("pcr-button"); + for (var i = 0; i < elements.length; i++) { + elements[i].classList.add(ListeClassForme[i]); + } +} -function SelectShape(shape){ - //récupérer la forme - var forme = "set"+shape; - var selection = document.getElementById(forme); - //Que si déjà selectionné - var couleurBase = selection.style.backgroundColor; - //désélection - if(couleurBase[0] == "v" && couleurBase[1] == "a" && couleurBase[2] == "r"){ - //supprimé de la liste des selectionné - var pos = FormeSelect.indexOf(shape); - FormeSelect.splice(pos, 1); - //récupérer la couleur - var recupColor = getVarColor(couleurBase); - ListeCouleur.push(recupColor); - //mettre à jour la couleur - selection.style.backgroundColor = "#333"; - //document.getElementById("SettingName").innerHTML = recupColor; +function disableCache(formName){ + cacheName = "cache"+formName; + document.getElementById(cacheName).style.display = "none"; + FormeSelect.push(form); + //document.getElementById("SettingName").innerHTML = FormeSelect.length; +} - }else{ //selection - if(FormeSelect.length > 4){ - alert("NON NON NOOOOOON"); - } else{ - FormeSelect.push(shape); - //définir la couleur - var couleur = "var(--" + ListeCouleur[0] + ")"; - selection.style.backgroundColor = couleur; - //Supprimer la couleur de la liste - ListeCouleur.splice(0, 1); - //document.getElementById("SettingName").innerHTML = ListeCouleur.length; - } - } +function changeContour(value){ + var newvalue = value * 0.055 + 1; + document.documentElement.style.setProperty('--z', newvalue+'vw'); + //document.getElementById("SettingName").innerHTML = newvalue; +} + +function ableCache(formName){ + cacheName = "cache"+formName; + const pos = FormeSelect.indexOf(formName); + if (pos > -1) { + FormeSelect.splice(pos, 1); + } + document.getElementById(cacheName).style.display = "block"; } function getVarColor(color){ @@ -50,33 +48,3 @@ function varColorToHex(color){ hex = hex.substring(1,hex.length); return hex; } - -function settingSuiv(){ - if(mode == 0){ //passage au mode forme - document.getElementById('testSettings').innerHTML = "Les formes"; - document.getElementById('couleurs').style.display = "none"; - document.getElementById('forme').style.visibility = "visible"; - document.getElementById('SettingAfter').style.visibility = "collapse"; - document.getElementById('SettingBefore').style.visibility = "visible"; - mode = mode + 1; - } -} - -function settingPrec(){ - if(mode == 1){ - document.getElementById('testSettings').innerHTML = "Les couleurs"; - document.getElementById('couleurs').style.display = ""; - document.getElementById('forme').style.visibility = "collapse"; - document.getElementById('SettingAfter').style.visibility = "visible"; - document.getElementById('SettingBefore').style.visibility = "collapse"; - mode = mode - 1; - } -} - -function SettingClose(){ - document.getElementById('popup2').style.display = "none"; -} - -function settingOpen(){ - document.getElementById('popup2').style.display = ""; -} \ No newline at end of file