
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quick.Surf</title>
    <meta name="description" content="Get to your bookmarks - quick" />
    <meta name="author" content="Lovable" />

    <meta property="og:title" content="Quick Surf" />
    <meta property="og:description" content="Get to your bookmarks - quick" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/lovable-uploads/surf.png" />

    <!-- Set initial favicon before JS loads -->
    <link rel="icon" href="/lovable-uploads/surf.png" type="image/png" />
    
    <!-- Enhanced resource hints for early connection setup -->
    <link rel="preconnect" href="https://ntpsfdjwjfhxvjmvwoxd.supabase.co" crossorigin>
    <link rel="dns-prefetch" href="https://ntpsfdjwjfhxvjmvwoxd.supabase.co">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Load Google Fonts completely asynchronously -->
    <script>
      // Load Google Fonts asynchronously to prevent any render blocking
      (function() {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Amatic+SC:wght@700&family=Anton&family=Barriecito&family=Bebas+Neue&family=Bitter:wght@400;700&family=Bungee&family=Cabin+Sketch:wght@700&family=Caveat:wght@700&family=Cinzel+Decorative:wght@700&family=Fredoka:wght@400;500;600;700&family=Indie+Flower&family=Inter:wght@400;500;600&family=Kalam:wght@300;400;700&family=Lato:wght@400;700&family=Lobster&family=Merriweather:wght@400;700&family=Nunito:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Pacifico&family=Permanent+Marker&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;500;600;700&family=Raleway+Dots&family=Reenie+Beanie&family=Righteous&family=Roboto:wght@400;500;700&family=Rubik:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=Space+Mono:wght@400;700&family=Special+Elite&family=Titan+One&family=VT323&family=Work+Sans:wght@400;500;600;700&display=swap';
        link.media = 'print';
        link.onload = function() { this.media = 'all'; };
        document.head.appendChild(link);
      })();
    </script>
    <noscript><link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet"></noscript>
    
    <!-- Preload critical images for returning visitors -->
    <script>
      if (localStorage.getItem('quicksurf_visited') === 'true') {
        const criticalImages = ['/lovable-uploads/search.png', '/lovable-uploads/surf.png', '/lovable-uploads/zichtbaar.png'];
        criticalImages.forEach(src => {
          const link = document.createElement('link');
          link.rel = 'preload';
          link.as = 'image';
          link.href = src;
          link.fetchPriority = 'low';
          document.head.appendChild(link);
        });
      }
    </script>
    
    <!-- Preload LCP image - removed static preload as Vite-processed images have dynamic hashes.
         The preload is now handled dynamically in Landing.tsx for the carousel's first image. -->
     
    
    <!-- CSS is loaded via main.tsx import, no separate loading needed -->
    
    <!-- Critical CSS - inline all essential styles to prevent render blocking -->
    <style>
      /* CSS Variables */
      :root {--background: rgba(255, 255, 255, 1);
        --foreground: rgba(0, 0, 0, 1);

        --card: rgba(255, 255, 255, 1);
        --card-foreground: rgba(2, 8, 23, 1);

        --primary: rgba(0, 102, 204, 1);
        --primary-foreground: rgba(245, 250, 255, 1);

        --secondary: rgba(240, 245, 250, 1);
        --secondary-foreground: rgba(15, 23, 42, 1);

        --muted: rgba(240, 245, 250, 1);
        --muted-foreground: rgba(100, 116, 139, 1);

        --accent: rgba(240, 245, 250, 1);
        --accent-foreground: rgba(15, 23, 42, 1);

        --destructive: rgba(239, 68, 68, 1);
        --destructive-foreground: rgba(245, 250, 255, 1);
        --border: rgba(226, 232, 240, 1);
        --input: rgba(226, 232, 240, 1);
        --ring: rgba(2, 8, 23, 1);

        --radius: 0.5rem;

        --theme-background: rgba(255, 255, 255, 1);
        --theme-category-title: rgba(0, 0, 0, 1);
        --theme-text-main: rgba(0, 0, 0, 1);
        --theme-text-secondary: rgba(255, 255, 255, 0.7);

      }

      /* Base styles */
      *, ::before, ::after {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: #e5e7eb;
      }
      
      html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
      
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        background: #ffffff !important;
        color: var(--theme-text-main, #FFFFFF);
      }
      
      #root {
        min-height: 100vh;
        background: #ffffff !important;
      }
      
      /* Critical bookmark styles */
      .bookmarks-theme-bg {
        background: var(--theme-background, #ffffff) !important;
      }
      
      .bookmarks-title {
        color: var(--theme-category-title, #4b4a4a) !important;
        font-weight: 600;
      }
      
      .bookmarks-main-text {
        color: var(--theme-text-main, #000000) !important;
      }
      
      /* Critical grid layout */
      .bookmark-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.85rem;
      }
      
      .bookmark-item {
        color: var(--theme-text-main, #000000) !important;
        background: transparent !important;
        border: none !important;
        min-height: 20px;
        padding: 0;
        transition: transform 0.2s ease;
      }
      
      /* Critical button styles */
      .button-theme-filled {
        color: var(--theme-background) !important;
        background-color: var(--theme-category-title) !important;
        border-color: var(--theme-category-title) !important;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        transition: opacity 0.2s;
        border: 1px solid;
        cursor: pointer;
      }
      
      .button-theme-filled:hover {
        opacity: 0.9;
      }

      /* Critical flex utilities */
      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-between { justify-content: space-between; }
      .gap-2 { gap: 0.5rem; }
      .gap-4 { gap: 1rem; }
      
      /* Critical spacing */
      .p-4 { padding: 1rem; }
      .p-8 { padding: 2rem; }
      .min-h-screen { min-height: 100vh; }
      
      /* Critical responsive */
      @media (min-width: 768px) {
        .md\\:p-8 { padding: 2rem; }
      }
      
      /* Loading skeleton */
      .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .5; }
      }
    </style>
    <script type="module" crossorigin src="/assets/main-CnzVrUW1.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-D0PuDlia.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-vendor-DxJlOVdE.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-vendor-CNKBKEfJ.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-vendor-CB6b49Jp.js">
    <link rel="stylesheet" crossorigin href="/assets/styles-WlBV7FT9.css">
  </head>

  <body>
    <div id="root"></div>
    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
  </body>
</html>
