<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
  <meta name="theme-color" content="#000000" />
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#000000" />
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1E293B" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="OneUptime — the complete open-source observability platform.">
  <meta name="keywords" content="monitoring, observability, uptime, dashboard, PWA, progressive web app">
  <meta name="author" content="OneUptime">
  <meta name="slack-app-id" content="ACVBMTPJQ">

  <!-- PWA Meta Tags -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="OneUptime">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="OneUptime">
  
  <!-- iOS Splash Screens -->
  <meta name="apple-touch-startup-image" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" content="/dashboard/assets/img/splash/apple-splash-1290-2796.jpg">
  <meta name="apple-touch-startup-image" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" content="/dashboard/assets/img/splash/apple-splash-1179-2556.jpg">
  <meta name="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" content="/dashboard/assets/img/splash/apple-splash-1284-2778.jpg">
  <meta name="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" content="/dashboard/assets/img/splash/apple-splash-1125-2436.jpg">
  <meta name="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" content="/dashboard/assets/img/splash/apple-splash-828-1792.jpg">
  
  <!-- Microsoft Tiles -->
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="msapplication-TileImage" content="/dashboard/assets/img/favicons/mstile-144x144.png">
  <meta name="msapplication-config" content="/dashboard/browserconfig.xml">

  <% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %> 
  <!-- Google Tag Manager -->
  <script>(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', 'GTM-PKQD5WH');
  </script>
  <!-- End Google Tag Manager -->
  <% } %>

  <!-- Manifest and Icons -->
  <link rel="manifest" href="/dashboard/manifest.json">
  <link rel="apple-touch-icon" sizes="180x180" href="/dashboard/assets/img/favicons/apple-touch-icon.png">
  <link rel="shortcut icon" href="/dashboard/assets/img/favicons/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/dashboard/assets/img/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="194x194" href="/dashboard/assets/img/favicons/favicon-194x194.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/dashboard/assets/img/favicons/android-chrome-192x192.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/dashboard/assets/img/favicons/favicon-16x16.png">
  <link rel="mask-icon" href="/dashboard/assets/img/favicons/safari-pinned-tab.svg" color="#000000">

  <!-- Preload critical resources -->
  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  
  <!-- Fallback for preloaded stylesheets -->
  <noscript>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  </noscript>

  <style>
    * {
      font-family: Inter;
    }


    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      background: transparent;
      bottom: 0;
      color: transparent;
      cursor: pointer;
      height: auto;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: auto;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      background: transparent;
      bottom: 0;
      color: transparent;
      cursor: pointer;
      height: auto;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: auto;
    }

    .courier-prime {
      font-family: 'Courier Prime', monospace;
    }

    .dark-scrollbar {
      scrollbar-color: #475569 #0f172a;
    }

    :fullscreen,
    ::backdrop {
      background-color: rgb(249, 250, 251)
    }
  </style>

  <script src="/dashboard/assets/js/tailwind-3.4.5.js"></script>

  <script src="/dashboard/env.js"></script>


  <title>OneUptime Dashboard</title>


  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
</head>

<body class="h-full bg-gray-50">
  <% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %> 
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PKQD5WH" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  <% } %>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script type="module" src="/dashboard/dist/Index.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend:
        {
          fontFamily: {
            'display': ['Inter', 'sans-serif'],
            'body': ['Inter', 'sans-serif']
          },
        },
      },
    }
  </script>

  <!-- PWA Service Worker Registration -->
  <script>
    // Service Worker Registration for PWA with proper update handling
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/dashboard/sw.js', {
          scope: '/'
        }).then(function(registration) {
          console.log('OneUptime PWA: Service Worker registered successfully', registration.scope);
          
          // Handle updates
          registration.addEventListener('updatefound', function() {
            const newWorker = registration.installing;
            if (newWorker) {
              newWorker.addEventListener('statechange', function() {
                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                  // New version available
                  console.log('OneUptime PWA: New version available');
                  
                  // Show a non-intrusive update notification
                  showUpdateNotification(newWorker);
                }
              });
            }
          });
          
          // Check for updates periodically
          setInterval(function() {
            registration.update();
          }, 60000); // Check every minute
          
        }).catch(function(error) {
          console.log('OneUptime PWA: Service Worker registration failed', error);
        });

        // Handle service worker messages
        navigator.serviceWorker.addEventListener('message', function(event) {
          if (event.data && event.data.type === 'SW_UPDATED') {
            window.location.reload();
          }
        });

        // Listen for controlled change (when SW takes control)
        navigator.serviceWorker.addEventListener('controllerchange', function() {
          console.log('OneUptime PWA: New service worker took control');
          window.location.reload();
        });
      });
    }

    // Show update notification
    function showUpdateNotification(newWorker) {
      // Create a simple notification banner
      const banner = document.createElement('div');
      banner.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #007bff;
        color: white;
        padding: 12px 16px;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 14px;
        z-index: 10000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transform: translateY(-100%);
        transition: transform 0.3s ease;
      `;
      
      banner.innerHTML = `
        <div style="max-width: 800px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
          <span>🚀 A new version of OneUptime is available!</span>
          <div style="display: flex; gap: 12px;">
            <button onclick="updateApp()" style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 13px;">Update Now</button>
            <button onclick="dismissUpdate()" style="background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 13px;">Later</button>
          </div>
        </div>
      `;
      
      document.body.appendChild(banner);
      
      // Animate in
      setTimeout(() => {
        banner.style.transform = 'translateY(0)';
      }, 100);
      
      // Auto-dismiss after 10 seconds
      setTimeout(() => {
        dismissUpdate();
      }, 10000);
      
      // Store reference for global functions
      window.updateBanner = banner;
      window.newServiceWorker = newWorker;
    }

    // Update app function
    function updateApp() {
      if (window.newServiceWorker) {
        window.newServiceWorker.postMessage({type: 'SKIP_WAITING'});
        dismissUpdate();
        
        // Show loading indicator
        const loadingDiv = document.createElement('div');
        loadingDiv.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0,0,0,0.8);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          font-size: 16px;
          z-index: 10001;
        `;
        loadingDiv.innerHTML = `
          <div style="text-align: center;">
            <div style="margin-bottom: 16px;">🔄</div>
            <div>Updating OneUptime...</div>
          </div>
        `;
        document.body.appendChild(loadingDiv);
      }
    }

    // Dismiss update notification
    function dismissUpdate() {
      if (window.updateBanner) {
        window.updateBanner.style.transform = 'translateY(-100%)';
        setTimeout(() => {
          if (window.updateBanner && window.updateBanner.parentNode) {
            window.updateBanner.parentNode.removeChild(window.updateBanner);
          }
        }, 300);
      }
    }

    // Performance monitoring
    if ('performance' in window && 'PerformanceObserver' in window) {
      // Monitor Largest Contentful Paint
      const lcpObserver = new PerformanceObserver((entryList) => {
        const entries = entryList.getEntries();
        if (entries.length > 0) {
          const lcp = entries[entries.length - 1];
          console.log('OneUptime PWA: LCP', lcp.startTime);
        }
      });
      lcpObserver.observe({entryTypes: ['largest-contentful-paint']});

      // Monitor First Input Delay
      const fidObserver = new PerformanceObserver((entryList) => {
        const entries = entryList.getEntries();
        entries.forEach((entry) => {
          console.log('OneUptime PWA: FID', entry.processingStart - entry.startTime);
        });
      });
      fidObserver.observe({entryTypes: ['first-input']});
    }
  </script>
</body>

</html>