<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .responsive {
        max-width: 100%;
        height: auto;
    }
    </style>
    <title id=myTitle></title>
</head>
<body>
    <h1 align=center id=myTitle2></h1>
    <div id=year></div><div id=theme></div>

    <img src="cover.jpg" class="responsive" width="600" height="400">

<script type="text/javascript">
    fetch('info.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function appendData(data) {
        document.getElementById("myTitle").innerHTML = data.name + " - " + data.set_num
        document.getElementById("myTitle2").innerHTML = data.name + " - " + data.set_num
        document.getElementById("year").innerHTML = "Year: " + data.year
        document.getElementById("theme").innerHTML = "Theme ID: " + data.theme_id
    }
</script>
</body>
</html>