1
0
PonyWave-Tools/dogify/index.html

105 lines
3.7 KiB
HTML
Raw Normal View History

2025-02-26 21:09:58 +01:00
<!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>