<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>K3D snapshot viewer - [TIMESTAMP]</title>
    <style>
        body, html {
            background-color: #F5F5F5;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #canvasTarget {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
    <script id='pakojs'>[PAKO_JS]</script>
    <script>
        window.k3dCompressed = '[K3D_SOURCE]';
        var k3dSource = pako.inflate(atob(window.k3dCompressed), {'to': 'string'});
    </script>
    <script id='requirejs'>[REQUIRE_JS]</script>
</head>
<body>
<div id="canvasTarget"></div>

<script>
    var K3DInstance,
        k3dParams = [PARAMS],
        k3dCamera = [CAMERA];

    eval(k3dSource);

    require(['k3d'], function (lib) {
        try {
            K3DInstance = new lib.K3D(
                lib.ThreeJsProvider,
                document.getElementById('canvasTarget'),
                k3dParams
            );
        } catch (e) {
            console.log(e);
            return;
        }

        if (K3DInstance) {
            var data = '[DATA]';

            K3DInstance.setSnapshot(atob(data)).then(function() {
                K3DInstance.setCamera(k3dCamera);
            });

            [ADDITIONAL]
        }
    });
</script>
</body>
</html>
