diff --git a/.vscode/c_cpp_properties.json b/.vscode/c_cpp_properties.json
new file mode 100644
index 00000000..f9128470
--- /dev/null
+++ b/.vscode/c_cpp_properties.json
@@ -0,0 +1,18 @@
+{
+  "configurations": [
+    {
+      "name": "windows-gcc-x86",
+      "includePath": [
+        "${workspaceFolder}/**"
+      ],
+      "compilerPath": "C:/MinGW/bin/gcc.exe",
+      "cStandard": "${default}",
+      "cppStandard": "${default}",
+      "intelliSenseMode": "windows-gcc-x86",
+      "compilerArgs": [
+        ""
+      ]
+    }
+  ],
+  "version": 4
+}
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 2ba986f6..8f86bd81 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,15 +1,31 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "C/C++ Runner: Debug Session",
+      "type": "cppdbg",
+      "request": "launch",
+      "args": [],
+      "stopAtEntry": false,
+      "externalConsole": true,
+      "cwd": "c:/Users/ACER/Documents/VSOC/50_days_50_web_project/public/Scroll Game Dark Run/Rock,Paper,Scissor",
+      "program": "c:/Users/ACER/Documents/VSOC/50_days_50_web_project/public/Scroll Game Dark Run/Rock,Paper,Scissor/build/Debug/outDebug",
+      "MIMode": "gdb",
+      "miDebuggerPath": "gdb",
+      "setupCommands": [
         {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
+          "description": "Enable pretty-printing for gdb",
+          "text": "-enable-pretty-printing",
+          "ignoreFailures": true
         }
-    ]
+      ]
+    }
+  ]
 }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f673a71b..c86e0d58 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,60 @@
 {
-    "liveServer.settings.port": 5502
+  "liveServer.settings.port": 5502,
+  "C_Cpp_Runner.cCompilerPath": "gcc",
+  "C_Cpp_Runner.cppCompilerPath": "g++",
+  "C_Cpp_Runner.debuggerPath": "gdb",
+  "C_Cpp_Runner.cStandard": "",
+  "C_Cpp_Runner.cppStandard": "",
+  "C_Cpp_Runner.msvcBatchPath": "C:/Program Files/Microsoft Visual Studio/VR_NR/Community/VC/Auxiliary/Build/vcvarsall.bat",
+  "C_Cpp_Runner.useMsvc": false,
+  "C_Cpp_Runner.warnings": [
+    "-Wall",
+    "-Wextra",
+    "-Wpedantic",
+    "-Wshadow",
+    "-Wformat=2",
+    "-Wcast-align",
+    "-Wconversion",
+    "-Wsign-conversion",
+    "-Wnull-dereference"
+  ],
+  "C_Cpp_Runner.msvcWarnings": [
+    "/W4",
+    "/permissive-",
+    "/w14242",
+    "/w14287",
+    "/w14296",
+    "/w14311",
+    "/w14826",
+    "/w44062",
+    "/w44242",
+    "/w14905",
+    "/w14906",
+    "/w14263",
+    "/w44265",
+    "/w14928"
+  ],
+  "C_Cpp_Runner.enableWarnings": true,
+  "C_Cpp_Runner.warningsAsError": false,
+  "C_Cpp_Runner.compilerArgs": [],
+  "C_Cpp_Runner.linkerArgs": [],
+  "C_Cpp_Runner.includePaths": [],
+  "C_Cpp_Runner.includeSearch": [
+    "*",
+    "**/*"
+  ],
+  "C_Cpp_Runner.excludeSearch": [
+    "**/build",
+    "**/build/**",
+    "**/.*",
+    "**/.*/**",
+    "**/.vscode",
+    "**/.vscode/**"
+  ],
+  "C_Cpp_Runner.useAddressSanitizer": false,
+  "C_Cpp_Runner.useUndefinedSanitizer": false,
+  "C_Cpp_Runner.useLeakSanitizer": false,
+  "C_Cpp_Runner.showCompilationTime": false,
+  "C_Cpp_Runner.useLinkTimeOptimization": false,
+  "C_Cpp_Runner.msvcSecureNoWarnings": false
 }
\ No newline at end of file
diff --git a/public/BMI_Calculator/index.html b/public/BMI_Calculator/index.html
index 936c2ba0..8b615231 100644
--- a/public/BMI_Calculator/index.html
+++ b/public/BMI_Calculator/index.html
@@ -8,16 +8,31 @@
     <meta name="author" content="Supritha">
     <link rel="stylesheet" href="style.css">
      <!-- =====BOX ICONS===== -->
-    <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
+     <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   </head>
   <body>
     <div class="bmi">
       <h2>Body Mass Index Calculator</h2>
-      <p class="text">Height in cm</p><input type="text" id="height">
-      <p class="text">Weight in kg</p><input type="text" id="weight">
-      <p id="result"></p><button id="btn">Calculate</button>
+      <p class="text">Height</p>
+        <select id="height-unit">
+            <option value="cm">cm</option>
+            <option value="feet">feet/inches</option>
+        </select>
+        <input type="text" id="height">
+        <p class="text">Weight</p>
+        <select id="weight-unit">
+            <option value="kg">kg</option>
+            <option value="lb">pounds</option>
+        </select>
+        <input type="text" id="weight">
+        <p id="result"></p><button id="btn">Calculate</button>
+        <div id="result"></div>
+        <div id="category"></div>
+        <div id="tips"></div>
     </div>
     <div class="chart">
+
       <table>
         <thead>
           <tr>
@@ -44,6 +59,7 @@ <h2>Body Mass Index Calculator</h2>
           </tr>
         </tbody>
       </table>
+      <canvas id="bmiChart"></canvas>
     </div>
     <script src="script.js"></script>
     <footer class="footer">
diff --git a/public/BMI_Calculator/script.js b/public/BMI_Calculator/script.js
index a60348c4..3c356b32 100644
--- a/public/BMI_Calculator/script.js
+++ b/public/BMI_Calculator/script.js
@@ -1,8 +1,93 @@
 document.getElementById("btn").addEventListener("click", function() {
-	var height_val = document.getElementById('height').value;
-	var weight_val = document.getElementById('weight').value;
-	var bmi = weight_val / (height_val / 100 * height_val / 100);
-	var bmio = (bmi.toFixed(2));
+    var height = document.getElementById('height').value;
+    var weight = document.getElementById('weight').value;
+    var heightUnit = document.getElementById('height-unit').value;
+    var weightUnit = document.getElementById('weight-unit').value;
 
-	document.getElementById("result").innerHTML = "Your BMI is " + bmio;
-});
\ No newline at end of file
+    // Convert units to metric
+    if (heightUnit === 'feet') {
+        var parts = height.split('/');
+        if (parts.length === 2) {
+            var feet = parseInt(parts[0], 10);
+            var inches = parseInt(parts[1], 10);
+            height = (feet * 30.48) + (inches * 2.54);
+        } else {
+            alert("Please enter height in the format 'feet/inches', e.g., '5/8' for 5 feet 8 inches.");
+            return;
+        }
+    }
+    if (weightUnit === 'lb') {
+        weight = weight * 0.453592;
+    }
+
+    var bmi = weight / ((height / 100) * (height / 100));
+    var bmio = bmi.toFixed(2);
+
+    document.getElementById("result").innerHTML = "Your BMI is " + bmio;
+
+    var category = getBMICategory(bmio);
+    document.getElementById("category").innerHTML = "BMI Category: " + category;
+
+    var tips = getHealthTips(category);
+    document.getElementById("tips").innerHTML = "Health Tips: " + tips;
+
+    // Add BMI data to chart
+    addBMIdata(bmio);
+});
+
+function getBMICategory(bmi) {
+    if (bmi < 18.5) {
+        return "Underweight";
+    } else if (bmi >= 18.5 && bmi < 24.9) {
+        return "Normal weight";
+    } else if (bmi >= 25 && bmi < 29.9) {
+        return "Overweight";
+    } else {
+        return "Obesity";
+    }
+}
+
+function getHealthTips(category) {
+    switch (category) {
+        case "Underweight":
+            return "Consider eating more frequently, choose nutrient-rich foods, and try smoothies and shakes.";
+        case "Normal weight":
+            return "Maintain your current lifestyle and diet.";
+        case "Overweight":
+            return "Focus on a balanced diet and regular physical activity.";
+        case "Obesity":
+            return "Consult with a healthcare provider for personalized advice.";
+        default:
+            return "";
+    }
+}
+
+// Initialize chart
+var ctx = document.getElementById('bmiChart').getContext('2d');
+var bmiChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+        labels: [],
+        datasets: [{
+            label: 'BMI Over Time',
+            data: [],
+            borderColor: 'rgba(75, 192, 192, 1)',
+            borderWidth: 1,
+            fill: false
+        }]
+    },
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
+    }
+});
+
+function addBMIdata(bmi) {
+    var date = new Date().toLocaleDateString();
+    bmiChart.data.labels.push(date);
+    bmiChart.data.datasets[0].data.push(bmi);
+    bmiChart.update();
+}
diff --git a/public/BMI_Calculator/style.css b/public/BMI_Calculator/style.css
index 2fb01aa2..8100d497 100644
--- a/public/BMI_Calculator/style.css
+++ b/public/BMI_Calculator/style.css
@@ -1,4 +1,3 @@
-/*===== GOOGLE FONTS =====*/
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
 
 body {
@@ -31,8 +30,8 @@ h2 {
 .text {
   text-align: center;
 }
-#weight,
-#height {
+#weight-unit,
+#height-unit {
   color: #222f3e;
   text-align: left;
   font-size: 20px;
@@ -42,6 +41,8 @@ h2 {
   border-radius: 7px;
   width: 200px;
   height: 35px;
+  height: 35px;
+  margin-top: 10px;
 }
 #weight:focus,
 #height:focus {
@@ -73,6 +74,8 @@ table {
   width: 650px;
   border-collapse: collapse;
   margin: 600px auto;
+  margin-top: 700px;
+  margin-bottom: 80px;
 }
 
 tr {
@@ -91,4 +94,17 @@ th {
   border: 1px solid #000;
   text-align: center;
   font-size: 18px;
+}
+
+#bmichart {
+  display: block;
+    box-sizing: border-box;
+    height: 759px;
+    width: 1519px;
+    margin-bottom: 80px;
+}
+
+#height, #weight {
+  height: 35px;
+  margin-top: 10px;
 }
\ No newline at end of file
diff --git a/public/Stone-Paper-Scissor/images/Ellipse 4.png b/public/Stone-Paper-Scissor/images/Ellipse 4.png
new file mode 100644
index 00000000..285f9737
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Ellipse 4.png differ
diff --git a/public/Stone-Paper-Scissor/images/Group 1.png b/public/Stone-Paper-Scissor/images/Group 1.png
new file mode 100644
index 00000000..dae58bf9
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Group 1.png differ
diff --git a/public/Stone-Paper-Scissor/images/Group 2.png b/public/Stone-Paper-Scissor/images/Group 2.png
new file mode 100644
index 00000000..c23a8faf
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Group 2.png differ
diff --git a/public/Stone-Paper-Scissor/images/Group 3.png b/public/Stone-Paper-Scissor/images/Group 3.png
new file mode 100644
index 00000000..9d35a2c8
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Group 3.png differ
diff --git a/public/Stone-Paper-Scissor/images/Group 4.png b/public/Stone-Paper-Scissor/images/Group 4.png
new file mode 100644
index 00000000..336a058f
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Group 4.png differ
diff --git a/public/Stone-Paper-Scissor/images/Line 1.png b/public/Stone-Paper-Scissor/images/Line 1.png
new file mode 100644
index 00000000..673b3b31
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Line 1.png differ
diff --git a/public/Stone-Paper-Scissor/images/Line 2.png b/public/Stone-Paper-Scissor/images/Line 2.png
new file mode 100644
index 00000000..a396b6e6
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Line 2.png differ
diff --git a/public/Stone-Paper-Scissor/images/Line 3.png b/public/Stone-Paper-Scissor/images/Line 3.png
new file mode 100644
index 00000000..60e24d1a
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Line 3.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 1.png b/public/Stone-Paper-Scissor/images/Star 1.png
new file mode 100644
index 00000000..5cb51740
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 1.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 2.png b/public/Stone-Paper-Scissor/images/Star 2.png
new file mode 100644
index 00000000..b2fee9fa
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 2.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 3.png b/public/Stone-Paper-Scissor/images/Star 3.png
new file mode 100644
index 00000000..896037e3
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 3.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 4.png b/public/Stone-Paper-Scissor/images/Star 4.png
new file mode 100644
index 00000000..896037e3
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 4.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 5.png b/public/Stone-Paper-Scissor/images/Star 5.png
new file mode 100644
index 00000000..896037e3
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 5.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 6.png b/public/Stone-Paper-Scissor/images/Star 6.png
new file mode 100644
index 00000000..a3335119
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 6.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 7.png b/public/Stone-Paper-Scissor/images/Star 7.png
new file mode 100644
index 00000000..896037e3
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 7.png differ
diff --git a/public/Stone-Paper-Scissor/images/Star 9.png b/public/Stone-Paper-Scissor/images/Star 9.png
new file mode 100644
index 00000000..d157a3e9
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Star 9.png differ
diff --git a/public/Stone-Paper-Scissor/images/Vector.png b/public/Stone-Paper-Scissor/images/Vector.png
new file mode 100644
index 00000000..6dbe832f
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/Vector.png differ
diff --git a/public/Stone-Paper-Scissor/images/paper.png b/public/Stone-Paper-Scissor/images/paper.png
new file mode 100644
index 00000000..6fda0610
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/paper.png differ
diff --git a/public/Stone-Paper-Scissor/images/scissors.png b/public/Stone-Paper-Scissor/images/scissors.png
new file mode 100644
index 00000000..a038158e
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/scissors.png differ
diff --git a/public/Stone-Paper-Scissor/images/stone.png b/public/Stone-Paper-Scissor/images/stone.png
new file mode 100644
index 00000000..0328c871
Binary files /dev/null and b/public/Stone-Paper-Scissor/images/stone.png differ
diff --git a/public/Stone-Paper-Scissor/index.html b/public/Stone-Paper-Scissor/index.html
new file mode 100644
index 00000000..d7cee0ee
--- /dev/null
+++ b/public/Stone-Paper-Scissor/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stone-Paper-Scissors Game</title>
+  </head>
+  <link rel="stylesheet" href="./style.css" class="rel" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Dangrek&family=Roboto:wght@400;500;600;700&display=swap"
+    rel="stylesheet"
+  />
+
+  <body>
+    <div class="container">
+      <div class="display">
+        <div class="heading">
+          ROCK<br />
+          PAPER<br />
+          SCISSOR
+        </div>
+        <div class="scoreboard">
+          <div class="score">
+            Computer score
+            <div id="comscore"></div>
+          </div>
+          <div class="score">
+            Your<br />
+            score
+            <div id="youscore"></div>
+          </div>
+        </div>
+      </div>
+      <div class="export">
+        <div class="stone1">
+          <img src="./images/Group 2.png" />
+          <img class="logo1" src="./images/stone.png" />
+        </div>
+        <div class="paper1">
+          <img src="./images/Group 1.png" />
+          <img class="logo2" src="./images/paper.png" />
+        </div>
+        <div class="scissor1">
+          <img src="./images/Group 3.png" />
+          <img class="logo3" src="./images/scissors.png" />
+        </div>
+      </div>
+
+      <div class="game">
+        <div class="stone">
+          <img class="back" src="./images/Group 2.png" />
+          <img onclick="game('rock')" class="logo1" src="./images/stone.png" />
+        </div>
+        <div class="line"><img class="line1" src="./images/Line 1.png" /></div>
+        <div class="paper">
+          <img class="back" src="./images/Group 1.png" />
+          <img onclick="game('paper')" class="logo2" src="./images/paper.png" />
+        </div>
+        <div class="line"><img class="line3" src="./images/Line 3.png" /></div>
+        <div class="line"><img class="line2" src="./images/Line 2.png" /></div>
+        <div class="scissor">
+          <img class="back" src="./images/Group 3.png" />
+          <img
+            onclick="game('scissor')"
+            class="logo3"
+            src="./images/scissors.png"
+          />
+        </div>
+      </div>
+
+      <div class="you-win">
+        <div class="you-picked">
+          <div class="ipt-U ipt-U1">You picked</div>
+          <div class="bg"><img src="./images/Ellipse 4.png" /></div>
+          <div class="opt-U opt-U1">
+            <div id="opt-U1"></div>
+            <!-- <div class="backopt" class="stone">
+                <img src="./images1/Group 2.png" />
+                <img onclick="game('rock')" class="logo1" src="./images1/icons8-fist-67 1.png" />
+              </div> -->
+          </div>
+        </div>
+        <div class="result result1">
+          <h2>YOU WIN</h2>
+          <h3>AGAINST PC</h3>
+          <button onclick="replay()">Play Again</button>
+        </div>
+
+        <div class="btn">
+          <a href="index1.html"><button id="nxt" class="next">Next</button></a>
+        </div>
+
+        <div class="pc-picked">
+          <div class="ipt-P ipt-P1">PC picked</div>
+          <div id="opt-P" class="opt-P opt-P1">
+            <div id="opt-P1"></div>
+          </div>
+        </div>
+      </div>
+      <div class="you-lost">
+        <div class="you-picked">
+          <div class="ipt-U ipt-U2">YOU PICKED</div>
+
+          <div class="opt-U opt-U2">
+            <div id="opt-U2"></div>
+          </div>
+        </div>
+        <div class="result result2">
+          <h2>YOU LOST</h2>
+          <h3>AGAINST PC</h3>
+          <button onclick="replay()">Play Again</button>
+        </div>
+        <div class="pc-picked">
+          <div class="ipt-P ipt-P2">PC PICKED</div>
+          <div class="bg"><img src="./images/Ellipse 4.png" /></div>
+          <div class="opt-P opt-P2">
+            <div id="opt-P2"></div>
+          </div>
+        </div>
+      </div>
+      <div class="tie-up">
+        <div class="you-picked">
+          <div class="ipt-U ipt-U3">YOU PICKED</div>
+          <div class="opt-U opt-U3">
+            <div id="opt-U3"></div>
+          </div>
+        </div>
+        <div class="result result3">
+          <h2>TIE-UP</h2>
+          <button onclick="replay()">REPLAY</button>
+        </div>
+        <div class="pc-picked">
+          <div class="ipt-P ipt-P3">PC PICKED</div>
+          <div class="opt-P opt-P3">
+            <div id="opt-P3"></div>
+          </div>
+        </div>
+      </div>
+      <div class="btn1">
+        <button onclick="popup()" id="rul" class="rules">Rules</button>
+      </div>
+      <div class="box">
+        <button onclick="popdown()" class="close">
+          <img onclick="popdown()" />
+          <span class="symbol">X</span>
+        </button>
+        <h3 class="headline">Game Rules</h3>
+        <ul class="listrule">
+          <li class="listrule">
+            Rock beats scissors,scissors beat paper,and paper beats rock.
+          </li>
+          <li class="listrule">
+            Agree ahead of time whether you'll count off
+            “rock,paper,scissors,shoot” or just “rock,paper,scissors.”
+          </li>
+          <li class="listrule">
+            Use rock,paper,scissors to settle minor decisions or simply play to
+            pass the time
+          </li>
+          <li class="listrule">
+            If both players lay down the same hand,each player lays down another
+            hand
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/public/Stone-Paper-Scissor/index1.html b/public/Stone-Paper-Scissor/index1.html
new file mode 100644
index 00000000..e3df71c5
--- /dev/null
+++ b/public/Stone-Paper-Scissor/index1.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Stone-Paper-Scissor-Game</title>
+    <link rel="stylesheet" href="style1.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="image-cup">
+      <img src="./images/Vector.png" />
+
+      <div class="star5">
+        <img src="./images/Star 5.png" />
+      </div>
+      <div class="star1">
+        <img src="./images/Star 1.png" />
+      </div>
+      <div class="star9">
+        <img src="./images/Star 9.png" />
+      </div>
+      <div class="star3">
+        <img src="./images/Star 3.png" />
+      </div>
+      <div class="star4">
+        <img src="./images/Star 4.png" />
+      </div>
+      <div class="star2">
+        <img src="./images/Star 2.png" />
+      </div>
+      <div class="star7">
+        <img src="./images/Star 7.png" />
+      </div>
+      <div class="star6">
+        <img src="./images/Star 6.png" />
+      </div>
+
+      <div class="text1">
+        <p>HURRAY!!</p>
+        <div class="text2"><p>YOU WON THE GAME</p></div>
+
+        <div class="button1">
+          <a href="index.html"
+            ><button class="play-again">PLAY AGAIN</button></a
+          >
+       </div>
+       </div>
+
+
+       <div class="btn1">
+        <button onclick="popup()" id="rul" class="rules">Rules</button>
+      </div>
+
+      <div class="box">
+        <button onclick="popdown()" class="close">
+          <img onclick="popdown()" />
+          <span class="symbol">X</span>
+        </button>
+        <h3 class="headline">Game Rules</h3>
+        <ul class="listrule">
+          <li class="listrule">
+            Rock beats scissors,scissors beat paper,and paper beats rock.
+          </li>
+          <li class="listrule">
+            Agree ahead of time whether you'll count off
+            “rock,paper,scissors,shoot” or just “rock,paper,scissors.”
+          </li>
+          <li class="listrule">
+            Use rock,paper,scissors to settle minor decisions or simply play to
+            pass the time
+          </li>
+          <li class="listrule">
+            If both players lay down the same hand,each player lays down another
+            hand
+          </li>
+        </ul>
+
+      </div>
+      
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/public/Stone-Paper-Scissor/script.js b/public/Stone-Paper-Scissor/script.js
new file mode 100644
index 00000000..d1a69557
--- /dev/null
+++ b/public/Stone-Paper-Scissor/script.js
@@ -0,0 +1,161 @@
+const getRuleBox = document.querySelector(".box");
+const getGameBox = document.querySelector(".game");
+const getWinBox = document.querySelector(".you-win");
+const getLoseBox = document.querySelector(".you-lost");
+const getDrawBox = document.querySelector(".tie-up");
+const getRock = document.querySelector(".stone1");
+const getPaper = document.querySelector(".paper1");
+const getScissor = document.querySelector(".scissor1");
+const opt_U1 = document.getElementById("opt-U1");
+const opt_P1 = document.getElementById("opt-P1");
+const opt_U2 = document.getElementById("opt-U2");
+const opt_P2 = document.getElementById("opt-P2");
+const opt_U3 = document.getElementById("opt-U3");
+const opt_P3 = document.getElementById("opt-P3");
+const com_score = document.getElementById("comscore");
+const your_score = document.getElementById("youscore");
+
+if (
+  localStorage.getItem("clickcount") === null &&
+  localStorage.getItem("clickcount2") === null
+) {
+  localStorage.setItem("clickcount", 0);
+  localStorage.setItem("clickcount2", 0);
+}
+
+function displayscore() {
+  if (
+    localStorage.clickcount === "undefined" &&
+    localStorage.clickcount2 === "undefined"
+  ) {
+    your_score.innerHTML = 0;
+    com_score.innerHTML = 0;
+  }
+  your_score.innerHTML = localStorage.clickcount;
+  com_score.innerHTML = localStorage.clickcount2;
+}
+displayscore();
+function popup() {
+  getRuleBox.style.display = "block";
+}
+function popdown() {
+  getRuleBox.style.display = "none";
+}
+
+function replay() {
+  getWinBox.style.display = "none";
+  getLoseBox.style.display = "none";
+  getDrawBox.style.display = "none";
+  getGameBox.style.display = "block";
+}
+function getComputerChoice() {
+  const choices = ["rock", "paper", "scissor"];
+  const randomNumber = Math.floor(Math.random() * 3);
+
+  return choices[randomNumber];
+}
+
+function loses(userOutput, pcOutput) {
+  getLoseBox.style.display = "flex";
+  getGameBox.style.display = "none";
+  console.log(getLoseBox);
+  if (typeof Storage !== 0) {
+    if (localStorage.clickcount2) {
+      localStorage.clickcount2 = Number(localStorage.clickcount2) + 1;
+    } else {
+      localStorage.clickcount2 = 1;
+    }
+    com_score.innerHTML = localStorage.clickcount2;
+  } else {
+    com_score.innerHTML = 0;
+  }
+  const cloneU = userOutput.cloneNode(true);
+  while (opt_U2.firstChild) opt_U2.firstChild.remove();
+  opt_U2.appendChild(cloneU);
+  const cloneP = pcOutput.cloneNode(true);
+  while (opt_P2.firstChild) opt_P2.firstChild.remove();
+  opt_P2.appendChild(cloneP);
+}
+
+function win(userOutput, pcOutput) {
+  getWinBox.style.display = "flex";
+  getGameBox.style.display = "none";
+  console.log(getWinBox);
+
+  if (typeof Storage !== "undefined") {
+    if (localStorage.clickcount) {
+      localStorage.clickcount = Number(localStorage.clickcount) + 1;
+    } else {
+      localStorage.clickcount = 1;
+    }
+
+    your_score.innerHTML = localStorage.clickcount;
+  } else {
+    your_score.innerHTML = 0;
+  }
+  const cloneU = userOutput.cloneNode(true);
+  while (opt_U1.firstChild) opt_U1.firstChild.remove();
+  opt_U1.appendChild(cloneU);
+  const cloneP = pcOutput.cloneNode(true);
+  while (opt_P1.firstChild) opt_P1.firstChild.remove();
+  opt_P1.appendChild(cloneP);
+}
+
+function draw(userOutput, pcOutput) {
+  getDrawBox.style.display = "flex";
+  getGameBox.style.display = "none";
+  console.log(getDrawBox);
+
+  const cloneU = userOutput.cloneNode(true);
+  while (opt_U3.firstChild) opt_U3.firstChild.remove();
+  opt_U3.appendChild(cloneU);
+  const cloneP = pcOutput.cloneNode(true);
+  while (opt_P3.firstChild) opt_P3.firstChild.remove();
+  opt_P3.appendChild(cloneP);
+}
+function game(userChoice) {
+  const computerChoice = getComputerChoice();
+  var computerOutput = "";
+  var userOutput = "";
+
+  if (userChoice === "rock") {
+    userOutput = getRock;
+  } else if (userChoice === "paper") {
+    userOutput = getPaper;
+  } else if (userChoice === "scissor") {
+    userOutput = getScissor;
+  }
+  console.log(userOutput);
+  if (computerChoice === "rock") {
+    computerOutput = getRock;
+  } else if (computerChoice === "paper") {
+    computerOutput = getPaper;
+  } else if (computerChoice === "scissor") {
+    computerOutput = getScissor;
+  }
+
+  console.log(computerOutput);
+
+  switch (userChoice + computerChoice) {
+    case "paperrock":
+    case "rockscissor":
+    case "scissorpaper":
+      // win(userChoice, computerChoice, userOutput, computerOutput);
+      win(userOutput, computerOutput);
+      console.log("user wins");
+      break;
+    case "rockpaper":
+    case "scissorrock":
+    case "paperscissor":
+      // loses(userChoice, computerChoice, userOutput, computerOutput);
+      loses(userOutput, computerOutput);
+      console.log("computer wins");
+      break;
+    case "rockrock":
+    case "scissorscissor":
+    case "paperpaper":
+      draw(userOutput, computerOutput);
+      console.log("draw");
+      break;
+  }
+}
diff --git a/public/Stone-Paper-Scissor/style.css b/public/Stone-Paper-Scissor/style.css
new file mode 100644
index 00000000..b09c7138
--- /dev/null
+++ b/public/Stone-Paper-Scissor/style.css
@@ -0,0 +1,483 @@
+* {
+  font-family: "Dangrek", "Roboto";
+}
+body {
+  background-color: #8cc461;
+  overflow: hidden;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+h1 {
+  color: #fff;
+}
+
+label, input, button {
+  margin: 10px;
+}
+
+#result, #category, #tips {
+  margin-top: 20px;
+  color: #fff;
+  font-size: 18px;
+}
+.display {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-between;
+  border-radius: 13px;
+  border: 2px solid #fff;
+  padding: 15px;
+  width: 800px;
+  height: 120px;
+}
+.heading {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 4px;
+}
+.scoreboard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+}
+.score {
+  border-radius: 9px;
+  background: #fff;
+  width: 125px;
+  height: 110px;
+  color: #656565;
+  font-family: Roboto;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 1.7px;
+  text-align: center;
+}
+.game {
+  margin-top: 5vh;
+}
+.export {
+  display: none;
+}
+.stone1 {
+  position: relative;
+}
+.paper1 {
+  position: relative;
+}
+.scissor1 {
+  position: relative;
+}
+.line {
+  position: relative;
+}
+.line1 {
+  position: absolute;
+  background: none;
+  bottom: 14vh;
+  left: 2.5%;
+  z-index: 1;
+}
+.stone {
+  position: relative;
+  right: 90%;
+  background: none;
+}
+.logo1 {
+  position: absolute;
+  top: 25%;
+  right: 25%;
+  background: none;
+  cursor: pointer;
+}
+.paper {
+  position: relative;
+  left: 76.5%;
+  margin-top: -175px;
+}
+.logo2 {
+  position: absolute;
+  top: 25%;
+  right: 25%;
+  background: none;
+  cursor: pointer;
+}
+.line3 {
+  position: absolute;
+  background: none;
+  bottom: -10.5vh;
+  right: 80%;
+  z-index: 1;
+}
+.line2 {
+  position: absolute;
+  background: none;
+  bottom: -10.5vh;
+  left: 68%;
+  z-index: 1;
+}
+.scissor {
+  position: relative;
+  background: none;
+  margin-top: 30px;
+  right: 7%;
+}
+.logo3 {
+  position: absolute;
+  top: 28%;
+  right: 35%;
+  background: none;
+  cursor: pointer;
+}
+@keyframes example {
+  from {
+    background-color: #2eae19;
+  }
+  to {
+    background-color: #3dc029;
+  }
+}
+.bg img {
+  border-radius: 100%;
+  animation-name: example;
+  animation-duration: 1s;
+}
+#rul {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 21px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 2.1px;
+}
+.box {
+  width: 278px;
+  height: 325px;
+  border-radius: 13px;
+  border: 7px solid #fff;
+  background-color: #004429;
+  top: 35%;
+  right: 3%;
+  display: none;
+  position: fixed;
+  z-index: 1;
+}
+.headline {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 29px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  background-color: #004429;
+  text-align: center;
+}
+.listrule {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  background-color: #004429;
+}
+li {
+  margin: 5px 5px;
+}
+ul {
+  list-style: none;
+}
+ul li::before {
+  color: #ffd600;
+  content: "\25AA";
+  display: inline-block;
+  width: 1em;
+  font-size: 1.1rem;
+  margin-left: -2em;
+  text-align: center;
+}
+.close {
+  position: relative;
+  text-align: center;
+  border: none;
+  float: right;
+  top: -13%;
+  right: -13%;
+  background: none;
+  cursor: pointer;
+}
+.close img {
+  background: none;
+}
+.symbol {
+  position: absolute;
+  color: #fff;
+  font-family: Dangrek;
+  font-size: 44px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  top: -7px;
+  right: 23px;
+  background: none;
+}
+.you-win {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 7%;
+  margin-bottom: -80px;
+  gap: 80px;
+  display: none;
+}
+.you-lost {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 7%;
+  margin-bottom: -80px;
+  gap: 80px;
+  display: none;
+}
+.tie-up {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 100px;
+  padding-bottom: 50px;
+  gap: 80px;
+  background: none;
+  display: none;
+}
+.you-picked {
+  position: relative;
+}
+.ipt-U {
+  background: none;
+  color: #fff;
+  font-family: Roboto;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 1.7px;
+}
+.opt-U {
+  background: none;
+}
+.opt-P {
+  background: none;
+}
+.ipt-P {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 1.7px;
+  background: none;
+}
+.opt-U img {
+  background: none;
+}
+.opt-P img {
+  background: none;
+}
+.result h2 {
+  color: #fff;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 39px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: normal;
+  letter-spacing: 3.9px;
+  background: none;
+}
+.result h3 {
+  color: #fff;
+  text-align: center;
+  font-family: Roboto;
+  font-size: 25px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: normal;
+  letter-spacing: 2.5px;
+  background: none;
+}
+.result button {
+  width: 174px;
+  height: 44px;
+  border-radius: 9px;
+  background: #fff;
+  color: #6b6b6b;
+  font-family: Roboto;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 1.5px;
+  cursor: pointer;
+  border: none;
+}
+.ipt-U1 {
+  position: absolute;
+  z-index: 1;
+  top: 100px;
+  left: 42%;
+}
+.opt-U1 {
+  position: absolute;
+  z-index: 1;
+  bottom: 32%;
+  left: 33%;
+}
+.ipt-P1 {
+  margin-left: 30px;
+  margin-top: -55px;
+}
+.opt-P1 {
+  margin-top: 35px;
+}
+.result1 {
+  margin-left: -140px;
+  background: none;
+  z-index: 1;
+}
+.result1 h3 {
+  margin-top: -25px;
+}
+.result1 button {
+  margin-left: 5px;
+}
+
+.ipt-U2 {
+  margin-top: -50px;
+  margin-left: 30px;
+}
+.opt-U2 {
+  margin-top: 40px;
+}
+.ipt-P2 {
+  position: absolute;
+  z-index: 1;
+  margin-top: 100px;
+  margin-left: 185px;
+}
+.opt-P2 {
+  position: absolute;
+  z-index: 1;
+  margin-top: -322px;
+  margin-left: 155px;
+}
+.result2 {
+  margin-right: -150px;
+  background: none;
+  z-index: 1;
+}
+.result2 h3 {
+  margin-top: -25px;
+}
+.result2 button {
+  margin-left: 15px;
+}
+
+.ipt-U3 {
+  margin-left: 50px;
+}
+.opt-U3 {
+  margin-left: 30px;
+  margin-top: 30px;
+}
+.ipt-P3 {
+  margin-left: 60px;
+}
+.opt-P3 {
+  margin-left: 30px;
+  margin-top: 30px;
+}
+.next {
+  border: 2px solid white;
+  color: white;
+  border-radius: 5px;
+  background-color: #8cc461;
+  padding: 5px 20px;
+  text-align: center;
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: 3px;
+  font-weight: bold;
+}
+.btn {
+  text-align: right;
+  position: absolute;
+  margin-left: 85vw;
+  margin-top: 45vh;
+}
+.rules {
+  border: 2px solid white;
+  color: white;
+  border-radius: 5px;
+  background-color: #8cc461;
+  padding: 5px 20px;
+  text-align: center;
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: 3px;
+  font-weight: bold;
+}
+.btn1 {
+  text-align: right;
+  position: absolute;
+  margin-left: 60vw;
+  margin-top: 85vh;
+}
+#nxt {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 21px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 2.1px;
+}
+#comscore {
+  font-size: 45px;
+  font-weight: bold;
+  line-height: 2;
+  margin-bottom: 2%;
+  margin-top: 1%;
+  color: #000;
+}
+#youscore {
+  font-size: 45px;
+  font-weight: bold;
+  line-height: 2;
+  margin-bottom: 2%;
+  margin-top: 1%;
+  color: #000;
+}
+.symbol {
+  background-color: red;
+  border-radius: 100%;
+  border: 3px solid white;
+  height: 70px;
+  width: 60px;
+  margin-top: 3vh;
+  margin-left: 3vw;
+}
+/* Add this to your existing CSS */
+.chart {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+
diff --git a/public/Stone-Paper-Scissor/style1.css b/public/Stone-Paper-Scissor/style1.css
new file mode 100644
index 00000000..681d89ca
--- /dev/null
+++ b/public/Stone-Paper-Scissor/style1.css
@@ -0,0 +1,181 @@
+body {
+  background-color: #8cc461;
+  margin: 0;
+  overflow: hidden;
+}
+.image-cup {
+  margin-top: 25vh;
+  margin-left: 42vw;
+}
+.star5 {
+  position: absolute;
+  margin-top: -7vh;
+  margin-left: -4vw;
+}
+.star1 {
+  position: absolute;
+  margin-top: -30vh;
+  margin-left: -12vw;
+}
+.star9 {
+  position: absolute;
+  margin-top: -38vh;
+  margin-left: -7vw;
+}
+.star3 {
+  position: absolute;
+  margin-top: -45vh;
+  margin-left: -3vw;
+}
+.star4 {
+  position: absolute;
+  margin-top: -42vh;
+  margin-left: 4vw;
+}
+.star2 {
+  position: absolute;
+  margin-top: -48vh;
+  margin-left: 12vw;
+}
+.star7 {
+  position: absolute;
+  margin-top: -34vh;
+  margin-left: 20vw;
+}
+.star6 {
+  position: absolute;
+  margin-top: -23vh;
+  margin-left: 17vw;
+}
+.text1 {
+  font-family: "Roboto Mono", monospace;
+  font-weight: bold;
+  font-size: 53px;
+  color: white;
+  text-align: center;
+  letter-spacing: 7px;
+  position: absolute;
+  margin-top: -5vh;
+  margin-left: -3vw;
+}
+.text2 {
+  font-family: "Roboto Mono", monospace;
+  font-weight: bold;
+  font-size: 19px;
+  color: white;
+  text-align: center;
+  letter-spacing: 7px;
+  position: absolute;
+  margin-top: -9vh;
+  margin-left: 0.4vw;
+}
+.play-again {
+  background-color: white;
+  color: #6b6b6b;
+  border-radius: 9px;
+  text-align: center;
+  padding: 9px 25px;
+  border-color: white;
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: 2px;
+}
+.button1 {
+  text-align: center;
+  position: absolute;
+  margin-top: 3vh;
+  margin-left: 4.5vw;
+}
+.btn1 {
+  text-align: right;
+  position: absolute;
+  margin-left: 35vw;
+  margin-top: 30vh;
+}
+.rules {
+  border: 2px solid white;
+  color: white;
+  border-radius: 5px;
+  background-color: #8cc461;
+  padding: 10px 25px;
+  text-align: center;
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: 3px;
+  font-weight: bold;
+}
+.box {
+  width: 278px;
+  height: 325px;
+  border-radius: 13px;
+  border: 7px solid #fff;
+  background-color: #004429;
+  top: 35%;
+  right: 3%;
+  display: none;
+  position: fixed;
+  z-index: 1;
+}
+.headline {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 29px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  background-color: #004429;
+  text-align: center;
+}
+.listrule {
+  color: #fff;
+  font-family: Roboto;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  background-color: #004429;
+}
+li {
+  margin: 5px 5px;
+}
+ul {
+  list-style: none;
+}
+ul li::before {
+  color: #ffd600;
+  content: "\25AA";
+  display: inline-block;
+  width: 1em;
+  font-size: 1.1rem;
+  margin-left: -2em;
+  text-align: center;
+}
+.close {
+  position: relative;
+  text-align: center;
+  border: none;
+  float: right;
+  top: -13%;
+  right: -13%;
+  background: none;
+  cursor: pointer;
+}
+.close img {
+  background: none;
+}
+.symbol {
+  background-color: red;
+  border-radius: 100%;
+  border: 3px solid white;
+  height: 60px;
+  width: 60px;
+  margin-top: 3vh;
+  margin-left: 3vw;
+  position: absolute;
+  color: #fff;
+  font-family: Dangrek;
+  font-size: 50px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  top: -7px;
+  right: 23px;
+}