├── .env
├── public
    ├── app.png
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── static
    │   ├── app.png
    │   ├── app2.png
    │   └── 24.svg
    ├── setupTests.js
    ├── App.test.js
    ├── reportWebVitals.js
    ├── support
    │   ├── Date.js
    │   └── formFields.js
    ├── index.css
    ├── components
    │   ├── Submit.jsx
    │   ├── Header.jsx
    │   ├── Input.jsx
    │   ├── FormOptions.jsx
    │   ├── Nav.jsx
    │   ├── Task.jsx
    │   ├── Search.jsx
    │   ├── Loading.jsx
    │   ├── Alert.jsx
    │   ├── Navbar.jsx
    │   ├── Lane.jsx
    │   ├── ProjectHeader.jsx
    │   ├── Board.jsx
    │   ├── Options.jsx
    │   ├── Footer.jsx
    │   ├── TaskForm.jsx
    │   ├── ProjectForm.jsx
    │   └── SideBar.jsx
    ├── index.js
    ├── pages
    │   ├── NotFound.jsx
    │   ├── Home.jsx
    │   ├── SignIn.jsx
    │   ├── Project.jsx
    │   ├── Projects.jsx
    │   └── SignUp.jsx
    ├── hooks
    │   └── useDataFetching.js
    ├── App.js
    ├── logo.svg
    ├── App.css
    └── context
    │   └── AuthContext.js
├── postcss.config.js
├── .gitignore
├── tailwind.config.js
├── LICENSE.md
├── package.json
└── README.md


/.env:
--------------------------------------------------------------------------------
1 | REACT_APP_BACKEND_URL = "api"


--------------------------------------------------------------------------------
/public/app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MahmoudFettal/simple-project/HEAD/public/app.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MahmoudFettal/simple-project/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MahmoudFettal/simple-project/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MahmoudFettal/simple-project/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/static/app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MahmoudFettal/simple-project/HEAD/src/static/app.png


--------------------------------------------------------------------------------
/src/static/app2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MahmoudFettal/simple-project/HEAD/src/static/app2.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: "class",
 4 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
 5 |   theme: {
 6 |     minWidth: {
 7 |       500: "325px",
 8 |     },
 9 |     extend: {
10 |       colors: {
11 |         notFound: "#F2949C",
12 |       },
13 |       maxWidth: {
14 |         "8xl": "96rem",
15 |       },
16 |     },
17 |   },
18 |   plugins: [require("@tailwindcss/line-clamp")],
19 | };
20 | 


--------------------------------------------------------------------------------
/src/support/Date.js:
--------------------------------------------------------------------------------
 1 | const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 2 | const MONTHS = [
 3 |   "Jan",
 4 |   "Feb",
 5 |   "Mar",
 6 |   "Apr",
 7 |   "May",
 8 |   "Jun",
 9 |   "Jul",
10 |   "Aug",
11 |   "Sep",
12 |   "Oct",
13 |   "Nov",
14 |   "Dec",
15 | ];
16 | 
17 | const date = (day) => {
18 |   return `${DAYS[day.getDay()]} ${day.getDate()} ${
19 |     MONTHS[day.getMonth()]
20 |   } ${day.getFullYear()} - ${day.getHours()}:${day.getMinutes()}`;
21 | };
22 | 
23 | export default date;
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   overflow-x: hidden;
 8 |   width: 100vw;
 9 |   font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
10 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
11 |     sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | code {
17 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
18 |     monospace;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/Submit.jsx:
--------------------------------------------------------------------------------
 1 | function Submit({ type = "Button", action = "submit", text }) {
 2 |   return (
 3 |     <>
 4 |       {type === "Button" ? (
 5 |         <input
 6 |           type={action}
 7 |           value={text}
 8 |           className="autofill:text-gray-900 group relative w-full flex justify-center py-2 px-4 border border-transparent font-semibold rounded-md text-white dark:text-gray-900 dark:bg-white dark:hover:bg-gray-200 bg-gray-900 hover:bg-gray-700 focus:outline-none"
 9 |         />
10 |       ) : (
11 |         <></>
12 |       )}
13 |     </>
14 |   );
15 | }
16 | 
17 | export default Submit;
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import { BrowserRouter } from 'react-router-dom';
 4 | import './index.css';
 5 | import App from './App';
 6 | import reportWebVitals from './reportWebVitals';
 7 | 
 8 | const root = ReactDOM.createRoot(document.getElementById('root'));
 9 | root.render(
10 |   <BrowserRouter>
11 |     <App />
12 |   </BrowserRouter>
13 | );
14 | 
15 | // If you want to start measuring performance in your app, pass a function
16 | // to log results (for example: reportWebVitals(console.log))
17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
18 | reportWebVitals();
19 | 


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | function Header({ heading, paragraph, linkName, linkUrl = "#" }) {
 5 |   return (
 6 |     <div className="mb-10">
 7 |       <Link to="/">
 8 |         <h1 className="text-center font-extralight text-4xl text-gray-500">
 9 |           Simple<span className="font-bold">Project</span>{" "}
10 |         </h1>
11 |       </Link>
12 |       <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
13 |         {heading}
14 |       </h2>
15 |       <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
16 |         {paragraph}{" "}
17 |         <Link to={linkUrl} className="font-medium dark:text-white">
18 |           {linkName}
19 |         </Link>
20 |       </p>
21 |     </div>
22 |   );
23 | }
24 | 
25 | export default Header;
26 | 


--------------------------------------------------------------------------------
/src/pages/NotFound.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import notFound from "../static/24.svg";
 3 | import { Link } from "react-router-dom";
 4 | 
 5 | function NotFound() {
 6 |   return (
 7 |     <div className="grid place-items-center h-screen dark:bg-gray-900 ">
 8 |       <div className="grid justify-items-center">
 9 |         <h1 className="text-center text-xl md:text-4xl font-semibold text-notFound">
10 |           Page <span className="text-gray-900 dark:text-white">not found!</span>
11 |         </h1>
12 |         <img src={notFound} className="h-96 w-auto spin" alt="not found" />
13 |         <button className="relative z-50 text-md md:text-xl font-semibold text-white bg-gray-700 hover:bg-gray-600 w-fit px-5 py-2.5 rounded-md">
14 |           <Link to="/">Return to home</Link>
15 |         </button>
16 |       </div>
17 |     </div>
18 |   );
19 | }
20 | 
21 | export default NotFound;
22 | 


--------------------------------------------------------------------------------
/src/components/Input.jsx:
--------------------------------------------------------------------------------
 1 | const fixedInputClass =
 2 |   "dark:text-white appearance-none relative block w-full py-2.5 bg-transparent placeholder-gray-500 text-gray-900 focus:outline-none border-b-2 border-b-gray-900 dark:border-b-white focus:z-10 text-lg font-semibold sm:text-sm";
 3 | 
 4 | export default function Input({
 5 |   handleChange,
 6 |   value,
 7 |   labelText,
 8 |   labelFor,
 9 |   id,
10 |   name,
11 |   type,
12 |   isRequired = false,
13 |   placeholder,
14 |   customClass,
15 | }) {
16 |   return (
17 |     <div className="my-5">
18 |       <label htmlFor={labelFor} className="sr-only">
19 |         {labelText}
20 |       </label>
21 |       <input
22 |         onChange={handleChange}
23 |         value={value}
24 |         id={id}
25 |         name={name}
26 |         type={type}
27 |         required={isRequired}
28 |         className={fixedInputClass + customClass}
29 |         placeholder={placeholder}
30 |       />
31 |     </div>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/FormOptions.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function FormOptions() {
 4 |   return (
 5 |     <div>
 6 |       {" "}
 7 |       <div className="flex items-center justify-between ">
 8 |         <div className="flex items-center">
 9 |           <input
10 |             id="remember"
11 |             name="remember"
12 |             type="checkbox"
13 |             className="h-4 w-4 text-cyan-600 focus:ring-cyan-500 border-gray-300 rounded"
14 |           />
15 |           <label
16 |             htmlFor="remember"
17 |             className="ml-2 block text-sm text-gray-900 dark:text-white"
18 |           >
19 |             Remember me
20 |           </label>
21 |         </div>
22 | 
23 |         <div className="text-sm">
24 |           <p className="font-medium text-gray-700 dark:text-gray-400">
25 |             Forgot your password?
26 |           </p>
27 |         </div>
28 |       </div>
29 |     </div>
30 |   );
31 | }
32 | 
33 | export default FormOptions;
34 | 


--------------------------------------------------------------------------------
/src/hooks/useDataFetching.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useContext } from "react";
 2 | import AuthContext from "../context/AuthContext";
 3 | import axios from "axios";
 4 | 
 5 | const baseURL = process.env.REACT_APP_BACKEND_URL;
 6 | 
 7 | function useDataFetching(dataSource) {
 8 |   const { token, badge } = useContext(AuthContext);
 9 |   const [loading, setLoading] = useState(false);
10 |   const [data, setData] = useState([]);
11 |   const [error, setError] = useState("");
12 | 
13 |   useEffect(() => {
14 |     axios
15 |       .get(`${baseURL}/${dataSource}/`, {
16 |         headers: {
17 |           "Content-Type": "application/json",
18 |           Authorization: "Bearer " + String(token.access),
19 |         },
20 |       })
21 |       .then((response) => {
22 |         setData(response.data);
23 |         setLoading(false);
24 |       })
25 |       .catch((response) => {
26 |         setLoading(false);
27 |         setError(response.text);
28 |       });
29 |   }, [dataSource, badge]);
30 | 
31 |   return [loading, error, data];
32 | }
33 | 
34 | export default useDataFetching;
35 | 


--------------------------------------------------------------------------------
/src/components/Nav.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { MdOutlineDarkMode } from "react-icons/md";
 3 | import { Link } from "react-router-dom";
 4 | 
 5 | function Nav({}) {
 6 |   const dark = () => {
 7 |     if (localStorage.theme === "light") {
 8 |       document.documentElement.classList.add("dark");
 9 |       localStorage.theme = "dark";
10 |     } else {
11 |       document.documentElement.classList.remove("dark");
12 |       localStorage.theme = "light";
13 |     }
14 |   };
15 | 
16 |   return (
17 |     <nav className="flex justify-between items-center w-full max-w-7xl px-3 py-3 border-b-2 mx-10 border-gray-700 text-gray-200">
18 |       <Link to="/">
19 |         <h1 className="text-center font-extralight text-2xl text-white">
20 |           Simple<span className="font-bold">Project</span>{" "}
21 |         </h1>
22 |       </Link>
23 |       <Link to="/signin">
24 |         <div className="py-2 px-5 bg-gray-200 hover:bg-white focus:bg-white rounded-lg font-bold">
25 |           <p className="text-md text-gray-900">Sign In</p>
26 |         </div>
27 |       </Link>
28 |     </nav>
29 |   );
30 | }
31 | 
32 | export default Nav;
33 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Mahmoud Fettal
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/Task.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import Options from "./Options";
 3 | import TaskForm from "./TaskForm";
 4 | import date from "../support/Date";
 5 | 
 6 | function Task({ id, title, body, created, onDragStart, project }) {
 7 |   const [edit, setEdit] = useState(false);
 8 | 
 9 |   return (
10 |     <>
11 |       {edit ? (
12 |         <TaskForm
13 |           edit={() => {
14 |             setEdit(false);
15 |           }}
16 |           editBody={body}
17 |           editTitle={title}
18 |           taskId={id}
19 |           project={project}
20 |         />
21 |       ) : (
22 |         <div
23 |           className="bg-white p-4 rounded-md dark:bg-gray-900"
24 |           draggable
25 |           onDragStart={(e) => onDragStart(e, id)}
26 |         >
27 |           <div className="flex justify-between items-center">
28 |             <div>
29 |               <h3 className="text-md font-semibold dark:text-white">{title}</h3>
30 |               <p className="text-xs text-gray-400 mb-2 dark:text-gray-500">
31 |                 {date(new Date(created))}
32 |               </p>
33 |             </div>
34 |             <Options taskId={id} edit={() => setEdit(true)} />
35 |           </div>
36 |           <p className="text-sm text-gray-600 dark:text-gray-200">{body}</p>
37 |         </div>
38 |       )}
39 |     </>
40 |   );
41 | }
42 | 
43 | export default Task;
44 | 


--------------------------------------------------------------------------------
/src/components/Search.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Search() {
 4 |   return (
 5 |     <div className="relative">
 6 |       <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
 7 |         <svg
 8 |           aria-hidden="true"
 9 |           className="w-5 h-5 text-gray-500 dark:text-gray-400"
10 |           fill="none"
11 |           stroke="currentColor"
12 |           viewBox="0 0 24 24"
13 |           xmlns="http://www.w3.org/2000/svg"
14 |         >
15 |           <path
16 |             strokeLinecap="round"
17 |             strokeLinejoin="round"
18 |             strokeWidth="2"
19 |             d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
20 |           ></path>
21 |         </svg>
22 |       </div>
23 |       <input
24 |         type="search"
25 |         id="default-search"
26 |         className="block p-2 pl-10 w-full text-sm text-gray-900 outline-gray-200 bg-gray-50 rounded-lg border border-gray-200"
27 |         placeholder="Search for tasks..."
28 |         required
29 |       />
30 |       <button
31 |         type="submit"
32 |         className="hidden text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2"
33 |       >
34 |         Search
35 |       </button>
36 |     </div>
37 |   );
38 | }
39 | 
40 | export default Search;
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "project-board",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.10.0",
 7 |     "@emotion/styled": "^11.10.0",
 8 |     "@mui/material": "^5.9.3",
 9 |     "@tailwindcss/line-clamp": "^0.4.0",
10 |     "@testing-library/jest-dom": "^5.16.4",
11 |     "@testing-library/react": "^13.3.0",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "axios": "^0.27.2",
14 |     "jwt-decode": "^3.1.2",
15 |     "react": "^18.2.0",
16 |     "react-dom": "^18.2.0",
17 |     "react-icons": "^4.4.0",
18 |     "react-router-dom": "^6.3.0",
19 |     "react-scripts": "5.0.1",
20 |     "web-vitals": "^2.1.4"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   },
46 |   "devDependencies": {
47 |     "autoprefixer": "^10.4.7",
48 |     "postcss": "^8.4.14",
49 |     "tailwindcss": "^3.1.6"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/Loading.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Loading() {
 4 |   return (
 5 |     <div>
 6 |       {" "}
 7 |       <svg
 8 |         className="inline mr-2 w-36 h-36 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
 9 |         viewBox="0 0 100 101"
10 |         fill="none"
11 |         xmlns="http://www.w3.org/2000/svg"
12 |       >
13 |         <path
14 |           d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
15 |           fill="currentColor"
16 |         />
17 |         <path
18 |           d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
19 |           fill="currentFill"
20 |         />
21 |       </svg>
22 |       <span className="sr-only">Loading...</span>
23 |     </div>
24 |   );
25 | }
26 | 
27 | export default Loading;
28 | 


--------------------------------------------------------------------------------
/src/components/Alert.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   MdOutlineError,
 4 |   MdDangerous,
 5 |   MdCheckCircle,
 6 |   MdClose,
 7 | } from "react-icons/md";
 8 | 
 9 | const COLORS = {
10 |   warning: {
11 |     main: "border-orange-200 bg-orange-100",
12 |     bg: "bg-orange-500",
13 |     text: "text-orange-300 hover:text-orange-700",
14 |   },
15 |   danger: {
16 |     main: "border-red-200 bg-red-100",
17 |     bg: "bg-red-500",
18 |     text: "text-red-300 hover:text-red-700",
19 |   },
20 |   success: {
21 |     main: "border-green-200 bg-green-100",
22 |     bg: "bg-green-500",
23 |     text: "text-green-300 hover:text-green-700",
24 |   },
25 | };
26 | 
27 | const ICONS = {
28 |   warning: <MdOutlineError className="text-white text-2xl" />,
29 |   danger: <MdDangerous className="text-white text-2xl" />,
30 |   success: <MdCheckCircle className="text-white text-2xl" />,
31 | };
32 | 
33 | function Alert({ type, title, message, close }) {
34 |   return (
35 |     <div className="absolute z-50 w-screen bottom-5 flex justify-center">
36 |       <div
37 |         className={
38 |           "grid border-2 p-2.5 w-96 rounded-2xl items-center gap-2 " +
39 |           COLORS[type].main
40 |         }
41 |         style={{ gridTemplateColumns: "auto 1fr auto" }}
42 |       >
43 |         <div
44 |           className={
45 |             "h-fit flex place-items-center p-1.5 rounded-full " +
46 |             COLORS[type].bg
47 |           }
48 |         >
49 |           {ICONS[type]}
50 |         </div>
51 |         <div>
52 |           <h5 className="text-sm font-semibold">{title}</h5>
53 |           <p className="text-xs text-gray-600">{message}</p>
54 |         </div>
55 |         <MdClose className={"text-2xl " + COLORS[type].text} onClick={close} />
56 |       </div>
57 |     </div>
58 |   );
59 | }
60 | 
61 | export default Alert;
62 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { MdOutlineDarkMode, MdLogout, MdViewStream } from "react-icons/md";
 3 | import AuthContext from "../context/AuthContext";
 4 | import { Link } from "react-router-dom";
 5 | 
 6 | function Navbar({ sidebar }) {
 7 |   const { user, logoutUser } = useContext(AuthContext);
 8 | 
 9 |   const dark = () => {
10 |     if (localStorage.theme === "light") {
11 |       document.documentElement.classList.add("dark");
12 |       localStorage.theme = "dark";
13 |     } else {
14 |       document.documentElement.classList.remove("dark");
15 |       localStorage.theme = "light";
16 |     }
17 |   };
18 | 
19 |   return ( 
20 |     <nav className="flex justify-between items-center w-full max-w-8xl px-10 py-5 border-b-2 border-gray-100 dark:border-gray-700 dark:text-gray-200">
21 |       <button
22 |         onClick={sidebar}
23 |         className="flex items-center gap-2.5 dark:text-white"
24 |       >
25 |         <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-lg w-fit h-fit">
26 |           <MdViewStream className="text-2xl dark:text-white" />
27 |         </div>
28 |         <Link to="/projects" className="text-md font-semibold">
29 |           Project Board
30 |         </Link>
31 |       </button>
32 |       <div className="flex items-center justify-self-end">
33 |         <MdOutlineDarkMode
34 |           onClick={dark}
35 |           className="text-gray-500 hover:text-gray-700 dark:text-gray-200 dark:hover:text-white"
36 |         />
37 | 
38 |         <span className="mx-2.5">|</span>
39 |         <button
40 |           onClick={logoutUser}
41 |           className="flex items-center gap-1.5 hover:text-gray-800 dark:hover:text-white"
42 |         >
43 |           <MdLogout />
44 |         </button>
45 |       </div>
46 |     </nav>
47 |   );
48 | }
49 | 
50 | export default Navbar;
51 | 


--------------------------------------------------------------------------------
/src/components/Lane.jsx:
--------------------------------------------------------------------------------
 1 | import Task from "./Task";
 2 | import TaskForm from "./TaskForm";
 3 | import { useState } from "react";
 4 | 
 5 | function Lane({
 6 |   laneId,
 7 |   title,
 8 |   loading,
 9 |   error,
10 |   tasks,
11 |   onDragStart,
12 |   onDragOver,
13 |   onDrop,
14 |   project
15 | }) {
16 |   const [open, setOpen] = useState(false);
17 |   return (
18 |     <div
19 |       className="text-left p-0 rounded-sm min-h-96 min-w-500"
20 |       onDragOver={onDragOver}
21 |       onDrop={(e) => onDrop(e, laneId)}
22 |     >
23 |       <div className="flex justify-between w-full items-center bg-gray-200 mb-4 p-2.5 rounded-md dark:bg-gray-800">
24 |         <h2 className="font-semibold dark:text-white">{title}</h2>
25 |         <p className="bg-gray-800 px-2 rounded-full text-white text-sm dark:bg-white dark:text-gray-900 font-bold">
26 |           {tasks.length}
27 |         </p>
28 |       </div>
29 |       <div className="flex flex-col gap-4 min-w-400">
30 |         {loading || error ? (
31 |           <span>{error || "Loading..."}</span>
32 |         ) : (
33 |           tasks.map((task) => (
34 |             <Task
35 |               key={task.id}
36 |               id={task.id}
37 |               title={task.title}
38 |               body={task.body}
39 |               created={task.created}
40 |               onDragStart={onDragStart}
41 |             />
42 |           ))
43 |         )}
44 |         {open ? (
45 |           <TaskForm close={setOpen} laneId={laneId} project={project} />
46 |         ) : (
47 |           <button
48 |             onClick={() => setOpen(true)}
49 |             className="bg-gray-200 py-2.5 rounded-md text-gray-700 dark:text-gray-200 hover:text-gray-900 hover:bg-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-900"
50 |           >
51 |             Add Task
52 |           </button>
53 |         )}
54 |       </div>
55 |     </div>
56 |   );
57 | }
58 | 
59 | export default Lane;
60 | 


--------------------------------------------------------------------------------
/src/support/formFields.js:
--------------------------------------------------------------------------------
 1 | const signInFields = [
 2 |   {
 3 |     labelText: "Username",
 4 |     labelFor: "username",
 5 |     id: "username",
 6 |     name: "username",
 7 |     type: "text",
 8 |     autoComplete: "username",
 9 |     isRequired: true,
10 |     placeholder: "Username",
11 |   },
12 |   {
13 |     labelText: "Password",
14 |     labelFor: "password",
15 |     id: "password",
16 |     name: "password",
17 |     type: "password",
18 |     autoComplete: "current-password",
19 |     isRequired: true,
20 |     placeholder: "Password",
21 |   },
22 | ];
23 | 
24 | const signUpFields = [
25 |   {
26 |     labelText: "First name",
27 |     labelFor: "firstname",
28 |     id: "firstname",
29 |     name: "firstname",
30 |     type: "text",
31 |     autoComplete: "firstname",
32 |     isRequired: true,
33 |     placeholder: "Enter your first name",
34 |   },
35 |   {
36 |     labelText: "Last name",
37 |     labelFor: "lastname",
38 |     id: "lastname",
39 |     name: "lastname",
40 |     type: "text",
41 |     autoComplete: "lastname",
42 |     isRequired: true,
43 |     placeholder: "Enter your last name",
44 |   },
45 |   {
46 |     labelText: "Email",
47 |     labelFor: "email",
48 |     id: "email",
49 |     name: "email",
50 |     type: "email",
51 |     autoComplete: "email",
52 |     isRequired: true,
53 |     placeholder: "Enter your email",
54 |   },
55 |   {
56 |     labelText: "Username",
57 |     labelFor: "username",
58 |     id: "username",
59 |     name: "username",
60 |     type: "text",
61 |     autoComplete: "username",
62 |     isRequired: true,
63 |     placeholder: "Choose a username",
64 |   },
65 |   {
66 |     labelText: "Password",
67 |     labelFor: "password",
68 |     id: "password",
69 |     name: "password",
70 |     type: "password",
71 |     autoComplete: "password",
72 |     isRequired: true,
73 |     placeholder: "Enter your password",
74 |   },
75 |   {
76 |     labelText: "Confirm password",
77 |     labelFor: "confirm",
78 |     id: "confirm",
79 |     name: "confirm",
80 |     type: "password",
81 |     autoComplete: "confirm",
82 |     isRequired: true,
83 |     placeholder: "Confirm your password",
84 |   }
85 | ];
86 | 
87 | export { signInFields, signUpFields };
88 | 
89 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import Project from "./pages/Project";
 3 | import Projects from "./pages/Projects";
 4 | import SignIn from "./pages/SignIn";
 5 | import SignUp from "./pages/SignUp";
 6 | import { Routes, Route, Navigate } from "react-router-dom";
 7 | import { AuthProvider } from "./context/AuthContext";
 8 | import AuthContext from "./context/AuthContext";
 9 | import { useContext, useEffect } from "react";
10 | import Alert from "./components/Alert";
11 | import Home from "./pages/Home";
12 | import NotFound from "./pages/NotFound";
13 | 
14 | function PrivateRoute({ children, ..._ }) {
15 |   const {
16 |     user,
17 |     loading,
18 |     badge,
19 |     message,
20 |     type,
21 |     title,
22 |     setBadge,
23 |     setTitle,
24 |     setMessage,
25 |     setType,
26 |   } = useContext(AuthContext);
27 |   useEffect(() => {
28 |     setTimeout(() => {
29 |       setBadge(false);
30 |       setTitle("");
31 |       setMessage("");
32 |       setType("");
33 |     }, 2500);
34 |   }, [badge]);
35 |   return (
36 |     <>
37 |       {badge && (
38 |         <Alert
39 |           type={type}
40 |           title={title}
41 |           message={message}
42 |           close={() => {
43 |             setBadge(false);
44 |           }}
45 |         />
46 |       )}
47 |       {!user ? <Navigate to="/signin" /> : loading ? null : children}
48 |     </>
49 |   );
50 | }
51 | 
52 | function App() {
53 |   useEffect(() => {
54 |     if (localStorage.theme === "dark") {
55 |       document.documentElement.classList.add("dark");
56 |     } else {
57 |       document.documentElement.classList.remove("dark");
58 |     }
59 |   }, []);
60 |   return (
61 |     <>
62 |       <AuthProvider>
63 |         <Routes>
64 |           <Route
65 |             exact
66 |             path="/project/:slug"
67 |             element={
68 |               <PrivateRoute>
69 |                 <Project />
70 |               </PrivateRoute>
71 |             }
72 |           />
73 |           <Route
74 |             exact
75 |             path="/projects"
76 |             element={
77 |               <PrivateRoute>
78 |                 <Projects />
79 |               </PrivateRoute>
80 |             }
81 |           />
82 |           <Route path="/signin" element={<SignIn />} />
83 |           <Route path="/signup" element={<SignUp />} />
84 |           <Route path="/" element={<Home />} />
85 |           <Route path="*" element={<NotFound />} />
86 |         </Routes>
87 |       </AuthProvider>
88 |     </>
89 |   );
90 | }
91 | 
92 | export default App;
93 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/components/ProjectHeader.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from "react";
 2 | import { MdDelete, MdModeEdit } from "react-icons/md";
 3 | import { useNavigate } from "react-router-dom";
 4 | import AuthContext from "../context/AuthContext";
 5 | import axios from "axios";
 6 | import date from "../support/Date";
 7 | 
 8 | const baseURL = process.env.REACT_APP_BACKEND_URL;
 9 | 
10 | function ProjectHeader({ data, open }) {
11 |   const { token, setTitle, setMessage, setBadge, setType } =
12 |     useContext(AuthContext);
13 | 
14 |   const navigate = useNavigate();
15 | 
16 |   const deleteProject = () => {
17 |     axios
18 |       .delete(`${baseURL}/project/${data.id}`, {
19 |         headers: {
20 |           "Content-Type": "application/json",
21 |           Authorization: "Bearer " + String(token.access),
22 |         },
23 |       })
24 |       .then((response) => {
25 |         setBadge(true);
26 |         setTitle("Successful operation");
27 |         setMessage("Project deleted successfully");
28 |         setType("success");
29 |         navigate("/projects");
30 |       })
31 |       .catch((response) => {
32 |         setBadge(true);
33 |         setTitle("Error");
34 |         setMessage(response.data);
35 |         setType("warning");
36 |       });
37 |   };
38 | 
39 |   return (
40 |     <>
41 |       <div className="bg-white grid py-10 px-10 w-full max-w-8xl items-start grid-cols-1 lg:grid-cols-2 dark:bg-gray-900">
42 |         <div className="row">
43 |           <p className="font-light text-sm dark:text-white">Project:</p>
44 |           <h1 className="font-bold text-3xl dark:text-white">{data.name}</h1>
45 |           <h2 className="text-gray-700 mb-4 text-sm dark:text-gray-400">
46 |             Created: {date(new Date(data.created))}
47 |           </h2>
48 |           <p className="text-gray-500 dark:text-gray-300 line-clamp-2">
49 |             {data.description}
50 |           </p>
51 |         </div>
52 |         <div className="flex gap-5 mt-5 justify-end">
53 |           <button
54 |             onClick={deleteProject}
55 |             className="flex items-center justify-center font-semibold bg-gray-900 hover:bg-red-500 text-gray-100 dark:bg-gray-600 dark:hover:bg-red-500 dark:text-gray-100 rounded w-32 py-2 px-2"
56 |           >
57 |             <MdDelete className="text-xl mr-2" /> Delete
58 |           </button>
59 |           <button
60 |             onClick={open}
61 |             className="flex items-center justify-center font-semibold bg-gray-900 hover:bg-blue-500 text-gray-100 dark:bg-gray-600 dark:hover:bg-blue-500 dark:text-gray-100 rounded w-32 py-2 px-2"
62 |           >
63 |             <MdModeEdit className="text-xl mr-2" /> Edit
64 |           </button>
65 |         </div>
66 |       </div>
67 |     </>
68 |   );
69 | }
70 | 
71 | export default ProjectHeader;
72 | 


--------------------------------------------------------------------------------
/src/components/Board.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState, useContext } from "react";
 2 | import Lane from "./Lane";
 3 | import useDataFetching from "../hooks/useDataFetching";
 4 | import AuthContext from "../context/AuthContext";
 5 | import axios from "axios";
 6 | 
 7 | const lanes = [
 8 |   { id: 1, title: "To Do" },
 9 |   { id: 2, title: "In Progress" },
10 |   { id: 3, title: "Review" },
11 |   { id: 4, title: "Done" },
12 | ];
13 | 
14 | const baseURL = process.env.REACT_APP_BACKEND_URL;
15 | 
16 | function Board({ project }) {
17 |   const [loading, error, data] = useDataFetching(`tasks/${project.slug}`);
18 |   const [tasks, setTasks] = useState([]);
19 |   const { token, badge, setTitle, setMessage, setBadge, setType } =
20 |     useContext(AuthContext);
21 | 
22 |   function onDrop(e, laneId) {
23 |     const id = e.dataTransfer.getData("id");
24 |     const updatedTasks = tasks.filter((task) => {
25 |       if (task.id.toString() === id) {
26 |         task.stage = laneId;
27 |         axios
28 |           .put(
29 |             `${baseURL}/task/${task.id}`,
30 |             JSON.stringify({ stage: laneId }),
31 |             {
32 |               headers: {
33 |                 "Content-Type": "application/json",
34 |                 Authorization: "Bearer " + String(token.access),
35 |               },
36 |             }
37 |           )
38 |           .then((response) => {})
39 |           .catch((response) => {
40 |             setBadge(true);
41 |             setTitle("Error");
42 |             setMessage(response.data);
43 |             setType("warning");
44 |           });
45 |       }
46 |       return task;
47 |     });
48 |     setTasks(updatedTasks);
49 |   }
50 | 
51 |   function onDragStart(event, id) {
52 |     event.dataTransfer.setData("id", id);
53 |   }
54 | 
55 |   function onDragOver(e) {
56 |     e.preventDefault();
57 |   }
58 | 
59 |   useEffect(() => {
60 |     setTasks(data);
61 |   }, [data, badge]);
62 | 
63 |   return (
64 |     <div className="grow flex flex-col w-full items-center bg-gray-100 p-5 pb-0 dark:bg-gray-700">
65 |       <div
66 |         className="scrollbar w-full px-3 xl:px-10 max-w-8xl grid gap-5 justify-between overflow-x-auto pb-5"
67 |         style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}
68 |       >
69 |         {lanes.map((lane) => (
70 |           <Lane
71 |             key={lane.id}
72 |             title={lane.title}
73 |             laneId={lane.id}
74 |             loading={loading}
75 |             error={error}
76 |             tasks={tasks.filter((task) => +task.stage === lane.id)}
77 |             onDragStart={onDragStart}
78 |             onDragOver={onDragOver}
79 |             onDrop={onDrop}
80 |             project={project}
81 |           />
82 |         ))}
83 |       </div>
84 |     </div>
85 |   );
86 | }
87 | 
88 | export default Board;
89 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta
 8 |       http-equiv="Content-Security-Policy"
 9 |       content="upgrade-insecure-requests"
10 |     />
11 |     <meta name="theme-color" content="#000000" />
12 |     <meta property="og:image" content="./app.png" />
13 |     <meta property="og:image:type" content="image/png" />
14 |     <meta property="og:image:width" content="1024" />
15 |     <meta property="og:image:height" content="1024" />
16 |     <meta
17 |       name="description"
18 |       content="SimpleProject allows you to manage your projects easily and more effectively, by being simple to use with the intuitive design of the app, all features are free to use with future features coming soon"
19 |     />
20 |     <meta
21 |       name="description"
22 |       content="Web site created using create-react-app"
23 |     />
24 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
25 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
26 |     <link
27 |       href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
28 |       rel="stylesheet"
29 |     />
30 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
31 |     <!--
32 |       manifest.json provides metadata used when your web app is installed on a
33 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
34 |     -->
35 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
36 |     <!--
37 |       Notice the use of %PUBLIC_URL% in the tags above.
38 |       It will be replaced with the URL of the `public` folder during the build.
39 |       Only files inside the `public` folder can be referenced from the HTML.
40 | 
41 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
42 |       work correctly both with client-side routing and a non-root public URL.
43 |       Learn how to configure a non-root public URL by running `npm run build`.
44 |     -->
45 |     <title>Project Board</title>
46 |   </head>
47 |   <body>
48 |     <noscript>You need to enable JavaScript to run this app.</noscript>
49 |     <div id="root"></div>
50 |     <!--
51 |       This HTML file is a template.
52 |       If you open it directly in the browser, you will see an empty page.
53 | 
54 |       You can add webfonts, meta tags, or analytics to this file.
55 |       The build step will place the bundled scripts into the <body> tag.
56 | 
57 |       To begin the development, run `npm start` or `yarn start`.
58 |       To create a production bundle, use `npm run build` or `yarn build`.
59 |     -->
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img  src="https://user-images.githubusercontent.com/46266986/187108336-bad98024-25a4-4eb8-b582-939268609b1a.png">
 3 | </p>
 4 | 
 5 | <p align="center">
 6 |    <a href="https://github.com/MahmoudFettal/simple-project/issues">
 7 |       <img alt="GitHub issues" src="https://img.shields.io/github/issues/MahmoudFettal/simple-project?style=flat&label=Issues"/>
 8 |    </a> 
 9 |    <a href="https://github.com/MahmoudFettal/simple-projecth/network/members">
10 |       <img alt="GitHub forks" src="https://img.shields.io/github/forks/MahmoudFettal/simple-project"/>
11 |    </a> 
12 |    <a href="https://github.com/MahmoudFettal/simple-project/stargazers">
13 |       <img alt="GitHub stars" src="https://img.shields.io/github/stars/MahmoudFettal/simple-project"/>
14 |    </a>
15 | <p>
16 | 
17 | <p align="center">
18 |     <img src="https://img.shields.io/badge/react-%2320232a.svg?style=flat&logo=react&logoColor=%2361DAFB"/>
19 |     <img src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=flat&logo=tailwind-css&logoColor=white"/>
20 |     <img src="https://img.shields.io/badge/DJANGO-REST-ff1709?style=flat&logo=django&logoColor=white&color=ff1709&labelColor=gray"/>
21 |     <img src="https://img.shields.io/badge/azure-%230072C6.svg?style=flat&logo=microsoftazure&logoColor=white"/>
22 | </p>
23 | 
24 | # What is SimpleProject
25 | SimpleProject is a web app that allows users to create and manage  projects them in a kanban board.
26 | 
27 | SimpleProject was built with react and tailwind for the frontend, Django rest framework for the backend and hosted on Microsoft Azure, the app implements HTML5 drag and drop API to ensure the functionality of drag and dropping tasks into the right column, all in a minimalist design that is easy to use.
28 | 
29 | ## Use the app :
30 | You can use the app using the link: [simple-project.smauj.me](https://simple-project.smauj.me/)
31 | 
32 | ## Functionalities :
33 | ### Projects list:
34 | ![image](https://user-images.githubusercontent.com/46266986/187219476-79af8483-2820-4861-92a9-58a76a3f98b3.png)
35 | ### Project view:
36 | ![image](https://user-images.githubusercontent.com/46266986/187219570-8d6ae78a-02bc-4ced-9156-da6e135a858e.png)
37 | ### Dark mode:
38 | ![image](https://user-images.githubusercontent.com/46266986/187219896-ae4b8f02-98f6-453a-ac40-4b523800e803.png)
39 | ### Sign in:
40 | ![image](https://user-images.githubusercontent.com/46266986/187220094-d15be4b8-a811-4a32-bc3a-8099dec47ed1.png)
41 | ### Landing page:
42 | ![image](https://user-images.githubusercontent.com/46266986/187220176-0ae0704c-e6e3-4685-ad65-11c34aec12c3.png)
43 | 
44 | # How to support the project:
45 | **:thumbsup: Your support means a lot. Thank you for stars that keeps me motivated to share new ideas and do them fast.**
46 | 
47 | You can support also the project by [buy me a coffe](https://www.buymeacoffee.com/mahmoudfettal), that would help with the costs of hosting and keep me motivated to add new features in the future. 
48 | 
49 | # Lisence:
50 | You can clone the repos easily but you will have to create your own APIs in order for the app to work.
51 | 
52 | Contact me if you need help. 
53 | 


--------------------------------------------------------------------------------
/src/components/Options.jsx:
--------------------------------------------------------------------------------
 1 | import { useContext, useEffect, useRef, useState } from "react";
 2 | import { MdOutlineMoreVert, MdDelete, MdModeEdit } from "react-icons/md";
 3 | import axios from "axios";
 4 | import AuthContext from "../context/AuthContext";
 5 | 
 6 | const baseURL = process.env.REACT_APP_BACKEND_URL;
 7 | 
 8 | function Options({ taskId, edit }) {
 9 |   const { token, setTitle, setMessage, setBadge, setType, badge } =
10 |     useContext(AuthContext);
11 |   const [open, setOpen] = useState(false);
12 |   const deleteTask = () => {
13 |     axios
14 |       .delete(`${baseURL}/task/${taskId}`, {
15 |         headers: {
16 |           "Content-Type": "application/json",
17 |           Authorization: "Bearer " + String(token.access),
18 |         },
19 |       })
20 |       .then((response) => {
21 |         setBadge(true);
22 |         setTitle("Successful operation");
23 |         setMessage("Task deleted successfully");
24 |         setType("success");
25 |       })
26 |       .catch((response) => {
27 |         setBadge(true);
28 |         setTitle("Error");
29 |         setMessage(response.data);
30 |         setType("warning");
31 |       });
32 |   };
33 | 
34 |   const ref = useRef(null);
35 | 
36 |   useEffect(() => {
37 |     const handleClickOutside = (event) => {
38 |       if (ref.current && !ref.current.contains(event.target)) {
39 |         setOpen(false);
40 |       }
41 |     };
42 |     document.addEventListener("click", handleClickOutside, true);
43 |     return () => {
44 |       document.removeEventListener("click", handleClickOutside, true);
45 |     };
46 |   });
47 | 
48 |   useEffect(() => {
49 |     setTimeout(() => {
50 |       setBadge(false);
51 |       setTitle("");
52 |       setMessage("");
53 |       setType("");
54 |     }, 5000);
55 |   }, [badge]);
56 |   return (
57 |     <>
58 |       <div className="relative inline-block">
59 |         <MdOutlineMoreVert
60 |           onClick={() => {
61 |             setOpen(!open);
62 |           }}
63 |           className="text-gray-500 hover:text-gray-800 mb-4 dark:text-gray-300 dark:hover:text-white"
64 |         />
65 |         <div
66 |           className={
67 |             open
68 |               ? " flex flex-col absolute right-0.5 top-5 w-32 shadow-md bg-gray-50 dark:bg-gray-800 dark:text-white"
69 |               : " absolute hidden"
70 |           }
71 |         >
72 |           <button
73 |             ref={ref}
74 |             onClick={deleteTask}
75 |             className="flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-700 p-2"
76 |           >
77 |             <MdDelete className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg" />
78 |             <span>Delete task</span>
79 |           </button>
80 |           <button
81 |             onClick={edit}
82 |             className="flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-700 p-2"
83 |           >
84 |             <MdModeEdit className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg " />
85 |             <span>Edit task</span>
86 |           </button>
87 |         </div>
88 |       </div>
89 |     </>
90 |   );
91 | }
92 | 
93 | export default Options;
94 | 


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Nav from "../components/Nav";
 3 | import app from "../static/app.png";
 4 | import Footer from "../components/Footer";
 5 | 
 6 | function Home() {
 7 |   return (
 8 |     <div className="grid justify-items-center bg-gray-900 w-full ">
 9 |       <Nav />
10 |       <div className="bg-gray-900 px-10 pt-24 pb-48 w-full max-w-7xl">
11 |         <div className="pl-3 text-center">
12 |           <h1 className="font-semibold text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-white">
13 |             Welcome to{" "}
14 |             <span className="font-extralight text-gray-200">
15 |               {" "}
16 |               Simple<span className="font-bold">Project</span>{" "}
17 |             </span>
18 |           </h1>
19 |           <p className="mt-4 text-gray-500 text-md sm:text-lg lg:text-xl">
20 |             Manage your projects easily and more effectively
21 |           </p>
22 |         </div>
23 |       </div>
24 |       <div className="grid justify-items-center -mb-36 bg-gray-200 p-10 w-full">
25 |         <img
26 |           src={app}
27 |           className="w-full max-w-7xl h-auto relative -top-40 rounded-lg shadow-lg"
28 |           alt="app screenshot"
29 |         />
30 |       </div>
31 |       <div className="grid justify-items-center bg-white p-10 w-full">
32 |         <div className="w-full max-w-7xl">
33 |           <h2 className="font-bold text-center first-line:selection:text-center text-xl sm:text-2xl md:text-3xl lg:text-4xl">
34 |             Why use SimpleProject?
35 |           </h2>
36 |           <hr className="my-10" />
37 |           <div
38 |             id="features"
39 |             className="grid lg:grid-cols-3 place-items-center gap-5"
40 |           >
41 |             <div class="p-6 pt-0 text-center">
42 |               <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">
43 |                 Simple to use
44 |               </h5>
45 |               <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">
46 |                 The app is very intuitive and simple to use, so you can easily
47 |                 start working with it
48 |               </p>
49 |             </div>
50 |             <div class="p-6 pt-0 text-center">
51 |               <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">
52 |                 Free to use
53 |               </h5>
54 |               <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">
55 |                 You can use the app for as many projects for free <br /> (for
56 |                 now XD)
57 |               </p>
58 |             </div>
59 |             <div class="p-6 pt-0 text-center">
60 |               <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">
61 |                 Always something new
62 |               </h5>
63 |               <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">
64 |                 New features are always in the making you can also request them
65 |                 on the github repos
66 |               </p>
67 |             </div>
68 |           </div>
69 |         </div>
70 |       </div>
71 |       <Footer />
72 |     </div>
73 |   );
74 | }
75 | 
76 | export default Home;
77 | 


--------------------------------------------------------------------------------
/src/pages/SignIn.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useContext, useEffect } from "react";
 2 | import Header from "../components/Header";
 3 | import { signInFields } from "../support/formFields";
 4 | import Input from "../components/Input";
 5 | import FormOptions from "../components/FormOptions";
 6 | import Submit from "../components/Submit";
 7 | import AuthContext from "../context/AuthContext";
 8 | import Alert from "../components/Alert";
 9 | 
10 | const fields = signInFields;
11 | let fieldsState = {};
12 | fields.forEach((field) => (fieldsState[field.id] = ""));
13 | 
14 | function SignIn() {
15 |   const { loginUser } = useContext(AuthContext);
16 |   const [loginState, setLoginState] = useState(fieldsState);
17 | 
18 |   const {
19 |     setMessage,
20 |     setTitle,
21 |     setBadge,
22 |     setType,
23 |     badge,
24 |     message,
25 |     type,
26 |     title,
27 |   } = useContext(AuthContext);
28 | 
29 |   useEffect(() => {
30 |     setTimeout(() => {
31 |       setBadge(false);
32 |       setTitle("");
33 |       setMessage("");
34 |       setType("");
35 |     }, 2500);
36 |   }, [badge, setMessage, setTitle, setBadge, setType]);
37 | 
38 |   const handleChange = (e) => {
39 |     setLoginState({ ...loginState, [e.target.id]: e.target.value });
40 |   };
41 | 
42 |   return (
43 |     <>
44 |       {badge && (
45 |         <Alert
46 |           type={type}
47 |           title={title}
48 |           message={message}
49 |           close={() => {
50 |             setBadge(false);
51 |           }}
52 |         />
53 |       )}
54 |       <div className="grid lg:grid-cols-2 min-h-screen dark:bg-gray-900 dark:text-white">
55 |         <div className="bg-gray-100 dark:bg-gray-800 hidden lg:grid place-items-center">
56 |           <div className="h-64 w-64 dark:bg-white bg-gray-900 rounded-full" />
57 |           <div className="absolute bottom-0 h-1/2 w-1/2 dark:bg-gray-800/50 bg-gray-100/50 backdrop-blur-lg" />
58 |         </div>
59 |         <div className="grid place-items-center">
60 |           <div className="max-w-sm w-full space-y-10">
61 |             <Header
62 |               heading="Login to your account"
63 |               paragraph="Don't have an account yet? "
64 |               linkName="Sign Up"
65 |               linkUrl="/signup"
66 |             />
67 |             <form className="mt-8 space-y-10 px-5" onSubmit={loginUser}>
68 |               <div className="-space-y-px">
69 |                 {fields.map((field) => (
70 |                   <Input
71 |                     key={field.id}
72 |                     handleChange={handleChange}
73 |                     value={loginState[field.id]}
74 |                     labelText={field.labelText}
75 |                     labelFor={field.labelFor}
76 |                     id={field.id}
77 |                     name={field.name}
78 |                     type={field.type}
79 |                     isRequired={field.isRequired}
80 |                     placeholder={field.placeholder}
81 |                   />
82 |                 ))}
83 |               </div>
84 |               <FormOptions />
85 |               <Submit text="Sign in" />
86 |             </form>
87 |           </div>
88 |         </div>
89 |       </div>
90 |     </>
91 |   );
92 | }
93 | 
94 | export default SignIn;
95 | 


--------------------------------------------------------------------------------
/src/pages/Project.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect, useState } from "react";
  2 | import axios from "axios";
  3 | import Navbar from "../components/Navbar";
  4 | import ProjectHeader from "../components/ProjectHeader";
  5 | import Board from "../components/Board";
  6 | import AuthContext from "../context/AuthContext";
  7 | import SideBar from "../components/SideBar";
  8 | import notFound from "../static/24.svg";
  9 | import Loading from "../components/Loading";
 10 | import { useParams } from "react-router-dom";
 11 | import ProjectForm from "../components/ProjectForm";
 12 | 
 13 | const baseURL = process.env.REACT_APP_BACKEND_URL;
 14 | 
 15 | function Project() {
 16 |   const { token, badge } = useContext(AuthContext);
 17 | 
 18 |   const [sidebar, setSidebar] = useState(false);
 19 |   const [loading, setLoading] = useState(true);
 20 |   const [project, setProject] = useState();
 21 |   const [open, setOpen] = useState(false);
 22 | 
 23 |   const { slug } = useParams();
 24 |   const loadProjects = () => {
 25 |     axios
 26 |       .get(`${baseURL}/projects/${slug}`, {
 27 |         headers: {
 28 |           "Content-Type": "application/json",
 29 |           Authorization: "Bearer " + String(token.access),
 30 |         },
 31 |       })
 32 |       .then((response) => {
 33 |         setProject(response.data);
 34 |         setLoading(false);
 35 |       })
 36 |       .catch((response) => {
 37 |         setLoading(false);
 38 |       });
 39 |   };
 40 | 
 41 |   useEffect(() => {
 42 |     loadProjects();
 43 |   }, [slug, badge]);
 44 | 
 45 |   return (
 46 |     <>
 47 |       {open && (
 48 |         <ProjectForm
 49 |           close={() => setOpen(false)}
 50 |           projectName={project.name}
 51 |           projectDescription={project.description}
 52 |           id={project.id}
 53 |         />
 54 |       )}
 55 |       {sidebar && (
 56 |         <SideBar
 57 |           sidebar={() => {
 58 |             setSidebar(false);
 59 |           }}
 60 |         />
 61 |       )}
 62 |       <div className="flex flex-col items-center h-screen w-screen dark:bg-gray-900 overflow-y-auto home">
 63 |         <Navbar
 64 |           sidebar={() => {
 65 |             setSidebar(true);
 66 |           }}
 67 |         />
 68 |         <div className="grow flex flex-col w-full items-center">
 69 |           {project ? (
 70 |             <>
 71 |               <ProjectHeader data={project} open={() => setOpen(true)} />
 72 |               <Board project={project} />
 73 |             </>
 74 |           ) : (
 75 |             <div className="grow grid items-center justify-center py-10">
 76 |               {loading ? (
 77 |                 <Loading />
 78 |               ) : (
 79 |                 <div>
 80 |                   <h1 className="text-center text-xl md:text-4xl font-semibold text-notFound">
 81 |                     Project{" "}
 82 |                     <span className="text-gray-900 dark:text-white">
 83 |                       not found!
 84 |                     </span>
 85 |                   </h1>
 86 |                   <img
 87 |                     src={notFound}
 88 |                     className="h-96 w-auto spin"
 89 |                     alt="not found"
 90 |                   />
 91 |                 </div>
 92 |               )}
 93 |             </div>
 94 |           )}
 95 |         </div>
 96 |       </div>
 97 |     </>
 98 |   );
 99 | }
100 | 
101 | export default Project;
102 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | .App {
  2 |   text-align: center;
  3 | }
  4 | 
  5 | .dropdown {
  6 |   position: relative;
  7 |   display: inline-block;
  8 | }
  9 | 
 10 | .dropdown-content {
 11 |   display: flex;
 12 |   flex-direction: column;
 13 |   position: absolute;
 14 |   min-width: 125px;
 15 |   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 16 |   right: 2px;
 17 |   top: 20px;
 18 |   z-index: 1;
 19 | }
 20 | 
 21 | .home::-webkit-scrollbar {
 22 |   width: 5px;
 23 |   height: 7.5px;
 24 | }
 25 | 
 26 | .home::-webkit-scrollbar-track {
 27 |   background: rgba(255, 255, 255, 0.1);
 28 | }
 29 | 
 30 | .home::-webkit-scrollbar-thumb {
 31 |   border-radius: 50px;
 32 |   background: rgba(165, 165, 165, 0.5);
 33 | }
 34 | 
 35 | .home::-webkit-scrollbar-thumb:hover {
 36 |   width: 15px;
 37 |   background: rgba(165, 165, 165, 0.75);
 38 | }
 39 | 
 40 | .sidebar::-webkit-scrollbar {
 41 |   width: 5px;
 42 |   height: 7.5px;
 43 | }
 44 | 
 45 | .sidebar::-webkit-scrollbar-track {
 46 |   background: rgba(255, 255, 255, 0.1);
 47 | }
 48 | 
 49 | .sidebar::-webkit-scrollbar-thumb {
 50 |   border-radius: 50px;
 51 |   background: rgba(165, 165, 165, 0.5);
 52 | }
 53 | 
 54 | .sidebar::-webkit-scrollbar-thumb:hover {
 55 |   width: 15px;
 56 |   background: rgba(165, 165, 165, 0.75);
 57 | }
 58 | 
 59 | body::-webkit-scrollbar {
 60 |   width: 5px;
 61 |   height: 7.5px;
 62 | }
 63 | 
 64 | body::-webkit-scrollbar-track {
 65 |   background: rgba(255, 255, 255, 0.1);
 66 | }
 67 | 
 68 | body::-webkit-scrollbar-thumb {
 69 |   border-radius: 50px;
 70 |   background: rgba(165, 165, 165, 0.5);
 71 | }
 72 | 
 73 | body::-webkit-scrollbar-thumb:hover {
 74 |   width: 15px;
 75 |   background: rgba(165, 165, 165, 0.75);
 76 | }
 77 | 
 78 | textarea::-webkit-scrollbar {
 79 |   width: 5px;
 80 |   height: 7.5px;
 81 | }
 82 | 
 83 | textarea::-webkit-scrollbar-track {
 84 |   background: rgba(255, 255, 255, 0.1);
 85 | }
 86 | 
 87 | textarea::-webkit-scrollbar-thumb {
 88 |   border-radius: 50px;
 89 |   background: rgba(165, 165, 165, 0.5);
 90 | }
 91 | 
 92 | textarea::-webkit-scrollbar-thumb:hover {
 93 |   width: 15px;
 94 |   background: rgba(165, 165, 165, 0.75);
 95 | }
 96 | 
 97 | .scrollbar::-webkit-scrollbar {
 98 |   width: 5px;
 99 |   height: 7.5px;
100 | }
101 | 
102 | .scrollbar::-webkit-scrollbar-track {
103 |   background: rgba(255, 255, 255, 0.1);
104 | }
105 | 
106 | .scrollbar::-webkit-scrollbar-thumb {
107 |   border-radius: 50px;
108 |   background: rgba(165, 165, 165, 0.5);
109 | }
110 | 
111 | .scrollbar::-webkit-scrollbar-thumb:hover {
112 |   width: 15px;
113 |   background: rgba(165, 165, 165, 0.75);
114 | }
115 | 
116 | .App-logo {
117 |   height: 40vmin;
118 |   pointer-events: none;
119 | }
120 | 
121 | @media (prefers-reduced-motion: no-preference) {
122 |   .App-logo {
123 |     animation: App-logo-spin infinite 20s linear;
124 |   }
125 | }
126 | 
127 | .header {
128 |   grid-template-columns: 1fr 1fr;
129 | }
130 | 
131 | @media (max-width: 1024px) {
132 |   .header {
133 |     grid-template-columns: 1fr auto;
134 |   }
135 | }
136 | 
137 | .App-header {
138 |   background-color: #282c34;
139 |   min-height: 100vh;
140 |   display: flex;
141 |   flex-direction: column;
142 |   align-items: center;
143 |   justify-content: center;
144 |   font-size: calc(10px + 2vmin);
145 |   color: transparent;
146 | }
147 | 
148 | .App-link {
149 |   color: #61dafb;
150 | }
151 | 
152 | @keyframes App-logo-spin {
153 |   from {
154 |     transform: rotate(0deg);
155 |   }
156 |   to {
157 |     transform: rotate(360deg);
158 |   }
159 | }
160 | 
161 | input:-webkit-autofill,
162 | input:-webkit-autofill:hover,
163 | input:-webkit-autofill:focus,
164 | input:-webkit-autofill:active {
165 |     transition: background-color 5000s ease-in-out 0s;
166 |     -webkit-text-fill-color: gray !important;
167 | }
168 | .spin{
169 |   animation: spin 15s linear infinite;
170 | }
171 | 
172 | @keyframes spin {
173 |   from {
174 |     transform: rotate(0deg);
175 |   }
176 |   to {
177 |     transform: rotate(360deg);
178 |   }
179 | }
180 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import { FaLinkedinIn } from "react-icons/fa";
 2 | 
 3 | function Footer() {
 4 |   return (
 5 |     <footer className="w-full max-w-7xl">
 6 |       <div className="bg-gray-900 p-10">
 7 |         <div className="flex flex-col md:flex-row justify-between gap-8 border-gray-200">
 8 |           <div>
 9 |             <h6 className="text-yellow-500 font-semibold text-xl mb-2">
10 |               You want to support my app?
11 |             </h6>
12 |             <p className="text-sm text-gray-400 mb-4">
13 |               Buy me a coffee using the{" "}
14 |               <a href="https://www.buymeacoffee.com/mahmoudfettal" className="text-white font-bold" target="_blank">
15 |                 Link
16 |               </a>
17 |             </p>
18 |           </div>
19 |           <div className="text-right">
20 |             <h6 className="text-white font-semibold text-xl mb-2">
21 |               Share your suggestions with me!
22 |             </h6>
23 |             <p className="text-sm text-gray-400 mb-4">
24 |               Add an issue on the{" "}
25 |               <a
26 |                 href="https://twitter.com/mahmoudfettal"
27 |                 className="text-white font-bold"
28 |               >
29 |                 {" "}
30 |                 GitHub repos
31 |               </a>
32 |             </p>
33 |           </div>
34 |         </div>
35 |         <div className="md:flex md:items-center md:justify-between pt-4 border-t border-gray-700">
36 |           <ul className="flex mb-4 md:order-1 md:ml-4 md:mb-0">
37 |             <li>
38 |               <a
39 |                 href="https://twitter.com/mahmoudfettal"
40 |                 className="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out"
41 |                 aria-label="Twitter"
42 |               >
43 |                 <svg
44 |                   className="w-8 h-8 fill-current"
45 |                   viewBox="0 0 32 32"
46 |                   xmlns="http://www.w3.org/2000/svg"
47 |                 >
48 |                   <path d="M24 11.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H8c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z" />
49 |                 </svg>
50 |               </a>
51 |             </li>
52 |             <li className="ml-4">
53 |               <a
54 |                 href="https://github.com/MahmoudFettal"
55 |                 className="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out"
56 |                 aria-label="Github"
57 |               >
58 |                 <svg
59 |                   className="w-8 h-8 fill-current"
60 |                   viewBox="0 0 32 32"
61 |                   xmlns="http://www.w3.org/2000/svg"
62 |                 >
63 |                   <path d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" />
64 |                 </svg>
65 |               </a>
66 |             </li>
67 |             <li className="ml-4">
68 |               <a
69 |                 href="https://www.linkedin.com/in/mahmoud-fettal/"
70 |                 className="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out w-8 h-8"
71 |                 aria-label="Github"
72 |               >
73 |                 <FaLinkedinIn />
74 |               </a>
75 |             </li>
76 |           </ul>
77 | 
78 |           <div className="text-sm text-gray-400 mr-4">
79 |             Made by{" "}
80 |             <a
81 |               className="text-white hover:underline"
82 |               href="https://github.com/MahmoudFettal"
83 |             >
84 |               Smauj
85 |             </a>
86 |             . All rights reserved.
87 |           </div>
88 |         </div>
89 |       </div>
90 |     </footer>
91 |   );
92 | }
93 | 
94 | export default Footer;
95 | 


--------------------------------------------------------------------------------
/src/pages/Projects.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState } from "react";
  2 | import Navbar from "../components/Navbar";
  3 | import SideBar from "../components/SideBar";
  4 | import AuthContext from "../context/AuthContext";
  5 | import { MdNavigateNext } from "react-icons/md";
  6 | import { Link } from "react-router-dom";
  7 | import date from "../support/Date";
  8 | import ProjectForm from "../components/ProjectForm";
  9 | import { useNavigate } from "react-router-dom";
 10 | 
 11 | function Projects() {
 12 |   const { user, projects } = useContext(AuthContext);
 13 | 
 14 |   const [sidebar, setSidebar] = useState(false);
 15 |   const [open, setOpen] = useState(false);
 16 |   const navigate = useNavigate()
 17 | 
 18 |   return (
 19 |     <>
 20 |       {open && <ProjectForm close={() => setOpen(false)}/>}
 21 |       {sidebar && (
 22 |         <SideBar
 23 |           sidebar={() => {
 24 |             setSidebar(false);
 25 |           }}
 26 |         />
 27 |       )}
 28 |       <div className="flex flex-col items-center h-screen w-screen dark:bg-gray-900 overflow-y-auto home">
 29 |         <Navbar
 30 |           sidebar={() => {
 31 |             setSidebar(true);
 32 |           }}
 33 |         />
 34 |         {projects ? (
 35 |           <div className="grow flex flex-col w-full">
 36 |             <div className="p-10">
 37 |               <div className="flex flex-col text-center h-fit rounded-3xl py-10">
 38 |                 <p className="mb-2 text-lg dark:text-gray-300 text-gray-900">
 39 |                   Welcome back,{" "}
 40 |                   <span className="font-semibold dark:text-white">
 41 |                     {user.username}!
 42 |                   </span>
 43 |                 </p>
 44 |                 <h1 className="text-5xl font-bold dark:text-white text-gray-900">
 45 |                   Your Projects
 46 |                 </h1>
 47 |               </div>
 48 |             </div>
 49 |             <div className="grow w-full flex flex-col items-center bg-gray-100 dark:bg-gray-700 ">
 50 |               <div className="grid w-full px-3 xl:px-10 max-w-8xl sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 p-10">
 51 |                 {projects.map((project, key) => {
 52 |                   return (
 53 |                     <div
 54 |                       key={key}
 55 |                       className="p-6 bg-white rounded-xl dark:bg-gray-900 border dark:border-gray-700 border-gray-300"
 56 |                       onClick={()=>{navigate(`/project/${project.slug}`)}}
 57 |                     >
 58 |                       <div
 59 |                         className="grid items-center"
 60 |                         style={{ gridTemplateColumns: "1fr auto" }}
 61 |                       >
 62 |                         <div>
 63 |                           <h5 className="whitespace-nowrap overflow-x-hidden text-xl font-bold tracking-tight text-gray-900 dark:text-white">
 64 |                             {project.name}
 65 |                           </h5>
 66 |                           <p className="text-xs font-normal text-gray-700 dark:text-gray-400">
 67 |                             {date(new Date(project.created))}
 68 |                           </p>
 69 |                         </div>
 70 |                         <Link
 71 |                           to={`/project/${project.slug}`}
 72 |                           className="bg-gray-900 dark:bg-white p-2 rounded-full h-10 w-10 flex place-items-center text-white dark:text-gray-900"
 73 |                         >
 74 |                           <MdNavigateNext className="text-2xl" />
 75 |                         </Link>
 76 |                       </div>
 77 |                       <p className="text-gray-500 dark:text-gray-300 text-sm mt-2.5 line-clamp-3">
 78 |                         {project.description}
 79 |                       </p>
 80 |                     </div>
 81 |                   );
 82 |                 })}
 83 |                 <div className="p-6 grid justify-items-center bg-white rounded-xl dark:bg-gray-800 border dark:border-gray-600 border-gray-300 ">
 84 |                   <h5 className="whitespace-nowrap overflow-x-hidden text-xl font-bold tracking-tight text-gray-900 dark:text-white mb-2.5">
 85 |                     Add a new project
 86 |                   </h5>
 87 |                   <button
 88 |                     onClick={() => {
 89 |                       setOpen(true);
 90 |                     }}
 91 |                     className="bg-gray-900 dark:bg-white h-10 w-10 text-white dark:text-gray-900 rounded-full text-xl"
 92 |                   >
 93 |                     {" "}
 94 |                     +{" "}
 95 |                   </button>
 96 |                 </div>
 97 |               </div>
 98 |             </div>
 99 |           </div>
100 |         ) : (
101 |           <div>nothing</div>
102 |         )}
103 |       </div>
104 |     </>
105 |   );
106 | }
107 | 
108 | export default Projects;
109 | 


--------------------------------------------------------------------------------
/src/components/TaskForm.jsx:
--------------------------------------------------------------------------------
  1 | import { MdOutlineOpenInFull, MdClose, MdCheck } from "react-icons/md";
  2 | import axios from "axios";
  3 | import AuthContext from "../context/AuthContext";
  4 | import { useContext, useEffect, useState } from "react";
  5 | 
  6 | const baseURL = process.env.REACT_APP_BACKEND_URL;
  7 | 
  8 | function TaskForm({ close, laneId, editTitle, editBody, edit, taskId, project }) {
  9 |   const { token, setTitle, setMessage, setBadge, setType, badge } =
 10 |     useContext(AuthContext);
 11 | 
 12 |   const [title, setTaskTitle] = useState(editTitle ? editTitle : "");
 13 |   const [body, setBody] = useState(editBody ? editBody : "");
 14 | 
 15 |   const saveTask = (event) => {
 16 |     event.preventDefault();
 17 | 
 18 |     if (title === "") {
 19 |       setBadge(true);
 20 |       setType("danger");
 21 |       setTitle("Error");
 22 |       setMessage("Title musn't be empty!");
 23 |     } else if (body === "") {
 24 |       setBadge(true);
 25 |       setTitle("Error");
 26 |       setTitle("Error");
 27 |       setType("danger");
 28 |       setMessage("Body musn't be empty!");
 29 |     } else {
 30 |       const data = new FormData();
 31 |       data.append("title", title);
 32 |       data.append("body", body);
 33 | 
 34 |       if (edit) {
 35 |         axios
 36 |           .put(`${baseURL}/task/${taskId}`, data, {
 37 |             headers: {
 38 |               "Content-Type": "application/json",
 39 |               Authorization: "Bearer " + String(token.access),
 40 |             },
 41 |           })
 42 |           .then((response) => {
 43 |             setBadge(true);
 44 |             setTitle("Successful operation");
 45 |             setMessage("Task updated successfully");
 46 |             setType("success");
 47 |             setTaskTitle("");
 48 |             setBody("");
 49 |             edit();
 50 |           })
 51 |           .catch((response) => {
 52 |             console.log(response);
 53 |             setType("danger");
 54 |             setTitle("Error");
 55 |             setMessage(response.data);
 56 |             setBadge(true);
 57 |           });
 58 |       } else {
 59 |         data.append("stage", laneId);
 60 |         data.append("project", project.id);
 61 |         axios
 62 |           .post(`${baseURL}/task/`, data, {
 63 |             headers: {
 64 |               "Content-Type": "application/json",
 65 |               Authorization: "Bearer " + String(token.access),
 66 |             },
 67 |           })
 68 |           .then((response) => {
 69 |             close(false);
 70 |             setBadge(true);
 71 |             setTitle("Successful operation");
 72 |             setMessage("Task deleted successfully");
 73 |             setType("success");
 74 |             setTaskTitle("");
 75 |             setBody("");
 76 |           })
 77 |           .catch((response) => {
 78 |             setType("danger");
 79 |             setTitle("Error");
 80 |             setMessage(response.data);
 81 |             setBadge(true);
 82 |           });
 83 |       }
 84 |     }
 85 |   };
 86 | 
 87 |   useEffect(() => {
 88 |     setTimeout(() => {
 89 |       setBadge(false);
 90 |       setTitle("");
 91 |       setMessage("");
 92 |       setType("");
 93 |     }, 5000);
 94 |   }, [badge]);
 95 | 
 96 |   return (
 97 |     <>
 98 |       <div className="bg-white p-4 rounded-md dark:bg-gray-800">
 99 |         <div className="flex justify-between items-center mb-3">
100 |           <div>
101 |             <label htmlFor="taskTile" className="sr-only">
102 |               Task title
103 |             </label>
104 |             <input
105 |               name="taskTile"
106 |               type="text"
107 |               placeholder="Task title"
108 |               className="outline-none focus:border-b-2 focus:border-gray-500 pb-1 font-semibold bg-transparent dark:text-white"
109 |               value={title}
110 |               onChange={(event) => {
111 |                 setTaskTitle(event.target.value);
112 |               }}
113 |             />
114 |           </div>
115 |           <div className="flex gap-2.5 items-center">
116 |             <MdOutlineOpenInFull className="text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" />
117 |             <MdClose
118 |               onClick={() => {
119 |                 if (close) {
120 |                   close(false);
121 |                 }
122 |                 if (edit) {
123 |                   edit();
124 |                 }
125 |               }}
126 |               className="text-lg text-gray-500 hover:text-gray-800 dark:hover:text-gray-200"
127 |             />
128 |             <MdCheck
129 |               onClick={saveTask}
130 |               className="text-lg text-gray-500 hover:text-gray-800dar k:hover:text-gray-200"
131 |             />
132 |           </div>
133 |         </div>
134 |         <label htmlFor="taskBody" className="sr-only">
135 |           Task body
136 |         </label>
137 |         <textarea
138 |           name="taskBody"
139 |           id="taskBody"
140 |           className="w-full outline-none bg-transparent dark:text-gray-50"
141 |           placeholder="Task description...."
142 |           value={body}
143 |           rows={5}
144 |           onChange={(event) => {
145 |             setBody(event.target.value);
146 |           }}
147 |         />
148 |       </div>
149 |     </>
150 |   );
151 | }
152 | 
153 | export default TaskForm;
154 | 


--------------------------------------------------------------------------------
/src/context/AuthContext.js:
--------------------------------------------------------------------------------
  1 | import { createContext, useEffect, useState } from "react";
  2 | import jwt_decode from "jwt-decode";
  3 | import { useNavigate } from "react-router-dom";
  4 | import axios from "axios";
  5 | 
  6 | const baseURL = process.env.REACT_APP_BACKEND_URL;
  7 | const AuthContext = createContext();
  8 | 
  9 | export default AuthContext;
 10 | 
 11 | export const AuthProvider = ({ children }) => {
 12 |   const [user, setUser] = useState(() => {
 13 |     return localStorage.getItem("authTokens") ||
 14 |       sessionStorage.getItem("authTokens")
 15 |       ? jwt_decode(
 16 |           localStorage.getItem("authTokens")
 17 |             ? localStorage.getItem("authTokens")
 18 |             : sessionStorage.getItem("authTokens")
 19 |         )
 20 |       : null;
 21 |   });
 22 |   const [token, setToken] = useState(() => {
 23 |     return localStorage.getItem("authTokens") ||
 24 |       sessionStorage.getItem("authTokens")
 25 |       ? JSON.parse(
 26 |           localStorage.getItem("authTokens")
 27 |             ? localStorage.getItem("authTokens")
 28 |             : sessionStorage.getItem("authTokens")
 29 |         )
 30 |       : null;
 31 |   });
 32 |   const [loading, setLoading] = useState(true);
 33 |   const [remember, setRemember] = useState(true);
 34 |   const [badge, setBadge] = useState(false);
 35 |   const [type, setType] = useState("");
 36 |   const [title, setTitle] = useState("");
 37 |   const [message, setMessage] = useState("");
 38 |   let [projects, setProjects] = useState([]);
 39 | 
 40 |   const navigate = useNavigate();
 41 | 
 42 |   const loginUser = async (event) => {
 43 |     event.preventDefault();
 44 | 
 45 |     axios
 46 |       .post(
 47 |         `${baseURL}/token/`,
 48 |         JSON.stringify({
 49 |           username: event.target.username.value,
 50 |           password: event.target.password.value,
 51 |         }),
 52 |         {
 53 |           headers: {
 54 |             "Content-Type": "application/json",
 55 |           },
 56 |         }
 57 |       )
 58 |       .then((response) => {
 59 |         setRemember(event.target.remember.checked);
 60 |         setToken(response.data);
 61 |         setUser(jwt_decode(response.data.access));
 62 |         event.target.remember.checked
 63 |           ? localStorage.setItem("authTokens", JSON.stringify(response.data))
 64 |           : sessionStorage.setItem("authTokens", JSON.stringify(response.data));
 65 |         navigate("/projects");
 66 |       })
 67 |       .catch((response) => {
 68 |         setBadge(true);
 69 |         setTitle("Sign in error");
 70 |         setMessage("Password and username combination do not match!");
 71 |         setType("danger");
 72 |       });
 73 |   };
 74 | 
 75 |   const updateToken = async (event) => {
 76 |     if (loading) {
 77 |       setLoading(false);
 78 |     } else if (token) {
 79 |       axios
 80 |         .post(
 81 |           `${baseURL}/token/refresh/`,
 82 |           {
 83 |             refresh: token?.refresh,
 84 |           },
 85 |           {
 86 |             headers: {
 87 |               "Content-Type": "application/json",
 88 |             },
 89 |           }
 90 |         )
 91 |         .then((response) => {
 92 |           if (response.status === 200) {
 93 |             setToken(response.data);
 94 |             setUser(jwt_decode(response.data.access));
 95 |             remember
 96 |               ? localStorage.setItem(
 97 |                   "authTokens",
 98 |                   JSON.stringify(response.data)
 99 |                 )
100 |               : sessionStorage.setItem(
101 |                   "authTokens",
102 |                   JSON.stringify(response.data)
103 |                 );
104 |           } else {
105 |             logoutUser();
106 |           }
107 |         });
108 |     }
109 |   };
110 | 
111 |   const logoutUser = () => {
112 |     setToken(null);
113 |     setUser(null);
114 |     localStorage.removeItem("authTokens");
115 |     sessionStorage.removeItem("authTokens");
116 |     navigate("/signin");
117 |   };
118 | 
119 |   useEffect(() => {
120 |     if (loading) {
121 |       updateToken();
122 |     }
123 |     let interval = setInterval(() => {
124 |       if (token) {
125 |         updateToken();
126 |       }
127 |     }, 1000 * 60 * 59 * 4);
128 | 
129 |     return () => clearInterval(interval);
130 |   }, [loading, token]);
131 | 
132 |   useEffect(() => {
133 |     if (token) {
134 |       axios
135 |         .get(`${baseURL}/projects/`, {
136 |           headers: {
137 |             "Content-Type": "application/json",
138 |             Authorization: "Bearer " + String(token?.access),
139 |           },
140 |         })
141 |         .then((response) => {
142 |           setProjects(response.data);
143 |         })
144 |         .catch((response) => {
145 |           console.log(response);
146 |         });
147 |     }
148 |   }, [badge, token]);
149 | 
150 |   const contextData = {
151 |     loginUser: loginUser,
152 |     logoutUser: logoutUser,
153 |     token: token,
154 |     setToken: setToken,
155 |     setUser: setUser,
156 |     user: user,
157 |     badge: badge,
158 |     setBadge: setBadge,
159 |     type: type,
160 |     setType: setType,
161 |     message: message,
162 |     setMessage: setMessage,
163 |     title: title,
164 |     setTitle: setTitle,
165 |     projects: projects,
166 |     setProjects: setProjects,
167 |     loading: loading,
168 |     remember: setRemember,
169 |   };
170 | 
171 |   return (
172 |     <AuthContext.Provider value={contextData}>{children}</AuthContext.Provider>
173 |   );
174 | };
175 | 


--------------------------------------------------------------------------------
/src/components/ProjectForm.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect, useRef, useState } from "react";
  2 | import axios from "axios";
  3 | import AuthContext from "../context/AuthContext";
  4 | import { useNavigate } from "react-router-dom";
  5 | 
  6 | const baseURL = process.env.REACT_APP_BACKEND_URL;
  7 | 
  8 | function ProjectForm({ close, id, projectName = "", projectDescription = "" }) {
  9 |   const [name, setName] = useState(projectName);
 10 |   const [description, setDescription] = useState(projectDescription);
 11 |   const { token, setTitle, setMessage, setBadge, setType, badge } =
 12 |     useContext(AuthContext);
 13 | 
 14 |   const navigate = useNavigate();
 15 |   const saveProject = (event) => {
 16 |     event.preventDefault();
 17 | 
 18 |     if (name === "") {
 19 |       setBadge(true);
 20 |       setType("danger");
 21 |       setTitle("Error");
 22 |       setMessage("Title musn't be empty!");
 23 |     } else if (description === "") {
 24 |       setBadge(true);
 25 |       setTitle("Error");
 26 |       setTitle("Error");
 27 |       setType("danger");
 28 |       setMessage("Body musn't be empty!");
 29 |     } else {
 30 |       const data = new FormData();
 31 |       data.append("name", name);
 32 |       data.append("description", description);
 33 | 
 34 |       if (id) {
 35 |         axios
 36 |           .put(`${baseURL}/project/${id}`, data, {
 37 |             headers: {
 38 |               "Content-Type": "application/json",
 39 |               Authorization: "Bearer " + String(token.access),
 40 |             },
 41 |           })
 42 |           .then((response) => {
 43 |             setBadge(true);
 44 |             setTitle("Successful operation");
 45 |             setMessage("Project updated successfully");
 46 |             setType("success");
 47 |             setName("");
 48 |             setDescription("");
 49 |             close();
 50 |             navigate(`/project/${response.data}`);
 51 |           })
 52 |           .catch((response) => {
 53 |             setBadge(true);
 54 |             setType("danger");
 55 |             setTitle("Error");
 56 |             setMessage(response.data);
 57 |           });
 58 |       } else {
 59 |         axios
 60 |           .post(`${baseURL}/project/`, data, {
 61 |             headers: {
 62 |               "Content-Type": "application/json",
 63 |               Authorization: "Bearer " + String(token.access),
 64 |             },
 65 |           })
 66 |           .then((response) => {
 67 |             setBadge(true);
 68 |             setTitle("Successful operation");
 69 |             setMessage("Project created successfully");
 70 |             setType("success");
 71 |             setName("");
 72 |             setDescription("");
 73 |             navigate(`/project/${response.data}`);
 74 |           })
 75 |           .catch((response) => {
 76 |             setBadge(true);
 77 |             setType("danger");
 78 |             setTitle("Error");
 79 |             setMessage(response.response.data);
 80 |           });
 81 |       }
 82 |     }
 83 |   };
 84 | 
 85 |   const ref = useRef(null);
 86 | 
 87 |   useEffect(() => {
 88 |     const handleClickOutside = (event) => {
 89 |       if (ref.current && !ref.current.contains(event.target)) {
 90 |         close();
 91 |       }
 92 |     };
 93 |     document.addEventListener("click", handleClickOutside, true);
 94 |     return () => {
 95 |       document.removeEventListener("click", handleClickOutside, true);
 96 |     };
 97 |   });
 98 | 
 99 |   return (
100 |     <>
101 |       <div className="absolute z-40 grid place-items-center w-screen h-screen bg-black/50 dark:bg-white/50">
102 |         <form
103 |           ref={ref}
104 |           className="bg-white dark:bg-gray-900 w-full max-w-md lg:max-w-lg rounded m-5"
105 |           onSubmit={saveProject}
106 |         >
107 |           <h1 className="p-7 pb-0 dark:text-white font-bold text-xl">
108 |             {id ? "Edit" : "Create"} Project:
109 |           </h1>
110 |           <hr className="my-5 border-gray-300 dark:border-gray-600" />
111 |           <div className="p-7 pt-0">
112 |             <div className="flex justify-between items-center mb-3">
113 |               <div className="w-full">
114 |                 <label htmlFor="taskTile" className="sr-only">
115 |                   Project title
116 |                 </label>
117 |                 <input
118 |                   name="taskTile"
119 |                   type="text"
120 |                   placeholder="Project title"
121 |                   className="outline-none w-full focus:border-b-2 focus:border-gray-500 pb-1 font-semibold bg-transparent dark:text-white"
122 |                   value={name}
123 |                   onChange={(event) => {
124 |                     setName(event.target.value);
125 |                   }}
126 |                 />
127 |               </div>
128 |             </div>
129 |             <label htmlFor="taskBody" className="sr-only">
130 |               Project description
131 |             </label>
132 |             <textarea
133 |               name="taskBody"
134 |               id="taskBody"
135 |               className="w-full outline-none bg-transparent dark:text-gray-50"
136 |               placeholder="Project description...."
137 |               rows={5}
138 |               value={description}
139 |               onChange={(event) => {
140 |                 setDescription(event.target.value);
141 |               }}
142 |             />
143 |             <div className="flex gap-5 mt-2.5">
144 |               <button
145 |                 onClick={close}
146 |                 className="w-full bg-gray-200 py-1.5 rounded-md text-gray-700 dark:text-gray-50 hover:text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:hover:text-white dark:hover:bg-gray-800"
147 |               >
148 |                 Cancel
149 |               </button>
150 |               <input
151 |                 type="submit"
152 |                 value="save"
153 |                 className="w-full bg-green-700 py-1.5 rounded-md text-white dark:text-gray-50 hover:text-gray-50 hover:bg-green-600 dark:bg-green-800 dark:hover:text-white dark:hover:bg-green-900"
154 |               />
155 |             </div>
156 |           </div>
157 |         </form>
158 |       </div>
159 |     </>
160 |   );
161 | }
162 | 
163 | export default ProjectForm;
164 | 


--------------------------------------------------------------------------------
/src/components/SideBar.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState, useEffect } from "react";
  2 | import AuthContext from "../context/AuthContext";
  3 | import axios from "axios";
  4 | import { Link } from "react-router-dom";
  5 | 
  6 | const baseURL = process.env.REACT_APP_BACKEND_URL;
  7 | 
  8 | function SideBar({ sidebar }) {
  9 |   const {
 10 |     token,
 11 |     user,
 12 |     setTitle,
 13 |     setMessage,
 14 |     setBadge,
 15 |     setType,
 16 |     badge,
 17 |     projects,
 18 |   } = useContext(AuthContext);
 19 | 
 20 |   const [add, setAdd] = useState(false);
 21 |   const [name, setName] = useState("");
 22 |   const [description, setDescription] = useState("");
 23 | 
 24 |   const saveProject = (event) => {
 25 |     event.preventDefault();
 26 | 
 27 |     if (name === "") {
 28 |       setBadge(true);
 29 |       setType("danger");
 30 |       setTitle("Error");
 31 |       setMessage("Title musn't be empty!");
 32 |     } else if (description === "") {
 33 |       setBadge(true);
 34 |       setTitle("Error");
 35 |       setTitle("Error");
 36 |       setType("danger");
 37 |       setMessage("Body musn't be empty!");
 38 |     } else {
 39 |       const data = new FormData();
 40 |       data.append("name", name);
 41 |       data.append("description", description);
 42 | 
 43 |       axios
 44 |         .post(`${baseURL}/project/`, data, {
 45 |           headers: {
 46 |             "Content-Type": "application/json",
 47 |             Authorization: "Bearer " + String(token.access),
 48 |           },
 49 |         })
 50 |         .then((response) => {
 51 |           setBadge(true);
 52 |           setTitle("Successful operation");
 53 |           setMessage("Task deleted successfully");
 54 |           setType("success");
 55 |           setName("");
 56 |           setDescription("");
 57 |           setAdd(false);
 58 |         })
 59 |         .catch((response) => {
 60 |           setType("danger");
 61 |           setTitle("Error");
 62 |           setMessage(response.data);
 63 |           setBadge(true);
 64 |         });
 65 |     }
 66 |   };
 67 | 
 68 |   useEffect(() => {
 69 |     setTimeout(() => {
 70 |       setBadge(false);
 71 |       setTitle("");
 72 |       setMessage("");
 73 |       setType("");
 74 |     }, 5000);
 75 |   }, [badge]);
 76 | 
 77 |   return (
 78 |     <>
 79 |       <div
 80 |         onClick={sidebar}
 81 |         className="absolute h-screen w-screen bg-black/50 dark:bg-gray-100/50"
 82 |       ></div>
 83 |       <div className="absolute w-80 h-screen bg-white dark:bg-gray-900 overflow-y-auto pb-7 sidebar">
 84 |         <div className="p-7">
 85 |           <p className="text-gray-700 dark:text-gray-400">
 86 |             Hello <span className="font-bold">{user.username}</span>,
 87 |           </p>
 88 |           <h1 className="mt-1 text-3xl font-bold dark:text-white">
 89 |             Your projects
 90 |           </h1>
 91 |         </div>
 92 |         <hr className="mb-4 border-gray-300 dark:border-gray-700" />
 93 |         {projects.map((project, key) => {
 94 |           return (
 95 |             <Link
 96 |               key={key}
 97 |               to={`/project/${project.slug}`}
 98 |               onClick={() => {
 99 |                 sidebar();
100 |               }}
101 |               className="block w-full text-left dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700  py-3 px-7 overflow-x-hidden"
102 |               style={{ whiteSpace: "nowrap" }}
103 |             >
104 |               {project.name}
105 |             </Link>
106 |           );
107 |         })}
108 |         <hr className="my-4 border-gray-300 dark:border-gray-700" />
109 |         <div className="px-7">
110 |           {add ? (
111 |             <form onSubmit={saveProject}>
112 |               <div className="flex justify-between items-center mb-3">
113 |                 <div className="w-full">
114 |                   <label htmlFor="taskTile" className="sr-only">
115 |                     Project title
116 |                   </label>
117 |                   <input
118 |                     name="taskTile"
119 |                     type="text"
120 |                     placeholder="Project title"
121 |                     className="outline-none w-full focus:border-b-2 focus:border-gray-500 pb-1 font-semibold bg-transparent dark:text-white"
122 |                     value={name}
123 |                     onChange={(event) => {
124 |                       setName(event.target.value);
125 |                     }}
126 |                   />
127 |                 </div>
128 |               </div>
129 |               <label htmlFor="taskBody" className="sr-only">
130 |                 Project description
131 |               </label>
132 |               <textarea
133 |                 name="taskBody"
134 |                 id="taskBody"
135 |                 className="w-full outline-none bg-transparent dark:text-gray-50"
136 |                 placeholder="Project description...."
137 |                 rows={5}
138 |                 value={description}
139 |                 onChange={(event) => {
140 |                   setDescription(event.target.value);
141 |                 }}
142 |               />
143 |               <div className="flex gap-5 mt-2.5">
144 |                 <button
145 |                   onClick={() => {
146 |                     setAdd(false);
147 |                   }}
148 |                   className="w-full bg-gray-200 py-1.5 rounded-md text-gray-700 dark:text-gray-200 hover:text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:hover:text-white dark:hover:bg-gray-800"
149 |                 >
150 |                   Cancel
151 |                 </button>
152 |                 <input
153 |                   type="submit"
154 |                   value="save"
155 |                   className="w-full bg-green-700 py-1.5 rounded-md text-white dark:text-gray-200 hover:text-gray-50 hover:bg-green-600 dark:bg-green-800 dark:hover:text-white dark:hover:bg-green-900"
156 |                 />
157 |               </div>
158 |             </form>
159 |           ) : (
160 |             <button
161 |               onClick={() => {
162 |                 setAdd(true);
163 |               }}
164 |               className="w-full bg-gray-200 py-2.5 rounded-md text-gray-700 dark:text-gray-200 hover:text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:hover:text-white dark:hover:bg-gray-800"
165 |             >
166 |               Add a project
167 |             </button>
168 |           )}
169 |         </div>
170 |       </div>
171 |     </>
172 |   );
173 | }
174 | 
175 | export default SideBar;
176 | 


--------------------------------------------------------------------------------
/src/pages/SignUp.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useContext, useEffect } from "react";
  2 | import Header from "../components/Header";
  3 | import axios from "axios";
  4 | import { signUpFields } from "../support/formFields";
  5 | import Input from "../components/Input";
  6 | import Submit from "../components/Submit";
  7 | import AuthContext from "../context/AuthContext";
  8 | import jwt_decode from "jwt-decode";
  9 | import { useNavigate } from "react-router-dom";
 10 | import Alert from "../components/Alert";
 11 | 
 12 | const baseURL = process.env.REACT_APP_BACKEND_URL;
 13 | const fields = signUpFields;
 14 | let fieldsState = {};
 15 | fields.forEach((field) => (fieldsState[field.id] = ""));
 16 | 
 17 | function SignUp() {
 18 |   const {
 19 |     setMessage,
 20 |     setTitle,
 21 |     setBadge,
 22 |     remember,
 23 |     setType,
 24 |     setToken,
 25 |     setUser,
 26 |     badge,
 27 |     message,
 28 |     type,
 29 |     title,
 30 |   } = useContext(AuthContext);
 31 | 
 32 |   useEffect(() => {
 33 |     setTimeout(() => {
 34 |       setBadge(false);
 35 |       setTitle("");
 36 |       setMessage("");
 37 |       setType("");
 38 |     }, 2500);
 39 |   }, [badge, setMessage, setTitle, setBadge, setType]);
 40 | 
 41 |   const [loginState, setLoginState] = useState(fieldsState);
 42 |   const [phase, setPhase] = useState(0);
 43 |   const navigate = useNavigate();
 44 | 
 45 |   const register = (event) => {
 46 |     event.preventDefault();
 47 | 
 48 |     const formData = new FormData();
 49 |     formData.append("first_name", loginState["firstname"]);
 50 |     formData.append("last_name", loginState["lastname"]);
 51 |     formData.append("email", loginState["email"]);
 52 |     formData.append("username", loginState["username"]);
 53 |     formData.append("password", loginState["password"]);
 54 |     formData.append("password2", loginState["confirm"]);
 55 | 
 56 |     axios
 57 |       .post(`${baseURL}/register/`, formData, {
 58 |         headers: {
 59 |           "Content-Type": "application/json",
 60 |         },
 61 |       })
 62 |       .then((response) => {
 63 |         setTimeout(() => {
 64 |           axios
 65 |             .post(
 66 |               `${baseURL}/token/`,
 67 |               JSON.stringify({
 68 |                 username: loginState["username"],
 69 |                 password: loginState["password"],
 70 |               }),
 71 |               {
 72 |                 headers: {
 73 |                   "Content-Type": "application/json",
 74 |                 },
 75 |               }
 76 |             )
 77 |             .then((response) => {
 78 |               remember(false);
 79 |               setToken(response.data);
 80 |               setUser(jwt_decode(response.data.access));
 81 |               navigate("/projects");
 82 |             })
 83 |             .catch((response) => {});
 84 |         }, 1000);
 85 |       })
 86 |       .catch((response) => {
 87 |         setPhase(0);
 88 |         setBadge(true);
 89 |         setType("danger");
 90 | 
 91 |         if (response.response.data.email) {
 92 |           setTitle("Email Error");
 93 |           setMessage("This email is already used");
 94 |         } else if (response.response.data.username) {
 95 |           setTitle("Username Error");
 96 |           setMessage(response.response.data.username);
 97 |         } else if (response.response.data.password) {
 98 |           setTitle("Password Error");
 99 |           setMessage(response.response.data.password[0]);
100 |         } else {
101 |           setTitle("Sign Up error");
102 |           setMessage("An error has occured!");
103 |         }
104 |       });
105 |   };
106 | 
107 |   const handleChange = (e) => {
108 |     setLoginState({ ...loginState, [e.target.id]: e.target.value });
109 |   };
110 | 
111 |   return (
112 |     <>
113 |       {badge && (
114 |         <Alert
115 |           type={type}
116 |           title={title}
117 |           message={message}
118 |           close={() => {
119 |             setBadge(false);
120 |           }}
121 |         />
122 |       )}
123 |       <div className="grid lg:grid-cols-2 min-h-screen dark:bg-gray-900 dark:text-white">
124 |         <div className="bg-gray-100 dark:bg-gray-800 hidden lg:grid place-items-center">
125 |           <div className="h-64 w-64 dark:bg-white bg-gray-900 rounded-full" />
126 |           <div className="absolute bottom-0 h-1/2 w-1/2 dark:bg-gray-800/50 bg-gray-100/50 backdrop-blur-lg" />
127 |         </div>
128 |         <div className="grid place-items-center">
129 |           <div className="max-w-sm w-full space-y-10">
130 |             <Header
131 |               heading="Create a new account"
132 |               paragraph="Already have an account? "
133 |               linkName="Sign In"
134 |               linkUrl="/signin"
135 |             />
136 |             <form className="space-y-6 px-5" onSubmit={register}>
137 |               <div className="flex-row mb-10">
138 |                 {fields.slice(phase * 3, (phase + 1) * 3).map((field) => (
139 |                   <Input
140 |                     key={field.id}
141 |                     handleChange={handleChange}
142 |                     value={loginState[field.id]}
143 |                     labelText={field.labelText}
144 |                     labelFor={field.labelFor}
145 |                     id={field.id}
146 |                     name={field.name}
147 |                     type={field.type}
148 |                     isRequired={field.isRequired}
149 |                     placeholder={field.placeholder}
150 |                   />
151 |                 ))}
152 |               </div>
153 |               {phase === 0 && (
154 |                 <button
155 |                   onClick={() => {
156 |                     setPhase(phase + 1);
157 |                   }}
158 |                   className="group font-semibold relative w-full flex justify-center py-2 px-4 border border-transparent rounded-md text-white bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-600"
159 |                 >
160 |                   Next
161 |                 </button>
162 |               )}
163 |               {phase === 1 && (
164 |                 <div className="grid grid-cols-2 gap-x-5">
165 |                   <button
166 |                     onClick={() => {
167 |                       setPhase(phase - 1);
168 |                     }}
169 |                     className="group h-fit font-semibold  relative flex justify-center py-2 px-4 border border-transparent rounded-md text-white bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-600"
170 |                   >
171 |                     Back
172 |                   </button>
173 |                   <Submit text="Sign Up" className="mt-0" />
174 |                 </div>
175 |               )}
176 |             </form>
177 |           </div>
178 |         </div>
179 |       </div>
180 |     </>
181 |   );
182 | }
183 | 
184 | export default SignUp;
185 | 


--------------------------------------------------------------------------------
/src/static/24.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 | 	 viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
  5 | <style type="text/css">
  6 | 	.st0{fill:#EC8C92;}
  7 | 	.st1{fill:#FFFFFF;}
  8 | 	.st2{fill:#274D76;}
  9 | 	.st3{fill:#FFF3A1;}
 10 | 	.st4{fill:#F2BDBA;}
 11 | 	.st5{fill:#93B4F6;}
 12 | 	.st6{fill:#74BAAB;}
 13 | </style>
 14 | <g id="BG">
 15 | 	<g>
 16 | 		<g>
 17 | 			<circle class="st0" cx="958.91" cy="513.36" r="377.5"/>
 18 | 		</g>
 19 | 	</g>
 20 | 	<path class="st1" d="M630.55,433.08l-1.97-0.34c0.1-0.58,10.48-58.45,50.61-102.83l1.48,1.34
 21 | 		C640.93,375.2,630.65,432.51,630.55,433.08z"/>
 22 | 	<path class="st1" d="M685.25,293.23l-1.65-1.12c0.32-0.47,32.44-47.06,83.97-69.79l0.81,1.83
 23 | 		C717.39,246.64,685.57,292.77,685.25,293.23z"/>
 24 | 	<path class="st1" d="M1314.37,506.51h-2c0-71.77-32.57-136.82-32.9-137.47l1.78-0.9C1281.58,368.79,1314.37,434.25,1314.37,506.51z
 25 | 		"/>
 26 | 	<path class="st1" d="M1275.43,469.09c-1.54-28.59-10.85-52.65-10.94-52.89l1.86-0.73c0.09,0.24,9.51,24.59,11.08,53.51
 27 | 		L1275.43,469.09z"/>
 28 | 	<g>
 29 | 		<path d="M567.81,419.48l-1.96-0.42c0.12-0.58,12.75-58.15,57.01-116.33l1.59,1.21C580.46,361.77,567.93,418.91,567.81,419.48z"/>
 30 | 		<path d="M630.33,258.59l-1.53-1.28c0.12-0.14,11.85-14.12,26.81-28.24l1.37,1.45C642.1,244.56,630.44,258.45,630.33,258.59z"/>
 31 | 		<path d="M679.79,230.45l-1.52-1.3c0.17-0.2,17.31-20,50.02-42.32c30.17-20.59,80.15-47.61,146.96-59.46l0.35,1.97
 32 | 			c-66.46,11.79-116.18,38.67-146.18,59.14C696.92,210.65,679.95,230.25,679.79,230.45z"/>
 33 | 		<path d="M1335.45,384.7c-16.83-68.6-70.23-127.82-70.77-128.41l1.48-1.35c0.54,0.59,54.28,60.2,71.23,129.28L1335.45,384.7z"/>
 34 | 		<path d="M1350.28,484.57c-1.99-24.95-6.75-46.79-10.39-60.72l1.94-0.51c3.66,14.01,8.45,35.97,10.45,61.07L1350.28,484.57z"/>
 35 | 		<path d="M1361.13,578.87l-1.95-0.45c1.72-7.44,3.22-15.51,4.46-23.98l1.98,0.29C1364.37,563.25,1362.85,571.37,1361.13,578.87z"/>
 36 | 		<path d="M1369.32,517.3l-2-0.11c1.57-28.8,0.18-56.57-3.47-69.1l1.92-0.56C1369.48,460.26,1370.9,488.3,1369.32,517.3z"/>
 37 | 		<path d="M1337.85,608.41l-1.9-0.61c3.51-10.92,6.49-26.12,8.86-45.15l1.98,0.25C1344.41,582.05,1341.4,597.36,1337.85,608.41z"/>
 38 | 		<path d="M1348.59,546.19l-1.99-0.18c0.73-7.92,1.05-13.18,1.05-13.24l2,0.12C1349.64,532.94,1349.32,538.25,1348.59,546.19z"/>
 39 | 		<path d="M1146.09,169.33c-52.41-33.36-140.19-44.82-141.07-44.93l0.25-1.98c0.22,0.03,22.45,2.89,50.9,9.86
 40 | 			c26.28,6.44,63.39,17.8,91,35.37L1146.09,169.33z"/>
 41 | 		<path d="M1102.37,133.42c-14.06-6.2-46.73-13.57-47.06-13.64l0.44-1.95c0.33,0.07,33.19,7.48,47.43,13.77L1102.37,133.42z"/>
 42 | 		<path d="M676.91,801.94c-4.24-3.35-8.43-6.86-12.45-10.42l1.33-1.5c4,3.54,8.16,7.03,12.37,10.35L676.91,801.94z"/>
 43 | 		<path d="M643.12,770.54c-57.31-62.5-68.29-130.7-68.4-131.38l1.98-0.3c0.1,0.68,11.01,68.3,67.89,130.33L643.12,770.54z"/>
 44 | 		<path d="M658.83,765.37c-20.52-16.92-39.7-55.53-39.89-55.92l1.79-0.88c0.19,0.38,19.19,38.61,39.37,55.26L658.83,765.37z"/>
 45 | 		<path d="M857.59,893.77c-29.17-5.58-57.99-15.5-85.66-29.49l0.9-1.79c27.51,13.9,56.15,23.76,85.14,29.31L857.59,893.77z"/>
 46 | 		<path d="M736.59,843.67c-14.34-9.6-22.37-16.72-22.45-16.79l1.33-1.49c0.08,0.07,8.02,7.11,22.23,16.62L736.59,843.67z"/>
 47 | 		<path d="M977.02,914.78l-0.1-2c7.4-0.36,14.64-0.92,21.51-1.66l0.22,1.99C991.74,913.86,984.46,914.42,977.02,914.78z"/>
 48 | 		<path d="M950.73,915.24c-45.78-0.5-84.14-7.36-84.53-7.43l0.36-1.97c0.38,0.07,38.59,6.91,84.19,7.4L950.73,915.24z"/>
 49 | 	</g>
 50 | 	<path class="st1" d="M731.93,784.04c-63.08-44.23-86.32-114.39-86.55-115.09l1.9-0.62c0.23,0.7,23.28,70.24,85.8,114.07
 51 | 		L731.93,784.04z"/>
 52 | 	<path class="st1" d="M869.85,860.57c-49.51-8.7-99.08-41.84-99.57-42.18l1.12-1.66c0.49,0.33,49.72,33.24,98.8,41.86L869.85,860.57
 53 | 		z"/>
 54 | 	<path class="st1" d="M788.4,800.46c-13.18-4.13-29.09-18.88-29.76-19.5l1.36-1.46c0.16,0.15,16.25,15.06,28.99,19.06L788.4,800.46z
 55 | 		"/>
 56 | </g>
 57 | <g id="Astro">
 58 | 	<g>
 59 | 		<path class="st1" d="M1025.28,189.98c-10.05,6.12-53.76,31.7-85.31,55.76c-5.02,3.83-8.76,9.08-10.73,15.08
 60 | 			c-4.09,12.49-7.76,26.36-8.8,30.38c-0.24,0.93-0.12,1.92,0.36,2.75c2.95,5.2,19.12,23.1,107.22,54.26l20.68-44.73
 61 | 			c0,0-13.06-83.23-17.07-111.03C1031.22,189.66,1028.01,188.32,1025.28,189.98z"/>
 62 | 	</g>
 63 | 	<g>
 64 | 		<path class="st2" d="M1224.26,690.22l-108.45,12.74c-17.59,2.07-32.97,12.84-40.92,28.67l-48.54,97.53
 65 | 			c-2.07,4.12-6.67,6.31-11.17,5.32l-17.25-3.8c-12.1-2.67-24.19,4.51-27.64,16.41l-2.7,9.33c-1.5,5.17,0.86,10.67,5.64,13.15
 66 | 			l79.63,41.27c5.28,2.73,11.77,0.9,14.84-4.19l80.03-130.33l110.61-6.97L1224.26,690.22z"/>
 67 | 	</g>
 68 | 	<g>
 69 | 		<polygon class="st2" points="1162.88,606.94 1170.79,587.1 1236.22,590.61 1212.45,680.44 		"/>
 70 | 	</g>
 71 | 	<g>
 72 | 		<path class="st2" d="M1154.62,558.99c0,0,7.19-18.61,7.08-28.72c-0.14-13.45,1.32-40.82-7.25-39.53
 73 | 			c-5.22,0.78-6.78,13.44-7.42,18.88c-0.25,2.15-1.08,4.21-2.52,5.83c-2.05,2.31-4.96,3.2-6.49-7.27
 74 | 			c-2.49-17.06-1.95-49.89-11.86-43.88c-5.02,3.05-2.33,32.86-5.17,31.54c-2.84-1.32-2.49-46.34-14.57-41.43
 75 | 			c-3.99,1.62-3.09,23.13-2.27,35.16c0.05,0.67-0.93,0.81-1.08,0.15c-1.63-7.27-4.13-17.86-6.13-24.07
 76 | 			c-2.15-6.69-7.15-3.19-7.15,1.69c0,10.5,1.78,32.61,1.78,32.61L1154.62,558.99z"/>
 77 | 	</g>
 78 | 	<g>
 79 | 		<path class="st3" d="M1322.57,618.72l18,31l-42,135c-3.94,13.69-19.6,22.23-33.66,19.89l-54.06-6c-6.94-1.16-9.43,2.4-7,9
 80 | 			l23.33,107.05c3.96,10.77-2.18,22.61-13.27,25.58l-80.44,21.5c-7.79,2.08-15.57-3.36-16.28-11.39l-4.63-27.63
 81 | 			c-0.19-2.11-0.79-10.58,4-14c7-5,18-12,18-12c3.71-1.99,4.09-7.94,3-12L1107,765.88c-4.99-18.59,6.58-33,25.57-36.16
 82 | 			c24-4,64-13,64-13l17.13-111.75c2.25-8.87,10.44-14.94,19.59-14.5l26.28,1.25L1322.57,618.72z"/>
 83 | 	</g>
 84 | 	<g>
 85 | 		<g>
 86 | 			
 87 | 				<ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 414.5956 1682.587)" class="st3" cx="1270.32" cy="579.36" rx="43.05" ry="43.05"/>
 88 | 		</g>
 89 | 	</g>
 90 | 	<g>
 91 | 		<path class="st1" d="M879.4,578.86l143.06-129.42c7.39-6.69,18.2-6.16,26.95-1.39c17.69,9.65,48.03,26.9,75.09,56.22
 92 | 			c22.72,24.62,60.47,63.71,64.93,96.8c0.51,3.79-0.81,7.59-3.46,10.34c-43.62,45.19-132.35,128.42-142.27,136.88
 93 | 			c-23.48,20.03-84.37-25.19-119.06-65.51C910.15,665.95,861.27,595.96,879.4,578.86z"/>
 94 | 	</g>
 95 | 	<g>
 96 | 		<g>
 97 | 			<path class="st3" d="M1345.47,626.64c-13.28-13.07-35.98-12.29-49.98-0.29l-49.63,45.2c-2.72,2.26-6.75,1.91-9.04-0.78
 98 | 				l-35.16-41.1c-5.66-6.63-9.08-14.87-9.78-23.55l-1.27-15.67c-0.09-1.06-0.34-2.1-0.76-3.08l-6.41-16.5
 99 | 				c-0.88-2.27-3.94-2.55-5.27-0.51c-1.8,2.77-2.78,6.94-2.78,11.08c0,8,1.88,16.64-1.12,16.64c-4,0-8.75-7.86-10.78-15.24
100 | 				c-2.33-8.49-3.49-15.26-7.6-19.02c-1.86-1.7-5.17-0.58-5.68,2.25c-1.19,6.52,0.18,18.8,0.29,25.77c0.03,2-1.76,1.96-2.31-0.47
101 | 				c-1.69-7.53-6.3-30.54-6.3-30.54c-0.73-3.03-4.91-3.38-6.12-0.5c-3.46,8.27-2.17,26.26-1.54,32.95c0.06,0.59-0.74,0.83-1.01,0.31
102 | 				c-1.67-3.12-4.62-9.26-6.73-17.08c-0.47-1.74-2.85-2.12-3.73-0.55c-2.65,4.77-1.3,16.16-0.59,20.84
103 | 				c0.07,0.44-0.53,0.64-0.75,0.26c-1.15-2.02-2.03-3.93-2.92-6.21c-1.15-2.95-3.62-1.26-3.83,0.61c-0.7,6.31-1.06,15.33,1.62,26.89
104 | 				c0.97,4.17,4.48,16.68,20.21,35.49l84,93c15,19,34.22,13.99,45,6c27-20,76.84-69.27,76.84-69.27
105 | 				C1361.3,667.57,1357.33,638.31,1345.47,626.64z"/>
106 | 		</g>
107 | 	</g>
108 | 	<g>
109 | 		<path class="st4" d="M969.83,656.03c-50.2-53.66-76.37-69.13-89.15-70.56c-2.83-0.32-5.28,1.89-5.26,4.74
110 | 			c0.15,26.14,36.97,78.35,49.21,92.59c27.94,32.49,72.91,68.16,101.61,70.31c2.2,0.16,3.98-1.75,3.73-3.93
111 | 			C1028.23,733.84,1016.11,705.5,969.83,656.03z"/>
112 | 	</g>
113 | 	<g>
114 | 		<path class="st4" d="M921.23,294.68c3.97,9.56,49.59,38.97,106.77,53.54l1.7-3.67c-22.19-19.45-60.55-38.97-89.03-46.32
115 | 			C930.23,295.54,924.54,294.29,921.23,294.68z"/>
116 | 	</g>
117 | 	<path d="M1030.73,209.25c-5.24-4.37-11.47-7.27-18.5-8.62l0.38-1.96c7.37,1.42,13.89,4.46,19.4,9.04L1030.73,209.25z"/>
118 | 	<g>
119 | 		<g>
120 | 			<g>
121 | 				<path class="st5" d="M1107.19,540.95l-21.17-17.73c-3.32-2.78-7.63-4.07-11.93-3.55c-17.15,2.06-61.99,8.09-77.02,16.35
122 | 					c-5.57,3.06-17.63,16.42-17.63,16.42c-4.37,4.53-4.39,11.7-0.04,16.26l27.52,30.41c1.91,2.11,5.13,2.35,7.33,0.55l22-18.02
123 | 					c2.38-1.95,2.62-5.51,0.52-7.77l-4.43-4.74c-1.77-1.66-0.95-4.63,1.43-5.14l71.54-15.36
124 | 					C1108.87,547.84,1110,543.3,1107.19,540.95z M1074.22,571.96c-3.44-2.44-7.72-2.65-10.96,0.03l-66.46,54.89
125 | 					c-4,3.3-4.25,11.33-0.86,15.26c2.63,3.05,7.93,9.13,10.5,12.25c4.75,5.77,12.55,5.95,16.38,2.46l17.94-16.35
126 | 					c1.63-1.48,4.15-1.38,5.65,0.23l3.8,4.08c2.69,2.82,7.13,2.96,9.99,0.32l19.81-18.3c3.75-3.47,3.78-9.39,0.05-12.89l-1.83-1.72
127 | 					c-1.71-1.6-1.69-4.33,0.04-5.9l9.12-8.31c3.4-3.1,4.61-10.05,0.32-14.1C1087.72,583.91,1078.67,575.13,1074.22,571.96z"/>
128 | 			</g>
129 | 		</g>
130 | 	</g>
131 | 	<g>
132 | 		<path d="M929.34,300.03c12.61,9.93,45.57,27.99,86.28,41.2l1.34-2.81c-16.82-14.29-55.13-32.04-86.8-40.06
133 | 			C929.17,298.11,928.53,299.4,929.34,300.03z"/>
134 | 	</g>
135 | 	<g>
136 | 		<path d="M883.98,595.86c5.72-7.24,56.26,39.91,73.39,57.38c29.32,29.89,71.9,87.74,61.64,90.44
137 | 			c-6.39,1.68-45.92-20.46-87.65-67.63C899.61,640.15,880.45,600.33,883.98,595.86z"/>
138 | 	</g>
139 | 	<g>
140 | 		<path class="st2" d="M1221.65,178.66l-1.48-8.98c-1.23-7.47-8.62-11.13-15.76-8.59c-9.36,3.32-21.5,7.26-28.08,12.38
141 | 			c-2.61,2.03-4.03,5.23-3.76,8.52c2.41,29.23,5.17,52.01,6.48,62.07c0.46,3.57-0.72,7.16-3.22,9.75l-29.2,30.37l29.61,15.14
142 | 			l55.43-51.65L1221.65,178.66z"/>
143 | 	</g>
144 | 	<g>
145 | 		<path class="st3" d="M1028.01,348.22l21.18-45.81c3.67-7.93,11.41-13.18,20.13-13.67l43.89-2.43c10.8-0.6,21.31-3.72,30.69-9.11h0
146 | 			c7.68-4.41,17.13-4.37,24.77,0.12l0,0c5.02,2.95,11.36,2.4,15.8-1.37l15.85-13.46c1.82-1.55,2.8-3.86,2.65-6.24
147 | 			c-0.84-12.74-3.51-54.46-3.85-74.8c-0.05-2.83,1.54-5.44,4.08-6.68c10.55-5.15,27.07-7.66,39.73-5.5c3.13,0.53,5.58,3.1,5.78,6.27
148 | 			c0.85,13.88-8.63,28.75-8.63,28.75l8.35,62.77c1.84,13.84-4.07,27.57-15.38,35.75l-52.73,38.12c-4,2.89-8.16,5.57-12.46,8v0
149 | 			c-10.21,5.79-21.13,10.23-32.48,13.2l-40.41,10.57L1028.01,348.22z"/>
150 | 	</g>
151 | 	<g>
152 | 		<polygon class="st2" points="1046.18,307.06 1070.73,303.34 1089.81,323.61 1052.83,358.8 1033.27,336.7 		"/>
153 | 	</g>
154 | 	<g>
155 | 		<g>
156 | 			
157 | 				<ellipse transform="matrix(0.2529 -0.9675 0.9675 0.2529 524.0682 1252.3867)" class="st3" cx="1072.92" cy="286.87" rx="34.4" ry="34.4"/>
158 | 		</g>
159 | 	</g>
160 | 	<g>
161 | 		<g>
162 | 			<g>
163 | 				<path class="st5" d="M984.88,274.27l6.51-10.05c1.1-1.7,0.43-3.98-1.42-4.81l-2.72-1.22c-1.64-0.74-1.85-2.98-0.37-4.01
164 | 					l29.07-20.15c1.47-1.02,1.14-3.28-0.56-3.85l-13.31-4.39c-1.58-0.52-3.3-0.29-4.69,0.63l-28.62,18.95
165 | 					c-1.76,1.16-3.18,2.76-4.14,4.63l-4.02,7.84c-2.03,3.96-0.29,8.81,3.79,10.57l16.39,7.09
166 | 					C982.28,276.15,984.01,275.62,984.88,274.27z M1019.25,269.83l-1.48-0.92c-1.32-0.82-1.82-2.49-1.18-3.9l1.96-4.3
167 | 					c1.15-2.52,0.17-5.5-2.25-6.85l-6.57-3.66c-2.58-1.43-5.83-0.5-7.24,2.09l-19.85,36.18c-1.32,2.41-0.59,5.43,1.69,6.97
168 | 					l7.03,4.73c2.59,1.74,6.12,0.88,7.63-1.85l5.69-10.37c0.85-1.54,2.81-2.06,4.31-1.15l0.78,0.48c1.71,1.05,3.95,0.41,4.85-1.38
169 | 					l5.87-11.6C1021.31,272.71,1020.76,270.77,1019.25,269.83z"/>
170 | 			</g>
171 | 		</g>
172 | 	</g>
173 | 	<g>
174 | 		<g>
175 | 			<path class="st3" d="M1131.76,304.13L1131.76,304.13c-9.62-8.59-24.29-8.08-33.3,1.14l-26.78,27.42
176 | 				c-2.09,2.14-5.17,2.99-8.06,2.23l-39.81-10.45c-2.75-0.72-5.24-2.2-7.19-4.27l-11.43-12.12c-0.95-1.01-2.66-0.83-3.27,0.41
177 | 				c-0.63,1.27-1.02,3.35-0.37,6.72c1.44,7.5-2.91,7.48-7.33,3.94c-2.28-1.82-5.81-4.66-8.69-6.99c-2.19-1.77-5.42-0.19-5.43,2.62
178 | 				c-0.02,3.42,0.47,7.34,2.44,9.53c-4.02,12.06,2.73,26.38,13.42,32.16c12.34,6.67,78.85,27.22,78.85,27.22
179 | 				c6.46,1.91,13.45,0.12,18.2-4.65l39.77-39.94C1142.54,329.32,1142.07,313.34,1131.76,304.13z"/>
180 | 		</g>
181 | 	</g>
182 | 	<g>
183 | 		<g>
184 | 			<path d="M1052.16,264.09c-4.26,3.09-7.58,7.54-9.55,12.84c-4.44,11.95-0.25,24.79,9.11,32.46c5.04,4.13,12.73,5.11,20.37,0.39
185 | 				c4.97-3.07,8.73-8.01,10.91-13.87c3.82-10.27,1.24-20.92-5.58-28.55C1071.82,261.11,1059.26,258.93,1052.16,264.09z"/>
186 | 		</g>
187 | 	</g>
188 | 	<g>
189 | 		<path class="st1" d="M803.13,651.44c-3.82-14.56-8.07-33.32-10.31-39.69c-0.09-0.25-0.4-0.94-0.63-1.09
190 | 			c-2.01-1.34-13.81-6.99-27.47-4.71c-4.23,0.71-18.75-0.64-24.56,3.77c-1.8,1.36-2.48,3.66-2.64,5.91
191 | 			c-0.82,12.13-2.84,49.61-2.5,62.26c0.06,2.27,1.62,4.31,3.85,4.76c24.61,5.01,53.23,2.7,65.98-6.93c1.41-1.07,2.2-2.76,2.04-4.53
192 | 			C806.57,667.8,805.69,661.19,803.13,651.44z"/>
193 | 	</g>
194 | 	<g>
195 | 		<path class="st2" d="M662.51,554.31l-40.66-12.71c-2.11-0.66-3.43-2.76-3.12-4.95l6.28-43.93c0.44-3.1-1.71-5.97-4.81-6.42
196 | 			l-25.4-3.88c-1.19-0.17-3.75,0.72-3.75,4.14c0,1.67,0.46,2.6,1.31,3.62l4.59,5.53c0.86,1.03,1.23,2.39,1.01,3.71l-5.43,33.6
197 | 			l18.59,39.59l45.17,4.83L662.51,554.31z"/>
198 | 	</g>
199 | 	<g>
200 | 		<path class="st3" d="M582.18,497.63l35.34,55.59c0.95,1.5,2.47,2.56,4.2,2.95l7.92,1.76c2.63,0.58,5.38,0.12,7.67-1.28l3.06-1.87
201 | 			c6.07-3.72,13.46-4.59,20.23-2.38l48.48,15.81l-14.17,44.19l-47.8-11.66c-4.15-1.01-8.23-2.25-12.24-3.72
202 | 			c-5.96-2.18-14.68-5.51-19.99-8.12c-13.69-6.73-18.18-11.97-20.41-16.15c-7.09-13.29-24.61-43.41-26.82-46.97
203 | 			c-2.87-4.62-9.18-5.02-12.53-5.89c-2.07-0.54-3.59-1.45-4.43-3.42l-0.43-1c-0.51-1.19-0.11-2.57,0.95-3.31l23.22-16.22
204 | 			C577.01,494.14,580.58,494.91,582.18,497.63z"/>
205 | 	</g>
206 | 	<g>
207 | 		<path class="st2" d="M730.7,598.46l42.78-0.03c3.49-0.02,7.09,1.02,8.93,3.13c1.1,1.26,3.06,3.98,4.1,5.29
208 | 			c0.72,0.92,0.46,2.11-0.58,1.86l-5.19-1.86l0.92,3.18c0.63,1.72-0.94,2.5-2.27,1.83l-5.17-2.44l0,0c0.13,1.44-1.39,2.46-2.68,1.79
209 | 			c-2.38-1.24-3.29-2.04-6.58-4.28c-0.82-0.55-1.79-0.83-2.78-0.78c-8.82,0.44-15.04,1.54-20.42,3.74
210 | 			c-3.99,1.63-4.09,5.78-4.16,7.08c-0.12,2.19-3.08,8.75-3.08,8.75l-27.85-5.73l-4.93-18.54L730.7,598.46z"/>
211 | 	</g>
212 | 	<g>
213 | 		<g>
214 | 			<ellipse class="st3" cx="714.44" cy="580.52" rx="21.96" ry="22.88"/>
215 | 		</g>
216 | 	</g>
217 | 	<g>
218 | 		<path class="st1" d="M723.99,634.54c0,0-13.51,23.86-15.54,37.96c-0.65,4.54,2.66,8.71,7.22,9.25c4.04,0.47,10.29,0.7,19.7-0.05
219 | 			c-1.36-4.25,1.74-42.03,3.07-57.3c0.18-2.05-2.35-3.15-3.74-1.63L723.99,634.54z"/>
220 | 	</g>
221 | 	<g>
222 | 		<path class="st1" d="M770.11,623.17c2.89,6.02,13.8,28.99,16.13,38.21c0.29,1.14-0.61,2.22-1.78,2.15
223 | 			c-10.67-0.71-20.97,0.85-25.36,1.65c-1.12,0.2-2.12-0.71-2.03-1.84l2.98-36.79c0.05-0.65,0.47-1.22,1.07-1.46l6.77-2.76
224 | 			C768.74,621.98,769.71,622.35,770.11,623.17z"/>
225 | 	</g>
226 | 	<path class="st5" d="M783.73,653.95c-4.94-12.92-14.33-32.24-14.33-32.24l-2.21,0.9l10.48,40.74c2.91-0.03,5.95,0.15,8.99,0.44
227 | 		C786.52,661.85,785.37,658.26,783.73,653.95"/>
228 | 	<g>
229 | 		<path class="st2" d="M786.67,663.79c-0.01-0.17-8.07-6.71-8.07-6.71c-1.38-1.05-3.24-1.19-4.75-0.36l-15.75,8.63
230 | 			C761.9,664.62,774.28,662.59,786.67,663.79z"/>
231 | 	</g>
232 | 	<g>
233 | 		<path d="M706.99,587.24c-0.37,3.99,0.52,7.74,2.29,10.89c1.19,2.11,3.43,3.47,5.86,3.47c0.01,0,0.03,0,0.04,0
234 | 			c10.94,0,19.81-9.24,19.81-20.64c0-0.02,0-0.05,0-0.07c-0.02-4.81-3.46-8.9-8.01-9.66c-1.39-0.23-2.84-0.29-4.33-0.16
235 | 			C714.43,571.82,707.78,578.69,706.99,587.24z"/>
236 | 	</g>
237 | 	<g>
238 | 		<path class="st3" d="M777.84,626.09l-4.72,0.55c-0.38,0.04-0.57-0.44-0.27-0.67l3.96-2.99c1.55-1.17,0.62-3.63-1.31-3.48
239 | 			c-4.29,0.33-9.82,0.79-13.77,1.21c-0.65,0.07-0.94-0.81-0.37-1.14c1.77-1.01,2.7-1.5,4.54-2.53c2.63-1.48,0.04-3.56-2.97-3.45
240 | 			c-5.63,0.22-11.24,3.61-15.51,3.61c-7.72,0-29.09-1.04-29.09-1.04c-1.69-0.06-3.26-0.92-4.21-2.32l-17.36-25.69
241 | 			c-4.86-6.42-14.03-7.61-20.36-2.64c-6.01,4.71-7.3,13.3-2.93,19.57l25.42,32.57c2.35,3.01,5.92,4.83,9.74,4.96l55.35-0.84
242 | 			c6.6,0.01,11.24-5.97,11.83-9.08c1.7-1.15,2.91-2.41,3.78-3.55C780.6,627.8,779.52,625.89,777.84,626.09z"/>
243 | 	</g>
244 | 	<g>
245 | 		<path class="st1" d="M709.73,389.45c0,0,4.7,17.66,16.55,41.6c16.8,33.93,25,47.52,33.64,62.09
246 | 			c10.52,17.74,42.64,35.73,104.61-2.66c64.21-39.77,54.42-65.97,50.16-75.09c-2.52-5.4-22.97-43.62-39.94-72.63
247 | 			c-6.62-11.32-12.87-20.99-17.03-27.23c-3.46-5.19-9.02-8.56-15.22-9.26c-16.9-1.91-52.7-1.72-89.51,24.95
248 | 			C702.24,368,709.73,389.45,709.73,389.45z"/>
249 | 	</g>
250 | 	<g>
251 | 		<path class="st4" d="M917.27,434.81c1.69-8.53-1.99-17.25-9.16-22.19c-18.18-12.54-53.79-13.08-98.94,15.44
252 | 			c-49.61,31.34-50.76,57.86-43.38,72.55c14.46,14.27,45.64,22.76,98.73-10.13C902.57,466.92,914.63,448.12,917.27,434.81z"/>
253 | 	</g>
254 | 	<g>
255 | 		<path d="M775.08,499.64c-6.17-8.83-6.29-36.49,40.02-66.28c46.68-30.03,87.63-21.49,93.65-5.3c6.02,16.19-27.52,45.84-64.88,64.82
256 | 			C810.07,510.06,781.92,509.43,775.08,499.64z"/>
257 | 	</g>
258 | 	<g>
259 | 		<path d="M734.98,675.28c-4.07-0.01-8.36,0.21-12.65,0.55c-9.66,0.77-10.96,3.81-10.05,4.74c0.85,0.87,2.14,1.34,3.39,1.48
260 | 			c4.04,0.47,12.38,0.74,21.26-0.3C734.98,679.6,734.99,678.56,734.98,675.28z"/>
261 | 	</g>
262 | 	<g>
263 | 		<path class="st1" d="M802.91,615.74c-2.89-3.57-4.54-3.13-9.82-3.21c2.24,7.74,6.14,24.05,10.04,38.92
264 | 			c3.9,14.86,3.92,22.42,3.92,22.42c4.9-0.65,8.85-1.38,18.44-2.99c7.83-1.32,8.53-7.8,4.48-13.8L802.91,615.74z"/>
265 | 	</g>
266 | 	<g>
267 | 		<path class="st4" d="M803.22,676.87c0.56-1.42-0.36-2.84-2.71-4c-4.67-2.32-13.81-4.14-31.62-3.14
268 | 			c-16.42,0.92-24.75,4.98-28.94,8.56c-2.24,1.92-2.09,3.4-0.11,4.6C764.52,688.88,790.05,685.54,803.22,676.87z"/>
269 | 	</g>
270 | 	<g>
271 | 		<path d="M826.51,671.06c1.98-0.51,2.29-2.63,1.26-3.37c-0.44-0.31-0.96-0.63-1.58-0.95c-4.87-2.5-12.65-2.47-20.09-1.58
272 | 			c0.94,5.78,1.11,7.17,0.05,9.13C812.21,673.87,825.92,671.21,826.51,671.06z"/>
273 | 	</g>
274 | 	<g>
275 | 		<g>
276 | 			<g>
277 | 				<path class="st5" d="M768.87,383.6c-2.91-7.32-3-15.48,0.43-20.83c0.8-1.25,2.27-3.29,1.53-4.57l-6.44-9.34
278 | 					c-1.36-2.36-4.91-0.88-6.54,1.31c-8.03,10.83-11.03,24.94-5.03,40c8.81,22.15,25.17,28.63,42.03,24.51
279 | 					c2.73-0.67,4.06-3.76,2.65-6.19l-4.92-8.15c-1.08-1.87-3.15-2.9-5.31-2.73C779.99,398.2,772.79,393.44,768.87,383.6z
280 | 					 M816.9,357.47c-12.75-20.19-33.01-23.27-46.28-18.23c-2.32,0.88-3.37,3.57-2.13,5.72l7.24,9.81c0.86,1.48,2.56,2.2,4.23,1.88
281 | 					c7.08-1.37,15.78,1.37,21.51,10.03c4.55,6.88,4.54,17.65-2.68,24.57c-1.58,1.52-1.42,4.13-0.32,6.03l4.62,7.97
282 | 					c1.83,3.15,5.92,3.45,8.71,1.12C824.88,395.45,825.84,371.63,816.9,357.47z"/>
283 | 			</g>
284 | 		</g>
285 | 	</g>
286 | 	<path d="M1102.53,356.06c-0.69,0-1.39-0.18-2.03-0.55c-4.9-2.85-13.74-8.42-17.89-13.59c-1.17-1.46-1.14-3.59,0.09-5.07v0
287 | 		l12.99-15.66c1.37-1.66,3.8-1.95,5.53-0.67c4.08,3.03,11.51,8.63,15.46,12.13c1.59,1.41,1.84,3.75,0.58,5.45
288 | 		c-4.54,6.14-9.07,12.78-11.36,16.18C1105.11,355.43,1103.83,356.06,1102.53,356.06z M1098.8,321.72c-0.59,0-1.18,0.25-1.58,0.74
289 | 		l-12.99,15.66c-0.62,0.75-0.65,1.81-0.06,2.54c4.1,5.11,13.49,10.88,17.34,13.12c0.93,0.54,2.12,0.27,2.72-0.62
290 | 		c2.31-3.42,6.85-10.08,11.41-16.26c0.63-0.86,0.51-2.05-0.3-2.76c-3.89-3.45-11.27-9.01-15.33-12.02
291 | 		C1099.65,321.85,1099.22,321.72,1098.8,321.72z"/>
292 | 	<path d="M1291.54,712.06c-0.25,0-0.5-0.01-0.76-0.04c-2.08-0.2-3.95-1.21-5.26-2.83l-21.55-26.75c-2.56-3.18-2.19-7.81,0.83-10.55
293 | 		l23.82-21.53c1.57-1.42,3.59-2.12,5.69-1.97c2.11,0.15,4.01,1.12,5.37,2.73l22.8,27.17c2.73,3.25,2.3,8.11-0.94,10.84l-25.06,21.1
294 | 		C1295.08,711.43,1293.35,712.06,1291.54,712.06z M1266.15,673.38c-2.24,2.03-2.51,5.45-0.62,7.81l21.55,26.75
295 | 		c0.97,1.2,2.35,1.95,3.89,2.1c1.54,0.15,3.04-0.32,4.22-1.31l25.06-21.1c2.4-2.02,2.71-5.62,0.7-8.03l-22.8-27.17
296 | 		c-1-1.2-2.42-1.92-3.98-2.02c-1.56-0.1-3.06,0.41-4.21,1.46L1266.15,673.38z"/>
297 | 	<path d="M1173.82,665.15l-1.56-1.25l11.23-14.09c0.66-0.83,0.43-1.7-0.01-2.24c-0.44-0.54-1.25-0.94-2.2-0.46l-12.69,6.53
298 | 		c-1.66,0.85-3.54,0.44-4.7-1.01c-1.16-1.45-1.12-3.38,0.08-4.8l11.29-13.33c0.7-0.83,0.47-1.72,0.03-2.27
299 | 		c-0.45-0.55-1.26-0.97-2.22-0.46l-32.71,16.65l-0.91-1.78l32.7-16.65c1.64-0.87,3.54-0.47,4.7,0.98c1.17,1.46,1.14,3.39-0.06,4.82
300 | 		l-11.29,13.33c-0.7,0.82-0.48,1.71-0.04,2.26c0.44,0.55,1.25,0.97,2.21,0.48l12.68-6.53c1.63-0.84,3.5-0.45,4.66,0.96
301 | 		c1.16,1.41,1.17,3.33,0.03,4.76L1173.82,665.15z"/>
302 | 	<rect x="1200.91" y="704.9" transform="matrix(0.3477 -0.9376 0.9376 0.3477 135.1948 1606.1246)" width="41.98" height="2"/>
303 | 	<rect x="1257.61" y="693.32" transform="matrix(0.9433 -0.332 0.332 0.9433 -167.2107 458.6169)" width="2" height="50.71"/>
304 | 	<rect x="1250.19" y="727.51" transform="matrix(0.9893 -0.1461 0.1461 0.9893 -94.6154 190.7698)" width="2" height="23.77"/>
305 | 	<rect x="1217.49" y="727.1" transform="matrix(0.1875 -0.9823 0.9823 0.1875 281.8567 1796.9342)" width="19.18" height="2"/>
306 | 	<rect x="1075.09" y="338.93" transform="matrix(0.8789 -0.477 0.477 0.8789 -40.4257 556.6789)" width="2" height="38.04"/>
307 | 	<rect x="1068.82" y="358.45" transform="matrix(0.9611 -0.2763 0.2763 0.9611 -60.1928 309.9211)" width="2" height="20.28"/>
308 | 	<rect x="1044.42" y="357.72" transform="matrix(0.0591 -0.9983 0.9983 0.0591 638.3967 1394.7559)" width="29.34" height="2"/>
309 | 	<path d="M1006.11,355.32l-1.93-0.52l5.14-19.22c0.32-1.21,1.41-1.96,2.66-1.83c1.24,0.13,2.15,1.1,2.22,2.34l0.57,11.51
310 | 		c0.02,0.32,0.24,0.42,0.38,0.45c0.14,0.03,0.38,0.04,0.53-0.25l7.42-14.64l1.78,0.9l-7.41,14.64c-0.52,1.02-1.61,1.54-2.73,1.3
311 | 		c-1.12-0.24-1.9-1.16-1.96-2.3l-0.57-11.51c-0.02-0.36-0.28-0.44-0.43-0.45c-0.15-0.02-0.42,0.01-0.51,0.35L1006.11,355.32z"/>
312 | 	<rect x="1225.16" y="243.13" transform="matrix(0.1574 -0.9875 0.9875 0.1574 778.4553 1428.2295)" width="2" height="29.64"/>
313 | 	<rect x="1226.05" y="255.19" transform="matrix(0.3638 -0.9315 0.9315 0.3638 529.2371 1314.7266)" width="2" height="29.5"/>
314 | 	<rect x="1222.03" y="268.44" transform="matrix(0.758 -0.6523 0.6523 0.758 111.1803 866.3168)" width="2" height="29.79"/>
315 | 	<path d="M1184.32,807.51l-0.11-0.01l-57.18-6.54l0.23-1.99l57.12,6.53c1.38-0.02,2.13-0.97,2.38-1.85
316 | 		c0.25-0.89,0.08-2.11-1.14-2.83l-65.8-31.06c-2.05-1.22-2.82-3.51-1.96-5.63s3.02-3.23,5.24-2.69l52.19,11.61
317 | 		c1.5,0.36,2.49-0.52,2.89-1.39c0.39-0.85,0.43-2.14-0.73-3.04l-43.72-21.61l0.89-1.79l43.95,21.74c2.06,1.51,2.2,3.87,1.43,5.54
318 | 		c-0.77,1.67-2.66,3.09-5.15,2.5l-52.19-11.61c-1.57-0.38-2.56,0.57-2.94,1.5c-0.38,0.92-0.33,2.29,1.04,3.11l65.8,31.06
319 | 		c1.88,1.12,2.68,3.11,2.13,5.13C1188.12,806.21,1186.41,807.51,1184.32,807.51z"/>
320 | 	<path d="M691.86,618.82c-0.21,0-0.42-0.01-0.63-0.04c-1.25-0.18-2.36-0.89-3.05-1.95l-5.24-8.03c-1.31-2-0.76-4.72,1.23-6.05
321 | 		l6.99-4.69c2-1.34,4.72-0.81,6.07,1.17l4.85,7.1c1.27,1.86,0.93,4.36-0.78,5.82l-6.59,5.62
322 | 		C693.91,618.46,692.9,618.82,691.86,618.82z M693.61,599.33c-0.46,0-0.92,0.13-1.33,0.4l-6.99,4.69c-1.08,0.73-1.38,2.2-0.67,3.3
323 | 		l5.24,8.03c0.38,0.58,0.98,0.96,1.66,1.06c0.69,0.1,1.37-0.1,1.89-0.55l6.59-5.62c0.93-0.8,1.12-2.16,0.42-3.17l-4.85-7.1
324 | 		C695.13,599.69,694.37,599.33,693.61,599.33z"/>
325 | 	<rect x="698.15" y="625.01" transform="matrix(0.6903 -0.7235 0.7235 0.6903 -234.2585 704.7218)" width="15.86" height="2"/>
326 | 	<rect x="703.62" y="632.54" transform="matrix(0.4435 -0.8963 0.8963 0.4435 -174.4377 986.1185)" width="6.58" height="2"/>
327 | 	<rect x="704.49" y="628.27" transform="matrix(0.2051 -0.9787 0.9787 0.2051 -47.9777 1199.4679)" width="19.9" height="2"/>
328 | 	<path d="M738.25,635.09c-0.05,0-0.09,0-0.14,0c-1.33-0.06-2.46-0.91-2.88-2.17l-1.78-5.38l1.9-0.63l1.78,5.38
329 | 		c0.24,0.71,0.87,0.8,1.06,0.8c0.19,0,0.83-0.02,1.13-0.71l1.73-4.05c0.42-0.98,1.29-1.68,2.34-1.87c1.05-0.19,2.11,0.14,2.85,0.9
330 | 		l5.23,5.36c0.46,0.47,1.02,0.42,1.4,0.21c0.38-0.21,0.73-0.66,0.58-1.3l-2.43-10.4l1.95-0.45l2.43,10.4c0.33,1.4-0.3,2.81-1.56,3.5
331 | 		c-1.27,0.69-2.79,0.46-3.8-0.57l-5.23-5.36c-0.28-0.29-0.67-0.41-1.05-0.33c-0.39,0.07-0.71,0.33-0.86,0.69l-1.73,4.05
332 | 		C740.66,634.35,739.53,635.09,738.25,635.09z"/>
333 | 	<rect x="594.9" y="557.3" transform="matrix(0.9459 -0.3246 0.3246 0.9459 -148.5979 225.785)" width="15.14" height="2"/>
334 | 	<rect x="597.14" y="564.25" transform="matrix(0.7684 -0.64 0.64 0.7684 -222.2849 516.304)" width="10.02" height="2"/>
335 | 	<rect x="600.73" y="568.74" transform="matrix(0.3623 -0.9321 0.9321 0.3623 -142.6684 930.9628)" width="16.52" height="2"/>
336 | 	<path d="M557.44,516.81c-0.22,0-0.45-0.02-0.67-0.07l-1.73-0.38l0.43-1.95l1.73,0.38c0.32,0.07,0.65,0,0.91-0.18
337 | 		c0.27-0.19,0.44-0.47,0.48-0.8l0.18-1.4c0.12-0.89,0.61-1.69,1.35-2.2c0.74-0.51,1.67-0.67,2.54-0.46l3.44,0.85
338 | 		c0.37,0.09,0.75,0,1.03-0.25c0.29-0.25,0.43-0.61,0.4-0.99l-0.17-1.92c-0.09-1.02,0.3-2,1.07-2.67c0.77-0.67,1.79-0.93,2.79-0.69
339 | 		l2.25,0.53c0.37,0.09,0.74-0.01,1.03-0.26c0.28-0.25,0.43-0.61,0.39-0.99c-0.11-1.1,0.35-2.15,1.23-2.82
340 | 		c0.88-0.67,2.02-0.83,3.05-0.43l2.58,0.99l-0.72,1.87l-2.58-0.99c-0.38-0.15-0.79-0.09-1.12,0.16c-0.33,0.25-0.49,0.63-0.45,1.04
341 | 		c0.1,1.03-0.29,2-1.06,2.68c-0.77,0.68-1.8,0.94-2.8,0.7l-2.25-0.53c-0.37-0.08-0.74,0.01-1.03,0.25c-0.28,0.25-0.43,0.6-0.39,0.98
342 | 		l0.17,1.92c0.09,1.02-0.31,2.02-1.09,2.68s-1.83,0.92-2.82,0.67l-3.44-0.85c-0.32-0.08-0.65-0.02-0.93,0.17
343 | 		c-0.28,0.19-0.45,0.47-0.5,0.81l-0.18,1.4c-0.12,0.87-0.59,1.66-1.32,2.17C558.72,516.61,558.09,516.81,557.44,516.81z"/>
344 | 	<path d="M1210.27,190.71c-0.03,0-0.05,0-0.08,0c-1.02-0.03-1.9-0.63-2.3-1.56l-1.62-3.76c-0.14-0.32-0.42-0.36-0.54-0.36
345 | 		c0,0,0,0-0.01,0c-0.12,0-0.41,0.04-0.54,0.37l-1.81,4.52l-1.86-0.74l1.81-4.52c0.39-0.98,1.32-1.61,2.37-1.63c0.01,0,0.02,0,0.03,0
346 | 		c1.04,0,1.97,0.61,2.38,1.56l1.62,3.76c0.13,0.31,0.41,0.35,0.53,0.36c0.11,0,0.39-0.02,0.54-0.33l1.17-2.34
347 | 		c0.39-0.78,1.14-1.31,2-1.41c0.87-0.11,1.72,0.22,2.28,0.89l1.93,2.25c0.21,0.24,0.47,0.21,0.57,0.19c0.1-0.02,0.35-0.1,0.44-0.41
348 | 		l1.17-3.91c0.26-0.86,0.93-1.52,1.81-1.76c0.87-0.24,1.79-0.01,2.44,0.61l3.78,3.54c0.22,0.21,0.48,0.17,0.58,0.13
349 | 		c0.1-0.03,0.33-0.13,0.4-0.43l0.74-3.2c0.21-0.89,0.84-1.59,1.71-1.88c0.87-0.29,1.8-0.1,2.49,0.49l2.71,2.31
350 | 		c0.24,0.2,0.49,0.14,0.59,0.1c0.1-0.04,0.33-0.15,0.38-0.46l0.51-3.17c0.15-0.94,0.81-1.72,1.71-2.03c0.91-0.31,1.9-0.1,2.6,0.55
351 | 		c0.26,0.24,0.53,0.15,0.64,0.11c0.11-0.05,0.35-0.19,0.35-0.54v-2.28h2v2.28c0,1.05-0.59,1.95-1.55,2.37
352 | 		c-0.96,0.42-2.03,0.24-2.8-0.47c-0.23-0.22-0.49-0.16-0.59-0.12c-0.1,0.03-0.34,0.15-0.39,0.46l-0.51,3.17
353 | 		c-0.15,0.93-0.77,1.69-1.66,2.02c-0.89,0.33-1.85,0.16-2.57-0.46l-2.71-2.31c-0.23-0.19-0.47-0.14-0.57-0.11
354 | 		c-0.09,0.03-0.32,0.14-0.39,0.43l-0.74,3.2c-0.21,0.91-0.87,1.62-1.77,1.9c-0.9,0.27-1.84,0.05-2.53-0.59l-3.78-3.54
355 | 		c-0.22-0.2-0.46-0.16-0.56-0.14c-0.1,0.03-0.33,0.12-0.41,0.4l-1.17,3.91c-0.27,0.91-1.02,1.59-1.94,1.79
356 | 		c-0.93,0.2-1.89-0.13-2.5-0.85l-1.93-2.25c-0.19-0.22-0.42-0.21-0.52-0.2c-0.09,0.01-0.33,0.07-0.46,0.32l-1.17,2.34
357 | 		C1212.14,190.16,1211.26,190.71,1210.27,190.71z"/>
358 | 	<rect x="1210.61" y="173.6" transform="matrix(0.5038 -0.8638 0.8638 0.5038 446.4734 1135.5005)" width="2" height="11.05"/>
359 | 	<rect x="1221.08" y="169.1" transform="matrix(0.4856 -0.8742 0.8742 0.4856 474.5748 1158.9305)" width="2" height="14.19"/>
360 | 	<rect x="1231.33" y="168.27" transform="matrix(0.4286 -0.9035 0.9035 0.4286 547.0336 1212.7932)" width="2" height="11.3"/>
361 | 	<path d="M1124.44,950.37l-1.84-0.78l3.06-7.2c0.74-1.74,2.2-3.03,4.02-3.55c1.82-0.52,3.74-0.19,5.29,0.9l3.18,2.24
362 | 		c1.11,0.78,2.48,0.99,3.77,0.55c1.29-0.43,2.26-1.42,2.68-2.71l0.55-1.71c0.62-1.95,2.17-3.46,4.12-4.05
363 | 		c1.95-0.59,4.08-0.18,5.67,1.09l3.23,2.57c1.11,0.88,2.52,1.15,3.87,0.73c1.35-0.41,2.37-1.43,2.79-2.78l0.83-2.67
364 | 		c0.61-1.96,2.08-3.45,4.04-4.07c1.96-0.63,4.02-0.27,5.66,0.97l3.71,2.81c1.12,0.85,2.53,1.09,3.87,0.65
365 | 		c1.34-0.44,2.33-1.47,2.73-2.82l1.39-4.73c0.61-2.07,2.21-3.65,4.29-4.24c2.07-0.58,4.27-0.06,5.87,1.39l2.98,2.71
366 | 		c1.11,1.01,2.64,1.36,4.08,0.91c1.44-0.44,2.51-1.58,2.87-3.04c0.53-2.18,2.13-3.87,4.29-4.5c2.15-0.63,4.41-0.09,6.04,1.46
367 | 		l4.64,4.41l-1.38,1.45l-4.64-4.41c-1.11-1.05-2.64-1.42-4.1-0.99c-1.46,0.43-2.55,1.57-2.91,3.06c-0.52,2.16-2.1,3.83-4.22,4.48
368 | 		c-2.12,0.65-4.37,0.15-6.01-1.35l-2.98-2.71c-1.08-0.99-2.57-1.34-3.98-0.94c-1.41,0.4-2.5,1.47-2.91,2.87l-1.39,4.73
369 | 		c-0.58,1.96-2.08,3.51-4.02,4.15c-1.95,0.64-4.08,0.28-5.71-0.95l-3.71-2.81c-1.11-0.84-2.51-1.08-3.84-0.66
370 | 		c-1.33,0.42-2.33,1.43-2.74,2.76l-0.83,2.67c-0.61,1.96-2.15,3.49-4.11,4.1c-1.96,0.6-4.09,0.2-5.7-1.08l-3.23-2.57
371 | 		c-1.1-0.88-2.5-1.15-3.85-0.74c-1.35,0.41-2.37,1.41-2.8,2.75l-0.55,1.71c-0.61,1.91-2.05,3.36-3.95,4
372 | 		c-1.9,0.64-3.92,0.34-5.56-0.82l-3.18-2.24c-1.05-0.74-2.35-0.96-3.59-0.61c-1.23,0.35-2.23,1.23-2.73,2.41L1124.44,950.37z"/>
373 | 	<path d="M1059.09,900.82h-2v-9.59c0-1.32-0.68-2.5-1.81-3.17c-1.13-0.67-2.5-0.69-3.65-0.06l-4.23,2.33
374 | 		c-1.78,0.98-3.89,0.95-5.63-0.09c-1.75-1.03-2.79-2.86-2.79-4.89v-3.3c0-1.25-0.6-2.37-1.64-3.07c-1.04-0.7-2.31-0.82-3.46-0.33
375 | 		l-5.43,2.27c-1.76,0.74-3.76,0.55-5.34-0.51c-1.59-1.06-2.54-2.83-2.54-4.73v-1.09c0-1.25-0.59-2.36-1.63-3.06
376 | 		c-1.04-0.7-2.3-0.83-3.45-0.35l-5.2,2.13c-1.76,0.72-3.75,0.52-5.32-0.54c-1.58-1.06-2.52-2.82-2.52-4.72
377 | 		c0-1.26-0.6-2.38-1.65-3.07c-1.05-0.7-2.32-0.81-3.47-0.32l-4.04,1.71c-1.56,0.66-3.31,0.59-4.81-0.18
378 | 		c-1.5-0.77-2.58-2.15-2.95-3.8l-0.52-2.28c-0.25-1.08-0.95-1.98-1.93-2.47c-0.99-0.5-2.13-0.53-3.14-0.08l-7.18,3.15l-0.8-1.83
379 | 		l7.18-3.15c1.56-0.68,3.33-0.64,4.85,0.13c1.52,0.77,2.61,2.16,2.99,3.82l0.52,2.28c0.24,1.07,0.94,1.96,1.91,2.46
380 | 		c0.97,0.5,2.11,0.54,3.12,0.12l4.04-1.71c1.76-0.75,3.76-0.56,5.36,0.5c1.59,1.06,2.54,2.83,2.54,4.74c0,1.25,0.59,2.36,1.63,3.06
381 | 		c1.04,0.7,2.29,0.82,3.45,0.35l5.2-2.13c1.76-0.72,3.75-0.52,5.32,0.54c1.58,1.06,2.52,2.82,2.52,4.72v1.09
382 | 		c0,1.25,0.6,2.37,1.64,3.07s2.31,0.82,3.46,0.33l5.43-2.27c1.76-0.73,3.76-0.54,5.34,0.51c1.59,1.06,2.53,2.83,2.53,4.73v3.3
383 | 		c0,1.32,0.68,2.5,1.81,3.17c1.13,0.67,2.5,0.69,3.65,0.06l4.23-2.33c1.78-0.98,3.89-0.95,5.63,0.09c1.75,1.03,2.79,2.86,2.79,4.89
384 | 		V900.82z"/>
385 | 	<g>
386 | 		<g>
387 | 			<path d="M1283.96,594.24c-9.24,15-33.84,22.86-45.82,6.74c-13.31-17.92-3.82-56.03,23.88-57.63c6.32-0.37,12.62,1.7,17.6,5.82
388 | 				C1292.26,559.64,1294.32,577.42,1283.96,594.24z"/>
389 | 		</g>
390 | 	</g>
391 | 	<g>
392 | 		<g>
393 | 			<path class="st6" d="M1252.37,574.38c-3.4,10.51-7.3,22.13-12.19,16.17c-3.04-3.71-4.89-12.63-2.72-21.11
394 | 				c1.71-6.68,6.49-13.09,11.24-16.45c2.46-1.74,4.95-2.14,6.94-1.08C1260.72,554.6,1256.18,562.59,1252.37,574.38z"/>
395 | 		</g>
396 | 	</g>
397 | 	<g>
398 | 		<g>
399 | 			<path class="st6" d="M1060.33,282.47c-5.13,5.49-10.9,11.5-13.27,5.24c-1.47-3.89-0.78-10.74,2.92-15.43
400 | 				c2.91-3.7,8.13-5.8,12.6-5.87c2.32-0.03,4.33,0.85,5.63,2.48C1071.49,273.04,1066.08,276.31,1060.33,282.47z"/>
401 | 		</g>
402 | 	</g>
403 | 	<g>
404 | 		<g>
405 | 			<path class="st6" d="M725.16,583.94c0.07-3.59,0.21-7.57,2.96-6.11c1.71,0.91,5,8.12,1.23,12.53c-0.71,0.83-1.76,1.09-2.71,0.92
406 | 				C724.23,590.86,725.08,587.96,725.16,583.94z"/>
407 | 		</g>
408 | 	</g>
409 | 	<g>
410 | 		<g>
411 | 			<path d="M797.11,677.23c0.43-0.93-0.34-1.84-2.26-2.55c-3.83-1.41-11.28-2.42-25.73-1.42c-13.32,0.92-20.01,3.73-23.36,6.14
412 | 				c-1.79,1.29-1.65,2.26-0.01,2.99C765.89,685.81,786.56,683.13,797.11,677.23z"/>
413 | 		</g>
414 | 	</g>
415 | 	<path d="M1147.17,591.59c-1.67-7.45-6.26-30.34-6.31-30.57l1.96-0.39c0.05,0.23,4.63,23.09,6.3,30.52L1147.17,591.59z"/>
416 | 	<path d="M1167.44,594.02c-2.06-2.99-3.86-6.97-4.94-10.91c-0.38-1.38-0.73-2.72-1.06-4.01c-1.69-6.47-3.02-11.59-6.25-14.54
417 | 		l1.35-1.48c3.67,3.35,5.07,8.72,6.84,15.51c0.33,1.28,0.68,2.61,1.06,3.98c1.03,3.74,2.72,7.5,4.66,10.31L1167.44,594.02z"/>
418 | 	<path d="M1176.93,594.48l-2-0.06c0.05-1.57-0.1-3.62-0.25-5.79c-0.15-2.23-0.33-4.75-0.33-7.19c0-4.45,1.1-8.79,2.94-11.63
419 | 		l1.68,1.09c-1.64,2.53-2.62,6.46-2.62,10.54c0,2.36,0.16,4.75,0.32,7.05C1176.83,590.71,1176.98,592.81,1176.93,594.48z"/>
420 | 	<path d="M1241.72,674.02c-2.12,0-4.21-0.89-5.68-2.6l-16.65-19.46l1.52-1.3l16.65,19.46c1.93,2.26,5.36,2.56,7.65,0.66l49.6-45.17
421 | 		c2.72-2.33,5.78-4.28,9.11-5.8l0.83,1.82c-3.16,1.44-6.06,3.29-8.62,5.48l-49.61,45.18
422 | 		C1245.12,673.45,1243.41,674.02,1241.72,674.02z"/>
423 | 	<path d="M1245.02,761.01c-8.55,0-17.56-3.69-25.34-13.55l-19.16-21.21l1.48-1.34l19.21,21.26c14.06,17.81,32.31,14.28,43.66,5.87
424 | 		c9.08-6.73,21.72-17.49,37.57-31.99l1.35,1.48c-15.9,14.54-28.6,25.35-37.73,32.12C1260.28,757.92,1252.84,761.01,1245.02,761.01z"
425 | 		/>
426 | 	<path d="M1120.51,597.55c-1.11-1.95-2.03-3.9-2.98-6.34l1.87-0.72c0.92,2.37,1.77,4.19,2.85,6.07L1120.51,597.55z"/>
427 | 	<path d="M1132.29,594.05c-1.62-3.03-4.66-9.31-6.82-17.29l1.93-0.52c2.1,7.79,5.07,13.91,6.65,16.86L1132.29,594.05z"/>
428 | 	<path d="M1270.32,623.41c-16.17,0-31.01-8.83-38.73-23.05l1.76-0.96c7.37,13.57,21.54,22.01,36.97,22.01V623.41z"/>
429 | 	<path d="M999.22,322.47c-1.59,0-3.54-0.86-5.61-2.52c-2.28-1.82-5.81-4.67-8.7-6.99l1.26-1.56c2.89,2.33,6.41,5.17,8.69,6.99
430 | 		c2.13,1.71,4.2,2.47,5.15,1.89c0.86-0.52,1.06-2.29,0.57-4.87c-0.59-3.08-0.44-5.55,0.46-7.36l1.79,0.89
431 | 		c-0.48,0.97-0.92,2.81-0.29,6.09c0.69,3.6,0.19,5.94-1.5,6.96C1000.51,322.31,999.89,322.47,999.22,322.47z"/>
432 | 	<path d="M1072.4,333.39l-1.43-1.4l26.78-27.42c9.4-9.63,24.64-10.15,34.68-1.19l-1.33,1.49c-9.24-8.25-23.26-7.77-31.91,1.09
433 | 		L1072.4,333.39z"/>
434 | 	<rect x="1099.94" y="351.76" transform="matrix(0.7054 -0.7088 0.7088 0.7054 79.6708 897.2149)" width="38.52" height="2"/>
435 | 	<path d="M702.04,597.75l-6.1-9.03c-2.15-2.84-5.34-4.69-8.93-5.16c-3.59-0.46-7.14,0.51-9.99,2.74l-1.23-1.57
436 | 		c3.28-2.57,7.35-3.69,11.48-3.15c4.13,0.54,7.78,2.66,10.3,5.98l6.13,9.07L702.04,597.75z"/>
437 | 	<rect x="724.15" y="656.81" transform="matrix(0.0508 -0.9987 0.9987 0.0508 41.5014 1359.2747)" width="23.32" height="2"/>
438 | 	<rect x="798.51" y="617.22" transform="matrix(0.9697 -0.2444 0.2444 0.9697 -131.4858 214.7143)" width="2" height="40"/>
439 | </g>
440 | </svg>
441 | 


--------------------------------------------------------------------------------