├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logoReact192.png
    ├── logoReact512.png
    ├── logoTronlink192.png
    ├── logoTronlink512.png
    ├── manifest.json
    └── index.html
├── src
    ├── Screenshot.png
    ├── App.test.js
    ├── index.js
    ├── index.css
    ├── App.css
    ├── App.js
    ├── logo.svg
    └── background.svg
├── .gitignore
├── README.md
└── package.json


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibnzUK/Tron-Wallet-React-Integration/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/Screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibnzUK/Tron-Wallet-React-Integration/HEAD/src/Screenshot.png


--------------------------------------------------------------------------------
/public/logoReact192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibnzUK/Tron-Wallet-React-Integration/HEAD/public/logoReact192.png


--------------------------------------------------------------------------------
/public/logoReact512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibnzUK/Tron-Wallet-React-Integration/HEAD/public/logoReact512.png


--------------------------------------------------------------------------------
/public/logoTronlink192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibnzUK/Tron-Wallet-React-Integration/HEAD/public/logoTronlink192.png


--------------------------------------------------------------------------------
/public/logoTronlink512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibnzUK/Tron-Wallet-React-Integration/HEAD/public/logoTronlink512.png


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


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 
13 | 


--------------------------------------------------------------------------------
/.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.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family:monospace ;
 4 |   -webkit-font-smoothing: antialiased;
 5 |   -moz-osx-font-smoothing: grayscale;
 6 | }
 7 | 
 8 | 
 9 | html {
10 |   background: url(./background.svg) no-repeat center center fixed;
11 |   -webkit-background-size: cover;
12 |   -moz-background-size: cover;
13 |   -o-background-size: cover;
14 |   background-size: cover;
15 | }
16 | 
17 | html,
18 | body {
19 |   min-height: 100%;
20 | }
21 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TRON WALLET & REACT INTEGRATION
 2 | 
 3 | ![Preview](src/Screenshot.png)
 4 | 
 5 | 
 6 | DEMO  - https://wallet-link.ibnz.dev/
 7 | 
 8 | 
 9 | This is a React application to fetch and display details from TRON Blockchain wallets (Tronlink, Klever). This should help community developers, who are building decentralised applications, to establish a link and communication with Tron Blockchain.
10 | 
11 | ## Community coders, please commit
12 | 
13 | Feel free to add extra functions or improvements, this helps me to familiarise myself with source control and open source project managing. By contributing, you also help to build yet another open-source tool on TRON Network. 
14 | 
15 | -----
16 | ## Tested Wallets
17 | 
18 | - KLEVER  -  https://klever.io/en/
19 | - TronLink - https://www.tronlink.org/
20 | 
21 | 
22 | 
23 | ## Running instructions
24 | 
25 | - Copy project to your directory ( git clone https://github.com/ibnzUK/Ton-Wallet-React-Integration )
26 | - navigate to _Ton-Wallet-React-Integration_ project directory
27 | - make sure you have node.js installed on your machine
28 | - install project packages (npm install)
29 | - start a project (npm run start)
30 | 
31 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 |   display: flex;
 4 |   align-items: center;
 5 |   justify-content: center;
 6 | }
 7 | 
 8 | .Card {
 9 |   margin: 0.5em;
10 |   margin-top: 10vh;
11 |   background-color: rgba(0, 0, 0, 0.575);
12 |   width: 35em;
13 |   height: 45em;
14 |   border-radius: 3em;
15 |   -webkit-backdrop-filter: blur(10px);
16 |   backdrop-filter: blur(10px);
17 |   filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.082));
18 |   /* border: solid 0.8em rgba(255, 255, 255, 0.048); */
19 |   border: solid 0.9em rgba(143, 170, 243, 0.068);
20 | }
21 | .Logo {
22 | 
23 |   height: 6em;
24 |   width: auto;
25 |   padding: 2em 5em 0em 5em ;
26 | 
27 |   /* padding-right: 5em; */
28 | }
29 | 
30 | 
31 | .Stats h3 {
32 |   margin: 1.7em;
33 |   color: rgb(132, 160, 159);
34 |   color: rgb(165, 137, 154);
35 |   font-weight: 400;
36 |   font-size: 1.6em;
37 | }
38 | 
39 | h1 {
40 |   margin: 1.4em;
41 |   color: rgb(117, 136, 196);
42 | 
43 |   font-weight: 400;
44 |   font-size: 1.5em;
45 | }
46 | 
47 | h4 {
48 |   color: rgb(161, 160, 160);
49 |   font-weight: 400;
50 |   font-size: 1.2em;
51 | }
52 | 
53 | p {
54 |   font-size: 0.7em;
55 | }
56 | 
57 | footer {
58 |   position: absolute;
59 |   bottom: 1em;
60 |   width: 100%;
61 |   color: rgba(255, 255, 255, 0.76);
62 |   border-radius: 0em 0em 1em 1em;
63 |   padding-top: 2em;
64 | }
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tron-wallet-react-integration",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-scripts": "4.0.3",
12 |     "web-vitals": "^1.1.2"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   },
38 |   "description": "TRON WALLET & REACT INTEGRATION",
39 |   "main": "index.js",
40 |   "devDependencies": {},
41 |   "keywords": [
42 |     "react",
43 |     "tronlink",
44 |     "klever",
45 |     "integration",
46 |     "example",
47 |     "tron",
48 |     "trx",
49 |     "blockchain",
50 |     "tronweb",
51 |     "wallet",
52 |     "cryptocurrency",
53 |     "crypto",
54 |     "solidity"
55 |    
56 |   ],
57 |   "author": "Justinas Kairys",
58 |   "license": "ISC"
59 | }
60 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="TRON WALLET & REACT INTEGRATION"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>TRON WALLET & REACT INTEGRATION</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import { React, useState, useEffect } from 'react';
  2 | import './App.css';
  3 | import logo from './logo.svg';
  4 | 
  5 | function App() {
  6 |   const [myMessage, setMyMessage] = useState(<h3> LOADING.. </h3>);
  7 |   const [myDetails, setMyDetails] = useState({
  8 |     name: 'none',
  9 |     address: 'none',
 10 |     balance: 0,
 11 |     frozenBalance: 0,
 12 |     network: 'none',
 13 |     link: 'false',
 14 |   });
 15 | 
 16 |   const getBalance = async () => {
 17 |     //if wallet installed and logged , getting TRX token balance
 18 |     if (window.tronWeb && window.tronWeb.ready) {
 19 |       let walletBalances = await window.tronWeb.trx.getAccount(
 20 |         window.tronWeb.defaultAddress.base58
 21 |       );
 22 |       return walletBalances;
 23 |     } else {
 24 |       return 0;
 25 |     }
 26 |   };
 27 | 
 28 |   const getWalletDetails = async () => {
 29 |     if (window.tronWeb) {
 30 |       //checking if wallet injected
 31 |       if (window.tronWeb.ready) {
 32 |         let tempBalance = await getBalance();
 33 |         let tempFrozenBalance = 0;
 34 | 
 35 |         if (!tempBalance.balance) {
 36 |           tempBalance.balance = 0;
 37 |         }
 38 | 
 39 |         //checking if any frozen balance exists
 40 |         if (
 41 |           !tempBalance.frozen &&
 42 |           !tempBalance.account_resource.frozen_balance_for_energy
 43 |         ) {
 44 |           tempFrozenBalance = 0;
 45 |         } else {
 46 |           if (
 47 |             tempBalance.frozen &&
 48 |             tempBalance.account_resource.frozen_balance_for_energy
 49 |           ) {
 50 |             tempFrozenBalance =
 51 |               tempBalance.frozen[0].frozen_balance +
 52 |               tempBalance.account_resource.frozen_balance_for_energy
 53 |                 .frozen_balance;
 54 |           }
 55 |           if (
 56 |             tempBalance.frozen &&
 57 |             !tempBalance.account_resource.frozen_balance_for_energy
 58 |           ) {
 59 |             tempFrozenBalance = tempBalance.frozen[0].frozen_balance;
 60 |           }
 61 |           if (
 62 |             !tempBalance.frozen &&
 63 |             tempBalance.account_resource.frozen_balance_for_energy
 64 |           ) {
 65 |             tempFrozenBalance =
 66 |               tempBalance.account_resource.frozen_balance_for_energy
 67 |                 .frozen_balance;
 68 |           }
 69 |         }
 70 | 
 71 |         //we have wallet and we are logged in
 72 |         setMyMessage(<h3>WALLET CONNECTED</h3>);
 73 |         setMyDetails({
 74 |           name: window.tronWeb.defaultAddress.name,
 75 |           address: window.tronWeb.defaultAddress.base58,
 76 |           balance: tempBalance.balance / 1000000,
 77 |           frozenBalance: tempFrozenBalance / 1000000,
 78 |           network: window.tronWeb.fullNode.host,
 79 |           link: 'true',
 80 |         });
 81 |       } else {
 82 |         //we have wallet but not logged in
 83 |         setMyMessage(<h3>WALLET DETECTED PLEASE LOGIN</h3>);
 84 |         setMyDetails({
 85 |           name: 'none',
 86 |           address: 'none',
 87 |           balance: 0,
 88 |           frozenBalance: 0,
 89 |           network: 'none',
 90 |           link: 'false',
 91 |         });
 92 |       }
 93 |     } else {
 94 |       //wallet is not detected at all
 95 |       setMyMessage(<h3>WALLET NOT DETECTED</h3>);
 96 |     }
 97 |   };
 98 | 
 99 |   useEffect(() => {
100 |     const interval = setInterval(async () => {
101 |       getWalletDetails();
102 |       //wallet checking interval 2sec
103 |     }, 2000);
104 |     return () => {
105 |       clearInterval(interval);
106 |     };
107 |   });
108 | 
109 |   return (
110 |     <div className="App">
111 |       <div className="Card">
112 |         <h1> TRON WALLET & REACT INTEGRATION </h1>
113 |         <div className="Logo">
114 |         <img
115 |           src={logo}
116 |           alt="logo"
117 |         />
118 | 
119 |         </div>
120 |         <div className="Stats">
121 |           {myMessage}
122 |           <h4>Account Name: {myDetails.name} </h4>
123 |           <h4>My Address: {myDetails.address}</h4>
124 |           <h4>
125 |             Balance: {myDetails.balance} TRX (Frozen:{' '}
126 |             {myDetails.frozenBalance} TRX)
127 |           </h4>
128 |           <h4>Network Selected: {myDetails.network}</h4>
129 |           <h4>Link Established: {myDetails.link}</h4>
130 |         </div>
131 |         <footer>
132 |           <p>V 0.03 / 2021 &copy; IBNZ DEVELOPERS</p>
133 |         </footer>
134 |       </div>
135 |     </div>
136 |   );
137 | }
138 | 
139 | export default App;
140 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 1150.3 299.1" style="enable-background:new 0 0 1150.3 299.1;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#9385B1;}
 7 | </style>
 8 | <path id="XMLID_323_" class="st0" d="M0,0c20.3,3.7,39.9,7.2,59.5,10.8c53,9.7,105.9,19.5,158.9,29.2c5.4,1,9.9,2.9,13.9,6.9
 9 | 	c16.3,15.9,32.9,31.5,49.5,47.1c2.7,2.6,3,4.1,0.5,7.2c-54,65.5-107.8,131-161.7,196.6c-0.3,0.3-0.7,0.5-1.7,1.4
10 | 	C79.4,199.5,39.8,100.1,0,0z M118,253.3c0.3,0,0.7-0.1,1-0.1c1.9-15.5,3.8-31,5.7-46.6c3.2-26.4,6.4-52.8,9.6-79.3
11 | 	c0.4-3.4,0.8-6.3-2.6-9.1c-31.2-25.6-62.3-51.4-93.4-77.1c-1.6-1.3-3-3.3-5.5-1.9C61.2,110.6,89.6,182,118,253.3z M135.2,253
12 | 	c0.4,0.2,0.8,0.3,1.2,0.5c39.2-47.7,78.4-95.4,118.4-144c-34.8,6.3-68.3,12.3-101.9,18.3c-3.4,0.6-2.9,3.1-3.2,5.3
13 | 	c-3.3,26.8-6.7,53.7-9.9,80.5C138.1,226.8,136.7,239.9,135.2,253z M205.3,53.9c-54.5-10-107.4-19.7-160.8-29.6
14 | 	c0.5,1.1,0.6,1.6,0.8,1.8C76.5,52,107.8,77.9,139,103.9c3,2.5,4.7,1.4,7-0.6c16.6-13.9,33.3-27.8,50-41.7
15 | 	C198.7,59.4,201.4,57.1,205.3,53.9z M257.3,92.8C245.9,82,235.3,72,224.8,61.9c-1.6-1.5-2.8-1.4-4.4,0c-18.3,15.3-36.7,30.6-55,45.9
16 | 	c0.2,0.5,0.3,1,0.5,1.5C196.1,103.9,226.1,98.4,257.3,92.8z"/>
17 | <g>
18 | 	<path class="st0" d="M1149.5,143.1c-2.6-10.4-9.6-17.6-17.7-23.9c-13.6-10.5-29.1-17.2-45.4-22.3c-2.6-0.8-3.3-1.8-2.7-4.5
19 | 		c3.3-15.1,5.2-30.4,3.8-45.9c-0.8-8.5-2.5-16.8-6.7-24.3c-4.5-8.1-11-13.2-20.3-14.7c-9-1.4-17.3,0.7-25.4,4
20 | 		c-16.2,6.4-29.8,16.9-42.6,28.4c-1.7,1.6-2.7,1.8-4.5,0.1c-8-7.3-16.6-14.1-25.9-19.8c-10.6-6.4-21.5-11.9-34.2-12.8
21 | 		c-11.6-0.8-20.9,2.9-27.3,12.8c-5.9,9.1-7.6,19.3-8.2,29.8c-0.8,14.4,1,28.6,4.1,42.7c0.6,2.6-0.2,3.5-2.5,4.1
22 | 		c-7.4,2.2-14.6,5-21.6,8.3c-12.8,6-24.9,13-34.1,24c-6.4,7.7-9.9,16.4-7.4,26.6c2.3,9.8,8.8,16.8,16.4,22.9
23 | 		c13.8,11.2,29.9,18.1,46.6,23.4c2.7,0.9,3.5,1.9,2.9,4.7c-3.3,14.8-5.1,29.7-3.8,44.9c0.7,8.3,2.2,16.4,6,23.9
24 | 		c5.6,11,14.7,16.8,27,16.5c8.1-0.2,15.8-2.6,23.2-6c14.7-6.7,27.4-16.4,39.3-27.2c1.6-1.5,2.5-1.5,4.1,0
25 | 		c9.4,8.6,19.4,16.4,30.6,22.6c10.1,5.6,20.5,10,30,10.2c12.9,0.1,21.2-4.1,27-13.1c5.5-8.6,7.4-18.3,7.9-28.2
26 | 		c0.9-15.1-0.7-30-4.1-44.6c-0.5-2.3,0.3-2.9,2.1-3.4c6.3-1.9,12.4-4.1,18.3-6.8c13.7-6.1,26.8-13.2,36.9-24.6
27 | 		C1148.2,163,1152.1,153.9,1149.5,143.1z M1001.6,50.9c12.5-11.3,25.7-21.5,41.8-27.3c3.2-1.1,6.5-1.8,9.8-2.2
28 | 		c7.2-0.9,12.9,2.7,16,10.2c2.3,5.4,3.3,11,3.7,16.8c0.2,3,0,6.1,0,9.1c0.4,10.7-1.4,21.2-3.4,31.7c-0.3,1.5-0.6,2.7-2.9,2.1
29 | 		c-11.9-2.8-24-5-36.2-6.2c-2.2-0.2-3.7-1.2-5-3.1c-7.3-9.9-15.1-19.4-23.6-28.3C1001.2,52.9,1000.1,52.3,1001.6,50.9z M915.4,191.5
30 | 		c2.4-8,5-15.9,8.4-24c5.5,10.6,11.3,20.5,17.8,30.6c-8.8-1.1-16.8-2.9-24.8-4.6C915.7,193.3,914.9,192.9,915.4,191.5z M915.2,107.6
31 | 		c-0.4-1.1,0-1.8,1.3-2.1c7.5-1.6,15.1-3.2,22.7-4.3c0.6-0.1,1.1-0.2,1.4,0.3c0.5,0.7-0.2,1.2-0.5,1.7c-5.7,9.1-11,18.5-16.3,28.5
32 | 		C920.2,123.6,917.7,115.6,915.2,107.6z M932.1,151.5c-0.6-1.3-0.5-2.4,0.1-3.6c7.7-16.4,16.7-31.9,26.8-46.9
33 | 		c1.1-1.7,2.5-2.4,4.5-2.6c8.9-0.6,17.8-0.9,27.1-0.8c8.5-0.2,17.4,0.3,26.3,0.8c1.7,0.1,2.7,0.7,3.7,2.1
34 | 		c10.3,15,19.4,30.7,27.3,47.1c0.6,1.3,0.7,2.3,0.1,3.6c-7.7,16.5-16.8,32.1-27,47.2c-1.1,1.6-2.5,2.3-4.3,2.4
35 | 		c-17.9,1.2-35.8,1.1-53.8,0c-1.5-0.1-2.6-0.7-3.5-2C949.2,183.8,940.1,168,932.1,151.5z M1038.6,100.9c9.1,1.3,17.1,2.8,25.1,4.7
36 | 		c1,0.2,1.6,0.6,1.2,1.8c-2.4,8.1-5.1,16-8.5,24.2C1051,121.1,1045.2,111.2,1038.6,100.9z M1056.4,167.1c3.5,8.3,6.1,16.2,8.6,24.2
37 | 		c0.5,1.6-0.4,2-1.5,2.2c-8,1.8-16,3.4-24.8,4.7C1045.1,187.9,1051,178,1056.4,167.1z M988.7,63.6c0.5-0.6,1-1.3,1.8-0.4
38 | 		c6.1,6.1,11.7,12.7,17.5,20.2c-12.3-0.8-23.7-1-36,0C977.5,75.9,983.1,69.8,988.7,63.6z M909.1,36.3c0.9-3.1,2.1-6,3.8-8.6
39 | 		c4.4-6.5,10.9-6.6,17.5-5.3c12.2,2.4,22.5,8.9,32.5,16c5.1,3.7,9.9,7.8,14.7,11.9c1.5,1.3,1.9,2.1,0.3,3.8
40 | 		c-8.4,8.7-16.1,18-23.1,27.8c-1.5,2.1-3.2,3-5.6,3.3c-12,1.2-23.9,3.3-35.6,6.1c-2,0.5-2.7,0.1-3.1-1.8c-2.2-10.8-3.7-21.6-4-33
41 | 		C906.7,49.9,907.2,43,909.1,36.3z M901.6,186.7c-0.5,1.7-0.9,2.6-3.1,1.9c-15.6-5.3-30.7-11.5-43.6-22.2c-3-2.5-5.5-5.2-7.6-8.4
42 | 		c-4.6-7-3.7-13.3,2.7-20.3c8.2-8.9,18.5-14.7,29.3-19.7c6-2.8,12.3-5,18.6-7.1c0.5-0.2,1-0.3,2-0.6c0.9-0.2,1.1,0.8,1.3,1.6
43 | 		c3.8,12.4,8.2,24.5,13.5,36.3c0.5,1.2,0.3,2.3-0.2,3.4C909.5,163,905.1,174.7,901.6,186.7z M978.5,248.3
44 | 		c-12.7,11.3-26,21.8-42.4,27.4c-3.8,1.3-7.8,1.9-11.8,1.8c-5.4-0.1-9.3-2.6-11.8-7.3c-4.3-7.9-5.3-16.4-5.3-25.2c0-1.1,0-2.2,0-3.8
45 | 		c-0.3-10.2,1.5-20.7,3.5-31.2c0.4-2,1-2.9,3.5-2.2c11.9,2.9,24,4.9,36.2,6.2c1.5,0.2,2.7,0.6,3.6,1.9c7.6,10.3,15.8,20.2,24.5,29.6
46 | 		C979.3,246.5,979.8,247.1,978.5,248.3z M991.4,235.3c-0.9,0.9-1.6,1-2.4,0c-5.7-6.1-11.2-12.3-16.5-19.3c11.9,0,23.4,0,35.5,0
47 | 		C1002.5,223.1,997.2,229.4,991.4,235.3z M1069.1,268.1c-3.6,7.6-9.2,10.3-17.6,8.9c-11.4-1.9-21.2-7.5-30.7-13.8
48 | 		c-6.7-4.5-12.8-9.7-18.9-15c-1.3-1.2-1-1.7,0-2.8c8.6-9.3,16.8-18.8,24-29.2c2.2-3.2,5.5-2.3,8.3-2.7c10.8-1.4,21.5-3.2,32-5.8
49 | 		c2.4-0.6,3,0.2,3.5,2.3c2.2,10.5,3.6,21.2,3.9,32.4C1073.4,250.9,1073,259.8,1069.1,268.1z M1128.9,162.9
50 | 		c-6.4,6.8-14.4,11.5-22.7,15.7c-7.8,4-15.9,7-24.1,9.8c-1.8,0.6-2.6,0.3-3.2-1.6c-3.6-12-7.9-23.7-13-35.1
51 | 		c-0.6-1.5-0.8-2.8-0.1-4.3c5.1-11.4,9.3-23.2,12.9-35.2c0.5-1.7,1-2.3,2.9-1.7c15.1,5.1,29.8,11,42.4,21.2
52 | 		c4.1,3.3,7.9,6.9,10.2,11.7c1,2,1.7,4,1.6,6.3C1135.6,155.1,1132.4,159.2,1128.9,162.9z"/>
53 | 	<path class="st0" d="M989.9,179.4c15.7,0.1,29.7-12.2,30-29.8c0.3-16.5-13.3-29.7-29.9-29.7c-16.6,0-29.9,13.3-29.9,29.8
54 | 		C960.2,165.8,973.7,179.3,989.9,179.4z"/>
55 | </g>
56 | <path class="st0" d="M711.1,35.6c-2.5-9.2-7.4-16.9-14.9-22.8c-8-6.3-17.1-9.8-27.4-9.8c-34.2,0-68.5,0-102.7,0
57 | 	C532,3,498,3,463.9,3.1c-3.1,0-6.2,0-9.4,0.9c-4.3,1.2-8.5,2.4-12.4,4.7c-14.4,8.6-22.5,21.2-22.5,38.1
58 | 	c-0.2,53.8-0.1,107.7-0.1,161.5c0,8.6-0.2,17.2,0,25.8c0.2,8.5-0.9,17.1,1,25.6c0.5,2.2,0.9,4.5,1.7,6.6c1.8,5.1,4.4,9.8,7.9,13.9
59 | 	c3.5,4.2,7.7,7.5,12.5,10.1c3,1.6,6,3,9.4,3.7c3.6,0.8,7.2,2,11,2c68.7,0.1,137.4,0,206,0c2.8,0,5.5-0.2,8.3-0.8
60 | 	c6-1.4,11.6-3.5,16.6-7.2c12-8.8,18.7-20.6,18.7-35.5c0.1-68.7,0-137.3,0.1-206C712.7,42.8,712.1,39.2,711.1,35.6z M566,227.5
61 | 	c-2.4,8.6-6.8,15.8-14.7,20.6c-6.4,3.8-13.4,5.5-20.8,5.8c-6.1,0.3-12.1,0.2-18-1.5c-8.8-2.6-16.2-7.2-21.8-14.6
62 | 	c-1.6-2.2-2.9-4.6-4.4-6.9c-0.7-1-0.6-1.8,0.7-2.5c6.1-3.2,12.1-6.5,18.1-9.8c2.3-1.3,2.5-1.1,3.9,0.9c2.3,3.4,4.3,7,7.8,9.4
63 | 	c3.9,2.7,8.1,3,12.5,2.4c3.7-0.5,6.8-2.2,8.8-5.5c1.5-2.5,1.7-5.3,2.2-8c0.3-1.8,0.3-3.6,0.3-5.5c0-30.1,0-60.2,0-90.3
64 | 	c0-2.6,0-2.6,2.7-2.6c7.3,0,14.5,0,21.8,0c2.2,0,2.4,0.2,2.4,2.4c0,15.7,0,31.4,0,47.1c0,10.3,0,20.7,0,31c0,3.4,0,6.9,0,10.3
65 | 	C567.6,216.1,567.5,221.9,566,227.5z M675.8,231.9c-2.7,6.7-7.1,12.1-13.2,16.1c-8.1,5.3-17.2,7.5-26.8,7.9
66 | 	c-7.5,0.4-14.9-0.3-22.1-2.4c-12.5-3.6-22.6-10.6-29.4-21.9c-2.2-3.6-2.2-3.7,1.3-5.7c5.9-3.4,11.9-6.8,17.8-10.3
67 | 	c1.5-0.9,2-0.3,2.7,0.8c2.9,4.5,6.5,8.5,11.2,11.2c5.5,3.2,11.4,3.9,17.6,3.5c4-0.3,7.8-1.4,11-4c6.9-5.5,6.4-15-1.1-20.4
68 | 	c-4.8-3.4-10.2-5.7-15.5-8c-8.9-3.8-17.9-7.5-25.4-13.8c-7.5-6.3-11.9-14.3-12.9-24.1c-0.6-5.7-0.4-11.3,1.3-16.8
69 | 	c2.4-7.8,7-13.9,13.8-18.5c7.3-5,16.7-7.1,25.3-7c8.1,0.1,15.9,1.5,23,5.6c5.7,3.3,10,8.1,13.5,13.6c2.3,3.7,1.7,3.2-1.3,5.2
70 | 	c-5.4,3.5-10.8,7-16.2,10.6c-1.6,1-2,0.9-3-0.7c-2-3.5-4.6-6.6-8.4-8.4c-6.2-2.9-15.2-2.4-19.2,3.4c-4.1,6-2.5,13.5,3.9,17.8
71 | 	c4.3,2.9,9.1,4.8,13.9,6.8c10.1,4.3,20.1,8.6,28.5,16c7.8,6.9,11.5,15.6,12.1,25.9C678.6,220.3,678,226.3,675.8,231.9z"/>
72 | </svg>
73 | 


--------------------------------------------------------------------------------
/src/background.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <svg version="1.1" id="sky" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 | 	 viewBox="0 0 1000 400" style="enable-background:new 0 0 1000 400;" xml:space="preserve">
  5 | <style type="text/css">
  6 | 	.st0{fill:url(#SVGID_1_);}
  7 | 	.st1{fill:url(#SVGID_2_);}
  8 | 	.st2{opacity:0.5;fill:url(#SVGID_3_);}
  9 | 	.st3{fill:url(#SVGID_4_);}
 10 | 	.st4{fill:url(#SVGID_5_);}
 11 | 	.st5{fill:#0D0C1C;}
 12 | 	.st6{opacity:0.6;}
 13 | 	.st7{fill:url(#SVGID_6_);}
 14 | 	.st8{fill:url(#SVGID_7_);}
 15 | 	.st9{fill:#FFFFFF;}
 16 | 	.st10{fill:url(#SVGID_8_);}
 17 | 	.st11{fill:url(#SVGID_9_);}
 18 | 	.st12{opacity:0.5;}
 19 | 	.st13{opacity:0.8;fill:#FFFFFF;}
 20 | 	.st14{opacity:0.5;fill:#FFFFFF;}
 21 | 	.st15{opacity:0.3;fill:#FFFFFF;}
 22 | 	.st16{opacity:0.4;fill:url(#SVGID_10_);}
 23 | 	.st17{opacity:0.5;fill:none;stroke:#0D0C1C;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
 24 | 	.st18{opacity:0.3;fill:none;stroke:#0D0C1C;stroke-width:0.25;stroke-linecap:round;stroke-miterlimit:10;}
 25 | 	.st19{fill:none;stroke:#0D0C1C;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
 26 | 	.st20{fill:url(#SVGID_11_);}
 27 | 	.st21{fill:url(#SVGID_12_);}
 28 | 	.st22{clip-path:url(#SVGID_14_);}
 29 | 	.st23{fill-rule:evenodd;clip-rule:evenodd;fill:#0D0C1C;}
 30 | 	.st24{clip-path:url(#SVGID_20_);fill-rule:evenodd;clip-rule:evenodd;fill:#0D0C1C;}
 31 | </style>
 32 | <g>
 33 | 	
 34 | 		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="492.7781" y1="277.3898" x2="492.7781" y2="-36.6102" gradientTransform="matrix(-1 0 0 1 993 0)">
 35 | 		<stop  offset="0" style="stop-color:#FF5050"/>
 36 | 		<stop  offset="9.803919e-02" style="stop-color:#FF64A3"/>
 37 | 		<stop  offset="0.2304" style="stop-color:#E250BF"/>
 38 | 		<stop  offset="0.3578" style="stop-color:#AF2EAC"/>
 39 | 		<stop  offset="0.5539" style="stop-color:#501F7F"/>
 40 | 		<stop  offset="0.7206" style="stop-color:#18125E"/>
 41 | 		<stop  offset="0.8676" style="stop-color:#0F0B2D"/>
 42 | 		<stop  offset="1" style="stop-color:#0D0C1C"/>
 43 | 	</linearGradient>
 44 | 	<rect x="0.4" y="-36.6" class="st0" width="999.6" height="314"/>
 45 | 	
 46 | 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="505.2219" y1="586.3898" x2="505.2219" y2="400.3898" gradientTransform="matrix(1 0 0 -1 -5 863.7797)">
 47 | 		<stop  offset="0" style="stop-color:#FF5050"/>
 48 | 		<stop  offset="9.803919e-02" style="stop-color:#FF64A3"/>
 49 | 		<stop  offset="0.2304" style="stop-color:#E250BF"/>
 50 | 		<stop  offset="0.3578" style="stop-color:#AF2EAC"/>
 51 | 		<stop  offset="0.5539" style="stop-color:#501F7F"/>
 52 | 		<stop  offset="0.7206" style="stop-color:#18125E"/>
 53 | 		<stop  offset="0.8676" style="stop-color:#0F0B2D"/>
 54 | 		<stop  offset="1" style="stop-color:#0D0C1C"/>
 55 | 	</linearGradient>
 56 | 	<rect x="0.4" y="277.4" class="st1" width="999.6" height="186"/>
 57 | 	
 58 | 		<radialGradient id="SVGID_3_" cx="597.9998" cy="150.3903" r="600.2698" gradientTransform="matrix(-1.3327 0 0 0.7 1323.4124 -18.8834)" gradientUnits="userSpaceOnUse">
 59 | 		<stop  offset="0" style="stop-color:#FFFFFF"/>
 60 | 		<stop  offset="0.2732" style="stop-color:#AFAEB4"/>
 61 | 		<stop  offset="0.5327" style="stop-color:#696973"/>
 62 | 		<stop  offset="0.7475" style="stop-color:#373744"/>
 63 | 		<stop  offset="0.9095" style="stop-color:#191827"/>
 64 | 		<stop  offset="1" style="stop-color:#0D0C1C"/>
 65 | 	</radialGradient>
 66 | 	<rect x="0" y="-36.6" class="st2" width="999.6" height="500"/>
 67 | 	
 68 | 		<radialGradient id="SVGID_4_" cx="498.1898" cy="213.5269" r="124.2612" gradientTransform="matrix(-1.3507 0 0 1.0135 1328.7379 68.41)" gradientUnits="userSpaceOnUse">
 69 | 		<stop  offset="0" style="stop-color:#FFFFFF"/>
 70 | 		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
 71 | 	</radialGradient>
 72 | 	<ellipse class="st3" cx="644.2" cy="264.3" rx="205.2" ry="154"/>
 73 | 	
 74 | 		<radialGradient id="SVGID_5_" cx="550.8124" cy="213.5269" r="124.2612" gradientTransform="matrix(-1.3507 0 0 1.0135 1328.7379 68.41)" gradientUnits="userSpaceOnUse">
 75 | 		<stop  offset="0" style="stop-color:#FFFFFF"/>
 76 | 		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
 77 | 	</radialGradient>
 78 | 	<ellipse class="st4" cx="573.1" cy="264.3" rx="205.2" ry="154"/>
 79 | 	<path class="st5" d="M1000,284.4H0.4v-18l6.2-7.3h8l3.1,2l4.9,3.3h4.4h6.2l6.2,1.4l8.9,3l9.8,1l10.7-1l9.3,3l5.3-1.7l6.7,1.7
 80 | 		l5.8,2.3l11.6,3.3l8,2.7l9.8,1.7l12-1.7l17.3,1.3l7.6-0.7h12h12l6.2-1.3l5.8,1.3l12,0c0,0,10.7-1,12-1.3s22.2,0,22.2,0l5.8,1.7
 81 | 		l12-2.7l9.8,2l34.2-1l8,2h14.7l21.8-2.3l15.5,0.7l37.3-0.7l14.2-3.7l7.1-0.7l17.8-8.7h17.8c0,0,6.2-1.1,7.6-1.7
 82 | 		c1.3-0.6,22.2,4.4,22.2,4.4l22.2,0.3l11.1-0.7l22.7-4h25.3l36.9-1.6l10.7-3.7l7.6,2l10.2-3.3l24-15l5.8,1.3l0.9-1.3l8.9-4.7
 83 | 		l14.2-1.3h12l5.8-2.3l4.9-4.3l18.2-4c0,0,9.3,1.7,12,2.3s19.1,7,20.4,7.3c1.3,0.3,12.4,0.7,12.4,0.7l13.8,0.7l21.3,1.3l21.8,4.3
 84 | 		c0,0,13.3,5.3,15.1,6c1.8,0.7,16.4-1,16.4-1l26.2,4.3c0,0,6.2-1,7.6-0.7c1.3,0.3,16.4,1.3,18.2,2.3s14.2,5.3,16,5.7
 85 | 		s8.4-4.2,8.4-4.2h10.7l16.9-8.5l14.7-7l11.1-3.3l5.8-7V284.4z"/>
 86 | 	<g class="st6">
 87 | 		<g>
 88 | 			<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="139.5464" y1="108.9657" x2="302.4754" y2="108.9657">
 89 | 				<stop  offset="0.2941" style="stop-color:#FFFFFF"/>
 90 | 				<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
 91 | 			</linearGradient>
 92 | 			<path class="st7" d="M141.8,65l159.3,87.6c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.1L140.3,67.7c-0.7-0.4-1-1.3-0.6-2
 93 | 				S141,64.6,141.8,65C141.8,65,141.8,65,141.8,65z"/>
 94 | 		</g>
 95 | 		<g>
 96 | 			<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="139.5471" y1="108.9657" x2="302.4761" y2="108.9657">
 97 | 				<stop  offset="0.2941" style="stop-color:#FFFFFF"/>
 98 | 				<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
 99 | 			</linearGradient>
100 | 			<path class="st8" d="M141.8,65l159.3,87.6c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.1L140.3,67.7c-0.7-0.4-1-1.3-0.6-2
101 | 				C140.1,64.9,141,64.6,141.8,65C141.8,65,141.8,65,141.8,65z"/>
102 | 		</g>
103 | 		<ellipse class="st9" cx="141.1" cy="66.4" rx="2.1" ry="1.6"/>
104 | 		<g>
105 | 			<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="139.5464" y1="108.9657" x2="302.4754" y2="108.9657">
106 | 				<stop  offset="0.2941" style="stop-color:#FFFFFF"/>
107 | 				<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
108 | 			</linearGradient>
109 | 			<path class="st10" d="M141.8,65l159.3,87.6c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.1L140.3,67.7c-0.7-0.4-1-1.3-0.6-2
110 | 				S141,64.6,141.8,65C141.8,65,141.8,65,141.8,65z"/>
111 | 		</g>
112 | 		<g>
113 | 			<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="139.5471" y1="108.9657" x2="302.4761" y2="108.9657">
114 | 				<stop  offset="0.2941" style="stop-color:#FFFFFF"/>
115 | 				<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
116 | 			</linearGradient>
117 | 			<path class="st11" d="M141.8,65l159.3,87.6c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.1L140.3,67.7c-0.7-0.4-1-1.3-0.6-2
118 | 				C140.1,64.9,141,64.6,141.8,65C141.8,65,141.8,65,141.8,65z"/>
119 | 		</g>
120 | 	</g>
121 | 	<g class="st12">
122 | 		<path class="st13" d="M848.1,22.7C848.1,22.7,848.2,22.7,848.1,22.7C848.2,22.7,848.2,22.7,848.1,22.7c-0.3,0,0.2,0.1,0.9-0.1
123 | 			c0,0-0.1,0-0.1,0C848.6,22.7,848.3,22.7,848.1,22.7z"/>
124 | 		<path class="st13" d="M851.7,20.1c0-1.4-1.6-2.5-3.4-2.6c-1.3,0-2.9,0.4-3.4,1.3c-0.5,0.9-0.7,1.7,0,2.5c0.7,0.9,1.9,1.3,3.2,1.3
125 | 			c0,0,0,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0.1,0,0.3,0,0.4,0c-0.1,0-0.2,0-0.3,0c0.1,0,0.2,0,0.4,0
126 | 			c0.1,0,0.1,0,0.2,0c0,0-0.1,0-0.1,0C850.5,22.4,851.7,21.4,851.7,20.1z"/>
127 | 	</g>
128 | 	<g class="st12">
129 | 		<path class="st13" d="M285.7,8.7C285.8,8.7,285.8,8.7,285.7,8.7C285.8,8.7,285.8,8.7,285.7,8.7c-0.3,0,0.2,0.1,0.9-0.1
130 | 			c0,0-0.1,0-0.1,0C286.2,8.6,286,8.7,285.7,8.7z"/>
131 | 		<path class="st13" d="M289.3,6.1c0-1.4-1.6-2.5-3.4-2.6c-1.3,0-2.9,0.4-3.4,1.3c-0.5,0.9-0.7,1.7,0,2.5c0.7,0.9,1.9,1.3,3.2,1.3
132 | 			c0,0,0,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0.1,0,0.3,0,0.4,0c-0.1,0-0.2,0-0.3,0c0.1,0,0.2,0,0.4,0
133 | 			c0.1,0,0.1,0,0.2,0c0,0-0.1,0-0.1,0C288.1,8.3,289.3,7.4,289.3,6.1z"/>
134 | 	</g>
135 | 	<path class="st14" d="M809,29.7c-0.1-0.1-0.3-0.3-0.4-0.4c-0.5-0.5-1.7-0.7-2.5-0.5c-1.1,0.2-1.9,1-1.9,1.9c0,0.7,0.5,1.3,1.3,1.7
136 | 		c0.9,0.4,2.4,0.4,3.1-0.3c0.1-0.1,0.3-0.3,0.4-0.4C809.7,31,809.7,30.4,809,29.7z"/>
137 | 	<path class="st15" d="M484.2,160.8c-0.1-0.1-0.3-0.3-0.4-0.4c-0.5-0.5-1.7-0.7-2.5-0.5c-1.1,0.2-1.9,1-1.9,1.9
138 | 		c0,0.7,0.5,1.3,1.3,1.7c0.9,0.4,2.4,0.4,3.1-0.3c0.1-0.1,0.3-0.3,0.4-0.4C484.9,162.1,484.9,161.5,484.2,160.8z"/>
139 | 	<path class="st14" d="M48.3,100c-0.1-0.1-0.3-0.3-0.4-0.4c-0.5-0.5-1.7-0.7-2.5-0.5c-1.1,0.2-1.9,1-1.9,1.9c0,0.7,0.5,1.3,1.3,1.7
140 | 		c0.9,0.4,2.4,0.4,3.1-0.3c0.1-0.1,0.3-0.3,0.4-0.4C49,101.3,49,100.6,48.3,100z"/>
141 | 	<path class="st15" d="M517.7,149.6c-0.1-0.1-0.3-0.3-0.4-0.4c-0.5-0.5-1.7-0.7-2.5-0.5c-1.1,0.2-1.9,1-1.9,1.9
142 | 		c0,0.7,0.5,1.3,1.3,1.7c0.9,0.4,2.4,0.4,3.1-0.3c0.1-0.1,0.3-0.3,0.4-0.4C518.4,150.9,518.4,150.2,517.7,149.6z"/>
143 | 	<path class="st14" d="M947.6,107.8c-0.2,0-0.4,0-0.7,0c-4.4-0.2-4.4,5.2,0,5.1c0.2,0,0.4,0,0.7,0
144 | 		C951.9,112.7,951.9,108,947.6,107.8z"/>
145 | 	<path class="st14" d="M62.6,78c-4.4,0-4.4,5.2,0,5.2C67.1,83.2,67.1,78,62.6,78z"/>
146 | 	<path class="st5" d="M243.7,322.9c-4.6-0.3-21.7-10.1-23-12.1l97.4,5.4c0,0-2.1,5.2-6.2,6.7H243.7z"/>
147 | 	<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="269.3924" y1="317.8898" x2="269.3924" y2="364.4712">
148 | 		<stop  offset="0.4412" style="stop-color:#0D0C1C"/>
149 | 		<stop  offset="0.4508" style="stop-color:#1A1A29"/>
150 | 		<stop  offset="0.4882" style="stop-color:#4A4955"/>
151 | 		<stop  offset="0.5287" style="stop-color:#75757E"/>
152 | 		<stop  offset="0.5716" style="stop-color:#9A9AA1"/>
153 | 		<stop  offset="0.6173" style="stop-color:#BAB9BE"/>
154 | 		<stop  offset="0.6667" style="stop-color:#D3D3D6"/>
155 | 		<stop  offset="0.7214" style="stop-color:#E7E7E8"/>
156 | 		<stop  offset="0.7841" style="stop-color:#F5F4F5"/>
157 | 		<stop  offset="0.8618" style="stop-color:#FDFDFD"/>
158 | 		<stop  offset="1" style="stop-color:#FFFFFF"/>
159 | 	</linearGradient>
160 | 	<path class="st16" d="M243.7,322.8c-4.6,0.3-21.7,10.1-23,12.1l97.4-5.4c0,0-2.1-5.2-6.2-6.7H243.7z"/>
161 | 	<path class="st17" d="M240.6,322c-11.8,0-10.4,1.3,4,2c14.4,0.7,87.1,1.5,87.1,1.5"/>
162 | 	<path class="st17" d="M247.9,325.9c12.9,0.8,107.3,2.8,111.3,3"/>
163 | 	<line class="st17" x1="312.1" y1="319.9" x2="345.2" y2="319.9"/>
164 | 	<line class="st18" x1="328.6" y1="329.5" x2="351.5" y2="330.1"/>
165 | 	<line class="st18" x1="330.5" y1="319" x2="351.5" y2="319"/>
166 | 	<line class="st19" x1="221.6" y1="311.4" x2="205.2" y2="323.4"/>
167 | 	<path class="st17" d="M209.8,323.5c0,0.5-2,0.9-4.6,0.9c-2.5,0-4.6-0.4-4.6-0.9s2-0.9,4.6-0.9C207.8,322.5,209.8,323,209.8,323.5z"
168 | 		/>
169 | 	<path class="st18" d="M212.2,323.6c0,0.9-3.1,1.6-7,1.6c-3.9,0-7-0.7-7-1.6c0-0.9,3.1-1.6,7-1.6C209.1,322,212.2,322.8,212.2,323.6
170 | 		z"/>
171 | 	<g>
172 | 		<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="707.1207" y1="166.8782" x2="832.0734" y2="166.8782">
173 | 			<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
174 | 			<stop  offset="0.5392" style="stop-color:#FFFFFF"/>
175 | 			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
176 | 		</linearGradient>
177 | 		<path class="st20" d="M707.6,171.6c10.1-2.4,20.4-4.2,30.7-5.6c5.1-0.7,10.3-1.3,15.5-1.9l7.8-0.7l7.8-0.6
178 | 			c10.4-0.6,20.8-1.1,31.2-1c5.2,0,10.4,0.1,15.6,0.3c2.6,0.1,5.2,0.2,7.8,0.4l7.8,0.5c0.1,0,0.2,0.1,0.2,0.2c0,0.1-0.1,0.2-0.2,0.2
179 | 			c-10.4-0.5-20.7-0.8-31.1-0.7c-10.4,0-20.8,0.5-31.1,1.2c-10.4,0.6-20.7,1.7-31,3c-5.1,0.6-10.3,1.4-15.4,2.3
180 | 			c-5.1,0.9-10.2,1.8-15.3,2.9c-0.1,0-0.2,0-0.2-0.1C707.4,171.7,707.5,171.6,707.6,171.6z"/>
181 | 	</g>
182 | 	<g>
183 | 		<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="121.7046" y1="208.7021" x2="188.9077" y2="223.9815">
184 | 			<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
185 | 			<stop  offset="0.5392" style="stop-color:#FFFFFF"/>
186 | 			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
187 | 		</linearGradient>
188 | 		<path class="st21" d="M121.2,212.8c2.9-0.2,5.7-0.3,8.6-0.4c2.9,0,5.7,0,8.6,0.1c5.7,0.1,11.5,0.5,17.2,1.1
189 | 			c5.7,0.6,11.4,1.3,17,2.3c2.8,0.5,5.6,1.1,8.4,1.6c2.8,0.6,5.6,1.3,8.4,2c0.1,0,0.2,0.1,0.1,0.2c0,0.1-0.1,0.2-0.2,0.1l0,0
190 | 			c-5.6-1.2-11.2-2.3-16.9-3.1c-5.6-0.9-11.3-1.6-17-2.2c-5.7-0.6-11.4-1-17.1-1.2c-5.7-0.2-11.4-0.3-17.1-0.1l0,0
191 | 			c-0.1,0-0.2-0.1-0.2-0.2C121,212.9,121.1,212.9,121.2,212.8z"/>
192 | 	</g>
193 | </g>
194 | <g>
195 | 	<g>
196 | 		<g>
197 | 			<g>
198 | 				<defs>
199 | 					<rect id="SVGID_13_" x="33.6" y="-13.2" width="1000" height="440.7"/>
200 | 				</defs>
201 | 				<clipPath id="SVGID_14_">
202 | 					<use xlink:href="#SVGID_13_"  style="overflow:visible;"/>
203 | 				</clipPath>
204 | 				<g class="st22">
205 | 				</g>
206 | 			</g>
207 | 		</g>
208 | 		<g>
209 | 			<g>
210 | 				<defs>
211 | 					<rect id="SVGID_15_" x="33.6" y="-13.2" width="1000" height="440.7"/>
212 | 				</defs>
213 | 				<clipPath id="SVGID_16_">
214 | 					<use xlink:href="#SVGID_15_"  style="overflow:visible;"/>
215 | 				</clipPath>
216 | 			</g>
217 | 		</g>
218 | 		<g>
219 | 			<g>
220 | 				<defs>
221 | 					<rect id="SVGID_17_" x="33.6" y="-13.2" width="1000" height="440.7"/>
222 | 				</defs>
223 | 				<clipPath id="SVGID_18_">
224 | 					<use xlink:href="#SVGID_17_"  style="overflow:visible;"/>
225 | 				</clipPath>
226 | 			</g>
227 | 		</g>
228 | 	</g>
229 | 	<polygon class="st23" points="439.3,128.1 470.8,127.5 485.8,146.6 468.1,130.8 444.6,134.2 436.1,139.2 433.3,132.8 411.1,113.4 
230 | 		392,110.3 415.1,111 	"/>
231 | </g>
232 | <polygon class="st23" points="248.9,228.6 263.7,212 282.8,212 264.5,214.8 255.2,228.4 254.2,234.7 248.9,233.6 226.2,237.2 
233 | 	215.1,245.9 226.7,234.2 "/>
234 | <polygon class="st23" points="317.7,203 329.7,214.8 331.9,224.5 329.7,214.8 339.2,200.5 335.4,214.8 334.2,223.5 332.5,228.6 
235 | 	330.2,223.7 327.9,215.6 "/>
236 | <g>
237 | 	<g>
238 | 		<defs>
239 | 			<rect id="SVGID_19_" x="33.6" y="-13.2" width="1000" height="440.7"/>
240 | 		</defs>
241 | 		<clipPath id="SVGID_20_">
242 | 			<use xlink:href="#SVGID_19_"  style="overflow:visible;"/>
243 | 		</clipPath>
244 | 		<polygon class="st24" points="282.8,244.2 286.1,239.7 296.4,242 305,238.4 309.3,241.3 305.1,240 297.9,243.2 297,244.8 
245 | 			295.4,243.1 286.8,241.6 		"/>
246 | 	</g>
247 | </g>
248 | <g>
249 | 	<polygon class="st23" points="709.6,83.8 718.2,95.3 721.3,95.3 727.4,87.5 721.1,92 	"/>
250 | 	<polygon class="st23" points="643.1,90.3 647.2,96.1 649.1,96.1 656.7,88 646.7,93.8 	"/>
251 | 	<polygon class="st23" points="696.3,67.8 703.6,72.4 706.8,62.2 701.5,70.2 	"/>
252 | 	<polygon class="st23" points="721.3,95.3 727.1,95.3 727.1,93.3 720.1,94.3 	"/>
253 | 	<polygon class="st23" points="640.8,128.3 632.2,139.8 629.2,139.8 623.1,132 629.8,136.2 	"/>
254 | 	<polygon class="st23" points="629.2,139.8 623.3,139.8 623.3,137.8 630.3,138.8 	"/>
255 | 	<polygon class="st23" points="702.5,71.7 703.7,74 705.2,72.9 703.2,71.7 	"/>
256 | 	<polygon class="st23" points="617.2,95.7 609,100.9 605.4,89.5 611.3,98.4 	"/>
257 | 	<polygon class="st23" points="610.1,100.1 608.8,102.7 607.2,101.4 609.4,100.1 	"/>
258 | 	<polygon class="st23" points="647.4,95.3 648.6,97.4 649.9,97.4 649.1,96.1 	"/>
259 | 	<polygon class="st23" points="665,85.3 677.8,83.4 675.4,85.3 669,92.5 667.7,86.7 664.2,86.7 	"/>
260 | </g>
261 | </svg>
262 | 


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