first commit

2026-05-13 22:41:42 +02:00
commit cef8539e00
22 changed files with 937 additions and 0 deletions
--- a/templates/catalog.html.j2
+++ b/templates/catalog.html.j2
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="cs">
+<head>
+<meta charset="utf-8">
+<style>
+@page {
+  size: 1024px 768px;
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "DejaVu Sans", Arial, sans-serif;
+  color: #333;
+}
+
+.page {
+  width: 1024px;
+  height: 768px;
+  position: relative;
+  padding: 68px 68px 64px 68px;
+  page-break-after: always;
+  background-image:
+    linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)),
+    url("file://{{ assets_dir }}/background.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.page::before,
+.page::after {
+  content: "";
+  position: absolute;
+  left: 66px;
+  right: 66px;
+  height: 1px;
+  background: rgba(45,45,45,.65);
+}
+
+.page::before { top: 67px; }
+.page::after { bottom: 68px; }
+
+.cover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-direction: column;
+}
+
+.cover-title {
+  font-size: 42px;
+  font-weight: 300;
+  margin-top: 140px;
+  letter-spacing: -1px;
+}
+
+.cover-subtitle {
+  font-size: 23px;
+  letter-spacing: 9px;
+  margin-top: 4px;
+}
+
+.cover-logo {
+  margin-top: 130px;
+  width: 190px;
+  opacity: .82;
+}
+
+.category-title {
+  font-size: 26px;
+  font-weight: 400;
+  text-decoration: underline;
+  margin: 28px 0 50px 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: 31px;
+  row-gap: 38px;
+}
+
+.product {
+  width: 205px;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+.product-image {
+  width: 205px;
+  height: 169px;
+  object-fit: cover;
+  border-radius: 18px;
+  display: block;
+}
+
+.product-name-row {
+  margin-top: 9px;
+  border-top: 1px solid rgba(50,50,50,.7);
+  border-bottom: 1px solid rgba(50,50,50,.7);
+  min-height: 31px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.product-name {
+  font-size: 13px;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  line-height: 1.25;
+  padding-right: 6px;
+}
+
+.allergen {
+  width: 23px;
+  height: 23px;
+  object-fit: contain;
+  flex: 0 0 auto;
+  opacity: .85;
+}
+
+.price {
+  text-align: center;
+  font-size: 16px;
+  letter-spacing: 4px;
+  margin-top: 7px;
+}
+
+.placeholder {
+  width: 205px;
+  height: 169px;
+  border-radius: 18px;
+  background: rgba(230,230,230,.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+}
+</style>
+</head>
+
+<body>
+
+<section class="page cover">
+  <div class="cover-title">{{ catalog.title }}</div>
+  <div class="cover-subtitle">{{ catalog.subtitle|upper }}</div>
+
+  {% if logo_exists %}
+  <img class="cover-logo" src="file://{{ assets_dir }}/logo.png">
+  {% endif %}
+</section>
+
+{% for category in catalog.categories %}
+<section class="page">
+  <h1 class="category-title">{{ category.name }}</h1>
+
+  <div class="grid">
+    {% for product in category.products %}
+    <div class="product">
+      {% if product.image %}
+      <img class="product-image" src="file://{{ images_dir }}/{{ product.image }}">
+      {% else %}
+      <div class="placeholder">bez fotky</div>
+      {% endif %}
+
+      <div class="product-name-row">
+        <div class="product-name">{{ product.name }}</div>
+        {% if product.show_allergen_icon %}
+        <img class="allergen" src="file://{{ assets_dir }}/allergen.png">
+        {% endif %}
+      </div>
+
+      <div class="price">{{ product.price }}</div>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endfor %}
+
+</body>
+</html>