├── image ├── 1200px-Red_circle.svg.png └── 500px-Circle_-_black_simple.svg.png ├── index.html └── style.css /image/1200px-Red_circle.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/pin-matcher/7750d0d99bfc9a1989516c140f649803295ec8c2/image/1200px-Red_circle.svg.png -------------------------------------------------------------------------------- /image/500px-Circle_-_black_simple.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/pin-matcher/7750d0d99bfc9a1989516c140f649803295ec8c2/image/500px-Circle_-_black_simple.svg.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pin Generator 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 |
7
26 |
8
27 |
9
28 |
29 |
30 |
4
31 |
5
32 |
6
33 |
34 |
35 |
1
36 |
2
37 |
3
38 |
39 |
40 |
<
41 |
0
42 |
C
43 |
44 |
45 | 46 |

3 try left

47 |
48 |
49 |
50 |
51 |
52 |
53 |

❌ Pin Didn't Match, Please try again

54 |

✅ Pin Matched... Secret door is opening for you

55 |
56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body { 5 | background: #10101B; 6 | height: 100vh; 7 | } 8 | .container { 9 | margin-top: 30px; 10 | } 11 | 12 | .half-width { 13 | height: 570px; 14 | background: #222436; 15 | padding: 30px; 16 | text-align: center; 17 | } 18 | .generate-btn{ 19 | margin-top: 140px; 20 | width: 180px; 21 | padding: 50px; 22 | border-radius: 50%; 23 | border: 8px solid #39458C; 24 | background-color: #495BC3; 25 | color: #ffffff; 26 | font-weight: bold; 27 | font-size: 20px; 28 | text-align: center; 29 | } 30 | .generate-btn:focus{ 31 | outline: none; 32 | box-shadow: none; 33 | } 34 | 35 | input[type='text']{ 36 | background-color: #3D4153; 37 | padding: 10px 0px; 38 | color: #ffffff; 39 | width: 80%; 40 | margin: 0 auto; 41 | border: 2px solid #858299; 42 | height: 50px; 43 | padding: 10px; 44 | } 45 | input[type='text']:focus { 46 | background-color: #3D4153; 47 | color: #fff; 48 | font-size: 20px; 49 | } 50 | .numbers { 51 | margin: 30px 0; 52 | } 53 | 54 | .calc-typed { 55 | margin-top: 20px; 56 | font-size: 45px; 57 | text-align: right; 58 | color: #fff; 59 | } 60 | 61 | .calc-button-row { 62 | width: 100%; 63 | } 64 | 65 | .button { 66 | width: 20%; 67 | background: #425062; 68 | color: #fff; 69 | padding: 20px 0; 70 | margin: 5px; 71 | display: inline-block; 72 | font-size: 25px; 73 | text-align: center; 74 | vertical-align: middle; 75 | margin-right: -4px; 76 | border-radius: 10px; 77 | cursor: pointer; 78 | } 79 | .blink-me { 80 | color: #E0B612; 81 | } 82 | .submit-btn { 83 | border: none; 84 | margin-top: 20px; 85 | padding: 10px 120px; 86 | border-radius: 5px; 87 | background: #495BC3; 88 | color: #fff; 89 | } 90 | .notify { 91 | color: #fff; 92 | text-align: center; 93 | margin: 0 auto; 94 | background: #222436; 95 | margin-top: 20px; 96 | border-radius: 15px; 97 | padding: 5px 20px; 98 | } 99 | .notify-section{ 100 | width: 35%; 101 | margin: 0 auto; 102 | } 103 | .action-left { 104 | color: #FF3C5F; 105 | margin-top: 10px; 106 | } 107 | --------------------------------------------------------------------------------