<?php
session_start()
?>

<!DOCTYPE html>
<html>
    <head>
    	 <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Inscription</title>

     <?php include("Favicon.php"); ?> <!-- Mon favicon !-->

    </head>

    <body>

<?php /*  DEBUT DU BOUTON ACCEUIL */ ?>

<?php include("Bouton_Acceuil_Header.php"); ?>

<?php /*  FIN DU BOUTON ACCEUIL */ ?>



<?php /* DEBUT DE LA PAGE D INSCRIPTION */ ?>


<div align="center">

<form method="POST" action="">



<br><input type="text" name="Pseudo" id="PI_pseudo" placeholder="Pseudo" maxlength-"15" /><br><br>  <?php /* CASE PSEUDO */ ?>




<br><input type="email" name="Email" placeholder="Email" id="PI_email" /><br><br>   <?php /* CASE EMAIL */ ?>




<br><input type="password" name="Password" id="PI_password" placeholder="Mot de passe"maxlength="20" /><br><br> <?php /* CASE MOT DE PASSE */ ?>




<br><input type="password" name="RepeatPassword" id="PI_repeatpassword" placeholder="Répétez le mot de passe" maxlength="20" /><br><br> <?php /* CASE REPETEZ LE MOT DE PASSE */ ?>





<p><font face="arial black"><font size="4">Date de naissance</font></font></p>



<h4>Jour / Mois / Année<h4>


<select name="jour"  id="PI_jour">

        <?php for ($jour = 1 ; $jour <= 31 ; $jour++)
{
?>
                  <option value="<?php echo $jour ?>"><?php echo $jour; ?></option>
<?php
}
?>
</select>

<select name="mois"  id="PI_mois">
        <?php for ($mois = 1 ; $mois <= 12 ; $mois++)
{
?>
                  <option value="<?php echo $mois ?>"><?php echo $mois; ?></option>      <?php /*  DATE DE NAISSANCE */ ?>
<?php
}
?>
</select>

<select name="annee"  id="PI_annee">
        <?php for ($annee = 1955 ; $annee <= 1997; $annee++)

{
?>
                  <option value="<?php echo $annee ?>"><?php echo $annee; ?></option>

<?php
}
?>
</select>

<br><label><input type="checkbox" name="Checkbox" id="PI_Checkbox" />J'accepte les <label><a href="Conditions.php">conditions d'utilisation</a>



<p><label for="PI_go"><u><font face="impact"></font></u></label> <?php /* BOUTON VALIDATION DE L INSCRIPTION */ ?>
<input type="submit" name="submit" value="Go !" id="PI_go"></p><br>



<p><u><font face="impact"><a href="Connexion.php"><font color="red">  <?php /* URL VERS PAGE DE CONNEXION */ ?>
<font size="4">J'ai déjà un compte !</a></font></font></font></u></p>



 </form>

</div>


<?php /* DEBUT MESSAGES D'ERREUR DU FORMULAIRE */  ?>

<?php



if(isset($_POST['submit'])){//si le bouton submit est cliqué






   if(empty($_POST['submit']) OR empty($_POST['Pseudo']) OR empty($_POST['Email']) OR empty($_POST['Password']) OR empty($_POST['RepeatPassword']))



   {

  $Message1 = "<div class='M1'>veuillez s'il vous plaît saisir tous les champs</div>";


      echo " " . $Message1 . " ";



   }



   else



   {

      $Pseudo = htmlentities(trim($_POST['Pseudo']),ENT_QUOTES);

      $Email = htmlentities(trim($_POST['Email']),ENT_QUOTES);

      $Password = htmlentities(trim($_POST['Password']),ENT_QUOTES);

      $RepeatPassword = htmlentities(trim($_POST['RepeatPassword']),ENT_QUOTES);

      $Checkbox = isset($_POST['Checkbox']);

      //si tu veux mettre 1 ou 0 pour le résultat du checkbox, une simple vérification binaire fera l'affaire:

      //$Checkbox = isset($_POST['Checkbox'])?1:0;



     if (!empty($_POST['Checkbox']))



    {



    }



   else


   {

    $Message2 = "<div class='M2'>Vous devez cocher les \" Conditions d'utilisations \" pour poursuivre votre inscription !</div> ";

      echo " " . $Message2 . " ";

   }



      if(strlen($Pseudo)<4 OR strlen($Pseudo)>20)



      { //si le pseudo est plus petit que 4 caractères ou plus grand que 10 caractères, on affiche un msg d'erreur (rien ne t'empêche de mettre plus de 10 caractères possible)

         $Message3 = "<div class='M3'>Votre Pseudo doit contenir minimum 4 caractères et maximum 20 caractères</div>";

         echo " " . $Message3 . " ";

      }


      else


       {

         if(strlen($Password)<5)

         {

            $Message4 = "<div class='M4'>Votre Mot de passse doit contenir minimum 5 caractères</div>";

            echo " " . $Message4 . " ";

         }



         else



          {

            if($Password != $RepeatPassword)

            {

               $Message5 = "<div class='M5'>Les mots de passes de correspondent pas !</div>";

               echo " " . $Message5 . " ";

            }



            else

            {

               $Password = sha1($Password);

               //etc...

            }

         }

      }

   }

}


?>


<?php /* FIN MESSAGES D'ERREUR DU FORMULAIRE */  ?>



<?php /* FIN DE LA PAGE D INSCRIPTION */ ?>



   <?php
/* DEBUT DE LA BASE DE DONNES */
?>


<?php
/* FIN DE LA BASE DE DONNES */
?>

  </body>

  <footer>

<!-- DEBUT COPYRIGHT PIED DE PAGE !-->

<div id="PI_pied_de_page">

<h5>  &copy; Copyright Site SoiréeChat 2015 </h5>

</div>

<!-- FIN COPYRIGHT PIED DE PAGE !-->

  </footer>


</html>




















/* DEBUT DU MENU ET MENU DEROULANT PAGE D ACCEUIL */

#Menu
{
  text-align: center;  /* Centrer le menu au millieu de la page */
}

#Menu li
{
  list-style-type: none;  /* Enlever les listes a puces */
  display: inline-block;  /* Alignez le menu a l'horizontale */
  width: 200px;   /* Espacé le menu */
}

#Menu a
{
  text-decoration:none;  /* Enlevez le soulignement */
    border-top-left-radius: 45px;  /* Pour arrondir les bordures du menu */
  border-bottom-right-radius: 45px;  /* Pour arrondir les bordures du menu */
  background-color: gray;  /* La couleur de fond du menu */
   color: white;  /* La couleur de l'écriture du menu */
   display: block; /* Pour que le background color se mette bien en place */
    width: 140px;  /* Aggrandir ou réduir le background color ( couleur de fond ) */
}

#Menu a:hover
{
   background-color: #FF8C00; /* Couleur du menu au survol */
}


#Menu ul li ul
 {
 display:none;      /* Pour cacher les sous menu de Membres */
 }

#Menu ul li:hover ul
{
 display:block;     /* Pour que le sous menu s'affiche quand on passe la souris dessu */
 }



#Menu li:hover ul li
{
   display:inherit; /* pour que le sous menu s'affiche bien un en desou de l'autre */
}

#Menu, #Menu ul
{
   padding:0;  /* pour que le sous menu sois bien centré */
   margin:0;   /* pour que le sous menu sois bien centré */
}



 #Menu li ul
 {
 position:absolute;   /* Pour éviter que l'onglet Membres saute quand le sous menu se déroule */
 }



/* FIN DU MENU ET MENU DEROULANT PAGE D ACCEUIL */



/* DEBUT DU LOGO ( SOIREE CHAT ) ACCEUIL */

.logo
{
 height: 150px; /* La grandeur du logo + vers le haut ou + vers le bas en grandeur */
 width: 390px; /* La Largeur du logo */
 position: relative; /* La position */
 left: 100px;  /* Deplacer le logo + ou - vers la gauche */
 margin-top: 100px; /* Deplacer le logo + ou - vers le haut */
 border: 3px blue solid; /* La bordure bleu autour du logo */
border-radius: 40px; /* Les arrondis de la bordure bleu */
box-shadow: 8px 8px 6px 6px gray; /* L'effet 3d avec l'ombre en grise */
}

/* FIN DU LOGO ( SOIREE CHAT ) ACCEUIL




/* DEBUT DU BOUTON ACCEUIL */

/*pour le bouton acceuil au dessu du formulaire de connexion et d'inscription ( DEBUT ) */

#Bt_Acceuil_PI_PC ul
{
   list-style-type: none; /* Pour supprimer la liste a puces */
    text-align: center;  /* Pour que le bouton accueil sois centrer */
    margin: 0px; /* Pour que le bouton sois + ou - vers le haut */
    padding: 10px; /* le bouton et tous la page se déplace + ou - vers le bas */
}

#Bt_Acceuil_PI_PC li
{
	display: inline-block; /* Le bouton reste bien au centre */
}

#Bt_Acceuil_PI_PC ul li a
{
  display: block; /* Pour que le bouton sois en 1 seul block */
  width: 125px; /* Pour la largeur du bouton */
  border-top-left-radius: 45px; /* pour l'arrondis du boutton coté gauche */
  border-bottom-right-radius: 45px; /* pour l'arrondis du boutton coté droit */
  text-decoration: none;  /* Aucune deco sur le bouton ni l'écriture */
  background-color: gray; /* La couleur du bouton */
  color: white;  /* La couleur de l'écriture sur le bouton */
}

#Bt_Acceuil_PI_PC a:hover
{
  color: #000000;  /* Quand la souris passe sur le bouton la couleur de l'écriture du bouton change de couleur (noir) */
  background-color: #FF8C00; /* Quand la souris passe dessu la couleur du bouton change de couleur */
}

  /* pour le bouton acceuil au dessu du formulaire de connexion et d'inscription ( FIN ) */

/* FIN DU BOUTON ACCEUIL */




/* FORMULAIRE DE CONNEXION ( DEBUT ) */

#PC_pseudo
{
 text-align: center; /* Pour centrer quand on écrit */
 border-top-left-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté gauche */
 border-top-right-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté droit */
 border-bottom-left-radius: 40px;  /* pour l'arrondis de la saisie de texte en bas coté gauche */
 border-bottom-right-radius: 40px;  /* pour l'arrondis de la saisie de texte en bas coté droit */
 border: 3px #b1762a solid; /* Pour la bordure de la saisie de texte */
 box-shadow: 5px 5px 3px 3px gray; /* L'effet 3d avec l'ombre en grise */
}

#PC_password
  {
 text-align: center; /* Pour centrer quand on écrit */
 color: red; /* La couleur de l'écriture */
 border-top-left-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté gauche */
 border-top-right-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté droit */
 border-bottom-left-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté gauche */
 border-bottom-right-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté droit */
 border: 3px #b1762a solid; /* Pour la bordure de la saisie de texte */
 box-shadow: 5px 5px 3px 3px gray; /* L'effet 3d avec l'ombre en grise */
  }


#PC_Login
 {
 border-top-left-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté gauche */
 border-top-right-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté droit */
 border-bottom-left-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté gauche */
 border-bottom-right-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté droit */
 color: black; /* La Couleur de l'écriture du bouton */
 background-color: white; /* La couleur de fond du bouton */
 border: 3px #b1762a solid; /* La bordure du bouton */
 box-shadow: 5px 5px 3px 3px gray; /* L'effet 3d avec l'ombre en grise */
}

/* FORMULAIRE DE CONNEXION ( FIN ) */



/* FORMULAIRE D INSCRPTION ( DEBUT ) */

#PI_pseudo,  #PI_email
{
 margin-top: 7px; /* Mettre la saisie de texte + ou - vers le haut */
 text-align: center; /* Pour centrer quand on écrit */
 border-top-left-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté gauche */
 border-top-right-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté droit */
 border-bottom-left-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté gauche */
 border-bottom-right-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté droit */
 border: 3px #b1762a solid; /* Pour la bordure de la saisie de texte */
 box-shadow: 5px 5px 3px 3px gray;  /* L'effet 3d avec l'ombre en grise */
  }

#PI_password,   #PI_repeatpassword
  {
 margin-top: 7px; /* Mettre la saisie de texte + ou - vers le haut */
 text-align: center; /* Pour centrer quand on écrit */
 color: red; /* La couleur de l'écriture */
 border-top-left-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté gauche */
 border-top-right-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté droit */
 border-bottom-left-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté gauche */
 border-bottom-right-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté droit */
 border: 3px #b1762a solid; /* Pour la bordure de la saisie de texte */
 box-shadow: 5px 5px 3px 3px gray; /* L'effet 3d avec l'ombre en grise */
  }

#PI_jour, #PI_mois, #PI_annee
{
 border-top-left-radius: 40px;  /* pour l'arrondis de la saisie de texte en haut coté gauche */
 border-top-right-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté droit */
 border-bottom-left-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté gauche */
 border-bottom-right-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté droit */
 border: 3px #b1762a solid;  /* Pour la bordure de la saisie de texte */
 box-shadow: 5px 5px 3px 3px gray; /* L'effet 3d avec l'ombre en grise */
}

#PI_Checkbox
{
  margin-top: 120px; /* Mettre le lien + ou - vers le haut */
}

#PI_go
  {
 margin-top: 50px; /* Mettre le boutton + ou - vers le haut */
 border-top-left-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté gauche */
 border-top-right-radius: 40px; /* pour l'arrondis de la saisie de texte en haut coté droit */
 border-bottom-left-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté gauche */
 border-bottom-right-radius: 40px; /* pour l'arrondis de la saisie de texte en bas coté droit */
 color: black; /* La Couleur de l'écriture du bouton */
 background-color: white; /* La couleur de fond du bouton */
 border: 3px #b1762a solid; /* La bordure du bouton */
 box-shadow: 5px 5px 3px 3px gray; /* L'effet 3d avec l'ombre en grise */
 }


/* Debut Messages formulaire */


.M1 /* M1 = "veuillez s'il vous plaît saisir tous les champs" */
{
  color: black; /* La couleur de l'écriture */
  border: 1px solid red; /* La bordure */
  width: 300px; /* Mettre la bordure + ou - longue ( en largeur ) */
  text-align: center; /* Centrer le texte du message */
  margin-top: -600px;
  margin-left: 80px;
}

.M2 /* M2 = "Vous devez cocher les \" Conditions d'utilisations \" pour poursuivre votre inscription !" */
{
  color: black; /* La couleur de l'écriture */
  border: 1px solid red; /* La bordure */
  width: 580px; /* Mettre la bordure + ou - longue ( en largeur ) */
  text-align: center; /* Centrer le texte du message */
  margin-top: -580px;
  margin-left: 10px;
}

.M3 /* M3 = "Votre Pseudo doit contenir minimum 4 caractères et maximum 20 caractères" */
{
  color: black; /* La couleur de l'écriture */
  border: 1px solid red; /* La bordure */
  width: 500px; /* Mettre la bordure + ou - longue ( en largeur ) */
  text-align: center; /* Centrer le texte du message */
  margin-top: -560px;
  margin-left: 20px;
}

.M4 /* M4 = "Votre Mot de passse doit contenir minimum 5 caractères" */
{
  color: black; /* La couleur de l'écriture */
  border: 1px solid red; /* La bordure */
  width: 380px; /* Mettre la bordure + ou - longue ( en largeur ) */
  text-align: center; /* Centrer le texte du message */
  margin-top: -540px;
  margin-left: 60px;
}

.M5 /* M5 = "Les mots de passes de correspondent pas !" */
{
  color: black; /* La couleur de l'écriture */
  border: 1px solid red; /* La bordure */
  width: 288px; /* Mettre la bordure + ou - longue ( en largeur ) */
  text-align: center; /* Centrer le texte du message */
  margin-top: -520px;
  margin-left: 90px;
}



/* Fin Messages formulaire */


/* Debut copyright */


#PI_pied_de_page
{
  text-align: center;  /* Pour centrer l'écriture */
  color: white;  /* Pour que l'écriture sois écrite en blanche */
  border: 1px solid black; /* La bordure */
  background-color: black;  /* Pour que la couleur de fond sois en noir */
  margin-top: 300px; /* Pour deplacer le copyright + ou - vers le bas */
  border-bottom-right-radius: 20px; /* Mettre le bord en bas a droite arrondis */
  border-bottom-left-radius: 20px; /* Mettre le bord en bas a gauche arrondis */
  box-shadow: -3px -4px 6px 4px silver; /* L'effet 3d avec l'ombre en grise */
}


/* Fin copyright */



/* FORMULAIRE D INSCRIPTION ( FIN ) */



/* DEBUT FORMULAIRE DE CONTACT */

#PageContact_pseudo, #PageContact_email,
#PageContact_biographie
{
  text-align: center; /* Pour centrer quand on écrit */
  margin-top: 10px; /* Mettre la saisie de texte + ou - vers le haut */
}

#PageContact_pseudo, #PageContact_email, #PageContact_biographie
{
  border-radius: 20px;  /* L'arrondis des bords */
  border-color: black;  /* La couleur des bords */
  background-color: white;  /* La couleur de fond */
  color: black;  /* La couleur de l'écriture */
}

#PageContact_biographie
{
 font-size: 17px; /* La taille de l'écriture quand on écrit */
 font-family: arial; /* La police d'écriture quand on écrit */
 resize: none; /* Pour qu'on ne puisse pas aggrandir la taille de la fenêtre biographie */
 max-width: 350px;  /* Pour la taille maximum  de la fenêtre biographie en largeur */
 min-width: 350px; /* Pour la taille minnimum  de la fenêtre biographie en largeur */
 max-height: 150px; /* Pour la taille maximum  de la fenêtre biographie en hauteur */
 min-height: 150px; /* Pour la taille minnimum  de la fenêtre biographie en hauteur */
}


#PageContact_Envoyez
{
  border-radius: 2px;  /* L'arrondis des bords */
  border-color: black;   /* La couleur des bords */
  color: black;  /* La couleur de l'écriture */
  background-color: white;  /* La couleur de fond */
}

/* FIN FORMULAIRE DE CONTACT */




/* DEBUT DU SIDEBAR (Les plus populaires) */

#sidebar
{
  color: black; /* La couleur du titre */
  background-color: white; /* La couleur de fond */
  float: right; /* Pour que le sidebar sois a droite */
  width: 400px; /* Pour aggrandir le sidebar en largeur */
  height: 710px; /* pour aggrandir le sidebar en hauteur */
  margin-top: 35px; /* Pour mettre le sidebar + ou - haut */
  border-bottom-left-radius: 35px; /* pour l'arrondis en bas à gauche */
  border-top-left-radius: 35px; /* pour l'arrondis en haut à gauche */
  box-shadow: -16px 8px  20px 5px blue; /* L'effet 3d avec l'ombre en bleu */
  border: 3px black solid; /* La bordure noir */
}



/* FIN DU SIDEBAR (Les plus populaires) */