camera-picture-slide/templates/app/home-page.phtml

<?php $this->layout('layout::default', ['title' => 'Home']) ?>

<?php $this->push('stylesheets') ?>
<style>
    #cameraImage {
        width: 100%;
        height: 100%;
        background: black no-repeat fixed center center;
        background-size: cover;
        /*transition: background-image 0.25s linear;*/
    }

    #cameraText {
        margin: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 3em;
        background-color: rgba(0,0,0,0.5);
        text-align: center;
        color: #ffffff;
        text-shadow: -1px 0 #999999, 0 1px #999999, 1px 0 #999999, 0 -1px #999999;
    }

    #imagePreloader {
        display: none;
    }
</style>
<?php $this->end() ?>

<?php $this->push('javascript') ?>
<script>
  var changeDelay = <?=$changeDelay ?>;
  var refreshInterval = <?=$refreshInterval ?>;
  var cameraImageApiUrl = '<?=$this->serverurl("api/get-latest-camera-pictures") ?>';
  var cameraImageBaseUrl = '<?=$this->serverurl("show-image/") ?>';
</script>
<script src="<?= $this->serverurl("scripts/camera-image-handler.js") ?>"></script>
<?php $this->end() ?>
<div id="cameraImage">
    <h1 id="cameraText"></h1>
</div>
<div id="imagePreloader"></div>