Update article tile button styles in index.html to improve responsiveness and visual consistency

Made-with: Cursor

README.md

@@ -66,6 +66,16 @@ touch kasse.db
 docker run -p 9090:90 -v $(pwd)/kasse.db:/app/kasse.db -t erdbeerhannah:latest
 ```
 
+### Nginx Reverse-Proxy
+
+Bei 502 Bad Gateway hinter nginx:
+
+1. **Proxy-Header**: Nginx muss `X-Forwarded-For`, `X-Forwarded-Proto`, `Host` setzen (die App nutzt `ProxyFix`).
+2. **Upstream-Erreichbarkeit**: `proxy_pass` muss den Container erreichen:
+   - nginx auf gleichem Host wie Docker: `http://127.0.0.1:9090`
+   - nginx auf anderem Host: `http://<Docker-Host-IP>:9090`
+3. **Beispielkonfiguration**: Siehe `nginx-proxy.example.conf`
+
 ## Privatsphäre
 
 Die App *erdbeerhannah* protokolliert keine personenbezogenen Daten. Keine IP-Adressen und keine persönlichen Benutzer-Eingaben. Es werden keine Cookies genutzt. Zur reinen Nutzungsstatistik (Seitenaufrufe) verwenden wir das datenschutzfreundliche, Cookie-lose [Plausible Analytics](https://plausible.io/). Es gibt keine Werbung.

app.py

@@ -5,10 +5,12 @@ import logging
 import sqlite3
 import uuid
 from werkzeug.security import generate_password_hash, check_password_hash
+from werkzeug.middleware.proxy_fix import ProxyFix
 from flask import Flask, render_template, request, session, send_from_directory, g, redirect, url_for
 from flask_bootstrap import Bootstrap
 
 app = Flask(__name__)
+app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1)
 app.config['SECRET_KEY'] = 'j69ol5mcHLsEtLg4Y/+myd9wWD4pp56E'
 
 # setup logging
@@ -22,7 +24,7 @@ app.logger.addHandler(handler)
 
 Bootstrap(app)
 
-version = "1.1.0/2026-02-24"
+version = "1.1.1/2026-03-22"
 
 def get_db_connection():
     conn = sqlite3.connect('kasse.db')

docker-compose.yml

@@ -0,0 +1,10 @@
+# Vor dem ersten Start: touch kasse.db (bzw. echo. > kasse.db unter Windows)
+# damit Docker keine Verzeichnis-Datei erstellt
+services:
+  erdbeerkasse:
+    build: .
+    container_name: erdbeerkasse
+    ports:
+      - "9090:90"
+    volumes:
+      - ./kasse.db:/app/kasse.db

nginx-proxy.example.conf

@@ -0,0 +1,29 @@
+# Beispiel nginx Reverse-Proxy Konfiguration für erdbeerhannah
+# Pfad anpassen, z.B. /etc/nginx/sites-available/erdbeerhannah
+#
+# Upstream-URL je nach Deployment:
+# - nginx auf gleichem Host wie Docker: http://127.0.0.1:9090
+# - nginx auf anderem Host: http://10.7.0.5:9090 (Docker-Host-IP)
+# - Beide im gleichen docker-compose: http://erdbeerkasse:90
+
+server {
+    listen 443 ssl http2;
+    server_name erdbeerhannah.elpatron.me;
+
+    # SSL-Zertifikate
+    ssl_certificate /pfad/zu/cert.pem;
+    ssl_certificate_key /pfad/zu/key.pem;
+
+    location / {
+        proxy_pass http://127.0.0.1:9090;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_read_timeout 60s;
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+    }
+}

templates/index.html

@@ -60,6 +60,16 @@
             white-space: normal;
             font-size: clamp(0.9rem, 4vw, 1.5rem);
             padding: 0.5rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .article-tile .btn .article-icon {
+            font-size: min(12vw, 11vh);
+            line-height: 1.1;
+            margin-bottom: 0.25rem;
         }
 
         .kasse-sum-row {
@@ -127,9 +137,9 @@
             <div class="article-tile">
                 <button type="submit" name="position" value="{{ pos }}" title="{{ prod['name'] }}"
                     class="btn {{ prod['color_class'] }}">
-                    {{ prod['icon'] }}<br>
-                    {{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€<br>
-                    ({{ items.get(pos, 0) }})
+                    <span class="article-icon">{{ prod['icon'] }}</span>
+                    <span>{{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€</span>
+                    <span>({{ items.get(pos, 0) }})</span>
                 </button>
             </div>
             {% endfor %}