diff --git a/index.html b/index.html index 8cf84f2..6757350 100644 --- a/index.html +++ b/index.html @@ -1,190 +1,241 @@ + + + + + + + + + + + + + + + + + Dots & Boxes Game + - - - - - + + - - - - - - - - - - - - Dots & Boxes Game - - - - - -
-
🔒 This website is requesting access to autoplay music
- - -
-
- -
- - - -
-
-
-
-
We'd Love Your Feedback!
- × -
-
- - - - - -
-
-
-
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • + +
    + +
    + + + +
    +
    +
    +
    +
    We'd Love Your Feedback!
    + × +
    +
    + + + + + +
    +
    +
    +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
    +
    +
    + + + + +
    -
    - - - - - +
    + +
    -
    - - -
    -
    -
    -
    -
    - - + +
    +
    + + +
    +
    + + +
    - - + +
    -
    -
    - - -
    -
    - - -
    - +
    + + +
    + +
    -
    - + - - - + + - \ No newline at end of file + + diff --git a/styles/index.style.css b/styles/index.style.css index 4d546b2..5e8f3ff 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; @@ -255,7 +255,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,90 +298,82 @@ 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; } } @@ -414,7 +406,7 @@ form { animation: formAppear 0.5s ease-out; } -.right-background { +.right-background{ font-family: 'Press Start 2P', cursive; } @@ -422,9 +414,8 @@ form { from { opacity: 0; transform: scale(0.8); - + } - to { opacity: 1; transform: scale(1); @@ -443,9 +434,9 @@ form { 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 { @@ -454,8 +445,8 @@ form { cursor: pointer; transition: transform 0.3s ease; position: relative; - bottom: 16px; - left: 6px + bottom:16px; + left:6px } .close-button:hover { @@ -467,9 +458,9 @@ form { /* 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); */ } @@ -504,19 +495,19 @@ form { 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; } @@ -537,36 +528,36 @@ form { 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; @@ -576,7 +567,6 @@ form { from { transform: scale(1); } - to { transform: scale(1.1); } @@ -589,6 +579,65 @@ form { box-sizing: border-box; } +body { + font-family: Arial, sans-serif; +} + +/* Footer Styling */ +footer { + background-color: #222; + color: #fff; + padding: 20px 0; +} + +.footer-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; + text-align: center; +} +.social-icons { + display: flex; + justify-content: flex-end; /* Aligns the icons to the right */ + gap: 10px; /* Adds space between the icons */ +} + +.social-icons a { + color: inherit; /* Ensures the icon color matches the current text color */ + text-decoration: none; /* Removes the underline from the links */ +} +#copyright { + margin-top: 20px; /* Adjust the value as needed to move it down */ + text-align: center; /* Center-align the text if desired */ + font-size: 14px; /* Optional: Adjust the font size */ +} + +.footer-links { + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; +} + +.footer-links li { + margin: 10px 0; +} + +.footer-links a { + color: #fff; + text-decoration: none; + font-size: 16px; + transition: color 0.3s ease; +} + +.footer-links a:hover { + color: #ffd700; /* Gold color on hover */ +} + + +} + body { font-family: Arial, sans-serif; @@ -653,6 +702,7 @@ footer { gap: 10px; } + .footer span { font-size: 18px; font-weight: 600; @@ -678,7 +728,6 @@ input[type="email"] { font-size: 14px; transition: all 0.3s ease; } - textarea { background-color: #fff; border: 2px solid #0168ce; @@ -697,8 +746,7 @@ 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; @@ -710,7 +758,7 @@ input[type="email"]:focus { font-size: 16px; font-weight: bold; transition: all 0.3s ease; - + } .buttons:hover { @@ -761,43 +809,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"; } @@ -811,18 +859,7 @@ input[type="email"]:focus { @media (max-width: 480px) { .form-content { width: 90%; - max-width: 300px; - max-height: 600px; - } - - .emojis li img { - width: 60%; - height: 60%; - margin-left: 20%; - } - - .stars { - display: flex; + max-width: 350px; } .sub h5 { @@ -842,7 +879,6 @@ input[type="email"]:focus { max-width: 100vw !important; overflow-x: hidden !important; } - .settings { max-width: 100vw !important; } @@ -863,20 +899,9 @@ input[type="email"]:focus { margin-right: 0px !important; } - .footer .text, - .footer .numb { - display: flex; - margin-right: 15px; - font-size: 15px !important; - } - - .form-group textarea { - resize: none; - } - .heading { width: max-content; - font-size: 1.2rem; + font-size: 1.2rem; } button.d-type { @@ -888,8 +913,7 @@ input[type="email"]:focus { width: 100% !important; flex-wrap: wrap !important; } - - .button-container button { + .button-container button{ width: 100% !important; } @@ -897,8 +921,7 @@ input[type="email"]:focus { margin-bottom: 300px !important; } - .author, - .author .fotbar { + .author, .author .fotbar { max-width: 100vw !important; flex-wrap: wrap !important; } @@ -945,27 +968,24 @@ 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; } + /* Permission box */ #permission { @@ -1012,4 +1032,5 @@ input[type="email"]:focus { .disabled { opacity: 0.75; -} \ No newline at end of file +} + diff --git a/styles/navbar.css b/styles/navbar.css index 57d57af..af75542 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -1,334 +1,92 @@ - -.whole-background { - display: flex; - margin-top: 10%; - flex-direction: row; - gap: 1rem; - background-color: rgba(231, 181, 55, 0.979); - border-radius: 10px; - padding: 10px 20px; - box-shadow: none; - /* Change the upper one to 0px 5px 15px rgba(6, 6, 6, 0.829) */ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background: #000; + color: #fff; } .navbarr { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 20px; - background-color: #333; - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 300; + display: flex; + align-items: center; + background-color: #222; } -.logo a { - text-decoration: none; - font-size: 35px; - font-weight: bolder; + +.navbarr .logo a { + text-decoration: none; + color: #fff; + font-size: 1.5em; } -.nav-links { +.navbarr .nav-links { + display: flex; list-style: none; - /* Removes default bullet points from list items */ - margin: 0; - padding: 0; + justify-content: flex-end; } .nav-links li { - display: inline-flex; - margin-right: 20px; - font-size: 18px; + margin: 0 0px; /* Reduced spacing between nav items */ } -.nav-links a { +.nav-links li a { + padding: 2px 2px; /* Reduced padding inside each link */ text-decoration: none; - /* Removes underline from links */ - color: black; - font-weight: bold; - transition: color 0.3s ease-in-out; + display: flex; + align-items: center; } -.nav-links a:hover { - color: #f39d2c; +.nav-links li a i { + margin-right: 3px; + /* Reduced spacing between icons and text */ } -.logo a:hover { - color: yellow; +.navbarr .hamburger { + display: none; + cursor: pointer; } -button a { - background-color: #fb946f; - text-shadow: none; - color: white; - font-weight: bold; - font-size: 18px; - padding: 5px 10px; - border: none; - border-radius: 5px; - cursor: pointer; +.sticky-button { + position: fixed; + bottom: 10px; + right: 10px; + padding: 10px 20px; + background-color: #444; + color: #fff; + border: none; + cursor: pointer; + border-radius: 5px; } -.navbarr { - width: 100vw; - } - - .navbar-toggler { - background-color: transparent; - border: none; - } - - .navbar-toggler .toggler-icon { - width: 30px; - height: 2px; - background-color: #fff; - display: block; - margin: 5px 0; - position: relative; - -webkit-transition: all 0.3s ease-out 0s; - -moz-transition: all 0.3s ease-out 0s; - -ms-transition: all 0.3s ease-out 0s; - -o-transition: all 0.3s ease-out 0s; - transition: all 0.3s ease-out 0s; - } - - - .nav-links { - letter-spacing: 4px; - display: flex; - justify-content: space-between; - align-items: center; - list-style: none; - width: 50%; - padding: 0; - color: white; - font-family: inherit; - } - - .nav-links li a, - .logo a { - color: white; - } - - button a { - background-color: transparent; - } - - .start { - padding: 10px 5px; - border-radius: 5px; - } - - - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -.overlay { - width: 100%; - height: 100%; +@media (max-width: 768px) { + .navbarr .nav-links { + display: none; + flex-direction: column; + background-color: #222; position: absolute; - z-index: 1; - top: 0; - right: 0; - background-color: rgba(0,0,0,0.5); - opacity: 0; - visibility: hidden; - transition: all 0.3s; -} -.mobile-menu { - top: 0; + top: 50px; /* Adjusted to reduce top space */ right: 0; - width: 70vw; - height: 100vh; - position: fixed; - z-index: 2; - background: rgba(0,0,0,0.9); - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - transform: translateX(100%); - transition: transform 0.3s; -} - -/* Screen more than 991px wide */ -@media ((min-width: 991px)) { - .mobile-menu { - display: none !important; - } - -} - -.mobile-menu a { - /* box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); */ - /* border-top: 3px solid #fff; */ - /* border-bottom: 1px solid #fff; */ width: 100%; - text-align: center; - margin: 1rem 0; - padding: 1rem; - color: #fff; - text-decoration: none; - text-transform: uppercase; - position: relative; -} - -.mobile-menu a:hover { - color: #f39d2c; -} - -/* .mobile-menu a:after { - content: ""; - position: absolute; - bottom: 0; - left: 25%; - width: 0; - height: 2px; - background-color: white; - transition: width 0.3s; -} - -.mobile-menu a:hover:after { - width: 50%; -} - -.mobile-menu .active-link { - background: - linear-gradient(white 0 0) bottom/ 60% 2px no-repeat, - transparent; -} */ -/* .mobile-menu a:hover { - box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); - border-left: 3px solid #fff; - border-right: 3px solid #fff; -} */ -.mobile-menu__trigger { - cursor: pointer; - content: ""; - position: absolute; - z-index: 3; - width: 3rem; - height: 3rem; - border-radius: 50%; - top: 2rem; - left: -5rem; - background: rgba(0,0,0,0.5); - display: flex; - justify-content: center; - align-items: center; - /* -webkit-transform: rotateX(90deg); - transform: rotateX(180deg); */ -} -.mobile-menu__trigger span { - display: block; - width: 50%; - height: 2px; - background: #fff; - position: relative; -} -.mobile-menu__trigger span::before, -.mobile-menu__trigger span::after { - content: ""; - position: absolute; - width: 100%; - height: 2px; - /* left: 0; */ - background: #fff; - transition: all 0.3s; -} -.mobile-menu__trigger span::before { - top: -7px; -} -.mobile-menu__trigger span::after { - top: 7px; -} -.mobile-menu__trigger:hover span::before { - width: 50%; - top: -3px; - left: 0; - transform: rotate(-30deg); -} -.mobile-menu__trigger:hover span::after { - width: 50%; - top: 3px; - left: 0; - transform: rotate(30deg); -} -.mobile-menu_open { - transform: translateX(0%); - box-shadow: 0 0 2rem #000; -} -.mobile-menu_open+.overlay { - visibility: visible; - opacity: 1; -} -.mobile-menu_open .mobile-menu__trigger span::before, -.mobile-menu_open .mobile-menu__trigger span::after { - right: 0; -} -/* .mobile-menu_open .mobile-menu__trigger:hover span::before { - transform: rotate(30deg); - right: 0; -} -.mobile-menu_open .mobile-menu__trigger:hover span::after { - transform: rotate(-30deg); -} */ - -.mobile-menu_open .mobile-menu__trigger:hover span::before { - width: 50%; - top: -3px; - right: 0; - transform: rotate(30deg); - left: auto; -} -.mobile-menu_open .mobile-menu__trigger:hover span::after { - width: 50%; - top: 3px; - right: 0; - transform: rotate(-30deg); - left: auto; -} - -@media screen and (min-width: 990px) { - .navbarr .nav-links { - display: flex !important; + z-index: 1000; } -} -@media screen and (max-width: 990px) { - .hamburger { - display: inline; - z-index: 400; + .navbarr .nav-links li { + text-align: center; + padding: 8px 0; /* Reduced padding in mobile view */ + width: 100%; } .logo a { - font-size: 30px; - } - - .nav-links { - position: absolute; - right: 1rem; - top: 3rem; - background-color: #333; - flex-direction: column; - padding: 10px; - align-items: center; + text-decoration: none; + color: #fff; + font-size: 2em; } - .navbarr .nav-links { - display: none; + .navbarr .hamburger { + display: block; } - .navbar-toggler { - display: inline !important; + .navbarr .nav-links.active { + display: flex; } - -} \ No newline at end of file +}