From b14913746a29225dc766247f8226c7d24a587a33 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Fri, 9 Aug 2024 11:33:40 +0530 Subject: [PATCH 01/12] testing --- components/navbar.html | 36 ++++ components/render.js | 10 + index.html | 446 +++++++++++++++++------------------------ pages/howtoplay.html | 320 ++++++++++++----------------- 4 files changed, 361 insertions(+), 451 deletions(-) create mode 100644 components/navbar.html create mode 100644 components/render.js diff --git a/components/navbar.html b/components/navbar.html new file mode 100644 index 0000000..2188a1f --- /dev/null +++ b/components/navbar.html @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/components/render.js b/components/render.js new file mode 100644 index 0000000..b66b109 --- /dev/null +++ b/components/render.js @@ -0,0 +1,10 @@ +document.addEventListener("DOMContentLoaded", function () { + var xhr = new XMLHttpRequest(); + xhr.open("GET", "/components/navbar.html", true); + xhr.onreadystatechange = function () { + if (this.readyState !== 4) return; + if (this.status !== 200) return; + document.getElementById("nav-placeholder").innerHTML = this.responseText; + }; + xhr.send(); +}); diff --git a/index.html b/index.html index eb10a89..e99bd18 100644 --- a/index.html +++ b/index.html @@ -1,290 +1,212 @@ - - - - - - - - - - - - - - - - - Dots & Boxes Game - - - + + + + + + + + + + + + + + + + + Dots & Boxes Game + - -
- -
- - - -
-
-
-
-
We'd Love Your Feedback!
- × -
-
- - - - - -
-
-
-
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
    -
    -
    - - - - - + + + + +
    + +
    + + + +
    +
    +
    +
    +
    We'd Love Your Feedback!
    + × +
    +
    + + + + + +
    +
    +
    +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • -
    - - +
    + + + + +
    +
    + + +
    +
    -
    -
    -
    - - -
    -
    - - -
    -
    + +
    - - + +
    -
    - - +
    + +
    - -
    +
    +
    + + +
    +
    + + +
    +
    - + -
    - -

    ▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂

    -

    - Instructions -

    -

    - 1. 🧩 Select the number of rows, columns, and players.
    - 2. 🏆 The player who has the maximum number of boxes on the board is - the winner.
    - 3. 🔄 Players will switch after every turn. But the player who fills - the last box will get one extra chance consecutively. 🎉
    -

    +
    + +

    ▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂

    +

    + Instructions +

    +

    + 1. 🧩 Select the number of rows, columns, and players.
    + 2. 🏆 The player who has the maximum number of boxes on the board is + the winner.
    + 3. 🔄 Players will switch after every turn. But the player who fills + the last box will get one extra chance consecutively. 🎉
    +

    - Read Detailed Instructions -
    -
    -
    -
    - - -
    -
    - -
    - - - - -
    + Read Detailed Instructions +
    +
    +
    +
    + + +
    +
    + +
    + + + +
    +
    -
    - - - -
    +
    + + + +
    -
    - - START - - - -
    +
    + + START + + +
    -
    -
    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing -
    - - Chrome Gaming - +
    +
    + HowToPlay? + TermsOfService + PrivacyPolicy + Licensing
    -
    + -
    - +
    +
    +
    + + - - + - - + \ No newline at end of file diff --git a/pages/howtoplay.html b/pages/howtoplay.html index e53d2e5..12d4ef2 100644 --- a/pages/howtoplay.html +++ b/pages/howtoplay.html @@ -1,201 +1,143 @@ - - - - How to Play - Dot Box - - - - - - - - - - - - - - + + + + How to Play - Dot Box + + + + + + + + + + - - - + + + - + -
    - - -
    -

    ▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂

    -

    How to Play? ⚔️

    -

    - Welcome to the Dots & Boxes Game! Here are the detailed instructions - on how to play: -

    -
      -
    1. - Game Setup: ⚙️
      - - Select the number of rows and columns (between 5 and 30).
      - - Select the number of players (between 2 and 6).
      - - Choose a theme from the available options. -
      2. -
    2. - Objective: 🎯
      - The objective of the game is to complete the maximum number of - boxes.
      The player who completes the most boxes wins 👑 the - game. -
      3. -
    3. - Gameplay: 🎮
      -
      -
      - 🕹️ -

      - Players take turns to draw a line between two adjacent dots. -

      -
      -
      - 🕹️ -

      - A player who completes the fourth side of a box gets to claim - that box and gets another turn. -

      -
      -
      - 🕹️ -

      - The game continues until all the boxes are completed. -

      -
      -
      - 🕹️ -

      - If a player completes a box, they get another turn - immediately. -

      -
      -
      - 🕹️ -

      - The game can be played in rounds, and the player with the - highest score after a set number of rounds wins the game ✨. -

      -
      +
      +

      ▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂

      +

      How to Play? ⚔️

      +

      + Welcome to the Dots & Boxes Game! Here are the detailed instructions + on how to play: +

      +
        +
      1. + Game Setup: ⚙️
        + - Select the number of rows and columns (between 5 and 30).
        + - Select the number of players (between 2 and 6).
        + - Choose a theme from the available options. +
        2. +
      2. + Objective: 🎯
        + The objective of the game is to complete the maximum number of + boxes.
        The player who completes the most boxes wins 👑 the + game. +
        3. +
      3. + Gameplay: 🎮
        +
        +
        + 🕹️ +

        + Players take turns to draw a line between two adjacent dots. +

        +
        +
        + 🕹️ +

        + A player who completes the fourth side of a box gets to claim + that box and gets another turn. +

        +
        +
        + 🕹️ +

        + The game continues until all the boxes are completed. +

        +
        +
        + 🕹️ +

        + If a player completes a box, they get another turn + immediately. +

        +
        +
        + 🕹️ +

        + The game can be played in rounds, and the player with the + highest score after a set number of rounds wins the game ✨. +

        -
        4. - -

        - Here is a demo: -

        -

        Tutorial Video

        -
        -
        -

        - Watch this tutorial to learn how to play Dots & Boxes effectively! -

        -
      4. - Scoring: 🏆
        - - Each completed box is worth one point.
        - - The player with the highest score at the end of the game is the - winner.
        - - In case of a tie, the player who completed the last box wins.
        - - Optionally, a tie can be broken by the number of consecutive boxes - completed. -
        5. -
      5. - Strategies: 🧠
        - - Try to force your opponent into a position where they have to give - you a box.
        - - Plan your moves ahead and avoid creating a situation where your - opponent can complete a box unless you can complete the fourth - side.
        - - Control the board by capturing multiple boxes in one turn by - carefully planning your moves.
        - - Take advantage of the extra turn you get after completing a box to - create more opportunities for yourself.
        - - Look for opportunities to create chains and loops of boxes that - can be captured in one turn.
        - - Be mindful of your opponent's potential moves and try to block - them from completing boxes whenever possible. -
        6. -
      -
      - -
      - -
      +
      4. + +

      + Here is a demo: +

      +

      Tutorial Video

      +
      + +
      +

      + Watch this tutorial to learn how to play Dots & Boxes effectively! +

      +
    4. + Scoring: 🏆
      + - Each completed box is worth one point.
      + - The player with the highest score at the end of the game is the + winner.
      + - In case of a tie, the player who completed the last box wins.
      + - Optionally, a tie can be broken by the number of consecutive boxes + completed. +
      5. +
    5. + Strategies: 🧠
      + - Try to force your opponent into a position where they have to give + you a box.
      + - Plan your moves ahead and avoid creating a situation where your + opponent can complete a box unless you can complete the fourth + side.
      + - Control the board by capturing multiple boxes in one turn by + carefully planning your moves.
      + - Take advantage of the extra turn you get after completing a box to + create more opportunities for yourself.
      + - Look for opportunities to create chains and loops of boxes that + can be captured in one turn.
      + - Be mindful of your opponent's potential moves and try to block + them from completing boxes whenever possible. +
      6. +
    +
    + +
    +
    - - +
    + + + \ No newline at end of file From 0f1e4f88d04ac029c1cebcfb0eccd46904cd4340 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Fri, 9 Aug 2024 11:51:52 +0530 Subject: [PATCH 02/12] Footer pages updated --- components/navbar.html | 2 + index.html | 1 - {components => js}/render.js | 2 +- pages/howtoplay.html | 1 + pages/licensing.html | 109 +++++++------- pages/privacypolicy.html | 274 ++++++++++++++++++----------------- pages/termsofservice.html | 207 +++++++++++++------------- styles/pages.footer.css | 5 +- 8 files changed, 311 insertions(+), 290 deletions(-) rename {components => js}/render.js (85%) diff --git a/components/navbar.html b/components/navbar.html index 2188a1f..95fe8c6 100644 --- a/components/navbar.html +++ b/components/navbar.html @@ -1,3 +1,5 @@ + +
    + + + + \ No newline at end of file diff --git a/pages/termsofservice.html b/pages/termsofservice.html index a16484e..515ce00 100644 --- a/pages/termsofservice.html +++ b/pages/termsofservice.html @@ -1,114 +1,119 @@ - - - - Terms Of Service - Dot Box - - - - - - - + + + + Terms Of Service - Dot Box + + + - - - + + + + - + + + + -
    -
    -
    -

    Terms Of Services

    -
    -
    -
    - Last updated: -

    Introduction

    -

    - These terms and conditions outline the rules and regulations for - the use of Dot Box Website. By accessing this website we assume - you accept these terms and conditions. Do not continue to use Dot - Box if you do not agree to take all of the terms and conditions - stated on this page. -

    -
    -
    -

    Privacy

    -

    - We are committed to protecting your privacy. Please refer to our - Privacy Policy for information on how we collect, use, and - disclose your personal information. -

    -
    + -
    -

    License

    -

    - Unless otherwise stated, Dot Box and/or its licensors own the - intellectual property rights for all material on Dot Box. All - intellectual property rights are reserved. You may access this - from Dot Box for your own personal use subjected to restrictions - set in these terms and conditions. -

    -
    +
    + +
    +
    +

    Terms Of Services

    +
    +
    +
    + Last updated: +

    Introduction

    +

    + These terms and conditions outline the rules and regulations for + the use of Dot Box Website. By accessing this website we assume + you accept these terms and conditions. Do not continue to use Dot + Box if you do not agree to take all of the terms and conditions + stated on this page. +

    +
    -
    -

    User Conduct

    -
    -

    - You must not use this website in any way that causes, or may - cause, damage to the website or impairment of the availability - or accessibility of the website. -

    -

    - You must not use this website in any way which is unlawful, - illegal, fraudulent or harmful, or in connection with any - unlawful, illegal, fraudulent or harmful purpose or activity. -

    -

    - You must not use this website to copy, store, host, transmit, - send, use, publish or distribute any material which consists of - (or is linked to) any spyware, computer virus, Trojan horse, - worm, keystroke logger, rootkit or other malicious computer - software. -

    -
    -
    +
    +

    Privacy

    +

    + We are committed to protecting your privacy. Please refer to our + Privacy Policy for information on how we collect, use, and + disclose your personal information. +

    +
    -
    -

    Changes to These Terms

    -

    - We may update our Terms and Conditions from time to time. We will - notify you of any changes by posting the new Terms and Conditions - on this page. You are advised to review this Terms and Conditions - periodically for any changes. Changes to this Terms and Conditions - are effective when they are posted on this page. -

    -
    +
    +

    License

    +

    + Unless otherwise stated, Dot Box and/or its licensors own the + intellectual property rights for all material on Dot Box. All + intellectual property rights are reserved. You may access this + from Dot Box for your own personal use subjected to restrictions + set in these terms and conditions. +

    +
    -
    -

    Contact Information

    -

    - If you have any questions about these Terms and Conditions, please - contact us at: - dotbox@gmail.com +

    +

    User Conduct

    +
    +

    + You must not use this website in any way that causes, or may + cause, damage to the website or impairment of the availability + or accessibility of the website. +

    +

    + You must not use this website in any way which is unlawful, + illegal, fraudulent or harmful, or in connection with any + unlawful, illegal, fraudulent or harmful purpose or activity.

    -
    -
    -
    - -
    -
    +

    + You must not use this website to copy, store, host, transmit, + send, use, publish or distribute any material which consists of + (or is linked to) any spyware, computer virus, Trojan horse, + worm, keystroke logger, rootkit or other malicious computer + software. +

    +
    + + +
    +

    Changes to These Terms

    +

    + We may update our Terms and Conditions from time to time. We will + notify you of any changes by posting the new Terms and Conditions + on this page. You are advised to review this Terms and Conditions + periodically for any changes. Changes to this Terms and Conditions + are effective when they are posted on this page. +

    +
    + +
    +

    Contact Information

    +

    + If you have any questions about these Terms and Conditions, please + contact us at: + dotbox@gmail.com +

    +
    +
    +
    + +
    - - - +
    + + + + \ No newline at end of file diff --git a/styles/pages.footer.css b/styles/pages.footer.css index d892ff4..9b2dbbd 100644 --- a/styles/pages.footer.css +++ b/styles/pages.footer.css @@ -17,6 +17,7 @@ body { .container { max-width: 900px; margin: 2rem auto; + margin-top: 6rem; padding: 2rem; background-color: rgb(66, 61, 142); border-radius: 20px; @@ -94,10 +95,12 @@ body { 0% { transform: translateY(0px) rotate(-3deg); } + 50% { transform: translateY(-10px) rotate(-3deg); } + 100% { transform: translateY(0px) rotate(-3deg); } -} +} \ No newline at end of file From 9b21ec340572bac6feeb5b692584012c15f1c3ea Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Fri, 9 Aug 2024 12:01:38 +0530 Subject: [PATCH 03/12] navbar pages updated --- index.html | 17 +- js/contributors.js | 69 +++++++ pages/FAQs.html | 318 ++++++++++++---------------- pages/about.html | 448 +++++++++++++++++----------------------- pages/contributors.html | 105 +--------- styles/contributors.css | 14 +- 6 files changed, 413 insertions(+), 558 deletions(-) create mode 100644 js/contributors.js diff --git a/index.html b/index.html index f30e929..0ba8112 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@ +
    + + + \ No newline at end of file diff --git a/pages/licensing.html b/pages/licensing.html index 202aced..e5028ba 100644 --- a/pages/licensing.html +++ b/pages/licensing.html @@ -75,6 +75,8 @@

    MIT License

    + + diff --git a/pages/termsofservice.html b/pages/termsofservice.html index 125d599..3ad7e29 100644 --- a/pages/termsofservice.html +++ b/pages/termsofservice.html @@ -113,6 +113,8 @@

    Contact Information

    + + diff --git a/styles/about.css b/styles/about.css index 84bbea1..4032e06 100644 --- a/styles/about.css +++ b/styles/about.css @@ -145,63 +145,10 @@ ul li { color: #ccc; } - - -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 15px; - position: sticky; - bottom: 0; - z-index: 1000; -} - -.author .fotbar { - display: flex; - gap: -10px; -} - -.author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; -} - ::-webkit-scrollbar { display: none; } -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author a { - color: white !important; -} - -.author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - /* Responsive Styles */ @media screen and (max-width: 769px) { main { @@ -238,49 +185,13 @@ body>main { padding-bottom: 100px; } -.author { - position: fixed; - bottom: 0; -} - -@media screen and (max-width: 1190px) { - .author a { - margin-left: 13px; - } -} - @media screen and (max-width: 1065px) { - .author .fotbar { - display: grid; - } - - .author .fotbar a { - font-size: 14px; - } - body>.about-header>h1 { font-size: 3rem; } } @media screen and (max-width: 550px) { - .author { - padding: 10px; - } - - .author p { - font-size: 16px; - padding: 0; - } - - .author .fotbar a { - font-size: 12px; - } - - .author .social-icons a { - font-size: 15px; - } - body>p { padding: 30px; } @@ -288,10 +199,4 @@ body>main { body>.about-header>h1 { font-size: 2rem; } -} - -@media (max-width: 768px) { - .author { - position: relative !important; - } } \ No newline at end of file diff --git a/styles/contributors.css b/styles/contributors.css index cf6b94d..02981de 100644 --- a/styles/contributors.css +++ b/styles/contributors.css @@ -235,18 +235,6 @@ body { background-position: center; } -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-thumb { - background-color: rgba(255, 217, 121, 0.979); - border-radius: 15px; -} - -::-webkit-scrollbar-track { - background-color: black; -} /* Responsive adjustments */ @media (max-width: 768px) { @@ -268,98 +256,6 @@ body { } } -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 15px; - position: sticky; - bottom: 0; - z-index: 1000; -} - -.author .fotbar { - display: flex; - gap: -22px; -} - -.author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; -} - -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author a { - color: white !important; -} - -.author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - -@media screen and (max-width: 1190px) { - .author a { - font-size: small; - } -} - -@media screen and (max-width: 1065px) { - .author .fotbar { - display: grid; - } - - .author .fotbar a { - font-size: 14px; - } -} - -@media screen and (max-width: 550px) { - .author { - padding: 10px; - } - - .author p { - font-size: 16px; - padding: 0; - } - - .author .fotbar a { - font-size: 12px; - } - - .author .social-icons a { - font-size: 15px; - } -} - -@media (max-width: 768px) { - .author { - position: relative !important; - } -} - .scroll-to-top { bottom: 90px; } \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 665cb62..75552a9 100644 --- a/styles/global.css +++ b/styles/global.css @@ -451,4 +451,108 @@ } +} + + +/* Footer */ + +.author { + width: 100vw; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(to right, #00093c, #2d0b00); + color: #fff; + padding: 15px; + position: sticky; + bottom: 0; + z-index: 1000; +} + +.author .fotbar { + display: flex; + gap: -10px; +} + +.author .fotbar a { + color: white; + text-decoration: none; + padding: 10px; + border-radius: 5px; + font-size: 18px; + background-color: transparent; +} + +.author p { + color: white; + padding: 10px; + margin-right: 10px; + font-size: 20px; + font-weight: 600; +} + +.author .social-icons { + display: flex; + gap: 10px; + margin-right: 20px; +} + +.author a { + color: white !important; +} + +.author .social-icons a { + color: white; + text-decoration: none; + font-size: 20px; +} + +/* Responsive Styles */ + +@media screen and (max-width: 450px) { + .author { + position: fixed; + bottom: 0; + } +} + +@media screen and (max-width: 1190px) { + .author a { + margin-left: 13px; + } +} + +@media screen and (max-width: 1065px) { + .author .fotbar { + display: grid; + } + + .author .fotbar a { + font-size: 14px; + } +} + +@media screen and (max-width: 550px) { + .author { + padding: 10px; + } + + .author p { + font-size: 16px; + padding: 0; + } + + .author .fotbar a { + font-size: 12px; + } + + .author .social-icons a { + font-size: 15px; + } +} + +@media (max-width: 768px) { + .author { + position: relative !important; + } } \ No newline at end of file From 57572d5606bbf4a053bb8ce9e1a5fd3a4f0b7540 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Fri, 9 Aug 2024 17:35:11 +0530 Subject: [PATCH 09/12] Footer fixed --- index.html | 6 +- pages/howtoplay.html | 5 - pages/licensing.html | 5 - pages/privacypolicy.html | 5 - pages/termsofservice.html | 5 - styles/FAQs.css | 163 +++++-------------- styles/contributors.css | 4 - styles/global.css | 30 ++-- styles/index.style.css | 322 ++++++++++++++++---------------------- styles/mainstyle.css | 19 --- styles/pages.footer.css | 3 +- 11 files changed, 190 insertions(+), 377 deletions(-) diff --git a/index.html b/index.html index e9b28a9..e0bfea1 100644 --- a/index.html +++ b/index.html @@ -171,13 +171,13 @@

    -
    + - - + + \ No newline at end of file diff --git a/pages/howtoplay.html b/pages/howtoplay.html index 8a1b0ce..60e456c 100644 --- a/pages/howtoplay.html +++ b/pages/howtoplay.html @@ -131,11 +131,6 @@

    Tutorial Video

    them from completing boxes whenever possible. -
    - -
    diff --git a/pages/licensing.html b/pages/licensing.html index e5028ba..f6f1d77 100644 --- a/pages/licensing.html +++ b/pages/licensing.html @@ -67,11 +67,6 @@

    MIT License

    -
    - -
    diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html index 11811fa..ebaadf4 100644 --- a/pages/privacypolicy.html +++ b/pages/privacypolicy.html @@ -145,11 +145,6 @@

    Contact Us

    -
    - -
    diff --git a/pages/termsofservice.html b/pages/termsofservice.html index 3ad7e29..a9f237b 100644 --- a/pages/termsofservice.html +++ b/pages/termsofservice.html @@ -106,11 +106,6 @@

    Contact Information

    -
    - -
    diff --git a/styles/FAQs.css b/styles/FAQs.css index 3c9d186..12a548e 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -46,30 +46,33 @@ body { .question { font-family: "WorkSans-SemiBold", Arial, sans-serif; padding: 20px; - font-size: 1.25rem; /* 20px */ + font-size: 1.25rem; + /* 20px */ border-bottom: 0.5px solid rgba(243, 218, 171, 0.5); - background: linear-gradient( - 135deg, - #f7f7f7, - #bababa - ); /* Subtle gradient for questions */ - transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; /* Added text-shadow transition */ + background: linear-gradient(135deg, + #f7f7f7, + #bababa); + /* Subtle gradient for questions */ + transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; + /* Added text-shadow transition */ border-radius: 8px; } /* Hover Effect */ .question:hover { - background: linear-gradient( - 15deg, - #cc3f47, - #de6f3d, - #f09f33, - #de6f3d, - #cc3f47 - ); /* Bright gradient on hover */ - transform: scale(1.05); /* Slight zoom effect */ - border-radius: 12px; /* Slight rounding for emphasis */ - text-shadow: #fff 3px 3px 5px; /* Text shadow effect on hover */ + background: linear-gradient(15deg, + #cc3f47, + #de6f3d, + #f09f33, + #de6f3d, + #cc3f47); + /* Bright gradient on hover */ + transform: scale(1.05); + /* Slight zoom effect */ + border-radius: 12px; + /* Slight rounding for emphasis */ + text-shadow: #fff 3px 3px 5px; + /* Text shadow effect on hover */ } /* Summary Styles */ @@ -79,11 +82,13 @@ body { align-items: center; padding: 0.5rem 1rem; transition: color 0.3s; - outline: none; /* Remove default focus outline */ + outline: none; + /* Remove default focus outline */ } .drop:hover { - color: #333; /* Darker text on hover */ + color: #333; + /* Darker text on hover */ } .drop img { @@ -91,7 +96,8 @@ body { } .drop:hover img { - transform: rotate(90deg); /* Rotate icon on hover */ + transform: rotate(90deg); + /* Rotate icon on hover */ } /* Answer Styles */ @@ -104,7 +110,8 @@ body { padding: 10px; border-radius: 5px; transition: all 2s ease-in; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Light shadow for depth */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); + /* Light shadow for depth */ } .question:hover p { @@ -112,57 +119,6 @@ body { text-shadow: #0000003e 0px 3px 3px; } -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 15px; - position: fixed; - bottom: 0; - z-index: 100; -} - -.fotbar { - display: flex; - gap: -22px; -} - -.fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; -} - -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author a { - color: white !important; -} - -.social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - /* Mobile Styles */ @media (max-width: 768px) { .faqcontainer { @@ -171,15 +127,18 @@ body { } h1 { - font-size: 1.5rem; /* Responsive font size */ + font-size: 1.5rem; + /* Responsive font size */ } .question { - font-size: 1.125rem; /* 18px */ + font-size: 1.125rem; + /* 18px */ } .question p { - font-size: 1rem; /* 16px */ + font-size: 1rem; + /* 16px */ } .back-to-home { @@ -192,10 +151,6 @@ body { .back-to-home img { width: 18px; } - - .author { - position: relative !important; - } } @media (max-width: 480px) { @@ -205,15 +160,18 @@ body { } h1 { - font-size: 1.25rem; /* Responsive font size */ + font-size: 1.25rem; + /* Responsive font size */ } .question { - font-size: 1rem; /* 16px */ + font-size: 1rem; + /* 16px */ } .question p { - font-size: 0.875rem; /* 14px */ + font-size: 0.875rem; + /* 14px */ } .back-to-home { @@ -226,41 +184,4 @@ body { .back-to-home img { width: 16px; } -} - -@media screen and (max-width: 1190px) { - .author a { - font-size: small; - color: white; - } -} - -@media screen and (max-width: 1065px) { - .author .fotbar { - display: grid; - } - - .author .fotbar a { - font-size: 14px; - } -} - -@media screen and (max-width: 550px) { - .author { - padding: 10px; - } - - .author p { - font-size: 16px; - padding: 0; - } - - .author .fotbar a { - font-size: 12px; - color: white; - } - - .author .social-icons a { - font-size: 15px; - } -} +} \ No newline at end of file diff --git a/styles/contributors.css b/styles/contributors.css index 02981de..052b15d 100644 --- a/styles/contributors.css +++ b/styles/contributors.css @@ -254,8 +254,4 @@ body { .contributor-card { max-width: 90%; } -} - -.scroll-to-top { - bottom: 90px; } \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 75552a9..a879884 100644 --- a/styles/global.css +++ b/styles/global.css @@ -44,7 +44,7 @@ .scroll-to-top { position: fixed; - bottom: 30px; + bottom: 90px; left: 30px; width: 50px; height: 50px; @@ -77,23 +77,6 @@ transform: translateY(-5px); } -.back-button { - display: inline-block; - padding: 6px 16px; - background-color: rgb(255, 120, 30); - color: white; - text-decoration: none; - font-size: 16px; - border-radius: 5px; - border: none; - transition: background-color 0.3s, transform 0.3s; -} - -.back-button:hover { - background-color: rgb(236, 94, 0); - transform: scale(1.1); -} - /* Loader */ #loader { position: fixed; @@ -464,9 +447,10 @@ background: linear-gradient(to right, #00093c, #2d0b00); color: #fff; padding: 15px; - position: sticky; + position: fixed; bottom: 0; - z-index: 1000; + left: 0; + z-index: 99; } .author .fotbar { @@ -514,6 +498,12 @@ position: fixed; bottom: 0; } + + .author, + .author .fotbar { + max-width: 100vw !important; + flex-wrap: wrap !important; + } } @media screen and (max-width: 1190px) { diff --git a/styles/index.style.css b/styles/index.style.css index 542edb7..836d4ca 100644 --- a/styles/index.style.css +++ b/styles/index.style.css @@ -111,7 +111,7 @@ input:out-of-range { border: 5px solid red; } -input:out-of-range + .error::after { +input:out-of-range+.error::after { content: "Please enter value between 5 and 30"; font-size: 12px; font-style: italic; @@ -119,7 +119,7 @@ input:out-of-range + .error::after { color: hsl(0, 100%, 40%); } -input:out-of-range + .player::after { +input:out-of-range+.player::after { content: "Please enter value between 2 and 6"; font-size: 12px; font-style: italic; @@ -127,84 +127,6 @@ input:out-of-range + .player::after { color: hsl(0, 100%, 40%); } -/* .author { - position: sticky; - bottom: 0; - text-align: center; - padding: .3rem 0; - width: 100%; - font-size: 1.2rem; - background-color: white; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); -} */ -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - /* bottom: 0; */ - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 10px; -} - -/* .author p{ - align-items: center; - display: inline-block; - font-weight: 600; - font-size: 20px; -} */ - -.author .fotbar { - display: flex; - gap: 20px; -} - -.author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - background-color: transparent; -} - -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - -@media screen and (max-width: 1190px) { - .author a { - font-size: small; - } -} - -@media screen and (max-width: 1065px) { - .author .fotbar { - gap: 5px; - } - - .author { - flex-direction: column; - flex-wrap: wrap; - } -} - .difficulty { display: flex; align-items: center; @@ -255,7 +177,7 @@ input:out-of-range + .player::after { opacity: 1; } -.difficulty:hover > :not(.d-type:hover) { +.difficulty:hover> :not(.d-type:hover) { transition: 300ms; filter: blur(1px); transform: scale(0.95, 0.95); @@ -298,82 +220,90 @@ input:out-of-range + .player::after { background-color: grey; } -p,h3,h2{ +p, +h3, +h2 { font-family: 'Press Start 2P', cursive !important; } /* Modal styles */ .modal { -display: none; -position: fixed; -z-index: 1000; -left: 0; -top: 0; -width: 100%; -height: 150%; -overflow: auto; -background-color: rgba(0, 0, 0, 0.4); -backdrop-filter: blur(5px); + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 150%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(5px); } .modal-content { -background-color: white; -margin: 15% auto; -padding: 20px; -border-radius: 10px; -width: 50%; -max-width: 650px; -box-shadow: 0 5px 15px rgba(0,0,0,0.3); -animation: fadeIn 0.5s; + background-color: white; + margin: 15% auto; + padding: 20px; + border-radius: 10px; + width: 50%; + max-width: 650px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + animation: fadeIn 0.5s; } .close { -color: #aaa; -float: right; -font-size: 28px; -font-weight: bold; + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; } .close:hover, .close:focus { -color: black; -text-decoration: none; -cursor: pointer; + color: black; + text-decoration: none; + cursor: pointer; } form { -display: flex; -flex-direction: column; -gap: 15px; + display: flex; + flex-direction: column; + gap: 15px; } .form-group { -display: flex; -flex-direction: column; + display: flex; + flex-direction: column; } .form-group label { -margin-bottom: 5px; -font-weight: bold; -color: white; -text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685); + margin-bottom: 5px; + font-weight: bold; + color: white; + text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685); } + .form-group-1 { -display: flex; + display: flex; } .submitbtn { -display: flex; -justify-content: space-between; + display: flex; + justify-content: space-between; } @keyframes fadeIn { -from { opacity: 0; } -to { opacity: 1; } + from { + opacity: 0; + } + + to { + opacity: 1; + } } @@ -406,7 +336,7 @@ to { opacity: 1; } animation: formAppear 0.5s ease-out; } -.right-background{ +.right-background { font-family: 'Press Start 2P', cursive; } @@ -414,8 +344,9 @@ to { opacity: 1; } from { opacity: 0; transform: scale(0.8); - + } + to { opacity: 1; transform: scale(1); @@ -434,9 +365,9 @@ to { opacity: 1; } font-size: 27px; color: #fffefe; margin: 0; - font-family:Tahoma, Geneva, Verdana, sans-serif; + font-family: Tahoma, Geneva, Verdana, sans-serif; text-align: center; - text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87),2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81); + text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87), 2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81); } .close-button { @@ -445,8 +376,8 @@ to { opacity: 1; } cursor: pointer; transition: transform 0.3s ease; position: relative; - bottom:16px; - left:6px + bottom: 16px; + left: 6px } .close-button:hover { @@ -458,9 +389,9 @@ to { opacity: 1; } /* border-radius: 15px; */ padding: 15px; /* margin-bottom: 0px; */ - max-width:400px; + max-width: 400px; width: 100%; - + /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */ } @@ -495,19 +426,19 @@ to { opacity: 1; } width: 80%; } -#star-2:checked ~ .content .emojis .slideImg { +#star-2:checked~.content .emojis .slideImg { margin-top: -135px; } -#star-3:checked ~ .content .emojis .slideImg { +#star-3:checked~.content .emojis .slideImg { margin-top: -270px; } -#star-4:checked ~ .content .emojis .slideImg { +#star-4:checked~.content .emojis .slideImg { margin-top: -405px; } -#star-5:checked ~ .content .emojis .slideImg { +#star-5:checked~.content .emojis .slideImg { margin-top: -540px; } @@ -528,36 +459,36 @@ to { opacity: 1; } transform: scale(1.2) rotate(15deg); } -#star-1:hover ~ .content .stars .star-1, -#star-1:checked ~ .content .stars .star-1, -#star-2:hover ~ .content .stars .star-1, -#star-2:hover ~ .content .stars .star-2, -#star-2:checked ~ .content .stars .star-1, -#star-2:checked ~ .content .stars .star-2, -#star-3:hover ~ .content .stars .star-1, -#star-3:hover ~ .content .stars .star-2, -#star-3:hover ~ .content .stars .star-3, -#star-3:checked ~ .content .stars .star-1, -#star-3:checked ~ .content .stars .star-2, -#star-3:checked ~ .content .stars .star-3, -#star-4:hover ~ .content .stars .star-1, -#star-4:hover ~ .content .stars .star-2, -#star-4:hover ~ .content .stars .star-3, -#star-4:hover ~ .content .stars .star-4, -#star-4:checked ~ .content .stars .star-1, -#star-4:checked ~ .content .stars .star-2, -#star-4:checked ~ .content .stars .star-3, -#star-4:checked ~ .content .stars .star-4, -#star-5:hover ~ .content .stars .star-1, -#star-5:hover ~ .content .stars .star-2, -#star-5:hover ~ .content .stars .star-3, -#star-5:hover ~ .content .stars .star-4, -#star-5:hover ~ .content .stars .star-5, -#star-5:checked ~ .content .stars .star-1, -#star-5:checked ~ .content .stars .star-2, -#star-5:checked ~ .content .stars .star-3, -#star-5:checked ~ .content .stars .star-4, -#star-5:checked ~ .content .stars .star-5 { +#star-1:hover~.content .stars .star-1, +#star-1:checked~.content .stars .star-1, +#star-2:hover~.content .stars .star-1, +#star-2:hover~.content .stars .star-2, +#star-2:checked~.content .stars .star-1, +#star-2:checked~.content .stars .star-2, +#star-3:hover~.content .stars .star-1, +#star-3:hover~.content .stars .star-2, +#star-3:hover~.content .stars .star-3, +#star-3:checked~.content .stars .star-1, +#star-3:checked~.content .stars .star-2, +#star-3:checked~.content .stars .star-3, +#star-4:hover~.content .stars .star-1, +#star-4:hover~.content .stars .star-2, +#star-4:hover~.content .stars .star-3, +#star-4:hover~.content .stars .star-4, +#star-4:checked~.content .stars .star-1, +#star-4:checked~.content .stars .star-2, +#star-4:checked~.content .stars .star-3, +#star-4:checked~.content .stars .star-4, +#star-5:hover~.content .stars .star-1, +#star-5:hover~.content .stars .star-2, +#star-5:hover~.content .stars .star-3, +#star-5:hover~.content .stars .star-4, +#star-5:hover~.content .stars .star-5, +#star-5:checked~.content .stars .star-1, +#star-5:checked~.content .stars .star-2, +#star-5:checked~.content .stars .star-3, +#star-5:checked~.content .stars .star-4, +#star-5:checked~.content .stars .star-5 { color: gold; text-shadow: 0 0 5px #ff8800; animation: starPulse 0.5s infinite alternate; @@ -567,6 +498,7 @@ to { opacity: 1; } from { transform: scale(1); } + to { transform: scale(1.1); } @@ -588,7 +520,7 @@ to { opacity: 1; } font-size: 18px; font-weight: 600; color: #eeeeee; - font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; text-shadow: 1px 1px 2px rgb(48, 158, 209), 0 0 1em rgb(7, 0, 109), 0 0 0.4em rgb(7, 0, 109); } @@ -609,6 +541,7 @@ input[type="email"] { font-size: 14px; transition: all 0.3s ease; } + textarea { background-color: #fff; border: 2px solid #0168ce; @@ -627,7 +560,8 @@ input[type="email"]:focus { border-color: #00438e; outline: none; } -.buttons { + +.buttons { /* background: linear-gradient(45deg, #4ecdc4, #45b7aa); */ background: linear-gradient(45deg, #cd4e4e, #fe165f); color: #fff; @@ -639,7 +573,7 @@ input[type="email"]:focus { font-size: 16px; font-weight: bold; transition: all 0.3s ease; - + } .buttons:hover { @@ -690,43 +624,43 @@ input[type="email"]:focus { content: "0 out of 5"; } -#star-1:checked ~ .footer .text::before { +#star-1:checked~.footer .text::before { content: "I just hate it 😣"; } -#star-1:checked ~ .footer .numb::before { +#star-1:checked~.footer .numb::before { content: "1 out of 5"; } -#star-2:checked ~ .footer .text::before { +#star-2:checked~.footer .text::before { content: "I don't like it 😓"; } -#star-2:checked ~ .footer .numb::before { +#star-2:checked~.footer .numb::before { content: "2 out of 5"; } -#star-3:checked ~ .footer .text::before { +#star-3:checked~.footer .text::before { content: "This is awesome 😄"; } -#star-3:checked ~ .footer .numb::before { +#star-3:checked~.footer .numb::before { content: "3 out of 5"; } -#star-4:checked ~ .footer .text::before { +#star-4:checked~.footer .text::before { content: "I just like it 😃"; } -#star-4:checked ~ .footer .numb::before { +#star-4:checked~.footer .numb::before { content: "4 out of 5"; } -#star-5:checked ~ .footer .text::before { +#star-5:checked~.footer .text::before { content: "I just love it ❤️"; } -#star-5:checked ~ .footer .numb::before { +#star-5:checked~.footer .numb::before { content: "5 out of 5"; } @@ -743,12 +677,14 @@ input[type="email"]:focus { max-width: 300px; max-height: 600px; } - .emojis li img{ + + .emojis li img { width: 60%; height: 60%; margin-left: 20%; } - .stars{ + + .stars { display: flex; } @@ -769,6 +705,7 @@ input[type="email"]:focus { max-width: 100vw !important; overflow-x: hidden !important; } + .settings { max-width: 100vw !important; } @@ -788,18 +725,21 @@ input[type="email"]:focus { padding-left: 0px !important; margin-right: 0px !important; } - .footer .text, .footer .numb{ + + .footer .text, + .footer .numb { display: flex; margin-right: 15px; font-size: 15px !important; - } - .form-group textarea{ + } + + .form-group textarea { resize: none; - } + } .heading { width: max-content; - font-size: 1.2rem; + font-size: 1.2rem; } button.d-type { @@ -811,7 +751,8 @@ input[type="email"]:focus { width: 100% !important; flex-wrap: wrap !important; } - .button-container button{ + + .button-container button { width: 100% !important; } @@ -819,10 +760,11 @@ input[type="email"]:focus { margin-bottom: 300px !important; } - .author, .author .fotbar { - max-width: 100vw !important; - flex-wrap: wrap !important; + .author { + position: fixed !important; + bottom: 0 !important; } + } .button1 { @@ -866,19 +808,23 @@ input[type="email"]:focus { gap: 30px; top: 25vh; } + body { overflow: visible !important; } + .settings .form { padding: 1rem 6rem; margin: 4px 13rem; left: 15%; position: relative; } + .settings { top: -33px; } } + #copyright { color: white; -} +} \ No newline at end of file diff --git a/styles/mainstyle.css b/styles/mainstyle.css index 85e5cb9..08670e5 100644 --- a/styles/mainstyle.css +++ b/styles/mainstyle.css @@ -26,21 +26,6 @@ a { color: #333; } -.author { - position: fixed; - bottom: 0; - left: 0; - text-align: center; - width: 100%; - color: #000; - background-color: white; - transition: all 0.3s ease; -} - -.author:hover { - color: Black; -} - /* .setting p a{ margin-top: 0.1rem; border-radius: 4px; @@ -53,10 +38,6 @@ a { text-align: center; } */ -.author a { - color: black; -} - .board { background: #fcfcfc; display: grid; diff --git a/styles/pages.footer.css b/styles/pages.footer.css index 9b2dbbd..f31a888 100644 --- a/styles/pages.footer.css +++ b/styles/pages.footer.css @@ -16,8 +16,7 @@ body { .container { max-width: 900px; - margin: 2rem auto; - margin-top: 6rem; + margin: 6rem auto; padding: 2rem; background-color: rgb(66, 61, 142); border-radius: 20px; From 7a98c83ab71bb9fae4880c465304d54f65a85a50 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Fri, 9 Aug 2024 17:50:43 +0530 Subject: [PATCH 10/12] testimonial updated --- js/{navbar.js => nav.footer.js} | 2 +- pages/FAQs.html | 2 +- pages/about.html | 2 +- pages/contributors.html | 2 +- pages/howtoplay.html | 2 +- pages/licensing.html | 2 +- pages/privacypolicy.html | 2 +- pages/termsofservice.html | 2 +- pages/testimonials.html | 76 ++++++++++++++++----------------- 9 files changed, 46 insertions(+), 46 deletions(-) rename js/{navbar.js => nav.footer.js} (98%) diff --git a/js/navbar.js b/js/nav.footer.js similarity index 98% rename from js/navbar.js rename to js/nav.footer.js index 0eba456..c84dc3c 100644 --- a/js/navbar.js +++ b/js/nav.footer.js @@ -19,7 +19,7 @@ const navbar = ` Contributors
  • - Let's Go + Testimonials
    • diff --git a/pages/FAQs.html b/pages/FAQs.html index 28a88a8..aa68738 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -20,7 +20,7 @@ - +