fix the issue I want the copy and paste to make it indivldual not every thing also lets do a shortcut on keyboard if they press on the element and press ctrl+c copy and ctrl+v to paste then it wll pate that indvidaul element: Write the full complete code dont skip anything, write the full code with the new edits you did just write the full complete code: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enhanced Notion-like Canvas</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
            Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            color: #37352f;
            background-color: #f5f5f5;
        }
        .container {
            display: flex;
            height: 100%;
        }
        .toolbar {
            width: 60px;
            background-color: #fbfbfa;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
            position: relative;
        }
        .tool-button {
            width: 40px;
            height: 40px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease;
            color: #37352f;
            position: relative;
        }
        .tool-button:hover {
            background-color: #f1f1ef;
        }
        .tool-button svg {
            width: 24px;
            height: 24px;
            fill: #37352f;
        }
        .text-icon, .media-icon, .shape-icon {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .tool-dropdown {
            position: relative;
        }
        .shape-menu {
            display: none;
            position: absolute;
            top: 50px;
            left: 0;
            background-color: #fbfbfa;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            z-index: 1000;
            padding: 5px;
            flex-direction: column;
        }
        .shape-menu .tool-button {
            margin: 5px;
        }
        .canvas-area {
            flex: 1;
            background-color: #f7f6f3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow: auto;
        }
        .canvas-controls {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .toggle-grid, .canvas-color-picker, .toggle-code {
            background-color: #e0e0e0;
            color: #37352f;
            border: none;
            padding: 8px 12px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
            margin-right: 10px;
            display: flex;
            align-items: center;
        }
        .toggle-grid:hover, .canvas-color-picker:hover, .toggle-code:hover {
            background-color: #d0d0d0;
        }
        .canvas-container {
            position: relative;
            width: 800px;
            height: 600px;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            cursor: default;
        }
        .canvas {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: visible;
        }
        .grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px),
            linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
            display: none;
        }
        .chat-area {
            width: 350px;
            background-color: #fbfbfa;
            border-left: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            padding: 16px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 1px solid #e0e0e0;
            background-color: #f7f6f3;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .message {
            margin-bottom: 12px;
            padding: 8px 12px;
            background-color: #f1f1ef;
            border-radius: 8px;
            font-size: 14px;
        }
        .chat-input {
            border-top: 1px solid #e0e0e0;
            padding: 16px;
            background-color: #f7f6f3;
        }
        .chat-input form {
            display: flex;
            align-items: center;
        }
        .chat-input input {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            font-size: 14px;
            background-color: #ffffff;
        }
        .chat-input button {
            margin-left: 8px;
            padding: 10px 16px;
            background-color: #e0e0e0;
            color: #37352f;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }
        .chat-input button:hover {
            background-color: #d0d0d0;
        }
        .canvas-text, .canvas-media, .canvas-shape {
            position: absolute;
            cursor: move;
            user-select: none;
            padding: 5px;
            min-width: 50px;
            min-height: 20px;
        }
        .canvas-media img {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
        .canvas-shape {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text-controls, .media-controls, .shape-controls {
            position: absolute;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            padding: 8px;
            display: none;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-wrap: nowrap;
            white-space: nowrap;
            gap: 5px;
        }
        .text-controls input[type="color"], .media-controls input[type="color"], .shape-controls input[type="color"] {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            padding: 0;
            background-color: transparent;
        }
        .text-controls input[type="number"], .media-controls input[type="number"], .shape-controls input[type="number"] {
            width: 50px;
            padding: 5px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
        }
        .text-controls select, .media-controls select, .shape-controls select {
            height: 30px;
            padding: 5px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
        }
        .text-controls button, .media-controls button, .shape-controls button {
            padding: 5px 10px;
            background-color: #f1f1ef;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .text-controls button:hover, .media-controls button:hover, .shape-controls button:hover {
            background-color: #e0e0e0;
        }
        .canvas-outline {
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 2px dashed #e0e0e0;
            pointer-events: none;
        }
        /* Shape Specific Styles */
        .shape-rectangle {
            background-color: #3498db;
            border-radius: 0;
        }
        .shape-ellipse {
            background-color: #e74c3c;
            border-radius: 50%;
        }
        .shape-star {
            width: 100px;
            height: 100px;
            background: transparent;
            position: relative;
            clip-path: polygon(
                50% 0%, 
                61% 35%, 
                98% 35%, 
                68% 57%, 
                79% 91%, 
                50% 70%, 
                21% 91%, 
                32% 57%, 
                2% 35%, 
                39% 35%
            );
            background-color: #f1c40f;
        }
        .shape-triangle {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid #2ecc71;
            background: none;
        }
        .code-area {
            display: none;
            position: absolute;
            top: 50px;
            left: 100px;
            z-index: 1000;
            padding: 20px;
            background-color: #f7f6f3;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            width: 500px;
            max-height: 300px;
            overflow: auto;
            cursor: move;
        }
        .code-area pre {
            font-size: 14px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        input[type="color"] {
            appearance: none;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            padding: 0;
            background-color: transparent;
            cursor: pointer;
        }
        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 50%;
        }
        .selected {
            outline: 2px dashed #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="toolbar">
            <button class="tool-button" onclick="addText()" title="Add Text">
                <div class="text-icon">T</div>
            </button>
            <button class="tool-button" onclick="addMedia()" title="Add Media">
                <div class="media-icon">M</div>
            </button>
            <button class="tool-button" onclick="copyElements()" title="Copy">
                <svg viewBox="0 0 24 24">
                    <path d="M10 6H6V0H0v6H4V4h16v2h-8z" />
                </svg>
            </button>
            <button class="tool-button" onclick="pasteElements()" title="Paste">
                <svg viewBox="0 0 24 24">
                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
                </svg>
            </button>
            <div class="tool-dropdown">
                <button class="tool-button" onclick="toggleShapeMenu()" title="Add Shape">
                    <svg viewBox="0 0 24 24">
                        <rect x="4" y="4" width="16" height="16" stroke="none" fill="#37352f" />
                    </svg>
                </button>
                <div class="shape-menu" id="shapeMenu">
                    <button class="tool-button" onclick="selectShape('rectangle')" title="Rectangle">
                        <svg viewBox="0 0 24 24">
                            <rect x="4" y="4" width="16" height="16" stroke="none" fill="#37352f" />
                        </svg>
                    </button>
                    <button class="tool-button" onclick="selectShape('ellipse')" title="Ellipse">
                        <svg viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="8" stroke="none" fill="#37352f" />
                        </svg>
                    </button>
                    <button class="tool-button" onclick="selectShape('star')" title="Star">
                        <svg viewBox="0 0 24 24">
                            <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#37352f"/>
                        </svg>
                    </button>
                    <button class="tool-button" onclick="selectShape('triangle')" title="Triangle">
                        <svg viewBox="0 0 24 24">
                            <polygon points="12,2 22,22 2,22" fill="#37352f"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div class="canvas-area">
            <div class="canvas-controls">
                <button class="toggle-grid" onclick="toggleGrid()">
                    Toggle Grid
                </button>
                <input type="color" id="canvasColorPicker" oninput="changeCanvasColor(this.value)" title="Canvas Color">
                <button class="toggle-code" onclick="toggleCode()">
                    Toggle Code
                </button>
            </div>
            <div class="canvas-container" id="canvasContainer">
                <div class="canvas" id="canvas">
                    <div class="grid" id="grid"></div>
                </div>
                <div class="canvas-outline"></div>
            </div>
        </div>
        <div class="code-area" id="codeArea">
            <pre id="code"></pre>
        </div>
        <div class="chat-area">
            <div class="chat-header">
                Chat
            </div>
            <div class="chat-messages">
                <div class="message">Hello! How can I help you with your design?</div>
                <div class="message">You can use the canvas on the left to create your poster.</div>
            </div>
            <div class="chat-input">
                <form>
                    <input type="text" placeholder="Type a message...">
                    <button type="submit">Send</button>
                </form>
            </div>
        </div>
        <div id="text-controls-wrapper"></div>
        <div id="media-controls-wrapper"></div>
        <div id="shape-controls-wrapper"></div>
        <div id="clipboard" style="display: none;"></div>
    </div>

    <script>
        let currentShape = null;
        let clipboard = document.getElementById('clipboard');
        let codeArea = document.getElementById('codeArea');
        let codeElement = document.getElementById('code');

        function toggleGrid() {
            const grid = document.getElementById('grid');
            grid.style.display = grid.style.display === 'none' ? 'block' : 'none';
        }

        function changeCanvasColor(color) {
            const canvas = document.getElementById('canvas');
            canvas.style.backgroundColor = color;
            updateCode(); // Update code when background color changes
        }

        function addText() {
            const canvas = document.getElementById('canvas');
            const text = document.createElement('div');
            text.className = 'canvas-text';
            text.id = 'text-' + Date.now();
            const textContent = document.createElement('div');
            textContent.contentEditable = true;
            textContent.textContent = 'Double click to edit';
            text.appendChild(textContent);
            text.style.left = '50px';
            text.style.top = '50px';
            text.style.width = '200px';
            text.style.height = '50px';
            text.style.fontSize = '16px';
            text.style.color = '#000000';

            canvas.appendChild(text);
            makeDraggable(text);
            makeSelectable(text);
            addTextControls(text);
            text.addEventListener('dblclick', function() {
                textContent.focus();
                document.execCommand('selectAll', false, null);
            });
            updateCode();
        }

        function addMedia() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const canvas = document.getElementById('canvas');
                        const media = document.createElement('div');
                        media.className = 'canvas-media';
                        media.id = 'media-' + Date.now();
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.dataset.scale = 1;
                        img.style.transformOrigin = 'center center';
                        img.onwheel = (e) => {
                            e.preventDefault();
                            zoomMedia(img, e);
                        };
                        img.ondragstart = () => false;
                        media.appendChild(img);
                        media.style.left = '50px';
                        media.style.top = '50px';

                        canvas.appendChild(media);
                        makeDraggable(media);
                        makeSelectable(media);
                        addMediaControls(media);
                        updateCode();
                    };
                    reader.readAsDataURL(file);
                }
            };
            input.click();
        }

        function toggleShapeMenu() {
            const menu = document.getElementById('shapeMenu');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        }

        document.addEventListener('click', function(e) {
            const menu = document.getElementById('shapeMenu');
            const button = document.querySelector('.tool-dropdown .tool-button');
            if (!menu.contains(e.target) && e.target !== button) {
                menu.style.display = 'none';
            }
        });

        function selectShape(shapeType) {
            currentShape = shapeType;
            const menu = document.getElementById('shapeMenu');
            menu.style.display = 'none';
        }

        document.getElementById('canvas').addEventListener('click', function(event) {
            if (currentShape) {
                const canvas = document.getElementById('canvas');
                const rect = canvas.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;
                addShape(currentShape, x, y);
                currentShape = null;
                updateCode();
            } else {
                clearSelection();
            }
        });

        function addShape(shapeType, x, y) {
            const canvas = document.getElementById('canvas');
            const shape = document.createElement('div');
            shape.className = `canvas-shape shape-${shapeType}`;
            shape.id = `${shapeType}-${Date.now()}`;
            shape.style.left = `${x}px`;
            shape.style.top = `${y}px`;
            if (shapeType === 'triangle') {
                shape.style.width = '0';
                shape.style.height = '0';
                // Triangle specific styles are handled via CSS classes
            } else if (shapeType === 'star') {
                shape.style.width = '100px';
                shape.style.height = '100px';
            } else {
                shape.style.width = '100px';
                shape.style.height = '100px';
            }

            canvas.appendChild(shape);
            makeDraggable(shape);
            makeSelectable(shape);
            addShapeControls(shape, shapeType);
            updateCode();
        }

        function makeDraggable(element) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            const canvas = document.getElementById('canvas'); // Get canvas
            element.onmousedown = dragMouseDown;

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                e.stopPropagation();
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
                clearSelection();
                element.classList.add('selected');
                showElementControls(element);
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;

                let newTop = element.offsetTop - pos2;
                let newLeft = element.offsetLeft - pos1;

                // Constraints so that the element does not leave the canvas
                const canvasRect = canvas.getBoundingClientRect();
                const elementRect = element.getBoundingClientRect();

                let maxTop = canvas.offsetHeight - element.offsetHeight;
                let maxLeft = canvas.offsetWidth - element.offsetWidth;

                if (newTop < 0) newTop = 0;
                if (newLeft < 0) newLeft = 0;
                if (newTop > maxTop) newTop = maxTop;
                if (newLeft > maxLeft) newLeft = maxLeft;

                element.style.top = newTop + "px";
                element.style.left = newLeft + "px";

                // Update controls position if visible
                const controls = document.querySelector(`.shape-controls[data-shape-id="${element.id}"]`) ||
                                 document.querySelector(`.text-controls[data-text-id="${element.id}"]`) ||
                                 document.querySelector(`.media-controls[data-media-id="${element.id}"]`);
                if (controls && controls.style.display === 'flex') {
                    controls.style.top = `${element.offsetTop - 60}px`;
                    controls.style.left = `${element.offsetLeft}px`;
                }
                updateCode();
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        function makeSelectable(element) {
            element.addEventListener('click', function(e) {
                e.stopPropagation(); // prevent event bubbling
                clearSelection(); // Deselect others
                element.classList.add('selected'); // apply selected class
                showElementControls(element);
            });
        }

        function clearSelection() {
            document.querySelectorAll('.canvas-text.selected, .canvas-media.selected, .canvas-shape.selected').forEach(el => {
                el.classList.remove('selected');
            });
            hideAllControls();
        }

        function showElementControls(element) {
            hideAllControls();
            if (element.classList.contains('canvas-text')) {
                const controls = document.querySelector(`.text-controls[data-text-id="${element.id}"]`);
                controls.style.display = 'flex';
                controls.style.top = `${element.offsetTop - 50}px`;
                controls.style.left = `${element.offsetLeft}px`;
            } else if (element.classList.contains('canvas-media')) {
                const controls = document.querySelector(`.media-controls[data-media-id="${element.id}"]`);
                controls.style.display = 'flex';
                controls.style.top = `${element.offsetTop - 50}px`;
                controls.style.left = `${element.offsetLeft}px`;
            } else if (element.classList.contains('canvas-shape')) {
                const controls = document.querySelector(`.shape-controls[data-shape-id="${element.id}"]`);
                controls.style.display = 'flex';
                controls.style.top = `${element.offsetTop - 60}px`;
                controls.style.left = `${element.offsetLeft}px`;
            }
        }

        function hideAllControls() {
            document.querySelectorAll('.text-controls, .media-controls, .shape-controls').forEach(control => {
                control.style.display = 'none';
            });
        }

        function addTextControls(textElement) {
            const wrapper = document.getElementById('text-controls-wrapper');
            const controls = document.createElement('div');
            controls.className = 'text-controls';
            controls.setAttribute('data-text-id', textElement.id);
            controls.style.display = 'none';
            controls.style.top = `${textElement.offsetTop - 50}px`;
            controls.style.left = `${textElement.offsetLeft}px`;
            controls.innerHTML = `
                <button onclick="toggleBold(this, '${textElement.id}')">B</button>
                <button onclick="toggleItalic(this, '${textElement.id}')">I</button>
                <button onclick="toggleUnderline(this, '${textElement.id}')">U</button>
                <input type="color" onchange="changeTextColor(this.value, '${textElement.id}')" title="Text Color">
                <input type="number" min="1" max="100" value="16" onchange="changeFontSize(this.value, '${textElement.id}')" title="Font Size">
                <select onchange="changeFontFamily(this.value, '${textElement.id}')" title="Font Family">
                    <option value="Arial">Arial</option>
                    <option value="Helvetica">Helvetica</option>
                    <option value="Times New Roman">Times New Roman</option>
                    <option value="Courier New">Courier New</option>
                    <option value="Verdana">Verdana</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Palatino">Palatino</option>
                    <option value="Garamond">Garamond</option>
                    <option value="Bookman">Bookman</option>
                    <option value="Comic Sans MS">Comic Sans MS</option>
                    <option value="Trebuchet MS">Trebuchet MS</option>
                    <option value="Arial Black">Arial Black</option>
                </select>
            `;

            wrapper.appendChild(controls);
        }

        function addMediaControls(mediaElement) {
            const wrapper = document.getElementById('media-controls-wrapper');
            const controls = document.createElement('div');
            controls.className = 'media-controls';
            controls.setAttribute('data-media-id', mediaElement.id);
            controls.style.display = 'none';
            controls.style.top = `${mediaElement.offsetTop - 50}px`;
            controls.style.left = `${mediaElement.offsetLeft}px`;
            controls.innerHTML = `
                <button onclick="removeMedia('${mediaElement.id}')">Remove</button>
                <button onclick="resetZoom('${mediaElement.id}')">Reset Zoom</button>
            `;

            wrapper.appendChild(controls);
        }

        function addShapeControls(shapeElement, shapeType) {
            const wrapper = document.getElementById('shape-controls-wrapper');
            const controls = document.createElement('div');
            controls.className = 'shape-controls';
            controls.setAttribute('data-shape-id', shapeElement.id);
            controls.style.display = 'none';
            controls.style.top = `${shapeElement.offsetTop - 60}px`;
            controls.style.left = `${shapeElement.offsetLeft}px`;
            controls.innerHTML = `
                <input type="color" oninput="changeShapeColor(this.value, '${shapeElement.id}')" title="Fill Color">
                <input type="range" id="cornerSliderValue-${shapeElement.id}" min="0" max="50" value="0" orient="horizontal" oninput="changeCornerRadius(this.value, '${shapeElement.id}')" style="width: 150px; display: inline-block;">
                <span id="cornerSliderValueText-${shapeElement.id}" style="position: absolute; font-size: 14px; left: 110px;">0</span>
                <button onclick="removeShape('${shapeElement.id}')">Remove</button>
            `;

            wrapper.appendChild(controls);
        }

        // Text Control Functions
        function changeTextColor(color, textId) {
            const textElement = document.getElementById(textId);
            const textContent = textElement.querySelector('div');
            textContent.style.color = color;
            updateCode();
        }

        function changeFontSize(size, textId) {
            const textElement = document.getElementById(textId);
            const textContent = textElement.querySelector('div');
            textContent.style.fontSize = size + 'px';
            updateCode();
        }

        function changeFontFamily(family, textId) {
            const textElement = document.getElementById(textId);
            const textContent = textElement.querySelector('div');
            textContent.style.fontFamily = family;
            updateCode();
        }

        function toggleBold(button, textId) {
            const textElement = document.getElementById(textId);
            const textContent = textElement.querySelector('div');
            const isBold = textContent.style.fontWeight === 'bold';
            textContent.style.fontWeight = isBold ? 'normal' : 'bold';
            button.style.backgroundColor = isBold ? '' : '#e0e0e0';
            updateCode();
        }

        function toggleItalic(button, textId) {
            const textElement = document.getElementById(textId);
            const textContent = textElement.querySelector('div');
            const isItalic = textContent.style.fontStyle === 'italic';
            textContent.style.fontStyle = isItalic ? 'normal' : 'italic';
            button.style.backgroundColor = isItalic ? '' : '#e0e0e0';
            updateCode();
        }

        function toggleUnderline(button, textId) {
            const textElement = document.getElementById(textId);
            const textContent = textElement.querySelector('div');
            const isUnderline = textContent.style.textDecoration === 'underline';
            textContent.style.textDecoration = isUnderline ? 'none' : 'underline';
            button.style.backgroundColor = isUnderline ? '' : '#e0e0e0';
            updateCode();
        }

        // Media Control Functions
        function removeMedia(mediaId) {
            const mediaElement = document.getElementById(mediaId);
            mediaElement.remove();
            const mediaControls = document.querySelector(`.media-controls[data-media-id="${mediaId}"]`);
            if (mediaControls) {
                mediaControls.style.display = 'none';
            }
            updateCode();
        }

        function resetZoom(mediaId) {
            const mediaElement = document.getElementById(mediaId);
            const img = mediaElement.querySelector('img');
            img.style.transform = 'scale(1)';
            img.dataset.scale = 1;
            updateCode();
        }

        function zoomMedia(img, e) {
            e.preventDefault();

            const delta = e.deltaY;

            const zoomFactor = 0.05; // Smaller zoom factor for smoother zooming

            // Get current scale
            let scale = img.dataset.scale ? parseFloat(img.dataset.scale) : 1;
            // Update scale
            scale *= delta > 0 ? (1 - zoomFactor) : (1 + zoomFactor);
            // Limit scale
            scale = Math.min(Math.max(0.1, scale), 10);
            img.dataset.scale = scale;

            // Get bounding rectangle
            const rect = img.getBoundingClientRect();

            // Get mouse position relative to image
            const offsetX = e.clientX - rect.left;
            const offsetY = e.clientY - rect.top;

            // Calculate origin
            const originX = (offsetX / img.offsetWidth) * 100;
            const originY = (offsetY / img.offsetHeight) * 100;

            // Set transform origin
            img.style.transformOrigin = `${originX}%${originY}%`;

            // Apply scale transform
            img.style.transform = `scale(${scale})`;
            updateCode();
        }

        // Shape Control Functions
        function changeShapeColor(color, shapeId) {
            const shapeElement = document.getElementById(shapeId);
            if (shapeElement.classList.contains('shape-triangle')) {
                shapeElement.style.borderBottomColor = color;
            } else {
                shapeElement.style.backgroundColor = color;
            }
            updateCode();
        }

        function changeCornerRadius(radius, shapeId) {
            const shapeElement = document.getElementById(shapeId);
            shapeElement.style.borderRadius = `${radius}px`;
            const controls = document.querySelector(`.shape-controls[data-shape-id="${shapeId}"]`);
            if (controls) {
                const setValueText = controls.querySelector(`#cornerSliderValueText-${shapeId}`);
                const setValueInput = controls.querySelector(`#cornerSliderValue-${shapeId}`);
                setValueText.textContent = radius;
                setValueInput.value = radius;
            }
            updateCode();
        }

        function removeShape(shapeId) {
            const shapeElement = document.getElementById(shapeId);
            shapeElement.remove();
            const shapeControls = document.querySelector(`.shape-controls[data-shape-id="${shapeId}"]`);
            if (shapeControls) {
                shapeControls.style.display = 'none';
            }
            updateCode();
        }

        function copyElements() {
            const selectedElement = document.querySelector('.canvas-text.selected, .canvas-media.selected, .canvas-shape.selected');
            if (selectedElement) {
                clipboard.innerHTML = selectedElement.outerHTML;
            }
        }

        function pasteElements() {
            const canvas = document.getElementById('canvas');
            const copiedHtml = clipboard.innerHTML;
            if (copiedHtml) {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = copiedHtml;
                const element = tempDiv.firstChild;
                // Adjust element ID to make it unique
                element.id = element.id + '-' + Date.now();

                element.style.top = `${parseInt(element.style.top) + 20}px`;
                element.style.left = `${parseInt(element.style.left) + 20}px`;

                canvas.appendChild(element);
                makeDraggable(element);
                makeSelectable(element);
                if (element.classList.contains('canvas-text')) {
                    addTextControls(element);
                } else if (element.classList.contains('canvas-media')) {
                    addMediaControls(element);
                } else if (element.classList.contains('canvas-shape')) {
                    let shapeType;
                    if (element.classList.contains('shape-rectangle')) {
                        shapeType = 'rectangle';
                    } else if (element.classList.contains('shape-ellipse')) {
                        shapeType = 'ellipse';
                    } else if (element.classList.contains('shape-star')) {
                        shapeType = 'star';
                    } else if (element.classList.contains('shape-triangle')) {
                        shapeType = 'triangle';
                    }
                    addShapeControls(element, shapeType);
                }
                updateCode();
            }
        }

        function toggleCode() {
            updateCode();
            codeArea.style.display = codeArea.style.display === 'block' ? 'none' : 'block';
        }

        function makeElementDraggable(elmnt) {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            elmnt.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:
                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                // stop moving when mouse button is released:
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        makeElementDraggable(codeArea);

        function updateCode() {
            const canvas = document.getElementById('canvas');
            const canvasStyle = getComputedStyle(canvas);
            const backgroundColor = canvasStyle.backgroundColor;

            const elements = canvas.querySelectorAll('.canvas-text, .canvas-media, .canvas-shape');
            const elementsArray = Array.prototype.map.call(elements, function(element) {
                // Clone the element to avoid modifying the original
                let clone = element.cloneNode(true);

                // Adjust image src attribute
                if (clone.classList.contains('canvas-media')) {
                    let img = clone.querySelector('img');
                    if (img) {
                        let src = img.src;
                        let fileExtension = '';
                        if (src.startsWith('data:image/')) {
                            let match = src.match(/^data:image\/(png|jpeg|jpg);/);
                            let ext = match ? match[1] : 'png';
                            if (ext === 'jpeg') ext = 'jpg'; // use jpg instead of jpeg
                            // Generate 10-digit random number
                            let randomNumber = Math.floor(1000000000 + Math.random() * 9000000000);
                            let fileName = randomNumber + '.' + ext;
                            img.src = fileName;
                        }
                    }
                }

                // Remove selected class and inline styles related to selection
                clone.classList.remove('selected');
                clone.style.outline = '';

                // Return the outerHTML of the cloned element
                return clone.outerHTML;
            });

            // Include styles in the code
            const styles = document.querySelector('style').outerHTML;

            // Build the complete HTML code
            let html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Export</title>${styles}
</head>
<body>
<div id="canvas" style="background-color:${backgroundColor}; position: relative; width: 800px; height: 600px;">${elementsArray.join('\n')}
</div>
</body>
</html>`;

            codeElement.textContent = html;
        }
    </script>
</body>
</html>