changedetection.io/changedetectionio/templates/base.html

<!DOCTYPE html>
<html lang="en" data-darkmode="{{ get_darkmode_state() }}">

  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <meta name="description" content="Self hosted website change detection." >
    <title>Change Detection{{extra_title}}</title>
    <link rel="alternate" type="application/rss+xml" title="Changedetection.io » Feed{% if active_tag %}- {{active_tag}}{% endif %}" href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}" >
    <link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='pure-min.css')}}" >
    <link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='styles.css')}}" >
    {% if extra_stylesheets %}
      {% for m in extra_stylesheets %}
        <link rel="stylesheet" href="{{ m }}?ver=1000" >
      {% endfor %}
    {% endif %}

    <link rel="apple-touch-icon" sizes="180x180" href="{{url_for('static_content', group='favicons', filename='apple-touch-icon.png')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{url_for('static_content', group='favicons', filename='favicon-32x32.png')}}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{url_for('static_content', group='favicons', filename='favicon-16x16.png')}}">
    <link rel="manifest" href="{{url_for('static_content', group='favicons', filename='site.webmanifest')}}">
    <link rel="mask-icon" href="{{url_for('static_content', group='favicons', filename='safari-pinned-tab.svg')}}" color="#5bbad5">
    <link rel="shortcut icon" href="{{url_for('static_content', group='favicons', filename='favicon.ico')}}">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <style>
      body::before {
        background-image: url({{url_for('static_content', group='images', filename='gradient-border.png') }});
      }
    </style>
    <script type="text/javascript" src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
  </head>

  <body>
    <div class="header">
      <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" id="nav-menu">
        {% if has_password and not current_user.is_authenticated %}
          <a class="pure-menu-heading" href="https://github.com/dgtlmoon/changedetection.io" rel="noopener">
            <strong>Change</strong>Detection.io</a>
        {% else %}
          <a class="pure-menu-heading" href="{{url_for('index')}}">
            <strong>Change</strong>Detection.io</a>
        {% endif %}
        {% if current_diff_url %}
          <a class="current-diff-url" href="{{ current_diff_url }}">
            <span style="max-width: 30%; overflow: hidden">{{ current_diff_url }}</span></a>
        {% else %}
          {% if new_version_available and not(has_password and not current_user.is_authenticated) %}
            <span id="new-version-text" class="pure-menu-heading">
              <a href="https://github.com/dgtlmoon/changedetection.io">A new version is available</a>
            </span>
          {% endif %}
        {% endif %}

        <ul class="pure-menu-list" id="top-right-menu">
          {% if current_user.is_authenticated or not has_password %}
            {% if not
            current_diff_url %}
              <li class="pure-menu-item">
                <a href="{{ url_for('settings_page')}}" class="pure-menu-link">SETTINGS</a>
              </li>
              <li class="pure-menu-item">
                <a href="{{ url_for('import_page')}}" class="pure-menu-link">IMPORT</a>
              </li>
              <li class="pure-menu-item">
                <a href="{{ url_for('get_backup')}}" class="pure-menu-link">BACKUP</a>
              </li>
            {% else %}
              <li class="pure-menu-item">
                <a href="{{ url_for('edit_page', uuid=uuid, next='diff') }}" class="pure-menu-link">EDIT</a>
              </li>
            {% endif %}
          {% else %}
            <li class="pure-menu-item">
              <a class="pure-menu-link" href="https://github.com/dgtlmoon/changedetection.io">Website Change Detection and Notification.</a>
            </li>
          {% endif %}
          {% if current_user.is_authenticated %}
            <li class="pure-menu-item">
              <a href="{{url_for('logout')}}" class="pure-menu-link">LOG OUT</a>
            </li>
          {% endif %}
          <li class="pure-menu-item">
            {% if dark_mode %}
            {% set darkClass = 'dark' %}
            {% endif %}
            <button class="toggle-theme {{darkClass}}" type="button" title="Toggle Light/Dark Mode">
              <span class="visually-hidden">Toggle light/dark mode</span>
              <span class="icon-light">
                {% include "svgs/light-mode-toggle-icon.svg" %}
              </span>
              <span class="icon-dark">
                {% include "svgs/dark-mode-toggle-icon.svg" %}
              </span>
            </button>
          </li>
          <li class="pure-menu-item">
            <a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">
              {% include "svgs/github.svg" %}
            </a>
          </li>
        </ul>
      </div>
    </div>
    {% if hosted_sticky %}
      <div class="sticky-tab" id="hosted-sticky">
        <a href="https://lemonade.changedetection.io/start?ref={{guid}}">Let us host your instance!</a>
      </div>
    {% endif %}
    {% if left_sticky %}
      <div class="sticky-tab" id="left-sticky">
        <a href="{{url_for('preview_page', uuid=uuid)}}">Show current snapshot</a>
      </div>
    {% endif %}
    {% if right_sticky %}
      <div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div>
    {% endif %}
    <section class="content">
      <header>
        {% block header %}{% endblock %}
      </header>

      {% with messages = get_flashed_messages(with_categories = true) %}
      {% if
      messages %}
        <ul class="messages">
          {% for category, message in messages %}
            <li class="{{ category }}">{{ message }}</li>
          {% endfor %}
        </ul>
      {% endif %}
      {% endwith %}
      {% if session['share-link'] %}
        <ul class="messages with-share-link">
          <li class="message">
            Share this link:
            <span id="share-link">{{ session['share-link'] }}</span>
            <img style="height: 1em; display: inline-block" src="{{url_for('static_content', group='images', filename='copy.svg')}}" >
          </li>
        </ul>
      {% endif %}
      {% block content %}{% endblock %}
    </section>
    <script
      type="text/javascript"
      src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}"
      defer></script>
  </body>

</html>
UI - Dark Mode (#1187) 2 years ago			`<!DOCTYPE html>`
Dark mode - HTML template tidy up (#1197) 2 years ago			`<html lang="en" data-darkmode="{{ get_darkmode_state() }}">`
UI - Dark Mode (#1187) 2 years ago
			`<head>`
UI - Various minor HTML validation fixes 2 years ago			`<meta charset="utf-8" >`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0" >`
			`<meta name="description" content="Self hosted website change detection." >`
Diff page - use the document title in <title> for better bookmarking 4 years ago			`<title>Change Detection{{extra_title}}</title>`
UI - Various minor HTML validation fixes 2 years ago			`<link rel="alternate" type="application/rss+xml" title="Changedetection.io » Feed{% if active_tag %}- {{active_tag}}{% endif %}" href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}" >`
			`<link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='pure-min.css')}}" >`
			`<link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='styles.css')}}" >`
Add [diff] mechanism 4 years ago			`{% if extra_stylesheets %}`
UI - Dark Mode (#1187) 2 years ago			`{% for m in extra_stylesheets %}`
UI - Various minor HTML validation fixes 2 years ago			`<link rel="stylesheet" href="{{ m }}?ver=1000" >`
UI - Dark Mode (#1187) 2 years ago			`{% endfor %}`
Add [diff] mechanism 4 years ago			`{% endif %}`
Favicon multiplatform and path fix/update (#1176) 2 years ago
UI - Various minor HTML validation fixes 2 years ago			`<link rel="apple-touch-icon" sizes="180x180" href="{{url_for('static_content', group='favicons', filename='apple-touch-icon.png')}}">`
			`<link rel="icon" type="image/png" sizes="32x32" href="{{url_for('static_content', group='favicons', filename='favicon-32x32.png')}}">`
			`<link rel="icon" type="image/png" sizes="16x16" href="{{url_for('static_content', group='favicons', filename='favicon-16x16.png')}}">`
			`<link rel="manifest" href="{{url_for('static_content', group='favicons', filename='site.webmanifest')}}">`
			`<link rel="mask-icon" href="{{url_for('static_content', group='favicons', filename='safari-pinned-tab.svg')}}" color="#5bbad5">`
			`<link rel="shortcut icon" href="{{url_for('static_content', group='favicons', filename='favicon.ico')}}">`
			`<meta name="msapplication-TileColor" content="#da532c">`
			`<meta name="msapplication-config" content="favicons/browserconfig.xml">`
			`<meta name="theme-color" content="#ffffff">`
Favicon multiplatform and path fix/update (#1176) 2 years ago
Style fix for background image relative to X-Forwarded-Prefix when running via reverse proxy subdirectory 3 years ago			`<style>`
UI - Dark Mode (#1187) 2 years ago			`body::before {`
			`background-image: url({{url_for('static_content', group='images', filename='gradient-border.png') }});`
			`}`
Style fix for background image relative to X-Forwarded-Prefix when running via reverse proxy subdirectory 3 years ago			`</style>`
Introduce an AJAX button for sending test notifications instead of the checkbox (#519) 3 years ago			`<script type="text/javascript" src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>`
UI - Dark Mode (#1187) 2 years ago			`</head>`
Adding RSS metadata auto-discovery 3 years ago
UI - Dark Mode (#1187) 2 years ago			`<body>`
			`<div class="header">`
			`<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" id="nav-menu">`
Re #44 - Broke the menu by accident, adding tests and fixing. 4 years ago			`{% if has_password and not current_user.is_authenticated %}`
UI - Dark Mode (#1187) 2 years ago			`<a class="pure-menu-heading" href="https://github.com/dgtlmoon/changedetection.io" rel="noopener">`
			`<strong>Change</strong>Detection.io</a>`
Password protection / login support (#34) Issue #24 Password login hashlib.pbkdf2_hmac implementation 4 years ago			`{% else %}`
UI - Dark Mode (#1187) 2 years ago			`<a class="pure-menu-heading" href="{{url_for('index')}}">`
			`<strong>Change</strong>Detection.io</a>`
Password protection / login support (#34) Issue #24 Password login hashlib.pbkdf2_hmac implementation 4 years ago			`{% endif %}`
Include the current URL in the page when viewing the version diff 4 years ago			`{% if current_diff_url %}`
UI - Dark Mode (#1187) 2 years ago			`<a class="current-diff-url" href="{{ current_diff_url }}">`
			`<span style="max-width: 30%; overflow: hidden">{{ current_diff_url }}</span></a>`
Issue #12 include version for easy reference. 4 years ago			`{% else %}`
UI - Dark Mode (#1187) 2 years ago			`{% if new_version_available and not(has_password and not current_user.is_authenticated) %}`
			`<span id="new-version-text" class="pure-menu-heading">`
			`<a href="https://github.com/dgtlmoon/changedetection.io">A new version is available</a>`
			`</span>`
			`{% endif %}`
Include the current URL in the page when viewing the version diff 4 years ago			`{% endif %}`
Initial commit 4 years ago
UI - Dark Mode (#1187) 2 years ago			`<ul class="pure-menu-list" id="top-right-menu">`
			`{% if current_user.is_authenticated or not has_password %}`
			`{% if not`
			`current_diff_url %}`
			`<li class="pure-menu-item">`
Re-arranging primary links so the important ones are easier to find on mobile 3 years ago			`<a href="{{ url_for('settings_page')}}" class="pure-menu-link">SETTINGS</a>`
UI - Dark Mode (#1187) 2 years ago			`</li>`
			`<li class="pure-menu-item">`
#76 app path prefix when behind proxy_pass (#91) Support for running in a sub-path under proxy_pass (Running changedetection.io behind a reverse proxy sub directory) More here https://github.com/dgtlmoon/changedetection.io/wiki/Running-changedetection.io-behind-a-reverse-proxy-sub-directory 4 years ago			`<a href="{{ url_for('import_page')}}" class="pure-menu-link">IMPORT</a>`
UI - Dark Mode (#1187) 2 years ago			`</li>`
			`<li class="pure-menu-item">`
Re-arranging primary links so the important ones are easier to find on mobile 3 years ago			`<a href="{{ url_for('get_backup')}}" class="pure-menu-link">BACKUP</a>`
UI - Dark Mode (#1187) 2 years ago			`</li>`
Re #92 - Re-use existing [preview] function for viewing current (#97) 4 years ago			`{% else %}`
UI - Dark Mode (#1187) 2 years ago			`<li class="pure-menu-item">`
Usability tweak - [edit] on diff page should go back to diff page 4 years ago			`<a href="{{ url_for('edit_page', uuid=uuid, next='diff') }}" class="pure-menu-link">EDIT</a>`
UI - Dark Mode (#1187) 2 years ago			`</li>`
Re #92 - Re-use existing [preview] function for viewing current (#97) 4 years ago			`{% endif %}`
UI - Dark Mode (#1187) 2 years ago			`{% else %}`
Password protection / login support (#34) Issue #24 Password login hashlib.pbkdf2_hmac implementation 4 years ago			`<li class="pure-menu-item">`
UI - Dark Mode (#1187) 2 years ago			`<a class="pure-menu-link" href="https://github.com/dgtlmoon/changedetection.io">Website Change Detection and Notification.</a>`
Password protection / login support (#34) Issue #24 Password login hashlib.pbkdf2_hmac implementation 4 years ago			`</li>`
UI - Dark Mode (#1187) 2 years ago			`{% endif %}`
			`{% if current_user.is_authenticated %}`
			`<li class="pure-menu-item">`
			`<a href="{{url_for('logout')}}" class="pure-menu-link">LOG OUT</a>`
			`</li>`
			`{% endif %}`
			`<li class="pure-menu-item">`
			`{% if dark_mode %}`
			`{% set darkClass = 'dark' %}`
			`{% endif %}`
Tweaks - adding hover/title to dark mode button 2 years ago			`<button class="toggle-theme {{darkClass}}" type="button" title="Toggle Light/Dark Mode">`
UI - Dark Mode (#1187) 2 years ago			`<span class="visually-hidden">Toggle light/dark mode</span>`
			`<span class="icon-light">`
			`{% include "svgs/light-mode-toggle-icon.svg" %}`
			`</span>`
			`<span class="icon-dark">`
			`{% include "svgs/dark-mode-toggle-icon.svg" %}`
			`</span>`
			`</button>`
			`</li>`
			`<li class="pure-menu-item">`
			`<a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">`
			`{% include "svgs/github.svg" %}`
			`</a>`
			`</li>`
Initial commit 4 years ago			`</ul>`
UI - Dark Mode (#1187) 2 years ago			`</div>`
Initial commit 4 years ago			`</div>`
UI - Dark Mode (#1187) 2 years ago			`{% if hosted_sticky %}`
			`<div class="sticky-tab" id="hosted-sticky">`
			`<a href="https://lemonade.changedetection.io/start?ref={{guid}}">Let us host your instance!</a>`
			`</div>`
			`{% endif %}`
			`{% if left_sticky %}`
			`<div class="sticky-tab" id="left-sticky">`
			`<a href="{{url_for('preview_page', uuid=uuid)}}">Show current snapshot</a>`
			`</div>`
			`{% endif %}`
			`{% if right_sticky %}`
			`<div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div>`
			`{% endif %}`
			`<section class="content">`
			`<header>`
Initial commit 4 years ago			`{% block header %}{% endblock %}`
UI - Dark Mode (#1187) 2 years ago			`</header>`
WIP 4 years ago
UI - Dark Mode (#1187) 2 years ago			`{% with messages = get_flashed_messages(with_categories = true) %}`
			`{% if`
			`messages %}`
			`<ul class="messages">`
			`{% for category, message in messages %}`
			`<li class="{{ category }}">{{ message }}</li>`
			`{% endfor %}`
Use flasks' built in 'flash' method instead of a custom message/notices (#94) * Use flasks' built in 'flash' method instead of a custom message/notice handler * Move app.secret_key setup to inside app 4 years ago			`</ul>`
			`{% endif %}`
UI - Dark Mode (#1187) 2 years ago			`{% endwith %}`
			`{% if session['share-link'] %}`
Ability to 'Share' a watch by a generated link, this will include all filters and triggers - see Wiki (#563) 3 years ago			`<ul class="messages with-share-link">`
UI - Dark Mode (#1187) 2 years ago			`<li class="message">`
			`Share this link:`
			`<span id="share-link">{{ session['share-link'] }}</span>`
UI - Various minor HTML validation fixes 2 years ago			`<img style="height: 1em; display: inline-block" src="{{url_for('static_content', group='images', filename='copy.svg')}}" >`
UI - Dark Mode (#1187) 2 years ago			`</li>`
Ability to 'Share' a watch by a generated link, this will include all filters and triggers - see Wiki (#563) 3 years ago			`</ul>`
UI - Dark Mode (#1187) 2 years ago			`{% endif %}`
			`{% block content %}{% endblock %}`
			`</section>`
			`<script`
			`type="text/javascript"`
			`src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}"`
			`defer></script>`
			`</body>`
Issue #12 include version for easy reference. 4 years ago
Initial commit 4 years ago			`</html>`