forked from U7P4L-IN/Web-Dev-Projects
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
22 changed files
with
2,144 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| ## Puzzle-mini-project | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Puzzle by utpalcoding</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="path/to/font-awesome/css/font-awesome.min.css" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <button class="Refresh" onclick="location.reload()"> | ||
| <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> | ||
| <path | ||
| d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <div class="conatiner"> | ||
| <div class="tile" onclick="MoveMe(0)">1</div> | ||
| <div class="tile" onclick="MoveMe(1)">2</div> | ||
| <div class="tile" onclick="MoveMe(2)">3</div> | ||
| <div class="tile" onclick="MoveMe(3)">4</div> | ||
| <div class="tile" onclick="MoveMe(4)">5</div> | ||
| <div class="tile" onclick="MoveMe(5)">6</div> | ||
| <div class="tile" onclick="MoveMe(6)">7</div> | ||
| <div class="tile" onclick="MoveMe(7)">8</div> | ||
| <div class="emtile"></div> | ||
| </div> | ||
| <div class="blscreen"> | ||
| <div class="winScreen"> | ||
| <img src="./utpalcoding" alt="" /> | ||
| <div class="WinMessage"> | ||
| <h2>You Won The Match</h2> | ||
| <div class="StarGroup"> | ||
| <svg viewBox="0 0 576 512" width="90" title="star"> | ||
| <path | ||
| d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" | ||
| /> | ||
| </svg> | ||
| <svg viewBox="0 0 576 512" width="90" title="star"> | ||
| <path | ||
| d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" | ||
| /> | ||
| </svg> | ||
| <svg viewBox="0 0 576 512" width="90" title="star"> | ||
| <path | ||
| d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| Moves: <i class="MovesCount"></i> | ||
| <div class="buttonGroup"> | ||
| <button onclick="location.reload()">Play Again!</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| var MovesCount = 0; | ||
| function randomPos() { | ||
| var arr = []; | ||
| while (arr.length < 9) { | ||
| var r = | ||
| (Math.floor(Math.random() * 3) + 1).toString() + | ||
| (Math.floor(Math.random() * 3) + 1).toString(); | ||
| if (arr.indexOf(r) === -1) arr.push(r); | ||
| } | ||
| return arr; | ||
| } | ||
|
|
||
| var RandomPos = randomPos(); | ||
|
|
||
| for (let i = 0; i < document.getElementsByClassName("tile").length; i++) { | ||
| document.getElementsByClassName("tile")[i].style.gridArea = | ||
| RandomPos[i][0] + "/" + RandomPos[i][1]; | ||
| } | ||
| function MoveMe(tile) { | ||
| var EmptyTile = document.querySelector(".emtile"); | ||
| var Possibilties = [ | ||
| parseInt(RandomPos[tile][0]) + 1 == parseInt(RandomPos[8][0]) && | ||
| parseInt(RandomPos[tile][1]) == parseInt(RandomPos[8][1]), | ||
| parseInt(RandomPos[tile][0]) - 1 == parseInt(RandomPos[8][0]) && | ||
| parseInt(RandomPos[tile][1]) == parseInt(RandomPos[8][1]), | ||
| parseInt(RandomPos[tile][1]) + 1 == parseInt(RandomPos[8][1]) && | ||
| parseInt(RandomPos[tile][0]) == parseInt(RandomPos[8][0]), | ||
| parseInt(RandomPos[tile][1]) - 1 == parseInt(RandomPos[8][1]) && | ||
| parseInt(RandomPos[tile][0]) == parseInt(RandomPos[8][0]), | ||
| ]; | ||
| if ( | ||
| Possibilties[0] || | ||
| Possibilties[1] || | ||
| Possibilties[2] || | ||
| Possibilties[3] | ||
| ) { | ||
| MovesCount++; | ||
| EmptyTile.style.gridArea = RandomPos[tile][0] + "/" + RandomPos[tile][1]; | ||
| document.querySelectorAll(".tile")[tile].style.gridArea = | ||
| RandomPos[8][0] + "/" + RandomPos[8][1]; | ||
|
|
||
| var CurrentTile = RandomPos[tile]; | ||
| RandomPos[tile] = RandomPos[8]; | ||
| RandomPos[8] = CurrentTile; | ||
| NeededPos = ["11", "12", "13", "21", "22", "23", "31", "32", "33"]; | ||
| if (RandomPos.join(".") == NeededPos.join(".")) { | ||
| console.log("Game Beated"); | ||
| document.querySelector(".blscreen").style.display = "flex"; | ||
| document.querySelector(".MovesCount").innerHTML = MovesCount; | ||
| var stars = 0; | ||
| if (MovesCount < 100) { | ||
| stars = 3; | ||
| } else if (MovesCount < 200) { | ||
| stars = 2; | ||
| } else if (MovesCount < 300) { | ||
| stars = 1; | ||
| } else { | ||
| stars = 0; | ||
| } | ||
| for (let i = 0; i < 2; i++) { | ||
| document.getElementsByTagName("path").style.fill = "yellow"; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| @import url("https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap"); | ||
|
|
||
| * { | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
| body { | ||
| height: 100vh; | ||
| background-color: #021121; | ||
| display: flex; | ||
| } | ||
| .Refresh { | ||
| position: absolute; | ||
| padding: 10px; | ||
| border-radius: 50%; | ||
| cursor: pointer; | ||
| margin: 20px; | ||
| } | ||
|
|
||
| .conatiner { | ||
| width: 450px; | ||
| margin: auto; | ||
| height: 450px; | ||
|
|
||
| background-size: cover; | ||
| display: grid; | ||
| grid-template-columns: 150px 150px 150px; | ||
| grid-template-rows: 150px 150px 150px; | ||
| } | ||
| .tile { | ||
| background: url(./background.avif); | ||
| font-weight: 900; | ||
| font-family: "Bruno Ace", cursive; | ||
| font-size: 2em; | ||
| background-size: 450px 450px; | ||
| margin: 3px; | ||
| padding: 15px; | ||
| border-radius: 5px; | ||
| transition-duration: 0.5s; | ||
| -webkit-text-stroke: 0.001px white; | ||
| } | ||
| .tile:nth-child(1) { | ||
| background-position: 0px 0px; | ||
| } | ||
| .tile:nth-child(2) { | ||
| background-position: -150px 0px; | ||
| } | ||
| .tile:nth-child(3) { | ||
| background-position: -300px -0px; | ||
| } | ||
| .tile:nth-child(4) { | ||
| background-position: 0px -150px; | ||
| } | ||
| .tile:nth-child(5) { | ||
| background-position: -150px -150px; | ||
| } | ||
| .tile:nth-child(6) { | ||
| background-position: -300px -150px; | ||
| } | ||
| .tile:nth-child(7) { | ||
| background-position: 0px -300px; | ||
| } | ||
| .tile:nth-child(8) { | ||
| background-position: -150px -300px; | ||
| } | ||
| .blscreen { | ||
| position: fixed; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| display: none; | ||
| background-color: rgba(0, 0, 0, 0.1); | ||
| backdrop-filter: blur(2px); | ||
| } | ||
| .winScreen { | ||
| width: 600px; | ||
| height: 300px; | ||
| margin: auto; | ||
| background-color: #ced4da; | ||
| border-radius: 10px; | ||
| display: flex; | ||
| font-family: sans-serif; | ||
| box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.5); | ||
| } | ||
| .winScreen > img { | ||
| width: 300px; | ||
| height: 300px; | ||
| border-radius: 10px; | ||
| } | ||
| .WinMessage { | ||
| width: 300px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 10px; | ||
| font-size: 1.1em; | ||
| } | ||
| h2 { | ||
| text-align: center; | ||
| padding: 5px; | ||
| } | ||
| .buttonGroup { | ||
| margin: auto; | ||
| } | ||
| .buttonGroup > button { | ||
| padding: 5px 20px; | ||
| border-radius: 20px; | ||
| margin: 10px; | ||
| font-size: 1.1em; | ||
| background-color: #40916c; | ||
| font-weight: bolder; | ||
| color: white; | ||
| font-family: "Bruno Ace"; | ||
|
|
||
| cursor: pointer; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Portfoilio card | utpalcoding</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="back"></div> | ||
| <article class="profile"> | ||
| <div class="profile-image"> | ||
| <img src="utpalcoding.jpg" /> | ||
| </div> | ||
| <h2 class="username">Utpal Coding</h2> | ||
| <small class="handle">@utpalcoding</small> | ||
| <p>Al Developer</p> | ||
| <div class="profile-actions"> | ||
| <a href="https://www.instagram.com/utpalcoding/" | ||
| ><button class="btn utpalcoding btn--primary">Follow</button></a | ||
| > | ||
| <button class="btn btn--icon"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="1em" | ||
| viewBox="0 0 512 512" | ||
| > | ||
| <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> | ||
| <style> | ||
| svg { | ||
| fill: #ffffff; | ||
| } | ||
| </style> | ||
| <path | ||
| d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <button class="btn btn--icon"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="1em" | ||
| viewBox="0 0 448 512" | ||
| > | ||
| <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> | ||
| <style> | ||
| svg { | ||
| fill: #ffffff; | ||
| } | ||
| </style> | ||
| <path | ||
| d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| <div class="profile-links"> | ||
| <a | ||
| href="https://www.instagram.com/utpalcoding/" | ||
| class="link link--icon" | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="1em" | ||
| viewBox="0 0 448 512" | ||
| > | ||
| <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> | ||
| <style> | ||
| svg { | ||
| fill: #ffffff; | ||
| } | ||
| </style> | ||
| <path | ||
| d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" | ||
| /> | ||
| </svg> | ||
| </a> | ||
| <a href="https://t.me/utpalcoding " | ||
| ><svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="1em" | ||
| viewBox="0 0 496 512" | ||
| > | ||
| <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> | ||
| <style> | ||
| svg { | ||
| fill: #ffffff; | ||
| } | ||
| </style> | ||
| <path | ||
| d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z" | ||
| /></svg | ||
| ></a> | ||
| <a href="#" | ||
| ><svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="1em" | ||
| viewBox="0 0 448 512" | ||
| > | ||
| <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> | ||
| <style> | ||
| svg { | ||
| fill: #ffffff; | ||
| } | ||
| </style> | ||
| <path | ||
| d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" | ||
| /></svg | ||
| ></a> | ||
| </div> | ||
| </article> | ||
| <script | ||
| src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js" | ||
| integrity="sha512-wC/cunGGDjXSl9OHUH0RuqSyW4YNLlsPwhcLxwWW1CR4OeC2E1xpcdZz2DeQkEmums41laI+eGMw95IJ15SS3g==" | ||
| crossorigin="anonymous" | ||
| referrerpolicy="no-referrer" | ||
| ></script> | ||
| <script> | ||
| VanillaTilt.init(document.querySelector(".profile"), { | ||
| max: 25, | ||
| speed: 400, | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
Empty file.
Oops, something went wrong.