Import initial working prototype

2023-03-10 19:00:12 +01:00
commit 0af84a1ce8
7 changed files with 2224 additions and 0 deletions
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    {% block head %}
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <title>{{title}}</title>
+    {% endblock head %}
+</head>
+<body>
+    {% block main %}
+    {% endblock main %}
+</body>
+</html>
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,52 @@
+{% extends "base" %}
+
+{% block head %}
+    {{super()}}
+    <style>
+    body {
+        padding: 0.7rem;
+        margin: 0;
+    }
+    main {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        margin: 0;
+        gap: 0.7rem;
+    }
+    main > div {
+        position: relative;
+        pointer-events: none;
+        min-height: 150px;
+    }
+    @media (min-width:60rem) {
+        main > div {
+            min-height: 250px;
+        }
+    }
+    @media (min-width:100rem) {
+        main > div {
+            min-height: 350px;
+        }
+    }
+    main::after {
+        content: '';
+        flex-grow: 70;
+    }
+    main > div > img {
+        position: absolute;
+        top: 0;
+        height: 100%;
+    }
+    </style>
+{% endblock head %}
+
+{% block main %}
+    <main>
+    {% for image in images %}
+        <div style="aspect-ratio: {{image.width}} / {{image.height}}; flex-grow: {{10*image.width/image.height}};">
+        <img loading="lazy" src="/image/{{image.name}}" alt="YOU SHALL NOT SAVE THIS IMAGE!" />
+        </div>
+    {% endfor %}
+    </main>
+{% endblock main %}
--- a/templates/login.html
+++ b/templates/login.html
@ -0,0 +1,31 @@
+{% extends "base" %}
+
+{% block head %}
+    {{super()}}
+    <style>
+    html,
+    body {
+        height: 100%;
+        margin: 0;
+    }
+
+    form {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
+    input {
+        margin: 0 auto;
+        font-size: 1.5rem;
+        flex: 20rem 0 1;
+        min-width: 0;
+    }
+    </style>
+{% endblock head %}
+
+{% block main %}
+    <form method="post" action="/authenticate">
+        <input type="password" placeholder="Passwort eingeben…" name="password" autofocus="autofocus" />
+    </form>
+{% endblock main %}