{"id":36156,"date":"2022-09-22T09:53:50","date_gmt":"2022-09-22T07:53:50","guid":{"rendered":"https:\/\/padelcreations.com\/?page_id=36156"},"modified":"2026-05-11T09:49:13","modified_gmt":"2026-05-11T07:49:13","slug":"padel-grundriss-online","status":"publish","type":"page","link":"https:\/\/www.padelcreations.com\/de\/padel-grundriss-online\/","title":{"rendered":"Grundriss Planer f\u00fcr Padel"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"36156\" class=\"elementor elementor-36156 elementor-18645\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-67d7c90 e-flex e-con-boxed e-con e-parent\" data-id=\"67d7c90\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;background_motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd2f2a5 elementor-widget elementor-widget-heading\" data-id=\"bd2f2a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Grundriss Planer f\u00fcr Padel<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-89d85b6 start_working unlock e-flex e-con-boxed e-con e-parent\" data-id=\"89d85b6\" data-element_type=\"container\" data-e-type=\"container\" id=\"start_working unlock\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_bottom&quot;:&quot;triangle-asymmetrical&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M738,99l262-93V0H0v5.6L738,99z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e576e1 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"4e576e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Planen Sie, mit Padel zu starten, und m\u00f6chten wissen, wie viele Padelpl\u00e4tze in den verf\u00fcgbaren Raum passen?<\/p><p>Dieses einzigartige und weltweit erste Online-Tool, das exklusiv f\u00fcr PADEL entwickelt wurde, wird Ihre Frage mit Sicherheit beantworten. Es ist eine Innovation in der Padel-Branche und wurde von PADELCREATIONS entwickelt. Das Beste daran: Es ist f\u00fcr jeden kostenlos nutzbar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-926674d elementor-hidden-desktop e-flex e-con-boxed e-con e-parent\" data-id=\"926674d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-3e01aa3 e-con-full e-flex e-con e-child\" data-id=\"3e01aa3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97770c6 elementor-widget elementor-widget-heading\" data-id=\"97770c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HINWEIS:<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec5451c elementor-widget elementor-widget-text-editor\" data-id=\"ec5451c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Das 2D-Tool ist ausschlie\u00dflich f\u00fcr die Nutzung auf <strong>Desktop-Computern<\/strong> optimiert. Aufgrund der begrenzten Bildschirmaufl\u00f6sung und der Benutzeroberfl\u00e4chen-Einschr\u00e4nkungen wird das Tool auf Smartphones und Tablets nicht unterst\u00fctzt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-8805478 elementor-hidden-mobile elementor-hidden-tablet e-flex e-con-boxed e-con e-parent\" data-id=\"8805478\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a8532e1 elementor-widget elementor-widget-off-canvas\" data-id=\"a8532e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"off-canvas.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div id=\"off-canvas-a8532e1\" class=\"e-off-canvas\" role=\"dialog\" aria-hidden=\"true\" aria-label=\"video tutorial\" aria-modal=\"true\" inert=\"\" data-delay-child-handlers=\"true\">\n\t\t\t<div class=\"e-off-canvas__overlay\"><\/div>\n\t\t\t<div class=\"e-off-canvas__main\">\n\t\t\t\t<div class=\"e-off-canvas__content\">\n\t\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-b3360ce e-con-full e-flex e-con e-child\" data-id=\"b3360ce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-156f77c elementor-widget elementor-widget-video\" data-id=\"156f77c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2025\/01\/Tutorial-2D-Planner-2023-DEU-V2.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d5a58b elementor-align-center elementor-widget elementor-widget-button\" data-id=\"4d5a58b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md elementor-animation-grow\" href=\"#elementor-action%3Aaction%3Doff_canvas%3Aopen%26settings%3DeyJpZCI6ImE4NTMyZTEiLCJkaXNwbGF5TW9kZSI6Im9wZW4ifQ%3D%3D\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-video\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">VIDEOANLEITUNG<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e6e680 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"0e6e680\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md elementor-animation-grow\" href=\"#elementor-action%3Aaction%3Doff_canvas%3Aopen%26settings%3DeyJpZCI6ImI3YTM4YzgiLCJkaXNwbGF5TW9kZSI6Im9wZW4ifQ%3D%3D\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-info-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">SCHNELLANLEITUNG<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7a38c8 elementor-widget elementor-widget-off-canvas\" data-id=\"b7a38c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;prevent_scroll&quot;:&quot;yes&quot;}\" data-widget_type=\"off-canvas.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div id=\"off-canvas-b7a38c8\" class=\"e-off-canvas\" role=\"dialog\" aria-hidden=\"true\" aria-label=\"start guide\" aria-modal=\"true\" inert=\"\" data-delay-child-handlers=\"true\">\n\t\t\t<div class=\"e-off-canvas__overlay\"><\/div>\n\t\t\t<div class=\"e-off-canvas__main\">\n\t\t\t\t<div class=\"e-off-canvas__content\">\n\t\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-a8c077d e-con-full e-flex e-con e-child\" data-id=\"a8c077d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-91b4130 e-flex e-con-boxed e-con e-child\" data-id=\"91b4130\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_bottom&quot;:&quot;triangle-asymmetrical&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M738,99l262-93V0H0v5.6L738,99z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49e7573 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"49e7573\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SCHNELLANLEITUNG<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-750c4b9 e-flex e-con-boxed e-con e-child\" data-id=\"750c4b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0a5346 elementor-widget elementor-widget-text-editor\" data-id=\"a0a5346\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"modal-46447d6\" class=\"uael-modal uael-modal-custom uael-modal-content uael-effect-19 uael-aspect-ratio-16_9 uael-show\"><div class=\"uael-content\"><div class=\"uael-modal-text uael-modal-content-data clearfix\"><div class=\"uael-text-editor elementor-inline-editing\" data-elementor-setting-key=\"ct_content\" data-elementor-inline-editing-toolbar=\"advanced\"><blockquote><p><strong>SCHRITT 1:\u00a0<\/strong>\u00a0Standardm\u00e4\u00dfig ist es metrisch. Nicht verstellbar.\u00a0\u00a0<strong>Raster: 1 Quadrat = 1 x 1 m<\/strong><\/p><p><strong>SCHRITT 2:\u00a0<\/strong>Geben Sie die Abmessungen des Bereichs ein, in dem Sie die Padel Courts installieren m\u00f6chten.<\/p><p><strong>SCHRITT 3:\u00a0<\/strong>Direkt unter dem Bereich &#8222;Fl\u00e4chenma\u00dfe&#8220; sehen Sie die Grafik eines Padelplatzes in der normalen Gr\u00f6\u00dfe von 20 x 10 m und in der Gr\u00f6\u00dfe 20 x 6 m, sowie die sich gr\u00f6ssenverstellbare Objekte in rot.<strong>\u00a0Sie k\u00f6nnen alle diese Objekte in den Bereich reinziehen, indem Sie mit der Maus \u00fcber das Objekt fahren und es mit gedr\u00fcckter rechter Maustaste in den Bereich ziehen.<\/strong>\u00a0An dieser Stelle beginnen Sie mit den gr\u00f6\u00dfenverstellbaren Objekten, wie z. B. S\u00e4ulen, Ecken, Sozialbereich, Laden, Umkleider\u00e4ume, B\u00fcros, Rezeption usw.). Die Padelpl\u00e4tze haben eine feste Gr\u00f6\u00dfe und k\u00f6nnen nicht in der Gr\u00f6\u00dfe angepasst werden.<\/p><p><strong>SCHRITT 4:\u00a0<\/strong><strong>ZIEHEN, ENTFERNEN, KLICKEN, VERSCHIEBEN, DREHEN und BESCHRIFTEN<\/strong>\u00a0Mit den Tasten\u00a0<strong>-5\u00ba<\/strong>,\u00a0<strong>+5\u00ba<\/strong>\u00a0oder\u00a0<strong>+90\u00ba\u00a0<\/strong>k\u00f6nnen Sie die Padel Courts in die gew\u00fcnschte Position bringen. Um das Objekt verschieben zu k\u00f6nnen, muss es zun\u00e4chst angeklickt werden. Das Objekt erh\u00e4lt einen roten Rahmen.<br \/>Sie k\u00f6nnen das Objekt in Schritten von -5\u00ba, + 5\u00ba oder + 90\u00ba drehen. Bringen Sie die Padelpl\u00e4tze in die gew\u00fcnschte Position. Sie k\u00f6nnen so viele Padelpl\u00e4tze hinzuf\u00fcgen, wie Sie m\u00f6chten und passen. Die Anzahl der Padelpl\u00e4tze h\u00e4ngt dann auch vom verf\u00fcgbaren Platz ab.\u00a0<strong>Kennzeichnen Sie jedes Objekt mit einer kurzen Beschreibung.<\/strong><\/p><p><strong>SCHRITT 5:\u00a0<\/strong>F\u00fcgen Sie Ihr Layout in unserem\u00a0<strong>Padel Court Konfigurator<\/strong>\u00a0hinzu, um Ihre Angebotsanfrage zu vervollst\u00e4ndigen. Das wird uns helfen, unsere Magie zu entfalten.<\/p><p><strong>SCHRITT 6:<\/strong>\u00a0<strong>SPEICHERN SIE IHRE ARBEIT, DAMIT SIE AM N\u00c4CHSTEN TAG WEITERMACHEN K\u00d6NNEN.<\/strong><br \/><strong>BILD ALS PNG SPEICHERN<\/strong>:\u00a0Sie k\u00f6nnen Ihre neue Grundrisszeichnung als Bilddatei (PNG) herunterladen.<br \/><strong>DATEI SPEICHERN:<\/strong>\u00a0Sie k\u00f6nnen Ihre Grundrisszeichnung als Datendatei herunterladen.<br \/><strong>DATEI LADEN:<\/strong>\u00a0Sie k\u00f6nnen Ihre Grundrisszeichnung erneut hochladen und mit der Arbeit an Ihrem Projekt fortfahren.<\/p><\/blockquote><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-016846f elementor-hidden-mobile elementor-hidden-tablet e-flex e-con-boxed e-con e-parent\" data-id=\"016846f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-973d44f e-con-full e-flex e-con e-child\" data-id=\"973d44f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5eb22d8 elementor-widget elementor-widget-text-editor\" data-id=\"5eb22d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong><span style=\"color: red;\">\u27a1\ufe0f\u200b Erster Schritt:<\/span><\/strong> Klicken Sie auf das Padel-Spielfeld in der Mitte des Feldes, um es zu bewegen.<br \/>Siehe auch:\u00a0 \u00a0<a href=\"\/de\/grundrisszeichnungen-von-padel-clubs\/\" target=\"_blank\" rel=\"noopener\">Grundrisszeichnungen f\u00fcr Padelanlagen<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbc8747 elementor-widget elementor-widget-html\" data-id=\"fbc8747\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<button id=\"show-password-section\" style=\"\r\n  background: linear-gradient(135deg, #1c3757, #0000ff);\r\n  color: white;\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  padding: 12px 28px;\r\n  border: none;\r\n  border-radius: 12px;\r\n  cursor: pointer;\r\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\r\n  animation: floatSideways 3s ease-in-out infinite;\r\n  transition: all 0.4s ease;\r\n\">\r\n  \ud83d\udc49  EINSCHR\u00c4NKUNGEN AUFHEBEN\r\n<\/button>\r\n\r\n<style>\r\n@keyframes floatSideways {\r\n  0%, 100% {\r\n    transform: translateX(0);\r\n    background: linear-gradient(135deg, #1c3757, #0000ff);\r\n  }\r\n  50% {\r\n    transform: translateX(8px);\r\n    background: linear-gradient(135deg, #76a343, #1c3757);\r\n  }\r\n}\r\n\r\n#show-password-section:hover {\r\n  transform: scale(1.05);\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n  background: linear-gradient(135deg, #76a343, #1c3757);\r\n}\r\n<\/style>\r\n\r\n  \r\n\r\n\r\n<!-- Password container (initially hidden) -->\r\n<div id=\"password-wrapper\" style=\"max-width: 700px; margin: 20px; background-color: #f7f7f7; padding: 10px; border-radius: 8px; display: none; opacity: 0; transition: opacity 3s;\">\r\n    \r\n\r\n  <!-- Password input and button side by side -->\r\n  <div id=\"unlock-container\" style=\"display: flex; gap: 10px; justify-content: center; align-items: center; margin: 20px;\">\r\n    \ud83d\udc49 <input type=\"password\" id=\"unlock-password\" placeholder=\"Code eingeben\" style=\"padding:8px 12px; width: 245px;\" \/>\r\n    <button id=\"unlock-btn\" style=\"padding:8px 20px;\">FREISCHALTEN<\/button>\r\n  <\/div>\r\n\r\n  <!-- Error message container -->\r\n  <div id=\"password-error\" style=\"color: red; font-weight: bold; font-size: 14px; text-align: center; margin-top: 3px; display: none;\"><\/div>\r\n\r\n  <!-- Info message below -->\r\n  <div class=\"password-info-message\" style=\"max-width: 600px; font-size: 16px; line-height: 1.6; text-align: center; margin: 0 auto;\">\r\n    <p><strong>Sie haben noch keinen Freischaltungs-Code?<\/strong>\r\n      Fordern Sie es\r\n      <a href=\"https:\/\/www.padelcreations.com\/de\/kontakt\/\" target=\"_blank\" style=\"color: #76a343; text-decoration: underline;\">hier<\/a> an.<br>\r\n      Wir senden den Code per Email.\r\n    <\/p>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  \/\/ Hover effect\r\n  const btnShow = document.getElementById(\"show-password-section\");\r\n\r\n  btnShow.addEventListener(\"mouseenter\", () => {\r\n    btnShow.style.backgroundColor = \"#1c3757\";\r\n    btnShow.style.transform = \"translateY(-2px)\";\r\n  });\r\n\r\n  btnShow.addEventListener(\"mouseleave\", () => {\r\n    btnShow.style.backgroundColor = \"#0000ff\";\r\n    btnShow.style.transform = \"translateY(0)\";\r\n  });\r\n\r\n  \/\/ Show password section\r\n  btnShow.addEventListener(\"click\", function(e) {\r\n    e.preventDefault();\r\n    const wrapper = document.getElementById(\"password-wrapper\");\r\n    wrapper.style.display = \"block\";\r\n\r\n    setTimeout(() => {\r\n      wrapper.style.opacity = \"1\";\r\n      const target = document.querySelector(\"#start_working, .start_working\");\r\n      if (target) {\r\n        target.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n      }\r\n    }, 50);\r\n\r\n    this.style.display = \"none\";\r\n  });\r\n\r\n  \/\/ Unlock button logic\r\n  const btnUnlock = document.getElementById(\"unlock-btn\");\r\n  const errorDiv = document.getElementById(\"password-error\");\r\n\r\n  btnUnlock.addEventListener(\"click\", () => {\r\n    const input = document.getElementById(\"unlock-password\").value.trim();\r\n    const correctPassword = \"1234\";\r\n\r\n    if (input === correctPassword) {\r\n      errorDiv.style.display = \"none\";\r\n      const wrapper = document.getElementById(\"password-wrapper\");\r\n\r\n      const oldMsg = document.getElementById(\"unlock-message\");\r\n      if (oldMsg) oldMsg.remove();\r\n\r\n      let timeLeft = 3;\r\n\r\n      const messageDiv = document.createElement(\"div\");\r\n      messageDiv.id = \"unlock-message\";\r\n      messageDiv.style.cssText = `\r\n        padding: 20px;\r\n        background-color: #76a343;\r\n        color: white;\r\n        font-weight: bold;\r\n        font-size: 18px;\r\n        border-radius: 8px;\r\n        text-align: center;\r\n        margin-top: 10px;\r\n      `;\r\n      messageDiv.innerHTML = `\r\n        WUNDERBAR! Sie k\u00f6nnen jetzt dieses Tool ohne Einschr\u00e4nkungen nutzen.<br>\r\n        <small style=\"font-weight: normal; font-size: 14px;\">\r\n          Diese Nachricht verschwindet nach <span id=\"countdown\" style=\"color: white; font-weight: bold;\">${timeLeft}<\/span> Sekunden.\r\n        <\/small>\r\n      `;\r\n      wrapper.appendChild(messageDiv);\r\n\r\n      const countdownEl = document.getElementById(\"countdown\");\r\n      const countdownInterval = setInterval(() => {\r\n        timeLeft--;\r\n        countdownEl.textContent = timeLeft;\r\n\r\n        if (timeLeft <= 0) {\r\n          clearInterval(countdownInterval);\r\n          messageDiv.remove();\r\n          wrapper.style.display = \"none\";\r\n        }\r\n      }, 1000);\r\n\r\n      \/\/ Show blurred section and hide restriction message\r\n      const blurredSection = document.querySelector(\".blurred-section\");\r\n      if (blurredSection) {\r\n        blurredSection.classList.add(\"visible\");\r\n        const restrictionMessage = blurredSection.querySelector(\".restriction-hover-message\");\r\n        if (restrictionMessage) {\r\n          restrictionMessage.style.display = \"none\";\r\n        }\r\n      } else {\r\n        console.warn(\"No element with class .blurred-section found!\");\r\n      }\r\n\r\n    } else {\r\n      errorDiv.textContent = \"Falsches Passwort. Bitte nochmal versuchen.\";\r\n      errorDiv.style.display = \"block\";\r\n    }\r\n  });\r\n\r\n  \/\/ Make restriction-hover-message clickable to scroll to .unlock\r\n  const msg = document.querySelector(\".restriction-hover-message\");\r\n  if (msg) {\r\n    msg.style.pointerEvents = \"auto\";\r\n    msg.style.cursor = \"pointer\";\r\n\r\n    msg.addEventListener(\"click\", () => {\r\n      const unlockTarget = document.querySelector(\".unlock\");\r\n      if (unlockTarget) {\r\n        unlockTarget.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n      }\r\n    });\r\n  }\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74cbe1c elementor-widget elementor-widget-html\" data-id=\"74cbe1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n    <link href=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2D-Floorplanner-2026\/css\/padelarea-3.css\" rel=\"stylesheet\">\r\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/drag-drop-touch@1.3.1\/DragDropTouch.js\"><\/script>\r\n\r\n    <script>\r\n        var lang = (document.documentElement.lang || 'en').substring(0, 2);\r\n        var isNS = (navigator.appName == \"Netscape\") ? 1 : 0;\r\n        if (navigator.appName == \"Netscape\") document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);\r\n        document.addEventListener('contextmenu', function(e) { e.preventDefault(); });\r\n        if (window.location.hostname !== 'localhost') {\r\n            document.addEventListener('keydown', function(e) {\r\n                if (e.keyCode == 123) { e.preventDefault(); }\r\n                if (e.ctrlKey && e.shiftKey && e.keyCode == 73) { e.preventDefault(); }\r\n                if (e.ctrlKey && e.keyCode == 85) { e.preventDefault(); }\r\n            });\r\n        }\r\n    <\/script>\r\n\r\n    <style>\r\n    \/* ============================================================\r\n       DESIGN VARIABLES\r\n       ============================================================ *\/\r\n    :root {\r\n        --navy:        #1a2744;\r\n        --navy-mid:    #253a6e;\r\n        --navy-light:  #3d5fa0;\r\n        --pale:        #eef1f8;\r\n        --orange:      #ff7900;\r\n        --red:         #d92647;\r\n        --white:       #ffffff;\r\n        --grey-bg:     #f2f4f7;\r\n        --grey-border: #cdd4e0;\r\n        --text-dark:   #1a2435;\r\n        --text-mid:    #4a5a7a;\r\n        --shadow:      0 2px 8px rgba(0,0,0,0.13);\r\n        --radius:      10px;\r\n    }\r\n\r\n    \/* ============================================================\r\n       ORIGINAL STYLES \u2014 unchanged (needed by JS)\r\n       ============================================================ *\/\r\n    .padel-area-button:hover { text-shadow: 1px 1px 2px black; opacity: 0.8; background-color: #001830; }\r\n    .padel-area-button { background-color: darkgreen; border: none; padding: 0.5rem 1rem; font-size: 1rem; transition: 0.5s; color: white; cursor: pointer; height: 3.2rem; width: 100%; border-radius: 10px; text-align: left; }\r\n    .padel-area-form-hint { font-size: small; font-style: italic; line-height: 1.5em; padding-bottom: 10px; }\r\n    .padel-area-button1, .padel-area-button2, .padel-area-button3 { padding: 0.4rem 0.8rem; font-size: 1rem; transition: all 0.2s ease; color: white; cursor: pointer; height: auto; width: auto; border-radius: 12px; text-align: center; border: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }\r\n    .padel-area-button1:active, .padel-area-button2:active, .padel-area-button3:active { transform: translateY(0); box-shadow: 0 3px 6px rgba(0,0,0,0.2); }\r\n    .padel-area-button1 { background-color: #76a343; }\r\n    .padel-area-button2 { background-color: #ff7900; }\r\n    .padel-area-button3 { background-color: #d92647; }\r\n    .padel-area-button1:hover { background-color: #5f8c32; }\r\n    .padel-area-button2:hover { background-color: #e66d00; }\r\n    .padel-area-button3:hover { background-color: #b71f3b; }\r\n    .padel-area-button1:hover, .padel-area-button2:hover, .padel-area-button3:hover { text-shadow: 1px 1px 2px rgba(0,0,0,0.4); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.25); }\r\n    #textAreaLen, #textAreaWidth { font-size: 20px; font-weight: 800; border: 2px solid #44444; border-radius: 20px; padding: 18px; text-align: center; background: #ededed; width: 100%; }\r\n    #textItemName { float: left; width: 10rem; margin-left: 1rem; margin-top: 0.2rem; }\r\n    #textItemName input { width: 100%; padding: 0.7rem; height: 2rem; }\r\n    \/* \u2500\u2500 Modern popup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .overlay {\r\n        position: fixed !important;\r\n        inset: 0 !important;\r\n        background: rgba(10, 20, 50, 0.75) !important;\r\n        backdrop-filter: blur(4px) !important;\r\n        z-index: 9999 !important;\r\n        display: none;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n    }\r\n    .overlay:target { display: flex !important; }\r\n    .popup {\r\n        position: relative !important;\r\n        top: auto !important;\r\n        left: auto !important;\r\n        transform: none !important;\r\n        margin: 0 !important;\r\n        background: #fff !important;\r\n        border-radius: 16px !important;\r\n        box-shadow: 0 24px 60px rgba(0,0,0,0.35) !important;\r\n        width: 480px !important;\r\n        max-width: 92vw !important;\r\n        padding: 0 !important;\r\n        overflow: hidden !important;\r\n        font-family: 'Barlow', sans-serif !important;\r\n        animation: popupIn 0.25s ease !important;\r\n    }\r\n    @keyframes popupIn {\r\n        from { opacity: 0; transform: scale(0.92); }\r\n        to   { opacity: 1; transform: scale(1); }\r\n    }\r\n    .popup-header {\r\n        background: var(--navy);\r\n        padding: 16px 20px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n    .popup-header img { width: 28px; height: 28px; }\r\n    .popup-header h2 {\r\n        color: #fff;\r\n        font-size: 1rem;\r\n        font-weight: 700;\r\n        margin: 0;\r\n        flex: 1;\r\n        font-family: 'Barlow', sans-serif;\r\n    }\r\n    .popup .close {\r\n        color: rgba(255,255,255,0.7) !important;\r\n        font-size: 1.4rem !important;\r\n        text-decoration: none !important;\r\n        line-height: 1 !important;\r\n        transition: color 0.15s !important;\r\n    }\r\n    .popup .close:hover { color: #fff !important; }\r\n    .popup .content {\r\n        padding: 20px;\r\n        background: #f5f7fa;\r\n    }\r\n    .popup .content iframe,\r\n    .popup .content video {\r\n        width: 100% !important;\r\n        height: 280px !important;\r\n        border: none !important;\r\n        border-radius: 10px !important;\r\n        display: block !important;\r\n        background: #000;\r\n    }\r\n\r\n    \/* ============================================================\r\n       HIDE ORIGINAL SIDEBAR \u2014 keep in DOM so JS works,\r\n       but visually invisible. The canvas grid still has its\r\n       sibling so getBoundingClientRect() returns correct width.\r\n       ============================================================ *\/\r\n    .padel-area-box:first-child {\r\n        display: none !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       NEW DESIGN UI \u2014 scoped to #new-ui, safe in WordPress\r\n       ============================================================ *\/\r\n\r\n    \/* Row 1: Top bar *\/\r\n    #new-topbar {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        background: var(--navy);\r\n        padding: 7px 14px;\r\n        font-family: 'Barlow', sans-serif;\r\n        box-shadow: var(--shadow);\r\n        flex-wrap: nowrap;\r\n        overflow-x: auto;\r\n        -webkit-overflow-scrolling: touch;\r\n    }\r\n\r\n    #new-topbar-spacer { flex: 1; min-width: 8px; }\r\n\r\n    \/* Metric\/Imperial toggle in topbar *\/\r\n    #new-measure-toggle {\r\n        display: flex;\r\n        background: rgba(255,255,255,0.12);\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        flex-shrink: 0;\r\n    }\r\n    #new-measure-toggle label {\r\n        padding: 5px 11px;\r\n        font-size: 0.78rem;\r\n        font-weight: 600;\r\n        color: rgba(255,255,255,0.6);\r\n        cursor: pointer;\r\n        user-select: none;\r\n        margin: 0;\r\n        font-family: 'Barlow', sans-serif;\r\n        transition: background 0.2s, color 0.2s;\r\n    }\r\n    \/* Highlight the checked radio label *\/\r\n    #new-measure-toggle .m-checked {\r\n        background: var(--navy-light);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* Topbar icon buttons *\/\r\n    .ntb-btn {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 2px;\r\n        background: rgba(255,255,255,0.12);\r\n        border: none;\r\n        border-radius: 8px;\r\n        color: #fff;\r\n        cursor: pointer;\r\n        padding: 5px 10px;\r\n        font-size: 0.6rem;\r\n        font-weight: 600;\r\n        font-family: 'Barlow', sans-serif;\r\n        min-width: 46px;\r\n        min-height: 40px;\r\n        flex-shrink: 0;\r\n        transition: background 0.2s;\r\n        text-decoration: none;\r\n        line-height: 1.2;\r\n    }\r\n    .ntb-btn i { font-size: 1rem; }\r\n\r\n\r\n    .ntb-btn:hover, .ntb-btn:active { background: rgba(255,255,255,0.25); color: #fff; }\r\n    .ntb-btn-action {\r\n        background: #7ecb00 !important;\r\n        color: #fff !important;\r\n        font-weight: 700 !important;\r\n    }\r\n    .ntb-btn-action:hover, .ntb-btn-action:active {\r\n        background: #5fa800 !important;\r\n        color: #fff !important;\r\n    }\r\n\r\n    \/* Row 2: Palette strip *\/\r\n    #new-palette {\r\n        display: flex;\r\n        align-items: stretch;\r\n        background: var(--white);\r\n        border-bottom: 2px solid var(--grey-border);\r\n        font-family: 'Barlow', sans-serif;\r\n    }\r\n\r\n    \/* Left 60%: area inputs + draggable objects *\/\r\n\r\n\r\n    \/* Area inputs section *\/\r\n    #new-area-inputs {\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        gap: 6px;\r\n        padding: 8px 12px;\r\n        border-right: 2px solid var(--grey-border);\r\n        flex-shrink: 0;\r\n        background: var(--pale);\r\n    }\r\n    #new-area-inputs .ni-row {\r\n        display: grid !important;\r\n        grid-template-columns: 60px 80px 40px !important;\r\n        align-items: center !important;\r\n        column-gap: 10px !important;\r\n    }\r\n    #new-area-inputs .ni-row span:first-child {\r\n        text-align: left !important;\r\n    }\r\n    #new-area-inputs .ni-row .ni-input {\r\n        width: 80px !important;\r\n        box-sizing: border-box !important;\r\n        margin: 0 !important;\r\n        font-size: 1.2rem !important;\r\n        font-weight: 700 !important;\r\n        height: 44px !important;\r\n        padding: 8px 10px !important;\r\n    }\r\n    #new-area-inputs .ni-row .ni-unit {\r\n        text-align: left !important;\r\n        font-size: 1rem !important;\r\n        font-weight: 600 !important;\r\n        color: var(--text-mid) !important;\r\n        min-width: 35px !important;\r\n        display: block !important;\r\n    }\r\n\r\n    \/* Mirror inputs to the new UI \u2014 read-only display linked to real inputs *\/\r\n    .ni-input {\r\n        font-size: 0.85rem;\r\n        font-weight: 700;\r\n        border: 1px solid var(--grey-border);\r\n        border-radius: 6px;\r\n        padding: 3px 6px;\r\n        text-align: center;\r\n        background: var(--white);\r\n        width: 85px;\r\n        color: var(--text-dark);\r\n        font-family: 'Barlow', sans-serif;\r\n    }\r\n\r\n    \/* Each palette item: label top, image middle, + always at bottom *\/\r\n    .npal-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        padding: 4px 10px 0;\r\n        border-right: 1px solid var(--grey-border);\r\n        flex-shrink: 0;\r\n        min-width: 110px;\r\n        box-sizing: border-box;\r\n        height: 100%;\r\n        position: relative;\r\n        padding-bottom: 36px;  \/* space for + button *\/\r\n    }\r\n    .npal-item:hover { background: var(--pale); }\r\n    .npal-item .npal-label {\r\n        font-size: 0.68rem;\r\n        font-weight: 600;\r\n        color: var(--text-mid);\r\n        white-space: nowrap;\r\n        pointer-events: none;\r\n        text-align: center;\r\n        width: 100%;\r\n        flex-shrink: 0;\r\n    }\r\n    .npal-item img {\r\n        width: 110px;\r\n        max-height: 58px;\r\n        object-fit: contain;\r\n        object-position: bottom;\r\n        pointer-events: none;\r\n        display: block;\r\n        flex: 1;\r\n        align-self: flex-end;\r\n    }\r\n    \/* + button wrapper in npal-item: same fixed height as np-r4 *\/\r\n    .npal-item .nadd-btn {\r\n        flex-shrink: 0;\r\n        margin-top: 4px;\r\n        align-self: center;\r\n    }\r\n\r\n    \/* Pillar group: IDENTICAL structure to .npal-item *\/\r\n    #new-pillar-group {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        padding: 4px 10px 6px;\r\n        border-right: 1px solid var(--grey-border);\r\n        flex-shrink: 0;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n    }\r\n    \/* Title row: Pillars + size labels all on one line *\/\r\n    #new-pillar-group .np-title-row {\r\n        display: flex;\r\n        gap: 8px;\r\n        align-items: baseline;\r\n        flex-shrink: 0;\r\n        white-space: nowrap;\r\n    }\r\n    #new-pillar-group .np-title {\r\n        font-size: 0.68rem;\r\n        font-weight: 700;\r\n        color: var(--text-mid);\r\n    }\r\n    #new-pillar-group .np-size {\r\n        font-size: 0.68rem;\r\n        font-weight: 600;\r\n        color: var(--text-mid);\r\n    }\r\n    \/* Pillar boxes row: flex:1 so it fills same space as images *\/\r\n    #new-pillar-group .np-row {\r\n        display: flex;\r\n        gap: 20px;\r\n        align-items: flex-end;   \/* boxes sit on same bottom line as images *\/\r\n        justify-content: center;\r\n        flex: 1;\r\n        width: 100%;\r\n    }\r\n    .np-wrap {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 3px;\r\n        cursor: grab;\r\n    }\r\n\r\n    \/* + buttons row: same margin-top as .npal-item .nadd-btn *\/\r\n    #new-pillar-group .np-btns {\r\n        display: flex;\r\n        gap: 20px;\r\n        flex-shrink: 0;\r\n        margin-top: 4px;\r\n        justify-content: center;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* Right 40%: action buttons *\/\r\n    #new-palette-right {\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n        flex: 0 0 40%;\r\n        padding: 8px 10px;\r\n        background: var(--pa-pale, #eef1f8);\r\n        overflow: hidden;\r\n        align-self: stretch;\r\n        border-left: 2px solid var(--grey-border);\r\n    }\r\n\r\n    \/* Top section: coords\/hint *\/\r\n    #new-palette-right #new-coords-wrap {\r\n        flex: 1;\r\n    }\r\n\r\n    #new-palette-right #new-select-hint {\r\n        font-size: 0.78rem;\r\n        color: var(--text-mid);\r\n        font-style: italic;\r\n        font-family: 'Barlow', sans-serif;\r\n        display: block;\r\n    }\r\n\r\n    #new-palette-right #new-coords {\r\n        font-size: 1.1rem !important;\r\n        font-weight: 700 !important;\r\n        color: var(--navy) !important;\r\n        font-family: 'Barlow', sans-serif;\r\n        min-height: 1.4em;\r\n    }\r\n\r\n    \/* Bottom section: buttons row *\/\r\n    #new-palette-right #new-btns-row {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 5px;\r\n        align-items: center;\r\n    }\r\n\r\n    \/* Action buttons *\/\r\n    .nact-btn {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        border: none;\r\n        border-radius: 8px;\r\n        font-family: 'Barlow', sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 700;\r\n        color: #fff;\r\n        cursor: pointer;\r\n        padding: 8px 12px;\r\n        min-height: 36px;\r\n        white-space: nowrap;\r\n        flex-shrink: 0;\r\n        transition: all 0.15s;\r\n        box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n    }\r\n    .nact-btn i { font-size: 0.85rem; }\r\n    .nact-btn:disabled { opacity: 0.35; pointer-events: none; }\r\n    .nact-btn.green  { background: #76a343; }\r\n    .nact-btn.green:hover  { background: #5f8c32; }\r\n    .nact-btn.orange { background: var(--orange); }\r\n    .nact-btn.orange:hover { background: #e66d00; }\r\n    .nact-btn.red    { background: var(--red); }\r\n    .nact-btn.red:hover    { background: #b71f3b; }\r\n\r\n    #new-palette-right #textItemName {\r\n        flex: 1;\r\n        min-width: 80px;\r\n        float: none !important;\r\n        width: auto !important;\r\n        margin: 0 !important;\r\n    }\r\n    #new-palette-right #textItemName input {\r\n        width: 100%;\r\n        padding: 4px 8px;\r\n        border: 1px solid var(--grey-border);\r\n        border-radius: 7px;\r\n        font-size: 0.8rem;\r\n        font-family: 'Barlow', sans-serif;\r\n        background: var(--white);\r\n        height: auto !important;\r\n    }\r\n\r\n\r\n    \/* ============================================================\r\n       HIDE ORIGINAL TOOLBAR (replaced by new-palette-right)\r\n       Keep in DOM \u2014 JS writes button display states to these IDs\r\n       ============================================================ *\/\r\n    .padel-area-designer-toolbar { display: none !important; }\r\n\r\n    \/* Kill the grid entirely \u2014 canvas designer fills full width *\/\r\n    .padel-area-container {\r\n        display: block !important;\r\n        width: 100% !important;\r\n        height: 700px !important;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n    .padel-area-designer {\r\n        width: 100% !important;\r\n        height: 100% !important;\r\n        margin: 0 !important;\r\n        padding: 4px !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    #canvasAreasContainer {\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* Hide original sidebar \u2014 keep it at original width so grid works *\/\r\n    .padel-area-box:first-child {\r\n        visibility: hidden !important;\r\n        padding: 0 !important;\r\n        margin: 0 !important;\r\n        border: none !important;\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    \/* Canvas box: full remaining space *\/\r\n    .padel-area-designer {\r\n        margin: 0 !important;\r\n        padding: 8px !important;\r\n    }\r\n\r\n    .nadd-btn {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: var(--navy-light);\r\n        color: #fff;\r\n        border: none;\r\n        border-radius: 50%;\r\n        width: 20px;\r\n        height: 20px;\r\n        font-size: 0.7rem;\r\n        cursor: pointer;\r\n        padding: 0;\r\n        margin: 0 auto;\r\n        flex-shrink: 0;\r\n    }\r\n    .nadd-btn:hover { background: var(--navy); }\r\n\r\n    \/* Pillar size overrides *\/\r\n    .padel-area-form-pillar.pillar-60 { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; }\r\n    .padel-area-form-pillar.pillar-40 { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; }\r\n\r\n    \/* Popup *\/\r\n\r\n\r\n    \r\n    \/* ===== PALETTE TABLE - FINAL OVERRIDE ===== *\/\r\n    #new-palette-left {\r\n        flex: 0 0 60% !important;\r\n        border-right: 2px solid var(--grey-border) !important;\r\n        overflow: hidden !important;\r\n        display: flex !important;\r\n        align-items: stretch !important;\r\n        align-self: stretch !important;\r\n    }\r\n    #new-palette-left #new-area-inputs {\r\n        flex-shrink: 0 !important;\r\n        border-right: 2px solid var(--grey-border) !important;\r\n        padding: 6px 10px !important;\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        justify-content: center !important;\r\n        gap: 6px !important;\r\n        background: var(--pale) !important;\r\n        width: 160px !important;\r\n        min-width: 160px !important;\r\n        z-index: 1 !important;\r\n        position: relative !important;\r\n        align-self: stretch !important;\r\n    }\r\n#new-palette-left #new-area-inputs {\r\n    width: 240px !important;\r\n    min-width: 240px !important;\r\n\r\n    padding: 14px 18px !important;\r\n    gap: 14px !important;\r\n}\r\n\r\n#npal-table {\r\n    table-layout: fixed !important;\r\n}\r\n\r\n#npal-table td:nth-child(1) {\r\n    width: 180px !important; \/* Double court *\/\r\n}\r\n\r\n#npal-table td:nth-child(2) {\r\n    width: 180px !important; \/* Single court *\/\r\n}\r\n\r\n#npal-table td:nth-child(3) {\r\n    width: 100px !important; \/* Object *\/\r\n}\r\n\r\n#npal-table td:nth-child(4),\r\n#npal-table td:nth-child(5) {\r\n    width: 65px !important; \/* Pillars *\/\r\n}\r\n\r\n#courtDouble,\r\n#courtSingle {\r\n    width: 150px !important;\r\n    height: 80px !important;\r\n    object-fit: fill !important;\r\n    display: block !important;\r\n    margin: 0 auto !important;\r\n    vertical-align: bottom !important;\r\n    align-self: flex-end !important;\r\n    margin-top: auto !important;\r\n}\r\n    #new-palette-left #npal-table {\r\n        flex: 1 !important;\r\n    }\r\n    #npal-table {\r\n        width: 100% !important;\r\n        height: 100% !important;\r\n        border-collapse: collapse !important;\r\n        table-layout: auto !important;\r\n    }\r\n    #npal-table td {\r\n        font-size: 11px !important;\r\n        font-weight: 600 !important;\r\n        padding: 1px 2px !important;\r\n        text-align: center !important;\r\n        vertical-align: middle !important;\r\n        white-space: nowrap !important;\r\n        overflow: hidden !important;\r\n        border-right: 1px solid var(--grey-border) !important;\r\n        line-height: 1.2 !important;\r\n        color: var(--text-mid) !important;\r\n    }\r\n    #npal-row-label td { height: 15% !important; }\r\n    #npal-row-img td   { height: 70% !important; padding: 4px !important; vertical-align: bottom !important; text-align: center !important; }\r\n    #npal-row-btn td   { height: 15% !important; }\r\n    #npal-row-img img  {\r\n        height: 80px !important;\r\n        width: 120px !important;\r\n        width: 100% !important;\r\n        object-fit: contain !important;\r\n        display: block !important;\r\n        margin: 0 auto !important;\r\n    }\r\n    .npal-td-inputs {\r\n        width: 80px !important;\r\n        padding: 4px !important;\r\n        font-size: 11px !important;\r\n        border-right: 2px solid var(--grey-border) !important;\r\n    }\r\n    .nadd-btn {\r\n        width: 22px !important;\r\n        height: 22px !important;\r\n        border-radius: 50% !important;\r\n        background: var(--navy-light) !important;\r\n        color: #fff !important;\r\n        border: none !important;\r\n        font-size: 14px !important;\r\n        cursor: pointer !important;\r\n        display: flex !important;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n        margin: 0 auto !important;\r\n        padding: 0 !important;\r\n    }\r\n    .npal-pillar-size { font-size: 11px !important; padding: 0 !important; line-height: 1.2 !important; display: block !important; text-align: center !important; }\r\n    #npal-row-img td { display: table-cell !important; }\r\n    #npal-row-img .npal-td-img > * { margin: 0 auto !important; display: block !important; }\r\n    \/* ===== END PALETTE TABLE ===== *\/\r\n<\/style>\r\n<\/head>\r\n\r\n<body onLoad=\"pageLoad()\">\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     NEW DESIGN UI \u2014 sits above the original canvas structure\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div id=\"new-ui\">\r\n\r\n    <!-- Row 1: Top bar -->\r\n    <div id=\"new-topbar\">\r\n        <!-- How to \u2014 leftmost -->\r\n        <a href=\"#popup1\" class=\"ntb-btn\">\r\n            <i class=\"fas fa-circle-info\"><\/i><span>How to<\/span>\r\n        <\/a>\r\n\r\n        <div id=\"new-topbar-spacer\"><\/div>\r\n\r\n        <!-- Metric \/ Imperial \u2014 mirror the hidden real radios -->\r\n        <span id=\"formMeasureSystem\" style=\"display:none\"><\/span>\r\n        <div id=\"new-measure-toggle\">\r\n            <label id=\"new-label-metric\" class=\"m-checked\" onclick=\"newSetMeasure('METRIC')\">Metric<\/label>\r\n            <label id=\"new-label-imperial\" onclick=\"newSetMeasure('IMPERIAL')\">Imperial<\/label>\r\n        <\/div>\r\n\r\n\r\n        <!-- File actions -->\r\n        <button type=\"button\" class=\"ntb-btn ntb-btn-action\" onclick=\"paModernExport()\">\r\n            <i class=\"fas fa-image\"><\/i><span id=\"formButtonSave\">Export<\/span>\r\n        <\/button>\r\n        <button type=\"button\" class=\"ntb-btn ntb-btn-action\" onclick=\"padelAreaExport.saveToFile()\">\r\n            <i class=\"fas fa-save\"><\/i><span id=\"formButtonSaveFile\">Save<\/span>\r\n        <\/button>\r\n        <button type=\"button\" class=\"ntb-btn ntb-btn-action\" onclick=\"padelAreaExport.openFromFile()\">\r\n            <i class=\"fas fa-folder-open\"><\/i><span id=\"formButtonLoadFile\">Load<\/span>\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <!-- Row 2: Palette -->\r\n    <div id=\"new-palette\">\r\n\r\n        <!-- LEFT 60%: inputs beside table, table has own rows -->\r\n        <div id=\"new-palette-left\">\r\n\r\n            <!-- Area inputs with lock \u2014 exact same markup as original -->\r\n            <div id=\"new-area-inputs\">\r\n                <div class=\"blurred-section\" id=\"new-restricted-section\">\r\n                    <div class=\"restriction-hover-message\">\ud83d\udd12 Restricted Area - <BR> CLICK <u>HERE<\/u> TO UNLOCK<\/div>\r\n                    <div class=\"ni-row\">\r\n                        <span id=\"formAreaLen\">Length<\/span>\r\n                        <input class=\"ni-input\" id=\"new-width-input\" value=\"68.5\"\r\n                               oninput=\"newSyncInput('textAreaWidth', this.value)\"\r\n                               onchange=\"newSyncInput('textAreaWidth', this.value)\">\r\n                        <span class=\"ni-unit\" id=\"new-unit-1\">m<\/span>\r\n                    <\/div>\r\n                    <div class=\"ni-row\">\r\n                        <span id=\"formLabelWidth\">Width<\/span>\r\n                        <input class=\"ni-input\" id=\"new-len-input\" value=\"26.5\"\r\n                               oninput=\"newSyncInput('textAreaLen', this.value)\"\r\n                               onchange=\"newSyncInput('textAreaLen', this.value)\">\r\n                        <span class=\"ni-unit\" id=\"new-unit-2\">m<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <table id=\"npal-table\" cellpadding=\"0\" cellspacing=\"0\">\r\n            <tr id=\"npal-row-label\">\r\n                <td class=\"npal-td npal-td-label\"><span id=\"courtDoubleMeasure\">20\u00d710m<\/span><\/td>\r\n                <td class=\"npal-td npal-td-label\"><span id=\"courtSingleMeasure\">20\u00d76m<\/span><\/td>\r\n                <td class=\"npal-td npal-td-label\" id=\"formAreaObstacle\">Obstacle<\/td>\r\n                <td class=\"npal-td npal-td-label\" colspan=\"2\" id=\"formPillars\">Pillars<\/td>\r\n            <\/tr>\r\n            <tr id=\"npal-row-img\">\r\n                <td class=\"npal-td npal-td-img\">\r\n                    <img decoding=\"async\" id=\"courtDouble\"\r\n                         src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2D-Floorplanner-2026\/images\/Padel20x10I.svg\"\r\n                         class=\"padel-area-form-img\" alt=\"Double\"\r\n                         style=\"width:75px;height:80px;object-fit:fill;display:block;\"\r\n                         draggable=\"true\" ondragstart=\"padelArea.drag(event)\">\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-img\" style=\"vertical-align:bottom\">\r\n                    <img decoding=\"async\" id=\"courtSingle\"\r\n                         src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2D-Floorplanner-2026\/images\/Padel20x6I.svg\"\r\n                         class=\"padel-area-form-img\" alt=\"Single\"\r\n                        style=\"width:75px;height:80px;object-fit:fill;display:block;margin:0 auto;\"\r\n                         draggable=\"true\" ondragstart=\"padelArea.drag(event)\">\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-img\">\r\n                    <img decoding=\"async\" id=\"areaObstacle\" style=\"width:55px;height:55px;object-fit:contain;display:block;margin:0 auto;\"\r\n                         src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2D-Floorplanner-2026\/images\/Obstacle.svg\"\r\n                         class=\"padel-area-form-img\" alt=\"Obstacle\"\r\n                         draggable=\"true\" ondragstart=\"padelArea.drag(event)\">\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-img\">\r\n                    <div class=\"npal-pillar-size\">60 cm<\/div>\r\n                    <div id=\"areaPillar60\" class=\"padel-area-form-pillar pillar-60\"\r\n                         draggable=\"true\" ondragstart=\"padelArea.drag(event)\"><\/div>\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-img\">\r\n                    <div class=\"npal-pillar-size\">40 cm<\/div>\r\n                    <div id=\"areaPillar40\" class=\"padel-area-form-pillar pillar-40\"\r\n                         draggable=\"true\" ondragstart=\"padelArea.drag(event)\"><\/div>\r\n                <\/td>\r\n            <\/tr>\r\n            <tr id=\"npal-row-btn\">\r\n                <td class=\"npal-td npal-td-btn\">\r\n                    <button class=\"nadd-btn\" onclick=\"paAddToCenter('courtDouble')\">\uff0b<\/button>\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-btn\">\r\n                    <button class=\"nadd-btn\" onclick=\"paAddToCenter('courtSingle')\">\uff0b<\/button>\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-btn\">\r\n                    <button class=\"nadd-btn\" onclick=\"paAddToCenter('areaObstacle')\">\uff0b<\/button>\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-btn\">\r\n                    <button class=\"nadd-btn\" onclick=\"paAddToCenter('areaPillar60')\">\uff0b<\/button>\r\n                <\/td>\r\n                <td class=\"npal-td npal-td-btn\">\r\n                    <button class=\"nadd-btn\" onclick=\"paAddToCenter('areaPillar40')\">\uff0b<\/button>\r\n                <\/td>\r\n            <\/tr>\r\n        <\/table>\r\n        <\/div><!-- \/new-palette-left -->\r\n\r\n        <!-- RIGHT 40%: coords top, action buttons bottom -->\r\n        <div id=\"new-palette-right\">\r\n            <div id=\"new-coords-wrap\">\r\n                <div id=\"new-measure-info\" style=\"text-align:right;width:100%;display:block;font-size:1.4rem;font-weight:700;color:#3d5fa0;margin-bottom:4px;\"><\/div>\r\n                <span id=\"new-select-hint\">Select an object to edit<\/span>\r\n                <div id=\"new-coords\"><\/div>\r\n            <\/div>\r\n            <div id=\"new-btns-row\">\r\n                <button id=\"buttonRotate90\" type=\"button\" class=\"nact-btn green\" onclick=\"padelArea.rotateAngle(90)\">\r\n                    <i class=\"fas fa-redo\"><\/i><span id=\"formButtonRotate90\">90\u00b0<\/span>\r\n                <\/button>\r\n                <button id=\"buttonRotate5\" type=\"button\" class=\"nact-btn green\" onclick=\"padelArea.rotateAngle(5)\">\r\n                    <i class=\"fas fa-redo\"><\/i><span id=\"formButtonRotate5\">+5\u00b0<\/span>\r\n                <\/button>\r\n                <button id=\"buttonRotate_5\" type=\"button\" class=\"nact-btn green\" onclick=\"padelArea.rotateAngle(-5)\">\r\n                    <i class=\"fas fa-undo\"><\/i><span id=\"formButtonRotate_5\">-5\u00b0<\/span>\r\n                <\/button>\r\n                <button id=\"buttonDuplicate\" type=\"button\" class=\"nact-btn orange\" onclick=\"padelArea.duplicateCourt()\">\r\n                    <i class=\"fas fa-copy\"><\/i><span id=\"formButtonDuplicate\">Copy<\/span>\r\n                <\/button>\r\n                <button id=\"buttonDelete\" type=\"button\" class=\"nact-btn red\" onclick=\"padelArea.deleteCourt()\">\r\n                    <i class=\"fas fa-trash\"><\/i><span id=\"formButtonDelete\">Delete<\/span>\r\n                <\/button>\r\n                <div id=\"textItemName\" style=\"display:none\">\r\n                    <input type=\"text\" id=\"inputItemName\" name=\"itemName\"\r\n                           placeholder=\"Description...\" onkeyup=\"padelArea.setDescription(this)\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div><!-- \/new-palette-right -->\r\n\r\n    <\/div><!-- \/new-palette -->\r\n\r\n<\/div><!-- \/new-ui -->\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     ORIGINAL STRUCTURE \u2014 100% intact, canvas works correctly.\r\n     Original sidebar is hidden via CSS but stays in DOM so the\r\n     padel-area-container grid\/flex gives canvas correct width.\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"padel-area-container\" style=\"line-height:30px;\">\r\n\r\n    <!-- ORIGINAL SIDEBAR: hidden but in DOM for layout sizing -->\r\n    <div class=\"padel-area-box\" style=\"width:270px\">\r\n        <form onsubmit=\"return false\" id=\"formComponent\">\r\n            <div class=\"padel-area-form\" style=\"width:240px\">\r\n                <div class=\"padel-area-form-section\">\r\n                    <div>\r\n                        <label><input type=\"radio\" name=\"measureSystem\" value=\"METRIC\" id=\"real-metric\" checked onchange=\"changeMeasureSystem()\"> <span id=\"formMeasureSystemMetric\"><\/span><\/label><br\/>\r\n                        <label><input type=\"radio\" name=\"measureSystem\" value=\"IMPERIAL\" id=\"real-imperial\" onchange=\"changeMeasureSystem()\"\/> <span id=\"formMeasureSystemImperial\"><\/span><\/label>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"padel-area-form-section blurred-section\" id=\"restrictedSection\">\r\n                    <div class=\"restriction-hover-message\">\ud83d\udd12 Restricted Area<\/div>\r\n                    <h2 id=\"formArea\"><\/h2>\r\n                    <div class=\"padel-area-form-row\">\r\n                        <label><input id=\"textAreaWidth\" name=\"areaWidth\" value=\"68.5\"><\/label>\r\n                        <label id=\"errorAreaWidth\" class=\"padel-area-form-error\"><\/label>\r\n                    <\/div>\r\n                    <div class=\"padel-area-form-row\">\r\n                        <label><input id=\"textAreaLen\" name=\"areaLen\" value=\"26.5\"><\/label>\r\n                        <label id=\"errorAreaLen\" class=\"padel-area-form-error\"><\/label>\r\n                        <label id=\"errorAreaSize\" class=\"padel-area-form-error\"><\/label>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"padel-area-form-section\">\r\n                    <h1 id=\"formCourts\"><\/h1>\r\n                <\/div>\r\n                <div class=\"padel-area-form-section\">\r\n                    <div id=\"formErrorFileLoad\" class=\"padel-area-form-error\" style=\"display:none\">Invalid file format<\/div>\r\n                    <input type=\"file\" id=\"forFileInput\" hidden onchange=\"padelAreaExport.loadFromFile(this)\"\/>\r\n                <\/div>\r\n                <div class=\"padel-area-form-section\">\r\n                    <img decoding=\"async\" src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2022\/08\/logo_padelcreations_brand_515x189.png\" width=\"90%\" id=\"imgLogo\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <!-- ORIGINAL CANVAS \u2014 untouched -->\r\n    <div class=\"padel-area-box padel-area-designer\" style=\"margin-left:40px\">\r\n        <div id=\"canvasAreasContainer\">\r\n            <canvas class=\"padel-area-designer-canvas\" id=\"canvasAreas\"\r\n                    ondrop=\"padelArea.drop(event)\"\r\n                    ondragover=\"padelArea.allowDrop(event)\"\r\n                    onmousedown=\"padelArea.mouseDown(event)\"\r\n                    onmouseup=\"padelArea.mouseUp(event)\"\r\n                    onmousemove=\"padelArea.mouseMove(event)\">\r\n            <\/canvas>\r\n        <\/div>\r\n        <!-- Original toolbar: hidden, but IDs must exist for JS -->\r\n        <div class=\"padel-area-designer-toolbar\">\r\n            <div class=\"padel-area-designer-toolbar-buttons\">\r\n                <div id=\"textItemName\" style=\"display:none\">\r\n                    <input type=\"text\" name=\"itemName\" id=\"_inputItemName_orig\" placeholder=\"Descripci\u00f3n\">\r\n                <\/div>\r\n            <\/div>\r\n            <div id=\"designerInfo\" class=\"padel-area-designer-info\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div id=\"canvasExportContainer\">\r\n    <canvas id=\"canvasExport\"><\/canvas>\r\n<\/div>\r\n\r\n<!-- Original JS \u2014 NOT modified -->\r\n<script>\r\n\/\/ language-v6 inlined\r\nlet Languages = [];\r\n\r\nLanguages['de'] = {\r\n    formArea: 'Fl\u00e4chengr\u00f6sse',\r\n    formAreaWidth: 'Breite',\r\n    formAreaLen: 'L\u00e4nge',\r\n    formCourts: 'Drag & Drop Elemente',\r\n    formMeasureSystem: 'L\u00e4ngeneinheiten',\r\n    formMeasureSystemMetric: 'Meter | 1 Feld = 1 m2',\r\n    formMeasureSystemImperial: 'F\u00fcsse | 1 Feld = 25 ft2',\r\n    formErrorInput: 'Die Zahl ist nicht korrekt',\r\n    formErrorSize: 'Die Breite muss kleiner sein als die L\u00e4nge.',\r\n    formAreaObstacle: 'Gr\u00f6ssenverstellbare Objekte',\r\n    formButtonSave: 'Bild runterladen',\r\n    formButtonSaveFile: 'Datei speichern',\r\n    formButtonLoadFile: 'Datei laden',\r\n    formButtonDelete: 'L\u00f6schen',\r\n    formButtonDuplicate: 'Duplizieren',\r\n    formButtonRotate90: '+90\u00ba',\r\n    formButtonRotate5: '+5\u00ba',\r\n    formButtonRotate_5: '-5\u00ba',\r\n    formTextName: 'Objektbeschreibung',\r\n    exportInfo: 'Grundrisszeichung erstellt durch Padel Floor Planner von',\r\n    exportDate: 'Datum',\r\n    drawerInfo: 'Position',\r\n    obstacleHint: 'Feste Objekte (z.B. Tennisplatz, S\u00e4ulen, Ecken, sozialer Bereich, Shop, Umkleider\u00e4ume, B\u00fcros, Rezeption, sonstiges)',\r\n    formPillars: 'S\u00e4ulen',\r\n    invalidShape: 'Ungew\u00f6hnliche Objektform',\r\n    invalidFileFormat: 'Ung\u00fcltiges Dateiformat',\r\n    hintStartClickCourt: \"Klicken Sie auf das Spielfeld, um zu starten\"\r\n}\r\n\r\nLanguages['en'] = {\r\n    formArea: 'Area dimensions',\r\n    formAreaWidth: 'Width',\r\n    formAreaLen: 'Length',\r\n    formCourts: 'Drag & Drop Items',\r\n    formMeasureSystem: 'Measurements',\r\n    formMeasureSystemMetric: 'Meters (m) | 1 sq = 1 m2',\r\n    formMeasureSystemImperial: 'Feet (ft) | 1 sq = 25 ft2',\r\n    formErrorInput: 'The number is not correct',\r\n    formErrorSize: 'This value has to be less or equal the length',\r\n    formAreaObstacle: 'Sizeable object',\r\n    formButtonSave: 'SAVE IMAGE',\r\n    formButtonSaveFile: 'SAVE TO FILE',\r\n    formButtonLoadFile: 'LOAD FROM FILE',\r\n    formButtonDelete: 'Remove',\r\n    formButtonDuplicate: 'Duplicate',\r\n    formButtonRotate90: '+90\u00ba',\r\n    formButtonRotate5: '+5\u00ba',\r\n    formButtonRotate_5: '-5\u00ba',\r\n    formTextName: 'Tag object',\r\n    exportInfo: 'Layout made with the Padel Floor Planner from',\r\n    exportDate: 'Date',\r\n    drawerInfo: 'Position',\r\n    obstacleHint: 'Sizeable non-movable objects (pillars, corners, social area, shop, changing rooms, store, reception, others)',\r\n    formPillars: 'Pillars',\r\n    invalidShape: 'Unusual object shape',\r\n    invalidFileFormat: 'Invalid file format',\r\n    hintStartClickCourt: \"START by clicking on the court\"\r\n}\r\n\r\nlet Translator = {\r\n    lang: 'es',\r\n\r\n    translate(prop) {\r\n        return Languages[this.lang] && Languages[this.lang][prop] ? Languages[this.lang][prop] : prop;\r\n    },\r\n\r\n    setTransalation(prop, ctrl) {\r\n        let el = document.getElementById(ctrl);\r\n        if (el) {\r\n            el.innerHTML = this.translate(prop);\r\n        }\r\n    },\r\n\r\n    setTransalations(lang) {\r\n        this.lang = lang;\r\n\r\n        this.setTransalation('formMeasureSystem', 'formMeasureSystem');\r\n        this.setTransalation('formMeasureSystemMetric', 'formMeasureSystemMetric');\r\n        this.setTransalation('formMeasureSystemImperial', 'formMeasureSystemImperial');\r\n\r\n        this.setTransalation('formArea', 'formArea');\r\n        this.setTransalation('formAreaWidth', 'formLabelWidth');\r\n        this.setTransalation('formAreaLen', 'formAreaLen');\r\n\r\n        this.setTransalation('formCourts', 'formCourts');\r\n        this.setTransalation('formAreaObstacle', 'formAreaObstacle');\r\n\r\n        this.setTransalation('formButtonSave', 'formButtonSave');\r\n        this.setTransalation('formButtonSaveFile', 'formButtonSaveFile');\r\n        this.setTransalation('formButtonLoadFile', 'formButtonLoadFile');\r\n        this.setTransalation('invalidFileFormat', 'formErrorFileLoad');\r\n        this.setTransalation('formButtonRotate90', 'formButtonRotate90');\r\n        this.setTransalation('formButtonRotate5', 'formButtonRotate5');\r\n        this.setTransalation('formButtonRotate_5', 'formButtonRotate_5');\r\n        this.setTransalation('formButtonDelete', 'formButtonDelete');\r\n        this.setTransalation('formButtonDuplicate', 'formButtonDuplicate');\r\n        this.setTransalation('formPillars', 'formPillars');\r\n        let el = document.getElementById('inputItemName');\r\n        if (el) {\r\n            el.placeholder = this.translate('formTextName');\r\n        }\r\n    }\r\n}\r\n\/\/ JavaScript Document\r\n<\/script>\r\n<script src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2D-Floorplanner-2026\/js\/padelarea-v9.js\"><\/script>\r\n<script src=\"https:\/\/padelcreations.b-cdn.net\/wp-content\/uploads\/2D-Floorplanner-2026\/js\/hint-overlay8.js\"><\/script>\r\n\r\n<script>\r\n\/\/ \u2500\u2500 Reinit canvas after layout settles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nwindow.addEventListener('load', function() {\r\n    [100, 500].forEach(function(delay) {\r\n        setTimeout(function() {\r\n            if (typeof padelArea !== 'undefined' && typeof padelForm !== 'undefined') {\r\n                var fv = padelForm.getFormValues();\r\n                if (fv.valid) {\r\n                    padelArea.initCanvas(fv);\r\n                    padelArea.drawCourts();\r\n                }\r\n            }\r\n        }, delay);\r\n    });\r\n});\r\n\r\n\/\/ \u2500\u2500 Palette touch drag \u2014 single clean block \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nwindow.addEventListener('load', function() {\r\n    var canvas = document.getElementById('canvasAreas');\r\n    var _lastTouch = null;\r\n    var _dragSourceId = null;\r\n\r\n    \/\/ Ghost\r\n    var _ghost = document.createElement('div');\r\n    _ghost.style.cssText = 'position:fixed;pointer-events:none;z-index:9998;'\r\n        + 'opacity:0.65;transform:translate(-50%,-50%);display:none;';\r\n    document.body.appendChild(_ghost);\r\n\r\n    function ghostSize(id) {\r\n        var s = 0.7;\r\n        try {\r\n            if (id==='courtDouble')  { var g=padelArea.scaleToCanvas(21,11); return {w:Math.round(g.x*s),h:Math.round(g.y*s)}; }\r\n            if (id==='courtSingle')  { var g=padelArea.scaleToCanvas(21,7);  return {w:Math.round(g.x*s),h:Math.round(g.y*s)}; }\r\n        } catch(e) {}\r\n        if (id==='areaObstacle') return {w:60,h:60};\r\n        if (id==='areaPillar60') return {w:36,h:36};\r\n        if (id==='areaPillar40') return {w:24,h:24};\r\n        return {w:80,h:60};\r\n    }\r\n\r\n    function showGhost(id, touch) {\r\n        var imgEl = document.getElementById(id);\r\n        var sz = ghostSize(id);\r\n        _ghost.innerHTML = '';\r\n        _ghost.style.width=sz.w+'px'; _ghost.style.height=sz.h+'px';\r\n        _ghost.style.background=''; _ghost.style.border='';\r\n        if (imgEl && imgEl.tagName==='IMG') {\r\n            var img=document.createElement('img');\r\n            img.src=imgEl.src;\r\n            img.style.cssText='width:'+sz.w+'px;height:'+sz.h+'px;display:block;';\r\n            _ghost.appendChild(img);\r\n        } else {\r\n            _ghost.style.background='rgba(255,120,0,0.7)';\r\n            _ghost.style.border='2px solid #c05000';\r\n        }\r\n        _ghost.style.display='block';\r\n        _ghost.style.left=touch.clientX+'px';\r\n        _ghost.style.top=touch.clientY+'px';\r\n    }\r\n\r\n    function moveGhost(t) {\r\n        _ghost.style.left=t.clientX+'px';\r\n        _ghost.style.top=t.clientY+'px';\r\n    }\r\n\r\n    function hideGhost() {\r\n        _ghost.style.display='none';\r\n    }\r\n\r\n    function dropOnCanvas() {\r\n        if (!_lastTouch || !_dragSourceId) return;\r\n        var rect = canvas.getBoundingClientRect();\r\n        var cx = _lastTouch.clientX, cy = _lastTouch.clientY;\r\n        if (cx < rect.left || cx > rect.right || cy < rect.top || cy > rect.bottom) return;\r\n        var offsetX = cx - rect.left;\r\n        var offsetY = cy - rect.top;\r\n        var xy = padelArea.scaleToArea(offsetX - padelArea.areaX, offsetY - padelArea.areaY);\r\n        padelArea.addDropCourt(xy, _dragSourceId);\r\n        padelArea.updateButtonsVisibility();\r\n        _lastTouch = null;\r\n        _dragSourceId = null;\r\n    }\r\n\r\n    var items = [\r\n        { id: 'courtDouble',  wrap: true },\r\n        { id: 'courtSingle',  wrap: true },\r\n        { id: 'areaObstacle', wrap: true },\r\n        { id: 'areaPillar60', wrap: false },\r\n        { id: 'areaPillar40', wrap: false }\r\n    ];\r\n\r\n    items.forEach(function(item) {\r\n        var el = document.getElementById(item.id);\r\n        if (!el) return;\r\n        var target = item.wrap ? (el.closest('.npal-item') || el.closest('.np-wrap') || el) : el;\r\n\r\n        target.addEventListener('touchstart', function(e) {\r\n            e.preventDefault();\r\n            _dragSourceId = item.id;\r\n            _lastTouch = e.touches[0];\r\n            showGhost(item.id, _lastTouch);\r\n        }, { passive: false });\r\n\r\n        target.addEventListener('touchmove', function(e) {\r\n            e.preventDefault();\r\n            _lastTouch = e.touches[0];\r\n            moveGhost(_lastTouch);\r\n        }, { passive: false });\r\n\r\n        target.addEventListener('touchend', function(e) {\r\n            e.preventDefault();\r\n            hideGhost();\r\n            dropOnCanvas();\r\n        }, { passive: false });\r\n    });\r\n\r\n    padelForm.addDropCourt = function() { dropOnCanvas(); };\r\n});\r\n\r\n\/\/ \u2500\u2500 New UI helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n\/\/ Increment\/decrement dimension input\r\nfunction niStep(visId, realId, delta) {\r\n    var vis  = document.getElementById(visId);\r\n    var real = document.getElementById(realId);\r\n    if (!vis || !real) return;\r\n    var val = parseFloat(vis.value) || 0;\r\n    val = Math.round((val + delta) * 10) \/ 10;  \/\/ step 1, 1 decimal\r\n    if (val < 1) val = 1;\r\n    vis.value  = val;\r\n    real.value = val;\r\n    real.dispatchEvent(new Event('blur'));\r\n}\r\n\r\n\/\/ Keep pillars always on top \u2014 sort in-place before every draw\r\nwindow.addEventListener('load', function() {\r\n    if (typeof padelArea === 'undefined') return;\r\n\r\n    \/\/ Pillar detection: pillars are CSS divs \u2014 they have no img.src\r\n    \/\/ Courts and obstacles have SVG images; pillars do not\r\n    function isPillar(c) {\r\n        \/\/ Method 1: no image src = pillar\r\n        if (!c.img || !c.img.src || c.img.src === '') return true;\r\n        \/\/ Method 2: tagName is DIV (not IMG)\r\n        if (c.img && c.img.tagName && c.img.tagName === 'DIV') return true;\r\n        \/\/ Method 3: any property containing 'illar'\r\n        var str = JSON.stringify(c).toLowerCase();\r\n        if (str.indexOf('pillar') >= 0) return true;\r\n        return false;\r\n    }\r\n\r\n    function sortPillarsOnTop() {\r\n        var courts = padelArea.padelCourts.courts;\r\n        var others  = [];\r\n        var pillars = [];\r\n        for (var i = 0; i < courts.length; i++) {\r\n            if (isPillar(courts[i])) pillars.push(courts[i]);\r\n            else others.push(courts[i]);\r\n        }\r\n        \/\/ Splice in-place so the array reference stays the same\r\n        var sorted = others.concat(pillars);\r\n        for (var j = 0; j < sorted.length; j++) {\r\n            courts[j] = sorted[j];\r\n        }\r\n    }\r\n\r\n    var _origDraw = padelArea.drawCourts.bind(padelArea);\r\n    padelArea.drawCourts = function() {\r\n        sortPillarsOnTop();\r\n        _origDraw.call(this);\r\n    };\r\n});\r\n\r\n\/\/ Patch duplicateCourt to place duplicate at a free spot\r\nwindow.addEventListener('load', function() {\r\n    if (typeof padelArea === 'undefined') return;\r\n    var _origDup = padelArea.duplicateCourt.bind(padelArea);\r\n    padelArea.duplicateCourt = function() {\r\n        if (!this.padelCourts.selectedCourt) return;\r\n        var item = this.padelCourts.selectedCourt;\r\n        \/\/ Get current position of selected item\r\n        var baseX = item.x !== undefined ? item.x : (item.ax || 0);\r\n        var baseY = item.y !== undefined ? item.y : (item.ay || 0);\r\n        \/\/ Find free spot near current position + small offset\r\n        var spot = paFindFreeSpot();\r\n        var offset = this.measureSystem === 'METRIC' ? 1 : 3.28084;\r\n        \/\/ Temporarily override courts array position by calling original\r\n        \/\/ then moving the new court to the free spot\r\n        var countBefore = this.padelCourts.courts.length;\r\n        _origDup();\r\n        var countAfter = this.padelCourts.courts.length;\r\n        if (countAfter > countBefore) {\r\n            var newItem = this.padelCourts.courts[countAfter - 1];\r\n            var dx = spot.x - baseX;\r\n            var dy = spot.y - baseY;\r\n            newItem.moveOrResizeSelectedCourt(dx - offset, dy - offset);\r\n        }\r\n        this.drawCourts();\r\n        this.updateButtonsVisibility();\r\n    };\r\n});\r\n\r\n\/\/ Patch getSelectedCourt to select topmost (last drawn) object first\r\nwindow.addEventListener('load', function() {\r\n    if (typeof padelArea === 'undefined') return;\r\n    var courts = padelArea.padelCourts;\r\n    var _orig = courts.getSelectedCourt.bind(courts);\r\n    courts.getSelectedCourt = function(p) {\r\n        \/\/ Iterate in reverse so last-added (top) object is selected first\r\n        this.selectedCourt = null;\r\n        for (var i = this.courts.length - 1; i >= 0; i--) {\r\n            if (this.courts[i].checkInside(p)) {\r\n                this.selectedCourt = this.courts[i];\r\n                break;\r\n            }\r\n        }\r\n        if (this.selectedCourt) {\r\n            this.selectedCourt.setDrapOp(p, this.selectionBox);\r\n        }\r\n        return this.selectedCourt;\r\n    };\r\n});\r\n\r\n\/\/ Find next free position: start top-left, move 2m down for each existing object\r\nfunction paFindFreeSpot() {\r\n    var courts = padelArea.padelCourts.courts;\r\n    var x = 2;\r\n    var y = 2 + (courts.length * 2);\r\n    \/\/ Keep within bounds\r\n    y = Math.min(y, padelArea.measureHeight - 2);\r\n    return { x: x, y: y };\r\n}\r\n\r\n\/\/ Add object \u2014 top-left, 2m below previous\r\nfunction paAddToCenter(id) {\r\n    var xy = paFindFreeSpot();\r\n    padelArea.addDropCourt(xy, id);\r\n    padelArea.updateButtonsVisibility();\r\n}\r\n\r\n\/\/ Sync new visible input \u2192 hidden real input \u2192 trigger redraw\r\nfunction newSyncInput(realId, value) {\r\n    var real = document.getElementById(realId);\r\n    if (real) {\r\n        real.value = value;\r\n        real.dispatchEvent(new Event('blur'));\r\n    }\r\n}\r\n\r\n\/\/ Toggle metric\/imperial from new UI labels\r\nfunction newSetMeasure(system) {\r\n    var metricRadio   = document.getElementById('real-metric');\r\n    var imperialRadio = document.getElementById('real-imperial');\r\n    var lm = document.getElementById('new-label-metric');\r\n    var li = document.getElementById('new-label-imperial');\r\n    if (system === 'METRIC') {\r\n        metricRadio.checked = true;\r\n        lm.classList.add('m-checked');\r\n        li.classList.remove('m-checked');\r\n    } else {\r\n        imperialRadio.checked = true;\r\n        li.classList.add('m-checked');\r\n        lm.classList.remove('m-checked');\r\n    }\r\n    changeMeasureSystem();\r\n    \/\/ Sync visible inputs, units and measure info after conversion\r\n    setTimeout(function() {\r\n        var rw = document.getElementById('textAreaWidth');\r\n        var rl = document.getElementById('textAreaLen');\r\n        var vw = document.getElementById('new-width-input');\r\n        var vl = document.getElementById('new-len-input');\r\n        if (rw && vw) vw.value = rw.value;\r\n        if (rl && vl) vl.value = rl.value;\r\n        \/\/ Update unit labels\r\n        var unit = (system === 'METRIC') ? 'm' : 'ft';\r\n        var u1 = document.getElementById('new-unit-1');\r\n        var u2 = document.getElementById('new-unit-2');\r\n        if (u1) u1.textContent = unit;\r\n        if (u2) u2.textContent = unit;\r\n        \/\/ Update measure info from translated spans\r\n        var info = document.getElementById('new-measure-info');\r\n        if (info) {\r\n            var metricSpan   = document.getElementById('formMeasureSystemMetric');\r\n            var imperialSpan = document.getElementById('formMeasureSystemImperial');\r\n            info.textContent = (system === 'METRIC')\r\n                ? (metricSpan   ? metricSpan.textContent   : 'METERS (M) | 1 SQ = 1 M\u00b2')\r\n                : (imperialSpan ? imperialSpan.textContent : 'FEET (FT) | 1 SQ = 25 FT\u00b2');\r\n        }\r\n    }, 50);\r\n}\r\n\r\n\/\/ Show\/hide hint and description input when buttons appear\r\nvar _origUpdateBtns = null;\r\nwindow.addEventListener('load', function() {\r\n    if (typeof padelArea !== 'undefined') {\r\n        _origUpdateBtns = padelArea.updateButtonsVisibility.bind(padelArea);\r\n        padelArea.updateButtonsVisibility = function() {\r\n            _origUpdateBtns();\r\n            var hasObjs = padelArea.padelCourts && padelArea.padelCourts.courts && padelArea.padelCourts.courts.length > 0;\r\n            var hasSel  = !!padelArea.padelCourts.selectedCourt;\r\n            var hint    = document.getElementById('new-select-hint');\r\n            var descWrap = document.getElementById('textItemName');\r\n            if (hint)     hint.style.display    = hasObjs ? 'none' : 'inline';\r\n            if (descWrap) descWrap.style.display = hasSel  ? 'block' : 'none';\r\n            \/\/ Show action buttons when objects exist on canvas\r\n            ['buttonRotate90','buttonRotate5','buttonRotate_5','buttonDuplicate','buttonDelete'].forEach(function(id) {\r\n                var btn = document.getElementById(id);\r\n                if (btn) btn.style.display = hasObjs ? 'inline-flex' : 'none';\r\n            });\r\n        };\r\n    }\r\n\r\n    \/\/ Set initial measure info\r\n    var initInfo = document.getElementById('new-measure-info');\r\n    if (initInfo) {\r\n        setTimeout(function() {\r\n            var metricSpan = document.getElementById('formMeasureSystemMetric');\r\n            initInfo.textContent = metricSpan ? metricSpan.textContent : 'METERS (M) | 1 SQ = 1 M\u00b2';\r\n        }, 100);\r\n    }\r\n\r\n    \/\/ Mirror designerInfo (coords) to new coords div\r\n    var orig = document.getElementById('designerInfo');\r\n    var newCoords = document.getElementById('new-coords');\r\n    if (orig && newCoords) {\r\n        var obs = new MutationObserver(function() {\r\n            newCoords.innerHTML = orig.innerHTML;\r\n        });\r\n        obs.observe(orig, { childList: true, subtree: true, characterData: true });\r\n    }\r\n});\r\n\r\n\r\n\r\n\/\/ \u2500\u2500 Modern export \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ Called by patched exportCourt() in padelarea-v8.js with the drawn canvas\r\nwindow.paOnExportReady = null; \/\/ set on each export call\r\n\r\nfunction paModernExport() {\r\n    window.paOnExportReady = function(srcCanvas) {\r\n        paDoModernExport(srcCanvas);\r\n        window.paOnExportReady = null;\r\n    };\r\n    \/\/ Trigger original export \u2014 it will call paOnExportReady when done\r\n    padelAreaExport.exportCourt();\r\n}\r\n\r\nfunction paDoModernExport(mainCanvas) {\r\n    if (!mainCanvas) return;\r\n\r\n    var W = mainCanvas.width;\r\n    var H = mainCanvas.height;\r\n    var FOOTER = 80;\r\n    var cropFooter = 85;\r\n    var cH = H - cropFooter;\r\n\r\n    var out = document.createElement('canvas');\r\n    out.width  = W;\r\n    out.height = cH + FOOTER;\r\n    var ctx = out.getContext('2d');\r\n\r\n    ctx.drawImage(mainCanvas, 0, 0, W, cH, 0, 0, W, cH);\r\n\r\n    \/\/ Footer\r\n    ctx.fillStyle = '#1a2744';\r\n    ctx.fillRect(0, cH, W, FOOTER);\r\n\r\n    ctx.fillStyle = '#ffffff';\r\n    ctx.font = 'bold 13px Arial, sans-serif';\r\n    ctx.fillText('Layout made with the Padel Floor Planner', 24, cH + 24);\r\n    ctx.fillStyle = '#a8c0e8';\r\n    ctx.font = '12px Arial, sans-serif';\r\n    ctx.fillText('PADELCREATIONS INTERNATIONAL', 24, cH + 44);\r\n    ctx.fillStyle = '#7ecb00';\r\n    ctx.font = 'bold 12px Arial, sans-serif';\r\n    ctx.fillText('www.padelcreations.com', W\/2 - 90, cH + 28);\r\n    ctx.fillText('info@padelcreations.com', W\/2 - 90, cH + 50);\r\n\r\n    function getFilename() {\r\n        var d = new Date();\r\n        return 'Padelcreations_Layout_' +\r\n            d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0') +\r\n            '_' + String(d.getHours()).padStart(2,'0') + '-' + String(d.getMinutes()).padStart(2,'0') + '.png';\r\n    }\r\n\r\n    function doDownload() {\r\n        var link = document.createElement('a');\r\n        link.download = getFilename();\r\n        link.href = out.toDataURL('image\/png');\r\n        document.body.appendChild(link);\r\n        link.click();\r\n        document.body.removeChild(link);\r\n    }\r\n\r\n    var logo = new Image();\r\n    logo.crossOrigin = 'anonymous';\r\n    logo.onload = function() {\r\n        var lh = FOOTER - 16;\r\n        var lw = logo.width * (lh \/ logo.height);\r\n        ctx.drawImage(logo, W - lw - 16, cH + 8, lw, lh);\r\n        doDownload();\r\n    };\r\n    logo.onerror = function() { doDownload(); };\r\n    logo.src = 'https:\/\/www.padelcreations.com\/wp-content\/uploads\/2024\/10\/logo-white.png';\r\n}\r\n\r\n\/\/ \u2500\u2500 Canvas touch events \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nwindow.addEventListener('load', function() {\r\n    var canvas = document.getElementById('canvasAreas');\r\n\r\n    function getCanvasOffset(touch) {\r\n        var rect = canvas.getBoundingClientRect();\r\n        return {\r\n            offsetX: touch.clientX - rect.left,\r\n            offsetY: touch.clientY - rect.top\r\n        };\r\n    }\r\n\r\n    canvas.addEventListener('touchstart', function(e) {\r\n        e.preventDefault(); e.stopImmediatePropagation();\r\n        padelArea.mouseDown(getCanvasOffset(e.touches[0]));\r\n    }, { passive: false, capture: true });\r\n\r\n    canvas.addEventListener('touchmove', function(e) {\r\n        e.preventDefault(); e.stopImmediatePropagation();\r\n        padelArea.mouseMove(getCanvasOffset(e.touches[0]));\r\n    }, { passive: false, capture: true });\r\n\r\n    canvas.addEventListener('touchend', function(e) {\r\n        e.preventDefault(); e.stopImmediatePropagation();\r\n        padelArea.mouseUp(null);\r\n    }, { passive: false, capture: true });\r\n\r\n    \/\/ Touch drag handled by the re-registration block above\r\n});\r\n<\/script>\r\n\r\n<!-- Popup \u2014 original structure -->\r\n<div id=\"popup1\" class=\"overlay\">\r\n    <div class=\"popup\">\r\n        <div class=\"popup-header\">\r\n            <img decoding=\"async\" src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2D-Floorplanner-2026\/images\/info-ball.png\" alt=\"info\"\/>\r\n            <h2>How to drag and drop an object<\/h2>\r\n            <a class=\"close\" href=\"#!\">&times;<\/a>\r\n        <\/div>\r\n        <div class=\"content\">\r\n            <video controls autoplay muted loop playsinline>\r\n                <source src=\"https:\/\/www.padelcreations.com\/wp-content\/uploads\/2D-Floorplanner-2026\/images\/Dragobject.mp4\" type=\"video\/mp4\">\r\n            <\/video>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Planen Sie, mit Padel zu starten, und m\u00f6chten wissen, wie viele Padelpl\u00e4tze in den verf\u00fcgbaren Raum passen? Dieses einzigartige und weltweit erste Online-Tool, das exklusiv f\u00fcr PADEL entwickelt wurde, wird Ihre Frage mit Sicherheit beantworten. Es ist eine Innovation in der Padel-Branche und wurde von PADELCREATIONS entwickelt. Das Beste daran: Es ist f\u00fcr jeden kostenlos [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":32326,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-36156","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/pages\/36156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/comments?post=36156"}],"version-history":[{"count":112,"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/pages\/36156\/revisions"}],"predecessor-version":[{"id":44099,"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/pages\/36156\/revisions\/44099"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/media\/32326"}],"wp:attachment":[{"href":"https:\/\/www.padelcreations.com\/de\/wp-json\/wp\/v2\/media?parent=36156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}