Merge pull request steam-bell-92#1418 from jainiksha/feature/one-click-copy-installation-commands

feat: add one-click copy support for installation commands

Author: steam-bell-92

README.md

@@ -88,6 +88,12 @@ python-mini-project/
 
 #### 1. Clone the Repository
 
+<div align="right">
+
+<button class="copy-btn" data-copy="clone-command">📋 Copy</button>
+
+</div>
+
 ```bash
 git clone https://github.com/steam-bell-92/python-mini-project.git
 cd python-mini-project
@@ -97,6 +103,12 @@ cd python-mini-project
 
 For Linux/macOS:
 
+<div align="right">
+
+<button class="copy-btn" data-copy="linux-venv">📋 Copy</button>
+
+</div>
+
 ```bash
 python3 -m venv venv
 source venv/bin/activate
@@ -118,6 +130,12 @@ venv\Scripts\Activate.ps1
 
 #### 3. Install Dependencies
 
+<div align="right">
+
+<button class="copy-btn" data-copy="install-command">📋 Copy</button>
+
+</div>
+
 ```bash
 pip install --upgrade pip
 pip install -r requirements.txt
@@ -161,6 +179,12 @@ The web app requires Node.js and npm:
 
 #### Steps to Run Web App
 
+<div align="right">
+
+<button class="copy-btn" data-copy="web-command">📋 Copy</button>
+
+</div>
+
 ```bash
 cd web-app
 npm install
@@ -173,6 +197,12 @@ The app will open at `http://localhost:3000` (or your configured port).
 
 To verify that the projects work correctly, run the test suite:
 
+<div align="right">
+
+<button class="copy-btn" data-copy="pytest-command">📋 Copy</button>
+
+</div>
+
 ```bash
 pytest tests/ -v
 ```

web-app/css/styles.css

@@ -7188,4 +7188,8 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
         color:var(--text);
     }
 
+}
+
+/* ============================
+   Bookmarked Projects Section
 }

web-app/index.html

@@ -774,12 +774,13 @@ <h3>Stay Updated</h3>
       const projectsData = [
         // GAMES (20+)
         {
-          project: "number-sliding-puzzle",
-          title: "Number Sliding Puzzle",
-          category: "games",
-          desc: "Arrange tiles in order by sliding them into empty space",
-          tags: "game,puzzle,sliding,numbers",
-        },
+  project: "number-sliding-puzzle",
+  title: "Number Sliding Puzzle",
+  category: "games",
+  difficulty: "Intermediate",
+  desc: "Arrange tiles in order by sliding them into empty space",
+  tags: "game,puzzle,sliding,numbers",
+},
         {
           project: "2048-game",
           title: "2048 Game",
@@ -1197,16 +1198,31 @@ <h3>Stay Updated</h3>
         const starClass = isFavorite ? "fas fa-star" : "far fa-star";
 
         card.innerHTML = `
-            <img class="card-banner" src="assets/banners/${proj.project}.webp?v=2" alt="${proj.title}" loading="lazy">
-            <div class="card-actions">
-                <button class="btn-play" data-project="${proj.project}" aria-label="Play PyMini Logo">Try It</button>
-                <button class="btn-favorite" data-project="${proj.project}" aria-label="Add to favorites">
-                    <i class="${starClass}"></i>
-                </button>
-            </div>
-            <h3>${proj.title}</h3>
-            <p>${proj.desc}</p>
-        `;
+    <div class="difficulty-badge ${proj.difficulty.toLowerCase()}">
+        ${proj.difficulty}
+    </div>
+
+    <img class="card-banner"
+         src="assets/banners/${proj.project}.webp?v=2"
+         alt="${proj.title}"
+         loading="lazy">
+
+    <div class="card-actions">
+        <button class="btn-play"
+                data-project="${proj.project}">
+            Try It
+        </button>
+
+        <button class="btn-favorite"
+                data-project="${proj.project}">
+            <i class="${starClass}"></i>
+        </button>
+    </div>
+
+    <h3>${proj.title}</h3>
+
+    <p>${proj.desc}</p>
+`;
 
         projectsGrid.appendChild(card);
       });

web-app/js/main.js

@@ -1455,6 +1455,22 @@ document.addEventListener("DOMContentLoaded", function () {
        ═══════════════════════════════════════════════════════════════ */
   function wireProjectCard(card) {
     var name = card.getAttribute("data-project");
+    const difficulty =
+card.getAttribute("data-difficulty");
+
+if(difficulty){
+
+const badge=document.createElement("span");
+
+badge.className=
+"difficulty-badge "+
+difficulty.toLowerCase();
+
+badge.textContent=difficulty;
+
+card.appendChild(badge);
+
+}
 
     /* ── Favorite Button ──────────────────────────────────── */
     // Remove any existing favorite button first to avoid duplicates