last-status

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>Universal Property Panel Demo</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    #app { width: 600px; height: 400px; position: relative; background: #f5f5f5; border: 1px solid #ddd; overflow: hidden; }
    #canvas { width: 100%; height: 100%; position: relative; }
    .element {
      position: absolute; cursor: grab;
      padding: 10px; background: #3498db; color: #fff; border-radius: 4px;
      user-select: none; transition: box-shadow 0.2s;
    }
    .element:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
    .element.selected { outline: 2px solid #2980b9; }
    #properties-panel {
      position: absolute; top: 0; right: -320px;
      width: 320px; height: 100%; background: #fff;
      border-left: 1px solid #ccc; overflow-y: auto;
      transition: right 0.3s;
    }
    #properties-panel.open { right: 0; }
    #properties-panel .header {
      padding: 10px; background: #2980b9; color: #fff;
      display: flex; justify-content: space-between; align-items: center;
    }
    #properties-panel .header h3 { margin: 0; font-size: 16px; }
    #properties-panel .header button {
      background:none; border:none; color:#fff; font-size:18px; cursor:pointer;
    }
    .section { border-bottom: 1px solid #eee; }
    .section .title {
      padding: 8px 10px; background: #f7f7f7; cursor: pointer;
      font-weight: bold;
    }
    .section .content { padding: 10px; display: none; }
    .section.open .content { display: block; }
    .property-row { display: flex; align-items: center; margin: 5px 0; }
    .property-row label { flex: 1; font-size: 14px; }
    .property-row input,
    .property-row select,
    .property-row textarea {
      flex: 2; padding: 5px; font-size: 14px;
      border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box;
    }
    .property-row textarea {...