Add file and help

Author: hermanzdosilovic

index.html

@@ -83,6 +83,31 @@
         <a href="https://judge0.com" target="_blank" rel="noopener" tabindex="-1" class="w-8 h-8 rounded-md judge0-showLogo">
             <img src="./images/icon_var2_rounded_512.png">
         </a>
+        <div class="max-md:hidden judge0-showFileMenu judge0-dropdown">
+            <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm transition rounded-md judge0-dropdown-btn dark:hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 hover:bg-zinc-100 whitespace-nowrap">
+                <span class="overflow-hidden text-nowrap">File</span>
+            </button>
+            <div class="absolute hidden mt-1 overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-md [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-thumb]:bg-zinc-200 dark:[&::-webkit-scrollbar-track]:bg-transparent dark:[&::-webkit-scrollbar-thumb]:bg-zinc-700 text-sm bg-white border rounded-md shadow-md judge0-dropdown-menu max-h-1/2 dark:border-zinc-800 dark:bg-black z-50">
+                <ul class="py-2">
+                    <li class="mx-2"><a class="flex items-center gap-2 px-4 py-1 rounded-md cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800 size-full"><i class="w-4 text-center fa-solid fa-file"></i>Open File...</a></li>
+                    <li class="mx-2"><a class="flex items-center gap-2 px-4 py-1 rounded-md cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800 size-full"><i class="w-4 text-center fa-solid fa-floppy-disk"></i>Save</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="max-md:hidden judge0-showHelpMenu judge0-dropdown">
+            <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm transition rounded-md judge0-dropdown-btn dark:hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 hover:bg-zinc-100 whitespace-nowrap">
+                <span class="overflow-hidden text-nowrap">Help</span>
+            </button>
+            <div class="absolute hidden mt-1 overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-md [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-thumb]:bg-zinc-200 dark:[&::-webkit-scrollbar-track]:bg-transparent dark:[&::-webkit-scrollbar-thumb]:bg-zinc-700 text-sm bg-white border rounded-md shadow-md judge0-dropdown-menu max-h-1/2 dark:border-zinc-800 dark:bg-black z-50">
+                <ul class="py-2">
+                    <li class="mx-2"><a class="flex items-center gap-2 px-4 py-1 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 size-full" href="https://github.com/judge0/ide" target="_blank" rel="noopener"><i class="w-4 text-center fa-brands fa-github"></i>GitHub Repository</a></li>
+                    <li class="mx-2"><a class="flex items-center gap-2 px-4 py-1 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 size-full" href="/embed" target="_blank" rel="noopener"><i class="w-4 text-center fa-solid fa-code"></i>Embed Guide</a></li>
+                    <li class="mx-2"><a class="flex items-center gap-2 px-4 py-1 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 size-full" href="https://platform.sulu.sh/apis/judge0" target="_blank" rel="noopener"><i class="w-4 text-center fa-solid fa-book"></i>HTTP API Documentation</a></li>
+                    <li class="mx-2"><a class="flex items-center gap-2 px-4 py-1 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 size-full" href="/PRIVACY.md" target="_blank" rel="noopener"><i class="w-4 text-center fa-solid fa-shield-halved"></i>Privacy Policy</a></li>
+                    <li class="mx-2"><a class="flex items-center gap-2 px-4 py-1 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 size-full" href="/TERMS.md" target="_blank" rel="noopener"><i class="w-4 text-center fa-solid fa-file-signature"></i>Terms of Service</a></li>
+                </ul>
+            </div>
+        </div>
         <div class="max-md:hidden judge0-showSelectLanguage judge0-dropdown">
             <button class="flex items-center justify-between h-8 px-2 text-sm text-left bg-transparent border rounded-md judge0-dropdown-btn dark:border-zinc-800 focus-visible:outline-none focus-visible:ring-2">
                 <span class="overflow-hidden text-nowrap"></span>
@@ -101,16 +126,16 @@
             Run
         </button>
         <div class="judge0-showPuterSignInOutButton max-sm:hidden">
-            <button id="judge0-sign-in-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold transition rounded-md text-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 bg-zinc-100 hover:bg-zinc-200 whitespace-nowrap">
+            <button id="judge0-sign-in-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm transition rounded-md text-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 bg-zinc-100 hover:bg-zinc-200 whitespace-nowrap">
                 <i class="fa-arrow-right-to-bracket fa-solid"></i>
                 Sign in with Puter
             </button>
-            <button id="judge0-sign-out-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold transition rounded-md text-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 bg-zinc-100 hover:bg-zinc-200 whitespace-nowrap">
+            <button id="judge0-sign-out-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm transition rounded-md text-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 bg-zinc-100 hover:bg-zinc-200 whitespace-nowrap">
                 <i class="fa-arrow-right-from-bracket fa-solid"></i>
                 <span id="judge0-puter-username"></span>
             </button>
         </div>
-        <button id="judge0-theme-btn" class="inline-flex items-center justify-center w-8 h-8 gap-2 text-sm font-semibold transition rounded-md text-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 bg-zinc-100 hover:bg-zinc-200 whitespace-nowrap judge0-showThemeButton"><i class="fa-solid fa-sun"></i></button>
+        <button id="judge0-theme-btn" class="inline-flex items-center justify-center w-8 h-8 gap-2 text-sm transition rounded-md text-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 bg-zinc-100 hover:bg-zinc-200 whitespace-nowrap judge0-showThemeButton"><i class="fa-solid fa-sun"></i></button>
     </header>
 
     <main class="flex-grow min-h-0 overflow-hidden"></main>

js/site.js

@@ -14,11 +14,11 @@ document.body.addEventListener("click", function (event) {
         const span = dropdown.querySelector("span");
         span.innerText = event.target.innerText;
         dropdown.querySelector(".judge0-dropdown-menu").classList.toggle("hidden");
-    } else {
-        document.querySelectorAll(".judge0-dropdown-menu").forEach(function (dropdownMenu) {
-            if (!dropdownMenu.contains(event.target)) {
-                dropdownMenu.classList.add("hidden");
-            }
-        });
     }
+
+    document.querySelectorAll(".judge0-dropdown-menu").forEach(function (dropdownMenu) {
+        if (!dropdownMenu.contains(event.target) && dropdown !== dropdownMenu.closest(".judge0-dropdown")) {
+            dropdownMenu.classList.add("hidden");
+        }
+    });
 });