<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>
  <meta charset="UTF-8" />
  <title>Utilate - All-in-one Online Tools</title>

  <script>
    (function(){try{const e=document.documentElement,t=localStorage.getItem("themeSettings"),a=t?JSON.parse(t):null,s=a?a.mode:"light";"dark"===s||!a&&window.matchMedia("(prefers-color-scheme: dark)").matches?e.classList.add("dark"):e.classList.remove("dark")}catch(e){}})()
  </script>

  <!-- Core Meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description"
    content="A modern, responsive website for Utilate, a free all-in-one online tools platform. It features a clean, tabbed layout for categories like PDF, Image, Video, and more, with tools displayed in an organized grid." />
  <meta name="keywords"
    content="online tools, free utilities, PDF tools, image editor, video converter, file converter, privacy-focused tools" />
  <meta name="author" content="Utilate" />
  <link rel="canonical" href="https://www.utilate.com/" />

  <!-- Favicons -->
  <link rel="icon" href="https://www.utilate.com/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" href="https://www.utilate.com/android-chrome-192x192.png" sizes="192x192" />
  <link rel="apple-touch-icon" href="https://www.utilate.com/apple-touch-icon.png" />
  <meta name="msapplication-TileImage" content="https://www.utilate.com/msapplication-TileImage-270x270.png" />
  <link rel="manifest" href="/assets/manifest-BbZHPiXf.json" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.utilate.com/" />
  <meta property="og:title" content="Utilate - All-in-one Online Tools" />
  <meta property="og:description"
    content="A suite of free, easy-to-use online utilities to help you with your daily tasks. No installation required." />
  <meta property="og:image" content="https://www.utilate.com/og-image.png" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://www.utilate.com/" />
  <meta name="twitter:title" content="Utilate - All-in-one Online Tools" />
  <meta name="twitter:description"
    content="A suite of free, easy-to-use online utilities to help you with your daily tasks. No installation required." />
  <meta property="twitter:image" content="https://www.utilate.com/og-image.png" />

  <!-- UI & Theme -->
  <meta name="theme-color" content="#2563eb" />

  <!-- Resource Hints -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://cdn.tailwindcss.com">
  <link rel="preconnect" href="https://aistudiocdn.com" crossorigin>
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

  <!-- Module Preloading -->
  <script type="importmap">
    {
        "imports": {
          "@/": "./",
          "react": "https://aistudiocdn.com/react@^19.1.1",
          "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
          "react/": "https://aistudiocdn.com/react@^19.1.1/",
          "@google/genai": "https://aistudiocdn.com/@google/genai@^0.14.2",
          "react-dom": "https://aistudiocdn.com/react-dom@^19.1.1",
          "pdf-lib": "https://aistudiocdn.com/pdf-lib@^1.17.1",
          "jszip": "https://aistudiocdn.com/jszip@^3.10.1",
          "file-saver": "https://aistudiocdn.com/file-saver@^2.0.5",
          "docx": "https://aistudiocdn.com/docx@^8.5.0",
          "pdfjs-dist": "https://aistudiocdn.com/pdfjs-dist@^4.4.168/build/pdf.mjs",
          "heic2any": "https://aistudiocdn.com/heic2any@^0.0.4",
          "tesseract.js": "https://aistudiocdn.com/tesseract.js@^5.1.0",
          "qrcode": "https://aistudiocdn.com/qrcode@^1.5.3",
          "jsqr": "https://aistudiocdn.com/jsqr@^1.4.0",
          "jsbarcode": "https://aistudiocdn.com/jsbarcode@^3.11.6",
          "diff": "https://aistudiocdn.com/diff@^5.2.0",
          "marked": "https://aistudiocdn.com/marked@^13.0.2",
          "exif-js": "https://aistudiocdn.com/exif-js@^2.3.0"
        }
      }
    </script>
  <link rel="modulepreload" href="data:application/octet-stream;base64,aW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsKaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbS9jbGllbnQnOwppbXBvcnQgQXBwIGZyb20gJy4vQXBwJzsKaW1wb3J0IHsgVGhlbWVQcm92aWRlciB9IGZyb20gJy4vY29udGV4dHMvVGhlbWVDb250ZXh0JzsKaW1wb3J0IHsgRmF2b3JpdGVzUHJvdmlkZXIgfSBmcm9tICcuL2NvbnRleHRzL0Zhdm9yaXRlc0NvbnRleHQnOwoKLy8gVXNlIGdsb2JhbFRoaXMgZm9yIFNTUiBzYWZldHkgYW5kIHRvIGZpeCBUeXBlU2NyaXB0IGVycm9ycy4KaWYgKHR5cGVvZiAoZ2xvYmFsVGhpcyBhcyBhbnkpLmRvY3VtZW50ICE9PSAndW5kZWZpbmVkJykgewogIGNvbnN0IHJvb3RFbGVtZW50ID0gKGdsb2JhbFRoaXMgYXMgYW55KS5kb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncm9vdCcpOwogIGlmICghcm9vdEVsZW1lbnQpIHsKICAgIHRocm93IG5ldyBFcnJvcigiQ291bGQgbm90IGZpbmQgcm9vdCBlbGVtZW50IHRvIG1vdW50IHRvIik7CiAgfQogIAogIGNvbnN0IHJvb3QgPSBSZWFjdERPTS5jcmVhdGVSb290KHJvb3RFbGVtZW50KTsKICByb290LnJlbmRlcigKICAgIDxSZWFjdC5TdHJpY3RNb2RlPgogICAgICA8VGhlbWVQcm92aWRlcj4KICAgICAgICA8RmF2b3JpdGVzUHJvdmlkZXI+CiAgICAgICAgICA8QXBwIC8+CiAgICAgICAgPC9GYXZvcml0ZXNQcm92aWRlcj4KICAgICAgPC9UaGVtZVByb3ZpZGVyPgogICAgPC9SZWFjdC5TdHJpY3RNb2RlPgogICk7Cn0=" />
  <link rel="modulepreload" href="https://aistudiocdn.com/react@^19.1.1" />
  <link rel="modulepreload" href="https://aistudiocdn.com/react-dom@^19.1.1/client" />
  <link rel="modulepreload" href="https://aistudiocdn.com/react@^19.1.1/jsx-runtime" />

  <!-- Fonts -->
  <link rel="preload"
    href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Lora:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap"
    as="style" onload="this.onload=null;this.rel='stylesheet'">
  <script src="https://cdn.jsdelivr.net/npm/docx@8.5.0/build/index.min.js"></script>
  <noscript>
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Lora:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap">
  </noscript>

  <!-- Styles -->
  <style>
    :root {
      --color-primary-50: 220 89% 97%;
      --color-primary-100: 220 90% 94%;
      --color-primary-200: 221 91% 88%;
      --color-primary-300: 223 93% 80%;
      --color-primary-400: 227 94% 71%;
      --color-primary-500: 234 98% 64%;
      --color-primary-600: 243 100% 50%;
      --color-primary-700: 244 89% 46%;
      --color-primary-800: 245 83% 41%;
      --color-primary-900: 244 76% 31%;
      --color-primary-950: 246 80% 16%
    }
  </style>
  <style>
    body {
      background-color: #f8fafc
    }

    .dark body {
      background-color: #0f172a
    }

    .app-loader {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90vh
    }

    .app-loader__spinner {
      width: 48px;
      height: 48px;
      border: 5px solid hsl(var(--color-primary-200));
      border-bottom-color: hsl(var(--color-primary-600));
      border-radius: 50%;
      animation: app-loader-rotation 1s linear infinite
    }

    @keyframes app-loader-rotation {
      0% {
        transform: rotate(0deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }
  </style>


  <!-- Structured Data -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Utilate",
      "url": "https://www.utilate.com/",
      "description": "A modern, responsive website for Utilate, a free all-in-one online tools platform. It features a clean, tabbed layout for categories like PDF, Image, Video, and more, with tools displayed in an organized grid.",
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://www.utilate.com/search?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      }
    }
  </script>
  <link rel="stylesheet" href="/index.css">
  <script type="module" crossorigin src="/assets/index-B-U9OBok.js"></script>
</head>

<body class="bg-slate-50 dark:bg-slate-900 font-sans">
  <div id="root">
    <div class="app-loader">
      <div class="app-loader__spinner"></div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: "class", theme: { extend: { colors: { primary: { DEFAULT: "hsl(var(--color-primary-600))", 50: "hsl(var(--color-primary-50))", 100: "hsl(var(--color-primary-100))", 200: "hsl(var(--color-primary-200))", 300: "hsl(var(--color-primary-300))", 400: "hsl(var(--color-primary-400))", 500: "hsl(var(--color-primary-500))", 600: "hsl(var(--color-primary-600))", 700: "hsl(var(--color-primary-700))", 800: "hsl(var(--color-primary-800))", 900: "hsl(var(--color-primary-900))", 950: "hsl(var(--color-primary-950))" } }, fontFamily: { sans: ['"Baloo 2"', "ui-sans-serif", "system-ui"], serif: ["Lora", "ui-serif", "Georgia"], mono: ["Source Code Pro", "ui-monospace"] }, keyframes: { fadeIn: { from: { opacity: "0", transform: "translateY(10px)" }, to: { opacity: "1", transform: "translateY(0px)" } }, fadeOut: { to: { opacity: "0", transform: "translateY(10px)" } }, 'progress-indeterminate': { '0%': { left: '-40%' }, '100%': { left: '100%' } } }, animation: { "content-fade-in": "fadeIn 0.4s ease-out forwards", "content-fade-out": "fadeOut 0.2s ease-in forwards", 'progress-indeterminate': 'progress-indeterminate 1.5s ease-in-out infinite' } } } }
  </script>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-SPY5YE2JB5"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-SPY5YE2JB5');
  </script>

  <!-- Microsoft Clarity -->
  <script type="text/javascript">
    (function (c, l, a, r, i, t, y) {
      c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
      t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
      y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
    })(window, document, "clarity", "script", "tpyaivlyy0");
  </script>

  <!-- Google Adsense -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8419052764781100"
    crossorigin="anonymous"></script>

  <!-- Other libraries -->

  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js').then(registration => {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, err => {
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }
  </script>
</body>

</html>