make it now so that you can edit the sampole text from the elements to type what you want instead of it being sample text, also make the ui better, now write the full code: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CanvaClone Editor</title>
    <style>
        :root {
            --primary-bg: #f0f4f8;
            --secondary-bg: #ffffff;
            --accent-color: #3498db;
            --text-color: #2c3e50;
            --border-color: #bdc3c7;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --hover-color: #ecf0f1;
        }
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            height: 100%;
            overflow: hidden;
            background-color: var(--primary-bg);
            color: var(--text-color);
        }
        #app {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        #top-bar {
            background-color: var(--secondary-bg);
            border-bottom: 1px solid var(--border-color);
            padding: 12px 24px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 4px var(--shadow-color);
        }
        #logo {
            font-weight: bold;
            font-size: 24px;
            color: var(--accent-color);
            margin-right: 30px;
        }
        .top-button {
            padding: 8px 16px;
            margin-right: 16px;
            border: none;
            background-color: transparent;
            color: var(--text-color);
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 6px;
        }
        .top-button:hover {
            background-color: var(--hover-color);
        }
        #main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        #left-sidebar {
            width: 280px;
            background-color: var(--secondary-bg);
            border-right: 1px solid var(--border-color);
            padding: 24px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        #canvas-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: var(--primary-bg);
            overflow: hidden;
            position: relative;
        }
        #toolbar {
            background-color: var(--secondary-bg);
            padding: 12px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 4px var(--shadow-color);
        }
        .toolbar-button {
            padding: 8px;
            margin-right: 8px;
            background-color: transparent;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .toolbar-button:hover {
            background-color: var(--hover-color);
        }
        #canvas-wrapper {
            flex: 1;
            overflow: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #canvas {
            background-color: white;
            box-shadow: 0 4px 12px var(--shadow-color);
            border-radius: 8px;
        }
        #grid {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
        }
        .sidebar-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--text-color);
        }
        .element-button {
            display: inline-flex;
            width: 100px;
            height: 80px;
            margin: 8px;
            background-color: var(--secondary-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            text-align: center;
            cursor: move;
            font-size: 14px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }
        .element-button:hover {
            background-color: var(--hover-color);
            box-shadow: 0 2px 8px var(--shadow-color);
        }
        .element-icon {
            font-size: 28px;
            margin-bottom: 8px;
        }
        .canvas-shape {
            position: absolute;
            cursor: move;
        }
        #color-picker {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        #color-preview {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            margin-right: 12px;
        }
        #color-input {
            flex: 1;
        }
        #layers-panel {
            margin-top: 20px;
            flex: 1;
            overflow-y: auto;
        }
        .layer-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
        }
        .layer-item:hover {
            background-color: var(--hover-color);
        }
        .layer-visibility {
            margin-right: 8px;
        }
        .layer-name {
            flex: 1;
        }
        @media (max-width: 768px) {
            #left-sidebar {
                width: 200px;
            }
            .element-button {
                width: 80px;
                height: 60px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="top-bar">
            <div id="logo">CanvaClone</div>
            <button class="top-button">File</button>
            <button class="top-button">Edit</button>
            <button class="top-button">View</button>
            <button class="top-button">Help</button>
        </div>
        <div id="main-content">
            <div id="left-sidebar">
                <div class="sidebar-title">Elements</div>
                <div class="element-button" draggable="true" data-shape="rectangle">
                    <div class="element-icon">■</div>
                    Rectangle
                </div>
                <div class="element-button" draggable="true" data-shape="circle">
                    <div class="element-icon">●</div>
                    Circle
                </div>
                <div class="element-button" draggable="true" data-shape="triangle">
                    <div class="element-icon">▲</div>
                    Triangle
                </div>
                <div class="element-button" draggable="true" data-shape="star">
                    <div class="element-icon">★</div>
                    Star
                </div>
                <div class="element-button" draggable="true" data-shape="text">
                    <div class="element-icon">T</div>
                    Text
                </div>
                <div class="element-button" draggable="true" data-shape="hexagon">
                    <div class="element-icon">⬢</div>
                    Hexagon
                </div>
                <div class="element-button" draggable="true" data-shape="heart">
                    <div class="element-icon">♥</div>
                    Heart
                </div>
                <div class="element-button" draggable="true" data-shape="diamond">
                    <div class="element-icon">◆</div>
                    Diamond
                </div>
                <div id="color-picker">
                    <div id="color-preview"></div>
                    <input type="color" id="color-input" value="#3498db">
                </div>
                <div id="layers-panel">
                    <div class="sidebar-title">Layers</div>
                    <!-- Layers will be dynamically added here -->
                </div>
            </div>
            <div id="canvas-container">
                <div id="toolbar">
                    <button class="toolbar-button" id="delete-button">Delete</button>
                    <button class="toolbar-button" id="bring-forward-button">Bring Forward</button>
                    <button class="toolbar-button" id="send-backward-button">Send Backward</button>
                    <button class="toolbar-button" id="duplicate-button">Duplicate</button>
                </div>
                <div id="canvas-wrapper">
                    <canvas id="canvas" width="1080" height="1080"></canvas>
                    <canvas id="grid" width="1080" height="1080"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const grid = document.getElementById('grid');
        const gridCtx = grid.getContext('2d');
        const canvasContainer = document.getElementById('canvas-wrapper');
        const colorPreview = document.getElementById('color-preview');
        const colorInput = document.getElementById('color-input');
        const layersPanel = document.getElementById('layers-panel');
        const deleteButton = document.getElementById('delete-button');
        const bringForwardButton = document.getElementById('bring-forward-button');
        const sendBackwardButton = document.getElementById('send-backward-button');
        const duplicateButton = document.getElementById('duplicate-button');

        let currentColor = '#3498db';
        let shapes = [];
        let selectedShape = null;
        let isDragging = false;
        let isResizing = false;
        let dragStartX, dragStartY;
        let resizeHandle = '';

        colorPreview.style.backgroundColor = currentColor;
        colorInput.value = currentColor;

        // Draw hidden grid
        function drawGrid() {
            gridCtx.strokeStyle = 'rgba(189, 195, 199, 0.2)';
            gridCtx.lineWidth = 1;
            for (let i = 0; i < 1080; i += 20) {
                gridCtx.beginPath();
                gridCtx.moveTo(i, 0);
                gridCtx.lineTo(i, 1080);
                gridCtx.stroke();
                gridCtx.beginPath();
                gridCtx.moveTo(0, i);
                gridCtx.lineTo(1080, i);
                gridCtx.stroke();
            }
        }

        drawGrid();

        // Shape drawing functions
        const shapeFunctions = {
            rectangle: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                ctx.fillRect(x - width/2, y - height/2, width, height);
            },
            circle: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.ellipse(x, y, width/2, height/2, 0, 0, 2 * Math.PI);
                ctx.fill();
            },
            triangle: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.moveTo(x, y - height/2);
                ctx.lineTo(x - width/2, y + height/2);
                ctx.lineTo(x + width/2, y + height/2);
                ctx.closePath();
                ctx.fill();
            },
            star: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                const spikes = 5;
                const outerRadius = Math.min(width, height) / 2;
                const innerRadius = outerRadius / 2;
                for (let i = 0; i < spikes * 2; i++) {
                    const radius = i % 2 === 0 ? outerRadius : innerRadius;
                    const angleRad = (Math.PI / spikes) * i - Math.PI / 2;
                    ctx.lineTo(x + radius * Math.cos(angleRad), y + radius * Math.sin(angleRad));
                }
                ctx.closePath();
                ctx.fill();
            },
            text: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                const fontSize = Math.min(width, height) / 5;
                ctx.font = `${fontSize}px Inter`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('Sample Text', x, y);
            },
            hexagon: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                const radius = Math.min(width, height) / 2;
                for (let i = 0; i < 6; i++) {
                    const angle = (Math.PI / 3) * i;
                    ctx.lineTo(x + radius * Math.cos(angle), y + radius * Math.sin(angle));
                }
                ctx.closePath();
                ctx.fill();
            },
            heart: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                const topCurveHeight = height * 0.3;
                ctx.moveTo(x, y + topCurveHeight);
                ctx.bezierCurveTo(x, y, x - width / 2, y, x - width / 2, y + topCurveHeight);
                ctx.bezierCurveTo(x - width / 2, y + (height + topCurveHeight) / 2, x, y + height, x, y + height);
                ctx.bezierCurveTo(x + width / 2, y + (height + topCurveHeight) / 2, x + width / 2, y + topCurveHeight, x + width / 2, y + topCurveHeight);
                ctx.bezierCurveTo(x + width / 2, y, x, y, x, y + topCurveHeight);
                ctx.closePath();
                ctx.fill();
            },
            diamond: (ctx, x, y, width, height, color) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.moveTo(x, y - height / 2);
                ctx.lineTo(x + width / 2, y);
                ctx.lineTo(x, y + height / 2);
                ctx.lineTo(x - width / 2, y);
                ctx.closePath();
                ctx.fill();
            }
        };

        function drawShape(shape) {
            shapeFunctions[shape.type](ctx, shape.x, shape.y, shape.width, shape.height, shape.color);
        }

        function redrawCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            shapes.forEach(drawShape);
            if (selectedShape) {
                drawResizeHandles(selectedShape);
            }
            updateLayersPanel();
        }

        function drawResizeHandles(shape) {
            const handles = [
                { class: 'nw', x: shape.x - shape.width/2, y: shape.y - shape.height/2 },
                { class: 'ne', x: shape.x + shape.width/2, y: shape.y - shape.height/2 },
                { class: 'sw', x: shape.x - shape.width/2, y: shape.y + shape.height/2 },
                { class: 'se', x: shape.x + shape.width/2, y: shape.y + shape.height/2 }
            ];

            handles.forEach(handle => {
                ctx.fillStyle = 'white';
                ctx.strokeStyle = '#3498db';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.arc(handle.x, handle.y, 6, 0, 2 * Math.PI);
                ctx.fill();
                ctx.stroke();
            });
        }

        // Drag and drop functionality
        document.querySelectorAll('.element-button').forEach(button => {
            button.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('text/plain', e.target.dataset.shape);
            });
        });

        canvasContainer.addEventListener('dragover', (e) => {
            e.preventDefault();
        });

        canvasContainer.addEventListener('drop', (e) => {
            e.preventDefault();
            const shapeType = e.dataTransfer.getData('text');
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const newShape = {
                type: shapeType,
                x: x,
                y: y,
                width: 100,
                height: 100,
                color: currentColor
            };
            
            shapes.push(newShape);
            redrawCanvas();
        });

        // Shape selection, dragging, resizing, and color change
        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            selectedShape = shapes.find(shape => 
                x >= shape.x - shape.width/2 && 
                x <= shape.x + shape.width/2 && 
                y >= shape.y - shape.height/2 && 
                y <= shape.y + shape.height/2
            );

            if (selectedShape) {
                isDragging = true;
                dragStartX = x - selectedShape.x;
                dragStartY = y - selectedShape.y;

                // Check if clicked on a resize handle
                const handleSize = 12;
                const handles = [
                    { class: 'nw', x: selectedShape.x - selectedShape.width/2, y: selectedShape.y - selectedShape.height/2 },
                    { class: 'ne', x: selectedShape.x + selectedShape.width/2, y: selectedShape.y - selectedShape.height/2 },
                    { class: 'sw', x: selectedShape.x - selectedShape.width/2, y: selectedShape.y + selectedShape.height/2 },
                    { class: 'se', x: selectedShape.x + selectedShape.width/2, y: selectedShape.y + selectedShape.height/2 }
                ];

                for (const handle of handles) {
                    if (Math.abs(x - handle.x) <= handleSize/2 && Math.abs(y - handle.y) <= handleSize/2) {
                        isResizing = true;
                        resizeHandle = handle.class;
                        break;
                    }
                }
            }

            redrawCanvas();
        });

        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            if (isDragging && selectedShape) {
                if (isResizing) {
                    // Resize the shape
                    switch(resizeHandle) {
                        case 'nw':
                            selectedShape.width = (selectedShape.x + selectedShape.width/2) - x;
                            selectedShape.height = (selectedShape.y + selectedShape.height/2) - y;
                            selectedShape.x = x + selectedShape.width/2;
                            selectedShape.y = y + selectedShape.height/2;
                            break;
                        case 'ne':
                            selectedShape.width = x - (selectedShape.x - selectedShape.width/2);
                            selectedShape.height = (selectedShape.y + selectedShape.height/2) - y;
                            selectedShape.y = y + selectedShape.height/2;
                            break;
                        case 'sw':
                            selectedShape.width = (selectedShape.x + selectedShape.width/2) - x;
                            selectedShape.height = y - (selectedShape.y - selectedShape.height/2);
                            selectedShape.x = x + selectedShape.width/2;
                            break;
                        case 'se':
                            selectedShape.width = x - (selectedShape.x - selectedShape.width/2);
                            selectedShape.height = y - (selectedShape.y - selectedShape.height/2);
                            break;
                    }
                } else {
                    // Move the shape
                    selectedShape.x = x - dragStartX;
                    selectedShape.y = y - dragStartY;
                }

                redrawCanvas();
            }
        });

        canvas.addEventListener('mouseup', () => {
            isDragging = false;
            isResizing = false;
        });

        // Color picker functionality
        colorInput.addEventListener('input', (e) => {
            currentColor = e.target.value;
            colorPreview.style.backgroundColor = currentColor;
            if (selectedShape) {
                selectedShape.color = currentColor;
                redrawCanvas();
            }
        });

        // Toolbar functionality
        deleteButton.addEventListener('click', () => {
            if (selectedShape) {
                shapes = shapes.filter(shape => shape !== selectedShape);
                selectedShape = null;
                redrawCanvas();
            }
        });

        bringForwardButton.addEventListener('click', () => {
            if (selectedShape) {
                const index = shapes.indexOf(selectedShape);
                if (index < shapes.length - 1) {
                    [shapes[index], shapes[index + 1]] = [shapes[index + 1], shapes[index]];
                    redrawCanvas();
                }
            }
        });

        sendBackwardButton.addEventListener('click', () => {
            if (selectedShape) {
                const index = shapes.indexOf(selectedShape);
                if (index > 0) {
                    [shapes[index], shapes[index - 1]] = [shapes[index - 1], shapes[index]];
                    redrawCanvas();
                }
            }
        });

        duplicateButton.addEventListener('click', () => {
            if (selectedShape) {
                const newShape = { ...selectedShape };
                newShape.x += 20;
                newShape.y += 20;
                shapes.push(newShape);
                selectedShape = newShape;
                redrawCanvas();
            }
        });

        // Layers panel functionality
        function updateLayersPanel() {
            layersPanel.innerHTML = '<div class="sidebar-title">Layers</div>';
            shapes.slice().reverse().forEach((shape, index) => {
                const layerItem = document.createElement('div');
                layerItem.className = 'layer-item';
                layerItem.innerHTML = `
                    <input type="checkbox" class="layer-visibility" checked>
                    <span class="layer-name">${shape.type} ${shapes.length - index}</span>
                `;
                layerItem.addEventListener('click', () => {
                    selectedShape = shape;
                    redrawCanvas();
                });
                layersPanel.appendChild(layerItem);
            });
        }

        // Initialize
        redrawCanvas();
    </script>
</body>
</html>