index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Python Minifier - GLAD432</title>
    <meta name="robots" content="index, follow">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="description" content="Optimize your python code's performance with our Python minifier online. Python minifier remove whitespace, comments, and line breaks to compress code, optimizing script size for faster loading and improved efficiency." />
    <meta name="keywords" content="Python, minifier, Python code optimization, online tool, script compression, code minification, web development, optimize Python code, improve script performance, reduce code size, web application optimization, code efficiency, code speed, streamline Python scripts">
    <meta name="author" content="Glad432">
    <link rel="canonical" href="https://glad432.github.io" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:title" content="Python Minifier - GLAD432" />
    <meta property="og:type" content="Website" />
    <meta property="og:description" content="Optimize your python code's performance with our Python minifier online. Python minifier removes whitespace, comments, and line breaks to compress code, optimizing script size for faster loading and improved efficiency." />
    <meta property="og:site_name" content="Python Minifier - GLAD432" />
    <meta property="og:image" content="https://glad432.github.io/favicon.ico" />
    <meta property="og:image:secure_url" content="https://glad432.github.io/favicon.ico" />
    <meta property="og:image:width" content="225" />
    <meta property="og:image:height" content="225" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@gladw_in">
    <meta name="twitter:creator" content="@gladw_in">
    <meta name="twitter:title" content="Python Minifier - GLAD432">
    <meta name="twitter:domain" content="glad432.github.io">
    <meta name="twitter:description" content="Optimize your web app's performance with our Python minifier online. Python minifier remove whitespace, comments, and line breaks to compress code, optimizing script size for faster loading and improved efficiency.">
    <meta name="twitter:image" content="https://glad432.github.io/favicon.ico">
    <meta name="twitter:image:src" content="https://glad432.github.io/favicon.ico">
    <meta name="twitter:image:alt" content="Python Minifier - GLAD432">
    <link rel="icon" type="image/png" href="https://glad432.github.io/favicon.ico" />
    <link rel="shortcut icon" href="https://glad432.github.io/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="https://glad432.github.io/favicon.ico" />
    <meta name="msapplication-TileImage" content="https://glad432.github.io/favicon.ico" />
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HDTEFZ9987"></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      gtag('config', 'G-HDTEFZ9987');
    </script>
    <script>
      (() => {
        const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
        if (localStorage.getItem("darkMode") === null) {
          localStorage.setItem("darkMode", JSON.stringify(isDarkMode));
        }
        document.documentElement.classList.toggle("dark", isDarkMode);
      })();
    </script>
  </head>
  <body class="bg-gray-100 font-sans select-none transition-colors duration-200 ease-in-out underline-links dark:bg-[#1e2022] dark:text-white">
    <header class="top-0 z-30 w-full px-2 py-4 bg-black shadow-xl shadow-black-600/20 sm:px-4">
      <div class="flex items-center justify-between mx-auto max-w-7xl">
        <span class="pl-4 text-2xl font-extrabold text-white">
          <a href="https://glad432.github.io" title="Python Minifier - GLAD432">
            <img src="/img/logo.webp" height="44" width="196" alt="Glad432" oncontextmenu="return false;">
          </a>
        </span>
        <label class="inline-block ml-auto relative w-8 h-8 switch">
          <input type="checkbox" id="darkModeToggle" aria-label="Toggle dark mode">
          <span class="slide top-0 left-0 right-0 bottom-0 round rounded-full absolute before:font-['Font_Awesome_6_Free'] before:top-[3.5px] before:left-[7px] before:font-black before:text-lg before:text-white before:absolute before:content-['\f185'] cursor-pointer hover:bg-blue-700"></span>
        </label>
        <div class="flex items-center space-x-1">
          <nav>
            <ul class="hidden space-x-2 md:inline-flex">
              <li>
                <a href="https://github.com/glad432/glad432.github.io" target="_blank" rel="noopener noreferrer" class="px-4 py-2 font-semibold text-white rounded hover:text-blue-700">Github</a>
              </li>
            </ul>
          </nav>
          <div class="inline-flex md:hidden">
            <button aria-label="Open menu" class="flex-none px-2 text-2xl text-white" id="menuToggle">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
              </svg>
            </button>
            <div class="absolute top-0 left-0 right-0 z-50 flex-col p-2 pb-4 m-2 space-y-3 bg-black rounded shadow hidden" id="menu">
              <button aria-label="Close menu" class="self-end flex-none px-2 ml-2 text-2xl text-white" id="menuClose">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
              <nav>
                <ul class="space-y-2">
                  <li>
                    <a href="https://github.com/glad432/glad432.github.io" target="_blank" rel="noopener noreferrer" class="px-4 py-2 font-semibold text-white rounded hover:text-blue-700">Github</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 bg-white mt-8 mb-8 rounded-lg shadow dark:bg-[#181a1b] dark:shadow-lg">
      <div class="rounded p-5 mb-5 border-2 text-center border-solid border-[#d3d3d3] dark:border-[#3c4144]">
        <h1 class="mb-4 text-3xl font-extrabold text-white md:text-5xl lg:text-6xl dark:text-white">
          <span class="cursor-default text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-blue-400 to-blue-400">Python Minifier</span>
        </h1>
        <div class="mb-2 md:mb-4">
          <div class="mb-3 text-gray-700 text-[13px] lg:text-[15px] font-['Source_Code_Pro'] dark:text-gray-300">Optimizing Python Code for <span id="anitext" class="font-bold"></span>
          </div>
        </div>
      </div>
      <h2 class="relative text-2xl font-bold mt-8 mb-5 text-white bg-black block rounded py-6 pl-[15px] [box-shadow:0_0_2px_rgb(0_0_0/30%)] [border-left:5px_solid_#3b82f6]">Original Code</h2>
      <div id="tabs-overlay" class="hidden cursor-default absolute h-[340px] z-10 left-[1vh] right-[1vh] bg-transparent"></div>
      <button id="from_url" class="text-base font-bold bg-green-500 text-white py-1 px-2 rounded hover:bg-green-600 ease-out cursor-pointer overflow-hidden transform dark:bg-green-600 dark:hover:bg-green-700">Load from URL <i id="fade-4" class="fa-solid fa-link"></i>
      </button>
      <div id="inputContainer" class="hidden mt-4 dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
        <div class="flex flex-col items-center">
          <div class="flex items-center">
            <input type="text" id="fileLinkInput" placeholder="Enter .py link" spellcheck="false" class="cursor-text border border-gray-300 text-sm rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 py-2 px-4 dark:border-gray-600 dark:text-white dark:focus:ring-blue-400">
            <button id="load_File" title="Or click Enter button to load" class="text-base ml-2 font-bold bg-red-500 text-white py-1 px-2 cursor-pointer rounded hover:bg-red-600 ease-out overflow-hidden transform dark:bg-red-600 dark:hover:bg-red-700">Load <i id="fade-3" class="fa-solid fa-cloud-arrow-down"></i>
            </button>
          </div>
          <div class="flex mr-auto text-sm cursor-pointer mt-1 ml-1 space-x-2 font-semibold">
            <div class="help-container !relative !top-[1.5px] right-0 mr-2" oncontextmenu="return false">
              <i class="fas fa-question-circle fa-sm text-sm text-blue-500 mr-2"></i>
              <div class="help-content absolute cursor-default rounded-lg">
                <p class="text-sm text-gray-700 dark:text-gray-300">Only Raw Github URLs (400kb) are recommended</p>
              </div>
            </div>
            <span id="sample_link" class="text-blue-600 hover:underline dark:text-blue-400">Try sample URL <i id="fade-6" class="fa-solid fa-circle-arrow-up fa-sm"></i>
            </span>
            <span id="clear_link" class="text-red-500 hover:underline dark:text-red-400">Clear <i id="fade-7" class="fa-solid fa-trash-can fa-sm"></i>
            </span>
          </div>
        </div>
      </div>
      <input class="hidden" type="file" id="fileInput" accept=".py" multiple />
      <div id="dropArea" class="cursor-pointer rounded-xl border-dashed border-4 border-gray-300 text-center bg-white p-4 md:p-8 m-5 transition-transform duration-300 ease-in-out hover:scale-x-[.99] dark:bg-[#333] dark:border-[#3c4143] dark:[color-scheme:dark] dark:text-[#e8e6e3]">Drag and drop <span class="font-bold pr-1">.py files</span>here or click to <span class="text-blue-600 font-bold hover:underline dark:text-blue-400">browse <i class="fa-solid fa-file-arrow-up"></i>
        </span>
      </div>
      <div class="text-left">
        <span id="line-count" class="font-bold px-4 py-2 bg-blue-500 rounded text-white dark:bg-blue-600">Lines: 53</span>
        <span id="text-size" class="font-bold px-4 py-2 bg-blue-500 rounded text-white dark:bg-blue-600">1.211 kB</span>
      </div>
      <p id="errmsg"></p>
      <div class="flex items-center">
        <ul id="file-tabs" class="list-none pr-px mr-1 [scrollbar-width:thin] pt-3 whitespace-nowrap inline-flex overflow-x-auto  dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
          <li class="file-tab relative cursor-pointer bg-[#f0f0f0] border-[#ccc] px-[25px] py-2 mb-[5px] border border-solid rounded mr-[5px] transition-opacity active" id="file-1" title="1st Tab">
            <i class="fa-brands fa-python text-blue-600 pr-2"></i>File 1.py
          </li>
        </ul>
        <button id="addNewTab" class="mt-2 cursor-pointer" title="click to add a new tab">
          <i class="fa-solid fa-circle-plus fa-xl text-gray-700 dark:text-gray-300"></i>
        </button>
      </div>
      <div id="loading-editor" class="flex items-center justify-center w-auto h-[300px]">
        <div class="text-sm sm:text-xs md:text-xs lg:text-sm font-bold text-gray-700 dark:text-gray-300">Loading <i class="fa-solid fa-spinner fa-spin-pulse fa-sm"></i>
        </div>
      </div>
      <div id="editor" class="hidden w-auto h-[300px] mt-0.5 rounded overflow-hidden border border-solid border-[#cccccc8f] [border-left:6px_solid_rgba(0,_83,_159,_0.65)] dark:border-[#3e4446] dark:[border-left:6px_solid_#00539fa6]">
        <div id="type-overlay" class="md:md:cursor-default md:absolute md:h-[300px] md:z-10 md:left-[10vh] md:right-[10vh] md:bg-transparent"></div>
      </div>
      <button id="clearAll" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-red-500 rounded text-white hover:bg-red-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-red-600 dark:hover:bg-red-700"> Clear <i id="fade-5" class="fa-solid fa-trash fa-xs"></i>
      </button>
      <div class="text-left block place-self-center w-fit my-10 p-4 rounded border-t-[5px] border-solid border-blue-500 [box-shadow:0_1px_3px_#999] md:mx-auto md:p-8 dark:border-blue-700 dark:bg-[#181a1b] dark:text-white dark:[box-shadow:#52585c_0_1px_3px] dark:[border-top-color:#0f3c9f]">
        <p id="showOptions" class="cursor-pointer underline underline-offset-3 decoration-8 decoration-blue-600 pb-4 mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 hover:text-gray-700 md:text-5xl lg:text-6xl dark:text-white dark:hover:text-gray-400">Options:</p>
        <div id="showOptionsContent" class="max-h-[0] overflow-hidden relative [transition:max-height_0.6s_ease-in-out]">
          <div id="minifyOptionContainer"></div>
          <a class="text-blue-500 text-base hover:underline hover:text-blue-600 dark:text-blue-400" href="https://dflook.github.io/python-minifier/transforms" target="_blank" rel="noopener noreferrer">Learn More <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>
          </a>
          <div class="mt-4 space-x-2 text-center">
            <button id="selectall" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-green-500 rounded text-white hover:bg-green-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-green-600 dark:hover:bg-green-700">Select all</button>
            <button id="resetOpt" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-red-500 rounded text-white hover:bg-red-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-red-600 dark:hover:bg-red-700">Reset</button>
          </div>
        </div>
      </div>
      <div class="mb-2 md:mb-4 text-center">
        <span id="minify" class="relative rounded cursor-pointer pt-5 p-4 overflow-hidden group bg-blue-500 hover:bg-gradient-to-r hover:from-blue-500 hover:to-blue-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-blue-400 transition-all ease-out duration-300 z-0 dark:bg-[#0844a6] dark:hover:from-[#2a62a7] dark:hover:to-[#2a62a7]">
          <span class="absolute right-0 w-8 h-40 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease dark:bg-[#181a1b]"></span>
          <span class="relative font-bold text-2xl">Minify <i class="fa-solid fa-down-left-and-up-right-to-center fa-sm"></i>
          </span>
        </span>
        <button id="minifyAll" disabled class="hidden px-3 py-2 ml-2 font-bold cursor-pointer bg-blue-500 rounded-full text-white hover:bg-blue-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 z-10 dark:bg-[#0844a6]"> 5+ </button>
      </div>
      <h2 class="relative text-2xl font-bold mt-8 mb-5 text-white bg-black block rounded py-6 pl-[15px] [box-shadow:0_0_2px_rgb(0_0_0/30%)] [border-left:5px_solid_#ef4444]">Minified Code</h2>
      <div class="text-left">
        <span id="line-count-out" class="font-bold px-4 py-2 bg-red-500 rounded text-white dark:bg-red-600">Lines: 1</span>
        <span id="minified-size" class="font-bold px-4 py-2 bg-red-500 rounded text-white dark:bg-red-600">0.000 kB</span>
      </div>
      <div class="flex items-center">
        <div id="tabs-overlay-out" class="hidden cursor-default absolute h-20 z-10 left-[1vh] right-[1vh] bg-transparent"></div>
        <ul id="file-tabs-out" class="list-none pr-px mr-1 [scrollbar-width:thin] pt-3 whitespace-nowrap inline-flex overflow-x-auto  dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
          <li class="file-tab-out relative cursor-pointer bg-[#f0f0f0] border-[#ccc] px-[25px] py-2 mb-[5px] border border-solid rounded mr-[5px] transition-opacity active" id="file-out-1" title="1st Tab">
            <i class="fa-brands fa-python text-blue-600 pr-2"></i>File 1.py
          </li>
        </ul>
      </div>
      <div id="loading-minified" class="flex items-center justify-center w-auto h-[300px]">
        <div class="text-sm sm:text-xs md:text-xs lg:text-sm font-bold text-gray-700 dark:text-gray-300">Loading <i class="fa-solid fa-spinner fa-spin-pulse fa-sm"></i>
        </div>
      </div>
      <div id="minified" class="hidden w-auto h-[300px] mt-0.5 rounded overflow-hidden border border-solid border-[#cccccc8f] [border-left:6px_solid_rgba(0,_83,_159,_0.65)] dark:border-[#3e4446] dark:[border-left:6px_solid_#00539fa6]"></div>
      <div id="btns-overlay" class="hidden cursor-default absolute h-28 z-10 left-[1vh] right-[1vh] bg-transparent"></div>
      <div class="flex flex-col mb-2 md:mb-4">
        <div class="flex flex-wrap justify-center lg:justify-start gap-0.5 mt-3">
          <div class="flex flex-wrap justify-center gap-[3px] md:gap-1">
            <button id="dw" disabled class="px-4 py-2 mt-2 font-bold cursor-pointer bg-red-500 rounded text-white hover:bg-red-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-red-600 dark:text-white dark:hover:bg-red-700">Download <i id="fade-1" class="fa-solid fa-download"></i>
            </button>
            <button id="copy" disabled class="px-4 py-2 mt-2 mr-0.5 font-bold cursor-pointer bg-green-500 rounded text-white hover:bg-green-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-green-600 dark:text-white dark:hover:bg-green-700">Copy <i class="fa-solid fa-clipboard"></i>
            </button>
          </div>
          <button id="diffPopup" class="hidden md:block mr-0.5 px-4 py-2 mt-2 font-bold cursor-pointer bg-orange-500 rounded text-white hover:bg-orange-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-orange-600 dark:text-white">Compare <i id="fade-10" class="fa-solid fa-code-compare"></i>
          </button>
          <button id="runCode" class="sm:w-auto px-4 py-2 font-bold cursor-pointer bg-purple-500 rounded text-white hover:bg-purple-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 mt-2 dark:bg-purple-600 dark:hover:bg-purple-700">Run Code <i class="fa-regular fa-circle-play"></i>
          </button>
        </div>
        <div id="comProgress" class="hidden mt-2 w-full sm:w-auto dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
          <progress id="comProgressBar" max="100" value="0" class="w-full h-2"></progress>
          <p id="comProgressStatus" class="mt-2 text-base dark:text-gray-300"></p>
        </div>
      </div>
    </div>
    <div id="pyterminal" class="hidden mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 bg-white mt-8 mb-8 rounded-lg shadow max-h-[420px] dark:bg-[#181a1b]">
      <div class="flex items-center">
        <h4 class="text-2xl font-bold from-blue-600 via-blue-400 to-blue-500 bg-gradient-to-r bg-clip-text text-transparent mb-2">
          <i class="fa-brands fa-python"></i> Python Compiler
        </h4>
        <div class="hidden md:block">
          <div class="flex ml-2 relative bottom-5 text-sm cursor-pointer space-x-2 font-semibold dark:text-gray-300">
            <div class="help-container !left-0 mr-2" oncontextmenu="return false">
              <i class="fas fa-question-circle text-gray-400"></i>
              <div class="help-content absolute cursor-default rounded-lg bg-white !w-80 shadow-md text-sm">
                <ol class="text-gray-700 list-decimal list-inside dark:text-gray-300">
                  <li>Max time: 50 seconds.</li>
                  <li>Compiled after minification.</li>
                  <li>Avoid sensitive code.</li>
                  <li>I/O, library, or write limits not available.</li>
                  <li>Online compilers may be slower.</li>
                  <li>No input support.</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
      <pre id="terminaltext" class="select-text font-mono text-xs lg:text-sm max-h-[295px] overflow-auto p-3 rounded [scrollbar-width:thin] text-[#424242] bg-[#c8c8c824] dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#48e448] dark:bg-[#202020]"></pre>
      <button id="closeCompiler" class="cursor-pointer mt-1.5 pl-2 font-semibold text-red-500 hover:underline dark:text-red-400 dark:hover:text-red-300">Close</button>
      <button id="copyCompilertext" class="cursor-pointer mt-1.5 pl-2 font-semibold text-green-500 hover:underline dark:text-green-400 dark:hover:text-green-300">Copy</button>
      <button id="exportCompilertext" class="cursor-pointer mt-1.5 pl-2 font-semibold text-blue-500 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Export</button>
    </div>
    <div id="graph-container" class="hidden font-['Source_Code_Pro'] mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 bg-white mt-8 mb-8 rounded-lg shadow dark:bg-[#181a1b]">
      <h4 class="text-2xl font-bold from-blue-600 via-blue-400 to-blue-500 bg-gradient-to-r bg-clip-text text-transparent mb-2 font-sans">
        <i class="fa-solid fa-chart-line"></i> Visualization
      </h4>
      <div id="line-graph"></div>
      <p class="text-sm mb-2 text-neutral-500 font-sans font-medium dark:text-neutral-300">Minify to update</p>
      <div class="text-center space-x-1">
        <button id="graphkbsize" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-green-500 rounded text-white hover:bg-green-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-green-600 dark:hover:bg-green-500">Size</button>
        <button id="graphlines" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-blue-500 rounded text-white hover:bg-blue-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-blue-600 dark:hover:bg-blue-500">Lines</button>
      </div>
    </div>
    <div class="relative">
      <div id="diff-popup" class="fixed inset-0 bg-[#dededebd] bg-opacity-50 items-center justify-center hidden z-50 dark:bg-[#3938388c]">
        <div id="diff-popup-content" class="relative w-[90%] h-[90%] bg-white rounded shadow-lg overflow-hidden transform scale-90 opacity-0 transition-opacity duration-300 z-60 dark:bg-[#181a1b]">
          <div class="flex items-center pl-1 mx-2">
            <ul id="diff-tabs" class="mb-2.5 overflow-x-auto [scrollbar-width:thin] pr-px mr-1 pt-3 inline-flex text-nowrap  dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]"></ul>
            <div class="flex flex-col ml-auto">
              <label for="diff-text-wrap" class="flex items-center self-center cursor-pointer pl-2">
                <input type="checkbox" id="diff-text-wrap" class="sr-only peer">
                <div class="relative w-9 h-5 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
              </label>
              <span class="cursor-pointer text-neutral-500 pl-2 font-medium text-center text-xs">Line Wrap</span>
            </div>
          </div>
          <div id="diff-editor" class="h-full w-full"></div>
        </div>
      </div>
      <button id="close-diff-popup" class="fixed hidden top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 items-center justify-center text-xl cursor-pointer hover:bg-red-600 focus:outline-none z-[70] dark:bg-red-600" title="Close Diff Editor">
        <i id="fade-11" class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="flex justify-center items-center pb-[25px]">
      <div class="bg-white rounded-lg p-6 flex flex-col md:flex-row md:items-center transition-transform hover:scale-x-[1.02] [box-shadow:0_10px_15px_-3px_#0000001a,_0_4px_6px_-4px_#0000001a] dark:bg-[#181a1b] dark:[box-shadow:0_10px_15px_-3px_rgba(8,_8,_8,_0.3),_0_4px_6px_-4px_rgba(8,_8,_8,_0.2)]">
        <div class="mb-6 md:mb-0 md:mr-6">
          <p class="font-extrabold font-['Source_Code_Pro'] text-center tracking-wide uppercase dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">Share it on..</p>
        </div>
        <div class="flex flex-wrap justify-center">
          <a href="whatsapp://send?text=Check%20out%20this%20python%20minifier!!%20https://glad432.github.io/" target="_blank" rel="noopener noreferrer" class="text-green-500 mx-2 my-2" title="Share on WhatsApp" aria-label="Share on WhatsApp">
            <i class="fab fa-whatsapp fa-2x transition-transform transform hover:-translate-y-2"></i>
          </a>
          <a href="https://telegram.me/share/url?url=https://glad432.github.io/&text=Check%20out%20this%20python%20minifier!!" target="_blank" rel="noopener noreferrer" class="text-blue-500 mx-2 my-2" title="Share on Telegram" aria-label="Share on Telegram">
            <i class="fab fa-telegram-plane fa-2x transition-transform transform hover:-translate-y-2"></i>
          </a>
          <a href="https://www.facebook.com/sharer/sharer.php?u=https://glad432.github.io/" target="_blank" rel="noopener noreferrer" class="text-blue-700 mx-2 my-2" title="Share on Facebook" aria-label="Share on Facebook">
            <i class="fab fa-facebook fa-2x transition-transform transform hover:-translate-y-2"></i>
          </a>
          <a href="https://x.com/intent/post?url=https://glad432.github.io/&text=Check%20out%20this%20python%20minifier!!" target="_blank" rel="noopener noreferrer" class="text-slate-600 mx-2 my-2" title="Share on X" aria-label="Share on X">
            <i class="fab fa-x-twitter fa-2x transition-transform transform hover:-translate-y-2"></i>
          </a>
          <a href="https://www.reddit.com/submit?url=https://glad432.github.io/&title=Check%20out%20this%20python%20minifier!!" target="_blank" rel="noopener noreferrer" class="text-red-500 mx-2 my-2" title="Share on Reddit" aria-label="Share on Reddit">
            <i class="fab fa-reddit fa-2x transition-transform transform hover:-translate-y-2"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="grid place-items-center">
      <span id="show-btn" class="relative cursor-pointer text-center text-white bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-5 py-2.5">Learn More <i id="rot-1" class="fa-solid fa-caret-down"></i>
      </span>
    </div>
    <article id="article" class="font-['Source_Code_Pro'] select-text mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 mt-8 mb-8 transition-all duration-200 ease-in-out dark:bg-[#1e2022] dark:border-gray-700 dark:shadow-md dark:[color-scheme:dark] dark:text-[#e8e6e3]"></article>
    <footer class="bg-black text-xs md:text-sm text-center text-white">
      <div class="pt-9">
        <div class="mb-9 flex justify-center" role="navigation" aria-label="Social Media Links">
          <a href="https://gladw-in.github.io/" target="_blank" rel="noopener noreferrer" class="mr-9 text-neutral-200 hover:text-blue-700" aria-label="Portfolio">
            <i class="fa-solid fa-globe fa-xl transition-transform transform hover:-translate-y-1"></i>
          </a>
          <a href="https://www.linkedin.com/in/glad432/" target="_blank" rel="noopener noreferrer" class="mr-9 text-neutral-200 hover:text-blue-700" aria-label="LinkedIn">
            <i class="fa-brands fa-linkedin fa-xl transition-transform transform hover:-translate-y-1"></i>
          </a>
          <a href="https://github.com/gladw-in" target="_blank" rel="noopener noreferrer" class="text-neutral-200 hover:text-blue-700" aria-label="GitHub">
            <i class="fa-brands fa-github fa-xl transition-transform transform hover:-translate-y-1"></i>
          </a>
        </div>
      </div>
      <div class="p-4 text-center bg-neutral-700 text-neutral-200">&copy; GLAD432 <span id="year" class="text-neutral-400"></span>
        <span class="text-neutral-400">All Rights Reserved</span>
      </div>
    </footer>
    <script type="module" src="js/script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.51.0/min/vs/loader.js"></script>
  </body>
</html>