<?php
// die("Hi");
$metaData = [
  "description" => "",
  "og:url" => "",
  "og:type" => "",
  "og:title" => "",
  "og:description" => "",
  "og:image" => "",
  "twitter:card" => "",
  "twitter:domain" => "",
  "twitter:url" => "",
  "twitter:title" => "",
  "twitter:description" => "",
  "twitter:image" => "",
];

$curl = curl_init();

$id = explode('/', $_SERVER['REQUEST_URI'])[1];

if ($id != "") {
  curl_setopt_array($curl, array(
    CURLOPT_URL => 'https://a.qraphy.com/rest/ogData?_format=json',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => '',
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_POSTFIELDS => '{
      "url": "'.$id.'"
    }',
    CURLOPT_HTTPHEADER => array(
      'Content-Type: application/json'
    ),
  ));

  $response = curl_exec($curl);

  $json_response = json_decode($response);

  // echo $json_response->data->image;
  curl_close($curl);

  if (isset($json_response->data)) {
    $metaData = $json_response->data;
  }

}
?>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- <meta name="description" content="Tap, deel en verbind met Qraphy Of je nu jouw producten, je bedrijf, je muziek, je talenten of informatie wilt delen met anderen. Met Qraphy zijn de mogelijkheden eindeloos! Ga naar de winkel Ontdek de mogelijkheden Tap, deel en verbind met Qraphy Of je nou jouw producten, je bedrijf, je muziek, je talenten of informatie" /> -->
  <meta name="author" content="qraphy">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <base href="/">
  <link href="/assets/tailwind-base.css" rel="stylesheet">
  <link rel="manifest" href="/manifest.json">
  <link rel="shortcut icon" href="/favicon.ico">
  <link href="/assets/fonts/material-design-icons/MaterialIconsOutlined.css" rel="stylesheet">
  <link href="/assets/fonts/inter/inter.css" rel="stylesheet">
  <link href="/assets/fonts/meteocons/style.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><noscript id="emotion-insertion-point"></noscript>

  <!-- <meta property="og:url" content="https://qrcrd.com/robintimman">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Qraphy Card">
  <meta property="og:description" content="Tap, deel en verbind met Qraphy Of je nu jouw producten, je bedrijf, je muziek, je talenten of informatie wilt delen met anderen. Met Qraphy zijn de mogelijkheden eindeloos! Ga naar de winkel Ontdek de mogelijkheden Tap, deel en verbind met Qraphy Of je nou jouw producten, je bedrijf, je muziek, je talenten of informatie"> -->
  <?php
    foreach ($metaData as $key => $value) {
      // if ($key == "og:image") {
      //   // echo "  <meta name=\"".$key."\" itemprop=\"image\" content=\"".$value."\">\n";
      // } else {
      // }
      echo "  <meta name=\"".$key."\" content=\"".$value."\">\n";
    }
  ?>
  <style>
    <?php 
    if ($json_response->background !== "#f6f7f9" && $json_response->text !== "#011831") {
      if ($json_response->background) {?>
        html {
          --bgc: <?=$json_response->background;?>;
        }
    <?php } } ?>
    body #fuse-splash-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #111827;
      color: #f9fafb;
      z-index: 999999;
      pointer-events: none;
      opacity: 1;
      visibility: visible;
      transition: opacity .4s cubic-bezier(.4, 0, .2, 1)
    }

    body #fuse-splash-screen img {
      width: 120px;
      max-width: 120px
    }

    #spinner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40px;
      width: 56px
    }

    #spinner>div {
      width: 12px;
      height: 12px;
      background-color: #1e96f7;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
      animation: fuse-bouncedelay 1s infinite ease-in-out both
    }

    #spinner .bounce1 {
      -webkit-animation-delay: -.32s;
      animation-delay: -.32s
    }

    #spinner .bounce2 {
      -webkit-animation-delay: -.16s;
      animation-delay: -.16s
    }

    @-webkit-keyframes fuse-bouncedelay {

      0%,
      100%,
      80% {
        -webkit-transform: scale(0)
      }

      40% {
        -webkit-transform: scale(1)
      }
    }

    @keyframes fuse-bouncedelay {

      0%,
      100%,
      80% {
        -webkit-transform: scale(0);
        transform: scale(0)
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }
  </style>
  <script defer="defer" src="/static/js/main.a987e0c1.js"></script>
  <link href="/static/css/main.b50076ef.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root" class="flex">
    <div id="fuse-splash-screen">
      <div id="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
  </div>
</body>

</html>