lemuriavale/screenshot-wizardry

1document.addEventListener('DOMContentLoaded', function() {2    // File upload handling3    const uploadArea = document.querySelector('[data-feather="upload-cloud"]').parentElement;4    const fileInput = document.getElementById('screenshot-upload');5    const editorContainer = document.getElementById('editor-container');6    const editableScreenshot = document.getElementById('editable-screenshot');7    8    uploadArea.addEventListener('click', () => fileInput.click());9    10    fileInput.addEventListener('change', function(e) {11        if (e.target.files && e.target.files[0]) {12            const reader = new FileReader();13            14            reader.onload = function(event) {15                editableScreenshot.src = event.target.result;16                editorContainer.classList.remove('hidden');17            };18            19            reader.readAsDataURL(e.target.files[0]);20        }21    });22    23    // Drag and drop functionality24    uploadArea.addEventListener('dragover', (e) => {25        e.preventDefault();26        uploadArea.classList.add('border-blue-400', 'bg-blue-50');27    });28    29    uploadArea.addEventListener('dragleave', () => {30        uploadArea.classList.remove('border-blue-400', 'bg-blue-50');31    });32    33    uploadArea.addEventListener('drop', (e) => {34        e.preventDefault();35        uploadArea.classList.remove('border-blue-400', 'bg-blue-50');36        37        if (e.dataTransfer.files && e.dataTransfer.files[0]) {38            fileInput.files = e.dataTransfer.files;39            const changeEvent = new Event('change');40            fileInput.dispatchEvent(changeEvent);41        }42    });43    44    // Text tool functionality45    const textInput = document.getElementById('text-input');46    const addTextBtn = document.getElementById('add-text-btn');47    48    addTextBtn.addEventListener('click', function() {49        if (textInput.value.trim() !== '') {50            alert(`Text "${textInput.value}" would be added to the screenshot in a real implementation.`);51            textInput.value = '';52        }53    });54    55    // Initialize tools56    const tools = ['pen-tool', 'highlight-tool', 'arrow-tool', 'shape-tool'];57    tools.forEach(toolId => {58        document.getElementById(toolId).addEventListener('click', function() {59            alert(`${toolId.replace('-', ' ')} activated!`);60        });61    });62    63    // Color selection64    document.querySelectorAll('[class*="bg-"]:not([class*="hover:bg-"])').forEach(colorBtn => {65        colorBtn.addEventListener('click', function() {66            const color = this.className.match(/bg-(?:[a-zA-Z]+|black|white)/)[0].split('-')[1];67            alert(`Selected color: ${color}`);68        });69    });70});