diff --git a/SwichGIT/Doc/Etudes formes/index.html b/SwichGIT/Doc/Etudes formes/V1/index.html similarity index 100% rename from SwichGIT/Doc/Etudes formes/index.html rename to SwichGIT/Doc/Etudes formes/V1/index.html diff --git a/SwichGIT/Doc/Etudes formes/script.js b/SwichGIT/Doc/Etudes formes/V1/script.js similarity index 100% rename from SwichGIT/Doc/Etudes formes/script.js rename to SwichGIT/Doc/Etudes formes/V1/script.js diff --git a/SwichGIT/Doc/Etudes formes/style.css b/SwichGIT/Doc/Etudes formes/V1/style.css similarity index 100% rename from SwichGIT/Doc/Etudes formes/style.css rename to SwichGIT/Doc/Etudes formes/V1/style.css diff --git a/SwichGIT/Doc/Etudes formes/V2/index.html b/SwichGIT/Doc/Etudes formes/V2/index.html new file mode 100644 index 0000000..2c47017 --- /dev/null +++ b/SwichGIT/Doc/Etudes formes/V2/index.html @@ -0,0 +1,216 @@ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/SwichGIT/Doc/Etudes formes/V2/style.css b/SwichGIT/Doc/Etudes formes/V2/style.css new file mode 100644 index 0000000..f3d2cd6 --- /dev/null +++ b/SwichGIT/Doc/Etudes formes/V2/style.css @@ -0,0 +1,99 @@ +:root{ + --x : 10vw; + --y : 8vw; + --z : 4vw; +} + +.containform { + 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{ + margin: 0 auto; + height: var(--y); + width: var(--y); +} + +.containinte{ + /*PROBLEME SIZE*/ + top: calc((var(--x) - var(--z)) / 2); + left: calc((var(--x) - var(--z)) / 2); + height: var(--z); + width: var(--z); + z-index: 2; + position: absolute; +} + +.rond{ + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); +} + +.cb{ + background-color: white; +} + +.cn{ + background-color: black; +} + +.formeinté{ + height: 100%; + width: 100%; +} +.formeexté{ + 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); +} + +.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%); +} + +.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/MorpionMulti/.idea/.gitignore b/SwichGIT/MorpionMulti/.idea/.gitignore new file mode 100644 index 0000000..36c467d --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.gitignore @@ -0,0 +1,8 @@ +# 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/.idea.iml b/SwichGIT/MorpionMulti/.idea/.idea/.idea.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/.idea.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml b/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml b/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml new file mode 100644 index 0000000..5512eb5 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/modules.xml b/SwichGIT/MorpionMulti/.idea/.idea/modules.xml new file mode 100644 index 0000000..08f54a6 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml b/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml new file mode 100644 index 0000000..5161708 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + 1605542003265 + + + + + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.name b/SwichGIT/MorpionMulti/.idea/.name new file mode 100644 index 0000000..40daab1 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.name @@ -0,0 +1 @@ +bddt.php \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/TP2.iml b/SwichGIT/MorpionMulti/.idea/TP2.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/TP2.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml b/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/deployment.xml b/SwichGIT/MorpionMulti/.idea/deployment.xml new file mode 100644 index 0000000..f921b39 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/deployment.xml @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/modules.xml b/SwichGIT/MorpionMulti/.idea/modules.xml new file mode 100644 index 0000000..c693d56 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/php.xml b/SwichGIT/MorpionMulti/.idea/php.xml new file mode 100644 index 0000000..3571588 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/php.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/DB.php b/SwichGIT/MorpionMulti/DB.php index e28a3ce..d7ed019 100644 --- a/SwichGIT/MorpionMulti/DB.php +++ b/SwichGIT/MorpionMulti/DB.php @@ -1,52 +1,78 @@ - + + + +
+ +
+
+ + +

Morpion

-

+

- +
+ +

+ query('INSERT INTO partie(Id) VALUES("'.$idpartie.'")'); + + +$action = $_REQUEST['action'] ?? NULL; +echo $action; + +if($action=="Creer"){ + $partiecreer=genererChaineAleatoire(); + $db->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'; - } + $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'; } @@ -70,28 +96,20 @@ if(isset($colonne)and $valeur!="" and $colonne!=''){ else{ $update = $db->query('UPDATE partie SET "'.$colonne.'" = "'.$valeur.'" where Id="'.$idpartie.'" '); } - } -//$db->query('INSERT INTO partie(Id) VALUES("'.$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']; - - +$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 " diff --git a/SwichGIT/MorpionMulti/MyDB.php b/SwichGIT/MorpionMulti/MyDB.php index 9ae6b82..1c579bd 100644 --- a/SwichGIT/MorpionMulti/MyDB.php +++ b/SwichGIT/MorpionMulti/MyDB.php @@ -11,7 +11,7 @@ class MyDB extends SQLite3 function genererChaineAleatoire($longueur = 10) { - $caracteres = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; + $caracteres = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; $longueurMax = strlen($caracteres); $chaineAleatoire = ''; for ($i = 0; $i < $longueur; $i++) @@ -19,4 +19,13 @@ function genererChaineAleatoire($longueur = 10) $chaineAleatoire .= $caracteres[rand(0, $longueurMax - 1)]; } return $chaineAleatoire; -} \ No newline at end of file +} + +function CreerPatie(string $bd,string $id){ + $id=genererChaineAleatoire(); + $bd->query('INSERT INTO partie(Id) VALUES("'.$id.'")'); +} + +function SupprimerLigne(string $bd,string $id){ + $suppression = $bd->query('DELETE FROM partie where Id="'.$id.'" '); +} diff --git a/SwichGIT/MorpionMulti/accueil.php b/SwichGIT/MorpionMulti/accueil.php new file mode 100644 index 0000000..f395f27 --- /dev/null +++ b/SwichGIT/MorpionMulti/accueil.php @@ -0,0 +1,48 @@ + + + + + + + + +

+
+ + + + + + + +
+ + + +

+ + + + + + + diff --git a/SwichGIT/MorpionMulti/bddt.php b/SwichGIT/MorpionMulti/bddt.php new file mode 100644 index 0000000..5eef32f --- /dev/null +++ b/SwichGIT/MorpionMulti/bddt.php @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/js.js b/SwichGIT/MorpionMulti/js.js new file mode 100644 index 0000000..e69de29 diff --git a/SwichGIT/MorpionMulti/mysqlitedb.db b/SwichGIT/MorpionMulti/mysqlitedb.db index fd7e6cd..cea990e 100644 Binary files a/SwichGIT/MorpionMulti/mysqlitedb.db and b/SwichGIT/MorpionMulti/mysqlitedb.db differ diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css index d3d001c..ceeebe6 100644 --- a/SwichGIT/src/css/PageDaccueil.css +++ b/SwichGIT/src/css/PageDaccueil.css @@ -24,6 +24,157 @@ margin-right: 4vh; } +/*SETTINGS*/ +#forme{ + visibility: hidden; +} + +#couleurs{ + z-index: 1; + top: -20vw; +} + +.pannel{ + height: 100px; + width: 100px; + background-color: red; +} + +#pickrcontner{ + position: relative; + display: flex; + justify-content: space-around; +} + +.Mode_Setting{ + height: 20vw; + position: relative; + margin : 0 auto; +} +#BottomSetings{ + position: absolute; + left: 0; + bottom: 0; + height: 5vw; + width: 100%; + border-radius: 0 0 0.3vw 0.3vw; +} + +#SettingBefore{ + height: 5vw; + width: 5vw; + background-color: var(--lightsedonca); + color: black; + font-size: 3vw; + visibility: collapse; +} +#SettingAfter{ + bottom: 5vw; + position: relative; + height: 5vw; + width: 5vw; + background-color: var(--lightsedonca); + float: right; +} + +#testSettings{ + position: absolute; + color: black; + bottom: 0; + left: 18vw; +} + + +#ShapeSettings{ + height: 100%; + width: 100%; + margin: auto 2vw; + display: flex; + flex-wrap: wrap; +} +.ShapeContener{ + height: 9vw; + width: 9vw; + margin-left: 1vw; + position: relative; + 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; +} + +.Colorone{background-color: var(--colorbase);} +.Colortwo{background-color: var(--colorcarre);} +.Colorthree{background-color: var(--colorone);} +.Colorfour{background-color: var(--colortwo);} +.Colorfive{background-color: var(--colorthree);} + + /*Bouton info*/ #infosec{ @@ -337,3 +488,34 @@ label:active:after { width: 100%; height: 1.7vw; } + +/* === FORMES === */ + +.contentButton{ + height: 3vw; + width: 15%; + margin : 0 auto; + position: relative; + bottom: 5vw; +} + +.buttonvalidersettings{ + height: 100%; + width: 100%; + border-style: none; + background-color: red; + color: white; + font-family: arial; + font-size: 2vw; + border-radius: 15px; +} + +.buttonvalidersettings:active{ + background-color: blue; +} + + + + + + diff --git a/SwichGIT/src/css/Resp3.css b/SwichGIT/src/css/Resp3.css index 27ed7fa..47f2071 100644 --- a/SwichGIT/src/css/Resp3.css +++ b/SwichGIT/src/css/Resp3.css @@ -1,9 +1,20 @@ /*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; - left: calc((var(--x) - var(--y)) / 2); background-color: var(--colorbase); border-radius: var(--y); height: var(--y); @@ -11,28 +22,64 @@ 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); + display: table-cell; + vertical-align: middle; + } + .anneau3 { + position: relative; + background-color: var(--colorbase); + border-radius: var(--y); + height: var(--y); + width: var(--y); + margin-left: auto; + margin-right: auto; + } .rondinterieur { - background-color: var(--lighttercia); + background-color: white; height: var(--z); width: var(--z); display: table; margin: 0 auto; border-radius: var(--z); } - - .containform { + .rond { + display: table; + margin: 0 auto; + background-color: var(--colorbase); + height: var(--z); + width: var(--z); + border-radius: var(--z); + } + .rond2 { + display: table; + margin: 0 auto; + background-color: white; + height: var(--z); + width: var(--z); + border-radius: var(--z); + } + .rond3 { position: relative; - height: var(--x); - width: var(--x); + 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); + border-radius: var(--z); } - - .rond { + .rond4 { display: table; margin: 0 auto; - background-color: var(--colorrond); + background-color: var(--colorbase); height: var(--z); width: var(--z); border-radius: var(--z); @@ -41,7 +88,7 @@ /* PARTIE CARRE */ .carre { position: relative; - background-color: var(--colorcarre); + background-color: blacke); height: var(--y); width: var(--y); margin-left: auto; @@ -54,156 +101,348 @@ left : calc((var(--y) - var(--z))/2); display: table-cell; vertical-align: middle; - background-color: var(--lightsedonca); + 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: var(--colorcarre); + background-color: blacke); height: var(--z); width: var(--z); display: table; margin: 0 auto; } + /*========================================*/ /* 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; + 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; - 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); + 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; - 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; + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-bottom: var(--y) solid white; } - .triangletrapeze { - padding-top: 0.1vw; + /* Croix */ + .croix{ position: absolute; - border-left: 3vw solid transparent; - border-right: 3vw solid transparent; - border-bottom: 2.5vw solid #6FDE30; + left: calc((var(--x) - var(--y)) / 2); + bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) ); } - - .trapezeinte { + .croixinté{ + z-index: 2; 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; + 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); } - .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; + .croixdroite2{ + position: relative; + background-color: white; + height: calc(var(--y)/4); + width: var(--y); + bottom : calc(var(--y) / 8); + transform: rotate(-45deg); } - .trapezep { + .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; - 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; + background: var(--couleur); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } - - .triangletrapezep { + .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; - 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; + 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%); } - - .losangephaut { + .losangeinte2{ + width: var(--z); + height: var(--z); display: table; margin: 0 auto; - margin-top: -3vw; - border-left: 3vw solid transparent; - border-right: 3vw solid transparent; - border-bottom: 3vw solid #B130DE; + background: var(--couleur); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } - - .losangepbas { + /*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; - border-left: 3vw solid transparent; - border-right: 3vw solid transparent; - border-top: 3vw solid #B130DE; + 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%); } - - .losangephauti { + .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; - margin-top: -1.5vw; - border-left: 1.5vw solid transparent; - border-right: 1.5vw solid transparent; - border-bottom: 1.5vw solid var(--lightsedonca); + background: var(--couleur); + clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } - - .losangepbasi { + .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; - margin-left: 1.5vw; - border-left: 1.5vw solid transparent; - border-right: 1.5vw solid transparent; - border-top: 1.5vw solid var(--lightsedonca); + 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%); } - - .losangephautc { + .hexainte2{ 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; + width: var(--z); + height: var(--z); + background: var(--couleur); + clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } + - .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; - } + + + + + + + + + /*===========================================*/ + + + + + /*Externe*/ .buttonretour { position: relative; diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css index 831bbc0..03422a9 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -3,23 +3,31 @@ --lightprima: #DEDEDE; --lightsedonca: #B7B7B7; --lighttercia: #E6E6E6; - /*Couleur*/ + /*Couleur bases*/ --colorbase : #e75259; + --colorcarre : #30C0DE; --colorone : #00CBFF; --colortwo : #00FF6E; --colorthree : #C800FF; - --colorcarre : #30C0DE; /*Les formes*/ - --x : 3vw; + --x : 4vw; --y : 2.5vw; /*taille anneau*/ - --z :1.5vw; /*taille rond*/ + --z : 1.5vw; /*taille rond*/ --d : calc(var(--x)/2); --l : calc(var(--x)/2); } +.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; diff --git a/SwichGIT/src/css/pickr.min.css b/SwichGIT/src/css/pickr.min.css new file mode 100644 index 0000000..2e6aac6 --- /dev/null +++ b/SwichGIT/src/css/pickr.min.css @@ -0,0 +1,132 @@ + +/*! 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%} diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 383c353..9e22aff 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -9,8 +9,11 @@ + + + @@ -37,7 +40,7 @@
@@ -70,24 +73,312 @@
-

Les Paramètres :

- × -
-
-
-

Mode Forme

+

Les Paramètres

+ × +
+ +
+


+
+
+
+
+
+
+
+
+
+
+ +
+

Les couleurs

+
+ +
-

Choix Couleur

+ + + + + + +
diff --git a/SwichGIT/src/js/menu.js b/SwichGIT/src/js/menu.js new file mode 100644 index 0000000..ced97d3 --- /dev/null +++ b/SwichGIT/src/js/menu.js @@ -0,0 +1,82 @@ +var FormeSelect = []; +var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"] +//3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes +var mode = 0; + + +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; + + + }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 getVarColor(color){ + var getvar = color; + getvar = getvar.substring(6,getvar.length-1); + + return getvar; +} + +function varColorToHex(color){ + hex = getComputedStyle(document.documentElement).getPropertyValue(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