Merge branch 'master' of https://gitlab.iut-clermont.uca.fr/palafour/swish
algolfier
4 years ago
commit
f1db8c5a6d
@ -0,0 +1,216 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--ROND-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb rond"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn rond"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--CARRE-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb carre"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn carre"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!--TRIANGLE-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cb formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cn formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cb formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class="castriangle cn formeinté triangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--LOSANGE-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb losange"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn losange"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!--CROIX-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb croix"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn croix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--PENTA-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb penta"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn penta"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!--HEXA-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hexa"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hexa"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--HOCTO-->
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hocto"></div>
|
||||||
|
</div>
|
||||||
|
<div class="containexte">
|
||||||
|
<div class="formeexté cn hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform2">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cb hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containform">
|
||||||
|
<div class="containinte">
|
||||||
|
<div class=" formeinté cn hocto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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%);
|
||||||
|
}
|
||||||
|
|
||||||
@ -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/
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<component name="ProjectCodeStyleConfiguration">
|
||||||
|
<state>
|
||||||
|
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||||
|
</state>
|
||||||
|
</component>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="PublishConfigData" remoteFilesAllowedToDisappearOnAutoupload="false">
|
||||||
|
<serverData>
|
||||||
|
<paths name="tesss">
|
||||||
|
<serverdata>
|
||||||
|
<mappings>
|
||||||
|
<mapping local="$PROJECT_DIR$" web="/" />
|
||||||
|
</mappings>
|
||||||
|
</serverdata>
|
||||||
|
</paths>
|
||||||
|
</serverData>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/.idea.iml" filepath="$PROJECT_DIR$/.idea/.idea.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="ae59b29d-13a3-45c3-be87-25ccfe24d3dc" name="Default Changelist" comment="" />
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="ComposerSettings">
|
||||||
|
<execution />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectId" id="1kNXQ6WhH5yNDV71QGdJCrueOoa" />
|
||||||
|
<component name="ProjectViewState">
|
||||||
|
<option name="hideEmptyMiddlePackages" value="true" />
|
||||||
|
<option name="showLibraryContents" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PropertiesComponent">
|
||||||
|
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
|
||||||
|
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||||
|
<property name="last_opened_file_path" value="$PROJECT_DIR$/.." />
|
||||||
|
<property name="vue.rearranger.settings.migration" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="Default task">
|
||||||
|
<changelist id="ae59b29d-13a3-45c3-be87-25ccfe24d3dc" name="Default Changelist" comment="" />
|
||||||
|
<created>1605542003265</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1605542003265</updated>
|
||||||
|
<workItem from="1605542004302" duration="19000" />
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
|
<option name="version" value="3" />
|
||||||
|
</component>
|
||||||
|
<component name="WindowStateProjectService">
|
||||||
|
<state x="260" y="278" key="FileChooserDialogImpl" timestamp="1605542021871">
|
||||||
|
<screen x="0" y="0" width="1920" height="1040" />
|
||||||
|
</state>
|
||||||
|
<state x="260" y="278" key="FileChooserDialogImpl/0.0.1920.1040@0.0.1920.1040" timestamp="1605542021871" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
bddt.php
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<component name="ProjectCodeStyleConfiguration">
|
||||||
|
<state>
|
||||||
|
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||||
|
</state>
|
||||||
|
</component>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="PublishConfigData" serverName="coucou">
|
||||||
|
<serverData>
|
||||||
|
<paths name="coucou">
|
||||||
|
<serverdata>
|
||||||
|
<mappings>
|
||||||
|
<mapping local="$PROJECT_DIR$" web="Test/TP2" />
|
||||||
|
</mappings>
|
||||||
|
</serverdata>
|
||||||
|
</paths>
|
||||||
|
<paths name="ouaouai">
|
||||||
|
<serverdata>
|
||||||
|
<mappings>
|
||||||
|
<mapping local="$PROJECT_DIR$" web="/" />
|
||||||
|
</mappings>
|
||||||
|
</serverdata>
|
||||||
|
</paths>
|
||||||
|
</serverData>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/TP2.iml" filepath="$PROJECT_DIR$/.idea/TP2.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="PhpProjectSharedConfiguration" php_language_level="7">
|
||||||
|
<option name="suggestChangeDefaultLanguageLevel" value="false" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
<?php
|
||||||
|
require("MyDB.php");
|
||||||
|
|
||||||
|
$db = new MyDB();
|
||||||
|
|
||||||
|
$chaine = genererChaineAleatoire(10);
|
||||||
|
|
||||||
|
|
||||||
|
if(isset($_POST['id'])){
|
||||||
|
$id=$_POST['id'];
|
||||||
|
}
|
||||||
|
$id=genererChaineAleatoire(10);
|
||||||
|
|
||||||
|
|
||||||
|
function section()
|
||||||
|
{
|
||||||
|
echo 'coucou';
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<form method="post">
|
||||||
|
<button type="submit" name="idd" value='<?php echo $id; ?>'><a href='DB.php?idd=<?php echo $id; $db->query('INSERT INTO partie(Id) VALUES("'.$id.'")');?>'>Créer une partie</a></button>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<form method="post">
|
||||||
|
<input type="text" required="required" placeholder="Mettre ID partie" maxlength="11">
|
||||||
|
<button type="submit" name="idd" value=""><a href="DB.php?idd=">Rejoindre</a></button>
|
||||||
|
</form>
|
||||||
|
<form method="post">
|
||||||
|
<button><a href="<?php echo "ss";?> ">FSS</a>FSS</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<?php
|
||||||
|
header('Location: MyxDB.php');
|
||||||
|
exit();
|
||||||
|
?>
|
||||||
Binary file not shown.
@ -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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||||
|
.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||||
|
.pickr2 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||||
|
.pickr3 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||||
|
.pickr4 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||||
|
.pickr5 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,50%}
|
||||||
@ -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 = "";
|
||||||
|
}
|
||||||
Loading…
Reference in new issue