Removes poc-booking.html from wwwroot

Cleans up redundant HTML file from project directory

Eliminates an unused proof-of-concept booking page template

wwwroot/poc-indstillinger.html

@@ -1684,6 +1684,181 @@
     swp-btn.primary.purple:hover {
       background: color-mix(in srgb, var(--color-purple) 85%, black);
     }
+
+    /* ==========================================
+       TRACKING TAB
+       ========================================== */
+    swp-tab-content[data-tab="tracking"] {
+      display: none;
+    }
+
+    swp-tab-content[data-tab="tracking"].active {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    .tracking-card {
+      margin-bottom: 0;
+    }
+
+    .tracking-card.full-width,
+    .code-preview-card {
+      grid-column: 1 / -1;
+    }
+
+    .tracking-card swp-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .tracking-card[data-tracker] swp-card-content {
+      transition: opacity 200ms ease, max-height 300ms ease;
+    }
+
+    .tracking-card[data-tracker].disabled swp-card-content {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    swp-tracking-hint {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 12px;
+      padding: 10px 12px;
+      background: color-mix(in srgb, var(--color-blue) 8%, transparent);
+      border-radius: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-tracking-hint i {
+      font-size: 16px;
+      color: var(--color-blue);
+    }
+
+    swp-tracking-hint.privacy {
+      background: color-mix(in srgb, var(--color-green) 8%, transparent);
+    }
+
+    swp-tracking-hint.privacy i {
+      color: var(--color-green);
+    }
+
+    swp-script-section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    swp-script-section:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-script-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-script-label i {
+      font-size: 16px;
+      color: var(--color-text-secondary);
+    }
+
+    .script-textarea {
+      width: 100%;
+      min-height: 100px;
+      padding: 12px;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      line-height: 1.5;
+      color: var(--color-text);
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      resize: vertical;
+    }
+
+    .script-textarea::placeholder {
+      color: var(--color-text-secondary);
+    }
+
+    .script-textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    .code-preview-card {
+      margin-top: 24px;
+      border: 2px dashed var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 3%, var(--color-surface));
+    }
+
+    .code-preview-card swp-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .code-preview-card swp-card-title {
+      color: var(--color-teal);
+    }
+
+    swp-code-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-code-info i {
+      font-size: 16px;
+      color: var(--color-teal);
+    }
+
+    .code-preview {
+      margin: 0;
+      padding: 16px;
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      overflow-x: auto;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .code-preview code {
+      font-family: var(--font-mono);
+      font-size: 11px;
+      line-height: 1.6;
+      color: var(--color-text);
+      white-space: pre;
+    }
+
+    .code-preview .comment {
+      color: var(--color-green);
+    }
+
+    .code-preview .tag {
+      color: var(--color-blue);
+    }
+
+    .code-preview .attr {
+      color: var(--color-purple);
+    }
+
+    .code-preview .string {
+      color: var(--color-teal);
+    }
   </style>
 </head>
 <body>
@@ -1735,6 +1910,10 @@
       <i class="ph ph-puzzle-piece"></i>
       Moduler
     </swp-tab>
+    <swp-tab data-tab="tracking">
+      <i class="ph ph-chart-line-up"></i>
+      Tracking
+    </swp-tab>
   </swp-tab-bar>
 
   <!-- ==========================================
@@ -3193,6 +3372,214 @@ Tak for din handel!</swp-edit-textarea>
     </swp-modules-section>
   </swp-tab-content>
 
+  <!-- ==========================================
+       TAB: TRACKING
+       ========================================== -->
+  <swp-tab-content data-tab="tracking">
+    <!-- Meta Pixel -->
+    <swp-card class="tracking-card" data-tracker="meta">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-meta-logo"></i>
+          Meta Pixel (Facebook)
+        </swp-card-title>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Pixel ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="metaPixelId" oninput="updateTrackingPreview()">123456789012345</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint>
+          <i class="ph ph-info"></i>
+          Bruges til Facebook og Instagram annoncering og remarketing
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Google Analytics -->
+    <swp-card class="tracking-card" data-tracker="ga4">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-chart-line"></i>
+          Google Analytics (GA4)
+        </swp-card-title>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Measurement ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="ga4Id" oninput="updateTrackingPreview()">G-ABC123XYZ</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint>
+          <i class="ph ph-info"></i>
+          Google Analytics 4 til website trafik og brugeradfærd
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Google Tag Manager -->
+    <swp-card class="tracking-card" data-tracker="gtm">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-code"></i>
+          Google Tag Manager
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Container ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="gtmId" oninput="updateTrackingPreview()">GTM-XXXXXXX</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint>
+          <i class="ph ph-info"></i>
+          Central styring af alle tracking-tags
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Plausible -->
+    <swp-card class="tracking-card" data-tracker="plausible">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-leaf"></i>
+          Plausible Analytics
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Domæne</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="plausibleDomain" oninput="updateTrackingPreview()">minside.dk</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint class="privacy">
+          <i class="ph ph-shield-check"></i>
+          Privacy-venlig analytics uden cookies - GDPR compliant
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Fathom -->
+    <swp-card class="tracking-card" data-tracker="fathom">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-eye"></i>
+          Fathom Analytics
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Site ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="fathomSiteId" oninput="updateTrackingPreview()">ABCDEFGH</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint class="privacy">
+          <i class="ph ph-shield-check"></i>
+          Privacy-venlig analytics uden cookies - GDPR compliant
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Matomo -->
+    <swp-card class="tracking-card" data-tracker="matomo">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-database"></i>
+          Matomo
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Server URL</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="matomoUrl" oninput="updateTrackingPreview()">https://matomo.minside.dk</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Site ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="matomoSiteId" oninput="updateTrackingPreview()">1</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint class="privacy">
+          <i class="ph ph-shield-check"></i>
+          Self-hosted analytics - fuld kontrol over dine data
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Custom Scripts -->
+    <swp-card class="tracking-card full-width">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-code-block"></i>
+          Brugerdefinerede Scripts
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-script-section>
+          <swp-script-label>
+            <i class="ph ph-file-code"></i>
+            Scripts i &lt;head&gt;
+          </swp-script-label>
+          <textarea class="script-textarea" id="customHeadScripts" placeholder="<!-- Indsæt custom tracking kode her -->" oninput="updateTrackingPreview()"></textarea>
+        </swp-script-section>
+        <swp-script-section>
+          <swp-script-label>
+            <i class="ph ph-file-code"></i>
+            Scripts før &lt;/body&gt;
+          </swp-script-label>
+          <textarea class="script-textarea" id="customBodyScripts" placeholder="<!-- Indsæt custom kode her -->"></textarea>
+        </swp-script-section>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Generated Code Preview -->
+    <swp-card class="code-preview-card">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-terminal"></i>
+          Genereret Kode
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-code-info>
+          <i class="ph ph-info"></i>
+          Denne kode indsættes automatisk i &lt;head&gt; på din online booking side
+        </swp-code-info>
+        <pre class="code-preview" id="trackingCodePreview"><code><!-- Ingen aktive tracking-koder --></code></pre>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
   <!-- ==========================================
        DRAWER: REDIGER BESKED
        ========================================== -->
@@ -3699,6 +4086,206 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
       // Initial state
       updateOnlinePaymentVisibility();
     }
+
+    // ==========================================
+    // TRACKING TAB
+    // ==========================================
+
+    function initTrackingToggles() {
+      document.querySelectorAll('.tracking-card swp-toggle-slider').forEach(slider => {
+        slider.querySelectorAll('swp-toggle-option').forEach((option, index) => {
+          option.addEventListener('click', () => {
+            slider.dataset.value = index === 0 ? 'yes' : 'no';
+            const card = slider.closest('.tracking-card');
+
+            if (slider.dataset.value === 'no') {
+              card.classList.add('disabled');
+            } else {
+              card.classList.remove('disabled');
+            }
+
+            updateTrackingPreview();
+          });
+        });
+      });
+    }
+
+    function updateTrackingPreview() {
+      const preview = document.getElementById('trackingCodePreview');
+      if (!preview) return;
+
+      let code = '';
+
+      // Meta Pixel
+      const metaCard = document.querySelector('[data-tracker="meta"]');
+      if (metaCard && metaCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const pixelId = document.getElementById('metaPixelId')?.textContent?.trim() || '';
+        if (pixelId) {
+          code += `<span class="comment">&lt;!-- Meta Pixel --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script',
+  'https://connect.facebook.net/en_US/fbevents.js');
+  fbq(<span class="string">'init'</span>, <span class="string">'${pixelId}'</span>);
+  fbq(<span class="string">'track'</span>, <span class="string">'PageView'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Google Analytics
+      const ga4Card = document.querySelector('[data-tracker="ga4"]');
+      if (ga4Card && ga4Card.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const measurementId = document.getElementById('ga4Id')?.textContent?.trim() || '';
+        if (measurementId) {
+          code += `<span class="comment">&lt;!-- Google Analytics (GA4) --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://www.googletagmanager.com/gtag/js?id=${measurementId}"</span><span class="tag">&gt;&lt;/script&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag(<span class="string">'js'</span>, new Date());
+  gtag(<span class="string">'config'</span>, <span class="string">'${measurementId}'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Google Tag Manager
+      const gtmCard = document.querySelector('[data-tracker="gtm"]');
+      if (gtmCard && gtmCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const containerId = document.getElementById('gtmId')?.textContent?.trim() || '';
+        if (containerId) {
+          code += `<span class="comment">&lt;!-- Google Tag Manager --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer',<span class="string">'${containerId}'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Plausible
+      const plausibleCard = document.querySelector('[data-tracker="plausible"]');
+      if (plausibleCard && plausibleCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const domain = document.getElementById('plausibleDomain')?.textContent?.trim() || '';
+        if (domain) {
+          code += `<span class="comment">&lt;!-- Plausible Analytics --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">defer</span> <span class="attr">data-domain</span>=<span class="string">"${domain}"</span> <span class="attr">src</span>=<span class="string">"https://plausible.io/js/script.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Fathom
+      const fathomCard = document.querySelector('[data-tracker="fathom"]');
+      if (fathomCard && fathomCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const siteId = document.getElementById('fathomSiteId')?.textContent?.trim() || '';
+        if (siteId) {
+          code += `<span class="comment">&lt;!-- Fathom Analytics --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">src</span>=<span class="string">"https://cdn.usefathom.com/script.js"</span> <span class="attr">data-site</span>=<span class="string">"${siteId}"</span> <span class="attr">defer</span><span class="tag">&gt;&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Matomo
+      const matomoCard = document.querySelector('[data-tracker="matomo"]');
+      if (matomoCard && matomoCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const serverUrl = document.getElementById('matomoUrl')?.textContent?.trim() || '';
+        const siteId = document.getElementById('matomoSiteId')?.textContent?.trim() || '';
+        if (serverUrl && siteId) {
+          code += `<span class="comment">&lt;!-- Matomo Analytics --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  var _paq = window._paq = window._paq || [];
+  _paq.push([<span class="string">'trackPageView'</span>]);
+  _paq.push([<span class="string">'enableLinkTracking'</span>]);
+  (function() {
+    var u=<span class="string">"${serverUrl}/"</span>;
+    _paq.push([<span class="string">'setTrackerUrl'</span>, u+<span class="string">'matomo.php'</span>]);
+    _paq.push([<span class="string">'setSiteId'</span>, <span class="string">'${siteId}'</span>]);
+    var d=document, g=d.createElement(<span class="string">'script'</span>), s=d.getElementsByTagName(<span class="string">'script'</span>)[0];
+    g.async=true; g.src=u+<span class="string">'matomo.js'</span>; s.parentNode.insertBefore(g,s);
+  })();
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Custom Head Scripts
+      const customHead = document.getElementById('customHeadScripts')?.value?.trim() || '';
+      if (customHead) {
+        code += `<span class="comment">&lt;!-- Custom Scripts --&gt;</span>
+${escapeHtml(customHead)}
+
+`;
+      }
+
+      if (code) {
+        preview.querySelector('code').innerHTML = code.trim();
+      } else {
+        preview.querySelector('code').innerHTML = '<span class="comment">&lt;!-- Ingen aktive tracking-koder --&gt;</span>';
+      }
+    }
+
+    function escapeHtml(text) {
+      return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+
+    function copyTrackingCode() {
+      const preview = document.getElementById('trackingCodePreview');
+      if (!preview) return;
+
+      // Get plain text version (strip HTML tags)
+      const code = preview.querySelector('code').innerHTML
+        .replace(/<span[^>]*>/g, '')
+        .replace(/<\/span>/g, '')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+
+      navigator.clipboard.writeText(code).then(() => {
+        const btn = document.querySelector('.code-preview-card swp-btn');
+        const originalText = btn.innerHTML;
+        btn.innerHTML = '<i class="ph ph-check"></i> Kopieret!';
+        btn.style.color = 'var(--color-green)';
+        setTimeout(() => {
+          btn.innerHTML = originalText;
+          btn.style.color = '';
+        }, 2000);
+      });
+    }
+
+    // Initialize tracking preview on page load
+    document.addEventListener('DOMContentLoaded', () => {
+      // Initialize tracking toggles
+      initTrackingToggles();
+
+      // Update preview
+      updateTrackingPreview();
+
+      // Set initial disabled state for cards
+      document.querySelectorAll('.tracking-card[data-tracker]').forEach(card => {
+        const toggle = card.querySelector('swp-toggle-slider');
+        if (toggle && toggle.dataset.value === 'no') {
+          card.classList.add('disabled');
+        }
+      });
+    });
   </script>
 
 </body>