{ "backgroundColor": "{{appsmith.theme.colors.backgroundColor}}", "borderColor": "{{appsmith.theme.colors.backgroundColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "borderWidth": "1", "bottomRow": 75, "boxShadow": "none", "defaultModel": "{\n \"tips\": [\n \"Pass data to this widget in the default model field\",\n \"Access data in the javascript file using the appsmith.model variable\",\n \"Create events in the widget and trigger them in the javascript file using appsmith.triggerEvent('eventName')\",\n \"Access data in CSS as var(--appsmith-model-{property-name})\"\n ]\n}", "dynamicBindingPathList": [ { "key": "theme" }, { "key": "borderRadius" }, { "key": "backgroundColor" }, { "key": "borderColor" } ], "dynamicHeight": "FIXED", "dynamicTriggerPathList": [ { "key": "onResetClick" } ], "events": [ "onResetClick" ], "isCanvas": false, "isLoading": false, "isSearchWildcard": true, "isVisible": true, "key": "22lyh696pi", "leftColumn": 1, "maxDynamicHeight": 9000, "minDynamicHeight": 4, "mobileBottomRow": 59, "mobileLeftColumn": 8, "mobileRightColumn": 31, "mobileTopRow": 29, "needsErrorInfo": false, "onResetClick": "{{showAlert('Successfully reset!!', '');}}", "parentColumnSpace": 19.546875, "parentId": "0", "parentRowSpace": 10, "renderMode": "CANVAS", "rightColumn": 63, "srcDoc": { "css": "@charset \"UTF-8\";\nhtml,\nbody {\n margin: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n font-family: Arial, sans-serif;\n}\n\n/* Bild + Overlay */\n#imgHolder {\n position: relative;\n width: 100%;\n height: 600px; /* feste Höhe, damit sicher nicht 0 */\n overflow: hidden;\n border-radius: 6px;\n background: #f3f4f6;\n}\n\n#floorplanImage {\n position: absolute;\n inset: 0;\n z-index: 1;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n#seatLayer {\n position: absolute;\n inset: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none; /* Punkte bekommen später pointer-events:auto */\n}\n\n/* Sitzpunkte */\n.seat {\n position: absolute;\n z-index: 3;\n display: block;\n width: 18px;\n height: 18px;\n padding: 0;\n transform: translate(-50%, -50%);\n border: 2px solid #ffffff;\n border-radius: 50%;\n background: #22c55e;\n color: #22c55e;\n cursor: pointer;\n pointer-events: auto;\n appearance: none;\n box-sizing: border-box;\n box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.seat:hover {\n z-index: 10;\n transform: translate(-50%, -50%) scale(1.45);\n box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;\n}\n\n/* Farben nach Status */\n.seat.frei {\n background: #22c55e; /* Grün */\n color: #22c55e;\n}\n\n.seat.belegt {\n background: #ef4444; /* Rot */\n color: #ef4444;\n}\n\n.seat.selected {\n outline: 3px solid #2563eb;\n outline-offset: 3px;\n}\n\n/* Legende */\n#legend {\n display: flex;\n flex-wrap: wrap;\n gap: 14px;\n margin-top: 8px;\n color: #374151;\n font-size: 13px;\n}\n\n.legendItem {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.legendColor {\n display: inline-block;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n}\n\n.legendColor.frei {\n background: #22c55e;\n}\n\n.legendColor.belegt {\n background: #ef4444;\n}", "html": "