<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Transform Effect with Two Images</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        #canvas {
            max-width: 100%;
            border: 1px solid #ccc;
            background-color: #fff;
        }
        #controls, #presets, #layers {
            margin-top: 20px;
        }
        .control-group {
            margin-bottom: 15px;
        }
        .layer {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            background-color: #fff;
            border-radius: 5px;
        }
        .layer label {
            display: block;
            margin-bottom: 5px;
        }
        .layer input[type="number"], .layer select {
            width: 120px;
            padding: 5px;
            margin-bottom: 10px;
        }
        #errorMessage {
            color: red;
            margin-top: 10px;
            font-weight: bold;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        select {
            padding: 5px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Image Transform Effect Tool</h1>
    <div>
        <label for="imageUpload1">Upload Image 1:</label>
        <input type="file" id="imageUpload1" accept="image/jpeg,image/png">
    </div>
    <div>
        <label for="imageUpload2">Upload Image 2:</label>
        <input type="file" id="imageUpload2" accept="image/jpeg,image/png">
    </div>
    <div id="errorMessage"></div>
    <br>
    <canvas id="canvas"></canvas>
    <div id="presets" style="display:none;">
        <label for="presetSelect">Presets:</label>
        <select id="presetSelect">
            <option value="custom">Custom</option>
            <option value="stretchRight">Stretch Right</option>
            <option value="stretchLeft">Stretch Left</option>
            <option value="compressCenter">Compress Center</option>
            <option value="wavyHorizontal">Wavy Horizontal</option>
            <option value="extremeVertical">Extreme Vertical</option>
        </select>
    </div>
    <div id="layers" style="display:none;">
        <button id="addLayerBtn">Add Layer</button>
        <div id="layerContainer"></div>
    </div>
    <br>
    <button id="downloadBtn" style="display:none;">Download Transformed Image</button>
    <script>
        const imageUpload1 = document.getElementById('imageUpload1');
        const imageUpload2 = document.getElementById('imageUpload2');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const downloadBtn = document.getElementById('downloadBtn');
        const presetSelect = document.getElementById('presetSelect');
        const addLayerBtn = document.getElementById('addLayerBtn');
        const layerContainer = document.getElementById('layerContainer');
        const presets = document.getElementById('presets');
        const layers = document.getElementById('layers');
        const errorMessage = document.getElementById('errorMessage');
        let originalImages = [null, null];
        let effectLayers = [];
        const presetEffects = {
            stretchRight: { orientation: 'vertical', intensity: 5, width: 30, position: 85, imageIndex: 0 },
            stretchLeft: { orientation: 'vertical', intensity: 5, width: 30, position: 15, imageIndex: 0 },
            compressCenter: { orientation: 'horizontal', intensity: -0.5, width: 50, position: 50, imageIndex: 0 },
            wavyHorizontal: { orientation: 'horizontal', intensity: 2, width: 10, position: 50, imageIndex: 0 },
            extremeVertical: { orientation: 'vertical', intensity: 50, width: 5, position: 50, imageIndex: 0 }
        };
        function applyEffect(layer) {
            if (!originalImages[layer.imageIndex]) return;
            let effectWidth, effectHeight, effectPosition;
            const sourceImage = originalImages[layer.imageIndex];
            if (layer.orientation === 'vertical') {
                effectWidth = canvas.width * (layer.width / 100);
                effectHeight = canvas.height;
                effectPosition = canvas.width * (layer.position / 100) - effectWidth / 2;
                
                const sourceX = Math.max(0, effectPosition);
                const sourceWidth = Math.min(effectWidth, canvas.width - sourceX);
                ctx.drawImage(sourceImage, 
                    sourceX * sourceImage.width / canvas.width, 0, 
                    sourceWidth * sourceImage.width / canvas.width, sourceImage.height,
                    effectPosition, 0, 
                    effectWidth * (1 + layer.intensity), effectHeight
                );
            } else {
                effectWidth = canvas.width;
                effectHeight = canvas.height * (layer.width / 100);
                effectPosition = canvas.height * (layer.position / 100) - effectHeight / 2;
                
                const sourceY = Math.max(0, effectPosition);
                const sourceHeight = Math.min(effectHeight, canvas.height - sourceY);
                ctx.drawImage(sourceImage, 
                    0, sourceY * sourceImage.height / canvas.height, 
                    sourceImage.width, sourceHeight * sourceImage.height / canvas.height,
                    0, effectPosition, 
                    effectWidth, effectHeight * (1 + layer.intensity)
                );
            }
        }
        function updateEffect() {
            if (!originalImages[0]) return;
            canvas.width = originalImages[0].width;
            canvas.height = originalImages[0].height;
            ctx.drawImage(originalImages[0], 0, 0);
            effectLayers.forEach(layer => {
                if (layer.enabled) {
                    applyEffect(layer);
                }
            });
        }
        function createLayerControls(layer, index) {
            const layerDiv = document.createElement('div');
            layerDiv.className = 'layer';
            layerDiv.innerHTML = `
                <h3>Layer ${index + 1}</h3>
                <label>
                    <input type="checkbox" class="layer-enabled" ${layer.enabled ? 'checked' : ''}>
                    Enabled
                </label>
                <label>Image:
                    <select class="layer-image">
                        <option value="0" ${layer.imageIndex === 0 ? 'selected' : ''}>Image 1</option>
                        <option value="1" ${layer.imageIndex === 1 ? 'selected' : ''}>Image 2</option>
                    </select>
                </label>
                <label>Orientation:
                    <select class="layer-orientation">
                        <option value="vertical" ${layer.orientation === 'vertical' ? 'selected' : ''}>Vertical</option>
                        <option value="horizontal" ${layer.orientation === 'horizontal' ? 'selected' : ''}>Horizontal</option>
                    </select>
                </label>
                <label>Intensity:
                    <input type="number" class="layer-intensity" min="-0.99" max="100" value="${layer.intensity}" step="0.01">
                </label>
                <label>Width (%):
                    <input type="number" class="layer-width" min="1" max="100" value="${layer.width}" step="1">
                </label>
                <label>Position (%):
                    <input type="number" class="layer-position" min="-100" max="200" value="${layer.position}" step="1">
                </label>
                <button class="remove-layer">Remove Layer</button>
            `;
            layerDiv.querySelector('.layer-enabled').addEventListener('change', (e) => {
                layer.enabled = e.target.checked;
                updateEffect();
            });
            layerDiv.querySelector('.layer-image').addEventListener('change', (e) => {
                layer.imageIndex = parseInt(e.target.value);
                updateEffect();
            });
            layerDiv.querySelector('.layer-orientation').addEventListener('change', (e) => {
                layer.orientation = e.target.value;
                updateEffect();
            });
            layerDiv.querySelector('.layer-intensity').addEventListener('input', (e) => {
                layer.intensity = parseFloat(e.target.value);
                updateEffect();
            });
            layerDiv.querySelector('.layer-width').addEventListener('input', (e) => {
                layer.width = parseInt(e.target.value);
                updateEffect();
            });
            layerDiv.querySelector('.layer-position').addEventListener('input', (e) => {
                layer.position = parseInt(e.target.value);
                updateEffect();
            });
            layerDiv.querySelector('.remove-layer').addEventListener('click', () => {
                effectLayers.splice(index, 1);
                updateLayerControls();
                updateEffect();
            });
            return layerDiv;
        }
        function updateLayerControls() {
            layerContainer.innerHTML = '';
            effectLayers.forEach((layer, index) => {
                layerContainer.appendChild(createLayerControls(layer, index));
            });
        }
        function addLayer(preset = null) {
            const newLayer = preset || {
                enabled: true,
                orientation: 'vertical',
                intensity: 20,
                width: 30,
                position: 50,
                imageIndex: 0
            };
            effectLayers.push(newLayer);
            updateLayerControls();
            updateEffect();
        }
        function loadImage(file, index) {
            if (!['image/jpeg', 'image/png'].includes(file.type)) {
                showError('Only JPG and PNG files are supported.');
                return;
            }
            if (file.size > 10 * 1024 * 1024) {
                showError('File size must be less than 10MB.');
                return;
            }
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    originalImages[index] = img;
                    if (index === 0) {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);
                    }
                    if (originalImages[0] && effectLayers.length === 0) {
                        addLayer();
                    }
                    updateEffect();
                    presets.style.display = 'block';
                    layers.style.display = 'block';
                    downloadBtn.style.display = 'block';
                    clearError();
                }
                img.onerror = function() {
                    showError('Failed to load image. Please try another file.');
                }
                img.src = event.target.result;
            }
            reader.onerror = function() {
                showError('Error reading file. Please try again.');
            }
            reader.readAsDataURL(file);
        }
        function showError(message) {
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
        }
        function clearError() {
            errorMessage.textContent = '';
            errorMessage.style.display = 'none';
        }
        imageUpload1.addEventListener('change', function(e) {
            if (e.target.files[0]) {
                loadImage(e.target.files[0], 0);
            }
        });
        imageUpload2.addEventListener('change', function(e) {
            if (e.target.files[0]) {
                loadImage(e.target.files[0], 1);
            }
        });
        presetSelect.addEventListener('change', function() {
            const selectedPreset = presetSelect.value;
            if (selectedPreset !== 'custom') {
                addLayer(presetEffects[selectedPreset]);
            }
        });
        addLayerBtn.addEventListener('click', () => addLayer());
        downloadBtn.addEventListener('click', function() {
            const dataURL = canvas.toDataURL('image/jpeg');
            const link = document.createElement('a');
            link.download = 'transformed_image.jpg';
            link.href = dataURL;
            link.click();
        });
    </script>
</body>
</html>