Bug Fix & Ui and Feature Update

kashifalikhan36 · Dec 2, 2024 · 8e2f785 · 8e2f785
1 parent fa3e579
commit 8e2f785
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 86 deletions.
diff --git a/LeakCode.png b/LeakCode.png
diff --git a/LeakCode/codeviewer.html b/LeakCode/codeviewer.html
@@ -1,58 +1,160 @@
-<!-- codeViewer.html -->
 <!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>
-      /* Embedded CSS */
       body {
-        font-family: "Consolas", "Courier New", monospace;
-        background-color: #282c34;
-        color: #f8f8f2;
+        font-family: Arial, sans-serif;
+        background-color: #1e1e2f;
+        color: #f0f0f0;
         margin: 0;
         padding: 20px;
-        overflow: auto;
+        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: 10px;
+        border-radius: 8px;
         padding: 20px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-        overflow-x: auto;
         white-space: pre-wrap;
-        word-wrap: break-word;
+        overflow-x: auto;
+        font-family: "Courier New", Courier, monospace;
+        position: relative;
       }
 
-      .view-line {
-        display: block;
-        padding: 4px 0;
-        line-height: 1.6;
+      .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 id="code-container" class="code-container"></div>
+    <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>
-      // JavaScript to display code in the container
       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
+          )}`;
 
-        // Get the code from localStorage
-        const code =
-          localStorage.getItem("codeToDisplay") || "No code provided";
-
-        // Split the code into lines and create a div for each line
-        const lines = code.split("\n");
-        lines.forEach((line, index) => {
-          const lineDiv = document.createElement("div");
-          lineDiv.className = "view-line";
-          lineDiv.textContent = line;
-          codeContainer.appendChild(lineDiv);
-        });
+          // 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>

diff --git a/LeakCode/index.html b/LeakCode/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>LeakCode</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/LeakCode/public/content.js b/LeakCode/public/content.js
@@ -26,29 +26,39 @@ setTimeout(async () => {
       });
 
       const response = await session.prompt(element.textContent);
-      console.log(response);
+      console.log("1 ok");
 
-      function openCodeViewerPage(code) {
+      const session_2 = await ai.languageModel.create({
+        systemPrompt:
+          "Pretend to be a LeetCode master. I will provide you with a code , and your task is to give me shortest and easiest explanation in very short and simple way and in simple and short steps of it with new lines. Do not modify or rewrite the code. Just explain how the code works and what it does.",
+      });
+
+      const response_2 = await session_2.prompt(element.textContent);
+      console.log("2 ok");
+
+      const session_3 = await ai.languageModel.create({
+        systemPrompt:
+          "You have to Pretend like a Youtube Video Searecher. I will give you the code and You will write a query to serach on youtbe to get right video of it . Example:- user:- 'fun two_sum' and response :- 'two sum question leetcode' ",
+      });
+
+      const response_3 = await session_3.prompt(element.textContent);
+      console.log("3 ok");
+
+      function openCodeViewerPage(code, explain, query) {
         // Encode the code to be URL-safe
         const encodedCode = encodeURIComponent(code);
-
+        const encodedExplain = encodeURIComponent(explain);
+        const encodedVideolink = encodeURIComponent(query);
         // Open the codeViewer.html in a new tab with the code as a URL parameter
+
         window.open(
-          `https://kashifalikhan36.github.io/LeakCode?code=${encodedCode}`,
+          `https://kashifalikhan36.github.io/LeakCode?code=${encodedCode}&explanation=${encodedExplain}&queryvideo=${encodedVideolink}`,
           "_blank"
         );
       }
 
       // Call the function to open the new page with the code
-      openCodeViewerPage(response);
-
-      const session_2 = await ai.languageModel.create({
-        systemPrompt:
-          "Pretend to be a LeetCode master. I will provide you with a code snippet, and your task is to give me a detailed explanation of it. Do not modify or rewrite the code. Just explain how the code works and what it does. Make sure the explanation is clear and thorough.",
-      });
-
-      const response_2 = await session_2.prompt(element.textContent);
-      console.log(response_2);
+      openCodeViewerPage(response, response_2, response_3);
     } catch (error) {
       console.error("Error interacting with the language model:", error);
     }

diff --git a/LeakCode/public/logo.png b/LeakCode/public/logo.png
diff --git a/LeakCode/public/manifest.json b/LeakCode/public/manifest.json
@@ -1,21 +1,26 @@
 {
-    "manifest_version": 3,
-    "name": "My React Vite Extension",
-    "version": "1.0",
-    "description": "A Chrome extension built using React and Vite.",
-    "action": {
-      "default_popup": "index.html"
-    },
-    "permissions": ["activeTab", "scripting", "storage"],
-    "background": {
-      "service_worker": "background.js"
-    },
-    "content_scripts": [
-      {
-        "matches": ["<all_urls>"],
-        "js": ["content.js"],
-        "run_at": "document_end"
-      }
-    ]
+  "manifest_version": 3,
+  "name": "LeakCode",
+  "version": "1.0",
+  "description": "Solve questions with your logic. If you can't finish in 30 minutes, you'll get a hint to help you solve it with the same logic.",
+  "action": {
+    "default_popup": "index.html"
+  },
+  "permissions": ["activeTab", "scripting", "storage"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "host_permissions": ["https://leetcode.com/*"],
+  "content_scripts": [
+    {
+      "matches": ["https://leetcode.com/*"],
+      "js": ["content.js"],
+      "run_at": "document_end"
+    }
+  ],
+  "icons": {
+    "16": "logo.png",
+    "48": "logo.png",
+    "128": "logo.png"
   }
-  
+}
diff --git a/LeakCode/public/vite.svg b/LeakCode/public/vite.svg
diff --git a/LeakCode/src/components/Header.jsx b/LeakCode/src/components/Header.jsx
@@ -5,13 +5,15 @@ export function Header() {
   return (
     <div className="text-center">
       <div className="flex items-center justify-center gap-3 mb-4">
-        <Brain className="w-10 h-10 text-indigo-600" />
+      <img src="/logo.png" alt="Logo" className="w-10 h-10" />
         <h1 className="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
-          Best Way to Learn DSA
+        LeakCode Your Sidekick for DSA Stuff 
         </h1>
       </div>
       <p className="text-gray-600 max-w-2xl mx-auto">
-        Master DSA
+      <ul>
+      <li>Try first: Work on the question with your own approach.</li>
+    </ul>
       </p>
     </div>
   );

diff --git a/LeakCode/src/components/StartButton.jsx b/LeakCode/src/components/StartButton.jsx
@@ -1,28 +1,12 @@
 import { Code2 } from 'lucide-react';
 import React from "react";
 
-export function StartButton({code = `print("Hello, World!")`,explanation = `This line of code prints the text "Hello, World!" to the console.`}) {
+export function StartButton() {
   return (
     <div className="w-full flex flex-col items-center gap-4">
-      <h2 className="text-xl font-semibold text-gray-700">Your Logic our Help</h2>
-      <div className="bg-gray-900 rounded-lg p-6 w-full max-w-xl shadow-xl">
-      <div className="flex items-center gap-2 mb-3 text-gray-400 border-b border-gray-700 pb-2">
-        <Code2 size={20} />
-        <span className="font-mono">Solution</span>
-      </div>
-      <div className="p-4">
-      <div className="p-4">
-      <pre id="code-1" className="text-green-400 font-mono text-sm whitespace-pre-wrap overflow-x-auto">
-        {code}
-      </pre>
-      <p id="explain-1" className="text-sm text-gray-600 italic mt-4">
-        {explanation}
-      </p>
-    </div>
-    </div>
-    </div>
+      <h2 className="text-xl font-semibold text-gray-700">Solution Window Will Open Automatically After 30 Mins</h2>
       <p className="text-sm text-gray-600 italic">
-        It's a journey to code See this solution code when you get stuck and get to know what you are doing wrong
+        If you get stuck, You will get solution code in 30 Mins to see where you went wrong and learn from it.
       </p>
     </div>
   );

diff --git a/LeakCode/src/index.css b/LeakCode/src/index.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body, html {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}