From 675d8a1728eeb9fd03b221c5af76755d2aa8d948 Mon Sep 17 00:00:00 2001 From: Dev 1 Date: Fri, 8 Sep 2023 11:55:37 +0530 Subject: [PATCH] color pen desgine updated --- src/pages/drawing/index.astro | 49 ++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 0a098ad..f5f8e13 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -110,8 +110,8 @@ import Layout from '../../layouts/Layout.astro'; colorPicker.style.marginBottom = '0px'; colorPicker.style.marginTop = '-0px'; colorPicker.style.marginRight = '15px'; - colorPicker.style.padding = '1px 1px'; - colorPicker.style.outline = 'none'; + // colorPicker.style.padding = '1px 1px'; + // colorPicker.style.outline = 'none'; if (!isMobile) { colorPicker.style.marginBottom = '15px'; colorPicker.style.width = '46px'; @@ -121,7 +121,7 @@ import Layout from '../../layouts/Layout.astro'; colorPicker.style.height = '40px'; } colorPicker.style.border = '3px solid #05b3a4'; - colorPicker.style.borderRadius = '50%'; + colorPicker.style.borderRadius = '20%'; colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390'; colorPicker.addEventListener('input', (event) => { if (!isErasing) { @@ -161,7 +161,7 @@ import Layout from '../../layouts/Layout.astro'; // Create the SVG element with dynamic fill color button.innerHTML = ` - + @@ -180,25 +180,29 @@ import Layout from '../../layouts/Layout.astro'; button.style.boxShadow = '5px 10px 30px #7c4c2390'; button.style.borderRadius = '20%'; - button.style.marginRight = `${buttonSpacing}px`; - button.style.transform = 'none'; - + button.style.marginRight = `${buttonSpacing}px`; button.addEventListener('click', () => { // Remove the border from the previously selected button, if any if (selectedButton) { selectedButton.style.border = 'none'; selectedButton.style.scale = '1'; - button.style.transform = 'none'; + selectedButton.style.transform = 'translateX(0px)'; + selectedButton.style.marginTop = '0px'; + selectedButton.style.marginBottom = '0px'; + } // Set the new selected color selectedColor = color; // Add a border or tick mark to indicate the selected color to the current button - button.style.border = "2px solid"; // Add a black border (you can customize this) + button.style.border = "2px solid"; button.style.borderColor = color; - button.style.scale = '1.2'; + button.style.scale = '1.1'; if(!isMobile){ - button.style.transform = 'translateX(0.75rem)'; + button.style.transform = 'translateX(0.75rem)'; + button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration + button.style.marginTop = '5px'; + button.style.marginBottom = '5px'; } // Update the selectedButton variable to the current button selectedButton = button; @@ -206,6 +210,10 @@ import Layout from '../../layouts/Layout.astro'; // Append the color button to the color buttons container colorButtonsContainer.appendChild(button); }); + const colorPreview = document.createElement('div'); + colorPreview.style.width = '40px'; + colorPreview.style.height = '40px'; + colorPreview.style.backgroundColor = 'blue'; // Append the color buttons container to the color container colorContainer.appendChild(colorButtonsContainer); // Append the color container to the document body @@ -227,7 +235,7 @@ import Layout from '../../layouts/Layout.astro'; // Create the Clear button const clearButton = document.createElement('button'); clearButton.innerHTML =''; - clearButton.style.border = '3px solid blue'; + // clearButton.style.border = '3px solid blue'; clearButton.style.color = 'blue'; clearButton.style.width = 'fit-content'; clearButton.style.marginRight = '10px'; @@ -238,7 +246,7 @@ import Layout from '../../layouts/Layout.astro'; clearButton.style.padding = '5px 10px'; } clearButton.style.fontWeight = 'bold'; - clearButton.style.borderRadius = '50%'; + clearButton.style.borderRadius = '20%'; clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; clearButton.addEventListener('click', () => { clearDrawing(); @@ -246,9 +254,9 @@ import Layout from '../../layouts/Layout.astro'; // Create the Eraser button const eraserButton = document.createElement('button'); // eraserButton.textContent = 'Eraser'; - eraserButton.innerHTML = ''; - eraserButton.style.color = '#7c4c23'; - eraserButton.style.border = '3px solid #7c4c23'; + eraserButton.innerHTML = ' '; + eraserButton.style.color = 'blue'; + // eraserButton.style.border = '3px solid blue'; // eraserButton.style.color = 'white'; eraserButton.style.width = 'fit-content'; eraserButton.style.marginRight = '15px'; @@ -262,10 +270,10 @@ import Layout from '../../layouts/Layout.astro'; eraserButton.style.marginBottom = '15px'; } eraserButton.style.fontWeight = 'bold'; - eraserButton.style.borderRadius = '50%'; + eraserButton.style.borderRadius = '20%'; eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390'; eraserButton.addEventListener('click', () => { - isErasing = !isErasing; + isErasing = !isErasing; if (isErasing) { // eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode eraserButton.style.color = 'red'; @@ -273,11 +281,10 @@ import Layout from '../../layouts/Layout.astro'; } else { // Return to drawing mode // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color - eraserButton.style.color = '#7c4c23'; - eraserButton.style.border = '3px solid #7c4c23'; + eraserButton.style.color = 'blue'; + eraserButton.style.border = 'none'; } }); - // Add the Clear and Eraser buttons to the container buttonsContainer.appendChild(clearButton); buttonsContainer.appendChild(eraserButton);