<!doctype html>
<html lang="en">
  <head>
    <meta name="robots" content="noindex, nofollow"/>
    <meta charset="utf-8"/>
    <title>GoProof</title>
    <base href="/"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" id="appIcon" type="image/x-icon" href="assets/themes/oc/images/OcFav.webp"/>

    <!-- Preload critical images for better Lighthouse performance -->
    <link rel="preload" as="image" href="assets/themes/oc/images/GPwhite2.svg" fetchpriority="high"/>
    <link rel="preload" as="image" href="assets/themes/oc/gifs/GPAnimation.gif"/>
    <link rel="preload" as="image" href="assets/themes/oc/images/ZHLogoWhite.webp"/>

    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/>
    <link rel="preconnect" href="https://storage.googleapis.com"/>

    <!-- Montserrat: async stylesheet so fonts.googleapis.com CSS is not render-blocking (FCP/LCP) -->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&amp;display=swap" onload="this.onload=null;this.rel='stylesheet'"/>
    <noscript>
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&amp;display=swap"
      />
    </noscript>

    <!-- Initial shell typography until Montserrat applies -->
    <style>
      body {
        font-family:
          'Roboto',
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          'Oxygen',
          'Ubuntu',
          'Cantarell',
          sans-serif;
      }
    </style>

  <link rel="stylesheet" href="styles-WHAZYQBV.css"><link rel="stylesheet" href="oc-7645PLQM.css"></head>

  <body class="h-full">
    <app-root>
      <div class="flex flex-col justify-center items-center h-screen">
        <img src="assets/themes/oc/gifs/GPAnimation.gif" width="100px" alt="Loading animation" fetchpriority="low"/>
        <img src="assets/themes/oc/images/ZHLogoWhite.webp" class="mt-2" width="100px" alt="GoProof logo" fetchpriority="high" loading="eager" decoding="async"/>
      </div>
    </app-root>

    <!-- Third-party scripts: after shell markup. Meta + GA inject after window.load;
         Zendesk uses defer + onload. Trello stays synchronous (must init before Angular in iframe). -->
    <script>
      window.addEventListener('load', function () {
        // Meta Pixel (standard loader; fbq queues until fbevents.js loads)
        !(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('init', '1029110952155798');
        fbq('track', 'PageView');
        fbq('track', 'StartTrial', { value: '0.00', currency: 'USD', predicted_ltv: '0.00' });
        fbq('track', 'InitiateCheckout');
        fbq('track', 'Purchase', { value: 0.0, currency: 'USD' });
        fbq('track', 'Lead');

        // Google tag (gtag.js)
        var gtagScript = document.createElement('script');
        gtagScript.async = true;
        gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-DZ6ME48YQT';
        document.head.appendChild(gtagScript);
        window.dataLayer = window.dataLayer || [];
        function gtag() {
          dataLayer.push(arguments);
        }
        window.gtag = gtag;
        gtag('js', new Date());
        gtag('config', 'G-DZ6ME48YQT');
      });
    </script>
    <!-- <noscript>
      <img height="1" width="1" style="display: none" src="https://www.facebook.com/tr?id=1029110952155798&ev=PageView&noscript=1" alt="Facebook Pixel" />
    </noscript> -->

    <!-- Start of oppolis Zendesk Widget script (defer + onload: inline scripts cannot use defer) -->
    <script defer="" id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=88ad39bd-cea4-4627-ae30-a0a5f1775737" onload="zE(function () { zE('messenger', 'hide'); })"></script>

    <!-- Start of Trello Power Up Embed Code -->
    <script src="https://p.trellocdn.com/power-up.min.js"></script>
    <script>
      // CRITICAL: Initialize Trello Power-Up synchronously immediately after script loads
      // This MUST happen before Angular bootstraps to prevent timeout errors
      // Trello waits 30 seconds for initialization - if Angular takes longer, it times out
      // The script tag above is synchronous, so TrelloPowerUp should be available immediately
      (function () {
        if (typeof TrelloPowerUp === 'undefined') {
          console.error('TrelloPowerUp script failed to load!');
          return;
        }

        // Get the current origin to build the card dashboard URL
        var cardDashboardUrl = window.location.origin + '/external-app/trello?card=true';
        var ocIcon = window.location.origin + '/assets/themes/oc/images/oc_logo150x150.svg';

        // Track initialization state to prevent double initialization
        var isInitialized = false;

        // Function to get card buttons - this is called by Trello when rendering buttons
        function getCardButtons(t, options) {
          return [
            {
              icon: ocIcon,
              text: 'GoProof',
              callback: function (t) {
                try {
                  return t.modal({
                    title: 'GoProof',
                    url: cardDashboardUrl,
                    height: 600,
                  });
                } catch (error) {
                  console.error('Error opening Trello modal:', error);
                  return Promise.reject(error);
                }
              },
            },
          ];
        }

        // Initialize immediately - don't wait for icon to load
        // Trello will handle icon loading, and the card-buttons function is called each time buttons are rendered
        try {
          if (!isInitialized) {
            TrelloPowerUp.initialize({
              'card-buttons': getCardButtons,
            });
            isInitialized = true;
          }
        } catch (e) {
          console.error('Error initializing Trello Power-Up:', e);
          // If initialization fails, try once more after a tiny delay
          setTimeout(function () {
            try {
              if (!isInitialized) {
                TrelloPowerUp.initialize({
                  'card-buttons': getCardButtons,
                });
                isInitialized = true;
              }
            } catch (retryError) {
              console.error('Failed to initialize Trello Power-Up on retry:', retryError);
            }
          }, 50);
        }
      })();
    </script>
    <!-- End of Trello Power Up Embed Code -->
  <link rel="modulepreload" href="chunk-LL465NCU.js"><link rel="modulepreload" href="chunk-ZIQGQVDP.js"><link rel="modulepreload" href="chunk-UF5NSW7Q.js"><link rel="modulepreload" href="chunk-FKUHRUI4.js"><link rel="modulepreload" href="chunk-M2I63XT2.js"><link rel="modulepreload" href="chunk-QGZ3FUCF.js"><link rel="modulepreload" href="chunk-E42GHB3D.js"><link rel="modulepreload" href="chunk-2DDZ35LW.js"><link rel="modulepreload" href="chunk-OWE4RFHL.js"><link rel="modulepreload" href="chunk-NRV7QI4E.js"><script src="polyfills-KYZQLWB5.js" type="module"></script><script src="scripts-WA3PVN7X.js" defer></script><script src="main-2YJKZWWI.js" type="module"></script></body>
</html>
