From 4314342c429f6bc779c43d81cfc278b4bf6a4e63 Mon Sep 17 00:00:00 2001 From: Dev 1 Date: Mon, 4 Sep 2023 22:13:50 +0530 Subject: [PATCH] Desgine Modified --- src/pages/drawing/index.astro | 38 ++++++++++++++++++++++----------- src/pages/index.astro | 40 ++++++----------------------------- 2 files changed, 33 insertions(+), 45 deletions(-) diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index de261c2..31456c6 100644 --- a/src/pages/drawing/index.astro +++ b/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.marginRight = '5px'; - colorPicker.style.width = '45px'; - colorPicker.style.height = '48px'; + colorPicker.style.marginTop = '-0px'; + colorPicker.style.marginRight = '15px'; + colorPicker.style.padding = '1px 1px'; + 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 buttonSpacing = 10; + const buttonSize = 50; + 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 = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge + buttonsContainer.style.left = '20px'; + 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 =''; + 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 = ''; 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); diff --git a/src/pages/index.astro b/src/pages/index.astro index fd1e9ca..4896360 100644 --- a/src/pages/index.astro +++ b/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,43 +7,18 @@ import Footer from '../components/Footer.astro';
-

Welcome to Astro

-

- To get started, open the directory src/pages in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above. -

-
    - - - - -
+
+

Beanstalkedu Games

+