changedetection.io/changedetectionio/templates/diff-image.html

{% extends 'base.html' %}

{% block content %}

<div id="settings">
    <h1>Differences</h1>
    <form class="pure-form " action="" method="GET">
        <fieldset>
            {% if versions|length >= 1 %}
            <label for="diff-version">Compare newest (<span id="current-v-date"></span>) with</label>
            <select id="diff-version" name="previous_version">
                {% for version in versions %}
                <option value="{{version}}" {% if version== current_previous_version %} selected="" {% endif %}>
                    {{version}}
                </option>
                {% endfor %}
            </select>
            <button type="submit" class="pure-button pure-button-primary">Go</button>
            {% endif %}
        </fieldset>
    </form>

</div>

<div id="diff-ui">
    <script
  defer
  src="https://unpkg.com/img-comparison-slider@7/dist/index.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/img-comparison-slider@7/dist/styles.css"
/>

<img-comparison-slider>
  <img  slot="first"  src="{{ url_for('render_diff_image', uuid=uuid, compare_date=current_previous_version) }}" />
    <img  slot="second" src="{{ url_for('render_single_image', uuid=uuid, history_timestamp=current_previous_version) }}" />

</img-comparison-slider>

</div>


<script type="text/javascript" src="{{url_for('static_content', group='js', filename='diff.js')}}"></script>

<script defer="">
window.onload = function() {
    /* Set current version date as local time in the browser also */
    var current_v = document.getElementById("current-v-date");
    var dateObject = new Date({{ newest_version_timestamp }}*1000);
    current_v.innerHTML=dateObject.toLocaleString();

    /* Convert what is options from UTC time.time() to local browser time */
    var diffList=document.getElementById("diff-version");
    if (typeof(diffList) != 'undefined' && diffList != null) {
        for (var option of diffList.options) {
          var dateObject = new Date(option.value*1000);
          option.label=dateObject.toLocaleString();
        }
    }
}
</script>

{% endblock %}