├── public
    ├── _redirects
    ├── favicon.png
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── .gitignore
├── src
    ├── index.js
    ├── components
    │   ├── firebase.js
    │   ├── authpageillustration.svg
    │   └── notfound.svg
    ├── index.css
    ├── App.js
    ├── pages
    │   ├── notfoundpage.jsx
    │   ├── authpage.jsx
    │   ├── deploypage.jsx
    │   ├── projectspage.jsx
    │   └── editorpage.jsx
    ├── App.css
    └── serviceWorker.js
├── package.json
└── README.md


/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaagrav/Xper/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaagrav/Xper/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaagrav/Xper/HEAD/public/logo512.png


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Xper",
 3 |   "name": "Xper - RealTime Code Editor",
 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": "#1A202E",
24 |   "background_color": "#0E1218"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase"
 2 | 
 3 | var firebaseConfig = {
 4 |     apiKey: "AIzaSyBjuzaHS-svU9tHSQTY2gr4KMnpP16iuQM",
 5 |     authDomain: "the-coder-b3e19.firebaseapp.com",
 6 |     databaseURL: "https://the-coder-b3e19.firebaseio.com",
 7 |     projectId: "the-coder-b3e19",
 8 |     storageBucket: "the-coder-b3e19.appspot.com",
 9 |     messagingSenderId: "978497464036",
10 |     appId: "1:978497464036:web:359cac492154b35006eef1",
11 |     measurementId: "G-9N4YJHX2J7"
12 |   };
13 |   // Initialize Firebase
14 |   firebase.initializeApp(firebaseConfig);
15 |   firebase.analytics();
16 | 
17 | export default firebase;


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&family=Orbitron&display=swap');
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: border-box;
 7 |   -webkit-user-drag: none;
 8 |   text-decoration: none;
 9 |   user-select: none;
10 | }
11 | body {
12 |   margin: 0;
13 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
14 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
15 |     sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   background-color: #0E1218;
19 | }
20 | 
21 | code {
22 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
23 |     monospace;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './App.css';
 3 | import {BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
 4 | 
 5 | import Authpage from './pages/authpage';
 6 | import Projectspage from './pages/projectspage';
 7 | import Editorpage from './pages/editorpage';
 8 | import Deploypage from './pages/deploypage';
 9 | import Notfoundpage from './pages/notfoundpage';
10 | 
11 | function App() {
12 |   return (
13 |     <div className="App">
14 |       <Router>
15 |         <Switch>
16 |           <Route exact path="/" component={Projectspage} />
17 |           <Route exact path="/auth" component={Authpage} />
18 |           <Route exact path="/edit/:UID/:projectID" component={Editorpage} />
19 |           <Route exact path="/deploy/:UID/:projectID" component={Deploypage} />
20 |           <Route exact path="/notfound" component={Notfoundpage} />
21 |           <Redirect to="/notfound" />
22 |         </Switch>
23 |       </Router>
24 |     </div>
25 |   );
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webdev",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.11.0",
 7 |     "@material-ui/icons": "^4.9.1",
 8 |     "@material-ui/lab": "^4.0.0-alpha.56",
 9 |     "@testing-library/jest-dom": "^4.2.4",
10 |     "@testing-library/react": "^9.3.2",
11 |     "@testing-library/user-event": "^7.1.2",
12 |     "ace-builds": "^1.4.12",
13 |     "firebase": "^7.23.0",
14 |     "react": "^16.13.1",
15 |     "react-ace": "^9.1.4",
16 |     "react-dom": "^16.13.1",
17 |     "react-router-dom": "^5.2.0",
18 |     "react-scripts": "3.4.3",
19 |     "sweetalert2": "^10.5.1"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": "react-app"
29 |   },
30 |   "browserslist": {
31 |     "production": [
32 |       ">0.2%",
33 |       "not dead",
34 |       "not op_mini all"
35 |     ],
36 |     "development": [
37 |       "last 1 chrome version",
38 |       "last 1 firefox version",
39 |       "last 1 safari version"
40 |     ]
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/pages/notfoundpage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | 
 4 | import { makeStyles } from '@material-ui/core/styles';
 5 | 
 6 | import NotFoundIllustration from '../components/notfound.svg'
 7 | 
 8 | const useStyles = makeStyles((theme) => ({
 9 |     brandingName: {
10 |         position: 'absolute',
11 |         fontFamily: "'Orbitron', sans-serif",
12 |         height: "fit-content",
13 |         width: "fit-content",
14 |         fontSize: '45px',
15 |         color: '#50C0FF',
16 |         margin: 'auto',
17 |         top: '15px',
18 |         left: '15px',
19 |     },
20 |     nfi: {
21 |         position: "absolute",
22 |         margin: 'auto',
23 |         width: 'calc(100% - 40%)',
24 |         top: '0',
25 |         right: '0',
26 |         left: '0',
27 |         bottom: '0',
28 |     },
29 |     notfound: {
30 |         position: "absolute",
31 |         height: 'fit-content',
32 |         width: 'fit-content',
33 |         margin: 'auto',
34 |         color: '#50C0FF',
35 |         right: '0',
36 |         left: '0',
37 |         bottom: 50,
38 |         fontFamily: "'Orbitron', sans-serif",
39 |         fontSize: '45px',
40 |     }
41 | }))
42 | function Notfoundpage() {
43 |     document.title = 'Not Found - Xper';
44 | 
45 |     const classes = useStyles();
46 | 
47 |     return (
48 |         <div>
49 |             <Link to="/"><div className={classes.brandingName}>Xper</div></Link>
50 |             <img alt="File Not Found" src={NotFoundIllustration} className={classes.nfi} />
51 |             <Link to="/"><div className={classes.notfound}>Not Found</div></Link>
52 |         </div>
53 |     )
54 | }
55 | 
56 | export default Notfoundpage;
57 | 


--------------------------------------------------------------------------------
/src/pages/authpage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useHistory } from 'react-router-dom';
 3 | 
 4 | import firebase from '../components/firebase';
 5 | 
 6 | import Button from '@material-ui/core/Button';
 7 | import { makeStyles } from '@material-ui/core/styles';
 8 | 
 9 | import Illustration1 from '../components/authpageillustration.svg';
10 | 
11 | const useStyles = makeStyles((theme) => ({
12 |     authButton: {
13 |         height: "fit-content",
14 |         width: "fit-content",
15 |         backgroundColor: "#1A202E",
16 |         color: "#50C0FF",
17 |         padding: "10px 10px",
18 |         "&:hover": {
19 |             backgroundColor: "#1D2431"
20 |         },
21 |         position: "absolute",
22 |         margin: "auto",
23 |         top: "50px",
24 |         right: "0",
25 |         left: "0",
26 |         bottom: "0",
27 |     },
28 |     brandingName: {
29 |         fontFamily: "'Orbitron', sans-serif",
30 |         color: "#50C0FF",
31 |         height: "fit-content",
32 |         width: "fit-content",
33 |         fontSize: "3rem",
34 |         position: "absolute",
35 |         margin: "auto",
36 |         top: "0",
37 |         right: "0",
38 |         left: "0",
39 |         bottom: "100px",
40 |     },
41 |     topBar: {
42 |         height: "7px",
43 |         width: "100%",
44 |         position: "absolute",
45 |         margin: "auto",
46 |         top: "0",
47 |         right: "0",
48 |         left: "0",
49 |         backgroundColor: "#50C0FF"
50 |     }
51 | }));
52 | 
53 | function Authpage() {
54 |     document.title = "Auth - Xper";
55 |     const classes = useStyles();
56 |     let history = useHistory();
57 | 
58 |     let handleSignIn = e => {
59 |         var provider = new firebase.auth.GoogleAuthProvider();
60 |         firebase.auth().signInWithPopup(provider)
61 |     }
62 | 
63 |     firebase.auth().onAuthStateChanged(firebaseUser => {
64 |         if (firebaseUser)
65 |             history.push("/");
66 |     });
67 | 
68 |     return (
69 |         <div>
70 |             <div className={classes.topBar}></div>
71 |             <div className={classes.brandingName}>Xper</div>
72 |             <Button className={classes.authButton} onClick={handleSignIn}>Sign In with Google</Button>
73 |             <img src={Illustration1} className={"auth-illustration"} alt="auth illustration" />
74 |         </div>
75 |     )
76 | }
77 | 
78 | export default Authpage;
79 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Xper Banner](https://i.imgur.com/PdMiPHA.png)  
 2 | ## Xper
 3 | 
 4 | Xper is a realtime code editor where you can both write and save your code in realtime! The unique thing about Xper is it updates your deployed code in realtime, which means you can code on your computer and immediately be able to check how it looks like on your phone, tablet, and literally everywhere else. Xper is developed in React, which makes it a lightning fast code editor considering everything is being saved remotely. Check it out in the links given below,
 5 | <br>
 6 | Live at: https://xperbycoder.netlify.app
 7 | Source Code: https://github.com/Jaagrav/Xper
 8 | <br>
 9 | You can create issues in case you detect a bug, and if you know how to fix it, you can work on it yourself and make a PR, I will accept all the PRs that deserve to be accepted, so now you can also become a contributor for Xper!!
10 | <br>
11 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
12 | 
13 | ## Available Scripts
14 | 
15 | In the project directory, you can run:
16 | 
17 | ### `yarn start`
18 | 
19 | Runs the app in the development mode.<br />
20 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
21 | 
22 | The page will reload if you make edits.<br />
23 | You will also see any lint errors in the console.
24 | 
25 | ### `yarn test`
26 | 
27 | Launches the test runner in the interactive watch mode.<br />
28 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
29 | 
30 | ### `yarn build`
31 | 
32 | Builds the app for production to the `build` folder.<br />
33 | It correctly bundles React in production mode and optimizes the build for the best performance.
34 | 
35 | The build is minified and the filenames include the hashes.<br />
36 | Your app is ready to be deployed!
37 | 
38 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
39 | 
40 | ### `yarn eject`
41 | 
42 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
43 | 
44 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
45 | 
46 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
47 | 
48 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
49 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | .auth-illustration {
  2 |   position: absolute;
  3 |   width: 45%;
  4 |   margin: auto;
  5 |   bottom: 0;right: 0;
  6 |   z-index: -1;
  7 |   max-width: 645px;
  8 | }
  9 | 
 10 | @media (max-width: 600px) {
 11 |   .auth-illustration {
 12 |     width: 70%;
 13 |   }
 14 | }
 15 | 
 16 | .MuiList-root.MuiMenu-list.MuiList-padding, .MuiSpeedDialAction-fab, .MuiButtonBase-root.MuiFab-root.MuiSpeedDialAction-fab.MuiSpeedDialAction-fabClosed.MuiFab-sizeSmall {
 17 |   background: #1A202E !important;color: #62B0FF !important;
 18 | }
 19 | 
 20 | .MuiButtonBase-root.MuiFab-root.MuiSpeedDial-fab.MuiFab-primary, .MuiSpeedDial-root.MuiSpeedDial-directionDown.makeStyles-speedDial-6, .MuiFab-label  {
 21 |   height: 30px !important;
 22 |   background: transparent !important;
 23 |   box-shadow: none !important;
 24 |   width: 30px !important;
 25 |   padding: 0;
 26 |   display: flex !important;
 27 | }
 28 | 
 29 | #htmlEditor,#cssEditor,#jsEditor {
 30 |   position: absolute;
 31 |   height: 100% !important;
 32 |   width: 100% !important;
 33 |   margin: auto;
 34 |   top: 0;right: 0;left: 0;bottom: 0;
 35 |   display: none;
 36 |   background-color: #0E1218;
 37 | }
 38 | #htmlEditor {
 39 |   display: block;
 40 | }
 41 | .ace_text-layer > .ace_line {
 42 |   color: #fff !important;
 43 | }
 44 | .ace-nord-dark .ace_gutter-active-line, .ace-nord-dark .ace_marker-layer .ace_selection, .ace-nord-dark .ace_marker-layer .ace_active-line  {
 45 |   background-color: #1A202E;
 46 | }
 47 | .ace-nord-dark .ace_entity.ace_name.ace_function, .ace-nord-dark .ace_meta, .ace-nord-dark .ace_support.ace_type{
 48 |   color: #62B0FF !important;
 49 | }
 50 | .ace-nord-dark .ace_variable, .ace-nord-dark .ace_variable.ace_language{
 51 |   color: rgb(255, 79, 132) !important;
 52 | }
 53 | .ace-nord-dark .ace_string, .ace-nord-dark .ace_constant.ace_numeric {
 54 |   color: #ffcc41 !important;
 55 | }
 56 | .ace-nord-dark .ace_support.ace_function {
 57 |   color: #5bdb9b !important;
 58 | }
 59 | .ace-nord-dark .ace_keyword {
 60 |   color: rgb(154, 76, 218) !important;
 61 | }
 62 | 
 63 | .swal2-popup{
 64 |   background-color: #0E1218 !important;
 65 | }
 66 | .swal2-title {
 67 |   color: #62B0FF !important;
 68 |   font-family: 'Comfortaa', sans-serif;
 69 | }
 70 | .swal2-html-container{
 71 |   color: #fff !important;
 72 |   font-family: 'Comfortaa', sans-serif;
 73 | }
 74 | .swal2-styled.swal2-confirm {
 75 |   background-color: #62B0FF !important;color: #0E1218 !important;
 76 |   font-family: 'Comfortaa', sans-serif;
 77 | }
 78 | .swal2-styled.swal2-cancel{
 79 |   background-color: #FF6D6D !important;color: #fff !important;
 80 |   font-family: 'Comfortaa', sans-serif;
 81 | }
 82 | 
 83 | @media (min-width: 600px) {
 84 |   ::-webkit-scrollbar {
 85 |     height: 10px;
 86 |     width: 10px;
 87 |     appearance: none;
 88 |     background-color: #0E1218;
 89 |   }
 90 |   
 91 |   ::-webkit-scrollbar-thumb {  
 92 |     appearance: none;
 93 |     border-radius: 10px;
 94 |     background-color: #1A202E;
 95 |   }
 96 |   
 97 |   ::-webkit-scrollbar-thumb:hover {
 98 |     appearance: none;
 99 |     border-radius: 10px;
100 |     background-color: #262f44;
101 |   }
102 | }
103 | 
104 | 


--------------------------------------------------------------------------------
/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.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="viewport" content= "width=device-width, user-scalable=no">
 8 |     <meta name="theme-color" content="#62B0FF" />
 9 |     <meta name="author" content="Jaagrav Seal" />
10 |     <meta
11 |       name="keywords"
12 |       content="Xper, Developer, Coding, Website, Web Development, JavaScript, HTML, CSS, RealTime, Text Editor, Editor"
13 |     />
14 |     <meta name="robots" content="index, follow" />
15 |     <meta name="title" content="Xper" />
16 |     <meta
17 |       name="description"
18 |       content="A RealTime Web-based Code Editor where you can deploy and test your website code in various devices in RealTime!"
19 |     />
20 |     <meta property="og:type" content="website" />
21 |     <meta property="og:url" content="https://xperbycoder.netlify.app/" />
22 |     <meta property="og:title" content="Xper" />
23 |     <meta
24 |       property="og:description"
25 |       content="A RealTime Web-based Code Editor where you can deploy and test your website code in various devices in RealTime!"
26 |     />
27 |     <meta
28 |       property="og:image"
29 |       content="%PUBLIC_URL%/logo192.png"
30 |     />
31 |     <meta property="og:site_name" content="Xper" />
32 |     <meta property="twitter:card" content="summary_large_image" />
33 |     <meta
34 |       name="twitter:card"
35 |       content="%PUBLIC_URL%/logo192.png"
36 |     />
37 |     <meta
38 |       property="twitter:url"
39 |       content="https://xperbycoder.netlify.app/"
40 |     />
41 |     <meta property="twitter:title" content="Xper" />
42 |     <meta
43 |       property="twitter:description"
44 |       content="A RealTime Web-based Code Editor where you can deploy and test your website code in various devices in RealTime!"
45 |     />
46 |     <meta
47 |       property="twitter:image"
48 |       content="%PUBLIC_URL%/logo192.png"
49 |     />
50 |     <meta name="twitter:image:alt" content="Xper" />
51 | 
52 |     <link rel="canonical" href="https://xperbycoder.netlify.app/" />
53 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
54 |     <!--
55 |       manifest.json provides metadata used when your web app is installed on a
56 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
57 |     -->
58 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
59 |     <!--
60 |       Notice the use of %PUBLIC_URL% in the tags above.
61 |       It will be replaced with the URL of the `public` folder during the build.
62 |       Only files inside the `public` folder can be referenced from the HTML.
63 | 
64 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
65 |       work correctly both with client-side routing and a non-root public URL.
66 |       Learn how to configure a non-root public URL by running `npm run build`.
67 |     -->
68 |     <title>Xper</title>
69 |   </head>
70 |   <body>
71 |     <noscript>You need to enable JavaScript to run this app.</noscript>
72 |     <div id="root"></div>
73 |     <!--
74 |       This HTML file is a template.
75 |       If you open it directly in the browser, you will see an empty page.
76 | 
77 |       You can add webfonts, meta tags, or analytics to this file.
78 |       The build step will place the bundled scripts into the <body> tag.
79 | 
80 |       To begin the development, run `npm start` or `yarn start`.
81 |       To create a production bundle, use `npm run build` or `yarn build`.
82 |     -->
83 |     <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="jaagrav" data-description="Support me on Buy me a coffee!" data-message="Support me on Buy me a coffee!" data-color="#2196F3" data-position="left" data-x_margin="18" data-y_margin="18"></script>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/src/pages/deploypage.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { useHistory } from 'react-router-dom';
  3 | 
  4 | import firebase from '../components/firebase';
  5 | 
  6 | import { makeStyles } from '@material-ui/core/styles';
  7 | import Backdrop from '@material-ui/core/Backdrop';
  8 | import CircularProgress from '@material-ui/core/CircularProgress';
  9 | import Button from '@material-ui/core/Button';
 10 | 
 11 | const useStyles = makeStyles((theme) => ({
 12 |     iframe: {
 13 |         position: 'absolute',
 14 |         margin: 'auto',
 15 |         height: '100%',
 16 |         width: '100%',
 17 |         top: '0',
 18 |         right: '0',
 19 |         left: '0',
 20 |         bottom: '0',
 21 |         outline: 0,
 22 |         border: 0,
 23 |         backgroundColor: 'white',
 24 |     },
 25 |     seeCode: {
 26 |         position: 'absolute',
 27 |         margin: 'auto',
 28 |         right: 15,
 29 |         bottom: 15,
 30 |         color: "#1A202E",
 31 |         backgroundColor: '#50C0FF !important'
 32 |     }
 33 | }))
 34 | function Deploypage(props) {
 35 |     document.title = "Deploy - Xper";
 36 | 
 37 |     let history = useHistory();
 38 | 
 39 |     const classes = useStyles(); const iframeRef = React.useRef();
 40 | 
 41 |     let userID = props.match.params.UID, projectID = props.match.params.projectID;
 42 | 
 43 |     const [open, setOpen] = React.useState(true);
 44 | 
 45 |     React.useEffect(() => {
 46 |         firebase.database().ref("WebDev/" + userID + "/" + projectID).once("value").then(snap => {
 47 |             if (snap.key === projectID) {
 48 |                 var old_element = document.getElementsByClassName(classes.iframe)[0];
 49 |                 var new_element = old_element.cloneNode(true);
 50 |                 old_element.parentNode.replaceChild(new_element, old_element);
 51 |                 let output = new_element.contentWindow.document;
 52 |                 let htmlDoc = "<style>" + snap.val().css + "</style>" + snap.val().html + "<script>" + snap.val().js + "</script>";
 53 |                 try {
 54 |                     // output.contentWindow.location.reload(true);
 55 |                     output.open();
 56 |                     output.write(htmlDoc);
 57 |                     output.close();
 58 |                     setOpen(false);
 59 |                     document.title = output.title + ' - Xper';
 60 |                 } catch (e) {
 61 |                     //Fuck You error
 62 |                     console.log(e)
 63 |                 }
 64 |             }
 65 |         }).catch(error => {
 66 |             console.warn('Contents not found!');
 67 |             history.push("/notfound")
 68 |         })
 69 |         firebase.database().ref("WebDev/" + userID).on("child_changed", snap => {
 70 |             if (snap.key === projectID) {
 71 |                 var old_element = document.getElementsByClassName(classes.iframe)[0];
 72 |                 var new_element = old_element.cloneNode(true);
 73 |                 old_element.parentNode.replaceChild(new_element, old_element);
 74 |                 let output = new_element.contentWindow.document;
 75 |                 let htmlDoc = "<style>" + snap.val().css + "</style>" + snap.val().html + "<script>" + snap.val().js + "</script>";
 76 |                 try {
 77 |                     // output.contentWindow.location.reload(true);
 78 |                     output.open();
 79 |                     output.write(htmlDoc);
 80 |                     output.close();
 81 |                     document.title = output.title + ' - Xper';
 82 |                     setOpen(false);
 83 |                 } catch (e) {
 84 |                     //Fuck You error
 85 |                     console.log(e)
 86 |                 }
 87 |             }
 88 |         })
 89 |     }, [])
 90 |     return (
 91 |         <div>
 92 |             <Backdrop className={classes.backdrop} open={open} style={{ zIndex: 5 }}>
 93 |                 <CircularProgress style={{ color: '#50C0FF' }} />
 94 |             </Backdrop>
 95 |             <iframe
 96 |                 title=" "
 97 |                 className={classes.iframe}
 98 |                 ref={iframeRef}
 99 |             />
100 |             <Button className={classes.seeCode} onClick={() => { history.push("/edit/" + userID + "/" + projectID) }}>See Code</Button>
101 |         </div>
102 |     )
103 | }
104 | 
105 | export default Deploypage;
106 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/pages/projectspage.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Link, useHistory } from 'react-router-dom';
  3 | 
  4 | import firebase from '../components/firebase';
  5 | 
  6 | import Swal from 'sweetalert2';
  7 | 
  8 | import { makeStyles } from '@material-ui/core/styles';
  9 | import Fab from '@material-ui/core/Fab';
 10 | import IconButton from '@material-ui/core/IconButton';
 11 | import AddIcon from '@material-ui/icons/Add';
 12 | import Avatar from '@material-ui/core/Avatar';
 13 | import Menu from '@material-ui/core/Menu';
 14 | import MenuItem from '@material-ui/core/MenuItem';
 15 | import Card from '@material-ui/core/Card';
 16 | import CardActions from '@material-ui/core/CardActions';
 17 | import CardContent from '@material-ui/core/CardContent';
 18 | import Button from '@material-ui/core/Button';
 19 | import Typography from '@material-ui/core/Typography';
 20 | import DeleteIcon from '@material-ui/icons/Delete';
 21 | import LanguageIcon from '@material-ui/icons/Language';
 22 | import LaunchIcon from '@material-ui/icons/Launch';
 23 | import Backdrop from '@material-ui/core/Backdrop';
 24 | import CircularProgress from '@material-ui/core/CircularProgress';
 25 | 
 26 | const useStyles = makeStyles((theme) => ({
 27 |     header: {
 28 |         position: 'absolute',
 29 |         height: '50px',
 30 |         width: '100%',
 31 |         margin: 'auto',
 32 |         top: 0,
 33 |         right: 0,
 34 |         left: 0,
 35 |         backgroundColor: '#50C0FF'
 36 |     },
 37 |     brandingName: {
 38 |         position: 'absolute',
 39 |         fontFamily: "'Orbitron', sans-serif",
 40 |         height: "fit-content",
 41 |         width: "fit-content",
 42 |         fontSize: '25px',
 43 |         fontWeight: '600',
 44 |         color: '#1A202E',
 45 |         margin: 'auto',
 46 |         top: '0',
 47 |         left: '15px',
 48 |         bottom: '0'
 49 |     },
 50 |     fabBtn: {
 51 |         position: 'absolute',
 52 |         color: '#1A202E',
 53 |         backgroundColor: '#50C0FF !important',
 54 |         margin: 'auto',
 55 |         right: '15px',
 56 |         bottom: '15px'
 57 |     },
 58 |     photoURL: {
 59 |         height: '50px',
 60 |         width: '50px',
 61 |         position: 'absolute',
 62 |         margin: 'auto',
 63 |         top: '0',
 64 |         right: '5px',
 65 |         bottom: '0'
 66 |     },
 67 |     menu: {
 68 |         color: '#50C0FF',
 69 |         fontFamily: "'Comfortaa', sans-serif",
 70 |     },
 71 |     projectsContainer: {
 72 |         position: 'absolute',
 73 |         height: 'calc(100% - 50px)',
 74 |         width: '100%',
 75 |         margin: 'auto',
 76 |         right: 0,
 77 |         left: 0,
 78 |         top: '50px',
 79 |         overflowX: 'hidden',
 80 |         overflowY: 'auto'
 81 |     },
 82 |     projectsGrid: {
 83 |         padding: '15px',
 84 |         height: 'fit-content',
 85 |         width: '100%',
 86 |         display: 'grid',
 87 |         gridGap: '15px',
 88 |         gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))'
 89 |     },
 90 |     root: {
 91 |         position: 'relative',
 92 |         height: "fit-content",
 93 |         width: "100%",
 94 |         backgroundColor: "#1A202E",
 95 |     },
 96 |     title: {
 97 |         fontSize: 30,
 98 |         fontFamily: "'Comfortaa', sans-serif",
 99 |         color: "#50C0FF",
100 |         whiteSpace: "nowrap",
101 |         overflow: "hidden",
102 |         textOverflow: "ellipsis"
103 |     },
104 |     pos: {
105 |         fontSize: 17,
106 |         color: "#fff",
107 |         fontFamily: "'Comfortaa', sans-serif",
108 |     },
109 |     deleteBtn: {
110 |         color: "#FF6D6D"
111 |     },
112 |     openBtn: {
113 |         color: "#50C0FF"
114 |     },
115 |     noProjects: {
116 |         height: "fit-content",
117 |         width: "fit-content",
118 |         position: "absolute",
119 |         margin: "auto",
120 |         top: 0,
121 |         bottom: 0,
122 |         left: 0,
123 |         right: 0,
124 |         fontFamily: "'Comfortaa', sans-serif",
125 |         fontSize: '34px',
126 |         textAlign: "center",
127 |         color: '#1A202E',
128 |         display: "none"
129 |     }
130 | }));
131 | function Projectspage() {
132 |     document.title = "Projects - Xper"
133 |     const classes = useStyles();
134 |     let history = useHistory();
135 | 
136 |     let firebaseRef = React.useRef();
137 |     let myUID = React.useRef();
138 | 
139 |     const [displayName, setDisplayName] = React.useState("");
140 |     const [userPhoto, setUserPhoto] = React.useState("");
141 | 
142 |     const [anchorEl, setAnchorEl] = React.useState(null);
143 | 
144 |     const handleClick = (event) => {
145 |         setAnchorEl(event.currentTarget);
146 |     };
147 | 
148 |     const handleClose = () => {
149 |         setAnchorEl(null);
150 |     };
151 | 
152 |     const [open, setOpen] = React.useState(false);
153 |     const startBackdrop = (instruct) => {
154 |         setOpen(instruct);
155 |     };
156 | 
157 |     const [projects, setProjects] = React.useState([]);
158 | 
159 |     const noProjects = React.useRef();
160 | 
161 |     const makeNewProject = (e) => {
162 |         startBackdrop(true);
163 |         const date = new Date();
164 |         const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
165 |         const created = date.getDate() + " " + months[date.getMonth()] + ", " + date.getFullYear();
166 |         if (firebase.auth) {
167 |             firebaseRef.current.push({
168 |                 name: "Untitled",
169 |                 html: `<!DOCTYPE html>
170 | <html>
171 |     <head>
172 |         <title>Document Title</title> 
173 |     </head>
174 |     <body>
175 |         <h1>HTML goes here</h1>
176 |     </body>
177 | </html>`,
178 |                 css: `body{
179 |                 
180 | }`,
181 |                 js: `//JavaScript goes here`,
182 |                 created: created
183 |             })
184 |                 .then(snap => {
185 |                     history.push("/edit/" + myUID.current + "/" + snap.key);
186 |                 })
187 |         }
188 |     }
189 | 
190 |     React.useEffect(() => {
191 |         startBackdrop(true);
192 |         firebase.auth().onAuthStateChanged(firebaseUser => {
193 |             if (firebaseUser) {
194 |                 // console.log(firebaseUser)
195 |                 setUserPhoto(firebaseUser.photoURL);
196 |                 setDisplayName(firebaseUser.displayName);
197 |                 myUID.current = firebaseUser.uid;
198 |                 firebaseRef.current = firebase.database().ref("WebDev/" + firebaseUser.uid);
199 |                 loadProjects();
200 |             }
201 |             else history.push("/auth");
202 |         });
203 |     }, []);
204 | 
205 |     function loadProjects() {
206 |         firebaseRef.current.once("value").then(snap => {
207 |             startBackdrop(false);
208 |             // const key = snap.key;
209 |             // const project = { ...snap.val(), key: key };
210 |             // setProjects(prevProjects => [...prevProjects, project]);
211 |             // console.log(snap.val())
212 |             try {
213 |                 noProjects.current.style.display = 'block';
214 |             } catch (e) {
215 |                 //fuck you error
216 |             }
217 |             let tempProjects = [];
218 |             for (let i in snap.val()) {
219 |                 const key = i;
220 |                 const project = { ...snap.val()[i], key: key };
221 |                 tempProjects.push(project);
222 |                 try {
223 |                     noProjects.current.style.display = 'none';
224 |                 } catch (e) {
225 |                     //fuck you error
226 |                 }
227 |             }
228 |             setProjects(tempProjects);
229 | 
230 |         })
231 |     }
232 | 
233 |     function deleteProject(projectToBeDeleted) {
234 |         Swal.fire({
235 |             title: 'Are you sure?',
236 |             text: "You won't be able to revert this!",
237 |             icon: 'warning',
238 |             showCancelButton: true,
239 |             confirmButtonColor: '#3085d6',
240 |             cancelButtonColor: '#d33',
241 |             confirmButtonText: 'Yes, delete it!'
242 |         }).then((result) => {
243 |             if (result.isConfirmed) {
244 |                 firebaseRef.current.child(projectToBeDeleted).remove(); loadProjects();
245 |                 Swal.fire(
246 |                     'Deleted!',
247 |                     'Your file has been deleted.',
248 |                     'success'
249 |                 )
250 |             }
251 |         })
252 |     }
253 | 
254 |     return (
255 |         <div>
256 |             <Backdrop className={classes.backdrop} open={open} style={{ zIndex: 5 }}>
257 |                 <CircularProgress style={{ color: '#50C0FF' }} />
258 |             </Backdrop>
259 |             <div className={classes.header}>
260 |                 <Link to="/"><div className={classes.brandingName}>Xper</div></Link>
261 |                 <IconButton className={classes.photoURL} onClick={handleClick}>
262 |                     <Avatar style={{ height: "30px", width: "30px" }} alt={displayName} src={userPhoto} />
263 |                 </IconButton>
264 |                 <Menu
265 |                     id="simple-menu"
266 |                     anchorEl={anchorEl}
267 |                     keepMounted
268 |                     open={Boolean(anchorEl)}
269 |                     onClose={handleClose}
270 |                 >
271 |                     <MenuItem className={classes.menu} onClick={() => { window.open("https://github.com/Jaagrav/Xper", '_blank') }}>Source Code</MenuItem>
272 |                     <MenuItem className={classes.menu} onClick={() => { firebase.auth().signOut(); }}>Logout</MenuItem>
273 |                 </Menu>
274 |             </div>
275 |             <div className={classes.projectsContainer}>
276 |                 <div className={classes.noProjects} ref={noProjects}>Looks like you don't have any projects<br /><br />Click on the add button to create your first project!</div>
277 |                 <div className={classes.projectsGrid}>
278 |                     {projects.map(project => (
279 |                         <Card className={classes.root} key={project.key}>
280 |                             <CardContent>
281 |                                 <Link to={"/edit/" + myUID.current + "/" + project.key + "/"}>
282 |                                     <Typography className={classes.title} variant="h5" component="h2">
283 |                                         {project.name}
284 |                                     </Typography></Link> <br />
285 |                                 <Typography className={classes.pos} variant="body2" component="p">
286 |                                     Created: {project.created}
287 |                                 </Typography>
288 |                             </CardContent>
289 |                             <CardActions>
290 |                                 <Button className={classes.openBtn} startIcon={<LaunchIcon />} size="small" onClick={() => { startBackdrop(true); history.push("/edit/" + myUID.current + "/" + project.key + "/") }}>Open</Button>
291 |                                 <Button className={classes.openBtn} startIcon={<LanguageIcon />} size="small" onClick={() => { window.open(("/deploy/" + myUID.current + "/" + project.key + "/"), "_blank") }}>Visit</Button>
292 |                                 <Button className={classes.deleteBtn} startIcon={<DeleteIcon />} size="small" onClick={() => { deleteProject(project.key) }}>Delete</Button>
293 |                             </CardActions>
294 |                         </Card>
295 |                     ))}
296 |                 </div>
297 |             </div>
298 |             <Fab color="primary" aria-label="add" className={classes.fabBtn} onClick={makeNewProject}>
299 |                 <AddIcon />
300 |             </Fab>
301 |         </div>
302 |     )
303 | }
304 | 
305 | export default Projectspage
306 | 


--------------------------------------------------------------------------------
/src/components/authpageillustration.svg:
--------------------------------------------------------------------------------
 1 | <svg width="640" height="597" viewBox="0 0 640 597" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M508.929 375.091V557.687L539.43 607.464L541.751 611.25H662.099L664.531 375.091H508.929Z" fill="#1A202E"/>
 4 | <path opacity="0.1" d="M508.929 375.091V557.687L539.43 607.464L541.302 375.091H508.929Z" fill="black"/>
 5 | <path d="M218.392 370.221V552.818L187.891 602.595L185.57 606.38H65.2222L62.7905 370.221H218.392Z" fill="#1A202E"/>
 6 | <path opacity="0.1" d="M218.392 370.221V552.818L187.891 602.595L186.02 370.221H218.392Z" fill="black"/>
 7 | <path d="M701 366.57V377.525H46.9871V361.7L107.769 330.05H647.512L701 366.57Z" fill="#1A202E"/>
 8 | <path opacity="0.1" d="M701 366.57V377.525H46.9871V361.7L701 366.57Z" fill="black"/>
 9 | <path d="M140.592 421.348H111.416L99.2595 412.827H153.963L140.592 421.348Z" fill="#62B0FF"/>
10 | <path d="M140.592 456.651H111.416L99.2595 448.129H153.963L140.592 456.651Z" fill="#62B0FF"/>
11 | <path d="M140.592 506.561H111.416L99.2595 498.039H153.963L140.592 506.561Z" fill="#62B0FF"/>
12 | <path d="M140.592 556.47H111.416L99.2595 547.949H153.963L140.592 556.47Z" fill="#62B0FF"/>
13 | <path d="M586.73 426.217H615.906L628.062 417.696H573.358L586.73 426.217Z" fill="#62B0FF"/>
14 | <path d="M586.73 461.52H615.906L628.062 452.999H573.358L586.73 461.52Z" fill="#62B0FF"/>
15 | <path d="M586.73 511.43H615.906L628.062 502.909H573.358L586.73 511.43Z" fill="#62B0FF"/>
16 | <path d="M586.73 561.339H615.906L628.062 552.818H573.358L586.73 561.339Z" fill="#62B0FF"/>
17 | <path d="M606.598 118.895H360.982C359.762 118.894 358.554 119.135 357.427 119.602C356.3 120.07 355.276 120.755 354.414 121.619C353.551 122.482 352.867 123.508 352.4 124.636C351.933 125.765 351.693 126.975 351.693 128.196V293.878C351.693 295.099 351.933 296.309 352.4 297.437C352.867 298.566 353.551 299.591 354.414 300.455C355.276 301.319 356.3 302.004 357.427 302.472C358.554 302.939 359.762 303.179 360.982 303.179H454.22L450.727 325.512C450.727 325.512 430.764 336.132 444.801 336.444C458.837 336.757 524.963 336.444 524.963 336.444C524.963 336.444 537.752 336.444 517.477 325.2L514.191 303.179H606.598C607.818 303.179 609.026 302.939 610.153 302.472C611.28 302.004 612.304 301.319 613.167 300.455C614.029 299.592 614.713 298.566 615.18 297.437C615.647 296.309 615.887 295.099 615.887 293.878V128.196C615.887 126.975 615.647 125.765 615.18 124.636C614.713 123.508 614.029 122.482 613.167 121.619C612.304 120.755 611.28 120.07 610.153 119.602C609.026 119.135 607.818 118.894 606.598 118.895Z" fill="#3F3D56"/>
18 | <path d="M606.997 128.733H360.583V266.791H606.997V128.733Z" fill="#4C5362"/>
19 | <path d="M483.79 125.922C484.651 125.922 485.35 125.223 485.35 124.361C485.35 123.498 484.651 122.799 483.79 122.799C482.929 122.799 482.23 123.498 482.23 124.361C482.23 125.223 482.929 125.922 483.79 125.922Z" fill="#4C5362"/>
20 | <path d="M483.79 296.464C487.063 296.464 489.716 293.807 489.716 290.529C489.716 287.252 487.063 284.595 483.79 284.595C480.517 284.595 477.864 287.252 477.864 290.529C477.864 293.807 480.517 296.464 483.79 296.464Z" fill="#4C5362"/>
21 | <path d="M474.555 353.311V356.435H306.744V353.936L306.975 353.311L311.11 342.067H471.124L474.555 353.311Z" fill="#3F3D56"/>
22 | <path d="M539.134 350.253C538.829 351.562 537.674 352.942 535.067 354.248C525.709 358.933 506.682 352.999 506.682 352.999C506.682 352.999 492.022 350.5 492.022 343.941C492.434 343.658 492.863 343.403 493.307 343.175C497.241 341.091 510.286 335.948 533.415 343.393C535.119 343.929 536.641 344.928 537.811 346.278C538.33 346.789 538.72 347.415 538.95 348.106C539.18 348.797 539.243 349.533 539.134 350.253Z" fill="#3F3D56"/>
23 | <path opacity="0.1" d="M539.134 350.253C527.681 354.648 517.472 354.976 506.994 347.689C503.032 344.756 498.235 343.174 493.307 343.175C497.242 341.091 510.286 335.948 533.415 343.393C535.119 343.929 536.641 344.928 537.811 346.278C538.33 346.789 538.72 347.415 538.95 348.106C539.18 348.797 539.243 349.533 539.134 350.253Z" fill="black"/>
24 | <path d="M524.773 347.689C527.013 347.689 528.828 347.129 528.828 346.439C528.828 345.749 527.013 345.19 524.773 345.19C522.534 345.19 520.719 345.749 520.719 346.439C520.719 347.129 522.534 347.689 524.773 347.689Z" fill="#4C5362"/>
25 | <path opacity="0.1" d="M474.555 353.311V356.435H306.744V353.936L306.975 353.311H474.555Z" fill="black"/>
26 | <path d="M93.3054 0.000152653C91.6022 -0.139872 89.8969 0.241622 88.4152 1.09408C86.9603 2.09178 86.0433 3.83963 85.1074 5.46612C81.5287 11.7591 76.6839 17.2392 70.8799 21.5594C66.6524 24.6606 61.2777 28.5275 62.001 34.2454C62.3826 36.1337 63.0792 37.9441 64.0616 39.6006C67.9615 47.484 78.6038 53.5763 77.5571 62.5719C81.4317 56.0763 76.2491 52.8644 80.1238 46.3689C81.969 43.2755 85.1745 39.7837 87.9604 41.7263C88.8932 42.3768 89.5057 43.5434 90.477 44.1142C92.7945 45.476 95.2601 42.8725 97.3115 41.0284C104.386 34.6693 114.446 36.3352 123.248 38.3165C127.404 39.2519 131.969 40.4791 134.426 44.4566C137.656 49.6861 131.357 55.3341 129.765 61.2465C129.635 61.7503 129.629 62.2781 129.747 62.7848C129.866 63.2915 130.105 63.762 130.444 64.1561C130.783 64.5501 131.213 64.856 131.696 65.0476C132.179 65.2391 132.701 65.3106 133.218 65.256C135.859 64.9951 138.988 64.7812 139.145 63.6206C142.468 63.739 146.54 63.3621 147.964 59.897C148.399 58.5259 148.629 57.0979 148.646 55.6594C149.169 49.8387 151.636 44.5285 153.27 38.9885C154.905 33.4485 155.615 26.956 152.857 22.0443C151.873 20.41 150.656 18.9285 149.244 17.6465C133.592 2.47895 113.014 -0.0223616 93.3054 0.000152653Z" fill="#2F2E41"/>
27 | <path d="M80.9611 73.934C80.9611 73.934 84.365 102.339 71.8839 104.612C59.4028 106.884 83.2303 145.515 83.2303 145.515L139.963 152.333L126.347 106.884C126.347 106.884 117.27 103.476 122.943 80.7513C128.616 58.0271 80.9611 73.934 80.9611 73.934Z" fill="#FFB8B8"/>
28 | <path d="M46.3542 561.937L50.8933 624.429H74.72L67.9129 561.937H46.3542Z" fill="#FFB8B8"/>
29 | <path d="M221.09 443.771L224.493 496.036L250.591 484.674L240.379 441.499L221.09 443.771Z" fill="#FFB8B8"/>
30 | <path d="M29.3347 323.332C29.3347 323.332 30.4693 389.233 37.2773 410.821C44.0852 432.409 42.9505 433.545 41.8159 436.954C40.6812 440.362 39.5466 438.09 39.5466 443.771C39.5466 449.452 37.2773 539.213 39.5466 547.166C41.8159 555.12 32.7387 568.754 39.5466 569.89C46.3544 571.026 78.1245 569.89 79.2592 563.073C80.3938 556.256 70.182 553.983 74.7206 549.439C79.2592 544.894 86.0671 451.724 86.0671 451.724L101.952 386.96L131.453 352.874H193.858L213.147 427.864C213.147 427.864 205.205 449.452 210.878 449.452C216.551 449.452 250.591 456.269 250.591 431.272C250.591 406.276 239.244 332.422 236.975 330.15C234.706 327.877 238.11 319.924 234.706 316.515C231.302 313.107 191.589 289.246 176.839 284.701C162.088 280.156 141.396 274.747 141.396 274.747L29.3347 323.332Z" fill="#2F2E41"/>
31 | <path d="M250.591 475.585C250.591 475.585 233.571 469.904 225.628 486.947C217.686 503.99 221.09 508.535 221.09 508.535C221.09 508.535 247.187 517.625 251.725 513.08C253.7 511.102 259.97 510.415 266.424 510.27C276.254 510.049 278.87 496.123 269.586 492.88C269.309 492.783 269.029 492.699 268.745 492.628C259.668 490.356 250.591 475.585 250.591 475.585Z" fill="#2F2E41"/>
32 | <path d="M106.491 92.6815C125.29 92.6815 140.53 77.4205 140.53 58.5952C140.53 39.7698 125.29 24.5088 106.491 24.5088C87.6911 24.5088 72.4512 39.7698 72.4512 58.5952C72.4512 77.4205 87.6911 92.6815 106.491 92.6815Z" fill="#FFB8B8"/>
33 | <path d="M62.2394 118.814C62.2394 118.814 117.837 130.176 131.453 111.997C145.069 93.8177 150.742 163.127 150.742 163.127L157.55 235.844L147.338 275.612C147.338 275.612 94.0095 318.788 76.9899 322.196C59.9702 325.605 33.8733 327.877 33.8733 327.877C33.8733 327.877 41.8159 201.758 41.8159 199.485C41.8159 197.213 62.2394 118.814 62.2394 118.814Z" fill="#62B0FF"/>
34 | <path d="M79.1479 97.5051C79.1479 97.5051 66.7779 90.4091 63.374 97.2264C59.97 104.044 28.1999 121.087 24.796 121.087C21.3921 121.087 31.6039 215.392 27.0653 226.754C22.5267 238.117 0.968443 321.06 13.4496 327.877C25.9307 334.695 16.8535 321.06 29.3346 338.103C41.8157 355.146 103.087 355.146 106.491 348.329C109.894 341.512 79.259 290.382 84.9322 242.661C90.6055 194.941 99.6827 129.04 91.7401 119.951C83.7976 110.861 79.1479 97.5051 79.1479 97.5051Z" fill="#2F2E41"/>
35 | <path d="M120.106 105.18L121.687 99.7334C121.687 99.7334 168.896 115.406 171.166 125.632C173.435 135.858 172.3 207.439 164.358 213.12C156.415 218.801 145.069 227.891 153.011 241.525C160.954 255.16 170.031 269.931 176.839 271.067C183.647 272.203 196.128 280.156 192.724 288.11C189.32 296.063 148.473 281.293 148.473 281.293C148.473 281.293 121.241 260.841 122.376 229.027C123.51 197.213 120.106 105.18 120.106 105.18Z" fill="#2F2E41"/>
36 | <path d="M159.819 239.253L132.587 290.382C132.587 290.382 92.8748 331.286 115.568 335.831C138.261 340.376 150.742 298.336 150.742 298.336L180.243 256.296L159.819 239.253Z" fill="#FFB8B8"/>
37 | <path d="M94.9637 8.91876C93.5917 8.81696 92.2174 9.08388 90.9829 9.69194C89.8667 10.5083 88.9467 11.564 88.2902 12.7821C85.2638 17.3407 81.3188 21.2152 76.7084 24.1567C73.2671 26.3486 68.8919 29.0817 69.4807 33.1231C69.8003 34.4781 70.3691 35.7616 71.1581 36.9081C74.3438 42.5364 75.612 49.0506 74.7708 55.465L84.2334 41.6919C85.7355 39.5055 88.3449 37.0375 90.6127 38.4106C91.3721 38.8703 91.8707 39.6949 92.6613 40.0983C94.5479 41.0608 96.555 39.2207 98.2249 37.9172C103.984 33.4227 112.173 34.6002 119.339 36.0005C122.722 36.6617 126.438 37.5291 128.437 40.3403C131.761 45.012 128.291 51.7624 130.23 57.1594C130.773 56.7787 131.234 56.2928 131.586 55.7303C131.938 55.1679 132.174 54.5405 132.279 53.8852C134.984 53.969 138.299 53.7026 139.458 51.2534C139.811 50.2936 139.998 49.2809 140.014 48.2584C140.439 44.1443 142.447 40.3911 143.778 36.4754C145.108 32.5598 145.687 27.971 143.442 24.4994C142.62 23.3231 141.629 22.2755 140.5 21.391C127.759 10.6707 111.007 8.90285 94.9637 8.91876Z" fill="#2F2E41"/>
38 | <path d="M159.819 121.087L170.39 123.897C170.39 123.897 194.993 186.987 189.32 230.163C183.646 273.339 180.242 264.249 180.242 264.249C180.242 264.249 171.165 243.798 150.742 248.342L159.819 121.087Z" fill="#2F2E41"/>
39 | <path d="M10.0457 261.977L57.7008 335.831C57.7008 335.831 87.2016 373.326 96.2787 356.283C105.356 339.239 64.5087 310.834 64.5087 310.834L33.8732 254.024L10.0457 261.977Z" fill="#FFB8B8"/>
40 | <path d="M33.8732 123.359L24.7961 121.087C24.7961 121.087 6.64174 126.768 2.10316 150.628C-2.43542 174.489 0.968507 269.93 6.64174 271.067C12.315 272.203 34.6618 254.448 38.2388 258.213C41.8158 261.977 30.4693 242.661 33.8732 232.435C37.2771 222.21 33.8732 123.359 33.8732 123.359Z" fill="#2F2E41"/>
41 | <path d="M460.467 174.076H431.141V181.146H460.467V174.076Z" fill="#62B0FF"/>
42 | <path d="M562.022 174.076H551.704V181.146H562.022V174.076Z" fill="#62B0FF"/>
43 | <path d="M582.659 174.076H572.341V181.146H582.659V174.076Z" fill="#62B0FF"/>
44 | <path d="M540.843 174.076H470.786V181.146H540.843V174.076Z" fill="#62B0FF"/>
45 | <path d="M423.538 219.758H394.212V226.827H423.538V219.758Z" fill="#62B0FF"/>
46 | <path d="M525.093 219.758H514.775V226.827H525.093V219.758Z" fill="#62B0FF"/>
47 | <path d="M545.73 219.758H535.412V226.827H545.73V219.758Z" fill="#62B0FF"/>
48 | <path d="M503.913 219.758H433.856V226.827H503.913V219.758Z" fill="#62B0FF"/>
49 | <path d="M544.644 189.847H515.318V196.917H544.644V189.847Z" fill="#62B0FF"/>
50 | <path d="M584.289 189.847H554.962V196.917H584.289V189.847Z" fill="#62B0FF"/>
51 | <path d="M404.53 189.847H394.212V196.917H404.53V189.847Z" fill="#62B0FF"/>
52 | <path d="M425.167 189.847H414.849V196.917H425.167V189.847Z" fill="#62B0FF"/>
53 | <path d="M505.543 189.847H435.486V196.917H505.543V189.847Z" fill="#62B0FF"/>
54 | <path d="M483.819 205.074H454.493V212.144H483.819V205.074Z" fill="#62B0FF"/>
55 | <path d="M444.175 205.074H414.849V212.144H444.175V205.074Z" fill="#62B0FF"/>
56 | <path d="M404.53 205.074H394.212V212.144H404.53V205.074Z" fill="#62B0FF"/>
57 | <path d="M584.289 205.074H573.97V212.144H584.289V205.074Z" fill="#62B0FF"/>
58 | <path d="M563.652 205.074H493.595V212.144H563.652V205.074Z" fill="#62B0FF"/>
59 | </g>
60 | <defs>
61 | <clipPath id="clip0">
62 | <rect width="701" height="661" fill="white"/>
63 | </clipPath>
64 | </defs>
65 | </svg>
66 | 


--------------------------------------------------------------------------------
/src/pages/editorpage.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { useHistory, Link } from 'react-router-dom';
  3 | 
  4 | import firebase from '../components/firebase';
  5 | 
  6 | import AceEditor from "react-ace";
  7 | import "ace-builds/src-noconflict/theme-nord_dark";
  8 | import "ace-builds/src-noconflict/ext-language_tools";
  9 | import "ace-builds/src-noconflict/mode-html";
 10 | import "ace-builds/src-noconflict/mode-css";
 11 | import "ace-builds/src-noconflict/mode-javascript";
 12 | 
 13 | import { makeStyles } from '@material-ui/core/styles';
 14 | import Avatar from '@material-ui/core/Avatar';
 15 | import SpeedDial from '@material-ui/lab/SpeedDial';
 16 | import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
 17 | import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
 18 | import SaveIcon from '@material-ui/icons/Save';
 19 | import ShareIcon from '@material-ui/icons/Share';
 20 | import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
 21 | import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
 22 | import Tooltip from '@material-ui/core/Tooltip';
 23 | import Zoom from '@material-ui/core/Zoom';
 24 | import Snackbar from '@material-ui/core/Snackbar';
 25 | import MuiAlert from '@material-ui/lab/Alert';
 26 | import Backdrop from '@material-ui/core/Backdrop';
 27 | import CircularProgress from '@material-ui/core/CircularProgress';
 28 | import LaunchIcon from '@material-ui/icons/Launch';
 29 | 
 30 | function Alert(props) {
 31 |     return <MuiAlert elevation={6} variant="filled" {...props} />;
 32 | }
 33 | 
 34 | const useStyles = makeStyles((theme) => ({
 35 |     header: {
 36 |         position: 'absolute',
 37 |         height: '50px',
 38 |         width: '100%',
 39 |         margin: 'auto',
 40 |         top: 0,
 41 |         right: 0,
 42 |         left: 0,
 43 |         backgroundColor: '#50C0FF',
 44 |         zIndex: 1
 45 |     },
 46 |     brandingName: {
 47 |         position: 'absolute',
 48 |         fontFamily: "'Orbitron', sans-serif",
 49 |         height: "fit-content",
 50 |         width: "fit-content",
 51 |         fontSize: '25px',
 52 |         fontWeight: '600',
 53 |         color: '#1A202E',
 54 |         margin: 'auto',
 55 |         top: '0',
 56 |         left: '15px',
 57 |         bottom: '0'
 58 |     },
 59 |     photoURL: {
 60 |         height: '50px',
 61 |         width: '50px',
 62 |         position: 'absolute',
 63 |         margin: 'auto',
 64 |         top: '0',
 65 |         right: '5px',
 66 |         bottom: '0'
 67 |     },
 68 |     root: {
 69 |         transform: 'translateZ(0px)',
 70 |         flexGrow: 1,
 71 |     },
 72 |     exampleWrapper: {
 73 |         position: 'relative',
 74 |         marginTop: theme.spacing(3),
 75 |         height: 380,
 76 |     },
 77 |     radioGroup: {
 78 |         margin: theme.spacing(1, 0),
 79 |     },
 80 |     speedDial: {
 81 |         position: 'absolute',
 82 |         top: 5,
 83 |         right: 0
 84 |     },
 85 |     codeName: {
 86 |         position: 'absolute',
 87 |         margin: 'auto',
 88 |         fontSize: '1rem',
 89 |         fontWeight: '600',
 90 |         fontFamily: '"Comfortaa", sans-serif',
 91 |         top: '0',
 92 |         bottom: '0',
 93 |         right: '60px',
 94 |         height: '30px',
 95 |         color: '#1A202E !important',
 96 |         textAlign: 'right',
 97 |         backgroundColor: 'transparent',
 98 |         outline: 'none',
 99 |         border: 'none'
100 |     },
101 |     editorsTabs: {
102 |         position: 'absolute',
103 |         width: '369px',
104 |         display: 'grid',
105 |         gridTemplateColumns: 'repeat(3, minmax(100px, 1fr))',
106 |         zIndex: 2,
107 |         [theme.breakpoints.down("sm")]: {
108 |             width: '100%',
109 |             top: '50px',
110 |             zIndex: 0,
111 |         },
112 |     },
113 |     tabs: {
114 |         cursor: 'pointer',
115 |         height: '100%',
116 |         width: '100%',
117 |         fontSize: '1rem',
118 |         color: '#50C0FF',
119 |         fontFamily: '"Comfortaa", sans-serif',
120 |         textAlign: 'center',
121 |         padding: '16px 0',
122 |         marginRight: '3px',
123 |         display: 'inline-block',
124 |         backgroundColor: "#1A202E",
125 |         "&.selected": {
126 |             backgroundColor: "#0E1218 !important",
127 |             cursor: 'auto'
128 |         },
129 |         "&:hover": {
130 |             backgroundColor: "#262f44",
131 |         }
132 |     },
133 |     dragToOutput: {
134 |         position: 'absolute',
135 |         margin: 'auto',
136 |         cursor: 'w-resize',
137 |         height: '50px',
138 |         width: '50px',
139 |         backgroundColor: '#1A202E',
140 |         borderRadius: '50px',
141 |         display: 'flex',
142 |         justifyContent: 'center',
143 |         alignItems: 'center',
144 |         bottom: 15,
145 |         right: 477,
146 |         [theme.breakpoints.down("sm")]: {
147 |             right: 15,
148 |         },
149 |         zIndex: '2'
150 |     },
151 |     editor: {
152 |         position: 'absolute',
153 |         height: 'calc(100% - 50px)',
154 |         width: '100%',
155 |         margin: 'auto',
156 |         top: '50px',
157 |         right: '0',
158 |         left: '0',
159 |         zIndex: '0',
160 |         [theme.breakpoints.down("sm")]: {
161 |             height: 'calc(100% - 100px)',
162 |             top: '100px',
163 |         },
164 |     },
165 |     iframe: {
166 |         position: 'absolute',
167 |         height: '100%',
168 |         margin: 'auto',
169 |         right: '0',
170 |         top: '0',
171 |         bottom: '0',
172 |         outline: 0,
173 |         border: 0,
174 |         backgroundColor: 'white',
175 |         zIndex: 4,
176 |         [theme.breakpoints.down("sm")]: {
177 |             transition: '0.4s', width: '0%',
178 |         },
179 |     },
180 |     editors: {
181 |         position: 'absolute',
182 |         height: '100%',
183 |         width: '100%',
184 |         margin: 'auto',
185 |         top: 0,
186 |         left: 0,
187 |         bottom: 0,
188 | 
189 |     }
190 | }));
191 | 
192 | function Editorpage(props) {
193 |     document.title = "Code Editor - Xper";
194 |     const classes = useStyles();
195 |     let history = useHistory();
196 |     let mouseDown = false;
197 |     let codeName = React.useRef();
198 |     let html = '', css = '', js = '';
199 |     let htmlTabRef = React.useRef(), cssTabRef = React.useRef(), jsTabRef = React.useRef();
200 |     let htmlEditorRef = React.useRef(), cssEditorRef = React.useRef(), jsEditorRef = React.useRef(), editors = React.useRef();
201 |     let dragToIframeRef = React.useRef();
202 | 
203 |     let firebaseRef = React.useRef();
204 |     const [loadCode, setLoadCode] = React.useState(false);
205 | 
206 |     const [displayName, setDisplayName] = React.useState("");
207 |     const [userPhoto, setUserPhoto] = React.useState("");
208 |     const [letEdit, setLetEdit] = React.useState(false);
209 | 
210 |     let userID = props.match.params.UID, projectID = props.match.params.projectID;
211 | 
212 |     React.useEffect(() => {
213 |         firebase.auth().onAuthStateChanged(firebaseUser => {
214 |             // else if (snap.exists()) history.push("/notfound")
215 |             if (firebaseUser) {
216 |                 if (firebaseUser.uid === userID) {
217 |                     // console.log(firebaseUser);
218 |                     setUserPhoto(firebaseUser.photoURL);
219 |                     setDisplayName(firebaseUser.displayName);
220 |                     firebaseRef.current = firebase.database().ref("WebDev/" + userID + "/" + projectID)
221 |                     firebaseRef.current.once("value").then(snap => {
222 |                         if (snap.key === projectID) {
223 |                             html = snap.val().html;
224 |                             css = snap.val().css;
225 |                             js = snap.val().js;
226 |                             setLoadCode(!loadCode);
227 |                             codeName.current.value = snap.val().name;
228 |                             htmlEditorRef.current.editor.setValue(html, 1);
229 |                             cssEditorRef.current.editor.setValue(css, 1);
230 |                             jsEditorRef.current.editor.setValue(js, 1);
231 |                             updateIframe();
232 |                         }
233 |                     }).catch(error => {
234 |                         console.warn('Contents not found!');
235 |                         history.push("/notfound")
236 |                     })
237 |                 }
238 |                 else {
239 |                     firebase.database().ref("WebDev/" + userID).once('value').then(snap => {
240 |                         if (!snap.exists())
241 |                             history.push("/notfound")
242 |                     })
243 |                     firebase.database().ref("WebDev/" + userID + "/" + projectID).once("value").then(snap => {
244 |                         if (snap.key === projectID && snap.exists()) {
245 |                             html = snap.val().html;
246 |                             css = snap.val().css;
247 |                             js = snap.val().js;
248 |                             setLoadCode(!loadCode);
249 |                             console.log(html, css, js);
250 |                             codeName.current.disabled = true;
251 |                             codeName.current.value = snap.val().name;
252 |                             setLetEdit(true);
253 |                             htmlEditorRef.current.editor.setValue(html, 1);
254 |                             cssEditorRef.current.editor.setValue(css, 1);
255 |                             jsEditorRef.current.editor.setValue(js, 1);
256 |                             var old_element = document.getElementsByClassName(classes.iframe)[0];
257 |                             var new_element = old_element.cloneNode(true);
258 |                             old_element.parentNode.replaceChild(new_element, old_element);
259 |                             let output = new_element.contentWindow.document;
260 |                             let htmlDoc = "<html><style>" + css + "</style>" + html + "<script>" + js + "</script></html>";
261 |                             try {
262 |                                 // output.contentWindow.location.reload(true);
263 |                                 output.open();
264 |                                 output.write(htmlDoc);
265 |                                 output.close();
266 |                             } catch (e) {
267 |                                 //Fuck You error
268 |                                 // console.log(e)
269 |                             }
270 |                         } else history.push("/notfound");
271 |                     }).catch(error => {
272 |                         console.warn('Contents not found!', error);
273 |                     })
274 |                 }
275 |             }
276 |             else
277 |                 history.push("/auth");
278 |         });
279 |         if (window.innerWidth >= 1024) {
280 |             let widthOfIframe = Math.floor(((477 - 20) / window.innerWidth) * 100);
281 |             document.getElementsByClassName(classes.iframe)[0].style.width = widthOfIframe + "%";
282 |             editors.current.style.width = (100 - widthOfIframe) + "%";
283 |             htmlEditorRef.current.editor.resize();
284 |             cssEditorRef.current.editor.resize();
285 |             jsEditorRef.current.editor.resize();
286 |         }
287 |     }, []);
288 | 
289 |     // window.addEventListener('resize', e => {
290 |     //     console.log("Window Resized!")
291 |     //     if (window.innerWidth > 1000)
292 |     //         window.location.reload(true);
293 |     // });
294 | 
295 |     function openTab(tabName) {
296 |         htmlTabRef.current.classList.remove("selected");
297 |         cssTabRef.current.classList.remove("selected");
298 |         jsTabRef.current.classList.remove("selected");
299 |         htmlEditorRef.current.refEditor.style.display = "none";
300 |         cssEditorRef.current.refEditor.style.display = "none";
301 |         jsEditorRef.current.refEditor.style.display = "none";
302 |         switch (tabName) {
303 |             case 'html':
304 |                 htmlTabRef.current.classList.add("selected");
305 |                 htmlEditorRef.current.refEditor.style.display = "block";
306 |                 break;
307 |             case 'css':
308 |                 cssTabRef.current.classList.add("selected");
309 |                 cssEditorRef.current.refEditor.style.display = "block";
310 |                 break;
311 |             case 'js':
312 |                 jsTabRef.current.classList.add("selected");
313 |                 jsEditorRef.current.refEditor.style.display = "block";
314 |                 break;
315 |             default: console.log("Shit")
316 |         }
317 |     }
318 | 
319 |     function updateIframe() {
320 |         try {
321 |             firebaseRef.current.child("html").set(html)
322 |             firebaseRef.current.child("css").set(css)
323 |             firebaseRef.current.child("js").set(js)
324 |             var old_element = document.getElementsByClassName(classes.iframe)[0];
325 |             var new_element = old_element.cloneNode(true);
326 |             old_element.parentNode.replaceChild(new_element, old_element);
327 |             let output = new_element.contentWindow.document;
328 |             let htmlDoc = "<html><style>" + css + "</style>" + html + "<script>" + js + "</script></html>";
329 |             try {
330 |                 // output.contentWindow.location.reload(true);
331 |                 output.open();
332 |                 output.write(htmlDoc);
333 |                 output.close();
334 |             } catch (e) {
335 |                 //Fuck You error
336 |                 console.log(e)
337 |             }
338 |         } catch (e) {
339 |             //Fuck you error
340 |         }
341 |     }
342 |     function dragToShowIframe(e) {
343 |         let mousePos = window.innerWidth - (e.clientX + 30);
344 |         if (mouseDown && e.clientX > 40 && e.clientX < window.innerWidth - 40) {
345 |             dragToIframeRef.current.style.right = mousePos + "px";
346 |             let widthOfIframe = Math.floor(((mousePos - 20) / window.innerWidth) * 100);
347 |             document.getElementsByClassName(classes.iframe)[0].style.width = widthOfIframe + "%";
348 |             editors.current.style.width = (100 - widthOfIframe) + "%";
349 |             htmlEditorRef.current.editor.resize();
350 |             cssEditorRef.current.editor.resize();
351 |             jsEditorRef.current.editor.resize();
352 |         }
353 |     }
354 | 
355 |     function htmlChanged(e) {
356 |         html = e;
357 |         updateIframe();
358 |     }
359 |     function cssChanged(e) {
360 |         css = e;
361 |         updateIframe();
362 |     }
363 |     function jsChanged(e) {
364 |         js = e;
365 |         updateIframe();
366 |     }
367 | 
368 |     let iframeOpen = false;
369 |     function openOutput() {
370 |         if (window.innerWidth <= 1024) {
371 |             console.log("Open Output")
372 |             iframeOpen = !iframeOpen;
373 |             document.getElementsByClassName(classes.iframe)[0].style.width = iframeOpen ? "100%" : "0%";
374 | 
375 |             setTimeout(() => {
376 |                 htmlEditorRef.current.editor.resize();
377 |                 cssEditorRef.current.editor.resize();
378 |                 jsEditorRef.current.editor.resize();
379 |             }, 1000)
380 |         }
381 |         else {
382 |             console.log("Do nothing")
383 |         }
384 |     }
385 | 
386 |     function changeCodeName(e) {
387 |         firebaseRef.current.child("name").set(e.target.value);
388 |     }
389 | 
390 | 
391 | 
392 |     function Speeddialreturn() {
393 |         const [openSnackbar, setOpenSnackBar] = React.useState(false);
394 |         const [snackBarText, setSnackBarText] = React.useState("Link Copied");
395 |         const handleClose = (event, reason) => {
396 |             if (reason === 'clickaway') {
397 |                 return;
398 |             }
399 | 
400 |             setOpenSnackBar(false);
401 |         };
402 | 
403 |         const [open, setOpen] = React.useState(false);
404 |         function copyLink(e) {
405 |             console.log("Copy Link")
406 |             const copyTxt = document.createElement("input");
407 |             copyTxt.value = "https://codersweb.netlify.app/" + e + "/" + userID + "/" + projectID;
408 |             document.body.parentNode.appendChild(copyTxt);
409 |             copyTxt.select();
410 |             document.execCommand("copy")
411 |             document.body.parentNode.removeChild(copyTxt);
412 |             setSnackBarText(e.substring(0, 1).toUpperCase() + e.substring(1) + " Link Copied!")
413 |             setOpenSnackBar(true);
414 |         }
415 | 
416 |         function shareLink() {
417 |             if (navigator.share) {
418 |                 navigator
419 |                     .share({
420 |                         title: codeName.current.value + " - Xper",
421 |                         url: "https://codersweb.netlify.app/edit/" + userID + "/" + projectID
422 |                     })
423 |                     .then(() => {
424 |                         console.log("Thanks for sharing!");
425 |                     })
426 |                     .catch(console.error);
427 |             } else {
428 |                 console.log("support na re");
429 |                 copyLink("edit")
430 |             }
431 |         }
432 | 
433 |         const actions = [
434 |             { icon: <HomeRoundedIcon onClick={() => { history.push('/') }} />, name: 'Home' },
435 |             { icon: <LaunchIcon onClick={() => { window.open(("/deploy/" + userID + "/" + projectID + "/"), "_blank") }} />, name: 'Open Deployed Site' },
436 |             { icon: <FileCopyIcon onClick={() => { copyLink("deploy") }} />, name: 'Copy Deploy Link' },
437 |             { icon: <ShareIcon onClick={shareLink} />, name: 'Share Code Link' },
438 |             { icon: <SaveIcon />, name: 'Save' },
439 |         ];
440 |         return (
441 |             <div>
442 |                 <Snackbar open={openSnackbar} anchorOrigin={{ vertical: "bottom", horizontal: "left" }} autoHideDuration={2000} onClose={handleClose}>
443 |                     <Alert onClose={handleClose} severity="success">
444 |                         {snackBarText}
445 |                     </Alert>
446 |                 </Snackbar>
447 |                 <SpeedDial
448 |                     ariaLabel="SpeedDial example"
449 |                     className={classes.speedDial}
450 |                     icon={<Avatar style={{ height: "30px", width: "30px" }} alt={displayName} src={userPhoto} />}
451 |                     onClose={() => { setOpen(false) }}
452 |                     onOpen={() => { setOpen(true) }}
453 |                     open={open}
454 |                     direction={"down"}
455 |                     onClick={() => {/*do nothing*/ }}
456 |                 >
457 |                     {
458 |                         actions.map((action) => (
459 |                             <SpeedDialAction
460 |                                 key={action.name}
461 |                                 icon={action.icon}
462 |                                 tooltipTitle={action.name}
463 |                             />
464 |                         ))
465 |                     }
466 |                 </SpeedDial>
467 |             </div>
468 |         )
469 |     }
470 | 
471 |     function Loader() {
472 |         const [openLoader, setOpenLoader] = React.useState(true);
473 | 
474 |         React.useEffect(() => {
475 |             firebase.database().ref("WebDev/" + userID + "/" + projectID).once("value").then(snap => {
476 |                 setOpenLoader(false);
477 |             });
478 |         }, [])
479 | 
480 |         return (
481 |             <Backdrop open={openLoader} style={{ zIndex: 5 }}>
482 |                 <CircularProgress style={{ color: '#50C0FF' }} />
483 |             </Backdrop>
484 |         )
485 |     }
486 |     return (
487 |         <div onMouseUp={() => { mouseDown = false; }} onMouseMove={dragToShowIframe}>
488 |             <Loader />
489 |             <div className={classes.header}>
490 |                 <Link to="/"><div className={classes.brandingName}>Xper</div></Link>
491 |                 <input ref={codeName} className={classes.codeName} onChange={changeCodeName} placeholder="Project Name" />
492 |                 <Speeddialreturn />
493 |             </div>
494 |             <div className={classes.editorsTabs}>
495 |                 <div className={classes.tabs + " selected"} ref={htmlTabRef} onClick={() => { openTab('html') }}>HTML</div>
496 |                 <div className={classes.tabs} ref={cssTabRef} onClick={() => { openTab('css') }}>CSS</div>
497 |                 <div className={classes.tabs} ref={jsTabRef} onClick={() => { openTab('js') }}>JS</div>
498 |             </div>
499 |             <div className={classes.editor} update={loadCode}>
500 |                 <div className={classes.editors} ref={editors}>
501 |                     <AceEditor
502 |                         placeholder="HTML goes here"
503 |                         mode="html"
504 |                         theme="nord_dark"
505 |                         name="htmlEditor"
506 |                         fontSize={18}
507 |                         wrapEnabled={false}
508 |                         ref={htmlEditorRef}
509 |                         showPrintMargin={false}
510 |                         showGutter={true}
511 |                         highlightActiveLine={true}
512 |                         value={html}
513 |                         readOnly={letEdit}
514 |                         setOptions={{
515 |                             enableBasicAutocompletion: true,
516 |                             enableLiveAutocompletion: true,
517 |                             enableSnippets: true,
518 |                             showLineNumbers: true,
519 |                         }}
520 |                         onChange={htmlChanged}
521 |                     />
522 |                     <AceEditor
523 |                         placeholder="CSS goes here"
524 |                         mode="css"
525 |                         theme="nord_dark"
526 |                         name="cssEditor"
527 |                         fontSize={18}
528 |                         wrapEnabled={false}
529 |                         ref={cssEditorRef}
530 |                         showPrintMargin={false}
531 |                         showGutter={true}
532 |                         highlightActiveLine={true}
533 |                         value={css}
534 |                         readOnly={letEdit}
535 |                         setOptions={{
536 |                             enableBasicAutocompletion: true,
537 |                             enableLiveAutocompletion: true,
538 |                             enableSnippets: true,
539 |                             showLineNumbers: true,
540 |                         }}
541 |                         onChange={cssChanged}
542 |                     />
543 |                     <AceEditor
544 |                         placeholder="JavaScript goes here"
545 |                         mode="javascript"
546 |                         theme="nord_dark"
547 |                         name="jsEditor"
548 |                         fontSize={18}
549 |                         wrapEnabled={false}
550 |                         ref={jsEditorRef}
551 |                         showPrintMargin={false}
552 |                         showGutter={true}
553 |                         highlightActiveLine={true}
554 |                         value={js}
555 |                         readOnly={letEdit}
556 |                         setOptions={{
557 |                             enableBasicAutocompletion: true,
558 |                             enableLiveAutocompletion: true,
559 |                             enableSnippets: true,
560 |                             showLineNumbers: true,
561 |                         }}
562 |                         onChange={jsChanged}
563 |                     />
564 |                 </div>
565 |                 <iframe
566 |                     title=" "
567 |                     className={classes.iframe}
568 |                 />
569 |             </div>
570 |             <Tooltip TransitionComponent={Zoom} title="Drag to see output" placement="left" onClick={openOutput} onMouseDown={() => { mouseDown = true; }} ref={dragToIframeRef}>
571 |                 <div className={classes.dragToOutput}>
572 |                     <PlayArrowRoundedIcon style={{ color: "#50C0FF" }} />
573 |                 </div>
574 |             </Tooltip>
575 |         </div>
576 |     )
577 | }
578 | 
579 | export default Editorpage;
580 | 


--------------------------------------------------------------------------------
/src/components/notfound.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1075" height="585" viewBox="0 0 1075 585" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M520.426 167.01C434.482 167.01 372.775 222.149 372.775 350.808C372.775 496.621 434.482 535.218 520.426 535.218C606.37 535.218 671.753 492.945 671.753 350.808C671.753 198.868 606.37 167.01 520.426 167.01ZM520.991 486.818C461.464 486.818 430.365 451.895 430.365 350.902C430.365 261.79 462.737 214.797 522.264 214.797C581.791 214.797 614.163 245.665 614.163 350.902C614.163 449.349 580.517 486.818 520.991 486.818Z" fill="#1A202E"/>
 4 | <path d="M321.311 433.517H285.777V328.877C285.777 323.32 283.569 317.989 279.639 314.059C275.709 310.129 270.379 307.922 264.821 307.922H256.495C253.743 307.922 251.018 308.464 248.475 309.517C245.933 310.57 243.623 312.113 241.677 314.059C239.731 316.005 238.187 318.315 237.134 320.858C236.081 323.4 235.539 326.125 235.539 328.877V433.517H135.309C133.247 433.517 131.22 432.984 129.425 431.97C127.629 430.955 126.127 429.494 125.062 427.728C123.998 425.962 123.408 423.951 123.35 421.89C123.292 419.829 123.768 417.788 124.731 415.965L230.813 215.184C232.136 212.681 232.938 209.936 233.17 207.114C233.402 204.293 233.06 201.453 232.165 198.768C231.27 196.082 229.839 193.605 227.961 191.487C226.082 189.37 223.793 187.654 221.233 186.446L214.971 183.488C210.108 181.192 204.549 180.853 199.443 182.541C194.338 184.23 190.077 187.816 187.542 192.558L58.16 434.591C55.9568 438.712 54.8042 443.314 54.8042 447.987C54.8042 451.719 55.5392 455.414 56.9672 458.861C58.3953 462.309 60.4884 465.441 63.127 468.08C65.7657 470.719 68.8982 472.812 72.3458 474.24C75.7933 475.668 79.4884 476.403 83.22 476.403H235.539V542.57C235.539 545.869 236.189 549.135 237.451 552.183C238.713 555.23 240.563 557.999 242.896 560.332C245.229 562.664 247.998 564.515 251.045 565.777C254.093 567.039 257.359 567.689 260.658 567.689H260.658C263.957 567.689 267.223 567.039 270.27 565.777C273.318 564.515 276.087 562.664 278.42 560.332C280.752 557.999 282.602 555.23 283.865 552.183C285.127 549.135 285.777 545.869 285.777 542.57V476.403H321.311C326.998 476.403 332.452 474.144 336.474 470.122C340.495 466.101 342.754 460.647 342.754 454.96C342.754 449.273 340.495 443.819 336.474 439.797C332.452 435.776 326.998 433.517 321.311 433.517Z" fill="#62B0FF"/>
 5 | <path d="M979.308 433.517H943.773V328.877C943.773 323.32 941.566 317.989 937.636 314.059C933.706 310.129 928.375 307.922 922.818 307.922H914.491C911.739 307.922 909.014 308.464 906.472 309.517C903.929 310.57 901.619 312.113 899.673 314.059C897.727 316.005 896.184 318.315 895.131 320.858C894.077 323.4 893.535 326.125 893.535 328.877V433.517H793.305C791.243 433.517 789.216 432.984 787.421 431.97C785.626 430.955 784.123 429.494 783.059 427.728C781.995 425.962 781.405 423.951 781.347 421.89C781.289 419.829 781.764 417.788 782.728 415.965L888.81 215.184C890.133 212.681 890.934 209.936 891.167 207.114C891.399 204.293 891.057 201.453 890.162 198.768C889.266 196.082 887.836 193.605 885.957 191.487C884.078 189.37 881.79 187.654 879.23 186.446L872.967 183.488C868.105 181.192 862.546 180.853 857.44 182.541C852.334 184.23 848.073 187.816 845.538 192.558L716.157 434.591C713.953 438.712 712.801 443.314 712.801 447.987C712.801 455.523 715.795 462.751 721.124 468.08C726.453 473.409 733.68 476.403 741.217 476.403H893.535V542.57C893.535 549.232 896.182 555.621 900.893 560.332C905.603 565.043 911.992 567.689 918.654 567.689C925.316 567.689 931.705 565.043 936.416 560.332C941.127 555.621 943.773 549.232 943.773 542.57V476.403H979.308C984.995 476.403 990.449 474.144 994.47 470.122C998.492 466.101 1000.75 460.647 1000.75 454.96C1000.75 449.273 998.492 443.819 994.47 439.797C990.449 435.776 984.995 433.517 979.308 433.517Z" fill="#62B0FF"/>
 6 | <path d="M331.114 421.264H295.58V316.624C295.58 313.872 295.038 311.147 293.984 308.605C292.931 306.062 291.388 303.752 289.442 301.806C287.496 299.86 285.186 298.317 282.643 297.263C280.101 296.21 277.376 295.668 274.624 295.668H266.297C260.74 295.668 255.409 297.876 251.479 301.806C247.549 305.736 245.342 311.066 245.342 316.624V421.264H145.111C143.05 421.264 141.023 420.731 139.227 419.716C137.432 418.702 135.929 417.241 134.865 415.475C133.801 413.709 133.211 411.698 133.153 409.637C133.095 407.576 133.571 405.535 134.534 403.712L240.616 202.931C241.939 200.428 242.74 197.683 242.973 194.861C243.205 192.04 242.863 189.2 241.968 186.514C241.073 183.828 239.642 181.352 237.763 179.234C235.884 177.116 233.596 175.401 231.036 174.192L224.774 171.235C219.911 168.939 214.352 168.6 209.246 170.288C204.141 171.976 199.879 175.563 197.344 180.305L67.9628 422.338C65.7596 426.459 64.6069 431.06 64.6069 435.734V435.734C64.6069 443.27 67.6007 450.498 72.9297 455.827C78.2587 461.156 85.4864 464.15 93.0228 464.15H245.342V530.317C245.342 533.616 245.991 536.882 247.254 539.93C248.516 542.977 250.366 545.746 252.699 548.079C255.031 550.411 257.8 552.262 260.848 553.524C263.895 554.786 267.162 555.436 270.461 555.436H270.461C277.123 555.436 283.512 552.789 288.222 548.079C292.933 543.368 295.58 536.979 295.58 530.317V464.15H331.114C333.93 464.15 336.718 463.595 339.32 462.517C341.921 461.44 344.285 459.86 346.276 457.869C348.268 455.878 349.847 453.514 350.925 450.913C352.002 448.311 352.557 445.523 352.557 442.707V442.707C352.557 439.891 352.002 437.102 350.925 434.501C349.847 431.899 348.268 429.535 346.276 427.544C344.285 425.553 341.921 423.973 339.32 422.896C336.718 421.818 333.93 421.264 331.114 421.264V421.264Z" stroke="#3F3D56" stroke-miterlimit="10"/>
 7 | <path d="M997.688 421.264H962.153V316.624C962.153 311.066 959.946 305.736 956.016 301.806C952.086 297.876 946.755 295.668 941.198 295.668H932.871C930.119 295.668 927.394 296.21 924.852 297.263C922.309 298.317 919.999 299.86 918.053 301.806C916.107 303.752 914.564 306.062 913.51 308.605C912.457 311.147 911.915 313.872 911.915 316.624V421.264H811.685C809.623 421.264 807.596 420.731 805.801 419.716C804.006 418.702 802.503 417.241 801.439 415.475C800.374 413.709 799.785 411.698 799.727 409.637C799.669 407.576 800.144 405.535 801.108 403.712L907.19 202.931C908.513 200.428 909.314 197.683 909.547 194.861C909.779 192.04 909.437 189.2 908.542 186.514C907.646 183.828 906.216 181.352 904.337 179.234C902.458 177.116 900.17 175.401 897.61 174.192L891.347 171.235C886.485 168.939 880.925 168.6 875.82 170.288C870.714 171.976 866.453 175.563 863.918 180.305L734.536 422.338C732.333 426.459 731.181 431.06 731.181 435.734C731.181 443.27 734.174 450.498 739.503 455.827C744.832 461.156 752.06 464.15 759.596 464.15H911.915V530.317C911.915 536.979 914.562 543.368 919.272 548.079C923.983 552.789 930.372 555.436 937.034 555.436V555.436C943.696 555.436 950.085 552.789 954.796 548.079C959.507 543.368 962.153 536.979 962.153 530.317V464.15H997.688C1000.5 464.15 1003.29 463.595 1005.89 462.517C1008.5 461.44 1010.86 459.86 1012.85 457.869C1014.84 455.878 1016.42 453.514 1017.5 450.913C1018.58 448.311 1019.13 445.523 1019.13 442.707V442.707C1019.13 437.02 1016.87 431.565 1012.85 427.544C1008.83 423.523 1003.37 421.264 997.688 421.264V421.264Z" stroke="#3F3D56" stroke-miterlimit="10"/>
 8 | <path d="M540.031 155.982C454.087 155.982 392.38 211.121 392.38 339.78C392.38 485.593 454.087 524.19 540.031 524.19C625.975 524.19 691.358 481.917 691.358 339.78C691.358 187.84 625.975 155.982 540.031 155.982ZM540.596 475.79C481.069 475.79 449.97 440.867 449.97 339.874C449.97 250.762 482.342 203.769 541.869 203.769C601.396 203.769 633.768 234.637 633.768 339.874C633.768 438.321 600.123 475.79 540.596 475.79V475.79Z" stroke="#3F3D56" stroke-miterlimit="10"/>
 9 | <path d="M471.141 31.1516C478.266 31.1516 484.042 25.3755 484.042 18.2504C484.042 11.1253 478.266 5.34924 471.141 5.34924C464.016 5.34924 458.24 11.1253 458.24 18.2504C458.24 25.3755 464.016 31.1516 471.141 31.1516Z" fill="#4C5362"/>
10 | <path d="M502.607 93.7695C522.592 93.7695 538.794 72.7785 538.794 46.8848C538.794 20.991 522.592 0 502.607 0C482.622 0 466.421 20.991 466.421 46.8848C466.421 72.7785 482.622 93.7695 502.607 93.7695Z" fill="#4C5362"/>
11 | <path opacity="0.1" d="M502.607 79.6097C484.48 79.6097 469.466 62.3392 466.832 39.8049C466.558 42.1549 466.42 44.5188 466.421 46.8848C466.421 72.7785 482.622 93.7695 502.607 93.7695C522.592 93.7695 538.794 72.7785 538.794 46.8848C538.794 44.5188 538.657 42.1549 538.383 39.8049C535.749 62.3392 520.735 79.6097 502.607 79.6097Z" fill="black"/>
12 | <path d="M576.242 184.189C575.465 187.382 572.114 189.94 568.403 191.727C560.602 195.483 550.978 196.605 541.644 196.981C539.262 197.126 536.873 197.081 534.499 196.849C529.898 196.404 525.582 194.42 522.249 191.217C522.011 191.062 521.816 190.849 521.683 190.599C521.549 190.348 521.481 190.067 521.486 189.783C521.49 189.499 521.566 189.221 521.707 188.975C521.849 188.728 522.05 188.521 522.292 188.374C527.262 182.915 535.555 179.567 543.909 177.157C550.243 175.33 561.29 170.597 568.199 171.235C574.89 171.854 577.223 180.157 576.242 184.189Z" fill="#3F3D56"/>
13 | <path opacity="0.1" d="M576.242 184.189C575.465 187.382 572.114 189.94 568.403 191.727C560.602 195.483 550.978 196.605 541.644 196.981C539.262 197.126 536.873 197.081 534.499 196.849C529.898 196.404 525.582 194.42 522.249 191.217C522.011 191.062 521.816 190.849 521.683 190.599C521.549 190.348 521.481 190.067 521.486 189.783C521.49 189.499 521.566 189.221 521.707 188.975C521.849 188.728 522.05 188.521 522.292 188.374C527.262 182.915 535.555 179.567 543.909 177.157C550.243 175.33 561.29 170.597 568.199 171.235C574.89 171.854 577.223 180.157 576.242 184.189Z" fill="black"/>
14 | <path d="M477.044 160.321C474.662 164.989 474.231 170.411 475.845 175.396C477.487 180.344 480.56 184.693 484.674 187.893C494.769 195.985 508.662 197.098 521.599 196.986C532.937 196.887 544.259 196.111 555.505 194.662C559.273 194.328 562.976 193.468 566.506 192.108C570.728 190.281 574.439 186.93 575.942 182.582C577.445 178.234 576.378 172.909 572.808 170.008C569.671 167.458 565.345 167.107 561.31 166.865L538.223 165.477C540.504 163.169 543.541 161.863 546.319 160.185C550.004 157.959 552.452 154.22 555.132 150.85C559.26 145.916 563.752 141.297 568.57 137.033C569.322 141.344 572.048 144.883 575.258 147.857C578.467 150.831 582.166 153.226 585.502 156.057C593.58 162.916 599.397 172.224 607.894 178.558C613.738 177.022 619.202 174.294 623.942 170.546L620.64 164.564C620.365 163.949 619.937 163.414 619.396 163.011C618.461 162.436 617.256 162.733 616.171 162.57C613.27 162.135 612.003 158.786 610.865 156.083C607.74 148.661 601.757 142.903 596.647 136.679C592.875 132.084 589.53 127.157 586.651 121.956C584.934 118.854 583.363 115.625 581.034 112.953C578.704 110.281 575.44 108.18 571.895 108.172C568.763 108.166 565.874 109.756 563.181 111.355C554.979 116.227 547.087 121.604 539.551 127.454C535.607 130.516 531.688 133.751 527.061 135.628C525.114 136.419 523.061 136.959 521.192 137.92C517.919 139.605 515.435 142.455 512.761 144.985C503.223 154.008 490.165 159.854 477.044 160.321Z" fill="#3F3D56"/>
15 | <path d="M525.32 96.098C525.213 98.8562 524.626 101.575 523.586 104.131C523.059 105.407 522.275 106.56 521.282 107.518C520.29 108.477 519.111 109.221 517.818 109.704C515.983 110.196 514.059 110.258 512.195 109.887C510.57 109.717 509.004 109.183 507.614 108.326C505.449 106.837 504.37 104.182 503.976 101.583C503.583 98.9866 503.759 96.334 503.507 93.7192C503.262 91.6071 502.86 89.5162 502.305 87.4637C502.135 86.7809 501.962 86.1012 501.792 85.4215C501.626 84.7419 501.462 84.0622 501.311 83.3825C501.173 82.7438 501.044 82.1018 500.933 81.4568C500.842 80.9124 500.76 80.3649 500.701 79.8142C500.645 78.1817 500.374 76.5638 499.892 75.0031C499.44 73.9908 498.874 73.0333 498.205 72.1491C497.919 71.74 497.642 71.3309 497.387 70.9061C496.65 69.8022 496.307 68.4816 496.415 67.1585C496.445 66.954 496.495 66.7527 496.563 66.5575C496.588 66.482 496.616 66.4065 496.648 66.3341C496.931 66.2573 497.191 66.1125 497.405 65.9123C497.62 65.7121 497.782 65.4627 497.878 65.1855C497.986 64.5902 497.935 63.9769 497.73 63.4077C497.495 62.6123 497.173 61.8451 496.771 61.1201C496.506 60.6418 495.609 59.7796 495.603 59.2321C495.59 58.1308 497.743 57.2434 498.614 56.8092C501.275 55.4769 504.242 54.8753 507.211 55.0659C509.115 55.1949 511.179 55.7802 512.23 57.3756C513.174 58.8136 513.048 60.6764 513.451 62.3473C513.493 62.5901 513.596 62.8184 513.75 63.0112C513.955 63.1983 514.213 63.317 514.489 63.351C514.955 63.4437 515.433 63.4629 515.905 63.4077H515.908C516.033 63.3978 516.157 63.3799 516.28 63.3542C517.015 63.2185 517.71 62.9184 518.312 62.4763C518.703 62.3724 519.096 62.2874 519.492 62.2214C519.508 62.2197 519.524 62.2166 519.54 62.2119C521.116 67.1867 521.321 72.5203 522.611 77.5864C523.249 80.1068 524.165 82.5958 524.294 85.1886C524.304 85.3019 524.307 85.4183 524.31 85.5347C524.329 86.3686 524.263 87.2087 524.297 88.0395C524.309 88.4135 524.351 88.786 524.423 89.1533C524.564 89.7442 524.74 90.3262 524.949 90.8966L524.958 90.9249C525.018 91.1074 525.074 91.2931 525.122 91.4787C525.156 91.614 525.188 91.7462 525.213 91.8815L525.216 91.8909C525.449 93.2814 525.484 94.6978 525.32 96.098Z" fill="#FBBEBE"/>
16 | <path d="M503.237 63.5619C513.49 63.5619 521.802 55.25 521.802 44.9968C521.802 34.7435 513.49 26.4316 503.237 26.4316C492.984 26.4316 484.672 34.7435 484.672 44.9968C484.672 55.25 492.984 63.5619 503.237 63.5619Z" fill="#FBBEBE"/>
17 | <path d="M621.103 146.148C620.565 141.083 618.765 136.234 615.867 132.045C616.349 134.909 616.831 137.771 617.315 140.632C616.714 140.806 616.075 140.801 615.477 140.617C614.879 140.433 614.347 140.079 613.948 139.597C613.166 138.621 612.568 137.511 612.182 136.321C610.073 131.085 607.315 126.135 603.973 121.586C592.154 120.601 580.471 115.702 570.077 109.99C559.681 104.282 549.952 97.4385 539.694 91.4882C537.915 90.4132 536.063 89.4668 534.149 88.6562C530.94 87.3692 527.337 86.7021 524.294 85.1886C524.089 85.0879 523.885 84.9809 523.684 84.8708C522.996 84.497 522.345 84.0598 521.739 83.5649C521.411 83.2989 521.1 83.0131 520.808 82.7091C519.289 80.9428 518.086 78.9291 517.249 76.7557C515.616 73.1433 515.033 68.7852 513.404 65.1729C514.153 64.4728 514.994 63.8788 515.905 63.4077H515.908C516.04 63.3384 516.173 63.2723 516.308 63.2094C516.953 62.9057 517.624 62.6603 518.312 62.4762C518.702 62.3724 519.096 62.2874 519.492 62.2214C519.508 62.2197 519.524 62.2166 519.539 62.2119C521.378 61.9124 523.262 62.0613 525.03 62.6462C527.617 63.5209 529.797 65.2673 531.972 66.9193C535.504 69.4079 538.892 72.0952 542.12 74.9684C543.913 76.6864 545.55 78.5744 547.478 80.1351C549.081 81.3722 550.771 82.4922 552.535 83.4863C562.972 89.704 573.411 95.9207 583.85 102.136C587.384 104.241 590.921 106.347 594.376 108.574C599.624 111.96 604.684 115.629 609.741 119.295C612.721 121.453 615.699 123.613 618.677 125.774C619.654 126.397 620.512 127.19 621.21 128.115C621.827 129.165 622.21 130.336 622.334 131.548C623.081 136.444 622.659 141.447 621.103 146.148Z" fill="#FBBEBE"/>
18 | <path d="M529.923 110.06C528.671 115.676 522.994 119.072 520.027 124.005C516.339 130.129 517.843 137.246 519.228 144.26C516.698 146.441 514.167 148.622 511.635 150.802C510.238 152.001 508.841 153.206 507.337 154.267C505.144 155.736 502.852 157.052 500.477 158.206C498.237 159.358 495.996 160.511 493.756 161.664C491.673 162.835 489.466 163.77 487.176 164.452C482.762 165.585 478.073 164.792 473.706 163.48C473.191 163.345 472.695 163.143 472.233 162.879C471.961 162.716 471.723 162.501 471.535 162.246C471.104 161.474 470.947 160.579 471.091 159.707C471.534 152.357 473.331 145.16 475.122 138.017C476.079 133.732 477.365 129.527 478.97 125.44C480.544 121.938 482.353 118.547 484.385 115.289C486.628 111.191 489.285 107.333 492.315 103.776C493.79 102.407 495.031 100.806 495.99 99.0369C497.107 96.4882 496.676 93.5649 496.903 90.7896C497.076 88.7045 497.629 86.6686 498.536 84.7827V84.7796C499.02 83.7638 499.604 82.7983 500.279 81.8973C500.584 82.6084 500.889 83.3185 501.195 84.0275C501.396 84.4932 501.595 84.9579 501.792 85.4215C502.05 86.0194 502.306 86.6152 502.56 87.2088C503.293 88.9143 504.026 90.6187 504.757 92.3221C505.547 94.4675 506.672 96.4739 508.092 98.2661C508.741 99.1838 509.617 99.9176 510.634 100.396C511.651 100.874 512.775 101.08 513.895 100.994C515.016 100.908 516.095 100.533 517.028 99.9055C517.96 99.2779 518.714 98.4192 519.215 97.4133C520.273 95.5357 521.039 93.5081 521.487 91.4001C522.109 88.8335 522.194 86.1663 521.739 83.565C520.981 78.5556 518.85 73.4392 517.302 68.7853C516.672 67.2336 516.307 65.587 516.223 63.9143C516.226 63.7264 516.245 63.539 516.279 63.3542C516.289 63.307 516.298 63.2567 516.308 63.2095C516.953 62.9058 517.624 62.6604 518.312 62.4763C518.702 62.3725 519.096 62.2875 519.492 62.2214C520.855 69.5971 522.219 76.9728 523.586 84.3485C523.618 84.5216 523.652 84.6947 523.684 84.8709C523.879 85.9281 524.077 86.9854 524.297 88.0395C524.495 88.9961 524.709 89.9495 524.949 90.8967L524.958 90.925C525.04 91.246 525.125 91.5638 525.213 91.8816L525.216 91.891C525.458 92.7595 525.729 93.6216 526.034 94.4712C527.884 99.5908 531.11 104.745 529.923 110.06Z" fill="#62B0FF"/>
19 | <path d="M605.267 188.993C605.209 190.075 605.419 191.154 605.877 192.136C607.039 194.259 609.827 194.742 612.24 194.941C626.332 196.099 640.51 195.667 654.505 193.653C655.265 193.601 656.001 193.372 656.657 192.985C658.647 191.59 657.42 188.19 655.247 187.102C653.074 186.013 650.496 186.276 648.112 185.804C645.743 185.208 643.488 184.23 641.434 182.908C636.599 180.13 631.835 177.234 627.141 174.22C624.346 172.425 621.048 170.51 617.901 171.574C609.376 174.458 605.211 179.796 605.267 188.993Z" fill="#3F3D56"/>
20 | <path d="M501.383 82.9892V82.9923C501.361 83.1245 501.339 83.2535 501.311 83.3825C501.276 83.5965 501.235 83.8136 501.195 84.0275C500.804 86.0256 500.326 88.0143 499.775 89.9904C498.265 95.4498 496.242 100.821 494.234 106.114C488.847 120.305 483.459 134.497 478.07 148.691C476.711 152.265 475.354 155.843 473.809 159.345C473.293 160.513 472.762 161.689 472.233 162.879C470.339 167.136 468.52 171.532 467.916 176.063C467.353 179.045 467.288 182.1 467.724 185.103C468.328 188.074 470.131 190.975 472.954 192.073C474.332 192.611 476.305 193.332 475.927 194.764C475.723 195.55 474.829 195.934 474.027 196.066C472.967 196.235 471.883 196.169 470.852 195.872C469.821 195.575 468.868 195.055 468.061 194.348C466.553 193.011 465.395 190.931 463.391 190.708C462.003 190.557 460.726 191.387 459.454 191.969C454.269 194.339 448.227 192.681 442.781 190.997C443.208 188.791 445.424 187.338 447.623 186.897C449.823 186.453 452.098 186.768 454.341 186.708C455.06 186.747 455.773 186.563 456.383 186.183C456.931 185.68 457.315 185.025 457.485 184.301C458.93 180.019 460.005 175.621 460.697 171.155C461.421 166.488 461.723 161.749 462.755 157.139C463.558 153.543 464.797 150.06 465.861 146.529C467.918 139.26 469.606 131.892 470.921 124.452C471.585 121.362 472.061 118.233 472.346 115.085C472.526 112.473 472.441 109.849 472.692 107.246C473.115 103.861 473.821 100.517 474.804 97.2497C475.767 93.6845 476.728 90.1215 477.689 86.5606C479.115 81.29 480.644 75.8149 484.256 71.7179C485.511 70.2756 487.048 69.1064 488.773 68.2826C490.498 67.4588 492.374 66.998 494.285 66.9288C495.001 66.9279 495.715 67.0049 496.415 67.1585C496.531 67.1868 496.648 67.2151 496.764 67.2466C497.526 67.4459 498.258 67.7487 498.938 68.1465C500.052 67.4385 500.619 67.6871 501.358 68.779C502.006 69.9345 502.312 71.2509 502.239 72.5738C502.302 76.0655 502.015 79.5546 501.383 82.9892Z" fill="#FBBEBE"/>
21 | <path d="M502.607 87.1616L502.56 87.2088L502.305 87.4637L499.776 89.9904L498.536 84.7827L494.285 66.9287C495.001 66.9279 495.715 67.0049 496.415 67.1584C496.445 66.9539 496.495 66.7527 496.563 66.5574L496.764 67.2465L498.205 72.149L500.933 81.4567L501.383 82.9891V82.9923L502.607 87.1616Z" fill="#62B0FF"/>
22 | <path d="M518.661 30.2028C518.659 31.856 518.331 33.4926 517.696 35.019C517.061 36.5454 516.132 37.9317 514.961 39.0986C514.537 39.5234 514.082 39.9166 513.601 40.275C511.429 41.9119 508.784 42.7979 506.065 42.7991H490.969C487.633 42.794 484.436 41.4653 482.079 39.1047C479.722 36.7441 478.398 33.5447 478.398 30.209C478.398 26.8732 479.722 23.6738 482.079 21.3132C484.436 18.9527 487.633 17.6239 490.969 17.6188H506.065C509.401 17.6275 512.598 18.9557 514.958 21.3134C517.318 23.6712 518.649 26.8669 518.661 30.2028Z" fill="#4C5362"/>
23 | <path d="M532.815 31.1516C539.94 31.1516 545.716 25.3755 545.716 18.2504C545.716 11.1253 539.94 5.34924 532.815 5.34924C525.69 5.34924 519.914 11.1253 519.914 18.2504C519.914 25.3755 525.69 31.1516 532.815 31.1516Z" fill="#4C5362"/>
24 | <path opacity="0.1" d="M532.5 5.34924C532.342 5.34924 532.185 5.35553 532.028 5.36118C535.366 5.48251 538.526 6.89359 540.844 9.29753C543.162 11.7015 544.457 14.9109 544.457 18.2504C544.457 21.59 543.162 24.7994 540.844 27.2033C538.526 29.6073 535.366 31.0183 532.028 31.1397C532.185 31.1453 532.342 31.1516 532.5 31.1516C535.922 31.1516 539.203 29.7924 541.623 27.3729C544.042 24.9535 545.401 21.672 545.401 18.2504C545.401 14.8288 544.042 11.5474 541.623 9.12791C539.203 6.70847 535.922 5.34924 532.5 5.34924Z" fill="black"/>
25 | <path opacity="0.1" d="M471.141 5.34924C471.299 5.34924 471.456 5.35553 471.613 5.36118C468.276 5.48251 465.115 6.89359 462.797 9.29753C460.479 11.7015 459.184 14.9109 459.184 18.2504C459.184 21.59 460.479 24.7994 462.797 27.2033C465.115 29.6073 468.276 31.0183 471.613 31.1397C471.456 31.1453 471.299 31.1516 471.141 31.1516C467.721 31.1486 464.443 29.788 462.026 27.3689C459.609 24.9498 458.251 21.6701 458.251 18.2504C458.251 14.8308 459.609 11.551 462.026 9.13193C464.443 6.71281 467.721 5.35225 471.141 5.34924Z" fill="black"/>
26 | <path opacity="0.1" d="M513.601 40.275C511.429 41.9119 508.784 42.7979 506.065 42.7991H490.969C488.25 42.7978 485.605 41.9119 483.433 40.275H513.601Z" fill="black"/>
27 | <path d="M611.085 133.756C611.085 133.756 614.338 143.128 617.314 140.632L614.942 128.382L611.085 133.756Z" fill="#FBBEBE"/>
28 | <path d="M1006.86 419.55C1009.89 420.651 1013.14 421.033 1016.34 420.667C1019.54 420.301 1022.62 419.196 1025.32 417.439C1028.02 415.683 1030.28 413.322 1031.91 410.544C1033.55 407.766 1034.51 404.647 1034.74 401.431C1034.96 398.216 1034.43 394.992 1033.2 392.015C1031.96 389.038 1030.05 386.388 1027.62 384.275C1025.19 382.161 1022.3 380.642 1019.17 379.837C1016.05 379.032 1012.79 378.962 1009.64 379.634L1010.16 390.347L1005.09 381.166C1000.11 383.503 996.271 387.72 994.405 392.889C993.742 394.699 993.338 396.595 993.207 398.519C992.887 403.032 994.048 407.527 996.512 411.322C998.976 415.117 1002.61 418.006 1006.86 419.55Z" fill="#62B0FF"/>
29 | <path d="M1031.94 543.793C1030.15 534.683 1037.9 526.606 1045.56 521.357C1053.22 516.107 1062.17 510.949 1064.78 502.04C1068.53 489.236 1057.35 477.51 1048.64 467.398C1042.19 459.894 1036.64 451.651 1032.12 442.841C1030.31 439.308 1028.65 435.615 1028.17 431.674C1027.48 425.999 1029.31 420.351 1031.14 414.938C1037.26 396.903 1043.8 379.02 1050.77 361.288" stroke="#3F3D56" stroke-miterlimit="10"/>
30 | <path d="M1007.72 416.792C1010.75 417.893 1013.99 418.276 1017.2 417.909C1020.4 417.543 1023.47 416.438 1026.17 414.682C1028.88 412.925 1031.13 410.564 1032.77 407.786C1034.4 405.008 1035.37 401.889 1035.59 398.673C1035.82 395.458 1035.29 392.234 1034.06 389.257C1032.82 386.28 1030.91 383.63 1028.48 381.517C1026.04 379.403 1023.15 377.884 1020.03 377.079C1016.91 376.274 1013.64 376.204 1010.49 376.876L1011.01 387.589L1005.95 378.408C1000.97 380.745 997.129 384.962 995.262 390.131C994.599 391.941 994.196 393.837 994.065 395.761C993.745 400.274 994.905 404.769 997.369 408.564C999.833 412.359 1003.47 415.248 1007.72 416.792V416.792Z" stroke="#3F3D56" stroke-miterlimit="10"/>
31 | <path d="M1029.4 357.588C1030.59 354.308 1032.58 351.38 1035.2 349.073C1037.82 346.767 1040.97 345.157 1044.38 344.391L1046.09 354.574L1049.27 343.879C1053.68 343.944 1057.96 345.41 1061.48 348.064C1065 350.718 1067.59 354.423 1068.87 358.645C1070.15 362.866 1070.06 367.386 1068.6 371.551C1067.15 375.715 1064.41 379.31 1060.78 381.815C1057.15 384.32 1052.81 385.607 1048.4 385.489C1043.99 385.371 1039.73 383.854 1036.24 381.158C1032.75 378.462 1030.21 374.726 1028.98 370.49C1027.74 366.253 1027.89 361.735 1029.4 357.588H1029.4Z" fill="#62B0FF"/>
32 | <path d="M1030.54 353.911C1031.73 350.631 1033.72 347.703 1036.34 345.396C1038.96 343.09 1042.12 341.479 1045.52 340.713L1047.23 350.897L1050.41 340.201C1054.82 340.267 1059.1 341.732 1062.62 344.387C1066.15 347.041 1068.74 350.746 1070.02 354.968C1071.3 359.189 1071.2 363.709 1069.75 367.873C1068.29 372.038 1065.55 375.633 1061.92 378.138C1058.29 380.643 1053.96 381.93 1049.55 381.812C1045.14 381.694 1040.88 380.177 1037.38 377.481C1033.89 374.785 1031.35 371.049 1030.12 366.813C1028.89 362.576 1029.04 358.058 1030.54 353.911H1030.54Z" stroke="#3F3D56" stroke-miterlimit="10"/>
33 | <path d="M1044.99 467.604C1049.8 469.347 1055.07 469.261 1059.82 467.363C1064.56 465.464 1068.44 461.886 1070.72 457.311C1072.99 452.736 1073.51 447.482 1072.16 442.553C1070.81 437.623 1067.7 433.362 1063.41 430.582L1060.97 438.801L1059.24 428.497C1059.22 428.489 1059.2 428.482 1059.18 428.477C1056.62 427.543 1053.89 427.125 1051.16 427.246C1048.42 427.367 1045.74 428.025 1043.27 429.182C1040.79 430.339 1038.56 431.973 1036.72 433.991C1034.87 436.008 1033.44 438.369 1032.51 440.94C1031.58 443.51 1031.16 446.238 1031.29 448.97C1031.41 451.701 1032.07 454.381 1033.23 456.857C1034.39 459.334 1036.02 461.557 1038.04 463.401C1040.06 465.245 1042.42 466.674 1044.99 467.604H1044.99Z" fill="#62B0FF"/>
34 | <path d="M1045.98 463.88C1050.79 465.622 1056.06 465.536 1060.81 463.638C1065.55 461.74 1069.43 458.162 1071.71 453.586C1073.99 449.011 1074.5 443.758 1073.15 438.828C1071.8 433.899 1068.69 429.638 1064.4 426.857L1061.96 435.076L1060.23 424.772C1060.21 424.764 1060.19 424.758 1060.17 424.752C1057.61 423.818 1054.88 423.4 1052.15 423.521C1049.41 423.642 1046.73 424.3 1044.26 425.457C1041.78 426.615 1039.55 428.249 1037.71 430.266C1035.86 432.284 1034.43 434.645 1033.5 437.215C1032.57 439.785 1032.15 442.514 1032.28 445.245C1032.4 447.976 1033.06 450.656 1034.22 453.133C1035.38 455.609 1037.01 457.833 1039.03 459.677C1041.05 461.521 1043.41 462.949 1045.98 463.88H1045.98Z" stroke="#3F3D56" stroke-miterlimit="10"/>
35 | <path d="M1023.32 502.167C1024.15 506.867 1026.57 511.14 1030.17 514.27C1033.77 517.4 1038.34 519.195 1043.11 519.356C1047.88 519.517 1052.56 518.032 1056.37 515.152C1060.17 512.272 1062.87 508.171 1064.01 503.537C1065.15 498.903 1064.66 494.018 1062.63 489.701C1060.59 485.384 1057.14 481.897 1052.84 479.826C1048.54 477.755 1043.66 477.225 1039.02 478.326C1034.37 479.426 1030.25 482.089 1027.33 485.87L1036.61 499.826L1023.94 492.418C1022.95 495.572 1022.74 498.915 1023.32 502.167Z" fill="#62B0FF"/>
36 | <path d="M1024.18 499.409C1025.01 504.109 1027.42 508.382 1031.03 511.512C1034.63 514.642 1039.2 516.437 1043.97 516.598C1048.74 516.759 1053.42 515.274 1057.22 512.394C1061.03 509.514 1063.73 505.413 1064.87 500.779C1066.01 496.145 1065.52 491.26 1063.49 486.943C1061.45 482.626 1058 479.139 1053.7 477.068C1049.4 474.997 1044.52 474.467 1039.87 475.568C1035.23 476.668 1031.1 479.332 1028.19 483.112L1037.46 497.068L1024.79 489.661C1023.81 492.814 1023.6 496.157 1024.18 499.409V499.409Z" stroke="#3F3D56" stroke-miterlimit="10"/>
37 | <path d="M9.00746 470.249C10.9978 470.972 13.1289 471.224 15.2329 470.983C17.337 470.743 19.3563 470.017 21.1319 468.862C22.9075 467.708 24.3908 466.157 25.4648 464.332C26.5388 462.507 27.1742 460.457 27.3208 458.345C27.4675 456.232 27.1215 454.114 26.3101 452.158C25.4987 450.202 24.244 448.461 22.645 447.073C21.0459 445.684 19.1463 444.686 17.0957 444.157C15.0451 443.628 12.8997 443.582 10.8285 444.024L11.1707 451.062L7.84085 445.03C4.57278 446.566 2.04805 449.336 0.821494 452.732C0.385892 453.922 0.121078 455.167 0.034953 456.431C-0.17523 459.397 0.586979 462.35 2.20607 464.843C3.82517 467.337 6.2129 469.234 9.00746 470.249Z" fill="#62B0FF"/>
38 | <path d="M25.4837 551.879C24.3083 545.893 29.4017 540.587 34.4329 537.138C39.464 533.688 45.3427 530.3 47.0593 524.446C49.5264 516.034 42.1776 508.33 36.4579 501.686C32.2144 496.756 28.5702 491.34 25.6016 485.551C24.311 483.278 23.4319 480.794 23.0049 478.215C22.5539 474.486 23.7519 470.775 24.9588 467.219C28.9794 455.37 33.2782 443.62 37.8551 431.969" stroke="#3F3D56" stroke-miterlimit="10"/>
39 | <path d="M9.5707 468.437C11.561 469.16 13.6921 469.412 15.7962 469.171C17.9002 468.931 19.9196 468.205 21.6952 467.05C23.4707 465.896 24.954 464.345 26.028 462.52C27.102 460.695 27.7374 458.645 27.884 456.533C28.0307 454.42 27.6847 452.302 26.8733 450.346C26.0619 448.39 24.8072 446.649 23.2082 445.261C21.6092 443.872 19.7095 442.874 17.6589 442.345C15.6083 441.816 13.4629 441.77 11.3917 442.212L11.734 449.25L8.40409 443.218C5.13601 444.754 2.61128 447.524 1.38473 450.92C0.94913 452.11 0.68432 453.355 0.59819 454.619C0.387993 457.585 1.1502 460.538 2.76929 463.031C4.38839 465.525 6.77613 467.422 9.5707 468.437V468.437Z" stroke="#3F3D56" stroke-miterlimit="10"/>
40 | <path d="M23.8124 429.539C24.5935 427.384 25.9044 425.46 27.6244 423.945C29.3444 422.429 31.4181 421.371 33.6545 420.868L34.7803 427.559L36.8677 420.531C39.7659 420.574 42.5754 421.537 44.8907 423.281C47.206 425.025 48.9071 427.459 49.7486 430.233C50.5901 433.007 50.5283 435.976 49.5723 438.712C48.6162 441.449 46.8152 443.81 44.4295 445.456C42.0437 447.102 39.1966 447.948 36.2991 447.87C33.4016 447.793 30.6038 446.796 28.3095 445.025C26.0152 443.254 24.3432 440.799 23.5349 438.016C22.7265 435.232 22.8237 432.264 23.8124 429.539Z" fill="#62B0FF"/>
41 | <path d="M24.5634 427.123C25.3444 424.968 26.6554 423.044 28.3754 421.529C30.0954 420.013 32.1691 418.955 34.4054 418.452L35.5313 425.143L37.6187 418.115C40.5169 418.158 43.3264 419.121 45.6417 420.865C47.9569 422.609 49.6581 425.043 50.4996 427.817C51.3411 430.591 51.2793 433.56 50.3232 436.296C49.3671 439.033 47.5662 441.394 45.1804 443.04C42.7947 444.686 39.9475 445.532 37.0501 445.454C34.1526 445.377 31.3547 444.38 29.0605 442.609C26.7662 440.838 25.0942 438.383 24.2858 435.599C23.4775 432.816 23.5747 429.848 24.5634 427.123V427.123Z" stroke="#3F3D56" stroke-miterlimit="10"/>
42 | <path d="M34.0576 501.822C37.214 502.967 40.6813 502.91 43.7987 501.663C46.9162 500.416 49.4656 498.065 50.9612 495.059C52.4568 492.052 52.7939 488.601 51.9083 485.362C51.0227 482.124 48.9763 479.324 46.1592 477.497L44.5553 482.897L43.418 476.127C43.4067 476.122 43.3951 476.118 43.3832 476.114C41.6948 475.5 39.9021 475.225 38.1073 475.304C36.3126 475.384 34.551 475.816 32.9234 476.576C31.2957 477.336 29.8338 478.41 28.6213 479.736C27.4088 481.061 26.4693 482.613 25.8567 484.302C25.2441 485.99 24.9703 487.783 25.0509 489.578C25.1315 491.373 25.565 493.134 26.3266 494.761C27.0882 496.388 28.163 497.849 29.4895 499.061C30.816 500.272 32.3683 501.21 34.0576 501.822Z" fill="#62B0FF"/>
43 | <path d="M34.7083 499.374C37.8647 500.519 41.332 500.463 44.4494 499.216C47.5668 497.968 50.1163 495.618 51.6119 492.611C53.1075 489.605 53.4446 486.154 52.559 482.915C51.6734 479.676 49.627 476.877 46.8099 475.05L45.206 480.45L44.0686 473.68C44.0574 473.675 44.0458 473.671 44.0338 473.667C42.3459 473.055 40.5538 472.781 38.76 472.861C36.9662 472.941 35.2058 473.374 33.5792 474.135C30.2942 475.671 27.754 478.449 26.5174 481.858C25.2807 485.267 25.4489 489.028 26.985 492.313C28.5211 495.598 31.2992 498.138 34.7083 499.374V499.374Z" stroke="#3F3D56" stroke-miterlimit="10"/>
44 | <path d="M19.8219 524.53C20.3646 527.618 21.9526 530.426 24.3197 532.482C26.6867 534.538 29.6888 535.718 32.8225 535.823C35.9561 535.929 39.0308 534.954 41.5308 533.061C44.0308 531.169 45.8041 528.475 46.5533 525.43C47.3026 522.385 46.9822 519.176 45.6458 516.339C44.3095 513.503 42.0385 511.212 39.2137 509.852C36.389 508.491 33.1822 508.143 30.1313 508.866C27.0803 509.589 24.3707 511.339 22.4569 513.822L28.5492 522.992L20.2248 518.125C19.5794 520.197 19.4412 522.393 19.8219 524.53Z" fill="#62B0FF"/>
45 | <path d="M20.3851 522.718C20.9278 525.806 22.5159 528.613 24.8829 530.67C27.25 532.726 30.252 533.906 33.3857 534.011C36.5194 534.117 39.594 533.142 42.094 531.249C44.594 529.357 46.3673 526.663 47.1166 523.618C47.8658 520.573 47.5454 517.364 46.2091 514.527C44.8727 511.691 42.6017 509.4 39.777 508.039C36.9522 506.679 33.7454 506.331 30.6945 507.054C27.6435 507.777 24.9339 509.527 23.0201 512.01L29.1124 521.18L20.788 516.313C20.1426 518.385 20.0044 520.581 20.3851 522.718V522.718Z" stroke="#3F3D56" stroke-miterlimit="10"/>
46 | <path d="M480.946 341.115C490.335 341.115 497.946 331.266 497.946 319.115C497.946 306.965 490.335 297.115 480.946 297.115C471.557 297.115 463.946 306.965 463.946 319.115C463.946 331.266 471.557 341.115 480.946 341.115Z" fill="#4C5362"/>
47 | <path d="M573.446 341.615C582.835 341.615 590.446 331.766 590.446 319.615C590.446 307.465 582.835 297.615 573.446 297.615C564.057 297.615 556.446 307.465 556.446 319.615C556.446 331.766 564.057 341.615 573.446 341.615Z" fill="#4C5362"/>
48 | <path d="M560.446 384.615C560.446 394.555 546.566 402.615 529.446 402.615C512.326 402.615 498.446 394.555 498.446 384.615C498.446 376.005 508.856 368.805 522.766 367.045C524.981 366.753 527.212 366.61 529.446 366.615C533.189 366.603 536.922 367.006 540.576 367.816C552.196 370.406 560.446 376.955 560.446 384.615Z" fill="#4C5362"/>
49 | <path d="M484.946 336.115C494.335 336.115 501.946 326.266 501.946 314.115C501.946 301.965 494.335 292.115 484.946 292.115C475.557 292.115 467.946 301.965 467.946 314.115C467.946 326.266 475.557 336.115 484.946 336.115Z" stroke="#3F3D56" stroke-miterlimit="10"/>
50 | <path d="M577.446 336.615C586.835 336.615 594.446 326.766 594.446 314.615C594.446 302.465 586.835 292.615 577.446 292.615C568.057 292.615 560.446 302.465 560.446 314.615C560.446 326.766 568.057 336.615 577.446 336.615Z" stroke="#3F3D56" stroke-miterlimit="10"/>
51 | <path d="M533.446 397.615C550.567 397.615 564.446 389.557 564.446 379.615C564.446 369.674 550.567 361.615 533.446 361.615C516.325 361.615 502.446 369.674 502.446 379.615C502.446 389.557 516.325 397.615 533.446 397.615Z" stroke="#3F3D56" stroke-miterlimit="10"/>
52 | <path d="M540.946 369.316C540.954 370.573 540.482 371.786 539.626 372.707C539.222 373.149 538.73 373.502 538.183 373.744C537.636 373.986 537.044 374.113 536.446 374.115H526.446C525.214 374.073 524.049 373.544 523.205 372.644C522.362 371.745 521.909 370.548 521.946 369.316C521.941 368.341 522.226 367.386 522.766 366.574C524.979 366.263 527.211 366.109 529.446 366.115C533.193 366.103 536.929 366.533 540.576 367.396C540.823 368.005 540.948 368.658 540.946 369.316Z" fill="white"/>
53 | <path d="M484.946 313.115C487.707 313.115 489.946 310.877 489.946 308.115C489.946 305.354 487.707 303.115 484.946 303.115C482.185 303.115 479.946 305.354 479.946 308.115C479.946 310.877 482.185 313.115 484.946 313.115Z" fill="white"/>
54 | <path d="M577.946 313.115C580.707 313.115 582.946 310.877 582.946 308.115C582.946 305.354 580.707 303.115 577.946 303.115C575.185 303.115 572.946 305.354 572.946 308.115C572.946 310.877 575.185 313.115 577.946 313.115Z" fill="white"/>
55 | <path opacity="0.3" d="M582.946 360.115C585.707 360.115 587.946 357.877 587.946 355.115C587.946 352.354 585.707 350.115 582.946 350.115C580.185 350.115 577.946 352.354 577.946 355.115C577.946 357.877 580.185 360.115 582.946 360.115Z" fill="#62B0FF"/>
56 | <path opacity="0.3" d="M460.946 360.115C463.707 360.115 465.946 357.877 465.946 355.115C465.946 352.354 463.707 350.115 460.946 350.115C458.185 350.115 455.946 352.354 455.946 355.115C455.946 357.877 458.185 360.115 460.946 360.115Z" fill="#62B0FF"/>
57 | </g>
58 | <defs>
59 | <clipPath id="clip0">
60 | <rect width="1074.39" height="584.231" fill="white"/>
61 | </clipPath>
62 | </defs>
63 | </svg>
64 | 


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