Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meme Generator!</title>
    <style>
        :root {
            --primary-color: #FFD700;
            --secondary-color: #E6E6E6;
            --accent-color: #000000;
            --text-color: #000000;
            --button-hover: #4d4d4d;
        }

        body, html {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-color);
            color: var(--text-color);
        }

        .meme-generator {
            width: 100%;
            max-width: 600px;
            margin: auto;
            padding: 2rem 1rem;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: var(--accent-color);
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 1.5rem;
            animation: fadeIn 1s ease-out;
        }

        .input-group {
            margin-bottom: 1.25rem;
            width: 100%;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 1em;
            font-weight: 600;
        }

        input[type="text"], input[type="file"], select, input[type="color"], input[type="range"] {
            width: 100%;
            padding: 0.75rem 1rem;
            box-sizing: border-box;
            border: 1px solid var(--accent-color);
            background: var(--secondary-color);
            color: var(--text-color);
            border-radius: 4px;
            font-size: 1em;
            transition: background-color 0.3s, border-color 0.3s;
        }

        input:focus {
            outline: none;
            background: var(--primary-color);
            border-color: var(--accent-color);
        }

        button {
            width: 100%;
            padding: 1rem;
            border: none;
            background: var(--accent-color);
            color: var(--primary-color);
            font-size: 1em;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-bottom: 1rem;
        }

        button:hover {
            background: var(--button-hover);
        }

        canvas {
            width: 100%;
            max-width: 500px;
            height: auto;
            border: 2px solid var(--accent-color);
            border-radius: 4px;
            margin-top: 1.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: block;
        }

        .error-message {
            color: red;
            text-align: center;
            margin-top: 1rem;
            font-size: 0.9em;
        }

        @media screen and (max-width: 600px) {
            .meme-generator {
                padding: 1rem;
            }
            h1 {
                font-size: 2em;
            }
            input, button {
                font-size: 0.9em;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="meme-generator">
        <h1>Make Women Obedient Again Meme Generator!</h1>
        <div class="input-group">
            <label for="image-url">Image URL:</label>
            <input type="text" id="image-url" placeholder="Enter image URL">
        </div>
        <div class="input-group">
            <label for="image-upload">Or Upload Base Image:</label>
            <input type="file" id="image-upload" accept="image/*">
        </div>
        <div class="input-group">
            <label for="additional-image-upload">Upload Additional Image:</label>
            <input type="file" id="additional-image-upload" accept="image/*" multiple>
        </div>
        <div class="input-group">
            <label for="top-text">Top Text:</label>
            <input type="text" id="top-text" placeholder="Top text">
        </div>
        <div class="input-group">
            <label for="bottom-text">Bottom Text:</label>
            <input type="text" id="bottom-text" placeholder="Bottom text">
        </div>
        <div class="input-group">
            <label for="text-color">Text Color:</label>
            <input type="color" id="text-color" value="#FFFFFF">
        </div>
        <div class="input-group">
            <label for="font-size">Font Size:</label>
            <input type="range" id="font-size" min="10" max="50" value="30">
        </div>
        <div class="input-group">
            <label for="file-format">File Format:</label>
            <select id="file-format">
                <option value="png">PNG</option>
                <option value="jpeg">JPEG</option>
            </select>
        </div>
        <div class="input-group">
            <label>Selected Image Controls:</label>
            <button id="delete-btn">Delete Selected</button>
            <button id="bring-forward-btn">Bring Forward</button>
            <button id="send-backward-btn">Send Backward</button>
        </div>
        <button id="generate-btn">Generate Meme</button>
        <button id="save-btn">Save Meme</button>
        <canvas id="meme-canvas"></canvas>
        <div class="error-message" id="error-message"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const canvas = document.getElementById('meme-canvas');
            const ctx = canvas.getContext('2d');
            const generateBtn = document.getElementById('generate-btn');
            const saveBtn = document.getElementById('save-btn');
            const deleteBtn = document.getElementById('delete-btn');
            const bringForwardBtn = document.getElementById('bring-forward-btn');
            const sendBackwardBtn = document.getElementById('send-backward-btn');
            const imageUrl = document.getElementById('image-url');
            const imageUpload = document.getElementById('image-upload');
            const additionalImageUpload = document.getElementById('additional-image-upload');
            const topText = document.getElementById('top-text');
            const bottomText = document.getElementById('bottom-text');
            const textColor = document.getElementById('text-color');
            const fontSize = document.getElementById('font-size');
            const fileFormat = document.getElementById('file-format');
            const errorMessage = document.getElementById('error-message');

            let baseImage = null;
            let additionalImages = [];
            let selectedImageIndex = -1;
            let isDragging = false;
            let isResizing = false;
            let dragOffsetX = 0;
            let dragOffsetY = 0;
            const HANDLE_SIZE = 10;
            const MIN_SIZE = 20;

            canvas.width = 500;
            canvas.height = 500;

            function maintainAspectRatio(image, targetWidth) {
                const imageRatio = image.width / image.height;
                return {
                    width: targetWidth,
                    height: targetWidth / imageRatio
                };
            }

            function drawCanvas() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                if (baseImage) {
                    const { width, height } = maintainAspectRatio(baseImage, canvas.width);
                    const offsetX = (canvas.width - width) / 2;
                    const offsetY = (canvas.height - height) / 2;
                    ctx.drawImage(baseImage, offsetX, offsetY, width, height);
                }

                additionalImages.forEach((imgObj, index) => {
                    ctx.drawImage(imgObj.image, imgObj.x, imgObj.y, imgObj.width, imgObj.height);

                    if (index === selectedImageIndex) {
                        ctx.strokeStyle = 'red';
                        ctx.lineWidth = 2;
                        ctx.strokeRect(imgObj.x, imgObj.y, imgObj.width, imgObj.height);

                        ctx.fillStyle = 'red';
                        ctx.fillRect(imgObj.x + imgObj.width - HANDLE_SIZE, 
                                   imgObj.y + imgObj.height - HANDLE_SIZE, 
                                   HANDLE_SIZE, HANDLE_SIZE);
                        ctx.fillRect(imgObj.x, imgObj.y, HANDLE_SIZE, HANDLE_SIZE);
                    }
                });

                ctx.font = `${fontSize.value}px Impact`;
                ctx.fillStyle = textColor.value;
                ctx.strokeStyle = 'black';
                ctx.textAlign = 'center';
                ctx.lineWidth = 2;

                if (topText.value) {
                    ctx.fillText(topText.value.toUpperCase(), canvas.width / 2, parseInt(fontSize.value) + 10);
                    ctx.strokeText(topText.value.toUpperCase(), canvas.width / 2, parseInt(fontSize.value) + 10);
                }
                if (bottomText.value) {
                    ctx.fillText(bottomText.value.toUpperCase(), canvas.width / 2, canvas.height - 20);
                    ctx.strokeText(bottomText.value.toUpperCase(), canvas.width / 2, canvas.height - 20);
                }
            }

            function getMousePos(e) {
                const rect = canvas.getBoundingClientRect();
                const scaleX = canvas.width / rect.width;
                const scaleY = canvas.height / rect.height;
                return {
                    x: (e.clientX - rect.left) * scaleX,
                    y: (e.clientY - rect.top) * scaleY
                };
            }

            function isOverHandle(mouseX, mouseY, imgObj, corner) {
                if (corner === 'bottom-right') {
                    return mouseX >= imgObj.x + imgObj.width - HANDLE_SIZE &&
                           mouseX <= imgObj.x + imgObj.width &&
                           mouseY >= imgObj.y + imgObj.height - HANDLE_SIZE &&
                           mouseY <= imgObj.y + imgObj.height;
                } else if (corner === 'top-left') {
                    return mouseX >= imgObj.x &&
                           mouseX <= imgObj.x + HANDLE_SIZE &&
                           mouseY >= imgObj.y &&
                           mouseY <= imgObj.y + HANDLE_SIZE;
                }
                return false;
            }

            canvas.addEventListener('mousedown', (e) => {
                const { x: mouseX, y: mouseY } = getMousePos(e);
                
                if (selectedImageIndex !== -1) {
                    const imgObj = additionalImages[selectedImageIndex];
                    if (isOverHandle(mouseX, mouseY, imgObj, 'bottom-right')) {
                        isResizing = true;
                        dragOffsetX = imgObj.x + imgObj.width;
                        dragOffsetY = imgObj.y + imgObj.height;
                        return;
                    }
                    if (isOverHandle(mouseX, mouseY, imgObj, 'top-left')) {
                        isResizing = true;
                        dragOffsetX = imgObj.x;
                        dragOffsetY = imgObj.y;
                        return;
                    }
                }

                selectedImageIndex = additionalImages.findIndex(imgObj =>
                    mouseX >= imgObj.x && mouseX <= imgObj.x + imgObj.width &&
                    mouseY >= imgObj.y && mouseY <= imgObj.y + imgObj.height
                );

                if (selectedImageIndex !== -1) {
                    isDragging = true;
                    const imgObj = additionalImages[selectedImageIndex];
                    dragOffsetX = mouseX - imgObj.x;
                    dragOffsetY = mouseY - imgObj.y;
                }
                drawCanvas();
            });

            canvas.addEventListener('mousemove', (e) => {
                const { x: mouseX, y: mouseY } = getMousePos(e);

                if (isDragging && selectedImageIndex !== -1) {
                    const imgObj = additionalImages[selectedImageIndex];
                    imgObj.x = mouseX - dragOffsetX;
                    imgObj.y = mouseY - dragOffsetY;
                    drawCanvas();
                }

                if (isResizing && selectedImageIndex !== -1) {
                    const imgObj = additionalImages[selectedImageIndex];
                    let newWidth, newHeight, newX, newY;

                    if (dragOffsetX > imgObj.x) {
                        newWidth = Math.max(mouseX - imgObj.x, MIN_SIZE);
                        newHeight = maintainAspectRatio(imgObj.image, newWidth).height;
                        newX = imgObj.x;
                        newY = imgObj.y;
                    } else {
                        newWidth = Math.max(imgObj.x + imgObj.width - mouseX, MIN_SIZE);
                        newHeight = maintainAspectRatio(imgObj.image, newWidth).height;
                        newX = mouseX;
                        newY = imgObj.y + imgObj.height - newHeight;
                    }

                    imgObj.x = newX;
                    imgObj.y = newY;
                    imgObj.width = newWidth;
                    imgObj.height = newHeight;
                    drawCanvas();
                }
            });

            canvas.addEventListener('mouseup', () => {
                isDragging = false;
                isResizing = false;
            });

            generateBtn.addEventListener('click', () => {
                errorMessage.textContent = '';
                if (imageUrl.value) {
                    baseImage = new Image();
                    baseImage.crossOrigin = "Anonymous";
                    baseImage.src = imageUrl.value + (imageUrl.value.includes('?') ? '&' : '?') + 't=' + new Date().getTime();
                    baseImage.onload = () => {
                        drawCanvas();
                    };
                    baseImage.onerror = () => {
                        errorMessage.textContent = 'Failed to load image from URL. Try uploading instead or check CORS permissions.';
                        baseImage = null;
                    };
                } else if (imageUpload.files.length > 0) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        baseImage = new Image();
                        baseImage.src = e.target.result;
                        baseImage.onload = () => {
                            drawCanvas();
                        };
                    };
                    reader.readAsDataURL(imageUpload.files[0]);
                } else {
                    errorMessage.textContent = 'Please provide an image URL or upload a file.';
                }
            });

            additionalImageUpload.addEventListener('change', (e) => {
                Array.from(e.target.files).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const img = new Image();
                        img.src = e.target.result;
                        img.onload = () => {
                            additionalImages.push({
                                image: img,
                                x: 50 + Math.random() * 50,
                                y: 50 + Math.random() * 50,
                                width: 100,
                                height: 100 * (img.height / img.width)
                            });
                            drawCanvas();
                        };
                    };
                    reader.readAsDataURL(file);
                });
            });

            deleteBtn.addEventListener('click', () => {
                if (selectedImageIndex !== -1) {
                    additionalImages.splice(selectedImageIndex, 1);
                    selectedImageIndex = -1;
                    drawCanvas();
                }
            });

            bringForwardBtn.addEventListener('click', () => {
                if (selectedImageIndex !== -1 && selectedImageIndex < additionalImages.length - 1) {
                    [additionalImages[selectedImageIndex], additionalImages[selectedImageIndex + 1]] = 
                        [additionalImages[selectedImageIndex + 1], additionalImages[selectedImageIndex]];
                    selectedImageIndex++;
                    drawCanvas();
                }
            });

            sendBackwardBtn.addEventListener('click', () => {
                if (selectedImageIndex > 0) {
                    [additionalImages[selectedImageIndex], additionalImages[selectedImageIndex - 1]] = 
                        [additionalImages[selectedImageIndex - 1], additionalImages[selectedImageIndex]];
                    selectedImageIndex--;
                    drawCanvas();
                }
            });

            saveBtn.addEventListener('click', () => {
                const format = fileFormat.value;
                const dataURL = canvas.toDataURL(`image/${format}`);
                const link = document.createElement('a');
                link.download = `meme.${format}`;
                link.href = dataURL;
                link.click();
            });

            [topText, bottomText, textColor, fontSize].forEach(input => {
                input.addEventListener('input', drawCanvas);
            });
        });
    </script>
</body>
</html>