photoprism/assets/templates/app.tmpl

<div id="photoprism" class="splash-screen container{{if .config.SiteCaption}} theme-{{ .config.Settings.UI.Theme }}{{end}}">
  <noscript>
    <div id="noscript-info" class="splash-info">
      <a href="https://enable-javascript.com/" target="_blank">Please enable JavaScript in your browser.</a>
    </div>
  </noscript>
  <div id="splash-info" class="has-js splash-info">
  {{if .config.Imprint}}
    {{if .config.ImprintUrl}}<a href="{{ .config.ImprintUrl }}" target="_blank" class="imprint">{{ .config.Imprint }}</a>
    {{else}}<span class="imprint">{{ .config.Imprint }}</span>{{end}}
  {{else}}
    <span class="quote-0">One picture is worth a thousand words.</span>
    <span class="quote-1">It's not the camera, but who's behind the camera.</span>
    <span class="quote-2">The pictures you want tomorrow, you have to take today.</span>
    <span class="quote-3">A camera captures light, our mind captures images.</span>
    <span class="quote-4">If you can shoot on the street you can shoot anything.</span>
    <span class="quote-5">When asked what equipment you use, say it's your eyes.</span>
    <span class="quote-6">Photography is the only language that can be understood anywhere in the world.</span>
  {{end}}
  </div>
  <script>
    const el = document.getElementById("splash-info");
    el.classList.add("day-" + new Date().getDay());
    el.style.setProperty("display", "block");
  </script>
  <div class="loading-animation">
    <div class="loading-circle"></div>
  </div>
  <div class="loading-logo">
    {{if eq .config.AppIcon "crisp"}}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264"><defs><linearGradient id="a" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.38 -6.38)"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#9afbfe"/><stop offset="1" stop-color="#ffb3e0"/></linearGradient></defs><circle cx="132" cy="132" r="132" style="fill:url(#a)"/><path d="m223.19 175.51-4 24.19M40.91 176.5l14.81 14m95.76-137.65L55.62 190.31a.09.09 0 0 0 .07.15l163.41 9.37a.09.09 0 0 0 .09-.13L151.62 52.87a.1.1 0 0 0-.14-.02zm-19.74-13.29L40.8 176.31a.13.13 0 0 0 .11.19l182.18-.8a.12.12 0 0 0 .1-.19L131.95 39.56a.12.12 0 0 0-.21 0zm.11-.16 19.77 13.32" style="fill:none;stroke:#1d1d1b;stroke-width:5px;stroke-miterlimit:10"/></svg>
    {{else if eq .config.AppIcon "mint"}}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264"><defs><linearGradient id="a" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.38 -6.38)"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#c2fde4"/><stop offset="1" stop-color="#cdc6e9"/></linearGradient></defs><circle cx="132" cy="132" r="132" style="fill:url(#a)"/><path d="m223.19 175.51-4 24.19M40.91 176.5l14.81 14m95.76-137.65L55.62 190.31a.09.09 0 0 0 .07.15l163.41 9.37a.09.09 0 0 0 .09-.13L151.62 52.87a.1.1 0 0 0-.14-.02zm-19.74-13.29L40.8 176.31a.13.13 0 0 0 .11.19l182.18-.8a.12.12 0 0 0 .1-.19L131.95 39.56a.12.12 0 0 0-.21 0zm.11-.16 19.77 13.32" style="fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px"/></svg>
    {{else if eq .config.AppIcon "bold"}}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264"><defs><linearGradient id="a" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.38 -6.38)"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#99e6ff"/><stop offset="1" stop-color="#c299ff"/></linearGradient></defs><circle cx="132" cy="132" r="132" style="fill:url(#a)"/><path data-name="Logo Pfad" d="m223.19 175.51-4 24.19M40.91 176.5l14.81 14m95.76-137.65L55.62 190.31a.09.09 0 0 0 .07.15l163.41 9.37a.09.09 0 0 0 .09-.13L151.62 52.87a.1.1 0 0 0-.14-.02zm-19.74-13.29L40.8 176.31a.13.13 0 0 0 .11.19l182.18-.8a.12.12 0 0 0 .1-.19L131.95 39.56a.12.12 0 0 0-.21 0zm.11-.16 19.77 13.32" style="fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:7px"/></svg>
    {{else}}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264"><defs><linearGradient id="a" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.38 -6.38)"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#b8edff"/><stop offset="1" stop-color="#d4b8ff"/></linearGradient></defs><circle cx="132" cy="132" r="132" style="fill:url(#a)"/><path data-name="Logo Pfad" d="m223.19 175.51-4 24.19M40.91 176.5l14.81 14m95.76-137.65L55.62 190.31a.09.09 0 0 0 .07.15l163.41 9.37a.09.09 0 0 0 .09-.13L151.62 52.87a.1.1 0 0 0-.14-.02zm-19.74-13.29L40.8 176.31a.13.13 0 0 0 .11.19l182.18-.8a.12.12 0 0 0 .1-.19L131.95 39.56a.12.12 0 0 0-.21 0zm.11-.16 19.77 13.32" style="fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:6px;shape-rendering:geometricPrecision"/></svg>
    {{end}}
  </div>
</div>

<div id="busy-overlay"></div>