<!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="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16l4-4h9c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H13l-2 2V7h8v10z"/>
                </svg>
            </button>
            <button class="tool-button" onclick="pasteElements()" title="Paste">
                <svg viewBox="0 0 24 24">
                    <path d="M19 3H14.82c-.11-.31-.28-.59-.51-.84l-2-2C12.1.1 11.6 0 11.09 0H5c-1.11 0-2 .89-2 2v16h2V2h5v5h5v4h2V5c0-1.11-.89-2-2-2zm0 6h-2v2h2v9H5v-9h2v-2H5c-1.11 0-2 .89-2 2v9c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2v-9c0-1.11-.89-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>

    <script>
        let currentShape = null;
        let copiedElement = null;
        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) {
                copiedElement = selectedElement.outerHTML;
            }
        }

        function pasteElements() {
            const canvas = document.getElementById('canvas');
            if (copiedElement) {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = copiedElement;
                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;
        }

        // Keyboard shortcuts for copy (Ctrl+C) and paste (Ctrl+V)
        document.addEventListener('keydown', function(e) {
            const activeElement = document.activeElement;
            if (activeElement && (
                activeElement.tagName === 'INPUT' ||
                activeElement.tagName === 'TEXTAREA' ||
                activeElement.isContentEditable
            )) {
                // Don't interfere with typing in input fields or editable divs
                return;
            }

            if (e.ctrlKey && (e.key === 'c' || e.key === 'C')) {
                e.preventDefault();
                copyElements();
            } else if (e.ctrlKey && (e.key === 'v' || e.key === 'V')) {
                e.preventDefault();
                pasteElements();
            }
        });
    </script>
</body>
</html>Write the full complete code dont skip anything, write the full code with the new edits you did just write the full complete code: the star tool is very buggy it doent move correct like the other shapes also for the tool bar for the shapes the shape icon when im clicking it takes miultiple click until it works and opnes the tool box, also I want it copy and paste it send the shape at exactly same location, right now it spawn at random place, also make it a new thing where you can expand the shape like how we did with the media/photo, also I want the color picker the color preview on the tools to be the same color we selected