Add /preview pages

www/res/preview.js

@@ -0,0 +1,98 @@
+"use strict";
+
+function getMembersRow(x, y, w=1236) {
+    const r = 1236 / w;
+    x *= r;
+    y *= r;
+    if (x <= 12 || x > 346) return -1;
+    const row = Math.floor((y - 113) / 20.5);
+    return (row >= 0 && row < 5) ? row : -1;
+}
+
+function getDeliveriesRow(x, y, w=1136) {
+    const r = 1136 / w;
+    x *= r;
+    y *= r;
+    if (x <= 12 || x > 395) return -1;
+    const row = Math.floor((y - 120) / 20.5);
+    return (row >= 0 && row < 2) ? row : -1;
+}
+
+function getDeliveryPartsRow(x, y, w=1136) {
+    const r = 1136 / w;
+    x *= r;
+    y *= r;
+    if (x <= 424 || x > 753) return [-1, -1];
+    const win = document.getElementsByClassName("window")[1];
+    const idx = Array.prototype.indexOf.call(win.children, win.getElementsByClassName("selected")[0]);
+    const len = {1: 2, 2: 2, 3: 3, 4: 3, 5: 3}[idx] ?? 0;
+    const row = Math.floor((y - 319) / 20);
+    return [{0: 0, 1: 1, 2: 1, 3: 2, 4: 2, 5: 2}[idx], len === 0 ? -1 : (row >= 0 && row < len) ? row : -1];
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const windows = document.getElementsByClassName("window");
+
+    const w1 = windows[0];
+    const canvas1 = w1.getElementsByTagName("canvas")[0];
+    const ctx1 = canvas1.getContext("2d");
+    w1.addEventListener("mousemove", (evt) => {
+        ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+        const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        if (row === -1) return;
+        ctx1.fillStyle = "#0078d740";
+        ctx1.fillRect(12, 113 + 20.5 * row, 334, 20.5);
+    });
+    w1.addEventListener("click", (evt) => {
+        const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        for (const img of w1.getElementsByTagName("img")) img.classList.remove("selected");
+        w1.getElementsByTagName("img")[row + 1].classList.add("selected");
+    });
+
+    const w2 = windows[1];
+    const canvas2 = w2.getElementsByTagName("canvas")[0];
+    const ctx2 = canvas2.getContext("2d");
+    w2.addEventListener("mousemove", (evt) => {
+        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+        const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth)[1];
+        if (row !== -1) {
+            ctx2.fillStyle = "#0078d740";
+            ctx2.fillRect(12, 120 + 20.5 * row, 383, 20.5);
+        } else if (partRow !== -1) {
+            ctx2.fillStyle = "#0078d740";
+            ctx2.fillRect(424, 319 + 20 * partRow, 329, 20);
+        }
+    });
+    w2.addEventListener("click", (evt) => {
+        const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        if (row !== -1 || partRow[1] !== -1) {
+            const idx = row !== -1 ? row * 2 + 1 : (partRow[0] - 1) * 2 + partRow[1] + 1;
+            for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
+            w2.getElementsByTagName("img")[idx].classList.add("selected");
+        } else {
+            for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
+            w2.getElementsByTagName("img")[0].classList.add("selected");
+        }
+    });
+});
+
+document.addEventListener("keydown", (evt) => {
+    const act = document.activeElement;
+    if (!act.classList.contains("window")) return;
+    let el = null;
+    if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
+        el = act.getElementsByClassName("selected")[0].previousElementSibling;
+        evt.stopImmediatePropagation();
+        evt.preventDefault();
+    } else if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
+        el = act.getElementsByClassName("selected")[0].nextElementSibling;
+        evt.stopImmediatePropagation();
+        evt.preventDefault();
+    }
+    if (el && el.tagName === "IMG") {
+        for (const img of act.getElementsByTagName("img")) img.classList.remove("selected");
+        el.classList.add("selected");
+    }
+});

www/res/style.css

@@ -77,7 +77,7 @@ nav li a {
 }
 
 nav li a:hover,
-nav li.active a{
+nav li.active a {
     color: var(--main-color);
 }
 
@@ -92,15 +92,15 @@ nav a.flag div {
     margin: 0.75rem 1rem;
 }
 
-nav a.flag[href='/de/'] div::before,
-nav a.flag[href='/en/']:hover div::before,
-nav a.flag[href='/en/']:focus div::before {
+nav a.flag[href^='/de/'] div::before,
+nav a.flag[href^='/en/']:hover div::before,
+nav a.flag[href^='/en/']:focus div::before {
     content: '\1F1EC\1F1E7';  /* GB */
 }
 
-nav a.flag[href='/en/'] div::before,
-nav a.flag[href='/de/']:hover div::before,
-nav a.flag[href='/de/']:focus div::before {
+nav a.flag[href^='/en/'] div::before,
+nav a.flag[href^='/de/']:hover div::before,
+nav a.flag[href^='/de/']:focus div::before {
     content: '\1F1E6\1F1F9';  /* AT */
 }
 
@@ -416,7 +416,7 @@ table .unit {
     }
 }
 
-@media screen and (max-width: 650px) {
+@media screen and (max-width: 700px) {
     nav.index li:first-child {
         display: none;
     }
@@ -425,7 +425,7 @@ table .unit {
     }
 }
 
-@media screen and (max-width: 550px) {
+@media screen and (max-width: 600px) {
     nav.index li:nth-child(2) {
         display: none;
     }
@@ -435,7 +435,7 @@ table .unit {
 }
 
 @media screen and (max-width: 500px) {
-    nav.index li:nth-child(3) {
+    nav.index li:nth-child(4) {
         display: none;
     }
     .home {
@@ -448,3 +448,120 @@ table .unit {
         font-size: 0.5em;
     }
 }
+
+/**** Preview ****/
+
+main.preview {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin: 4em 0;
+    gap: 4em;
+}
+
+main.preview section {
+    background-color: #FFFFFF;
+    padding: 2em 4em;
+    border-radius: 0.5em;
+    box-shadow: 0 0 2em #00000060;
+    border: 1px solid #C0C0C0;
+}
+
+main.preview section h4:not(:first-child) {
+    margin-top: 2em;
+}
+
+main.preview a {
+    color: var(--main-color);
+    text-decoration: none;
+}
+
+main.preview a:hover,
+main.preview a:focus {
+    text-decoration: underline;
+}
+
+@media screen and (max-width: 800px) {
+    main.preview section {
+        padding: 2em 1em;
+    }
+}
+
+.window {
+    position: relative;
+    box-shadow: 0 0 2em #00000060;
+    display: flex;
+    font-size: 1rem;
+    border-radius: 0.5em;
+}
+
+.window img {
+    border-radius: 0.5em;
+}
+
+@media screen and (min-width: 2480px) {
+    .window:nth-of-type(1) {
+        font-size: 2rem;
+    }
+    .window:nth-of-type(1) * {
+        width: 2472px;
+        height: auto;
+    }
+}
+@media screen and (max-width: 1240px) {
+    .window:nth-of-type(1) {
+        font-size: 0.5rem;
+    }
+    .window:nth-of-type(1) * {
+        width: 618px;
+        height: auto;
+    }
+}
+@media screen and (max-width: 620px) {
+    .window:nth-of-type(1) {
+        font-size: 0.25rem;
+    }
+    .window:nth-of-type(1) * {
+        width: 309px;
+        height: auto;
+    }
+}
+
+@media screen and (min-width: 2280px) {
+    .window:nth-of-type(2), .window:nth-of-type(3) {
+        font-size: 2rem;
+    }
+    .window:nth-of-type(2) *, .window:nth-of-type(3) * {
+        width: 2272px;
+        height: auto;
+    }
+}
+@media screen and (max-width: 1140px) {
+    .window:nth-of-type(2), .window:nth-of-type(3) {
+        font-size: 0.5rem;
+    }
+    .window:nth-of-type(2) *, .window:nth-of-type(3) * {
+        width: 568px;
+        height: auto;
+    }
+}
+@media screen and (max-width: 570px) {
+    .window:nth-of-type(2), .window:nth-of-type(3) {
+        font-size: 0.25rem;
+    }
+    .window:nth-of-type(2) *, .window:nth-of-type(3) * {
+        width: 284px;
+        height: auto;
+    }
+}
+
+.window canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.window img:not(.selected) {
+    display: none;
+}