<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>semek ai gallery</title>
    <meta name="description" content="Exclusive AI-generated artwork gallery" />
    <meta name="author" content="Semek AI Gallery" />
    
    <!-- Security Headers -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.patreon.com https://c6.patreon.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: blob: https://*.supabase.co https://c6.patreon.com https://www.patreon.com https://*.patreonusercontent.com; connect-src 'self' https://*.supabase.co https://www.patreon.com https://api.patreon.com wss://*.supabase.co; font-src 'self' https://fonts.gstatic.com; object-src 'none'; base-uri 'self'; form-action 'self' https://www.patreon.com;" />
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <!-- X-Frame-Options moved to HTTP headers for proper functionality -->
    <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />

    <meta property="og:title" content="semek ai gallery" />
    <meta property="og:description" content="Exclusive AI-generated artwork gallery" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@semek_ai_gallery" />
    
    <!-- Performance optimizations - enhanced preconnections for faster loading -->
    <link rel="preconnect" href="https://drasynkebecsdottppyz.supabase.co" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Resource hints for faster loading -->
    <meta name="theme-color" content="#000000">
    <meta name="color-scheme" content="dark light">
    
    <!-- Critical resource preloading - prioritized for LCP optimization -->
    <link rel="preload" href="/assets/main-dd998050.tsx" as="script">
    <link rel="preload" href="/assets/App-08b7ec2d.tsx" as="script">
    <link rel="modulepreload" href="/assets/main-dd998050.tsx">
    
    <!-- DNS prefetch for API endpoints and CDNs -->
    <link rel="dns-prefetch" href="https://drasynkebecsdottppyz.supabase.co">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    
    <!-- Prefetch first visible image placeholder for improved LCP -->
    <link rel="prefetch" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDQwMCA2MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjMUExQTFBIi8+Cjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNjY2NjY2IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCI+TG9hZGluZy4uLjwvdGV4dD4KPC9zdmc+" as="image">
    
    
    <!-- Prefetch critical API endpoints - Disabled due to auth requirements -->
    <!-- <link rel="prefetch" href="https://drasynkebecsdottppyz.supabase.co/rest/v1/list-images?limit=20"> -->
    <!-- <link rel="prefetch" href="https://drasynkebecsdottppyz.supabase.co/rest/v1/get-tag-counts"> -->
    
    <!-- Cache control hints -->
    <meta http-equiv="Cache-Control" content="public, max-age=31536000, immutable" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="shortcut icon" href="/favicon.ico">
    
    <!-- Critical CSS for performance - completely inline to prevent render blocking -->
    <style>
      /* Reset and base */
      *{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,ui-sans-serif,sans-serif;background:#0f0f12;color:#f8fafc;line-height:1.5;height:100%;overflow-x:hidden}#root{min-height:100vh;width:100%;position:relative}
      
      /* Critical loading state - enhanced for LCP */
      .critical-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0f0f12}.critical-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.1);border-left-color:#a855f7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
      
      /* Performance-optimized skeleton loading */
      .loading-skeleton{background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a 50%,#1a1a1a 75%);background-size:200% 100%;animation:shimmer 1.5s infinite ease-in-out;border-radius:8px}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
      
      /* Optimized image card skeleton */
      .image-skeleton{aspect-ratio:3/4;background:#1a1a1a;border-radius:8px;overflow:hidden;position:relative}.image-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-100%);animation:loading-shine 1.5s infinite}@keyframes loading-shine{to{transform:translateX(100%)}}
      
      /* Essential layout - gallery grid */
      .masonry-layout{position:relative;width:100%}.masonry-item{position:absolute;transition:transform .25s ease;will-change:transform}.image-card{display:block;line-height:0;transition:transform .2s ease;border-radius:8px;overflow:hidden;background:#1a1a1a}.image-card img{display:block;width:100%;height:auto;object-fit:cover;vertical-align:top}
      
      /* Critical navigation */
      .nav-header{background:rgba(15,15,18,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:50}.nav-container{max-width:1800px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:between;height:64px}
      
      /* Essential buttons */
      .btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s ease;cursor:pointer;border:none}.btn-primary{background:#a855f7;color:#fff}.btn-primary:hover{background:#9333ea;transform:translateY(-1px)}
      
      /* Mobile essentials */
      @media (max-width:767px){html,body{-webkit-overflow-scrolling:touch}input,textarea,select{font-size:16px!important}.nav-container{padding:0 0.5rem}.masonry-layout{padding:0 0.5rem}}
      
      /* Hide non-critical content initially */
      .lazy-load{opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}.lazy-load.loaded{opacity:1;transform:translateY(0)}
    </style>
    
    <!-- Load all non-critical styles asynchronously after first paint -->
    <script>
      // Advanced async CSS loading to completely eliminate render blocking
      const loadCSS = (href, priority = 'low') => {
        return new Promise((resolve) => {
          const link = document.createElement('link');
          link.rel = 'preload';
          link.as = 'style';
          link.href = href;
          link.onload = () => {
            link.rel = 'stylesheet';
            resolve();
          };
          link.onerror = () => resolve(); // Don't block on CSS errors
          document.head.appendChild(link);
        });
      };
      
      // Load main styles after critical rendering
      const loadMainStyles = () => {
        // Use requestIdleCallback for better performance
        if ('requestIdleCallback' in window) {
          requestIdleCallback(() => {
            Promise.all([
              loadCSS('/src/index.css')
            ]).then(() => {
              console.log('Styles loaded');
              document.body.classList.add('styles-loaded');
            });
          });
        } else {
          setTimeout(() => {
            Promise.all([
              loadCSS('/src/index.css')
            ]);
          }, 100);
        }
      };
      
      // Load after first contentful paint
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadMainStyles);
      } else {
        loadMainStyles();
      }
    </script>
    <script type="module" crossorigin src="/assets/index-6aaf8e0d.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-core-446cef08.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-9a9fe0dd.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-dom-60e0ed59.js">
    <link rel="stylesheet" href="/assets/index-95d4acc1.css">
  </head>

  <body>
    <div id="root"></div>
    
    
    <!-- Service Worker Management -->
    <script>
      // Development: Unregister service workers to prevent interference
      if ('serviceWorker' in navigator && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
        navigator.serviceWorker.getRegistrations().then(function(registrations) {
          for(let registration of registrations) {
            console.log('Unregistering SW for development:', registration.scope);
            registration.unregister();
          }
        });
      }
      
      // Production: Service worker temporarily disabled for debugging
      if (false && 'serviceWorker' in navigator && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw-performance.js')
            .then(registration => {
              console.log('SW: Performance service worker registered');
              
              // Check for updates periodically
              setInterval(() => {
                registration.update();
              }, 60000); // Check every minute
            })
            .catch(error => {
              console.warn('SW: Service worker registration failed:', error);
            });
        });
      }
      
      // Unregister any existing service workers for debugging
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function(registrations) {
          for(let registration of registrations) {
            console.log('Unregistering existing SW for debugging:', registration.scope);
            registration.unregister();
          }
        });
      }
    </script>
  </body>
</html>
