<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BBW</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
    <style>
    body {margin:0px;}
	#panorama {
        width: 100%;
        height: 100vh;
    }
    </style>
</head>
<body>

<?php
if (isset($_GET['img'])) {
    $img = filter_input(INPUT_GET,"img",FILTER_SANITIZE_STRING);
} else {
    // Fallback behaviour goes here
}

if (isset($_GET['author'])) {
    $author = filter_input(INPUT_GET,"author",FILTER_SANITIZE_STRING);
} else {
    $author = "---";
}

if (isset($_GET['title'])) {
    $title = filter_input(INPUT_GET,"title",FILTER_SANITIZE_STRING);
} else {
    $title = "---";
}

if (isset($_GET['date'])) {
    $date = filter_input(INPUT_GET,"date",FILTER_SANITIZE_STRING);
} else {
    $date = "---";
}





?>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "<?= $img ?>",
	"autoLoad": true,
	"title": "<?= $title ?>",
    "author": "<?= $date ?>",
	"compass": true,
    "northOffset": 247.5,
	"hotSpotDebug": true

});
</script>




</body>
</html>