From 2c40f11824388fcfd3413b5699af1d673d1edfb9 Mon Sep 17 00:00:00 2001
From: ruchika kengal <ruchikakengal@gmail.com>
Date: Fri, 17 Jan 2025 17:17:56 +0530
Subject: [PATCH] add the question into the page in their respective platform .

---
 index.html           |  11 +-
 leetcode1.html       | 423 +++++++++++++++++++++++++++++++++++++++++++
 pages/leetcode1.html | 423 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 851 insertions(+), 6 deletions(-)
 create mode 100644 leetcode1.html
 create mode 100644 pages/leetcode1.html
diff --git a/index.html b/index.html
index 5ee00f1d..cbedb48c 100644
--- a/index.html
+++ b/index.html
@@ -49,9 +49,8 @@
 #scrollBtn:hover {
     background-color: #000; /* Change color on hover */
     transform: scale(1.2); /* Slightly enlarge */
-  </style>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="styles.css" />
+}
+</style>
 </head>
 
 <div id="cursor"></div>
@@ -69,7 +68,7 @@
       </svg>
     </button>
     <ul class="nav-links">
-      <li><a href="#home" class="active">Home</a></li>
+      <li><a href="index.html" class="active">Home</a></li>
       <li><a href="platform.html">Platforms</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="contact.html">Contact</a></li>
@@ -88,7 +87,7 @@
       <h1 class="hero-title">Smart DSA Hub </h1>
       <p class="hero-subtitle">Your ultimate coding Notebook! Pick your favorite platform and sharpen your skills.</p>
       <div class="hero-buttons">
-        <a href="pages/leetcode.html"><button class="platform-btn">LeetCode</button></a>        
+        <a href="pages/Leetcode.html"><button class="platform-btn">LeetCode</button></a>        
         <a href="pages/hackerrank.html"><button class="platform-btn">HackerRank</button></a> 
         <a href="#"><button class="platform-btn">Codeforces</button></a> 
         <a href="pages/geeksforgeeks.html"><button class="platform-btn">GeeksforGeeks</button></a>
@@ -123,7 +122,7 @@ <h2>CodeChef</h2>
       <div class="platform-card">
         <img src="img/leetcode.png" alt="LeetCode Logo" />
         <h2>LeetCode</h2>
-        <a href="pages/leetcode.html">Leetcode</a>
+        <a href="pages/leetcode1.html">Leetcode</a>
       </div>
       
       <div class="platform-card">
diff --git a/leetcode1.html b/leetcode1.html
new file mode 100644
index 00000000..2056edfa
--- /dev/null
+++ b/leetcode1.html
@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LeetCode Problems - DSA Problem Solutions</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-github.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="leetcss" />
+
+    <style>
+        /* Reset CSS */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background-color: white;
+  color: #333;
+  line-height: 1.6;
+}
+
+header {
+  background-color: #3bd127;
+  color: white;
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+header .logo img {
+  height: 50px;
+}
+
+header h1 {
+  font-size: 1.8rem;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 20px;
+}
+
+.problems-list,
+.solution-display {
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  flex: 1;
+  min-width: 300px;
+}
+
+.problems-list h2,
+.solution-display h2 {
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  color: #1e293b;
+}
+
+.card {
+  background-color: #f9fafb;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid #e5e7eb;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  background-color: #f1f5f9;
+}
+
+.card-header h3 {
+  margin: 0 0 10px;
+  font-size: 1.2rem;
+  color: #1e293b;
+}
+
+.card-content p {
+  margin: 5px 0 10px;
+  font-size: 0.9rem;
+  color: #4b5563;
+}
+
+.button-container .button {
+  padding: 10px 15px;
+  background-color: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.button-container .button:hover {
+  background-color: #1d4ed8;
+  transform: scale(1.05);
+}
+
+.solution-display {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+#solution-content {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #1e293b;
+  white-space: pre-wrap;
+  background-color: #f3f4f6;
+  border-radius: 8px;
+  padding: 15px;
+  border: 1px solid #d1d5db;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+#solution-content:hover {
+  background-color: #e5e7eb;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+}
+
+#solution-content p {
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+}
+/* Add New Question Section */
+.add-question {
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  flex: 0.3; /* Make this smaller than other sections */
+  min-width: 200px; /* Ensure it doesn't shrink too much */
+  max-width: 200px;
+}
+
+.add-question h2 {
+  font-size: 1.4rem;
+  margin-bottom: 15px;
+  color: #1e293b;
+}
+
+.add-question label {
+  font-size: 0.9rem;
+  margin-bottom: 5px;
+  color: #4b5563;
+}
+
+.add-question input,
+.add-question select,
+.add-question textarea {
+  width: 90%;
+  padding: 3%;
+  margin-bottom: 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.add-question button {
+  background-color: #2563eb;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+.add-question button:hover {
+  background-color: #1d4ed8;
+  transform: scale(1.05);
+}
+
+</style>
+    
+
+  </head>
+  <body>
+    <div id="cursor"></div>
+    <header>
+      <a href="../index.html" class="logo">
+        <img src="../img/logo2.png" alt="Logo" />
+      </a>
+      <h1>LeetCode Problems</h1>
+    </header>
+
+    <div class="container">
+      <div class="problems-list">
+        <h2>Problems</h2>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Two Sum</h3>
+          </div>
+          <div class="card-content">
+            <p>Difficulty: Easy</p>
+            <div class="button-container">
+              <button
+                class="button button-primary"
+                onclick="handleViewSolution('Two Sum')"
+              >
+                <span class="icon">▶</span> View Solution
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Reverse Linked List</h3>
+          </div>
+          <div class="card-content">
+            <p>Difficulty: Medium</p>
+            <div class="button-container">
+              <button
+                class="button button-primary"
+                onclick="handleViewSolution('Reverse Linked List')"
+              >
+                <span class="icon">▶</span> View Solution
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Binary Tree Level Order Traversal</h3>
+          </div>
+          <div class="card-content">
+            <p>Difficulty: Medium</p>
+            <div class="button-container">
+              <button
+                class="button button-primary"
+                onclick="handleViewSolution('Binary Tree Level Order Traversal')"
+              >
+                <span class="icon">▶</span> View Solution
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="solution-display">
+        <h2>Solution</h2>
+        <div id="solution-content">
+          <p>Select a problem to view its solution.</p>
+        </div>
+      </div>
+
+      <!-- progress card -->
+      <div class="progress-card">
+        <h3>Check Your Progress</h3>
+        <label for="username">Enter your LeetCode username:</label>
+        <input
+          type="text"
+          id="username"
+          name="username"
+          placeholder="Username"
+          required
+        />
+        <button id="fetchButton" class="button button-primary">
+          Get Progress
+        </button>
+        <div id="stats">
+          <p>✨ Easy: <span id="easy">0</span></p>
+          <p>⚡ Medium: <span id="medium">0</span></p>
+          <p>🔥 Hard: <span id="hard">0</span></p>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Adding question -->
+    <div class="container">
+      <div class="problems-list">
+          <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 20px;">Problems</h2>
+          <!-- Problem Cards -->
+          <div id="problems-container"></div>
+
+          <!-- Form to Add New Question -->
+           <div class="ques-form">
+               <h3 style="margin-top: 20px;">Add a New Question</h3>
+               <form id="add-problem-form">
+                   <label for="title">Question Title:</label>
+                   <input type="text" id="title" name="title" required style="width: 100%; margin-bottom: 10px;">     
+                   <label for="difficulty">Difficulty Level:</label>
+                   <select id="difficulty" name="difficulty" required style="width: 100%; margin-bottom: 10px;">
+                       <option value="Easy">Easy</option>
+                       <option value="Medium">Medium</option>
+                       <option value="Hard">Hard</option>
+                   </select>
+                   <label for="solution">Solution (Code):</label>
+                   <textarea id="solution" name="solution" rows="5" required style="width: 100%; margin-bottom: 10px;"></textarea>
+   
+                   <button type="submit" style="padding: 10px 15px;">Add Question</button>
+               </form>
+           </div>
+      </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="leetcode.js"></script>
+
+    <script>
+      const problems = [
+          {
+              title: "Two Sum",
+              difficulty: "Easy",
+              solution: `
+<pre><code class="language-python">def two_sum(nums, target):
+  seen = {}
+  for i, num in enumerate(nums):
+      diff = target - num
+      if diff in seen:
+          return [seen[diff], i]
+      seen[num] = i
+</code></pre>`
+          },
+          {
+              title: "Reverse Linked List",
+              difficulty: "Medium",
+              solution: `
+<pre><code class="language-python">class ListNode:
+  def __init__(self, val=0, next=None):
+      self.val = val
+      self.next = next
+
+def reverse_linked_list(head):
+  prev = None
+  current = head
+  while current:
+      next_node = current.next
+      current.next = prev
+      prev = current
+      current = next_node
+  return prev
+</code></pre>`
+          }
+      ];
+
+      const problemsContainer = document.getElementById('problems-container');
+      const solutionContent = document.getElementById('solution-content');
+      const addProblemForm = document.getElementById('add-problem-form');
+
+      // Render all questions
+      function renderProblems() {
+          problemsContainer.innerHTML = ""; // Clear the container
+          problems.forEach((problem, index) => {
+              const card = document.createElement('div');
+              card.className = 'card';
+              card.style.marginBottom = "15px"; // Ensure spacing between cards
+              card.innerHTML = `
+                  <div class="card-header">
+                      <h3 class="card-title">${problem.title}</h3>
+                  </div>
+                  <div class="card-content">
+                      <p>Difficulty: ${problem.difficulty}</p>
+                      <div class="button-container">
+                          <button class="button button-primary" onclick="showSolution(${index})">
+                              <span class="icon">▶</span> View Solution
+                          </button>
+                      </div>
+                  </div>
+              `;
+              problemsContainer.appendChild(card);
+          });
+      }
+
+      // Show solution in the solution display
+      function showSolution(index) {
+          const selectedProblem = problems[index];
+          solutionContent.innerHTML = selectedProblem.solution;
+          Prism.highlightAll(); // Highlight syntax
+      }
+
+      // Add a new problem from the form
+      addProblemForm.addEventListener('submit', (e) => {
+          e.preventDefault();
+          const title = document.getElementById('title').value;
+          const difficulty = document.getElementById('difficulty').value;
+          const solution = `<pre><code class="language-python">${document.getElementById('solution').value}</code></pre>`;
+          problems.push({ title, difficulty, solution });
+          renderProblems(); // Re-render the problems list
+          addProblemForm.reset(); // Clear the form
+      });
+
+      // Initial rendering of problems
+      renderProblems();
+  </script>  
+  </body>
+</html>
diff --git a/pages/leetcode1.html b/pages/leetcode1.html
new file mode 100644
index 00000000..2056edfa
--- /dev/null
+++ b/pages/leetcode1.html
@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LeetCode Problems - DSA Problem Solutions</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-github.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="leetcss" />
+
+    <style>
+        /* Reset CSS */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background-color: white;
+  color: #333;
+  line-height: 1.6;
+}
+
+header {
+  background-color: #3bd127;
+  color: white;
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+header .logo img {
+  height: 50px;
+}
+
+header h1 {
+  font-size: 1.8rem;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 20px;
+}
+
+.problems-list,
+.solution-display {
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  flex: 1;
+  min-width: 300px;
+}
+
+.problems-list h2,
+.solution-display h2 {
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  color: #1e293b;
+}
+
+.card {
+  background-color: #f9fafb;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid #e5e7eb;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  background-color: #f1f5f9;
+}
+
+.card-header h3 {
+  margin: 0 0 10px;
+  font-size: 1.2rem;
+  color: #1e293b;
+}
+
+.card-content p {
+  margin: 5px 0 10px;
+  font-size: 0.9rem;
+  color: #4b5563;
+}
+
+.button-container .button {
+  padding: 10px 15px;
+  background-color: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.button-container .button:hover {
+  background-color: #1d4ed8;
+  transform: scale(1.05);
+}
+
+.solution-display {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+#solution-content {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #1e293b;
+  white-space: pre-wrap;
+  background-color: #f3f4f6;
+  border-radius: 8px;
+  padding: 15px;
+  border: 1px solid #d1d5db;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+#solution-content:hover {
+  background-color: #e5e7eb;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+}
+
+#solution-content p {
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+}
+/* Add New Question Section */
+.add-question {
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  flex: 0.3; /* Make this smaller than other sections */
+  min-width: 200px; /* Ensure it doesn't shrink too much */
+  max-width: 200px;
+}
+
+.add-question h2 {
+  font-size: 1.4rem;
+  margin-bottom: 15px;
+  color: #1e293b;
+}
+
+.add-question label {
+  font-size: 0.9rem;
+  margin-bottom: 5px;
+  color: #4b5563;
+}
+
+.add-question input,
+.add-question select,
+.add-question textarea {
+  width: 90%;
+  padding: 3%;
+  margin-bottom: 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.add-question button {
+  background-color: #2563eb;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+.add-question button:hover {
+  background-color: #1d4ed8;
+  transform: scale(1.05);
+}
+
+</style>
+    
+
+  </head>
+  <body>
+    <div id="cursor"></div>
+    <header>
+      <a href="../index.html" class="logo">
+        <img src="../img/logo2.png" alt="Logo" />
+      </a>
+      <h1>LeetCode Problems</h1>
+    </header>
+
+    <div class="container">
+      <div class="problems-list">
+        <h2>Problems</h2>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Two Sum</h3>
+          </div>
+          <div class="card-content">
+            <p>Difficulty: Easy</p>
+            <div class="button-container">
+              <button
+                class="button button-primary"
+                onclick="handleViewSolution('Two Sum')"
+              >
+                <span class="icon">▶</span> View Solution
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Reverse Linked List</h3>
+          </div>
+          <div class="card-content">
+            <p>Difficulty: Medium</p>
+            <div class="button-container">
+              <button
+                class="button button-primary"
+                onclick="handleViewSolution('Reverse Linked List')"
+              >
+                <span class="icon">▶</span> View Solution
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Binary Tree Level Order Traversal</h3>
+          </div>
+          <div class="card-content">
+            <p>Difficulty: Medium</p>
+            <div class="button-container">
+              <button
+                class="button button-primary"
+                onclick="handleViewSolution('Binary Tree Level Order Traversal')"
+              >
+                <span class="icon">▶</span> View Solution
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="solution-display">
+        <h2>Solution</h2>
+        <div id="solution-content">
+          <p>Select a problem to view its solution.</p>
+        </div>
+      </div>
+
+      <!-- progress card -->
+      <div class="progress-card">
+        <h3>Check Your Progress</h3>
+        <label for="username">Enter your LeetCode username:</label>
+        <input
+          type="text"
+          id="username"
+          name="username"
+          placeholder="Username"
+          required
+        />
+        <button id="fetchButton" class="button button-primary">
+          Get Progress
+        </button>
+        <div id="stats">
+          <p>✨ Easy: <span id="easy">0</span></p>
+          <p>⚡ Medium: <span id="medium">0</span></p>
+          <p>🔥 Hard: <span id="hard">0</span></p>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Adding question -->
+    <div class="container">
+      <div class="problems-list">
+          <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 20px;">Problems</h2>
+          <!-- Problem Cards -->
+          <div id="problems-container"></div>
+
+          <!-- Form to Add New Question -->
+           <div class="ques-form">
+               <h3 style="margin-top: 20px;">Add a New Question</h3>
+               <form id="add-problem-form">
+                   <label for="title">Question Title:</label>
+                   <input type="text" id="title" name="title" required style="width: 100%; margin-bottom: 10px;">     
+                   <label for="difficulty">Difficulty Level:</label>
+                   <select id="difficulty" name="difficulty" required style="width: 100%; margin-bottom: 10px;">
+                       <option value="Easy">Easy</option>
+                       <option value="Medium">Medium</option>
+                       <option value="Hard">Hard</option>
+                   </select>
+                   <label for="solution">Solution (Code):</label>
+                   <textarea id="solution" name="solution" rows="5" required style="width: 100%; margin-bottom: 10px;"></textarea>
+   
+                   <button type="submit" style="padding: 10px 15px;">Add Question</button>
+               </form>
+           </div>
+      </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="leetcode.js"></script>
+
+    <script>
+      const problems = [
+          {
+              title: "Two Sum",
+              difficulty: "Easy",
+              solution: `
+<pre><code class="language-python">def two_sum(nums, target):
+  seen = {}
+  for i, num in enumerate(nums):
+      diff = target - num
+      if diff in seen:
+          return [seen[diff], i]
+      seen[num] = i
+</code></pre>`
+          },
+          {
+              title: "Reverse Linked List",
+              difficulty: "Medium",
+              solution: `
+<pre><code class="language-python">class ListNode:
+  def __init__(self, val=0, next=None):
+      self.val = val
+      self.next = next
+
+def reverse_linked_list(head):
+  prev = None
+  current = head
+  while current:
+      next_node = current.next
+      current.next = prev
+      prev = current
+      current = next_node
+  return prev
+</code></pre>`
+          }
+      ];
+
+      const problemsContainer = document.getElementById('problems-container');
+      const solutionContent = document.getElementById('solution-content');
+      const addProblemForm = document.getElementById('add-problem-form');
+
+      // Render all questions
+      function renderProblems() {
+          problemsContainer.innerHTML = ""; // Clear the container
+          problems.forEach((problem, index) => {
+              const card = document.createElement('div');
+              card.className = 'card';
+              card.style.marginBottom = "15px"; // Ensure spacing between cards
+              card.innerHTML = `
+                  <div class="card-header">
+                      <h3 class="card-title">${problem.title}</h3>
+                  </div>
+                  <div class="card-content">
+                      <p>Difficulty: ${problem.difficulty}</p>
+                      <div class="button-container">
+                          <button class="button button-primary" onclick="showSolution(${index})">
+                              <span class="icon">▶</span> View Solution
+                          </button>
+                      </div>
+                  </div>
+              `;
+              problemsContainer.appendChild(card);
+          });
+      }
+
+      // Show solution in the solution display
+      function showSolution(index) {
+          const selectedProblem = problems[index];
+          solutionContent.innerHTML = selectedProblem.solution;
+          Prism.highlightAll(); // Highlight syntax
+      }
+
+      // Add a new problem from the form
+      addProblemForm.addEventListener('submit', (e) => {
+          e.preventDefault();
+          const title = document.getElementById('title').value;
+          const difficulty = document.getElementById('difficulty').value;
+          const solution = `<pre><code class="language-python">${document.getElementById('solution').value}</code></pre>`;
+          problems.push({ title, difficulty, solution });
+          renderProblems(); // Re-render the problems list
+          addProblemForm.reset(); // Clear the form
+      });
+
+      // Initial rendering of problems
+      renderProblems();
+  </script>  
+  </body>
+</html>
