Aktualisierung der Instagram-Nutzung

Author: fsteinkress

.gitignore

@@ -23,8 +23,14 @@ Thumbs.db
 *.pyc
 *.json
 
+# Puppeteer
+node_modules/
+package-lock.json
+package.json
+
 # Sonstige Dateien
 doc/*
 docs/*
 insta-visuals/screenshots/*
-node_modules/
+node_modules/
+*.txt

README.md

@@ -1,10 +1,6 @@
 # Entwurfsmuster-Baukasten
 
-![UML](https://img.shields.io/badge/UML-Diagrams-7D4698?logo=uml&logoColor=white)
-![PlantUML](https://img.shields.io/badge/PlantUML-Supported-brightgreen?logo=plantuml&logoColor=white)
-![draw.io](https://img.shields.io/badge/draw.io-Diagrams-orange?logo=diagramsdotnet&logoColor=white)
-![VS Code](https://img.shields.io/badge/Editor-VS%20Code-007ACC?logo=visualstudiocode&logoColor=white)
-![License](https://img.shields.io/badge/license-MIT-green)
+![UML](https://img.shields.io/badge/UML-Diagrams-7D4698?logo=uml&logoColor=white) ![PlantUML](https://img.shields.io/badge/PlantUML-Supported-brightgreen?logo=plantuml&logoColor=white) ![draw.io](https://img.shields.io/badge/draw.io-Diagrams-orange?logo=diagramsdotnet&logoColor=white) ![VS Code](https://img.shields.io/badge/Editor-VS%20Code-007ACC?logo=visualstudiocode&logoColor=white) ![License](https://img.shields.io/badge/license-MIT-green)
 
 Dieser Entwurfsmuster-Baukasten enthält alle 23 Entwurfsmuster aus den "Design Patterns" von Gamma et al. (GoF). Jedes Muster ist in einer strukturierten Ordnerhierarchie organisiert und enthält Klassendiagramme in PlantUML- und Draw.io-Formaten.
 

generate-insta-screenshots.js

@@ -111,7 +111,7 @@ const fontColors = [
         await new Promise(resolve => setTimeout(resolve, 300));
 
         const filename = `img${i + 1}-${imageName}`;
-        const filepath = path.join(outputDir, `${filename}.png`);
+        const filepath = path.join(outputDir, `${filename}`);
         await page.screenshot({ path: filepath, omitBackground: false });
         console.log("Screenshot gespeichert:", filename);
     }

html-visuals/index.html

@@ -65,9 +65,9 @@ <h1>Entwurfsmuster</h1>
 
         let imageIndex = 0;
         const img = document.querySelector(".overlay-box img");
-        const button = document.getElementById("closeBtn");
         const titl = document.getElementById("title");
         const desc = document.getElementById("description");
+        const button = document.getElementById("closeBtn");
         const overlayBox = document.getElementById("overlayBox");
         const lBtn = document.getElementById("leftBtn");
         const rBtn = document.getElementById("rightBtn");

insta-visuals/index.html

@@ -21,6 +21,7 @@
         <img src="./assets/proxy.png" alt="Screenshots des Entwurfsmuster">
         <button id="closeBtn">Bild 1 von 23</button>
     </div>
+    <!--<div class="safe-area-frame"></div>-->
 
     <script>
         const images = [

insta-visuals/styles.css

@@ -10,7 +10,7 @@ html, body {
 }
 
 .overlay-box {
-    position: absolute;
+    position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -19,9 +19,8 @@ html, body {
     width: 56.25vh; /* 16:9 Breite zu 100% Höhe */
     max-height: 100vh;
     background-color: rgba(255, 255, 255, 0.5);
-    border-radius: 15px;
     border: 2px solid white;
-    padding: 2vh;
+    padding: 5.0vh 5.0vh;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
@@ -39,29 +38,25 @@ html, body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 1.5%;
-    width: 100%;
-    overflow: auto;
 }
 
 .overlay-box header,
 .overlay-box footer {
     font-size: 2.2vh;
     font-weight: bold;
-    padding: 1vh 0;
 }
 
 .text {
-    margin-top: 60px;
+    margin-top: 9.0vh;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .text .line1 {
+    margin-bottom: 1.5vh;
     font-size: 2.4vh;
     font-weight: bold;
-    margin-bottom: 15px;
 }
 
 .text .line2 {
@@ -71,28 +66,26 @@ html, body {
 .overlay-box img {
     width: 100%; /* Bild füllt die Breite der overlay-box */
     height: auto;
-    max-width: 100%;
-    max-height: 100%;
     object-fit: contain;
 }
 
 button {
     padding: 6px 12px;
-    border-radius: 8px;
     border: none;
+    border-radius: 8px;
     background: rgba(200, 50, 50, 0.8);
     color: white;
     font-weight: bold;
     cursor: pointer;
 }
 
 #closeBtn {
-    margin-bottom: 90px;
-    background-color: white;
-    color: #333;
+    margin-bottom: 10.0vh;
+    padding: 1vh 2vh;
     border: none;
     border-radius: 8px;
-    padding: 1vh 2vh;
+    background-color: white;
+    color: #333;
     font-size: 1.8vh;
     cursor: default;
 }
@@ -126,7 +119,7 @@ button {
     align-items: center;
     justify-content: center;
     transform: translate(-50%, -50%);
-    box-shadow: 0 0 8px rgba(0,0,0,0.4);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
     transition: transform 0.2s ease, background 0.3s ease;
     outline: 1px solid lime;
 }
@@ -135,3 +128,14 @@ button {
 .arrow.right { right: -3.0rem; margin-right: -3.5rem; top: 50%; transform: translateY(-50%) scale(1); }
 .arrow:hover { transform: translateY(-50%) scale(1.2); }
 
+.safe-area-frame {
+    position: absolute;
+    top: 250px;
+    left: 90px;
+    width: 900px;   /* 1080 - 2×90px */
+    height: 1420px; /* 1920 - 2×250px */
+    border: 2px dashed red;
+    pointer-events: none;
+    box-sizing: border-box;
+    z-index: 9999;  /* Sicher ganz oben */
+}