From 9ca0baa78afcf065add6544d27ddb748a400d58d Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Sun, 1 Sep 2024 08:50:08 +0530 Subject: [PATCH 01/14] Making Casual Mode Responsive In Mobile and Tablet View --- Casual Mode.html | 5 ----- css/Casual Mode.css | 22 +++++++++++----------- js/Casual Mode.js | 5 ++--- 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/Casual Mode.html b/Casual Mode.html index 83c1e2d..a3ac776 100644 --- a/Casual Mode.html +++ b/Casual Mode.html @@ -51,11 +51,6 @@

This Game Is Not Supported In Portrait Screen

Best Score :

- -
-

-
-

diff --git a/css/Casual Mode.css b/css/Casual Mode.css index e3f5e25..74d07dc 100644 --- a/css/Casual Mode.css +++ b/css/Casual Mode.css @@ -342,7 +342,7 @@ } -@media screen and (min-width : 750px) and (max-width : 1000px) { +/*@media screen and (min-width : 750px) and (max-width : 1000px) { .Controller { margin: -20% 0% 0% 105%; } @@ -386,27 +386,27 @@ margin: 0% 0% 0% 75%; } -} +}*/ -@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) { +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { .Controller { - margin: -25% 0% 0% 150%; + margin: -300px 0 0 1100px; } - .toolBox { - margin: -50% 0% 0% 25%; + .menuBar { + margin: -550px 0 0 50px; } - .scoreBoard { - margin: -60% 0% 0% 150%; + .toolBox { + margin: -200px 0 0 100px; } - .messageBoard { - margin: -60% 0% 0% 150%; + .scoreBoard { + margin: 0px 0 0 1100px; } .alertBox { - margin: -50% 0% 0% 115%; + margin: -450px 0 0 700px; } } \ No newline at end of file diff --git a/js/Casual Mode.js b/js/Casual Mode.js index 061992a..97ad025 100644 --- a/js/Casual Mode.js +++ b/js/Casual Mode.js @@ -956,13 +956,12 @@ function stopVideo() { document.querySelector(".pedals").style.display = "block"; document.querySelector(".menuBar").style.display = "block"; document.querySelector(".scoreBoard").style.display = "block"; - document.querySelector(".messageBoard").style.display = "block"; makeCountDown(); } var aboutVideo = document.getElementById('casualModeVideo'); -aboutVideo.onended = function () { +aboutVideo.onended = () => { stopVideo(); }/* function () { aboutVideo.pause(); document.getElementById("casualModeVideo").style.display = "none"; document.querySelector(".skip").style.display = "none"; @@ -976,7 +975,7 @@ aboutVideo.onended = function () { document.querySelector(".scoreBoard").style.display = "block"; document.querySelector(".messageBoard").style.display = "block"; makeCountDown(); -} +} */ if (parseInt(sessionStorage.casualModeVideoStatus) != 1) { sessionStorage.casualModeVideoStatus = 1; From 9e28eab03913c6da255fe869fc4abc79d684468c Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Mon, 2 Sep 2024 08:47:01 +0530 Subject: [PATCH 02/14] Making Casual Mode Responsive In Small Laptops and Large Devices --- css/Casual Mode.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css/Casual Mode.css b/css/Casual Mode.css index 74d07dc..590ff04 100644 --- a/css/Casual Mode.css +++ b/css/Casual Mode.css @@ -110,7 +110,7 @@ } .Controller { - margin: -20% 0% 0% 83%; + margin: -250px 0 0 1100px; height: 200px; width: 200px; z-index: 1; @@ -145,7 +145,7 @@ } .toolBox { - margin: -13% 0% 0% 3.5%; + margin: -200px 0 0 75px; } .toolBox .pedals button { @@ -165,7 +165,7 @@ } .menuBar { - margin: -37% 0% 0% 0.75%; + margin: -600px 0 0 50px; padding: 5px; height: 180px; width: 180px; @@ -191,7 +191,7 @@ } .scoreBoard { - margin: -8% 0% 0% 80%; + margin: -150px 0 0 1100px; height: 300px; width: 300px; z-index: 1; @@ -219,7 +219,7 @@ .alertBox { display: none; - margin: -30% 0% 0% 47%; + margin: -300px 0 0 700px; width: 400px; height: 250px; background: #061442; @@ -402,7 +402,7 @@ } .scoreBoard { - margin: 0px 0 0 1100px; + margin: 0 0 0 1100px; } .alertBox { From 19b784094c41dcda500c6b84b470c4a2bf93a3c7 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Tue, 3 Sep 2024 09:39:32 +0530 Subject: [PATCH 03/14] Making Racing Mode Responsive In Mobile and Tablet View and Solved Overloading Property Issue --- css/Casual Mode.css | 1 - css/Duration Mode.css | 1 - css/Infinite Drive.css | 1 - css/Racing Mode.css | 22 +++++++++++++--------- css/index.css | 1 - 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/css/Casual Mode.css b/css/Casual Mode.css index 590ff04..ba4619b 100644 --- a/css/Casual Mode.css +++ b/css/Casual Mode.css @@ -279,7 +279,6 @@ position: absolute; top: -2px; left: -2px; - z-index: -1; background-size: 900%; z-index: -1; width: calc(100% + 4px); diff --git a/css/Duration Mode.css b/css/Duration Mode.css index b66cd87..0b91a67 100644 --- a/css/Duration Mode.css +++ b/css/Duration Mode.css @@ -299,7 +299,6 @@ position: absolute; top: -2px; left: -2px; - z-index: -1; background-size: 900%; z-index: -1; width: calc(100% + 4px); diff --git a/css/Infinite Drive.css b/css/Infinite Drive.css index 303fdaf..e4e8170 100644 --- a/css/Infinite Drive.css +++ b/css/Infinite Drive.css @@ -279,7 +279,6 @@ position: absolute; top: -2px; left: -2px; - z-index: -1; background-size: 900%; z-index: -1; width: calc(100% + 4px); diff --git a/css/Racing Mode.css b/css/Racing Mode.css index a6690f6..5ddd7ff 100644 --- a/css/Racing Mode.css +++ b/css/Racing Mode.css @@ -279,7 +279,6 @@ position: absolute; top: -2px; left: -2px; - z-index: -1; background-size: 900%; z-index: -1; width: calc(100% + 4px); @@ -344,7 +343,7 @@ -@media screen and (min-width : 750px) and (max-width : 1000px) { +/*@media screen and (min-width : 750px) and (max-width : 1000px) { .Controller { margin: -20% 0% 0% 105%; } @@ -388,27 +387,32 @@ margin: 0% 0% 0% 75%; } -} +}*/ + +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { + + .menuBar { + margin: -550px 0 0 50px; + } -@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) { .Controller { - margin: -25% 0% 0% 150%; + margin: -300px 0 0 1100px; } .toolBox { - margin: -50% 0% 0% 25%; + margin: -200px 0 0 100px; } .scoreBoard { - margin: -60% 0% 0% 150%; + margin: 0 0 0 1100px; } .messageBoard { - margin: -60% 0% 0% 150%; + margin: -425px 0 0 1100px; } .alertBox { - margin: -50% 0% 0% 115%; + margin: -350px 0 0 700px; } } \ No newline at end of file diff --git a/css/index.css b/css/index.css index d587542..3267e73 100644 --- a/css/index.css +++ b/css/index.css @@ -56,7 +56,6 @@ position: absolute; top: -2px; left: -2px; - z-index: -1; background-size: 900%; z-index: -1; width: calc(100% + 4px); From 70e9f3aa7add8fbf7f8c2f0f2bb9c441fe58943c Mon Sep 17 00:00:00 2001 From: KRISH SHAH Date: Wed, 4 Sep 2024 22:52:38 +0530 Subject: [PATCH 04/14] Create HOW TO PLAY.md --- HOW TO PLAY.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 HOW TO PLAY.md diff --git a/HOW TO PLAY.md b/HOW TO PLAY.md new file mode 100644 index 0000000..2887369 --- /dev/null +++ b/HOW TO PLAY.md @@ -0,0 +1 @@ +About : How to Play Racing Car From 42c6a96ef9a1f176a66ba842331ee4c45f9c7658 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Thu, 5 Sep 2024 22:11:36 +0530 Subject: [PATCH 05/14] Making Duration Mode Mobile and Tablet Responsive --- css/Duration Mode.css | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/css/Duration Mode.css b/css/Duration Mode.css index 0b91a67..037fe97 100644 --- a/css/Duration Mode.css +++ b/css/Duration Mode.css @@ -361,9 +361,7 @@ } - - -@media screen and (min-width : 750px) and (max-width : 1000px) { +/*@media screen and (min-width : 750px) and (max-width : 1000px) { .Controller { margin: -20% 0% 0% 105%; } @@ -442,4 +440,32 @@ margin: -50% 0% 0% 150%; } +}*/ + +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { + + .menuBar { + margin: -550px 0 0 50px; + } + + .Controller { + margin: -300px 0 0 1100px; + } + + .toolBox { + margin: -200px 0 0 100px; + } + + .scoreBoard { + margin: 0 0 0 1100px; + } + + .messageBoard { + margin: -425px 0 0 1100px; + } + + .alertBox { + margin: -350px 0 0 700px; + } + } \ No newline at end of file From 42885a7c8cd7900c92aa1538621e9c2a177e15c1 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Thu, 5 Sep 2024 22:14:26 +0530 Subject: [PATCH 06/14] Adding HOW TO PLAY Guide --- HOW TO PLAY.md | 81 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 80 insertions(+), 1 deletion(-) diff --git a/HOW TO PLAY.md b/HOW TO PLAY.md index 2887369..f3c99fe 100644 --- a/HOW TO PLAY.md +++ b/HOW TO PLAY.md @@ -1 +1,80 @@ -About : How to Play Racing Car +This Is Racing Car game by author INJ KRISH. + +This Game was made in six month for education and learning purpose. + +This Game is also user friendly and liked by users. + +Anyone Can Access This Game and also can share, modify, clone etc... + + +--------------------- +About Mode : +--------------------- + +Casual Mode : It Is Practice Mode For Practicing Game + For Training Of This Game + +Racing Mode : It Gives Feeling Of Playing in F1 Racing Car Match + Can Expireince F1 Racing Car in virtual Space + +Duration Mode : Here We have to collect Increaser Blocks That Increase Our Duration and + Try To Achieve Best Score + +Infinite Drive : For Relaxing and Playing Game at a time and + Also Playing As Long Drive ( It Does not Have End ) + +-------------- +HOW TO PLAY : +--------------- + +'N' Key For Nitro : For Speed Boost + +' ' Key For Redoing Previous Move One More Time + + +At Top Left Side there are three buttons that are + + +First : Back : For Be Redirected to Selecting Car Models(Skin) and Modes + +Second : Play / Pause : For Pause or Play Game as per Last Move + +Third : Music On / Off : For Handling Music Of Game + + +At Bottom Left Side there are two buttons that are + +First : Accecelerator : For Increasing Speed Of Car + +Second : Brake : For Avoiding Car Blast For 1 second + + +At Top Right Side there are three score that are + +First : Score : It shows Current Score Of The Game + +Second : Sessions' Best Score : It Shows Best Score Of This Session + +Third : All Time Best Score : It Shows Best Score Of All Time + + +********** For Duration Mode Only ********** + + +Fourth : Time Stamp and Time Message Is there + +=> At Middle Right Side there is Message That Is Blinking and giving Message About your Gameplay + +At Right Bottom Side four Buttons are there that are + + +First : Left : For Changing Lane To Left Side + +Second : Right : For Changing Lane To Right Side + +Third : Up : For Going Up On Track and little Speed Boost + +Fourth : Down : For Going Down On Track and little Speed Decreases + + +Thanks For Accessing It From 2ea77da6d0135256f6791b0d199931989c7b2257 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Sun, 8 Sep 2024 22:06:39 +0530 Subject: [PATCH 07/14] Modifying Duration Mode For Mobile and Tablet Responsive --- css/Duration Mode.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/Duration Mode.css b/css/Duration Mode.css index 037fe97..a56c89c 100644 --- a/css/Duration Mode.css +++ b/css/Duration Mode.css @@ -465,7 +465,11 @@ } .alertBox { - margin: -350px 0 0 700px; + margin: -10px 0 0 700px; + } + + .timer { + margin: -450px 0 0 1050px; } } \ No newline at end of file From c0df2f80288a00ada93a29202baaac06962c68c9 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Sun, 8 Sep 2024 22:08:55 +0530 Subject: [PATCH 08/14] Modifying Duration Mode For Mobile and Tablet Responsive and Enhancing README file --- README.md | 89 ++++++------------------------------------------------- 1 file changed, 9 insertions(+), 80 deletions(-) diff --git a/README.md b/README.md index f3c99fe..aa8b506 100644 --- a/README.md +++ b/README.md @@ -1,80 +1,9 @@ -This Is Racing Car game by author INJ KRISH. - -This Game was made in six month for education and learning purpose. - -This Game is also user friendly and liked by users. - -Anyone Can Access This Game and also can share, modify, clone etc... - - ---------------------- -About Mode : ---------------------- - -Casual Mode : It Is Practice Mode For Practicing Game - For Training Of This Game - -Racing Mode : It Gives Feeling Of Playing in F1 Racing Car Match - Can Expireince F1 Racing Car in virtual Space - -Duration Mode : Here We have to collect Increaser Blocks That Increase Our Duration and - Try To Achieve Best Score - -Infinite Drive : For Relaxing and Playing Game at a time and - Also Playing As Long Drive ( It Does not Have End ) - --------------- -HOW TO PLAY : ---------------- - -'N' Key For Nitro : For Speed Boost - -' ' Key For Redoing Previous Move One More Time - - -At Top Left Side there are three buttons that are - - -First : Back : For Be Redirected to Selecting Car Models(Skin) and Modes - -Second : Play / Pause : For Pause or Play Game as per Last Move - -Third : Music On / Off : For Handling Music Of Game - - -At Bottom Left Side there are two buttons that are - -First : Accecelerator : For Increasing Speed Of Car - -Second : Brake : For Avoiding Car Blast For 1 second - - -At Top Right Side there are three score that are - -First : Score : It shows Current Score Of The Game - -Second : Sessions' Best Score : It Shows Best Score Of This Session - -Third : All Time Best Score : It Shows Best Score Of All Time - - -********** For Duration Mode Only ********** - - -Fourth : Time Stamp and Time Message Is there - -=> At Middle Right Side there is Message That Is Blinking and giving Message About your Gameplay - -At Right Bottom Side four Buttons are there that are - - -First : Left : For Changing Lane To Left Side - -Second : Right : For Changing Lane To Right Side - -Third : Up : For Going Up On Track and little Speed Boost - -Fourth : Down : For Going Down On Track and little Speed Decreases - - -Thanks For Accessing It + + + + + + + + + \ No newline at end of file From 83c5828c860f5d41721df666dfc34c2ca4f2fcf6 Mon Sep 17 00:00:00 2001 From: KRISH SHAH Date: Sun, 8 Sep 2024 22:10:43 +0530 Subject: [PATCH 09/14] Adding LOGO at README --- README.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index aa8b506..930387d 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,5 @@ - - - - - - - - - \ No newline at end of file + + + + + From 08460c2b22cd03fa6d1f53ac3bf2e4f60be4ed98 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Tue, 10 Sep 2024 16:50:12 +0530 Subject: [PATCH 10/14] Making Infinite Drive Mobile and Tablet Responsive --- css/Infinite Drive.css | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/css/Infinite Drive.css b/css/Infinite Drive.css index e4e8170..27d6339 100644 --- a/css/Infinite Drive.css +++ b/css/Infinite Drive.css @@ -343,7 +343,7 @@ -@media screen and (min-width : 750px) and (max-width : 1000px) { +/*@media screen and (min-width : 750px) and (max-width : 1000px) { .Controller { margin: -20% 0% 0% 105%; } @@ -410,4 +410,32 @@ margin: -50% 0% 0% 115%; } +} */ + +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { + + .menuBar { + margin: -550px 0 0 50px; + } + + .Controller { + margin: -300px 0 0 1100px; + } + + .toolBox { + margin: -200px 0 0 100px; + } + + .scoreBoard { + margin: 0 0 0 1100px; + } + + .messageBoard { + margin: -425px 0 0 1100px; + } + + .alertBox { + margin: -350px 0 0 700px; + } + } \ No newline at end of file From dae47cdfa42b4a5ce90707ab019b9ba7de6b9cdc Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Mon, 16 Sep 2024 11:28:05 +0530 Subject: [PATCH 11/14] Making Casual Mode Resonsive in Laptops and Large Devices --- css/Casual Mode.css | 67 +++++++++++++++++++++++++++++++-------------- 1 file changed, 46 insertions(+), 21 deletions(-) diff --git a/css/Casual Mode.css b/css/Casual Mode.css index ba4619b..01f4a00 100644 --- a/css/Casual Mode.css +++ b/css/Casual Mode.css @@ -341,32 +341,57 @@ } -/*@media screen and (min-width : 750px) and (max-width : 1000px) { + +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { .Controller { - margin: -20% 0% 0% 105%; + margin: -300px 0 0 1100px; + } + + .menuBar { + margin: -550px 0 0 50px; } .toolBox { - margin: -23% 0% 0% 10%; + margin: -200px 0 0 100px; } .scoreBoard { - margin: -35% 0% 0% 100%; + margin: 0 0 0 1100px; } - .messageBoard { - margin: -55% 0% 0% 100%; + .alertBox { + margin: -450px 0 0 700px; + } + +} + +@media screen and (min-width : 1001px) and (max-width : 4320px) { + .Controller { + margin: -300px 0 0 1100px; + } + + .menuBar { + margin: -550px 0 0 50px; + } + + .toolBox { + margin: -200px 0 0 100px; + } + + .scoreBoard { + margin: 0 0 0 1100px; } .alertBox { - margin: 0% 0% 0% 75%; + margin: -615px 0 0 700px; } } -@media screen and (min-width : 550px) and (max-width : 750px) { + +/*@media screen and (min-width : 750px) and (max-width : 1000px) { .Controller { - margin: -40% 0% 0% 120%; + margin: -20% 0% 0% 105%; } .toolBox { @@ -374,7 +399,7 @@ } .scoreBoard { - margin: -50% 0% 0% 120%; + margin: -35% 0% 0% 100%; } .messageBoard { @@ -385,27 +410,27 @@ margin: 0% 0% 0% 75%; } -}*/ +} -@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { +@media screen and (min-width : 550px) and (max-width : 750px) { .Controller { - margin: -300px 0 0 1100px; - } - - .menuBar { - margin: -550px 0 0 50px; + margin: -40% 0% 0% 120%; } .toolBox { - margin: -200px 0 0 100px; + margin: -23% 0% 0% 10%; } .scoreBoard { - margin: 0 0 0 1100px; + margin: -50% 0% 0% 120%; + } + + .messageBoard { + margin: -55% 0% 0% 100%; } .alertBox { - margin: -450px 0 0 700px; + margin: 0% 0% 0% 75%; } -} \ No newline at end of file +}*/ \ No newline at end of file From e19b376ba00eaf049a44bba6d50639453e922b60 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Fri, 20 Sep 2024 21:17:48 +0530 Subject: [PATCH 12/14] Making Racing Mode Resonsive in Laptops and Large Devices --- css/Racing Mode.css | 69 ++++++++++++++++++++++++++++++--------------- 1 file changed, 47 insertions(+), 22 deletions(-) diff --git a/css/Racing Mode.css b/css/Racing Mode.css index 5ddd7ff..e130b19 100644 --- a/css/Racing Mode.css +++ b/css/Racing Mode.css @@ -341,78 +341,103 @@ } +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { + .menuBar { + margin: -550px 0 0 50px; + } -/*@media screen and (min-width : 750px) and (max-width : 1000px) { .Controller { - margin: -20% 0% 0% 105%; + margin: -300px 0 0 1100px; } .toolBox { - margin: -23% 0% 0% 10%; + margin: -200px 0 0 100px; } .scoreBoard { - margin: -35% 0% 0% 100%; + margin: 0 0 0 1100px; } .messageBoard { - margin: -55% 0% 0% 100%; + margin: -425px 0 0 1100px; } .alertBox { - margin: 0% 0% 0% 75%; + margin: -350px 0 0 700px; } } -@media screen and (min-width : 550px) and (max-width : 750px) { +@media screen and (min-width : 1001px) and (max-width : 4320px) { .Controller { - margin: -40% 0% 0% 120%; + margin: -300px 0 0 1100px; + } + + .menuBar { + margin: -550px 0 0 50px; } .toolBox { - margin: -23% 0% 0% 10%; + margin: -200px 0 0 100px; } .scoreBoard { - margin: -50% 0% 0% 120%; + margin: 0 0 0 1100px; } .messageBoard { - margin: -55% 0% 0% 100%; + margin: -425px 0 0 1100px; } .alertBox { - margin: 0% 0% 0% 75%; + margin: -615px 0 0 700px; } -}*/ +} -@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { +/*@media screen and (min-width : 750px) and (max-width : 1000px) { + .Controller { + margin: -20% 0% 0% 105%; + } - .menuBar { - margin: -550px 0 0 50px; + .toolBox { + margin: -23% 0% 0% 10%; + } + + .scoreBoard { + margin: -35% 0% 0% 100%; + } + + .messageBoard { + margin: -55% 0% 0% 100%; + } + + .alertBox { + margin: 0% 0% 0% 75%; } +} + +@media screen and (min-width : 550px) and (max-width : 750px) { .Controller { - margin: -300px 0 0 1100px; + margin: -40% 0% 0% 120%; } .toolBox { - margin: -200px 0 0 100px; + margin: -23% 0% 0% 10%; } .scoreBoard { - margin: 0 0 0 1100px; + margin: -50% 0% 0% 120%; } .messageBoard { - margin: -425px 0 0 1100px; + margin: -55% 0% 0% 100%; } .alertBox { - margin: -350px 0 0 700px; + margin: 0% 0% 0% 75%; } -} \ No newline at end of file +}*/ \ No newline at end of file From 7f1e4cea02bd4ecab02bccc5b26950f3113bdc08 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Sat, 21 Sep 2024 21:14:48 +0530 Subject: [PATCH 13/14] Making Duration Mode Resonsive in Laptops and Large Devices --- css/Duration Mode.css | 91 ++++++++++++++++++++++++++++--------------- 1 file changed, 59 insertions(+), 32 deletions(-) diff --git a/css/Duration Mode.css b/css/Duration Mode.css index a56c89c..12ec47f 100644 --- a/css/Duration Mode.css +++ b/css/Duration Mode.css @@ -361,36 +361,68 @@ } -/*@media screen and (min-width : 750px) and (max-width : 1000px) { +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { + + .menuBar { + margin: -550px 0 0 50px; + } + .Controller { - margin: -20% 0% 0% 105%; + margin: -300px 0 0 1100px; } .toolBox { - margin: -23% 0% 0% 10%; + margin: -200px 0 0 100px; } .scoreBoard { - margin: -35% 0% 0% 100%; + margin: 0 0 0 1100px; } .messageBoard { - margin: -55% 0% 0% 100%; + margin: -425px 0 0 1100px; } .alertBox { - margin: 0% 0% 0% 75%; + margin: -10px 0 0 700px; } .timer { - margin: -15% 0% 0% 100%; + margin: -450px 0 0 1050px; } } -@media screen and (min-width : 550px) and (max-width : 750px) { +@media screen and (min-width : 1001px) and (max-width : 4320px) { .Controller { - margin: -40% 0% 0% 120%; + margin: -300px 0 0 1100px; + } + + .menuBar { + margin: -550px 0 0 50px; + } + + .toolBox { + margin: -200px 0 0 100px; + } + + .timer { + margin: -450px 0 0 1050px; + } + + .scoreBoard { + margin: 0 0 0 1100px; + } + + .alertBox { + margin: -615px 0 0 700px; + } + +} + +/*@media screen and (min-width : 750px) and (max-width : 1000px) { + .Controller { + margin: -20% 0% 0% 105%; } .toolBox { @@ -398,7 +430,7 @@ } .scoreBoard { - margin: -50% 0% 0% 120%; + margin: -35% 0% 0% 100%; } .messageBoard { @@ -410,66 +442,61 @@ } .timer { - margin: -25% 0% 0% 115%; + margin: -15% 0% 0% 100%; } } -@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) { +@media screen and (min-width : 550px) and (max-width : 750px) { .Controller { - margin: -25% 0% 0% 150%; + margin: -40% 0% 0% 120%; } .toolBox { - margin: -50% 0% 0% 25%; + margin: -23% 0% 0% 10%; } .scoreBoard { - margin: -60% 0% 0% 150%; + margin: -50% 0% 0% 120%; } .messageBoard { - margin: -60% 0% 0% 150%; + margin: -55% 0% 0% 100%; } .alertBox { - margin: -50% 0% 0% 115%; + margin: 0% 0% 0% 75%; } .timer { - margin: -50% 0% 0% 150%; + margin: -25% 0% 0% 115%; } -}*/ - -@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { - - .menuBar { - margin: -550px 0 0 50px; - } +} +@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) { .Controller { - margin: -300px 0 0 1100px; + margin: -25% 0% 0% 150%; } .toolBox { - margin: -200px 0 0 100px; + margin: -50% 0% 0% 25%; } .scoreBoard { - margin: 0 0 0 1100px; + margin: -60% 0% 0% 150%; } .messageBoard { - margin: -425px 0 0 1100px; + margin: -60% 0% 0% 150%; } .alertBox { - margin: -10px 0 0 700px; + margin: -50% 0% 0% 115%; } .timer { - margin: -450px 0 0 1050px; + margin: -50% 0% 0% 150%; } -} \ No newline at end of file +}*/ \ No newline at end of file From 1bf54cc98db66f3828cd9c94757ec1b6b075a253 Mon Sep 17 00:00:00 2001 From: inj-krish19 Date: Sun, 22 Sep 2024 19:57:30 +0530 Subject: [PATCH 14/14] Making Infinite Drive Resonsive in Laptops and Large Devices --- css/Infinite Drive.css | 77 +++++++++++++++++++++++++++--------------- 1 file changed, 49 insertions(+), 28 deletions(-) diff --git a/css/Infinite Drive.css b/css/Infinite Drive.css index 27d6339..e54a12d 100644 --- a/css/Infinite Drive.css +++ b/css/Infinite Drive.css @@ -341,34 +341,60 @@ } +@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { + .menuBar { + margin: -550px 0 0 50px; + } -/*@media screen and (min-width : 750px) and (max-width : 1000px) { .Controller { - margin: -20% 0% 0% 105%; + margin: -300px 0 0 1100px; } .toolBox { - margin: -23% 0% 0% 10%; + margin: -200px 0 0 100px; } .scoreBoard { - margin: -35% 0% 0% 100%; + margin: 0 0 0 1100px; } .messageBoard { - margin: -55% 0% 0% 100%; + margin: -425px 0 0 1100px; } .alertBox { - margin: 0% 0% 0% 75%; + margin: -350px 0 0 700px; } } -@media screen and (min-width : 550px) and (max-width : 750px) { +@media screen and (min-width : 1001px) and (max-width : 4320px) { .Controller { - margin: -40% 0% 0% 120%; + margin: -300px 0 0 1100px; + } + + .menuBar { + margin: -550px 0 0 50px; + } + + .toolBox { + margin: -200px 0 0 100px; + } + + .scoreBoard { + margin: 0 0 0 1100px; + } + + .alertBox { + margin: -615px 0 0 700px; + } + +} + +/*@media screen and (min-width : 750px) and (max-width : 1000px) { + .Controller { + margin: -20% 0% 0% 105%; } .toolBox { @@ -376,7 +402,7 @@ } .scoreBoard { - margin: -50% 0% 0% 120%; + margin: -35% 0% 0% 100%; } .messageBoard { @@ -389,53 +415,48 @@ } -@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) { +@media screen and (min-width : 550px) and (max-width : 750px) { .Controller { - margin: -25% 0% 0% 150%; + margin: -40% 0% 0% 120%; } .toolBox { - margin: -50% 0% 0% 25%; + margin: -23% 0% 0% 10%; } .scoreBoard { - margin: -60% 0% 0% 150%; + margin: -50% 0% 0% 120%; } .messageBoard { - margin: -60% 0% 0% 150%; + margin: -55% 0% 0% 100%; } .alertBox { - margin: -50% 0% 0% 115%; + margin: 0% 0% 0% 75%; } -} */ - -@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) { - - .menuBar { - margin: -550px 0 0 50px; - } +} +@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) { .Controller { - margin: -300px 0 0 1100px; + margin: -25% 0% 0% 150%; } .toolBox { - margin: -200px 0 0 100px; + margin: -50% 0% 0% 25%; } .scoreBoard { - margin: 0 0 0 1100px; + margin: -60% 0% 0% 150%; } .messageBoard { - margin: -425px 0 0 1100px; + margin: -60% 0% 0% 150%; } .alertBox { - margin: -350px 0 0 700px; + margin: -50% 0% 0% 115%; } -} \ No newline at end of file +} */ \ No newline at end of file