Desgine Modified

src/pages/drawing/index.astro

@@ -89,16 +89,22 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.style.top = '10%';
             colorContainer.style.left = '20px';
             colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally
-
             // Create the color picker
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
             colorPicker.value = selectedColor;
             colorPicker.className = 'color-picker';
-            colorPicker.style.marginTop = '-5px';
+            colorPicker.style.marginTop = '-0px';
-            colorPicker.style.marginRight = '5px';
+            colorPicker.style.marginRight = '15px';
-            colorPicker.style.width = '45px';
+            colorPicker.style.padding = '1px 1px';
-            colorPicker.style.height = '48px';
+            colorPicker.style.outline = 'none';
+            colorPicker.style.width = '46px';
+            colorPicker.style.height = '46px';
+            colorPicker.style.border = '3px solid #05b3a4';
+            colorPicker.style.backgroundColor = '#05b3a4';
+            colorPicker.style.borderRadius = '50%';
+            colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
+
 
             colorPicker.addEventListener('input', (event) => {
                 if (!isErasing) {
@@ -110,8 +116,8 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
 
             const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
-            const buttonSize = 40;
+            const buttonSize = 50;
-            const buttonSpacing = 10;
+            const buttonSpacing = 15;
 
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
@@ -130,13 +136,15 @@ import Layout from '../../layouts/Layout.astro';
                 button.style.backgroundColor = color;
                 button.style.width = `${buttonSize}px`;
                 button.style.height = `${buttonSize}px`;
-                button.style.border = 'none';
+                button.style.border = '3px solid #05b3a4';
+                button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                button.style.borderRadius = '50%'
                 button.style.marginRight = `${buttonSpacing}px`;
 
                 button.addEventListener('click', () => {
                     // Remove the mark from the previously selected button, if any
                     if (selectedButton) {
-                        selectedButton.style.border = 'none'; // Remove the border
+                         // Remove the border
                     }
                     // Set the new selected color
                     selectedColor = color;
@@ -160,21 +168,24 @@ import Layout from '../../layouts/Layout.astro';
         // Create a container div for both buttons
         const buttonsContainer = document.createElement('div');
         buttonsContainer.style.position = 'absolute';
-        buttonsContainer.style.top = '15%';
+        buttonsContainer.style.left = '20px';
-        buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
+        buttonsContainer.style.top = '17%';
+        // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
         document.body.appendChild(buttonsContainer);
 
         // Create the Clear button
         const clearButton = document.createElement('button');
         clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+        clearButton.style.border = '3px solid blue';
         // clearButton.textContent = 'Clear';
         clearButton.style.color = 'blue';
         // clearButton.style.color = 'white';
+        clearButton.style.marginRight = '10px';
         clearButton.style.padding = '5px 10px';
         clearButton.style.fontSize = '16px';
         clearButton.style.fontWeight = 'bold';
         clearButton.style.borderRadius = '50%';
-        clearButton.style.boxShadow = '5px 20px 30px #7c4c2390';
+        clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
         clearButton.addEventListener('click', () => {
             clearDrawing();
         });
@@ -184,7 +195,9 @@ import Layout from '../../layouts/Layout.astro';
         // eraserButton.textContent = 'Eraser';
         eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
         eraserButton.style.color = '#7c4c23';
+        eraserButton.style.border = '3px solid #7c4c23';
         // eraserButton.style.color = 'white';
+        eraserButton.style.marginRight = '15px';
         eraserButton.style.padding = '5px 5px';
         eraserButton.style.fontSize = '16px';
         eraserButton.style.fontWeight = 'bold';
@@ -219,6 +232,7 @@ import Layout from '../../layouts/Layout.astro';
         slider.max = '80';
         slider.value = brushSize.toString();
         slider.className = 'slider';
+        // slider.style.width = `${window.innerWidth / 2}px`;
 
         slider.addEventListener('input', (event) => {
             brushSize = parseInt(event.target.value);

src/pages/index.astro

@@ -1,6 +1,5 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
 import MainHeader from '../components/MainHeader.vue';
 import Footer from '../components/Footer.astro';
 ---
@@ -8,42 +7,17 @@ import Footer from '../components/Footer.astro';
 <Layout title="Welcome to Astro.">
 	<MainHeader />
 	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
+		<div>
-		<p class="instructions">
+			<p class="text-center text-white py-96 text-8xl font-bold">Beanstalkedu Games</p>
-			<code>To get started, open the directory src/pages</code> in your project.<br />
+		</div>
-			<code>Code Challenge: Tweak the "Welcome to Astro" message above.</code> 
-		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
 	</main>
 	<Footer />
 </Layout>
 
 <style>
-	main {
+	body{
-		margin: auto;
+		background-color: #ffd3ea;
-		padding: 1.5rem;
+		background-image: linear-gradient(315deg, #ffd3ea 0%, #403020 74%);
-		max-width: 60ch;
 	}		
 	h1 {
 		font-size: 3rem;