Untitled


<?php
 //error_reporting(E_ERROR | E_PARSE);
$stream_opts = [
    "ssl" => [
        "verify_peer"=>false,
        "verify_peer_name"=>false,
    ]
];

$Authorization = '563492ad6f91700001000001b068633704ba4d62a98ea93083bfd85c';
$context = stream_context_create(array(
    'http' => array(
        'header' => "Authorization:$Authorization",
    ),
    'ssl' => array(
        "verify_peer"=>false,
        "verify_peer_name"=>false,
    ),
));
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <script type="text/javascript" src="jquery-1.11.0.js"></script>
<style>
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<form method="post" >

  <input type="text" name="query">
  <input type="submit" name="submit">

</form>


<?php

if (isset($_POST['submit'])) {

?>

  <input type="button" id="mybutton" value="Sort" />
<div id="list">
<?php


$query = $_POST['query'];
  $api_url = 'https://api.pexels.com/v1/search?query='.$query.'&per_page=8&page=1';

$result = file_get_contents($api_url, false, $context);

$data = json_decode($result);
include 'html.php';
foreach ($data->photos as $key ) {

$ur = $key->url;

$id = $key->id;

$src_img = $key->src->medium;


$d = array();
$i=0;
$html = file_get_contents('https://www.pexels.com/medium/below-the-fold-photo-stats/'.$id.'/');

$html = str_get_html($html);
echo $html;
foreach($html->find('div') as $element) {
    if ($element->class === 'photo-page__info__statistics__view-avatar-container__icons__icon__text') {
        $d[$i] =  $element->innertext;
        $i++;
}
}

$d[0] =  substr(trim($d[0]), 0, -1);

?>

<div id="categorie5.1-<?php echo $d[0]; ?>" class="responsive">
  <div  class="gallery">
    <a target="_blank" href="<?php echo $ur; ?>">
      <img style="width:300px;height:250px;"  src="<?php echo $src_img; ?>" alt=""  >
    </a>
    <div class="desc">Download : <?php echo " <i>". $d[0] ."K</i>"; ?><br>
     <br>Likes : <?php echo $d[1]; ?><br></div>
  </div>
</div>

<?php


}
}


// foreach ($ids as $key ) {


// print_r($data);
// }

?>
</div>
</body>

<script type="text/javascript">

var sortID = function () {

    var toSort = document.getElementById('list').children;
    toSort = Array.prototype.slice.call(toSort, 0);

    toSort.sort(function (a, b) {
        var aord = +a.id.split('-')[1];
        var bord = +b.id.split('-')[1];
        // two elements never have the same ID hence this is sufficient:
        return (aord < bord) ? 1 : -1;
    });

    var parent = document.getElementById('list');
    parent.innerHTML = "";

    for (var i = 0, l = toSort.length; i < l; i++) {
        parent.appendChild(toSort[i]);
    }

};

window.onload = function(){
    document.getElementById("mybutton").onclick = sortID;
}

</script>