From 2dd6c7143c2b4447bf8b54720bfc6d233bd4d057 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Thu, 1 Aug 2024 18:02:27 +0530
Subject: [PATCH] fix responsive issue

---
 src/pages/cross/cross_phonics_v2.astro  | 20 ++++++++++----------
 src/pages/cross/v2.astro                |  4 ++--
 src/pages/drawing/drawing_phonics.astro |  8 ++++----
 src/pages/drawing/drawing_writo.astro   |  8 ++++----
 src/pages/drawing/index.astro           | 12 ++++++------
 src/pages/drawing/v2.astro              |  6 +++---
 src/pages/drawing/v3.astro              |  8 ++++----
 7 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
index ed93245..96cb391 100644
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/src/pages/cross/cross_phonics_v2.astro
@@ -24,62 +24,62 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-2 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
                                 <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
                                 <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
                                 <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
                                 <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
                                 <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
                                 <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index 94ab8a5..49c1cf2 100644
--- a/src/pages/cross/v2.astro
+++ b/src/pages/cross/v2.astro
@@ -24,9 +24,9 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
-                        <div id="" class="flex flex-row place-content-between gap-4">
+                        <div id="" class="flex flex-row place-content-between ">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index 275bc21..609b155 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -274,7 +274,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -578,9 +578,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '20px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index 9bd00c9..f73f75d 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -283,7 +283,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -587,9 +587,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '20px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index c6cb4bd..6392202 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -210,9 +210,9 @@ import Layout from '../../layouts/Layout.astro';
                 // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
                 // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
             }
-            const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline');
+            const outlineImage = this.add.image(customWidth / 2, customHeight / 2.2, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.33);
+                outlineImage.setDepth(1).setScale(0.30);
             }else if(isTab){
                 outlineImage.setDepth(1).setScale(0.40);
             } else{
@@ -276,7 +276,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -580,9 +580,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '20px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 6c8b154..73dba88 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -585,9 +585,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.max = '80';
             slider.value = brushSize.toString();
             slider.className = 'slider';
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '30px';
+            slider.style.marginLeft = '0px';
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 22e4bd0..79844fb 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -304,7 +304,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000'];
             const buttonSize = 60;
@@ -615,9 +615,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.max = '80';
             slider.value = brushSize.toString();
             slider.className = 'slider';
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '70px';
-            slider.style.marginLeft = '-30px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '0px';
+            slider.style.marginLeft = '0px';
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);