initial commit

Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx:alpine
+COPY index.html /usr/share/nginx/html/index.html
+EXPOSE 80

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  qr-blumen:
+    image: git.orfel.de/jannik/qr-blumen:latest
+    container_name: qr-blumen
+    restart: unless-stopped
+    ports:
+      - "127.0.0.1:3848:80"
+    networks:
+      - jannik-cloud-net
+
+networks:
+  jannik-cloud-net:
+    external: true

index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang='de'>
+<head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <title>Interaktiver Blumenstrauß</title>
+    <style>
+        body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            position: absolute;
+            top: 0; left: 0;
+            z-index: 1;
+        }
+        /* Overlays um die Bubbbly UI zu verstecken */
+        .overlay {
+            position: absolute;
+            background: #ffffff;
+            z-index: 10;
+        }
+        /* Top Left (TypingMind Logo) */
+        .overlay-top-left {
+            top: 0; left: 0; width: 300px; height: 100px;
+        }
+        /* Top Right (Input und Farbauswahl auf Desktop) */
+        .overlay-top-right {
+            top: 0; right: 0; width: 450px; height: 350px;
+        }
+        /* Bottom Left (Created by) */
+        .overlay-bottom-left {
+            bottom: 0; left: 0; width: 300px; height: 80px;
+        }
+        /* Bottom Center (Tap to bloom text) */
+        .overlay-bottom-center {
+            bottom: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 80px;
+        }
+        /* Bottom Right (Mobile Input - falls es unten ist) */
+        .overlay-bottom-right {
+            bottom: 0; right: 0; width: 450px; height: 120px;
+        }
+        /* On Mobile, the input box is at the bottom */
+        @media (max-width: 640px) {
+            .overlay-top-right { height: 10px; width: 10px; }
+            .overlay-bottom-right { width: 100%; height: 250px; }
+        }
+    </style>
+</head>
+<body>
+    <iframe src='https://www.bubbbly.com/bloom?u=https%3A%2F%2Fneleundtill.orfel.de'></iframe>
+    
+    <div class='overlay overlay-top-left'></div>
+    <div class='overlay overlay-top-right'></div>
+    <div class='overlay overlay-bottom-left'></div>
+    <div class='overlay overlay-bottom-center'></div>
+    <div class='overlay overlay-bottom-right'></div>
+</body>
+</html>