From e2a05f6edbd4fe48a6f35039e01455be0072e8d8 Mon Sep 17 00:00:00 2001
From: Kashif Ali Khan <113260067+kashifalikhan36@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:48:03 +0530
Subject: [PATCH] Bug_fix and Ui Update

---
 LeakCode/codeviewer.html      | 161 ----------------------------------
 LeakCode/public/manifest.json |   4 +-
 index.html                    |  30 +++++--
 3 files changed, 27 insertions(+), 168 deletions(-)
 delete mode 100644 LeakCode/codeviewer.html
diff --git a/LeakCode/codeviewer.html b/LeakCode/codeviewer.html
deleted file mode 100644
index 6d96afe..0000000
--- a/LeakCode/codeviewer.html
+++ /dev/null
@@ -1,161 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Code Viewer</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        background-color: #1e1e2f;
-        color: #f0f0f0;
-        margin: 0;
-        padding: 20px;
-        line-height: 1.6;
-      }
-
-      .container {
-        max-width: 800px;
-        margin: 0 auto;
-      }
-
-      .section {
-        background-color: #282c34;
-        border-radius: 8px;
-        padding: 20px;
-        margin-bottom: 20px;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-      }
-
-      .section h2 {
-        margin-top: 0;
-        color: #61dafb;
-      }
-
-      .code-container {
-        background-color: #1e1e1e;
-        border-radius: 8px;
-        padding: 20px;
-        white-space: pre-wrap;
-        overflow-x: auto;
-        font-family: "Courier New", Courier, monospace;
-        position: relative;
-      }
-
-      .copy-button {
-        background-color: #61dafb;
-        border: none;
-        color: #282c34;
-        padding: 8px 12px;
-        font-size: 14px;
-        border-radius: 4px;
-        cursor: pointer;
-        position: absolute;
-        top: 10px;
-        right: 10px;
-      }
-
-      .copy-button:hover {
-        background-color: #4bb0e6;
-      }
-
-      .video-container iframe {
-        width: 100%;
-        height: 315px;
-        border: none;
-        border-radius: 8px;
-        margin-top: 10px;
-      }
-
-      .no-content {
-        font-style: italic;
-        color: #ccc;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <!-- Code Section -->
-      <div class="section">
-        <h2>Code</h2>
-        <div class="code-container">
-          <button class="copy-button" id="copy-code-button">Copy Code</button>
-          <div id="code-container"></div>
-        </div>
-      </div>
-
-      <!-- Explanation Section -->
-      <div class="section">
-        <h2>Explanation</h2>
-        <div
-          id="explanation-container"
-          class="explanation-container no-content"
-        >
-          No explanation provided.
-        </div>
-      </div>
-
-      <!-- Recommended Video Section -->
-      <div class="section">
-        <h2>Recommended Video</h2>
-        <div id="video-container" class="video-container no-content">
-          No video provided.
-        </div>
-      </div>
-    </div>
-
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        const codeContainer = document.getElementById("code-container");
-        const explanationContainer = document.getElementById(
-          "explanation-container"
-        );
-        const videoContainer = document.getElementById("video-container");
-        const copyButton = document.getElementById("copy-code-button");
-
-        // Get the parameters from the URL
-        const params = new URLSearchParams(window.location.search);
-
-        // Code
-        const code = params.get("code");
-        if (code) {
-          const decodedCode = decodeURIComponent(code);
-          codeContainer.textContent = decodedCode;
-
-          // Add event listener to the Copy Code button
-          copyButton.addEventListener("click", () => {
-            navigator.clipboard
-              .writeText(decodedCode)
-              .then(() => alert("Code copied to clipboard!"))
-              .catch((err) => alert("Failed to copy code: " + err));
-          });
-        } else {
-          codeContainer.textContent = "No code provided.";
-          copyButton.style.display = "none"; // Hide the Copy Code button if no code
-        }
-
-        // Explanation
-        const explanation = params.get("explanation");
-        if (explanation) {
-          explanationContainer.textContent = decodeURIComponent(explanation);
-          explanationContainer.classList.remove("no-content");
-        }
-
-        // Video query
-        const query = params.get("queryvideo");
-        if (query) {
-          // Embed a video by building a YouTube URL
-          const videoUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(
-            query
-          )}`;
-
-          // Display a message or a placeholder video link
-          videoContainer.innerHTML = `
-            <p>Click <a href="${videoUrl}" target="_blank">Watch Explanation video</a> to view videos for "${query}".</p>
-          `;
-          videoContainer.classList.remove("no-content");
-        }
-      });
-    </script>
-  </body>
-</html>
diff --git a/LeakCode/public/manifest.json b/LeakCode/public/manifest.json
index 13779c0..74c6c7f 100644
--- a/LeakCode/public/manifest.json
+++ b/LeakCode/public/manifest.json
@@ -10,10 +10,10 @@
   "background": {
     "service_worker": "background.js"
   },
-  "host_permissions": ["https://leetcode.com/*"],
+  "host_permissions": ["https://leetcode.com/problems/*"],
   "content_scripts": [
     {
-      "matches": ["https://leetcode.com/*"],
+      "matches": ["https://leetcode.com/problems/*"],
       "js": ["content.js"],
       "run_at": "document_end"
     }
diff --git a/index.html b/index.html
index c6e3c90..2ef5e86 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
         padding: 0;
         display: flex;
         justify-content: center;
-        align-items: center;
+        align-items: flex-start;
         min-height: 100vh;
         padding: 20px;
       }
@@ -40,6 +40,8 @@
         margin-top: 0;
         color: #a29bfe;
         font-size: 1.5rem;
+        border-bottom: 2px solid #8e44ad;
+        padding-bottom: 5px;
       }
 
       .code-container {
@@ -50,6 +52,7 @@
         font-family: "Courier New", Courier, monospace;
         position: relative;
         max-height: 400px;
+        margin-bottom: 10px;
       }
 
       .copy-button {
@@ -70,6 +73,23 @@
         background-color: #6c3483;
       }
 
+      .explanation-container {
+        background-color: #2c2c2c;
+        border-radius: 8px;
+        padding: 15px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        min-height: 100px;
+      }
+
+      .video-container {
+        background-color: #2c2c2c;
+        border-radius: 8px;
+        padding: 15px;
+        text-align: center;
+        word-wrap: break-word;
+      }
+
       .video-container iframe {
         width: 100%;
         height: 315px;
@@ -97,6 +117,10 @@
         .code-container {
           padding: 10px;
         }
+
+        .video-container iframe {
+          height: 250px;
+        }
       }
 
       @media screen and (max-width: 480px) {
@@ -183,15 +207,11 @@ <h2>Recommended Video</h2>
         }
 
         // YouTube Video
-        // Video query
         const query = params.get("queryvideo");
         if (query) {
-          // Embed a video by building a YouTube URL
           const videoUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(
             query
           )}`;
-
-          // Display a message or a placeholder video link
           videoContainer.innerHTML = `
             <p>Click <a href="${videoUrl}" target="_blank">Watch Explanation video</a> to view videos for "${query}".</p>
           `;
