Import initial working prototype

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 %}