i am trying to create a canva simulator using websim.  i need you to define the features we need for such a project knowing it is supposed to create designs if the user wants it so using ai (mostly design whatever the user wants using html, css and js with the viewing part being just like a place for viewing whatever the ai has created. the viewing box should allow editing through drag and drop within which the html css code is automatically changed, heres where we are currently, if youve understood everything youll give me the next prompt else ask me questions for clarification:
<html><head><base href="https://www.canva.com">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced AI-Powered Design Tool</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.17/interact.min.js"></script>
<style>
  :root {
    --primary-color: #4a90e2;
    --secondary-color: #f0f0f0;
    --text-color: #333;
    --hover-color: #3a7cbd;
  }

  body {
    color: var(--text-color);
  }

  .navbar {
    background-color: var(--primary-color);
    padding: 10px 20px;
    color: white;
  }

  .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .navbar li {
    position: relative;
    margin-right: 20px;
  }

  .navbar a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
  }

  .navbar a:hover {
    background-color: var(--hover-color);
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: var(--secondary-color);
  }

  .navbar li:hover .dropdown-content {
    display: block;
  }

  body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
    overflow: hidden;
  }
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .input-area {
    padding: 20px;
    background-color: var(--secondary-color);
    border-bottom: 1px solid #ccc;
  }
  #designPrompt {
    width: calc(100% - 120px);
    padding: 10px;
    font-size: 16px;
  }
  .design-area {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
  }
  .toolbar {
    width: 250px;
    background-color: var(--secondary-color);
    padding: 20px;
    overflow-y: auto;
  }
  .canvas-area {
    flex-grow: 1;
    background-color: #f8f8f8;
    position: relative;
    overflow: auto;
  }
  .canvas {
    width: 800px;
    height: 600px;
    background-color: white;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    position: relative;
  }
  .toolbar button, .toolbar input, .toolbar select {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  .toolbar button:hover, .toolbar select:hover {
    background-color: var(--hover-color);
    color: white;
  }
  .actions {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
  .actions button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    margin-left: 10px;
  }
  .actions button:hover {
    background-color: var(--hover-color);
  }
  .draggable {
    position: absolute;
    cursor: move;
    user-select: none;
  }
  .text-box {
    min-width: 50px;
    min-height: 20px;
    padding: 5px;
    border: 1px dashed #999;
  }
  .shape {
    width: 50px;
    height: 50px;
  }
  .circle {
    border-radius: 50%;
  }
  .resize-handle {
    width: 10px;
    height: 10px;
    background-color: #4CAF50;
    position: absolute;
    right: -5px;
    bottom: -5px;
    cursor: se-resize;
  }
  .rotate-handle {
    width: 20px;
    height: 20px;
    background-color: #2196F3;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    cursor: grab;
  }
  .alignment-tools {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .alignment-tools button {
    width: auto;
    padding: 5px 10px;
  }
  .z-index-tools {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .z-index-tools button {
    width: auto;
    padding: 5px 10px;
  }
  .locked {
    pointer-events: none;
  }
  .locked::after {
    content: '🔒';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
  }
  .locked:hover {
    cursor: not-allowed;
  }
  #lockElement:disabled, #unlockElement:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>
</head>
<body>
<nav class="navbar">
  <ul>
    <li>
      <a href="#">File</a>
      <div class="dropdown-content">
        <a href="#" id="newDesign">New</a>
        <a href="#" id="openDesign">Open</a>
        <a href="#" id="saveDesign">Save</a>
        <a href="#" id="exportPDF">Export as PDF</a>
      </div>
    </li>
    <li>
      <a href="#">Edit</a>
      <div class="dropdown-content">
        <a href="#" id="undoAction">Undo</a>
        <a href="#" id="redoAction">Redo</a>
        <a href="#" id="cutElement">Cut</a>
        <a href="#" id="copyElement">Copy</a>
        <a href="#" id="pasteElement">Paste</a>
      </div>
    </li>
    <li>
      <a href="#">View</a>
      <div class="dropdown-content">
        <a href="#" id="zoomIn">Zoom In</a>
        <a href="#" id="zoomOut">Zoom Out</a>
        <a href="#" id="fitScreen">Fit to Screen</a>
      </div>
    </li>
  </ul>
</nav>
<div class="container">
  <div class="input-area">
    <input type="text" id="designPrompt" placeholder="Describe your design (e.g., 'I want a persona card for an athlete named Pierre from France')">
    <button id="generateDesign">Generate Design</button>
  </div>
  <div class="design-area">
    <div class="toolbar">
      <h2>Tools</h2>
      <button id="addText">Add Text</button>
      <button id="addImage">Add Image</button>
      <select id="addShape">
        <option value="">Add Shape</option>
        <option value="rectangle">Rectangle</option>
        <option value="circle">Circle</option>
      </select>
      <h3>Text Options</h3>
      <select id="fontFamily">
        <option value="Arial">Arial</option>
        <option value="Helvetica">Helvetica</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Courier">Courier</option>
      </select>
      <input type="number" id="fontSize" min="8" max="72" value="16" placeholder="Font Size">
      <input type="color" id="fontColor" value="#000000">
      <h3>Element Options</h3>
      <input type="color" id="fillColor" value="#ffffff">
      <input type="number" id="opacity" min="0" max="100" value="100" placeholder="Opacity %">
      <h3>Alignment</h3>
      <div class="alignment-tools">
        <button id="alignLeft">Left</button>
        <button id="alignCenter">Center</button>
        <button id="alignRight">Right</button>
      </div>
      <div class="alignment-tools">
        <button id="alignTop">Top</button>
        <button id="alignMiddle">Middle</button>
        <button id="alignBottom">Bottom</button>
      </div>
      <h3>Layer Order</h3>
      <div class="z-index-tools">
        <button id="bringForward">Bring Forward</button>
        <button id="sendBackward">Send Backward</button>
      </div>
      <button id="lockElement">Lock Element</button>
      <button id="unlockElement">Unlock Element</button>
      <input type="file" id="imageUpload" accept="image/*" style="display: none;">
      <button id="undo">Undo</button>
      <button id="redo">Redo</button>
    </div>
    <div class="canvas-area">
      <div id="canvas" class="canvas"></div>
    </div>
  </div>
</div>
<div class="actions">
  <button id="save">Save</button>
  <button id="load">Load</button>
  <button id="download">Download PDF</button>
  <button id="saveTemplate">Save as Template</button>
  <button id="loadTemplate">Load Template</button>
</div>

<script>
const canvas = document.getElementById('canvas');
const designPrompt = document.getElementById('designPrompt');
const generateDesignBtn = document.getElementById('generateDesign');
const addTextBtn = document.getElementById('addText');
const addImageBtn = document.getElementById('addImage');
const addShapeSelect = document.getElementById('addShape');
const fontFamilySelect = document.getElementById('fontFamily');
const fontSizeInput = document.getElementById('fontSize');
const fontColorInput = document.getElementById('fontColor');
const fillColorInput = document.getElementById('fillColor');
const opacityInput = document.getElementById('opacity');
const imageUpload = document.getElementById('imageUpload');
const undoBtn = document.getElementById('undo');
const redoBtn = document.getElementById('redo');
const saveBtn = document.getElementById('save');
const loadBtn = document.getElementById('load');
const downloadBtn = document.getElementById('download');
const saveTemplateBtn = document.getElementById('saveTemplate');
const loadTemplateBtn = document.getElementById('loadTemplate');
const alignLeftBtn = document.getElementById('alignLeft');
const alignCenterBtn = document.getElementById('alignCenter');
const alignRightBtn = document.getElementById('alignRight');
const alignTopBtn = document.getElementById('alignTop');
const alignMiddleBtn = document.getElementById('alignMiddle');
const alignBottomBtn = document.getElementById('alignBottom');
const bringForwardBtn = document.getElementById('bringForward');
const sendBackwardBtn = document.getElementById('sendBackward');
const lockElementBtn = document.getElementById('lockElement');
const unlockElementBtn = document.getElementById('unlockElement');

let selectedElement = null;
let history = [];
let historyIndex = -1;

async function fetchData() {
  try {
    const response = await fetch('https://e2.wbsm.ai/api/s/page');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error.message);
  }
}

async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      console.error(`Attempt ${i + 1} failed:`, error.message);
      if (i === maxRetries - 1) throw error;
    }
  }
}

async function fetchDataWithFallback() {
  try {
    const data = await fetchWithRetry('https://e2.wbsm.ai/api/s/page');
    return data;
  } catch (error) {
    console.error('All attempts failed, using fallback data');
    return getFallbackData();
  }
}

function getFallbackData() {
}

function checkOnline() {
  if (!navigator.onLine) {
    console.log('You are currently offline');
  }
}

window.addEventListener('online', checkOnline);
window.addEventListener('offline', checkOnline);

function generateDesign() {
  const prompt = designPrompt.value.toLowerCase();
  canvas.innerHTML = '';
  
  if (prompt.includes('persona card') && prompt.includes('athlete')) {
    addElement('rectangle', '', { width: '700px', height: '400px', backgroundColor: '#f0f0f0' });
    addElement('circle', '', { width: '150px', height: '150px', backgroundColor: '#ddd', left: '50px', top: '50px' });
    addElement('text', 'Add Photo', { left: '80px', top: '220px', fontSize: '14px', color: '#666' });
    addElement('text', 'Name: Pierre', { left: '250px', top: '50px', fontSize: '24px', fontWeight: 'bold' });
    addElement('text', 'Country: France', { left: '250px', top: '90px', fontSize: '18px' });
    addElement('text', 'Sport: [Enter Sport]', { left: '250px', top: '130px', fontSize: '18px' });
    addElement('text', 'Age: [Enter Age]', { left: '250px', top: '170px', fontSize: '18px' });
    addElement('text', 'Achievements:', { left: '250px', top: '210px', fontSize: '18px', fontWeight: 'bold' });
    addElement('text', '• [Enter Achievement 1]', { left: '270px', top: '240px', fontSize: '16px' });
    addElement('text', '• [Enter Achievement 2]', { left: '270px', top: '270px', fontSize: '16px' });
    addElement('text', '• [Enter Achievement 3]', { left: '270px', top: '300px', fontSize: '16px' });
  } else {
    addElement('text', 'Your Design Here', { left: '50%', top: '50%', fontSize: '24px', fontWeight: 'bold', transform: 'translate(-50%, -50%)' });
  }
  
  addToHistory();
}

function addElement(type, content = '', styles = {}) {
  const element = document.createElement('div');
  element.classList.add('draggable');
  
  switch(type) {
    case 'text':
      element.classList.add('text-box');
      element.contentEditable = true;
      element.textContent = content || 'Edit me';
      break;
    case 'image':
      element.innerHTML = `<img src="${content}" alt="Uploaded image" style="max-width: 100%; max-height: 100%;">`;
      break;
    case 'rectangle':
    case 'circle':
      element.classList.add('shape', type);
      element.style.backgroundColor = styles.backgroundColor || fillColorInput.value;
      break;
  }
  
  Object.assign(element.style, styles);
  
  const resizeHandle = document.createElement('div');
  resizeHandle.classList.add('resize-handle');
  element.appendChild(resizeHandle);

  const rotateHandle = document.createElement('div');
  rotateHandle.classList.add('rotate-handle');
  element.appendChild(rotateHandle);
  
  canvas.appendChild(element);
  makeDraggable(element);
  makeResizable(element);
  makeRotatable(element);
}

function makeDraggable(element) {
  interact(element).draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    listeners: {
      move: dragMoveListener,
      end: function (event) {
        addToHistory();
      }
    },
    allowFrom: ':not(.locked)'  
  });
}

function dragMoveListener(event) {
  var target = event.target;
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

  target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
}

function makeResizable(element) {
  interact(element).resizable({
    edges: { bottom: true, right: true },
    listeners: {
      move: function (event) {
        if (event.target.hasAttribute('data-locked')) return;  
        let { x, y } = event.target.dataset;
        x = parseFloat(x) || 0;
        y = parseFloat(y) || 0;

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        });
      },
      end: function (event) {
        if (event.target.hasAttribute('data-locked')) return;  
        addToHistory();
      }
    }
  });
}

function makeRotatable(element) {
  const rotateHandle = element.querySelector('.rotate-handle');
  interact(rotateHandle).draggable({
    listeners: {
      move: function (event) {
        if (event.target.closest('.draggable').hasAttribute('data-locked')) return;  
        const rect = element.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const angle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
        element.style.transform = `translate(${element.dataset.x || 0}px, ${element.dataset.y || 0}px) rotate(${angle}rad)`;
      },
      end: function (event) {
        if (event.target.closest('.draggable').hasAttribute('data-locked')) return;  
        addToHistory();
      }
    }
  });
}

function addToHistory() {
  historyIndex++;
  history = history.slice(0, historyIndex);
  history.push(canvas.innerHTML);
  updateUndoRedoButtons();
}

function undo() {
  if (historyIndex > 0) {
    historyIndex--;
    canvas.innerHTML = history[historyIndex];
    updateUndoRedoButtons();
  }
}

function redo() {
  if (historyIndex < history.length - 1) {
    historyIndex++;
    canvas.innerHTML = history[historyIndex];
    updateUndoRedoButtons();
  }
}

function updateUndoRedoButtons() {
  undoBtn.disabled = historyIndex <= 0;
  redoBtn.disabled = historyIndex >= history.length - 1;
}

function saveDesign() {
  localStorage.setItem('canvasDesign', canvas.innerHTML);
  localStorage.setItem('designPrompt', designPrompt.value);
  alert('Design saved successfully!');
}

function loadDesign() {
  const savedDesign = localStorage.getItem('canvasDesign');
  const savedPrompt = localStorage.getItem('designPrompt');
  if (savedDesign && savedPrompt) {
    canvas.innerHTML = savedDesign;
    designPrompt.value = savedPrompt;
    addToHistory();
  } else {
    alert('No saved design found.');
  }
}

function downloadPDF() {
  html2canvas(canvas).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jspdf.jsPDF();
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('design.pdf');
  });
}

function saveTemplate() {
  const template = {
    canvas: canvas.innerHTML,
    prompt: designPrompt.value
  };
  const templateString = JSON.stringify(template);
  const blob = new Blob([templateString], {type: 'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'design_template.json';
  a.click();
  URL.revokeObjectURL(url);
}

function loadTemplate() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.json';
  input.onchange = e => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = readerEvent => {
      try {
        const template = JSON.parse(readerEvent.target.result);
        canvas.innerHTML = template.canvas;
        designPrompt.value = template.prompt;
        addToHistory();
      } catch (error) {
        alert('Error loading template: ' + error.message);
      }
    }
    reader.readAsText(file);
  }
  input.click();
}

function alignElements(alignment) {
  const selectedElements = Array.from(canvas.querySelectorAll('.draggable'));
  if (selectedElements.length === 0) return;

  const canvasRect = canvas.getBoundingClientRect();

  switch (alignment) {
    case 'left':
      selectedElements.forEach(el => el.style.left = '0px');
      break;
    case 'center':
      selectedElements.forEach(el => el.style.left = `${(canvasRect.width - el.offsetWidth) / 2}px`);
      break;
    case 'right':
      selectedElements.forEach(el => el.style.left = `${canvasRect.width - el.offsetWidth}px`);
      break;
    case 'top':
      selectedElements.forEach(el => el.style.top = '0px');
      break;
    case 'middle':
      selectedElements.forEach(el => el.style.top = `${(canvasRect.height - el.offsetHeight) / 2}px`);
      break;
    case 'bottom':
      selectedElements.forEach(el => el.style.top = `${canvasRect.height - el.offsetHeight}px`);
      break;
  }

  addToHistory();
}

function changeZIndex(direction) {
  if (!selectedElement) return;

  const elements = Array.from(canvas.children);
  const currentIndex = elements.indexOf(selectedElement);

  if (direction === 'forward' && currentIndex < elements.length - 1) {
    canvas.insertBefore(selectedElement, elements[currentIndex + 2]);
  } else if (direction === 'backward' && currentIndex > 0) {
    canvas.insertBefore(selectedElement, elements[currentIndex - 1]);
  }

  addToHistory();
}

canvas.addEventListener('click', (e) => {
  selectedElement = e.target.closest('.draggable');
  if (selectedElement) {
    updateElementStyles(selectedElement);
    updateLockButtons();
  }
});

function updateElementStyles(element) {
  if (element.classList.contains('text-box')) {
    fontFamilySelect.value = element.style.fontFamily || 'Arial';
    fontSizeInput.value = parseInt(element.style.fontSize) || 16;
    fontColorInput.value = rgb2hex(element.style.color || '#000000');
  }
  fillColorInput.value = rgb2hex(element.style.backgroundColor || '#ffffff');
  opacityInput.value = Math.round((element.style.opacity || 1) * 100);
}

function rgb2hex(rgb) {
  if (rgb.startsWith('#')) return rgb;
  rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
  return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}

function lockElement() {
  if (selectedElement) {
    selectedElement.classList.add('locked');
    selectedElement.setAttribute('data-locked', 'true');
    updateLockButtons();
    addToHistory();
  }
}

function unlockElement() {
  if (selectedElement) {
    selectedElement.classList.remove('locked');
    selectedElement.removeAttribute('data-locked');
    updateLockButtons();
    addToHistory();
  }
}

function updateLockButtons() {
  if (selectedElement) {
    const isLocked = selectedElement.hasAttribute('data-locked');
    lockElementBtn.disabled = isLocked;
    unlockElementBtn.disabled = !isLocked;
  } else {
    lockElementBtn.disabled = true;
    unlockElementBtn.disabled = true;
  }
}

generateDesignBtn.addEventListener('click', generateDesign);
addTextBtn.addEventListener('click', () => addElement('text'));
addImageBtn.addEventListener('click', () => imageUpload.click());
addShapeSelect.addEventListener('change', (e) => {
  if (e.target.value) addElement(e.target.value);
});
imageUpload.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => addElement('image', e.target.result);
    reader.readAsDataURL(file);
  }
});
fontFamilySelect.addEventListener('change', () => {
  if (selectedElement && selectedElement.classList.contains('text-box')) {
    selectedElement.style.fontFamily = fontFamilySelect.value;
    addToHistory();
  }
});
fontSizeInput.addEventListener('change', () => {
  if (selectedElement && selectedElement.classList.contains('text-box')) {
    selectedElement.style.fontSize = `${fontSizeInput.value}px`;
    addToHistory();
  }
});
fontColorInput.addEventListener('change', () => {
  if (selectedElement && selectedElement.classList.contains('text-box')) {
    selectedElement.style.color = fontColorInput.value;
    addToHistory();
  }
});
fillColorInput.addEventListener('change', () => {
  if (selectedElement) {
    selectedElement.style.backgroundColor = fillColorInput.value;
    addToHistory();
  }
});
opacityInput.addEventListener('change', () => {
  if (selectedElement) {
    selectedElement.style.opacity = opacityInput.value / 100;
    addToHistory();
  }
});
undoBtn.addEventListener('click', undo);
redoBtn.addEventListener('click', redo);
saveBtn.addEventListener('click', saveDesign);
loadBtn.addEventListener('click', loadDesign);
downloadBtn.addEventListener('click', downloadPDF);
saveTemplateBtn.addEventListener('click', saveTemplate);
loadTemplateBtn.addEventListener('click', loadTemplate);
alignLeftBtn.addEventListener('click', () => alignElements('left'));
alignCenterBtn.addEventListener('click', () => alignElements('center'));
alignRightBtn.addEventListener('click', () => alignElements('right'));
alignTopBtn.addEventListener('click', () => alignElements('top'));
alignMiddleBtn.addEventListener('click', () => alignElements('middle'));
alignBottomBtn.addEventListener('click', () => alignElements('bottom'));
bringForwardBtn.addEventListener('click', () => changeZIndex('forward'));
sendBackwardBtn.addEventListener('click', () => changeZIndex('backward'));
lockElementBtn.addEventListener('click', lockElement);
unlockElementBtn.addEventListener('click', unlockElement);

document.getElementById('newDesign').addEventListener('click', () => {
  canvas.innerHTML = '';
  designPrompt.value = '';
  addToHistory();
});

document.getElementById('openDesign').addEventListener('click', loadDesign);
document.getElementById('saveDesign').addEventListener('click', saveDesign);
document.getElementById('exportPDF').addEventListener('click', downloadPDF);

document.getElementById('undoAction').addEventListener('click', undo);
document.getElementById('redoAction').addEventListener('click', redo);

document.getElementById('cutElement').addEventListener('click', () => {
});

document.getElementById('copyElement').addEventListener('click', () => {
});

document.getElementById('pasteElement').addEventListener('click', () => {
});

document.getElementById('zoomIn').addEventListener('click', () => {
});

document.getElementById('zoomOut').addEventListener('click', () => {
});

document.getElementById('fitScreen').addEventListener('click', () => {
});

// Load saved design if exists
loadDesign();
</script>
</body>
</html>