cytoffin
4 years ago
parent
0dca998b33
commit
feb65be5a8
@ -0,0 +1,32 @@
|
|||||||
|
<?php
|
||||||
|
include "save.php";
|
||||||
|
|
||||||
|
$name = $_POST['name'];
|
||||||
|
$email = $_POST['email'];
|
||||||
|
$lang = $_POST['lang'];
|
||||||
|
|
||||||
|
$foundjquery = "Not found";
|
||||||
|
if(in_array('jQuery',$lang)){
|
||||||
|
$foundjquery = "found";
|
||||||
|
}
|
||||||
|
// Converting the array to comma separated string
|
||||||
|
$lang = implode(",",$lang);
|
||||||
|
|
||||||
|
// check entry
|
||||||
|
$sql = "SELECT COUNT(*) AS cntuser from userinfo WHERE email='".$email."'";
|
||||||
|
$result = mysqli_query($con,$sql);
|
||||||
|
$row = mysqli_fetch_array($result);
|
||||||
|
$count = $row['cntuser'];
|
||||||
|
|
||||||
|
if($count > 0){
|
||||||
|
// update
|
||||||
|
$updatequery = "UPDATE userinfo SET name='".$name."',lang='".$lang."' WHERE email='".$email."'";
|
||||||
|
mysqli_query($con,$updatequery);
|
||||||
|
}else{
|
||||||
|
// insert
|
||||||
|
$insertquery = "INSERT INTO userinfo(name,email,lang) VALUES('".$name."','".$email."','".$lang."')";
|
||||||
|
mysqli_query($con,$insertquery);
|
||||||
|
}
|
||||||
|
$return_arr = array('name'=>$name,'email'=>$email,'lang'=>$lang,"foundjquery"=>$foundjquery);
|
||||||
|
|
||||||
|
echo json_encode($return_arr);
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).on('click','#save',function(e) {
|
||||||
|
var vehicle = ['a','b','d'];
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
data: {
|
||||||
|
vehicle:vehicle
|
||||||
|
},
|
||||||
|
type: "post",
|
||||||
|
url: "save.php",
|
||||||
|
success: function(data){
|
||||||
|
alert(data)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form action="" id="form-search">
|
||||||
|
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
|
||||||
|
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
|
||||||
|
<input type="checkbox" name="vehicle" value="Boat"> I have a boat<br>
|
||||||
|
</form>
|
||||||
|
<button id="save" name="save">Serialize form values</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
if(isset($_SESSION['idpartie'])){
|
||||||
|
$vehicle=$_SESSION['idpartie'];
|
||||||
|
print_r($vehicle);
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$vehicle=$_POST['vehicle'];
|
||||||
|
$_SESSION['idpartie']=$vehicle;
|
||||||
|
print_r($vehicle);
|
||||||
|
?>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
// submit button click
|
||||||
|
$("#submit").click(function(){
|
||||||
|
|
||||||
|
var name = $("#txt_name").val();
|
||||||
|
var email = $("#txt_email").val();
|
||||||
|
var lang = [];
|
||||||
|
|
||||||
|
// Initializing array with Checkbox checked values
|
||||||
|
$("input[name='prolang']:checked").each(function(){
|
||||||
|
lang.push(this.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
if(email != ''){
|
||||||
|
$.ajax({
|
||||||
|
url: 'getData.php',
|
||||||
|
type: 'post',
|
||||||
|
data: {name:name,email:email,lang:lang},
|
||||||
|
dataType: 'JSON',
|
||||||
|
success: function(response){
|
||||||
|
|
||||||
|
$('.details').show();
|
||||||
|
|
||||||
|
// selecting values from response Object
|
||||||
|
var name = response.name;
|
||||||
|
var email = response.email;
|
||||||
|
var lang = response.lang;
|
||||||
|
var foundjquery = response.foundjquery;
|
||||||
|
|
||||||
|
// setting values
|
||||||
|
$('#name').text(name);
|
||||||
|
$('#email').text(email);
|
||||||
|
$('#lang').text(lang);
|
||||||
|
$('#foundjquery').text(foundjquery);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
.container{
|
||||||
|
width: 400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
padding: 5px;
|
||||||
|
border: 2px solid gray;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
background: lightgreen;
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 5px 10px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Textbox */
|
||||||
|
input[type='text'],input[type='email']{
|
||||||
|
padding: 5px 10px;
|
||||||
|
width: 94%;
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button */
|
||||||
|
input[type='button']{
|
||||||
|
background: orange;
|
||||||
|
color: white;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
CREATE TABLE `userinfo` (
|
||||||
|
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
|
||||||
|
`name` varchar(100) NOT NULL,
|
||||||
|
`email` varchar(100) NOT NULL,
|
||||||
|
`lang` varchar(100) NOT NULL,
|
||||||
|
`timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$idparte = $_SESSION['idpartie'];
|
||||||
|
echo "<h2 id='ids'>Identifiant partie : <strong>$idparte</strong> <button onclick='myFunction()' type='button' class='btn btn-dark'>Copier Id</button></h2>";
|
||||||
|
echo "<input type='text' class='myInput' value='$idparte' id='myInput'>";
|
||||||
|
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<?php
|
||||||
|
class MyDB extends SQLite3
|
||||||
|
{
|
||||||
|
function __construct()
|
||||||
|
{
|
||||||
|
$this->open('mysqlitedb.db');
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function genererChaineAleatoire($longueur = 10)
|
||||||
|
{
|
||||||
|
$caracteres = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||||
|
$longueurMax = strlen($caracteres);
|
||||||
|
$chaineAleatoire = '';
|
||||||
|
for ($i = 0; $i < $longueur; $i++)
|
||||||
|
{
|
||||||
|
$chaineAleatoire .= $caracteres[rand(0, $longueurMax - 1)];
|
||||||
|
}
|
||||||
|
return $chaineAleatoire;
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
require_once("ConnexionBDD.php");
|
||||||
|
$db = new MyDB();
|
||||||
|
|
||||||
|
$id=$_SESSION['idpartie'];
|
||||||
|
$requete ="DELETE FROM partie where Id='".$id."'";
|
||||||
|
$suppression = $db->query($requete);
|
||||||
|
|
||||||
|
$newid=genererChaineAleatoire(10);
|
||||||
|
$_SESSION['idpartie']=$newid;
|
||||||
|
$db->query('INSERT INTO partie(Id) VALUES("'.$newid.'")');
|
||||||
|
header("refresh: 1");
|
||||||
@ -0,0 +1,480 @@
|
|||||||
|
#pageAccueil {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cloud {
|
||||||
|
z-index: 10
|
||||||
|
}
|
||||||
|
|
||||||
|
#mount1 {
|
||||||
|
z-index: 11;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mount2 {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerparam{
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
margin-left: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerparam > div {
|
||||||
|
margin-right: 4vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*SETTINGS*/
|
||||||
|
#forme{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#couleurs{
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pannel{
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pickrcontner{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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{
|
||||||
|
z-index:15;
|
||||||
|
width: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#infosec2{
|
||||||
|
z-index:15;
|
||||||
|
width: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
color: var(--lightprima);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info:hover {
|
||||||
|
color: var(--lightprima);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity {
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
-webkit-transition: box-shadow 0.2s ease;
|
||||||
|
-moz-transition: box-shadow 0.2s ease;
|
||||||
|
transition: box-shadow 0.2s ease;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #B7B7B7;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.889em;
|
||||||
|
height: 3em;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: lowercase;
|
||||||
|
width: 3em;
|
||||||
|
line-height: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
box-shadow: 0 0 0 7px var(--lightsedonca);
|
||||||
|
font-size:99%;
|
||||||
|
position:relative;
|
||||||
|
right:5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
box-shadow: 0 0 0 4px var(--lightsedonca);
|
||||||
|
content: '';
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
background-color: var(--lightsedonca);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Les règles popups*/
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
transition: opacity 500ms;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay:target {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
margin: 70px auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 30%;
|
||||||
|
position: relative;
|
||||||
|
top:25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #333;
|
||||||
|
font-family: Tahoma, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
transition: all 200ms;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup .close:hover {
|
||||||
|
color: #06D85F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup .content {
|
||||||
|
max-height: 30%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Parametres*/
|
||||||
|
|
||||||
|
.popup2 {
|
||||||
|
margin: 70px auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 45%;
|
||||||
|
height: 65%;
|
||||||
|
position: relative;
|
||||||
|
top:10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup2 h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #333;
|
||||||
|
font-family: Tahoma, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
font-family: Tahoma, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.popup2 .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
transition: all 200ms;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.popup2 .close:hover {
|
||||||
|
color: #06D85F;
|
||||||
|
}
|
||||||
|
.popup2 .content {
|
||||||
|
max-height: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titre{
|
||||||
|
display: ruby-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
text-indent: -9999px;
|
||||||
|
width: 2vw;
|
||||||
|
height: 1vw;
|
||||||
|
background: grey;
|
||||||
|
display: block;
|
||||||
|
border-radius: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
label:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0.1vw;
|
||||||
|
left: 0.1vw;
|
||||||
|
width: 0.8vw;
|
||||||
|
height: 0.8vw;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 90px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + label {
|
||||||
|
background: #bada55;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + label:after {
|
||||||
|
left: calc(100% - 0.1vw);
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
label:active:after {
|
||||||
|
width: 1.4vw;
|
||||||
|
}
|
||||||
|
/* J'ai trop avancé, mode multi*/
|
||||||
|
|
||||||
|
|
||||||
|
#containpseudo {
|
||||||
|
position: absolute;
|
||||||
|
height: 15%;
|
||||||
|
width: 30%;
|
||||||
|
z-index: 12;
|
||||||
|
left: 35%;
|
||||||
|
top: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bouttonvalider:hover {
|
||||||
|
box-shadow: 0 0 0 8px var(--lightsedonca);
|
||||||
|
font-size: 100%;
|
||||||
|
position: relative;
|
||||||
|
transition: box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bouttonvalider:hover {
|
||||||
|
box-shadow: 0 0 0 5px var(--lightsedonca);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pseudoenter {
|
||||||
|
background-color: red;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 45px;
|
||||||
|
background-color: #B130DE;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inputpseudo {
|
||||||
|
position: absolute;
|
||||||
|
width: 99%;
|
||||||
|
height: 65%;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 3vw;
|
||||||
|
background-color: transparent;
|
||||||
|
-moz-appearance: none;
|
||||||
|
text-align: center;
|
||||||
|
color: #707070;
|
||||||
|
border-color: transparent;
|
||||||
|
font-family: impact, Arial Black;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fondinput {
|
||||||
|
background-color: red;
|
||||||
|
position: absolute;
|
||||||
|
width: 97%;
|
||||||
|
background-color: var(--lightsedonca);
|
||||||
|
height: 90%;
|
||||||
|
border-radius: 40px;
|
||||||
|
left: 1.5%;
|
||||||
|
top: 5%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#buttonadd {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
right: -12%;
|
||||||
|
height: 3vw;
|
||||||
|
width: 3vw;
|
||||||
|
border-radius: 2vw;
|
||||||
|
background-color: #B130DE;
|
||||||
|
z-index: 18;
|
||||||
|
}
|
||||||
|
|
||||||
|
#textplus {
|
||||||
|
font-size: 3vw;
|
||||||
|
font-family: arial, Arial Black;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -0.15vw;
|
||||||
|
margin-left: 0.65vw;
|
||||||
|
color: var(--lightprima);
|
||||||
|
}
|
||||||
|
|
||||||
|
#containplayers {
|
||||||
|
position: absolute;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
width: 15vw;
|
||||||
|
height: 20vw;
|
||||||
|
z-index: 17;
|
||||||
|
right: 0%;
|
||||||
|
top: 8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pseudojoueur {
|
||||||
|
float: right;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 3%;
|
||||||
|
margin-right: 10%;
|
||||||
|
font-family: Lucida Console, Arial Black, Arial;
|
||||||
|
font-size: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pseudolist {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.7vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
|
||||||
|
#pageGame {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuhaut {
|
||||||
|
height: 10vh;
|
||||||
|
width: inherit;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Partie Menu du haut*/
|
||||||
|
.menu{
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.retourstp {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Redistribution{
|
||||||
|
position:relative;
|
||||||
|
top:-3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#affSolution {
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat, impact, Arial Black;
|
||||||
|
font-size: 2.5vw;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#textjouer2 {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat, impact, Arial Black;
|
||||||
|
margin-top: 0.6vw;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
width: inherit;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#btnvalider2 {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat, impact, Arial Black;
|
||||||
|
font-size: 2.5vw;
|
||||||
|
margin-top: 0.2vw;
|
||||||
|
margin-left: 0.2vw;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
}
|
||||||
|
|
||||||
|
#btnvalider3 {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat, impact, Arial Black;
|
||||||
|
font-size: 2.5vw;
|
||||||
|
margin-top: 0.2vw;
|
||||||
|
margin-left: 0.2vw;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
}
|
||||||
|
|
||||||
|
#Redistribution2 {
|
||||||
|
position: relative;
|
||||||
|
top:-3vw;
|
||||||
|
left:68%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Redistribution3 {
|
||||||
|
position: relative;
|
||||||
|
top:-3vw;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bouttonvalider2:hover {
|
||||||
|
box-shadow: 0 0 0 8px var(--lightsedonca);
|
||||||
|
font-size: 100%;
|
||||||
|
position: relative;
|
||||||
|
transition: box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressbar
|
||||||
|
{
|
||||||
|
position : relative;
|
||||||
|
width: 1100px;
|
||||||
|
padding:1px;
|
||||||
|
background-color:white;
|
||||||
|
border:1px solid black;
|
||||||
|
height:10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#indicateur
|
||||||
|
{
|
||||||
|
width: 800px;
|
||||||
|
background-color : green;
|
||||||
|
height:10px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
/*Ecran*/
|
||||||
|
@media screen and (min-width: 960px) {
|
||||||
|
/*ROND*/
|
||||||
|
.anneau {
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--colorbase);
|
||||||
|
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(--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(--v);
|
||||||
|
height: var(--v);
|
||||||
|
width: var(--v);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.rondinterieur {
|
||||||
|
background-color: var(--lighttercia);
|
||||||
|
height: var(--w);
|
||||||
|
width: var(--w);
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: var(--w);
|
||||||
|
}
|
||||||
|
.rond {
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: var(--colorbase);
|
||||||
|
height: var(--w);
|
||||||
|
width: var(--w);
|
||||||
|
border-radius: var(--w);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rondcache {
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: black;
|
||||||
|
border-radius: var(--y);
|
||||||
|
}
|
||||||
|
.rond2 {
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: white;
|
||||||
|
height: var(--w);
|
||||||
|
width: var(--w);
|
||||||
|
border-radius: var(--w);
|
||||||
|
}
|
||||||
|
.rond3 {
|
||||||
|
position: relative;
|
||||||
|
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(--w);
|
||||||
|
width: var(--w);
|
||||||
|
border-radius: var(--w);
|
||||||
|
}
|
||||||
|
.rond4 {
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: var(--colorbase);
|
||||||
|
height: var(--w);
|
||||||
|
width: var(--w);
|
||||||
|
border-radius: var(--w);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
:root{
|
||||||
|
/*couleur héhé*/
|
||||||
|
--lightprima: #DEDEDE;
|
||||||
|
--lightsedonca: #B7B7B7;
|
||||||
|
--lighttercia: #E6E6E6;
|
||||||
|
/*Couleur bases*/
|
||||||
|
--colorbase : #e75259;
|
||||||
|
--colorcarre : #30C0DE;
|
||||||
|
--colorone : #00CBFF;
|
||||||
|
--colortwo : #00FF6E;
|
||||||
|
--colorthree : #C800FF;
|
||||||
|
--colorfour : #E6DA27;
|
||||||
|
--colorfive : #2E6DB4;
|
||||||
|
--colorsix : #E6792F;
|
||||||
|
/*Les formes*/
|
||||||
|
--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;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 60;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--lightprima);
|
||||||
|
height: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
/*Desactiver la selection*/
|
||||||
|
-webkit-user-select: none; /* Chrome / Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* IE 10+ */
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#ContainBottom {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 25vw;
|
||||||
|
height: 12vw;
|
||||||
|
width: auto;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clic{
|
||||||
|
position: absolute;
|
||||||
|
left: 55vw;
|
||||||
|
top : 7vw;
|
||||||
|
height: auto;
|
||||||
|
width: 15vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#card-conteneur{
|
||||||
|
z-index: 20;
|
||||||
|
position: absolute;
|
||||||
|
left: 0vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
-webkit-flex-flow: row wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: -7vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,293 @@
|
|||||||
|
/*Ecran*/
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
|
||||||
|
:root{
|
||||||
|
--taille : 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*PARTIE FORMES*/
|
||||||
|
.containform3 {
|
||||||
|
position: relative;
|
||||||
|
height: var(--x);
|
||||||
|
width: var(--x);
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#textmode {
|
||||||
|
font-family: Lucida Console, Arial Black, Arial;
|
||||||
|
font-size: 1vw;
|
||||||
|
color: #707070;
|
||||||
|
text-align:center;
|
||||||
|
margin: 5% auto 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===========================================*/
|
||||||
|
|
||||||
|
.logoboutton{
|
||||||
|
font-size: 2vw;
|
||||||
|
color: var(--lightprima);
|
||||||
|
margin: 0.25vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Externe*/
|
||||||
|
.bouttonMenuHaut{
|
||||||
|
height: 4vw;
|
||||||
|
width: 4vw;
|
||||||
|
background-color: var(--lightsedonca);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 0.45vw;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#affPoints {
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat, impact, Arial Black;
|
||||||
|
font-size: 2vw;
|
||||||
|
margin-top: 1.2vw;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divmenu {
|
||||||
|
width: 10vw;
|
||||||
|
height: inherit;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containButtonForm{
|
||||||
|
height: 2.5vw;
|
||||||
|
width: 2.5vw;
|
||||||
|
margin: 0.75vw;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: var(--taille);
|
||||||
|
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;
|
||||||
|
margin-bottom: 1vw;
|
||||||
|
-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 {
|
||||||
|
overflow-x: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top: 1vw;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logop2 img {
|
||||||
|
width: 20vh;
|
||||||
|
padding-top: 1vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.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: 3.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.violet{
|
||||||
|
background-color: #B130DE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vert {
|
||||||
|
background-color: #00CC66;
|
||||||
|
}
|
||||||
|
|
||||||
|
#textjouer {
|
||||||
|
font-family: Montserrat, impact, Arial Black;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 2.5vw;
|
||||||
|
margin-top: 0.2vw;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
text-align:center;
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
.containform {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ajustementPetiteForme{
|
||||||
|
margin-top: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ajustementGrandeForme{
|
||||||
|
margin-top: 0.2vw;
|
||||||
|
margin-left: 0.2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%);
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/*Demi Ecran*/
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
body{
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,289 @@
|
|||||||
|
/*DemTéléphone 1i Ecran*/
|
||||||
|
@media screen and (min-width: 669px) and (max-width: 992px) {
|
||||||
|
|
||||||
|
:root{
|
||||||
|
--taille : 14vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containform3 {
|
||||||
|
position: relative;
|
||||||
|
height: calc(1.25*var(--x));
|
||||||
|
width: calc(2*var(--x));
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
left: -2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containinte{
|
||||||
|
/*PROBLEME SIZE*/
|
||||||
|
top: calc(1.5*((var(--y) - var(--z)) / 2));
|
||||||
|
left: calc(1.5*((var(--y) - var(--z)) / 2));
|
||||||
|
height: calc(1.5*var(--z));
|
||||||
|
width: calc(1.5*var(--z));
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cache{
|
||||||
|
top: calc(0.91*((var(--x) - var(--y)) / 2.8));
|
||||||
|
left: calc(4.55*((var(--x) - var(--y)) / 2.2));
|
||||||
|
height: calc(1.5*var(--y)*1.05);
|
||||||
|
width: calc(1.5*var(--y)*1.05);
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
#formSize{
|
||||||
|
margin : 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 3vw;
|
||||||
|
position: relative;
|
||||||
|
top: 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;
|
||||||
|
top: -0.25vw;
|
||||||
|
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: 2vw;
|
||||||
|
height: 2vw;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logop2 img {
|
||||||
|
width: 20vh;
|
||||||
|
padding-top: 1vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
width: inherit;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
}
|
||||||
|
|
||||||
|
#choosemode {
|
||||||
|
height: 7vw;
|
||||||
|
width: 50vw;
|
||||||
|
position: absolute;
|
||||||
|
left: 25vw;
|
||||||
|
top: 50vh;
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
#conteneurmode{
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
left : 10%;
|
||||||
|
top : 45%;
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--lightsedonca);
|
||||||
|
border-radius: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#triangleprec{
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin: 0.25vw auto 0 auto;
|
||||||
|
border-top: 2vw solid transparent;
|
||||||
|
border-right: 4vw solid grey;
|
||||||
|
border-bottom: 2vw solid transparent;
|
||||||
|
margin-top: 0.75vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#trianglesuiv{
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin: 0.25vw auto 0 auto;
|
||||||
|
border-top: 2vw solid transparent;
|
||||||
|
border-left: 4vw solid grey;
|
||||||
|
border-bottom: 2vw solid transparent;
|
||||||
|
margin-top: 0.75vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#textmode {
|
||||||
|
font-family: Lucida Console, Arial Black, Arial;
|
||||||
|
font-size: 3vw;
|
||||||
|
color: #707070;
|
||||||
|
text-align:center;
|
||||||
|
margin: 5% auto 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoboutton{
|
||||||
|
font-size: 2vw;
|
||||||
|
color: var(--lightprima);
|
||||||
|
margin: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Externe*/
|
||||||
|
.bouttonMenuHaut{
|
||||||
|
height: 4vw;
|
||||||
|
width: 4vw;
|
||||||
|
background-color: var(--lightsedonca);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 2.5vw;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.divmenu {
|
||||||
|
width: 25vw;
|
||||||
|
height: inherit;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#affPoints {
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat, impact, Arial Black;
|
||||||
|
font-size: 2vw;
|
||||||
|
margin-top: 3.5vw;
|
||||||
|
color: var(--lightsedonca);
|
||||||
|
}
|
||||||
|
|
||||||
|
.containcards {
|
||||||
|
overflow-x: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top: 5vw;
|
||||||
|
justify-content: center;
|
||||||
|
width: 70vw;
|
||||||
|
margin: 0 auto;
|
||||||
|
grid-row-gap: 2vw;
|
||||||
|
column-gap: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-item {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: var(--lightsedonca);
|
||||||
|
width: var(--taille);
|
||||||
|
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;
|
||||||
|
margin-bottom: 1vw;
|
||||||
|
-webkit-flex-flow: row wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-form {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4vw;
|
||||||
|
padding-left: 0.1vw;
|
||||||
|
margin-top: 0.25vw;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: var(--lighttercia);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$cartes=$_POST['cartestables'];
|
||||||
|
$_SESSION['cartestables']=$cartes;
|
||||||
|
print_r($cartes);
|
||||||
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 24 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,61 @@
|
|||||||
|
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 disableCache(formName){
|
||||||
|
cacheName = "cache"+formName;
|
||||||
|
document.getElementById(cacheName).style.display = "none";
|
||||||
|
FormeSelect.push(form);
|
||||||
|
|
||||||
|
//document.getElementById("SettingName").innerHTML = FormeSelect.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){
|
||||||
|
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 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");
|
||||||
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,10 @@
|
|||||||
|
<?php
|
||||||
|
if (isset($_POST['tabc'])) {
|
||||||
|
$myTable = $_POST['tab'];
|
||||||
|
echo($myTable);
|
||||||
|
echo("s");
|
||||||
|
print_r($_POST);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
echo 'd';
|
||||||
|
}
|
||||||
Loading…
Reference in new issue