From 88d53446265ddf53e016c0843386af50e69c9533 Mon Sep 17 00:00:00 2001 From: Varsani2520 Date: Tue, 6 Aug 2024 10:47:44 +0530 Subject: [PATCH] 404 not found fixed --- package-lock.json | 82 +++++- package.json | 2 + src/App.jsx | 379 ++-------------------------- src/components/Contact/Contact.jsx | 55 ++++ src/components/Footer.jsx | 4 +- src/components/Header.jsx | 51 ++++ src/components/Home.jsx | 327 ++++++++++++++++++++++++ src/components/Team/Contributor.jsx | 53 ++++ 8 files changed, 585 insertions(+), 368 deletions(-) create mode 100644 src/components/Contact/Contact.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Home.jsx create mode 100644 src/components/Team/Contributor.jsx diff --git a/package-lock.json b/package-lock.json index 341a663..3bfa602 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "draw-it-out", "version": "0.0.0", "dependencies": { + "axios": "^1.7.3", "fabric": "^5.3.0", "gapi-script": "^1.2.0", "jspdf": "^2.5.1", @@ -17,6 +18,7 @@ "react-icons": "^5.2.1", "react-joyride": "^2.8.1", "react-modal": "^3.16.1", + "react-router-dom": "^6.26.0", "react-simple-chatbot": "^0.5.0", "rollup": "^4.18.0", "svgcanvas": "^2.5.0" @@ -682,6 +684,14 @@ "node": ">=14" } }, + "node_modules/@remix-run/router": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz", + "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", @@ -1279,8 +1289,7 @@ "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "license": "MIT", - "optional": true + "license": "MIT" }, "node_modules/atob": { "version": "2.1.2", @@ -1344,6 +1353,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz", + "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-plugin-styled-components": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", @@ -1649,7 +1668,6 @@ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", "license": "MIT", - "optional": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -1908,7 +1926,6 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", "license": "MIT", - "optional": true, "engines": { "node": ">=0.4.0" } @@ -2622,6 +2639,25 @@ "dev": true, "license": "ISC" }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "dev": true, @@ -2650,7 +2686,6 @@ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", "license": "MIT", - "optional": true, "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -3802,7 +3837,6 @@ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", "license": "MIT", - "optional": true, "engines": { "node": ">= 0.6" } @@ -3812,7 +3846,6 @@ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", "license": "MIT", - "optional": true, "dependencies": { "mime-db": "1.52.0" }, @@ -4502,6 +4535,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -4707,6 +4745,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz", + "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==", + "dependencies": { + "@remix-run/router": "1.19.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz", + "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==", + "dependencies": { + "@remix-run/router": "1.19.0", + "react-router": "6.26.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-simple-chatbot": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/react-simple-chatbot/-/react-simple-chatbot-0.5.0.tgz", diff --git a/package.json b/package.json index 3ae63a8..2ec4a47 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "start": "npm run dev" }, "dependencies": { + "axios": "^1.7.3", "fabric": "^5.3.0", "gapi-script": "^1.2.0", "jspdf": "^2.5.1", @@ -20,6 +21,7 @@ "react-icons": "^5.2.1", "react-joyride": "^2.8.1", "react-modal": "^3.16.1", + "react-router-dom": "^6.26.0", "react-simple-chatbot": "^0.5.0", "rollup": "^4.18.0", "svgcanvas": "^2.5.0" diff --git a/src/App.jsx b/src/App.jsx index 553ee14..0d59856 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,365 +1,24 @@ -import { useEffect, useRef, useState } from "react"; -import { FaMoon, FaRegEye, FaRegEyeSlash, FaSun } from "react-icons/fa"; -// import download icon -import { FaDownload } from "react-icons/fa"; -import { RxCross1 } from "react-icons/rx"; -import { tourSteps } from "./utils/helpers"; -import BgColorSidePanel from "./components/BgColorSidePanel"; -import Menu from "./components/Menu"; -import { handleUpdates, handleDrawing } from "./utils/canvas"; -import { getCookie, setCookie, eraseCookie } from "./utils/manageCookies.js"; -import { FaBookOpen } from "react-icons/fa"; -import { VscClose } from "react-icons/vsc"; -import { PiPencilSimpleFill } from "react-icons/pi"; -import { BiArea } from "react-icons/bi"; -import { FaFeatherPointed } from "react-icons/fa6"; -import { RiScreenshot2Fill } from "react-icons/ri"; -import { FaFilePdf } from "react-icons/fa"; -import { TbFileTypeSvg } from "react-icons/tb"; -import { PiPlus } from "react-icons/pi"; -import { PiMinus } from "react-icons/pi"; -import Joyride from "react-joyride"; -import { SiBuymeacoffee } from "react-icons/si"; -import Footer from "./components/Footer"; -import useGoogleDrive from './useGoogleDrive'; // Import the custom hook -import logoText from "./assets/images/logoText.png"; +// import route +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import Footer from "./components/Footer"; +import Header from "./components/Header.jsx"; +import Contact from "../src/components/Contact/Contact.jsx"; +import Contributor from '../src/components/Team/Contributor.jsx' +import Home from '../src/components/Home.jsx' function App() { - const canvasRef = useRef(null); - const [isDrawing, setIsDrawing] = useState(true); - const [thickness, setThickness] = useState(4); - const [color, setColor] = useState("#000"); - const [bgColor, setBgColor] = useState("#b7babf"); - const [darkMode, setDarkMode] = useState(null); - const [showMenuAndBgColor, setShowMenuAndBgColor] = useState(true); - const [steps] = useState(tourSteps); - const [modal, setModal] = useState(false); - const [canvasInitialized, setCanvasInitialized] = useState(false); - const [brushStyle, setBrushStyle] = useState("solid"); - const [selectedTool, setSelectedTool] = useState("brush"); - const { signIn, uploadFile } = useGoogleDrive(); // Use the custom hook - const [showTour, setShowTour] = useState(false); - - const style = { - guideline: `p-4 flex text-xs`, - }; - - const showGuidelines = () => { - setModal(!modal); - }; - - const closeModal = () => { - setModal(false); - }; - - const BUY_ME_COFFEE_LINK = "https://buymeacoffee.com/mastermickey"; - - useEffect(() => { - const canvas = canvasRef.current; - - const updateCanvasSize = () => { - const parent = canvas.parentElement; - canvas.width = parent.clientWidth * 0.9; - canvas.height = parent.clientHeight; - }; - - if (canvas && !canvasInitialized) { - setCanvasInitialized(true); - updateCanvasSize(); - window.addEventListener("resize", updateCanvasSize); - handleDrawing(canvas, color, thickness, bgColor, brushStyle); - } else if (canvasInitialized) { - handleUpdates(canvas, color, thickness, bgColor, brushStyle); - } - - return () => { - window.removeEventListener("resize", updateCanvasSize); - }; - }, [bgColor, color, thickness, canvasInitialized, brushStyle]); - - useEffect(() => { - const savedDarkMode = localStorage.getItem('darkMode'); - if (savedDarkMode !== null) { - const isDarkMode = savedDarkMode === 'true'; - setDarkMode(isDarkMode); - if (isDarkMode) { - document.body.classList.add('dark'); - } else { - document.body.classList.remove('dark'); - } - } - - const tourSeen = getCookie('tourSeen'); - if (!tourSeen) { - setShowTour(true); - setCookie('tourSeen', 'true', 365); - } - }, []); - - const toggleDarkMode = () => { - const newDarkMode = !darkMode; - setDarkMode(newDarkMode); - localStorage.setItem('darkMode', newDarkMode); - document.body.classList.toggle("dark"); - }; - - // to save drawing in google drive - const saveDrawing = () => { - const canvas = canvasRef.current; - if (canvas) { - canvas.toBlob((blob) => { - const file = new File([blob], 'drawing.png', { type: 'image/png' }); - signIn().then(() => uploadFile(file)); // Sign in and upload file to Google Drive - }); - } else { - alert('Canvas not found!'); - } - }; - - return ( - <> -
- -
-

- Draw it Out! -

-

- All you need is a canvas to craft your ideas. -

-
- - -
-
-
- {showTour && ( - - )} -
- {/* Buy me a coffee element */} -
-
-
- {/* Drawing Toolbar */} -
- {showMenuAndBgColor && ( - - )} - {/* Toolbar right menu section */} -
- {/* Eye button */} -
{ - setShowMenuAndBgColor((state) => !state); - }} - > - {showMenuAndBgColor ? : } -
- - {/* Theme Changer */} -
- {darkMode ? ( - - ) : ( - - )} -
- - {/* Save Drawing Button */} -
- -
- - {/* Buy me a coffee */} - - - -
-
- - {/* ----- Canvas ------ */} - -
- -
- {showMenuAndBgColor && ( - - )} - -
{ - setBgColor("#B7BABF"); - setBrushStyle("solid"); - setSelectedTool("brush"); - setCanvasInitialized(false); - setIsDrawing(true); - }} - > - -
-

- Made with 💝 by{" "} - - Master Mickey - - ! -

-
-
- -
    -
  • Guidelines
    • -
  • - - Draw your heart out using the pen. -
    • -
  • - - - {" "} - Use a light touch for delicate lines. - -
    • -
  • - - - {" "} - Capture your screen for reference. - -
    • -
  • - {" "} - - Export your work as a PDF for easy sharing. - -
    • -
  • - - - {" "} - Save your artwork as an SVG for scalability. - -
    • -
  • - - Zoom in to work on finer details. -
    • -
  • - - - {" "} - Zoom out for an overview of your drawing. - -
    • -
  • - - - Change your canvas size to preset values. - -
    • -
  • - - View only your canvas. -
    • -
-
-
-
-