From a6d4d178f6343adfb4c7a0ecb1b4aeb3038438cf Mon Sep 17 00:00:00 2001 From: SURAJIT MAITY <111490250+Surajit0573@users.noreply.github.com> Date: Sun, 25 Feb 2024 12:45:14 +0530 Subject: [PATCH] Added Instruction tab in all game (#324) --- 2048/index.html | 144 ++++++++------- Bingo Game/index.html | 147 +++++++++++----- Bingo Game/style.css | 80 ++++++++- Block-Buster/index.html | 58 ++++++ Block-Buster/styles.css | 78 ++++++++ CrossWord/index.html | 22 ++- HangMan Game/index.html | 157 +++++++++-------- Memory Card game/index.html | 303 +++++++++++++++++++------------- Memory Card game/style.css | 81 ++++++++- Ping_Pong/index.html | 69 +++++++- Ping_Pong/style.css | 88 +++++++++- Rock Paper Scissor/index.html | 164 +++++++++-------- Simon Game/index.html | 19 +- Snake Game/index.html | 133 ++++++++------ Sudoku_Game_8x8/index.html | 21 +++ Sudoku_Game_9x9/index.html | 22 ++- Tetris/index.html | 80 ++++++--- Tic-Tac-Toe/index.html | 156 +++++++++------- UNO/index.html | 83 ++++++--- Word Scramble/index.html | 155 +++++++++------- css_files/checkers_game.css | 14 +- css_files/model.css | 53 ++++++ html_files/Connect4.html | 78 +++++--- html_files/_8_Puzzle_game.html | 116 ++++++------ html_files/checkers_game.html | 28 ++- html_files/sudoku_game_4x4.html | 20 ++- html_files/sudoku_game_6x6.html | 20 +++ index.html | 6 +- javascript/checkers_game.js | 6 +- javascript/instruction.js | 19 ++ 30 files changed, 1699 insertions(+), 721 deletions(-) create mode 100644 css_files/model.css create mode 100644 javascript/instruction.js diff --git a/2048/index.html b/2048/index.html index b77f3d9..35781ad 100644 --- a/2048/index.html +++ b/2048/index.html @@ -1,72 +1,98 @@ - - - 2048 - - - - - - + + + 2048 + + + + -
-
-

2048

-
-
score
- 0 -
-
- Join the numbers and get to the 2048 tile! -
+ -
- - + + + +
+
+

2048

+
+
score
+ 0
+
+ Join the numbers and get to the 2048 tile! +
+
+ +
-
-
-

Solve it!

+
+ +
+
+

Solve it!

+

+ Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

+
+
+

Quick Links

+ Home + About + Contact + FAQ + Contributors +
+
+

Social Links

+ + + +
+ + + + + - - + \ No newline at end of file diff --git a/Bingo Game/index.html b/Bingo Game/index.html index 2efadcc..7083bc0 100644 --- a/Bingo Game/index.html +++ b/Bingo Game/index.html @@ -1,51 +1,108 @@ - - + + - - - - Bingo Game - - + + + + Bingo Game + + + - + +
-

Bingo Game

-
-

Player 1's Card

-
-
-
-
-

Player 2's Card

-
-
- - -
-
- - - -
-
+

Bingo Game

+
+

Player 1's Card

+
+
+
+
+

Player 2's Card

+
+
+ + +
+
+ + + +
+
-
-
- - +
+
- +
+
+

Solve it!

+

+ Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

+
+
+

Quick Links

+ Home + About + Contact + FAQ + Contributors +
+
+

Social Links

+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/Bingo Game/style.css b/Bingo Game/style.css index 565d7a8..2efbd0e 100644 --- a/Bingo Game/style.css +++ b/Bingo Game/style.css @@ -112,6 +112,84 @@ label { #back{ position: absolute; - top: 5px; + top: 80px; right: 5px; +} + +.navbar{ + /* margin-top: 25px; */ + display: flex; + justify-content: center; + align-items: center; + justify-content: space-between; + height: 67px; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + border-bottom:1px solid #ffb780; +} +.image img{ + height: 55px; + width: 55px; +} +.left-nav ul{ + display: flex; + justify-content: center; + align-items: center; +} +.left-nav ul li{ + list-style: none; +} +.left-nav ul li a{ + text-decoration: none; + color: #ffb780; + text-align: center; + padding: 14px 20px; + text-decoration: none; + font-size: 1.3rem; +} +.left-nav ul li a:hover{ + text-decoration: underline; +} +.footer-container{ + border-top: 1px solid #ffb780; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + padding: 20px; + /* background: url(Image.png); */ + background-position: center; + line-height: 2.5rem; +} +.foot-head h2{ + text-align: center; + color: aqua; + font-weight: 600; +} +.foot-head p{ + color: #ffb780; + text-align: center; + font-size: 1.20rem; +} +.foot-navlinks h3{ + text-align: center; + color: aqua; + font-weight: 600; +} +.foot-navlinks { + text-align: center; +} +.foot-navlinks a{ + color: #ffb780; + font-size: 18px; + padding: 10px; +} +.foot-social { + text-align: center; +} +.foot-social h3{ + color: aqua; + font-weight: 600; +} +.foot-social a{ + font-size: 30px; + color: #ffb780; } \ No newline at end of file diff --git a/Block-Buster/index.html b/Block-Buster/index.html index b9b1498..c821eb8 100644 --- a/Block-Buster/index.html +++ b/Block-Buster/index.html @@ -4,8 +4,25 @@ Block Buster + + +

Block Buster

@@ -15,6 +32,47 @@

Block Buster

+ +
+
+

Solve it!

+

+ Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

+
+
+

Quick Links

+ Home + About + Contact + FAQ + Contributors +
+
+

Social Links

+ + + +
+ + + + diff --git a/Block-Buster/styles.css b/Block-Buster/styles.css index ef78453..f9504e6 100644 --- a/Block-Buster/styles.css +++ b/Block-Buster/styles.css @@ -55,3 +55,81 @@ body { max-width: 700px; border-radius: 10px; } + +.navbar{ + /* margin-top: 25px; */ + display: flex; + justify-content: center; + align-items: center; + justify-content: space-between; + height: 67px; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + border-bottom:1px solid #ffb780; +} +.image img{ + height: 55px; + width: 55px; +} +.left-nav ul{ + display: flex; + justify-content: center; + align-items: center; +} +.left-nav ul li{ + list-style: none; +} +.left-nav ul li a{ + text-decoration: none; + color: #ffb780; + text-align: center; + padding: 14px 20px; + text-decoration: none; + font-size: 1.3rem; +} +.left-nav ul li a:hover{ + text-decoration: underline; +} +.footer-container{ + border-top: 1px solid #ffb780; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + padding: 20px; + /* background: url(Image.png); */ + background-position: center; + line-height: 2.5rem; +} +.foot-head h2{ + text-align: center; + color: aqua; + font-weight: 600; +} +.foot-head p{ + color: #ffb780; + text-align: center; + font-size: 1.20rem; +} +.foot-navlinks h3{ + text-align: center; + color: aqua; + font-weight: 600; +} +.foot-navlinks { + text-align: center; +} +.foot-navlinks a{ + color: #ffb780; + font-size: 18px; + padding: 10px; +} +.foot-social { + text-align: center; +} +.foot-social h3{ + color: aqua; + font-weight: 600; +} +.foot-social a{ + font-size: 30px; + color: #ffb780; +} \ No newline at end of file diff --git a/CrossWord/index.html b/CrossWord/index.html index 14e8f0f..54a3c7b 100644 --- a/CrossWord/index.html +++ b/CrossWord/index.html @@ -7,7 +7,7 @@ CrossWord - + @@ -22,6 +22,7 @@
  • About
  • FAQ
  • Contributors
    • +
  • Instructions
    • @@ -184,6 +185,25 @@

    Social Links

    + + + + \ No newline at end of file diff --git a/HangMan Game/index.html b/HangMan Game/index.html index 772e348..cdd391d 100644 --- a/HangMan Game/index.html +++ b/HangMan Game/index.html @@ -1,80 +1,99 @@ - - - - HangMan Game - - + + + + HangMan Game + + + + - -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -

    HangMan Game

    -
    -
    -
    - -
    -
    -
    -
    -
    Incorrect Guesses : 0 / 6
    -
    -
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +

    HangMan Game

    +
    +
    +
    + +
    +
    +
    +
    +
    Incorrect Guesses : 0 / 6
    +
    +
    +
    - - + + -
    -
    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    -
    -
    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors -
    -
    -

    Social Links

    - - - -
    +
    +
    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    +
    +
    +

    Quick Links

    + Home + About + Contact + FAQ + Contributors +
    +
    +

    Social Links

    + + + +
    + + + + + \ No newline at end of file diff --git a/Memory Card game/index.html b/Memory Card game/index.html index 9c94b47..58c8ab6 100644 --- a/Memory Card game/index.html +++ b/Memory Card game/index.html @@ -1,130 +1,189 @@ - - - Memory Card Game - - - - -
    -
      -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • -
    • -
      -
      -
      - card-img -
      -
      • + + + + Memory Card Game + + + + + + + + +
      +
        +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      • +
        +
        +
        + card-img +
        +
        • +
      +
      +
      +
      +

      Solve it!

      +

      + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

      +
      +
      +

      Quick Links

      + Home + About + Contact + FAQ + Contributors +
      +
      +

      Social Links

      + + + +
      + + + - + + \ No newline at end of file diff --git a/Memory Card game/style.css b/Memory Card game/style.css index af22981..8542222 100644 --- a/Memory Card game/style.css +++ b/Memory Card game/style.css @@ -5,15 +5,16 @@ box-sizing: border-box; } body{ - display: flex; align-items: center; justify-content: center; min-height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; + margin: auto; } .wrapper{ + margin: auto; padding: 25px; border-radius: 10px; background: rgb(255, 0, 183); @@ -111,4 +112,82 @@ body{ .card .back-view img{ max-width: 35px; } +} + +.navbar{ + /* margin-top: 25px; */ + display: flex; + justify-content: center; + align-items: center; + justify-content: space-between; + height: 67px; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + border-bottom:1px solid #ffb780; +} +.image img{ + height: 55px; + width: 55px; +} +.left-nav ul{ + display: flex; + justify-content: center; + align-items: center; +} +.left-nav ul li{ + list-style: none; +} +.left-nav ul li a{ + text-decoration: none; + color: #ffb780; + text-align: center; + padding: 14px 20px; + text-decoration: none; + font-size: 1.3rem; +} +.left-nav ul li a:hover{ + text-decoration: underline; +} +.footer-container{ + border-top: 1px solid #ffb780; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + padding: 20px; + /* background: url(Image.png); */ + background-position: center; + line-height: 2.5rem; +} +.foot-head h2{ + text-align: center; + color: aqua; + font-weight: 600; +} +.foot-head p{ + color: #ffb780; + text-align: center; + font-size: 1.20rem; +} +.foot-navlinks h3{ + text-align: center; + color: aqua; + font-weight: 600; +} +.foot-navlinks { + text-align: center; +} +.foot-navlinks a{ + color: #ffb780; + font-size: 18px; + padding: 10px; +} +.foot-social { + text-align: center; +} +.foot-social h3{ + color: aqua; + font-weight: 600; +} +.foot-social a{ + font-size: 30px; + color: #ffb780; } \ No newline at end of file diff --git a/Ping_Pong/index.html b/Ping_Pong/index.html index 808d36c..9ff7ab5 100644 --- a/Ping_Pong/index.html +++ b/Ping_Pong/index.html @@ -1,13 +1,78 @@ + Pong Game + + + +

      Ping Pong

      - - + +
      +
      +

      Solve it!

      +

      + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

      +
      +
      +

      Quick Links

      + Home + About + Contact + FAQ + Contributors +
      +
      +

      Social Links

      + + + +
      + + + + + + \ No newline at end of file diff --git a/Ping_Pong/style.css b/Ping_Pong/style.css index 827b0d4..4b439d4 100644 --- a/Ping_Pong/style.css +++ b/Ping_Pong/style.css @@ -1,7 +1,6 @@ body { margin: 0; padding: 0; - display: flex; /* align-items: center; */ justify-content: center; height: 100vh; @@ -14,16 +13,89 @@ body { #pong{ border: 2px solid #FFF; - position: absolute; - margin :auto; - top:0; - right:0; - left:0; - bottom:0; + margin-left: 20vw; } h1{ color: red; font-size: 50px; text-align: center; z-index: 1; -} \ No newline at end of file +} + +.navbar{ + /* margin-top: 25px; */ + display: flex; + justify-content: center; + align-items: center; + justify-content: space-between; + height: 67px; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + border-bottom:1px solid #ffb780; + } + .image img{ + height: 55px; + width: 55px; + } + .left-nav ul{ + display: flex; + justify-content: center; + align-items: center; + } + .left-nav ul li{ + list-style: none; + } + .left-nav ul li a{ + text-decoration: none; + color: #ffb780; + text-align: center; + padding: 14px 20px; + text-decoration: none; + font-size: 1.3rem; + } + .left-nav ul li a:hover{ + text-decoration: underline; + } + .footer-container{ + border-top: 1px solid #ffb780; + width: 100%; + background:linear-gradient(#1e2b59 , #0f1d34 ); + padding: 20px; + /* background: url(Image.png); */ + background-position: center; + line-height: 2.5rem; + } + .foot-head h2{ + text-align: center; + color: aqua; + font-weight: 600; + } + .foot-head p{ + color: #ffb780; + text-align: center; + font-size: 1.20rem; + } + .foot-navlinks h3{ + text-align: center; + color: aqua; + font-weight: 600; + } + .foot-navlinks { + text-align: center; + } + .foot-navlinks a{ + color: #ffb780; + font-size: 18px; + padding: 10px; + } + .foot-social { + text-align: center; + } + .foot-social h3{ + color: aqua; + font-weight: 600; + } + .foot-social a{ + font-size: 30px; + color: #ffb780; + } \ No newline at end of file diff --git a/Rock Paper Scissor/index.html b/Rock Paper Scissor/index.html index 72715cf..1976584 100644 --- a/Rock Paper Scissor/index.html +++ b/Rock Paper Scissor/index.html @@ -2,87 +2,107 @@ - - - Rock Paper Scissor - - - + + + Rock Paper Scissor + + + - -
      -

      Rock Paper Scissor Game

      -
      -
      -
      - -

      User

      -
      -
      - -

      Cpu

      -
      -
      -

      -
      - - -

      Rock

      -       - - -

      Paper

      -       - - -

      Scissor

      -       -
      -
      +
      +

      +
      + + +

      Rock

      +       + + +

      Paper

      +       + + +

      Scissor

      +       +
      +
      - -
      -
      -

      Solve it!

      -

      - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

      -
      -
      -

      Quick Links

      - Home - About - Contact - FAQ - Contributors -
      -
      -

      Social Links

      - - - -
      + +
      +
      +

      Solve it!

      +

      + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

      +
      +
      +

      Quick Links

      + Home + About + Contact + FAQ + Contributors +
      +
      +

      Social Links

      + + + +
      + + + + \ No newline at end of file diff --git a/Simon Game/index.html b/Simon Game/index.html index 4f585a2..1022ddb 100644 --- a/Simon Game/index.html +++ b/Simon Game/index.html @@ -7,7 +7,7 @@ - + @@ -22,6 +22,7 @@
    • About
    • FAQ
    • Contributors
      • +
    • Instructions
    @@ -77,6 +78,22 @@

    Social Links

    + + + + diff --git a/Snake Game/index.html b/Snake Game/index.html index 47d59f1..71ae75d 100644 --- a/Snake Game/index.html +++ b/Snake Game/index.html @@ -2,68 +2,89 @@ - - - Snake Game - - + + + Snake Game + + + - -
    -

    Snake Game

    -

    Press any Key to Start

    -

    Score: 0

    - -
    - Up - Down - Left - Right - Reset -
    + +
    +

    Snake Game

    +

    Press any Key to Start

    +

    Score: 0

    + +
    + Up + Down + Left + Right + Reset +
    +
    + + +
    +
    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    +
    +
    +

    Quick Links

    + Home + About + Contact + FAQ + Contributors +
    +
    +

    Social Links

    + + + +
    + + - -
    -
    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    -
    -
    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors -
    -
    -

    Social Links

    - - - -
    + \ No newline at end of file diff --git a/Sudoku_Game_8x8/index.html b/Sudoku_Game_8x8/index.html index e07d8e7..5a1cb37 100644 --- a/Sudoku_Game_8x8/index.html +++ b/Sudoku_Game_8x8/index.html @@ -7,6 +7,7 @@ 8x8 Sudoku Solver + @@ -21,6 +22,7 @@
  • About
  • FAQ
  • Contributors
    • +
  • Instructions
    • @@ -83,6 +85,25 @@

    Social Links

    + + + + + \ No newline at end of file diff --git a/Sudoku_Game_9x9/index.html b/Sudoku_Game_9x9/index.html index 86e9554..182d82c 100644 --- a/Sudoku_Game_9x9/index.html +++ b/Sudoku_Game_9x9/index.html @@ -7,7 +7,7 @@ 9x9 Sudoku Solver - + @@ -23,6 +23,7 @@
  • About
  • FAQ
  • Contributors
    • +
  • Instructions
    • @@ -84,6 +85,25 @@

    Social Links

    + + + + \ No newline at end of file diff --git a/Tetris/index.html b/Tetris/index.html index d61e119..4ec9f27 100644 --- a/Tetris/index.html +++ b/Tetris/index.html @@ -1,12 +1,15 @@ + Tetris Game + + @@ -26,34 +30,54 @@
    - - -
    -
    - -
    -
    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    -
    -
    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors -
    -
    -

    Social Links

    - - - + + +
    + +
    +
    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    +
    +
    +

    Quick Links

    + Home + About + Contact + FAQ + Contributors +
    +
    +

    Social Links

    + + + +
    + + + + \ No newline at end of file diff --git a/Tic-Tac-Toe/index.html b/Tic-Tac-Toe/index.html index 06ab830..2c490e7 100644 --- a/Tic-Tac-Toe/index.html +++ b/Tic-Tac-Toe/index.html @@ -1,78 +1,100 @@ + - - - Tic Tac Toe - - + + + Tic Tac Toe + + + + - -
    -
    -

    Welcome to Tic Tac Toe !

    -
    + +
    +
    +

    Welcome to Tic Tac Toe !

    +
    -
    -
    -
    - - - - - - - - - -
    -
    -

    Turn For : X

    - - -
    -
    +
    +
    +
    + + + + + + + + + +
    +
    +

    Turn For : X

    + + +
    +
    - -
    -
    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    -
    -
    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors -
    -
    -

    Social Links

    - - - -
    + +
    +
    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    +
    +
    +

    Quick Links

    + Home + About + Contact + FAQ + Contributors +
    +
    +

    Social Links

    + + + +
    + + + + + \ No newline at end of file diff --git a/UNO/index.html b/UNO/index.html index 773c9b1..d800eec 100644 --- a/UNO/index.html +++ b/UNO/index.html @@ -1,5 +1,6 @@ + @@ -7,25 +8,27 @@ - + UNO Card Game + +
    @@ -88,27 +91,51 @@
    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors +

    Quick Links

    + Home + About + Contact + FAQ + Contributors
    -

    Social Links

    - - - +

    Social Links

    + + + +
    + + + + - + + \ No newline at end of file diff --git a/Word Scramble/index.html b/Word Scramble/index.html index cac2c77..012b4c3 100644 --- a/Word Scramble/index.html +++ b/Word Scramble/index.html @@ -1,79 +1,102 @@ - - - - Word Scramble - - + + + + Word Scramble + + + + - -
    -
    -
    -

    Word Scramble

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - -
    -
    +
    +
    +
    +
    +
    + + +
    +
    +
    - - + + -
    -
    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    -
    -
    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors -
    -
    -

    Social Links

    - - - -
    +
    +
    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    +
    +
    +

    Quick Links

    + Home + About + Contact + FAQ + Contributors +
    +
    +

    Social Links

    + + + +
    + + + + + \ No newline at end of file diff --git a/css_files/checkers_game.css b/css_files/checkers_game.css index d23d0f0..ed4fd1c 100644 --- a/css_files/checkers_game.css +++ b/css_files/checkers_game.css @@ -114,7 +114,7 @@ body { background-color: green; } - /* modal style */ + /* model style */ *{ margin: 0; padding: 0; @@ -138,7 +138,7 @@ body { height: 100vh; } - .modal { + .model { position: fixed; z-index: 1; left: 0; @@ -158,7 +158,7 @@ body { opacity: 1; } - .modal-content { + .model-content { position: fixed; z-index: 2; left: 50%; @@ -168,12 +168,12 @@ body { border-radius: 20px; } - .modal-body { + .model-body { padding: 5em; color: black; } - .modal-body p{ + .model-body p{ text-align: center; font-size: 16px; letter-spacing: 0.1em; @@ -206,7 +206,7 @@ body { transform: rotate(-45deg); } - .modal .btn-container{ + .model .btn-container{ margin-top: 50px; display: flex; align-items: center; @@ -214,7 +214,7 @@ body { gap: 20px; } - .modal .btn{ + .model .btn{ background-color: #4c382e; color: white; padding: 10px 40px; diff --git a/css_files/model.css b/css_files/model.css new file mode 100644 index 0000000..5ae30e6 --- /dev/null +++ b/css_files/model.css @@ -0,0 +1,53 @@ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ + } + + .modal-content { + background-color: #f7f7f7; + margin: 10% auto; /* 10% from the top and centered */ + padding: 20px; + border: 1px solid #ccc; + width: 80%; /* Could be more or less, depending on screen size */ + max-width: 800px; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + /* Close button */ + .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + } + + .close:hover, + .close:focus { + color: black; + text-decoration: none; + cursor: pointer; + } + + /* Responsive iframe */ + .responsive-iframe-container { + position: relative; + overflow: hidden; + padding-top: 56.25%; /* 16:9 aspect ratio */ + } + + .responsive-iframe-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + } \ No newline at end of file diff --git a/html_files/Connect4.html b/html_files/Connect4.html index 74b9342..c439a50 100644 --- a/html_files/Connect4.html +++ b/html_files/Connect4.html @@ -1,5 +1,6 @@ + @@ -9,27 +10,29 @@ - + + +
    @@ -320,7 +323,7 @@

    Player - 1

    - +
    @@ -328,27 +331,46 @@

    Player - 1

    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors +

    Quick Links

    + Home + About + Contact + FAQ + Contributors
    -

    Social Links

    - - - +

    Social Links

    + + + +
    + + + + + \ No newline at end of file diff --git a/html_files/_8_Puzzle_game.html b/html_files/_8_Puzzle_game.html index eed8f85..4ef8e9b 100644 --- a/html_files/_8_Puzzle_game.html +++ b/html_files/_8_Puzzle_game.html @@ -2,59 +2,77 @@ - - - 8-Puzzle Game - - - + + + 8-Puzzle Game + + + - -

    8 Puzzle Game

    -
    + +

    8 Puzzle Game

    +
    +
    +
    + + +
    +
    +

    Solve it!

    +

    + Solve it! is a website that contains solvers for common games like + Sudoku, Nonogram, Crosswords and more! +

    +
    +
    +

    Quick Links

    + Home + About + Contact + FAQ + Contributors +
    +
    +

    Social Links

    + + +
    -
    - - -
    -
    -

    Solve it!

    -

    - Solve it! is a website that contains solvers for common games like - Sudoku, Nonogram, Crosswords and more! -

    -
    -
    -

    Quick Links

    - Home - About - Contact - FAQ - Contributors -
    -
    -

    Social Links

    - - - -
    + + + + \ No newline at end of file diff --git a/html_files/checkers_game.html b/html_files/checkers_game.html index 5dd3f50..563d7a0 100644 --- a/html_files/checkers_game.html +++ b/html_files/checkers_game.html @@ -10,6 +10,7 @@ + @@ -25,6 +26,7 @@
  • About
  • FAQ
  • Contributors
    • +
  • Instructions
    • @@ -47,9 +49,9 @@

    Checker Game

    - @@ -630,7 +630,7 @@

    Game

    Ping Pong

    Game

    Can you beat me ?

    - +
    TRY NOW!
    @@ -643,7 +643,7 @@

    Game

    Rubiks Cube

    Game

    Can You solve it?

    - +
    TRY NOW!
    diff --git a/javascript/checkers_game.js b/javascript/checkers_game.js index 6d5b3aa..d0943d8 100644 --- a/javascript/checkers_game.js +++ b/javascript/checkers_game.js @@ -8,7 +8,7 @@ class Piece { return piece.row === this.row && piece.column === this.column; } } -const modal = document.getElementById("easyModal"); +const model = document.getElementById("easyModal"); let game = document.getElementById("game"); let currentPlayer = 1; let posNewPosition = []; @@ -295,11 +295,11 @@ function displayCounter(black, white) { function modalOpen(black) { document.getElementById("winner").innerHTML = black === 0 ? "White" : "Black"; document.getElementById("loser").innerHTML = black !== 0 ? "White" : "Black"; - modal.classList.add("effect"); + model.classList.add("effect"); } function modalClose() { - modal.classList.remove("effect"); + model.classList.remove("effect"); } function reverse(player) { diff --git a/javascript/instruction.js b/javascript/instruction.js new file mode 100644 index 0000000..3eb05bc --- /dev/null +++ b/javascript/instruction.js @@ -0,0 +1,19 @@ + // Get the modal + var modal = document.getElementById("instructionsModal"); + + // When the user clicks on the Instructions tab, open the modal + function openInstructions() { + modal.style.display = "block"; + } + + // When the user clicks on (x), close the modal + function closeInstructions() { + modal.style.display = "none"; + } + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } + } \ No newline at end of file