photoprism/assets/templates/app.tmpl
Michael Mayer d46a01b602 UX: Update navigation and splash screen styles
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
2022-05-26 15:04:45 +02:00

42 lines
5 KiB
Cheetah

<div id="photoprism" class="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. &ndash; Mary Ellen Mark</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. &ndash; Bruno Barbey</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-logo elevation-3">
{{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 class="loading-dots">
<span class="dots-animation dot one">.</span><span class="dots-animation dot two">.</span><span class="dots-animation dot three">.</span>
</div>
</div>
<div id="busy-overlay"></div>