Erster Upload

2025-02-26 21:09:58 +01:00
commit 62227ad83c
18 changed files with 1969 additions and 0 deletions
--- a/dogify/doge.jpg
+++ b/dogify/doge.jpg
--- a/dogify/index.html
+++ b/dogify/index.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Doge Meme Generator</title>
+    <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;
+        }
+        #meme-container {
+            position: relative;
+            width: 640px;
+            height: 480px;
+            margin-bottom: 20px;
+        }
+        #doge-image {
+            width: 100%;
+            height: 100%;
+        }
+        .meme-text {
+            position: absolute;
+            width: 100%;
+            text-align: center;
+            color: white;
+            font-size: 20px;
+            font-family: Comic Sans MS, cursive, sans-serif;
+            text-shadow: 2px 2px 4px #000000;
+        }
+        input[type="text"] {
+            width: 300px;
+            padding: 10px;
+            margin: 5px;
+            font-size: 16px;
+        }
+    </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>
+    <script>
+        const textInput = document.getElementById('text-input');
+        const addTextButton = document.getElementById('add-text-button');
+        const randomText = document.getElementById('random-text');
+
+        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();
+            }
+        });
+
+        // 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();
+        });
+    </script>
+</body>
+</html>