<!DOCTYPE html>
<html lang="en" class="no-js">
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF8_unicode_ci" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Messages anonymes</title>
          <meta name="description" content="Blueprint: Blueprint: Google Grid Gallery" />
          <meta name="keywords" content="google getting started gallery, image gallery, image grid, template, masonry" />
          <meta name="author" content="Codrops" />
          <link rel="shortcut icon" href="../favicon.ico">
          <link rel="  stylesheet" type="text/css" href="css/demof.css" title="style1"/>
          <link rel=" stylesheet" type="text/css" href="css/componentf.css" title="style2"/>
          <link rel=" stylesheet" type="text/css" href="css/demoau.css" title="style3"/>
          <link rel="stylesheet" type="text/css" href="css/componentau.css" title="style4"/>
          <link rel=" stylesheet" type="text/css" href="css/demoa.css" title="style5"/>
          <link rel=" stylesheet" type="text/css" href="css/componenta.css" title="style6"/>
          <link rel="stylesheet" type="text/css" href="css/demo.css" />
          <link rel="stylesheet" type="text/css" href="css/component.css" />
          <script src="js/modernizr.custom.js"></script>
     </head>
     <body>

 <?php

// Check connection
if($bdd = mysqli_connect('localhost', 'root', '', 'messagesanonymes'))
{
     // Si la connexion a réussi, rien ne se passe.
}
else // Mais si elle rate…
{
     echo 'Erreur'; // On affiche un message d'erreur.
}

mysql_query ('SET NAMES UTF8_unicode_ci');
?>

     <a href="../index.php" ><img src="../images/bana.jpg" style="
    margin-left: 12px;" /></a>
          <div class="container">

               <div id="grid-gallery" class="grid-gallery">
                    <section class="grid-wrap">
                         <ul class="grid" style="position: relative; height: 2596.51px; bottom: 382px;right: 5px;" >
                              <li class="grid-sizer"></li><!-- for Masonry column width -->
                              <li>
                                   <figure>
                                        <img src="img/thumb/am.png" alt="img01" style="
    height: 150px;
    width: 150px;
    padding-left: 0px;
    margin-left: 45px;
">
                                        <figcaption><h3>Racontez votre histoire</h3><p>Vous pouvez ajouter un nouveau message anonyme par jour a tout moment. Votre message sera traité et posté. </p></figcaption>
                                   </figure>
                              </li>







<?php
     $TotalMs;
     // Le nombre de messages dans la table anonyme
     $NbMessage = mysqli_query($bdd,"SELECT COUNT( * ) as NBM FROM anonyme WHERE valider=1");

     while($data = mysqli_fetch_assoc($NbMessage))
     {
          // echo $data["NBM"];

          // Je met le nb de message dans TotalMs
          $TotalMs = $data["NBM"];
     }


     

     for($i=$TotalMs; $i>0;  $i--){

          //Requete pour récuperer toutes les infos dont j'ai besoin
          $requete1= mysqli_query($bdd,"SELECT nom,age, sexe, Images,anonymepetitedesc, Date FROM anonyme WHERE id=$i AND valider=1");
          while($donnees1 = mysqli_fetch_assoc($requete1))
          {

          ?>
          <!-- Tes classes css varient dans la version d'origine  pour le faire ici tu peux le fiare avec les pseudo classes
               css ou alors en javascript/jQuery(C'est mieux en css !)
       -->
               <li class="ami">
                    <div class="gridami">
                         <figure>
                              <?php echo $donnees1['Images'];?>
                              <figcaption>
                                   <h3><?php echo $donnees1['nom'];+' '+$donnees1['sexe'];?></h3>
                                   <p><?php echo $donnees1['anonymepetitedesc'];?>...</p>
                              </figcaption>
                         </figure>

                    </div>
               </li>


<?php
     }
     mysqli_free_result($requete1);
     }

?>







<!-- Version d'origine -->
                         
                              <!-- <li>
                                   <figure>
                                        <img src="img/thumb/6.png" alt="img06"/>
                                        <figcaption><h3>Exercitation occaecat</h3><p>Street chillwave hoodie ea gentrify.</p></figcaption>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <img src="img/thumb/1.jpg" alt="img01"/>
                                        <figcaption><h3>Selfies viral four</h3><p>Raw denim duis Tonx Shoreditch labore swag artisan High Life cred, stumptown Schlitz quinoa flexitarian mollit fanny pack.</p></figcaption>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <img src="img/thumb/2.jpg" alt="img02"/>
                                        <figcaption><h3>Photo booth skateboard</h3><p>Vinyl squid ex High Life. Paleo Neutra nulla master cleanse, Helvetica et enim nesciunt esse.</p></figcaption>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <img src="img/thumb/3.png" alt="img03"/>
                                        <figcaption><h3>Ex fashion axe</h3><p>Qui nesciunt et, in chia cliche irure. Eu YOLO nihil mollit twee locavore, tempor keytar asymmetrical irure aute sriracha consequat.</p></figcaption>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <img src="img/thumb/4.png" alt="img04"/>
                                        <figcaption><h3>Thundercats next level</h3><p>Portland nulla butcher ea XOXO, consequat Bushwick Pinterest elit twee pickled direct trade vero. </p></figcaption>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <img src="img/thumb/5.png" alt="img05"/>
                                        <figcaption><h3>Bushwick selvage synth</h3><p>Bicycle rights flannel Shoreditch, art party laboris Bushwick sriracha authentic chambray hella umami sed distillery master cleanse.</p></figcaption>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <img src="img/thumb/1.jpg" alt="img01"/>
                                        <figcaption><h3>Bottle wayfarers locavore</h3><p>Once there was a little asparagus, he was green and lonely.</p></figcaption>
                                   </figure>
                              </li> -->
                         </ul>
                    </section><!-- // grid-wrap -->
                    <section class="slideshow">
                         <ul>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3><b>Racontez votre histoire</b></h3>
                                             <p>« Chaque jour a son grand chagrin ou son petit souci. » <br><br> Victor Hugo</p>
                                        </figcaption>
                                        <a href="../redaction.php"><img src="img/large/am.png" /></a>
                                   </figure>
                              </li>

                               <?php
     $TotalMs;
     // Le nombre de messages dans la table anonyme
     $NbMessage = mysqli_query($bdd,"SELECT COUNT( * ) as NBM FROM anonyme");

     while($data = mysqli_fetch_assoc($NbMessage))
     {
          // echo $data["NBM"];

          // Je met le nb de message dans TotalMs
          $TotalMs = $data["NBM"];
     }


     

     for($i=$TotalMs; $i>0;  $i--){

          //Requete pour récuperer toutes les infos dont j'ai besoin
          $requete1= mysqli_query($bdd,"SELECT nom,Images,anonymegrandedesc,sexe, Date FROM anonyme WHERE id=$i");
          while($donnees1 = mysqli_fetch_assoc($requete1))
          {

          ?>
          <!-- Tes classes css varient dans la version d'origine  pour le faire ici tu peux le fiare avec les pseudo classes
               css ou alors en javascript/jQuery(C'est mieux en css !)
       -->
               <li class="ami">
                    <div class="gridami">
                         <div class=".slideshowami figure">
                         <figure>
                              
                              <figcaption>
                                   <h3><b><?php echo $donnees1['nom'];+' '+$donnees1['sexe'];?></b></h3>
                                   <p><?php echo $donnees1['anonymegrandedesc'];?>...</p>
                                   <br><br><FONT color="black"> Cliquez sur l'image pour lire la suite.</FONT> </p>
                              </figcaption>

                              <a href="../commentaireamitier/commentaireamitier3.php"> 
                              <?php echo $donnees1['Images'];?>
                         </a>
                         </figure>
                         <?php echo $donnees1['Date'];?>
                    </div>
               </li>


<?php
     }
     mysqli_free_result($requete1);
     }

?>

                              <li class="ami">
                                   <div class="gridami">
                                   <div class=".slideshowami figure">
                                   <figure>
                                        <figcaption>
                                             <h3><b><?php

                                             $requete = mysqli_query($bdd,"SELECT nom FROM anonyme WHERE id=17");
                    while($donnees = mysqli_fetch_assoc($requete))
                    {
                         echo $donnees['nom'];
                    }
                    mysqli_free_result($requete);
                    ?>  /  <?php

                                             $requete = mysqli_query($bdd,"SELECT sexe FROM anonyme WHERE id=17");
                    while($donnees = mysqli_fetch_assoc($requete))
                    {
                         echo $donnees['sexe'];
                    }
                    mysqli_free_result($requete);
                    ?></b></h3>
                                             <p><?php

                                             $requete = mysqli_query($bdd,"SELECT anonymegrandedesc FROM anonyme WHERE id=17");
                    while($donnees = mysqli_fetch_assoc($requete))
                    {
                         echo $donnees['anonymegrandedesc'];
                    }
                    mysqli_free_result($requete);
                    ?>...  <br><br><FONT color="black"> Cliquez sur l'image pour lire la suite.</FONT> </p>
                                        </figcaption>
                                        <a href="../commentaireamitier/commentaireamitier3.php"><?php

                                             $requete = mysqli_query($bdd,"SELECT Images FROM anonyme WHERE id=17");
                    while($donnees = mysqli_fetch_assoc($requete))
                    {
                         echo $donnees['Images'];
                    }
                    mysqli_free_result($requete);
                    ?></a>
                                   </figure><p style="
    margin-bottom: 0px;
    margin-top: 0px;
"><b><FONT color="white"> <?php

                                             $requete = mysqli_query($bdd,"SELECT Date FROM anonyme WHERE id=17");
                    while($donnees = mysqli_fetch_assoc($requete))
                    {
                         echo $donnees['Date'];
                    }
                    mysqli_free_result($requete);
                    ?></font></b></p>
                                   </div>
                              </li>



                              
                              <!-- <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Vice velit chia</h3>
                                             <p>Tattooed assumenda chambray cray officia. 90's mollit ethnic church-key ex eu pop-up gentrify. Tonx raw denim eu, bitters nesciunt distillery Neutra pop-up. Drinking vinegar Helvetica Truffaut tattooed.</p>
                                        </figcaption>
                                        <img src="img/large/2.jpg" alt="img02"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Brunch semiotics</h3>
                                             <p>Gentrify High Life adipisicing, duis slow-carb kogi Tumblr raw denim freegan Echo Park. Fingerstache laboris pork belly messenger bag, you probably haven't heard of them vegan twee Intelligentsia Vice Etsy pickled put a bird on it Godard roof party. Meggings small batch dreamcatcher velit.</p>
                                        </figcaption>
                                        <img src="img/large/3.png" alt="img03"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Chillwave nihil occupy</h3>
                                             <p>Marfa exercitation non, beard +1 hashtag cardigan gluten-free mixtape church-key ugh eu Portland leggings. Ennui farm-to-table fingerstache keytar Echo Park tattooed. Seitan qui artisan, aliquip cupidatat sunt Portland wayfarers duis.</p>
                                        </figcaption>
                                        <img src="img/large/4.png" alt="img04"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Kale chips lomo biodiesel</h3>
                                             <p>Lomo church-key whatever, seitan laborum drinking vinegar lo-fi semiotics nihil meh. Skateboard irure before they sold out Banksy. Narwhal High Life lomo aliqua drinking vinegar. PBR&B placeat proident, craft beer forage DIY nostrud meh flexitarian keytar Helvetica.</p>
                                        </figcaption>
                                        <img src="img/large/5.png" alt="img05"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Exercitation occaecat</h3>
                                             <p>Skateboard Truffaut bicycle rights seitan normcore. Culpa lo-fi ennui, Pinterest before they sold out Echo Park roof party sapiente aesthetic consequat Truffaut freegan voluptate. Kogi banh mi vero nihil, freegan gluten-free cliche. Forage Etsy laboris anim normcore, McSweeney's ex.</p>
                                        </figcaption>
                                        <img src="img/large/6.png" alt="img06"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Selfies viral four</h3>
                                             <p>Viral roof party locavore flexitarian nihil fanny pack actually Odd Future anim commodo. Sunt yr aute, enim quis plaid sartorial duis leggings lo-fi gluten-free. Tote bag flexitarian pug stumptown, Cosby sweater try-hard ethnic scenester. Mumblecore +1 hoodie accusamus skateboard slow-carb, Thundercats Godard placeat craft beer meh enim trust fund.</p>
                                        </figcaption>
                                        <img src="img/large/1.jpg" alt="img01"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Photo booth skateboard</h3>
                                             <p>Culpa pour-over cray nesciunt dreamcatcher. Meggings distillery cillum raw denim voluptate, single-origin coffee lo-fi ethical iPhone four loko nihil salvia. Biodiesel ea Intelligentsia quis deep v, American Apparel trust fund slow-carb synth semiotics quinoa Brooklyn pour-over nulla Godard.</p>
                                        </figcaption>
                                        <img src="img/large/2.jpg" alt="img02"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Ex fashion axe</h3>
                                             <p>Bespoke irony tousled nihil flexitarian, salvia tempor nostrud Bushwick hashtag Austin ethnic disrupt. Beard Helvetica nihil, chia craft beer Wes Anderson keytar dolore. Irure incididunt flexitarian photo booth cillum, YOLO deserunt Brooklyn artisan. Brunch assumenda irony, Blue Bottle roof party DIY ullamco quis.</p>
                                        </figcaption>
                                        <img src="img/large/3.png" alt="img03"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Thundercats next level</h3>
                                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
                                        </figcaption>
                                        <img src="img/large/4.png" alt="img04"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Bushwick selvage synth</h3>
                                             <p>Ethical Truffaut tofu food truck cred cornhole. Irure umami Austin cornhole blog ethical. Aliqua yr Truffaut, adipisicing hashtag Shoreditch eiusmod tempor literally vinyl.</p>
                                        </figcaption>
                                        <img src="img/large/5.png" alt="img05"/>
                                   </figure>
                              </li>
                              <li>
                                   <figure>
                                        <figcaption>
                                             <h3>Bottle wayfarers locavore</h3>
                                             <p>Pork belly irony Shoreditch fashion axe DIY. Portland banjo irony, squid gentrify Austin fixie church-key magna. Marfa artisan Echo Park, McSweeney's banjo sunt keytar tofu. Brooklyn PBR single-origin coffee disrupt polaroid ut, gluten-free XOXO plaid magna.</p>
                                        </figcaption>
                                        <img src="img/large/1.jpg" alt="img01"/>
                                   </figure>
                              </li> -->
                         </ul>
                         <nav>
                              <span class="icon nav-prev"></span>
                              <span class="icon nav-next"></span>
                              <span class="icon nav-close"></span>
                         </nav>
                         <div class="info-keys icon">Navigate with arrow keys</div>
                    </section><!-- // slideshow -->
               </div><!-- // grid-gallery -->
          </div>
          <script src="js/imagesloaded.pkgd.min.js"></script>
          <script src="js/masonry.pkgd.min.js"></script>
          <script src="js/classie.js"></script>
          <script src="js/cbpGridGallery.js"></script>
          <script>
               new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
          </script>
     </body>
</html>
