From a05f5c638f552e4016e7e340b56de2077f082007 Mon Sep 17 00:00:00 2001
From: Akamaru <Akamaru92@live.de>
Date: Sun, 2 Mar 2025 21:19:17 +0100
Subject: [PATCH] Fixe Dogify

---
 dogify/index.html | 171 ++++++++++++++++++++++++++++++++--------------
 index.html        |   2 +-
 2 files changed, 119 insertions(+), 54 deletions(-)
diff --git a/dogify/index.html b/dogify/index.html
index c914f64..9bacc62 100644
--- a/dogify/index.html
+++ b/dogify/index.html
@@ -5,35 +5,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Doge Meme Generator</title>
     <script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="dogify"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     <style>
         body {
             font-family: Arial, sans-serif;
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center;
-            height: 100vh;
-            margin: 0;
             background-color: #f0f0f0;
+            padding: 20px;
         }
         #meme-container {
             position: relative;
             width: 640px;
             height: 480px;
             margin-bottom: 20px;
+            background-color: white;
         }
         #doge-image {
             width: 100%;
             height: 100%;
+            object-fit: cover;
         }
         .meme-text {
             position: absolute;
-            width: 100%;
             text-align: center;
             color: white;
-            font-size: 20px;
+            font-size: 24px;
             font-family: Comic Sans MS, cursive, sans-serif;
             text-shadow: 2px 2px 4px #000000;
+            pointer-events: none;
+            max-width: 80%;
+            white-space: nowrap;
+            padding: 5px;
         }
         input[type="text"] {
             width: 300px;
@@ -41,66 +45,127 @@
             margin: 5px;
             font-size: 16px;
         }
+        button {
+            padding: 10px 20px;
+            margin: 5px;
+            cursor: pointer;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+        }
+        .info-box {
+            background: #f8f9fa;
+            border: 2px dashed #4CAF50;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 20px 0;
+            max-width: 640px;
+            font-size: 14px;
+            color: #666;
+        }
+        
+        .info-box p {
+            margin: 8px 0;
+        }
     </style>
 </head>
 <body>
     <div id="meme-container">
         <img id="doge-image" src="doge.jpg" alt="Doge Meme">
-        <div id="random-text" class="meme-text"></div>
     </div>
-    <input type="text" id="text-input" placeholder="Text eingeben">
-    <button id="add-text-button">Text hinzufügen</button>
+    
+    <div class="info-box">
+        <p>🔹 Texte mit Komma trennen (z.B. "Hund, Katze, Maus")</p>
+        <p>🔹 Beim Hinzufügen werden automatisch Meme-Wörter ergänzt</p>
+        <p>🔹 Klicke "Meme speichern" zum Download</p>
+        <p>🔹 Textposition und Farbe werden zufällig generiert</p>
+    </div>
+
+    <input type="text" id="text-input" placeholder="Deine Texte hier...">
+    <div>
+        <button id="add-text-button">Text hinzufügen</button>
+        <button id="save-button">Meme speichern</button>
+    </div>
+
     <script>
-        const textInput = document.getElementById('text-input');
-        const addTextButton = document.getElementById('add-text-button');
-        const randomText = document.getElementById('random-text');
+        const memeWords = ["wow", "such meme", "chimken", "many fun"];
+        
+        function createTextElement(text) {
+            const memeContainer = document.getElementById('meme-container');
+            const textElement = document.createElement('div');
+            
+            textElement.className = 'meme-text';
+            textElement.textContent = text;
+            textElement.style.color = getRandomColor();
+            textElement.style.fontSize = `${Math.random() * 20 + 20}px`;
+            
+            const position = getRandomPosition(textElement);
+            textElement.style.top = `${position.top}px`;
+            textElement.style.left = `${position.left}px`;
+            
+            memeContainer.appendChild(textElement);
+        }
 
         function getRandomColor() {
-            const letters = '0123456789ABCDEF';
-            let color = '#';
-            for (let i = 0; i < 6; i++) {
-                color += letters[Math.floor(Math.random() * 16)];
-            }
-            return color;
-        }
-
-        function getRandomPosition() {
-            const memeContainer = document.getElementById('meme-container');
-            const textElement = document.getElementById('random-text');
-            const textWidth = textElement.offsetWidth;
-            const textHeight = textElement.offsetHeight;
-            const top = Math.floor(Math.random() * (memeContainer.offsetHeight - textHeight));
-            const left = Math.floor(Math.random() * (memeContainer.offsetWidth - textWidth));
-            return { top, left };
-        }
-
-        function updateTextPosition() {
-            const memeContainer = document.getElementById('meme-container');
-            const textElement = document.getElementById('random-text');
-            const textWidth = textElement.offsetWidth;
-            const textHeight = textElement.offsetHeight;
-            const top = Math.floor(Math.random() * (memeContainer.offsetHeight - textHeight));
-            const left = Math.floor(Math.random() * (memeContainer.offsetWidth - textWidth));
-            textElement.style.top = `${top}px`;
-            textElement.style.left = `${left}px`;
-        }
-
-        addTextButton.addEventListener('click', function() {
-            const text = textInput.value;
-            if (text) {
-                randomText.textContent = text;
-                randomText.style.color = getRandomColor();
-                updateTextPosition();
+            return `hsl(${Math.random() * 360}, 100%, 50%)`;
+        }
+
+        function getRandomPosition(element) {
+            const container = document.getElementById('meme-container');
+            
+            // Element muss erst im DOM sein um die Größe zu berechnen
+            container.appendChild(element);
+            
+            const maxTop = container.offsetHeight - element.offsetHeight - 10; // 10px Puffer
+            const maxLeft = container.offsetWidth - element.offsetWidth - 10;
+            
+            // Sicherstellen dass die Position nicht negativ wird
+            return {
+                top: Math.max(10, Math.random() * maxTop),
+                left: Math.max(10, Math.random() * maxLeft)
+            };
+        }
+
+        // Event-Listener
+        document.getElementById('add-text-button').addEventListener('click', () => {
+            const userInput = document.getElementById('text-input').value;
+            
+            // Teile den Eingabetext bei Kommas und bereinige die Teile
+            const textParts = userInput.split(',')
+                .map(part => part.trim())
+                .filter(part => part.length > 0);
+    
+            // Füge jedes bereinigte Textteil hinzu
+            textParts.forEach(part => {
+                createTextElement(part);
+            });
+    
+            // Füge zufälliges Meme-Wort hinzu (50% Chance)
+            if (Math.random() > 0.5 && textParts.length > 0) {
+                const randomWord = memeWords[Math.floor(Math.random() * memeWords.length)];
+                createTextElement(randomWord);
             }
+    
+            document.getElementById('text-input').value = '';
         });
 
-        // Initialisiere die Positionierung des Textes beim Laden der Seite
-        window.addEventListener('load', function() {
-            // Setze den Text zuerst, um die Größe des Textelements zu bestimmen
-            randomText.textContent = "Beispieltext";
-            randomText.style.color = getRandomColor();
-            updateTextPosition();
+        // Speicherfunktion
+        document.getElementById('save-button').addEventListener('click', () => {
+            html2canvas(document.querySelector("#meme-container")).then(canvas => {
+                const link = document.createElement('a');
+                link.download = 'doge-meme.png';
+                link.href = canvas.toDataURL();
+                link.click();
+            });
+        });
+
+        // Initiale Meme-Wörter beim Laden
+        window.addEventListener('load', () => {
+            memeWords.forEach(word => {
+                if (Math.random() > 0.3) createTextElement(word);
+            });
         });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e4c4baf..2380a2f 100644
--- a/index.html
+++ b/index.html
@@ -189,7 +189,7 @@
         </a>
         <a href="https://tools.ponywave.de/dogify" class="tool-bubble">
             <h2 class="tool-title">Dogify</h2>
-            <p class="tool-description">Wow such doge many fun (In Arbeit)</p>
+            <p class="tool-description">Wow such doge many fun</p>
         </a>
         <a href="https://tools.ponywave.de/ba_memory" class="tool-bubble">
             <h2 class="tool-title">Blue Archive Memory</h2>
