<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/MyTheme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/gauge.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
</head>

<body>

<div data-role="page" id="pageone" >
  <div data-role="header" data-position="fixed">
    <h1>My Plants</h1>
  </div>
  <div style="padding: 16px 16px 16px 16px;" data-role="main" class="ui-content">
    <ul data-role="listview" >
	<?php
    $connection = mysqli_connect("","","","") or die("Error " . mysqli_error($connection));
    $sql = "select id, plant_name, picture, overview from Plants";
    $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));

	while($row =mysqli_fetch_assoc($result)){
    ?>
      <li>
        <a href="details.php?id=<?php echo $row["id"]; ?>">
        <img src="Plants_img_round/<?php echo $row["picture"]; ?>.jpg">
        <h2><?php echo $row["plant_name"]; ?></h2>
        <p><font size="1" color="blue">Planted: 10 Days Ago</font>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="1" color="green">Harverst: In 10 Days</font></p>
        </a>
      </li>
	<?php }mysqli_close($connection);?>
    </ul>
  </div>

</div>
</body>
</html>