iamrahulmahato · RadhikaManohar · Oct 16, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "liveServer.settings.port": 5502
+  "liveServer.settings.port": 5502,
+  "livePreview.defaultPreviewPath": "/index.html"
 }
diff --git a/css/style.css b/css/style.css
@@ -1,15 +1,17 @@
 ::-webkit-scrollbar {
-  width: 12px;
+  width: 16 px;
+  transition: width 0.3s;
 }
 
 ::-webkit-scrollbar-track {
   background: #000327;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #95ff00;
+  background-color:#06cfaa;
   border-radius: 10px;
   border: 3px solid #f1f1f1;
+  transition: background-color 0.3s;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -18,7 +20,8 @@
 
 html {
   scrollbar-width: thin;
-  scrollbar-color: #08ecbb #3c0751;
+  scrollbar-color: #62ab9b #3c0751;
+  transition: scrollbar-color 0.3s;
 }
 
 * {
@@ -440,11 +443,15 @@ body {
 .card {
     background: var(--card);
     border-radius: 8px;
+
+    color: #0f172a;
+    transition: all 0.2s ease-in-out;
     color: var(--head);
     transition: all 0.2s ease-in-out;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+
 }
 
 .card:hover {
@@ -498,6 +505,9 @@ body {
     top: 1rem;
     right: 1rem;
 }
+.icon.theme-mode-toggler {
+    z-index: 101;
+}
 
 #toggle-mode-btn {
     border: none;
@@ -507,7 +517,6 @@ body {
     justify-content: center;
     border-radius: 9999px;
     padding: 8px;
-    align-items: center;
     background-color: #f43f5e;
     color: #ffffff;
     cursor: pointer;
@@ -517,6 +526,47 @@ body {
     fill: #fff;
 }
 
+
+/* Contributor Card Styles */
+.contributor-card {
+    background: var(--card);
+    border-radius: 8px;
+    transition: all 0.2s ease-in-out;
+}
+
+.contributor-card:hover {
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.contributor-card-cover {
+    height: 8rem; /* Adjust as needed */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
+    background-color: rgba(249, 89, 95, 0.2); /* Pinkish background */
+}
+
+.contributor-card-cover img {
+    height: 100%;
+}
+
+.contributor-card-content {
+    padding: 1rem;
+}
+
+.contributor-card-heading {
+    color: #1e293b;
+    font-weight: 600;
+}
+
+.contributor-card-description {
+    color: #475569;
+    font-size: 0.9rem;
+    margin-top: 0.2rem;
+}
+
 #footer {
     padding-top: 5.5em; 
   }

diff --git a/index.html b/index.html
@@ -546,6 +546,7 @@ <h3 class="card-heading">LightHouse</h3>
                     <img src="./projects/Storybazzi/images/favicon.png" alt="">
                 </div>
                 <div class="card-content">
+
                     <h3 class="card-heading">Storybazzi</h3>
                     <p class="card-description">
                         A single page blog.
@@ -564,18 +565,19 @@ <h3 class="card-heading">8 Puzzle</h3>
                     </p>
                 </div>
             </a>
+
             <a href="./projects/15_puzzle/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/15.png" alt="">
                 </div>
                 <div class="card-content">
                     <h3 class="card-heading">15 Puzzle</h3>
                     <p class="card-description">
-                         A 15 Puzzle.
+                        A 15 Puzzle.
                     </p>
                 </div>
             </a>
-
+              
             <a href="./projects/Calculator/index.html" class="card" target="_blank">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/Calc-100.png" alt="">

diff --git a/projects/15_puzzle/index.html b/projects/15_puzzle/index.html
@@ -9,6 +9,10 @@
 <body>
     <div class="container">
         <h1>15 Puzzle Game</h1>
+        <div class="links">
+            <button class="rules-button" onclick="showRules()">Rules</button>
+        </div>
+
         <div class="puzzle-container">
             <div class="tile" id="tile1">1</div>
             <div class="tile" id="tile2">2</div>
@@ -29,6 +33,25 @@ <h1>15 Puzzle Game</h1>
         </div>
         <button class="shuffle-button">Shuffle Tiles</button>
     </div>
+    <div id="rules-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-button" onclick="closeRules()">&times;</span>
+            <h2>Game Rules</h2>
+            <p>The 15 Puzzle is a sliding puzzle consisting of 15 numbered tiles and one empty space. 
+                The objective is to arrange the tiles in ascending order from 1 to 15.</p>
+            <p>Rules:
+                <ul>
+                    <li>You can move only adjacent tiles into the empty space.</li>
+                    <li>The goal is to get the tiles arranged in sequence, left to right, top to bottom.</li>
+                    <li>Try to solve it with the fewest moves possible!</li>
+                </ul>
+            </p>
+        </div>
+    </div>
     <script src="script.js"></script>
+
+
+
+    </div>
 </body>
 </html>
diff --git a/projects/15_puzzle/script.js b/projects/15_puzzle/script.js
@@ -68,3 +68,10 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 });
+function showRules() {
+    document.getElementById('rules-modal').style.display = 'flex';
+}
+
+function closeRules() {
+    document.getElementById('rules-modal').style.display = 'none';
+}
diff --git a/projects/15_puzzle/style.css b/projects/15_puzzle/style.css
@@ -90,3 +90,51 @@ h1 {
 .shuffle-button:hover {
     background-color: #c0392b;
 }
+/* Modal Styling */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 400px;
+    text-align: center;
+    position: relative;
+}
+
+.close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.rules-button {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 20px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    z-index:1001;
+}
+
+.rules-button:hover {
+    background-color: #218838;
+}