Merge branch 'Main' into new-feature-branch

index.css

@@ -12,6 +12,7 @@ html {
     width: 100%;
     height: 100%;
     z-index: -1;
+    filter: blur(5px);
 }
 
 .content {
@@ -20,119 +21,119 @@ html {
     padding: 20px;
 }
 
-#bgCanvas {
-    filter: blur(5px);
-}
-
 @media(max-width:426px) {
-    .links table tbody tr td{
-        padding: 8px 4px;
+    .links table tbody tr td {
+        padding: 6px 2px; /* Reduce padding for smaller screens */
     }
 }
 
 @media(max-width:330px) {
-    .links table tbody tr td{
+    .links table tbody tr td {
         padding-left: 2px;
         padding-right: 2px;
-      }
+    }
 
-      .links table tbody tr .project-name{
-        padding: 8px 7px;
-      }
+    .links table tbody tr .project-name {
+        padding: 6px 4px; /* Reduce padding for project names */
+    }
 
-      .links table tbody tr td a{
+    .links table tbody tr td a {
         margin-left: 4px;
-      }
-
+    }
 }
 
+/* Add hover effect for links */
+.links table tbody tr td a:hover {
+    color: #007BFF; /* Change color on hover */
+    text-decoration: underline; /* Highlight links */
+}
 
 /* Base styles */
 body {
-  font-family: sans-serif;
-  background-color: #181818; /* Dark gray background */
-  color: #ffffff; /* White text color */
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+    font-family: sans-serif;
+    background-color: #181818; /* Dark gray background */
+    color: #ffffff; /* White text color */
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
 /* Header styles */
 header {
-  background-color: #2ecc71; /* Teal color */
-  color: #ffffff; /* White text */
-  padding: 1rem 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+    background-color: #2ecc71; /* Teal color */
+    color: #ffffff; /* White text */
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 header h1 {
-  margin: 0;
-  font-size: 2rem; /* Adjust font size as needed */
+    margin: 0;
+    font-size: 2rem; /* Adjust font size as needed */
 }
 
 header nav {
-  display: flex;
-  gap: 1rem;
+    display: flex;
+    gap: 1rem;
 }
 
 header a {
-  color: #ffffff;
-  text-decoration: none;
+    color: #ffffff;
+    text-decoration: none;
 }
 
 /* Main content styles */
 main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 main h1 {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  color: #ffffff; /* White heading text */
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    color: #ffffff; /* White heading text */
 }
 
 /* Search bar styles */
 #search-bar {
-  display: flex;
-  margin-bottom: 2rem;
+    display: flex;
+    margin-bottom: 2rem;
 }
 
 #searchInput {
-  padding: 1rem;
-  border-radius: 5px;
-  border: none;
-  background-color: #0d0d0d; /* Dark gray input background */
-  color: #f5eeee; /* White input text */
-  flex-grow: 1;
+    padding: 1rem;
+    border-radius: 5px;
+    border: none;
+    background-color: #0d0d0d; /* Dark gray input background */
+    color: #f5eeee; /* White input text */
+    flex-grow: 1;
 }
 
 #searchButton {
-  padding: 1rem 1.5rem;
-  background-color: #2ecc71; /* Teal button color */
-  color: #ffffff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  height: 24px;
+    padding: 1rem 1.5rem;
+    background-color: #2ecc71; /* Teal button color */
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    height: 24px;
 }
 
-/* No projects message */s
+/* No projects message */
 #no-projects {
-  text-align: center;
-  margin-top: 2rem;
+    text-align: center;
+    margin-top: 2rem;
 }
 
 /* Footer styles */
 footer {
-  background-color: #222222;
-  padding: 1rem;
-  text-align: center;
-  color: #f3eeee; /* Light gray footer text */
-}
+    background-color: #222222;
+    padding: 1rem;
+    text-align: center;
+    color: #f3eeee; /* Light gray footer text */
+}

public/Slide puzzle Game/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Slide puzzle Game</title>
+    <link rel="stylesheet" href="puzzle.css">
+    <script src="puzzle.js"></script>
+</head>
+<body>
+    <img id="title" src="./img/logo.png" alt="">
+    <div id="board"></div>
+    <h1><span id="turns">0</span></h1>
+    <h1 id="time">Time Left: 05:00</h1>
+</body>
+</html>

public/Slide puzzle Game/puzzle.css

@@ -0,0 +1,32 @@
+body{
+    font-family:Arial, Helvetica, sans-serif;
+    text-align: center;
+    color: #0c67a6;
+}
+
+#title{
+    height: 150px;
+    width: 400px;
+}
+
+#board{
+    width: 360px;
+    height: 360px;
+    background-color: lightblue;
+    margin: 0 auto;
+    border: 10px solid #0c67a6;
+    display: flex;
+    flex-wrap: wrap;
+}
+#board img{
+    width: 118px;
+    height: 118px;
+    border:1px solid #0c67a6;
+
+}
+
+    #time {
+        /* margin: -31rem; */
+        margin-top: -34rem;
+        margin-left: 50rem;
+    }

public/Slide puzzle Game/puzzle.js

@@ -0,0 +1,122 @@
+var rows = 3;
+var column = 3;
+
+var currTile;
+var otherTile; // blank tile
+
+var turns = 0;
+
+var imgOrder = ["4", "2", "8", "5", "1", "6", "7", "9", "3"];
+var winOrder = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"];
+
+window.onload = function() {
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < column; c++) {
+            let tile = document.createElement("img");
+            tile.id = r.toString() + "-" + c.toString();
+            tile.src = imgOrder.shift() + ".jpg";
+
+            // DRAG FUNCTIONALITY
+            tile.addEventListener("dragstart", dragStart); // click an image
+            tile.addEventListener("dragover", dragOver); // moving image around
+            tile.addEventListener("dragenter", dragEnter); // dragging image onto another one
+            tile.addEventListener("dragleave", dragLeave); // dragged image leaving another image
+            tile.addEventListener("drop", dragDrop); // dropping the image
+            tile.addEventListener("dragend", dragEnd); // swap the two tiles
+
+            document.getElementById("board").append(tile);
+        }
+    }
+
+    // Set a timer for 5 minutes (300,000 milliseconds) and display the countdown
+    startTimer(5 * 60);
+};
+
+function startTimer(duration) {
+    var timer = duration, minutes, seconds;
+    var interval = setInterval(function () {
+        minutes = parseInt(timer / 60, 10);
+        seconds = parseInt(timer % 60, 10);
+
+        minutes = minutes < 10 ? "0" + minutes : minutes;
+        seconds = seconds < 10 ? "0" + seconds : seconds;
+
+        document.getElementById("time").innerText = "Time Left: " + minutes + ":" + seconds;
+
+        if (--timer < 0) {
+            clearInterval(interval);
+            alert("Time's up! 5 minutes have passed.");
+        }
+    }, 1000);
+}
+
+function dragStart() {
+    currTile = this;
+    console.log("Drag Start: " + currTile.id);
+}
+
+function dragOver(e) {
+    e.preventDefault();
+}
+
+function dragEnter(e) {
+    e.preventDefault();
+}
+
+function dragLeave() {}
+
+function dragDrop() {
+    otherTile = this;
+    console.log("Drag Drop: " + otherTile.id);
+}
+
+function dragEnd() {
+    if (!otherTile.src.includes("3.jpg")) {
+        console.log("Not a valid move. Tile is not blank.");
+        return;
+    }
+    console.log("Drag End: " + currTile.id + " -> " + otherTile.id);
+
+    let currCoords = currTile.id.split("-");
+    let r = parseInt(currCoords[0]);
+    let c = parseInt(currCoords[1]);
+
+    let otherCoords = otherTile.id.split("-");
+    let r2 = parseInt(otherCoords[0]);
+    let c2 = parseInt(otherCoords[1]);
+
+    let moveLeft = r == r2 && c2 == c - 1;
+    let moveRight = r == r2 && c2 == c + 1;
+    let moveUp = c == c2 && r2 == r - 1;
+    let moveDown = c == c2 && r2 == r + 1;
+
+    let isAdjacent = moveLeft || moveRight || moveUp || moveDown;
+    console.log("Is Adjacent: " + isAdjacent);
+
+    if (isAdjacent) {
+        let currImg = currTile.src;
+        let otherImg = otherTile.src;
+
+        currTile.src = otherImg;
+        otherTile.src = currImg;
+
+        turns++;
+        document.getElementById("turns").innerText = "Turns: " + turns;
+        console.log("Turns: " + turns);
+
+        // Check if the player has won
+        if (checkWin()) {
+            alert("Congratulations! You've solved the puzzle!");
+        }
+    }
+}
+
+function checkWin() {
+    let tiles = document.getElementsByTagName("img");
+    for (let i = 0; i < tiles.length; i++) {
+        if (tiles[i].src.includes(winOrder[i]) === false) {
+            return false;
+        }
+    }
+    return true;
+}

public/Textutils/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*