Initial commit - Complete POC

Serves a random image
Allows you to guess
Shows the correct location & distance
Allows you to click next

1 files changed, 142 insertions, 0 deletions

diff --git a/src/static/main.css b/src/static/main.css
new file mode 100644
index 0000000..dece357
--- /dev/null
+++ b/src/static/main.css
@@ -0,0 +1,142 @@
+html, body {
+	margin: 0;
+	height: 100%;
+	overflow:hidden;
+	font-family: "RobotoMono-Regular", monospace;
+	color: white;
+}
+
+/*
+ * Dynamic sizes
+ * https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space#answer-24979148
+*/
+
+.box {
+  display: flex;
+  flex-flow: column;
+	height: 100%;
+	overflow:hidden;
+}
+
+.box .row {
+  border: 1px dotted grey;
+}
+
+.box .row.header {
+  flex: 0 1 auto;
+  /* The above is shorthand for:
+  flex-grow: 0,
+  flex-shrink: 1,
+  flex-basis: auto
+  */
+}
+
+.box .row.content {
+  flex: 1 1 auto;
+}
+
+/* */
+
+.box {
+	margin: 0.5em;
+	text-align: center;
+	/* Center image in image container */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+}
+
+#main-image, #image-container, #map {
+	border-radius: 0.4em;
+}
+
+#main-image {
+	position: relative;
+	max-height: 55vh;
+	max-width: 100%;
+}
+
+#image-container {
+	overflow: clip;
+	width: 100%;
+	border: none;
+}
+
+h1 {
+	margin-top: 0;
+	margin-bottom: 0.25em;
+}
+
+#map {
+	width: 100%;
+	height: 100%;
+	margin-top: 0.5em;
+	margin-bottom: 1.25em;
+}
+
+/* Image zoom animation */
+@keyframes image-zoom-animation {
+	0% {
+		scale: 800%;
+	}
+	100% {
+		scale: 100%;
+	}
+}
+
+.image-zoom-animation {
+	/*animation: image-zoom-animation 10s ease-out;*/
+}
+
+/* Background image */
+#background-image {
+	background-image: url("/static/pics/mine/Lithaunsplads - Saxogade.webp");
+	position: absolute;
+	background-position: center;
+	filter: blur(2vh); /* vh because it's zoom agnostic */ 
+	background-size: cover;
+	/* Make it slightly bigger, so there's no white at the edges */
+	height: 110%;
+	width: 110%;
+	left: -5%;
+	top: -5%;
+	z-index: -10;
+}
+
+/* Overlay */
+#overlay{
+	text-align: center;
+	position: absolute;
+	bottom: 1em;
+
+	z-index: 500;
+	/* center */
+  left: 0; 
+  right: 0; 
+  margin-inline: auto; 
+  width: fit-content;
+}
+
+#overlay-distance > h4 {
+	margin: 0;
+}
+
+#overlay-distance {
+	background: #0008;
+	pointer-events: none;
+	user-select: none;
+	border-radius: 0.5em;
+	padding: 0.5em;
+}
+
+.bottom-button {
+	margin-top: 0.5em;
+	padding: 0.5em;
+	background: #1589c1;
+	border: none;
+	font-size: 1.3em;
+	/* border-color: #d0d0d0; */
+	color: white;
+	border-radius: 0.5em;
+}