summaryrefslogtreecommitdiff
path: root/example/static
diff options
context:
space:
mode:
Diffstat (limited to 'example/static')
-rw-r--r--example/static/img/placeholder_img.svg86
-rw-r--r--example/static/img/placeholder_video.svg1
-rw-r--r--example/static/js/media.js128
-rw-r--r--example/static/style/base.css34
-rw-r--r--example/static/style/viewer.css37
5 files changed, 286 insertions, 0 deletions
diff --git a/example/static/img/placeholder_img.svg b/example/static/img/placeholder_img.svg
new file mode 100644
index 0000000..779d14f
--- /dev/null
+++ b/example/static/img/placeholder_img.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="180.11873mm"
+ height="139.79364mm"
+ viewBox="0 0 180.11873 139.79364"
+ version="1.1"
+ id="svg8"
+ sodipodi:docname="placeHolder.svg"
+ inkscape:version="0.92.3 (2405546, 2018-03-11)">
+ <defs
+ id="defs2" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="0.35"
+ inkscape:cx="341.4432"
+ inkscape:cy="293.39894"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:window-width="1299"
+ inkscape:window-height="713"
+ inkscape:window-x="67"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-13.590944,-66.638611)">
+ <rect
+ style="opacity:1;fill:#d0d0d0;fill-opacity:1;stroke:none;stroke-width:2.96123242;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+ id="rect826"
+ width="180.11873"
+ height="139.79364"
+ x="13.590944"
+ y="66.638611" />
+ <path
+ style="opacity:0.675;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.98038435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+ d="M 118.5069,133.51362 84.257994,167.76253 68.290072,151.79461 26.352445,193.73223 h 31.935843 51.939412 68.49781 z"
+ id="rect832"
+ inkscape:connector-curvature="0" />
+ <circle
+ style="opacity:0.675;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.99717033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+ id="path860"
+ cx="58.21706"
+ cy="108.55542"
+ r="11.772726" />
+ <rect
+ style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:2.96123242;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+ id="rect862"
+ width="152.61417"
+ height="116.09874"
+ x="26.111267"
+ y="77.633698" />
+ </g>
+</svg>
diff --git a/example/static/img/placeholder_video.svg b/example/static/img/placeholder_video.svg
new file mode 100644
index 0000000..e4a337b
--- /dev/null
+++ b/example/static/img/placeholder_video.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="translate(-71.09-24.1)"><path d="m36.01 406.82h334.82c14.258 0 25.922-11.656 25.922-25.906v-355.01c0-14.217-11.673-25.906-25.922-25.906h-334.82c-14.29 0-25.939 11.689-25.939 25.906v355.01c0 14.25 11.649 25.906 25.939 25.906m297.5-375.13c0-4.3 3.52-7.771 7.779-7.771h24.304c4.292 0 7.763 3.471 7.763 7.771v25.03c0 4.3-3.471 7.771-7.763 7.771h-24.304c-4.259 0-7.779-3.463-7.779-7.771v-25.03m0 63.67c0-4.3 3.52-7.779 7.779-7.779h24.304c4.292 0 7.763 3.479 7.763 7.779v25.03c0 4.292-3.471 7.795-7.763 7.795h-24.304c-4.259 0-7.779-3.503-7.779-7.795v-25.03m0 63.72c0-4.292 3.52-7.795 7.779-7.795h24.304c4.292 0 7.763 3.503 7.763 7.795v25.04c0 4.259-3.471 7.763-7.763 7.763h-24.304c-4.259 0-7.779-3.503-7.779-7.763v-25.04m0 63.67c0-4.3 3.52-7.795 7.779-7.795h24.304c4.292 0 7.763 3.495 7.763 7.795v25.04c0 4.292-3.471 7.771-7.763 7.771h-24.304c-4.259 0-7.779-3.479-7.779-7.771v-25.04m0 63.67c0-4.3 3.52-7.771 7.779-7.771h24.304c4.292 0 7.763 3.463 7.763 7.771v25.05c0 4.276-3.471 7.755-7.763 7.755h-24.304c-4.259 0-7.779-3.479-7.779-7.755v-25.05m0 63.67c0-4.276 3.52-7.771 7.779-7.771h24.304c4.292 0 7.763 3.495 7.763 7.771v25.08c0 4.243-3.471 7.755-7.763 7.755h-24.304c-4.259 0-7.779-3.503-7.779-7.755v-25.08m-233.53-299.62c0-4.3 3.503-7.771 7.795-7.771h191.3c4.268 0 7.763 3.471 7.763 7.771v123.94c0 4.259-3.495 7.795-7.763 7.795h-191.3c-4.292 0-7.795-3.536-7.795-7.795-.0001 0-.0001-123.94-.0001-123.94m0 191.12c0-4.268 3.503-7.747 7.795-7.747h191.3c4.268 0 7.763 3.479 7.763 7.747v114.57c0 4.276-3.495 7.771-7.763 7.771h-191.3c-4.292 0-7.795-3.495-7.795-7.771-.0001 0-.0001-114.57-.0001-114.57m-66.52-209.91c0-4.3 3.495-7.771 7.779-7.771h24.313c4.268 0 7.755 3.471 7.755 7.771v25.03c0 4.3-3.487 7.771-7.755 7.771h-24.313c-4.284 0-7.779-3.463-7.779-7.771 0 0 0-25.03 0-25.03m0 63.67c0-4.3 3.495-7.779 7.779-7.779h24.313c4.268 0 7.755 3.479 7.755 7.779v25.03c0 4.292-3.487 7.795-7.755 7.795h-24.313c-4.284 0-7.779-3.503-7.779-7.795 0 0 0-25.03 0-25.03m0 63.72c0-4.292 3.495-7.795 7.779-7.795h24.313c4.268 0 7.755 3.503 7.755 7.795v25.04c0 4.259-3.487 7.763-7.755 7.763h-24.313c-4.284 0-7.779-3.503-7.779-7.763 0 0 0-25.04 0-25.04m0 63.67c0-4.3 3.495-7.795 7.779-7.795h24.313c4.268 0 7.755 3.495 7.755 7.795v25.04c0 4.292-3.487 7.771-7.755 7.771h-24.313c-4.284 0-7.779-3.479-7.779-7.771 0 0 0-25.04 0-25.04m0 63.67c0-4.3 3.495-7.771 7.779-7.771h24.313c4.268 0 7.755 3.463 7.755 7.771v25.05c0 4.276-3.487 7.755-7.755 7.755h-24.313c-4.284 0-7.779-3.479-7.779-7.755 0 0 0-25.05 0-25.05m0 63.67c0-4.276 3.495-7.771 7.779-7.771h24.313c4.268 0 7.755 3.495 7.755 7.771v25.08c0 4.243-3.487 7.755-7.755 7.755h-24.313c-4.284 0-7.779-3.503-7.779-7.755 0-.0001 0-25.08 0-25.08" transform="matrix(.0295 0 0 .0295 73.09 26.1)" fill="#4d4d4d" stroke="none" stroke-opacity=".8"/></g></svg> \ No newline at end of file
diff --git a/example/static/js/media.js b/example/static/js/media.js
new file mode 100644
index 0000000..e7ae59d
--- /dev/null
+++ b/example/static/js/media.js
@@ -0,0 +1,128 @@
+"use strict";
+
+class Media {
+ constructor(type, src, width, height, location, date) {
+ this.type = type;
+ this.src = src;
+ this.width = width;
+ this.height = height;
+ this.location = location;
+ this.date = date;
+ }
+}
+
+class Image extends Media {
+ constructor(src, width, height, location, date, transform) {
+ super('image', src, width, height, location, date);
+ this.transform = transform;
+ }
+}
+
+class Video extends Media {
+ constructor(src, width, height, location, date, length) {
+ super('video', src, width, height, location, date);
+ this.length = length;
+ }
+}
+
+var media = [];
+
+function show_location(lat, lng) {
+ window.open("https://google.com/maps?q=" + lat + "," + lng);
+
+ // Avoid default action
+ return false;
+}
+
+function show_media(index, push_state) {
+ let m = media[index];
+
+ if (push_state) {
+ window.history.pushState(
+ {'index': index}, document.title, '?media=' + index);
+ }
+
+ let previous = index > 0 ? index - 1 : media.length - 1;
+ let next = index + 1;
+ if (next == media.length)
+ next = 0;
+
+ document.getElementById('number').innerText =
+ (1 + index) + '/' + (1 + media.length);
+ let img = document.querySelector('img.content');
+ let video = document.querySelector('video.content');
+ if (m.type == 'image') {
+ video.style.display = 'none';
+ img.onload = function() { img.style.transform = m.transform; };
+ img.src = m.src;
+ img.style.display = 'inline';
+ } else {
+ img.style.display = 'none';
+ video.src = m.src;
+ video.style.display = 'inline';
+ }
+
+ let location = document.getElementById('location');
+ if (m.location.length == 0) {
+ location.style.display = 'none';
+ } else {
+ location.style.display = 'inline';
+ location.onclick = function(event) {
+ return show_location(m.location[0], m.location[1]);
+ };
+ }
+
+ document.getElementById('previous').onclick =
+ function(event) { return show_media(previous, true); };
+ document.getElementById('next').onclick =
+ function(event) { return show_media(next, true); };
+ document.getElementById('download').href = m.src;
+
+ // Avoid default action
+ return false;
+}
+
+function show_from_query_string() {
+ let params = new URLSearchParams(window.location.search);
+ let index = parseInt(params.get("media"), 10);
+ if (isNaN(index))
+ index = 0;
+ show_media(index, false);
+}
+
+window.onpopstate = function(event) {
+ if (event.state) {
+ show_media(event.state.index, false);
+ } else {
+ show_from_query_string();
+ }
+};
+
+document.addEventListener('DOMContentLoaded', (event) => {
+ show_from_query_string();
+
+ document.getElementById('close').onclick =
+ function(event) {
+ let slash = window.location.pathname.lastIndexOf('/')
+ let new_path = window.location.pathname.substring(0, slash);
+ window.location.assign(window.location.protocol + "//" +
+ window.location.host + new_path);
+ return false;
+ };
+});
+
+document.addEventListener('keydown', (event) => {
+ if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey ||
+ event.isComposing) {
+ return;
+ }
+ if (event.key == 'ArrowLeft') {
+ document.getElementById('previous').onclick();
+ } else if (event.key == 'ArrowRight') {
+ document.getElementById('next').onclick();
+ } else if (event.key == 'Escape') {
+ document.getElementById('close').onclick();
+ } else if (event.key == 'D') {
+ document.getElementById('download').onclick();
+ }
+});
diff --git a/example/static/style/base.css b/example/static/style/base.css
new file mode 100644
index 0000000..d77b27b
--- /dev/null
+++ b/example/static/style/base.css
@@ -0,0 +1,34 @@
+body {
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+.trips {
+ margin: auto;
+}
+
+.trip a {
+ font-size: 150%;
+}
+
+a.maps {
+ font-size: 90%;
+}
+
+.subtitle {
+ text-color: lightgrey;
+ font-size: 90%;
+}
+
+img.thumbnail {
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+img.image {
+ background-image: url('../img/placeholder_img.svg');
+}
+
+img.video {
+ background-image: url('../img/placeholder_video.svg');
+}
diff --git a/example/static/style/viewer.css b/example/static/style/viewer.css
new file mode 100644
index 0000000..5881f84
--- /dev/null
+++ b/example/static/style/viewer.css
@@ -0,0 +1,37 @@
+body {
+ background-color: black;
+ color: lightgrey;
+ margin: 0;
+}
+
+#header {
+ height: 3em;
+}
+
+#header a {
+ color: lightgrey;
+ height: 2.5em;
+ font-weight: bold;
+ text-decoration: none;
+ cursor: pointer;
+ margin: 0 0.5em;
+}
+
+#header li {
+ margin: 0 1em;
+}
+
+#header ul {
+ height: 100%;
+ list-style: none;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0;
+}
+
+.content {
+ object-fit: scale-down;
+ width: 100%;
+ height: calc(100vh - 3em);
+}
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2025-12-07 08:07:47 +0000