<!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>Famille</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/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/masf.jpg" style="  
										
"/></a>
		<div class="container">
			
			<div id="grid-gallery" class="grid-gallery">
				<section class="grid-wrap">
					<ul class="grid" style="position: relative; height: 2594.515625px;bottom: 200px;" >
						<li class="grid-sizer"></li><!-- for Masonry column width -->
						<li>
							<figure>
								<img src="img/thumb/fa.jpg" 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 ano.`id`,
                           ano.`nom`,
                           ano.`age`,
                           ano.`sexe`,
                           ano.`message`,
                           ano.`Date`,
                           ano.`categorie`,
                           ano.`anonymepetitedesc`,
                           ano.`anonymegrandedesc`,
                           ano.`Images`,
                           ano.`valider`,
                           ano.`Vues`,
                           CASE WHEN ano.Images!=''  THEN ano.images
                                WHEN ano.Images='' AND ano.sexe= 'Homme' THEN cat.image_homme
                                WHEN ano.Images='' AND ano.sexe= 'Femme' THEN cat.image_femme
                             ELSE cat.image_homme
                         END  AS Images,
                         cat.class,
                         cat.classgrid

                    FROM anonyme ano,
                         categorie cat
                    WHERE ano.categorie = cat.nom  
                    AND ano.`id`=$i 
                    AND ano.`valider`=1
                    AND categorie = 'famille' ;");
          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="f">
                    <div class="gridf">
                         <figure>
                               <?php if(($donnees1['sexe']=="Homme" OR $donnees1['sexe']==NULL) AND $donnees1['Images']==NULL) {

                                ?>

                                <img src="<?php echo $donnees1['image_homme'];?>" style="width: 238px;height: 150px; "/> 
                              <?php

                               } elseif($donnees1['sexe']=="Femme" AND $donnees1['Images']==NULL){

                                ?>

                                <img src="<?php echo $donnees1['image_femme'];?>" style="width: 238px;height: 150px;"/> <?php

                                } 


                              elseif($donnees1['Images']!=NULL) {

                                  
                              ?>
                                   <img src="../uploads/<?php echo $donnees1['Images'];?>" style="width: 238px;height: 150px;"/>

                              <?php  
                                }

                              
                              ?>  
                              <figcaption>
                                   <h3><b><?php echo $donnees1['nom'];?> <?php if($donnees1['age']!=NULL) { echo ('/');} ?> <?php echo $donnees1['age'];?> <?php if($donnees1['age']!=NULL) { echo ('ans');} ?> <?php if($donnees1['sexe']!=NULL) { echo ('/');} ?> <?php echo $donnees1['sexe'];?></b></h3>
                                   <p><?php echo $donnees1['anonymepetitedesc'];?>...</p>
                                   <br>
									<left><b>	<?php echo $donnees1['Vues'].' Vues';  ?> </b></left>
                              </figcaption>
                         </figure>
                    </div>
               </li>


<?php
     }
     mysqli_free_result($requete1);
     }

?>



						



						

						<!-- <li>
							<figure>
								<img src="img/thumb/2.jpg" alt="img04"/>
								<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="img05"/>
								<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="img03"/>
								<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="img01"/>
								<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="img03"/>
								<figcaption><h3>Bottle wayfarers locavore</h3><p>Once there was a little asparagus, he was green and lonely.</p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="img/thumb/1.jpg" alt="img04"/>
								<figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="img/thumb/2.jpg" alt="img05"/>
								<figcaption><h3>Vice velit chia</h3><p>Laborum tattooed iPhone, Schlitz irure nulla Tonx retro 90's chia cardigan quis asymmetrical paleo. </p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="img/thumb/3.png" alt="img01"/>
								<figcaption><h3>Brunch semiotics</h3><p>Ex disrupt cray yr, butcher pour-over magna umami kitsch before they sold out commodo.</p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="img/thumb/4.png" alt="img02"/>
								<figcaption><h3>Chillwave nihil occupy</h3><p>In post-ironic gluten-free deserunt, PBR&amp;B non pork belly cupidatat polaroid. </p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="img/thumb/5.png" alt="img03"/>
								<figcaption><h3>Kale chips lomo biodiesel</h3><p>Pariatur food truck street art consequat sustainable, et kogi beard qui paleo. </p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="img/thumb/6.png" alt="img04"/>
								<figcaption><h3>Exercitation occaecat</h3><p>Street chillwave hoodie ea gentrify.</p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="img/thumb/1.jpg" alt="img05"/>
								<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="img01"/>
								<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="img02"/>
								<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="img03"/>
								<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="img04"/>
								<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="img05"/>
								<figcaption><h3>Bottle wayfarers locavore</h3><p>Once there was a little asparagus, he was green and lonely.</p></figcaption>
							</figure>
						</li> -->
					</ul><img src="../images/belec.jpg"/>
				</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 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 ano.`id`,
                           ano.`nom`,
                           ano.`age`,
                           ano.`sexe`,
                           ano.`message`,
                           ano.`Date`,
                           ano.`categorie`,
                           ano.`anonymegrandedesc`,
                           ano.`Images`,
                           ano.`valider`,
                           ano.`Vues`,
                           CASE WHEN ano.Images!=''  THEN ano.images
                                WHEN ano.Images='' AND ano.sexe= 'Homme' THEN cat.image_homme
                                WHEN ano.Images='' AND ano.sexe= 'Femme' THEN cat.image_femme
                             ELSE cat.image_homme
                         END  AS Images,
                         cat.class,
                         cat.classgrid

                    FROM anonyme ano,
                         categorie cat
                    WHERE ano.categorie = cat.nom  
                    AND ano.`id`=$i 
                    AND ano.`valider`=1
                    AND categorie = 'famille' ;");
          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="f">
                    <div class="gridf">
                    	<div class=".slideshowami figure">
                         <figure>
                              
                              <figcaption>
                                   <h3><b><?php echo $donnees1['nom'];?> <?php if($donnees1['age']!=NULL) { echo ('/');} ?> <?php echo $donnees1['age'];?> <?php if($donnees1['age']!=NULL) { echo ('ans');} ?> <?php if($donnees1['sexe']!=NULL) { echo ('/');} ?> <?php echo $donnees1['sexe'];?></b></h3>
                                   <p><?php echo $donnees1['anonymegrandedesc'];?>...</p>
                                   <br><br><FONT color="black"> Cliquez sur l'image pour lire la suite.</FONT> 
                                   <b style="margin-left: 270px;" ;>	<?php echo $donnees1['Vues'].' Vues';  ?> </b></p>
                              </figcaption>
                              <a href="messagedetails.php?id=<?php echo $donnees1['id'];?>"> 
                              	<?php if(($donnees1['sexe']=="Homme" OR $donnees1['sexe']==NULL) AND $donnees1['Images']==NULL) {

                                ?>

                                <img src="../images/commentaireanonyme2.jpg" style="width: 238px;height: 150px;"/> 
                              <?php

                               } elseif($donnees1['sexe']=="Femme" AND $donnees1['Images']==NULL){

                                ?>

                                <img src="../images/commentaireanonyme.jpg" style="width: 238px;height: 150px;"/>  <?php

                                } 


                              elseif($donnees1['Images']!=NULL) {

                                  
                              ?>
                                   <img src="../uploads/<?php echo $donnees1['Images'];?>" style="width: 238px;height: 150px;"/>

                              <?php  
                                }

                              
                              ?>  </a>
                         </figure>
                         <?php echo $donnees1['Date'];?>
                    </div>
               </li>


<?php
     }
     mysqli_free_result($requete1);
     }

?>





						
					</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>