Spaces:

linoyts
/

meme-generator

Running

File size: 26,770 Bytes

cf9dbe6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meme Generator Pro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .dropzone {
            border: 2px dashed #ccc;
            transition: all 0.3s ease;
        }
        .dropzone.active {
            border-color: #4f46e5;
            background-color: rgba(79, 70, 229, 0.05);
        }
        .text-input {
            -webkit-text-stroke: 1px black;
            text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
        }
        .meme-container {
            position: relative;
            max-width: 100%;
        }
        .meme-text {
            position: absolute;
            width: 100%;
            text-align: center;
            color: white;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 2.5rem;
            word-wrap: break-word;
            cursor: move;
            user-select: none;
        }
        .color-option {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .color-option:hover {
            transform: scale(1.1);
        }
        .font-option {
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .font-option:hover {
            background-color: #e5e7eb;
        }
        .font-option.selected {
            background-color: #4f46e5;
            color: white;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-8">
            <h1 class="text-4xl font-bold text-indigo-600 mb-2">Meme Generator Pro</h1>
            <p class="text-gray-600">Create hilarious memes in seconds!</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Panel - Controls -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">Meme Controls</h2>
                
                <!-- Template Selection -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-2 text-gray-700">Choose Template</h3>
                    <div class="grid grid-cols-3 gap-2">
                        <div class="template-option cursor-pointer" data-template="https://i.imgflip.com/1bij.jpg">
                            <img src="https://i.imgflip.com/1bij.jpg" alt="One Does Not Simply" class="rounded-md hover:opacity-80">
                        </div>
                        <div class="template-option cursor-pointer" data-template="https://i.imgflip.com/1g8my.jpg">
                            <img src="https://i.imgflip.com/1g8my.jpg" alt="Distracted Boyfriend" class="rounded-md hover:opacity-80">
                        </div>
                        <div class="template-option cursor-pointer" data-template="https://i.imgflip.com/9vct.jpg">
                            <img src="https://i.imgflip.com/9vct.jpg" alt="Waiting Skeleton" class="rounded-md hover:opacity-80">
                        </div>
                        <div class="template-option cursor-pointer" data-template="https://i.imgflip.com/1h7in3.jpg">
                            <img src="https://i.imgflip.com/1h7in3.jpg" alt="Drake Hotline Bling" class="rounded-md hover:opacity-80">
                        </div>
                        <div class="template-option cursor-pointer" data-template="https://i.imgflip.com/1ihzfe.jpg">
                            <img src="https://i.imgflip.com/1ihzfe.jpg" alt="Batman Slapping Robin" class="rounded-md hover:opacity-80">
                        </div>
                        <div class="template-option cursor-pointer" data-template="https://i.imgflip.com/30b1gx.jpg">
                            <img src="https://i.imgflip.com/30b1gx.jpg" alt="Change My Mind" class="rounded-md hover:opacity-80">
                        </div>
                    </div>
                </div>
                
                <!-- Upload Image -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-2 text-gray-700">Or Upload Your Own</h3>
                    <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer">
                        <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-2"></i>
                        <p class="text-gray-600">Drag & drop an image here</p>
                        <p class="text-sm text-gray-500 mt-1">or click to browse</p>
                        <input type="file" id="fileInput" class="hidden" accept="image/*">
                    </div>
                </div>
                
                <!-- Text Controls -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-2 text-gray-700">Add Text</h3>
                    <div class="flex mb-4">
                        <input type="text" id="topTextInput" placeholder="Top text" class="flex-1 px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <button id="addTopText" class="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700 transition">Add</button>
                    </div>
                    <div class="flex">
                        <input type="text" id="bottomTextInput" placeholder="Bottom text" class="flex-1 px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <button id="addBottomText" class="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700 transition">Add</button>
                    </div>
                </div>
                
                <!-- Text Customization -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-2 text-gray-700">Customize Text</h3>
                    
                    <!-- Color Picker -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Text Color</label>
                        <div class="flex space-x-2">
                            <div class="color-option bg-white border border-gray-300" data-color="white"></div>
                            <div class="color-option bg-yellow-300" data-color="#fde047"></div>
                            <div class="color-option bg-red-500" data-color="#ef4444"></div>
                            <div class="color-option bg-green-500" data-color="#22c55e"></div>
                            <div class="color-option bg-blue-500" data-color="#3b82f6"></div>
                            <div class="color-option bg-black" data-color="black"></div>
                        </div>
                    </div>
                    
                    <!-- Font Selection -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Font</label>
                        <div class="flex flex-wrap gap-2">
                            <div class="font-option selected" data-font="Impact">Impact</div>
                            <div class="font-option" data-font="Arial">Arial</div>
                            <div class="font-option" data-font="Comic Sans MS">Comic Sans</div>
                            <div class="font-option" data-font="Times New Roman">Times</div>
                            <div class="font-option" data-font="Courier New">Courier</div>
                        </div>
                    </div>
                    
                    <!-- Size Slider -->
                    <div>
                        <label for="textSize" class="block text-sm font-medium text-gray-700 mb-1">Text Size</label>
                        <input type="range" id="textSize" min="20" max="80" value="40" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>Small</span>
                            <span>Medium</span>
                            <span>Large</span>
                        </div>
                    </div>
                </div>
                
                <!-- Download Button -->
                <button id="downloadBtn" class="w-full bg-green-600 text-white py-3 rounded-lg font-semibold hover:bg-green-700 transition flex items-center justify-center">
                    <i class="fas fa-download mr-2"></i> Download Meme
                </button>
            </div>
            
            <!-- Middle Panel - Preview -->
            <div class="bg-white rounded-xl shadow-md p-6 flex flex-col">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">Meme Preview</h2>
                <div class="flex-1 flex items-center justify-center">
                    <div id="memePreview" class="meme-container w-full max-w-md">
                        <img id="memeImage" src="https://i.imgflip.com/1bij.jpg" alt="Meme template" class="w-full rounded-lg">
                        <!-- Text elements will be added here dynamically -->
                    </div>
                </div>
                <div class="mt-4 text-center text-sm text-gray-500">
                    <p>Drag text to reposition, click to select for editing</p>
                </div>
            </div>
            
            <!-- Right Panel - Recent Memes -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">Your Recent Memes</h2>
                <div id="recentMemes" class="grid grid-cols-2 gap-2">
                    <!-- Recent memes will appear here -->
                    <div class="text-center p-4 bg-gray-100 rounded-lg">
                        <i class="fas fa-image text-3xl text-gray-400 mb-2"></i>
                        <p class="text-sm text-gray-600">No memes yet</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM Elements
            const dropzone = document.getElementById('dropzone');
            const fileInput = document.getElementById('fileInput');
            const memeImage = document.getElementById('memeImage');
            const memePreview = document.getElementById('memePreview');
            const topTextInput = document.getElementById('topTextInput');
            const bottomTextInput = document.getElementById('bottomTextInput');
            const addTopTextBtn = document.getElementById('addTopText');
            const addBottomTextBtn = document.getElementById('addBottomText');
            const downloadBtn = document.getElementById('downloadBtn');
            const colorOptions = document.querySelectorAll('.color-option');
            const fontOptions = document.querySelectorAll('.font-option');
            const textSizeSlider = document.getElementById('textSize');
            const templateOptions = document.querySelectorAll('.template-option');
            const recentMemesContainer = document.getElementById('recentMemes');
            
            // State variables
            let selectedTextElement = null;
            let currentColor = 'white';
            let currentFont = 'Impact';
            let currentSize = 40;
            let recentMemes = [];
            
            // Initialize with default template
            updateMemeTemplate('https://i.imgflip.com/1bij.jpg');
            
            // Event Listeners
            
            // Template selection
            templateOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const templateUrl = this.getAttribute('data-template');
                    updateMemeTemplate(templateUrl);
                });
            });
            
            // Drag and drop functionality
            dropzone.addEventListener('click', () => fileInput.click());
            
            fileInput.addEventListener('change', function(e) {
                if (e.target.files.length) {
                    const file = e.target.files[0];
                    if (file.type.match('image.*')) {
                        const reader = new FileReader();
                        reader.onload = function(event) {
                            updateMemeTemplate(event.target.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
            
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropzone.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dropzone.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dropzone.addEventListener(eventName, unhighlight, false);
            });
            
            function highlight() {
                dropzone.classList.add('active');
            }
            
            function unhighlight() {
                dropzone.classList.remove('active');
            }
            
            dropzone.addEventListener('drop', function(e) {
                const dt = e.dataTransfer;
                const file = dt.files[0];
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        updateMemeTemplate(event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
            
            // Add text functionality
            addTopTextBtn.addEventListener('click', function() {
                addText(topTextInput.value, 'top');
                topTextInput.value = '';
            });
            
            addBottomTextBtn.addEventListener('click', function() {
                addText(bottomTextInput.value, 'bottom');
                bottomTextInput.value = '';
            });
            
            // Text input enter key support
            topTextInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addText(topTextInput.value, 'top');
                    topTextInput.value = '';
                }
            });
            
            bottomTextInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addText(bottomTextInput.value, 'bottom');
                    bottomTextInput.value = '';
                }
            });
            
            // Text customization
            colorOptions.forEach(option => {
                option.addEventListener('click', function() {
                    currentColor = this.getAttribute('data-color');
                    if (selectedTextElement) {
                        selectedTextElement.style.color = currentColor;
                    }
                });
            });
            
            fontOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // Remove selected class from all options
                    fontOptions.forEach(opt => opt.classList.remove('selected'));
                    // Add to clicked option
                    this.classList.add('selected');
                    
                    currentFont = this.getAttribute('data-font');
                    if (selectedTextElement) {
                        selectedTextElement.style.fontFamily = currentFont;
                    }
                });
            });
            
            textSizeSlider.addEventListener('input', function() {
                currentSize = parseInt(this.value);
                if (selectedTextElement) {
                    selectedTextElement.style.fontSize = `${currentSize}px`;
                }
            });
            
            // Download functionality
            downloadBtn.addEventListener('click', downloadMeme);
            
            // Functions
            
            function updateMemeTemplate(src) {
                memeImage.src = src;
                // Clear existing text elements
                document.querySelectorAll('.meme-text').forEach(el => el.remove());
                selectedTextElement = null;
            }
            
            function addText(text, position) {
                if (!text.trim()) return;
                
                const textElement = document.createElement('div');
                textElement.className = 'meme-text';
                textElement.textContent = text;
                textElement.style.color = currentColor;
                textElement.style.fontFamily = currentFont;
                textElement.style.fontSize = `${currentSize}px`;
                
                if (position === 'top') {
                    textElement.style.top = '10px';
                } else {
                    textElement.style.bottom = '10px';
                }
                
                // Make text draggable
                makeDraggable(textElement);
                
                // Select on click
                textElement.addEventListener('click', function(e) {
                    e.stopPropagation();
                    selectTextElement(textElement);
                });
                
                memePreview.appendChild(textElement);
                selectTextElement(textElement);
            }
            
            function makeDraggable(element) {
                let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
                
                element.onmousedown = dragMouseDown;
                
                function dragMouseDown(e) {
                    e = e || window.event;
                    e.preventDefault();
                    // Get the mouse cursor position at startup
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    document.onmouseup = closeDragElement;
                    // Call a function whenever the cursor moves
                    document.onmousemove = elementDrag;
                }
                
                function elementDrag(e) {
                    e = e || window.event;
                    e.preventDefault();
                    // Calculate the new cursor position
                    pos1 = pos3 - e.clientX;
                    pos2 = pos4 - e.clientY;
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    // Set the element's new position
                    const top = element.offsetTop - pos2;
                    const left = element.offsetLeft - pos1;
                    
                    // Constrain to meme container
                    const containerRect = memePreview.getBoundingClientRect();
                    const elementRect = element.getBoundingClientRect();
                    
                    if (top >= 0 && top <= containerRect.height - elementRect.height) {
                        element.style.top = top + 'px';
                        element.style.bottom = '';
                    }
                    
                    if (left >= 0 && left <= containerRect.width - elementRect.width) {
                        element.style.left = left + 'px';
                        element.style.right = '';
                    }
                }
                
                function closeDragElement() {
                    // Stop moving when mouse button is released
                    document.onmouseup = null;
                    document.onmousemove = null;
                }
            }
            
            function selectTextElement(element) {
                // Deselect previous
                if (selectedTextElement) {
                    selectedTextElement.style.border = '';
                }
                
                // Select new
                selectedTextElement = element;
                element.style.border = '2px dashed rgba(79, 70, 229, 0.7)';
                
                // Update inputs to match selected text
                if (element.textContent) {
                    if (element.style.top) {
                        topTextInput.value = element.textContent;
                    } else {
                        bottomTextInput.value = element.textContent;
                    }
                }
                
                // Update customization controls
                currentColor = element.style.color || 'white';
                currentFont = element.style.fontFamily || 'Impact';
                currentSize = parseInt(element.style.fontSize) || 40;
                
                // Update slider
                textSizeSlider.value = currentSize;
                
                // Update color selection
                colorOptions.forEach(opt => {
                    if (opt.getAttribute('data-color') === currentColor) {
                        opt.style.border = '2px solid #4f46e5';
                    } else {
                        opt.style.border = opt.classList.contains('bg-white') ? '1px solid #d1d5db' : '';
                    }
                });
                
                // Update font selection
                fontOptions.forEach(opt => {
                    if (opt.getAttribute('data-font') === currentFont) {
                        opt.classList.add('selected');
                    } else {
                        opt.classList.remove('selected');
                    }
                });
            }
            
            // Click on preview to deselect
            memePreview.addEventListener('click', function() {
                if (selectedTextElement) {
                    selectedTextElement.style.border = '';
                    selectedTextElement = null;
                    topTextInput.value = '';
                    bottomTextInput.value = '';
                }
            });
            
            function downloadMeme() {
                if (!memeImage.src) return;
                
                // Use html2canvas to capture the meme
                html2canvas(memePreview).then(canvas => {
                    const link = document.createElement('a');
                    link.download = 'meme.png';
                    link.href = canvas.toDataURL('image/png');
                    link.click();
                    
                    // Add to recent memes
                    addToRecentMemes(canvas.toDataURL('image/png'));
                });
            }
            
            function addToRecentMemes(dataUrl) {
                // Limit to 6 recent memes
                if (recentMemes.length >= 6) {
                    recentMemes.pop();
                }
                
                recentMemes.unshift(dataUrl);
                updateRecentMemesDisplay();
            }
            
            function updateRecentMemesDisplay() {
                recentMemesContainer.innerHTML = '';
                
                if (recentMemes.length === 0) {
                    recentMemesContainer.innerHTML = `
                        <div class="text-center p-4 bg-gray-100 rounded-lg">
                            <i class="fas fa-image text-3xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-600">No memes yet</p>
                        </div>
                    `;
                    return;
                }
                
                recentMemes.forEach((meme, index) => {
                    const memeElement = document.createElement('div');
                    memeElement.className = 'cursor-pointer';
                    memeElement.innerHTML = `
                        <img src="${meme}" alt="Recent meme ${index + 1}" class="w-full h-auto rounded-lg hover:opacity-90">
                    `;
                    memeElement.addEventListener('click', function() {
                        if (confirm('Load this meme?')) {
                            updateMemeTemplate(meme);
                        }
                    });
                    recentMemesContainer.appendChild(memeElement);
                });
            }
            
            // Load html2canvas dynamically
            function loadHtml2Canvas() {
                return new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }
            
            // Load html2canvas when needed
            downloadBtn.addEventListener('click', function() {
                if (typeof html2canvas === 'undefined') {
                    loadHtml2Canvas().then(() => {
                        downloadMeme();
                    }).catch(err => {
                        alert('Failed to load image generator. Please try again.');
                        console.error(err);
                    });
                } else {
                    downloadMeme();
                }
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=linoyts/meme-generator" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>