nice one

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Interactive Property Panel with Enhanced Text Editor</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-blue: #3498db;
      --secondary-grey: #ecf0f1;
      --text-color: #2c3e50;
      --border-color: #bdc3c7;
      --shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 20px;
      background: var(--secondary-grey);
      color: var(--text-color);
    }
    #app {
      width: 600px;
      height: 400px;
      position: relative;
      background: #fff;
      border: 1px solid var(--border-color);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    #canvas {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .element {
      position: absolute;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s;
      background: var(--primary-blue);
      border: 2px solid #c39e0d;
      border-radius: 4px;
      padding: 10px;
      box-shadow: var(--shadow);
    }
    .element:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    .element.selected {
      box-shadow: 0 0 0 2px var(--primary-blue);
    }
    .element-comment {
      margin-top: 2px;
    }
    #properties-panel {
      position: fixed;
      top: 0;
      right: -300px;
      width: 300px;
      height: 100%;
      background: #fff;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      transition: right 0.3s ease;
      overflow-y: auto;
      z-index: 1000;
    }
    #properties-panel.open {
      right: 0;
    }
    #properties-header {
      padding: 10px;
      background:...