├── .gitignore
├── .parcel-cache
    ├── 0f817512aa19eef7.txt
    ├── 164e3ff2ed7520e8
    ├── 1d11806abf58443d
    ├── 37dbec41244c32ee.txt
    ├── 7c901be8e1fcacd1
    ├── 839725f60ad82a5f
    ├── a9f5484dda8bfe2c
    ├── be421f5ad77beb1a
    ├── data.mdb
    ├── faf76a89a5ae82aa
    └── lock.mdb
├── README.md
├── dist
    └── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.js
    ├── components
        ├── Footer.js
        ├── Game.js
        ├── Header.js
        ├── Modal.js
        └── Play.js
    ├── images
        ├── bg-pentagon.svg
        ├── bg-triangle.svg
        ├── favicon-32x32.png
        ├── icon-close.svg
        ├── icon-lizard.svg
        ├── icon-paper.svg
        ├── icon-rock.svg
        ├── icon-scissors.svg
        ├── icon-spock.svg
        ├── image-rules-bonus.svg
        ├── image-rules.svg
        ├── logo-bonus.svg
        └── logo.svg
    ├── index.html
    ├── index.js
    ├── scss
        ├── _footer.scss
        ├── _game.scss
        ├── _globals.scss
        ├── _header.scss
        ├── _mixins.scss
        ├── _modal.scss
        ├── _play.scss
        └── _variables.scss
    ├── style-guide.md
    └── styles.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | .cache/
 3 | coverage/
 4 | dist/*
 5 | !dist/index.html
 6 | node_modules/
 7 | *.log
 8 | 
 9 | # OS generated files
10 | .DS_Store
11 | .DS_Store?
12 | ._*
13 | .Spotlight-V100
14 | .Trashes
15 | ehthumbs.db
16 | Thumbs.db
17 | 


--------------------------------------------------------------------------------
/.parcel-cache/164e3ff2ed7520e8:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/164e3ff2ed7520e8


--------------------------------------------------------------------------------
/.parcel-cache/1d11806abf58443d:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/1d11806abf58443d


--------------------------------------------------------------------------------
/.parcel-cache/7c901be8e1fcacd1:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/7c901be8e1fcacd1


--------------------------------------------------------------------------------
/.parcel-cache/839725f60ad82a5f:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/839725f60ad82a5f


--------------------------------------------------------------------------------
/.parcel-cache/a9f5484dda8bfe2c:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/a9f5484dda8bfe2c


--------------------------------------------------------------------------------
/.parcel-cache/be421f5ad77beb1a:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/be421f5ad77beb1a


--------------------------------------------------------------------------------
/.parcel-cache/data.mdb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/data.mdb


--------------------------------------------------------------------------------
/.parcel-cache/faf76a89a5ae82aa:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/faf76a89a5ae82aa


--------------------------------------------------------------------------------
/.parcel-cache/lock.mdb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/.parcel-cache/lock.mdb


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Build Rock, Paper and Scissors Game with React JS
 2 | 
 3 | This repository contains code for rock,paper and scissors game in reactjs.
 4 | 
 5 | View Demo:
 6 | [React.js Rock Paper Scissors Game](https://react-js-rock-paper-scissors-game.vercel.app/)
 7 | 
 8 | If you want to learn how to create it please follow below tutorial:
 9 | 
10 | https://youtu.be/tCSaSDgz2Hw
11 | 
12 | ## Building and running on localhost
13 | 
14 | First install dependencies:
15 | 
16 | ```sh
17 | npm install
18 | ```
19 | 
20 | To run in hot module reloading mode:
21 | 
22 | ```sh
23 | npm start
24 | ```
25 | 
26 | To create a production build:
27 | 
28 | ```sh
29 | npm run build-prod
30 | ```
31 | 
32 | ## Runningg
33 | 
34 | Open the file `dist/index.html` in your browser
35 | 
36 | ## Credits
37 | 
38 | Made with [createapp.dev](https://createapp.dev/)
39 | 
40 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 |   <head><link rel="stylesheet" href="/index.4a508c1d.css">
 6 | 
 7 |     <meta charset="UTF-8">
 8 | 
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 | 
11 |     <!-- displays site properly based on user's device -->
12 | 
13 |     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.3a4ddde5.png">
14 | 
15 |     <title>Frontend Mentor | Rock, Paper, Scissors</title>
16 | 
17 |   </head>
18 | 
19 |   <body>
20 | 
21 |     <div id="modal"></div>
22 | 
23 |     <div id="app"></div>
24 | 
25 |     <script src="/index.975ef6c8.js" defer=""></script>
26 | 
27 |   </body>
28 | 
29 | </html>
30 | 
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-rock-paper-scissors",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "keywords": [],
 6 |   "author": "",
 7 |   "license": "ISC",
 8 |   "source": "src/index.html",
 9 |   "scripts": {
10 |     "clean": "rm dist/bundle.js",
11 |     "start": "parcel",
12 |     "build-prod": "parcel build"
13 |   },
14 |   "dependencies": {
15 |     "react": "^18.2.0",
16 |     "react-dom": "^18.2.0",
17 |     "react-router-dom": "^6.8.2"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/core": "^7.21.0",
21 |     "@babel/preset-env": "^7.20.0",
22 |     "@babel/preset-react": "^7.18.6",
23 |     "@parcel/transformer-sass": "^2.8.3",
24 |     "parcel": "^2.8.3",
25 |     "prettier": "^2.8.4",
26 |     "process": "^0.11.10",
27 |     "sass": "^1.58.3"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Header from "./components/Header";
 3 | import Play from "./components/Play";
 4 | import Game from "./components/Game";
 5 | import Footer from "./components/Footer";
 6 | import { Routes, Route } from "react-router-dom";
 7 | 
 8 | function App() {
 9 |   const [myChoice, setMyChoice] = useState("");
10 |   const [score, setScore] = useState(0);
11 | 
12 |   return (
13 |     <>
14 |       <div className="container">
15 |         <Header score={score} />
16 |         <Routes>
17 |           <Route path="/" element={<Play setMyChoice={setMyChoice} />} />
18 |           <Route
19 |             path="/game"
20 |             element={
21 |               <Game myChoice={myChoice} score={score} setScore={setScore} />
22 |             }
23 |           />
24 |         </Routes>
25 |       </div>
26 |       <Footer />
27 |     </>
28 |   );
29 | }
30 | 
31 | export default App;
32 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Modal from "./Modal";
 3 | const Footer = () => {
 4 |   const [modal, setModal] = useState(false);
 5 | 
 6 |   const toggle = () => {
 7 |     setModal(!modal);
 8 |   };
 9 | 
10 |   return (
11 |     <>
12 |       <footer className="footer">
13 |         <div class="attribution">
14 |           Challenge by{" "}
15 |           <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
16 |             Frontend Mentor
17 |           </a>
18 |           . Coded by <a href="https://youtube.com/codebucks" target="_blank">CodeBucks</a>.
19 |         </div>
20 |         <button className="rules" onClick={toggle}>
21 |           Rules
22 |         </button>
23 |       </footer>
24 |       {modal ? <Modal toggle={toggle} /> : null}
25 |     </>
26 |   );
27 | };
28 | 
29 | export default Footer;
30 | 


--------------------------------------------------------------------------------
/src/components/Game.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { Link } from "react-router-dom";
  3 | 
  4 | const Game = ({ score, myChoice, setScore }) => {
  5 |   const [house, setHouse] = useState("");
  6 |   const [playerWin, setPlayerWin] = useState("");
  7 | 
  8 |   const [counter, setCounter] = useState(3);
  9 | 
 10 |   const newHousePick = () => {
 11 |     const choices = ["rock", "paper", "scissors"];
 12 |     setHouse(choices[Math.floor(Math.random() * 3)]);
 13 |   };
 14 |   useEffect(() => {
 15 |     newHousePick();
 16 |   }, []);
 17 | 
 18 |   const Result = () => {
 19 |     if (myChoice === "rock" && house === "scissors") {
 20 |       setPlayerWin("win");
 21 |       setScore(score + 1);
 22 |     } else if (myChoice === "rock" && house === "paper") {
 23 |       setPlayerWin("lose");
 24 |       setScore(score - 1);
 25 |     } else if (myChoice === "scissors" && house === "paper") {
 26 |       setPlayerWin("win");
 27 |       setScore(score + 1);
 28 |     } else if (myChoice === "scissors" && house === "rock") {
 29 |       setPlayerWin("lose");
 30 |       setScore(score - 1);
 31 |     } else if (myChoice === "paper" && house === "rock") {
 32 |       setPlayerWin("win");
 33 |       setScore(score + 1);
 34 |     } else if (myChoice === "paper" && house === "scissors") {
 35 |       setPlayerWin("lose");
 36 |       setScore(score - 1);
 37 |     } else {
 38 |       setPlayerWin("draw");
 39 |     }
 40 |   };
 41 | 
 42 |   useEffect(() => {
 43 |     const timer =
 44 |       counter > 0
 45 |         ? setInterval(() => {
 46 |             setCounter(counter - 1);
 47 |           }, 1000)
 48 |         : Result();
 49 | 
 50 |     return () => {
 51 |       clearInterval(timer);
 52 |     };
 53 |   }, [counter, house]);
 54 | 
 55 |   return (
 56 |     <div className="game">
 57 |       <div className="game__you">
 58 |         <span className="text">You Picked</span>
 59 |         <div
 60 |           className={`icon icon--${myChoice} ${
 61 |             playerWin == "win" ? `icon icon--${myChoice}--winner` : ""
 62 |           }`}
 63 |         ></div>
 64 |       </div>
 65 |       {playerWin == "win" && (
 66 |         <div className="game__play">
 67 |           <span className="text">You Win</span>
 68 |           <Link to="/" className="play-again" onClick={() => setHouse()}>
 69 |             Play Again
 70 |           </Link>
 71 |         </div>
 72 |       )}
 73 |       {playerWin == "lose" && (
 74 |         <div className="game__play">
 75 |           <span className="text">You Lose</span>
 76 |           <Link to="/" className="play-again" onClick={() => setHouse()}>
 77 |             Play Again
 78 |           </Link>
 79 |         </div>
 80 |       )}
 81 |       {playerWin == "draw" && (
 82 |         <div className="game__play">
 83 |           <span className="text">Draw</span>
 84 |           <Link to="/" className="play-again" onClick={() => setHouse()}>
 85 |             Play Again
 86 |           </Link>
 87 |         </div>
 88 |       )}
 89 | 
 90 |       <div className="game__house">
 91 |         <span className="text">The House Picked</span>
 92 |         {counter == 0 ? (
 93 |           <div
 94 |             className={`icon icon--${house} ${
 95 |               playerWin == "lose" ? `icon icon--${house}--winner` : ""
 96 |             }`}
 97 |           ></div>
 98 |         ) : (
 99 |           <div className="counter">{counter}</div>
100 |         )}
101 |       </div>
102 |     </div>
103 |   );
104 | };
105 | 
106 | export default Game;
107 | 
108 | /*
109 |  my choice:{myChoice} <br />
110 |       House choice:{house} <br />
111 |       Result:
112 |       {playerWin == "win" && <h2>You Win</h2>}
113 |       {playerWin == "lose" && <h2>You lose</h2>}
114 |       {playerWin == "draw" && <h2>Draw</h2>}
115 |       <Link to="/" onClick={() => setHouse()}>
116 |         Play Again
117 |       </Link>
118 | 
119 | */
120 | 


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Header = ({ score }) => {
 4 |   return (
 5 |     <div className="header">
 6 |       <div className="text">
 7 |         <span>Rock</span>
 8 |         <span>Paper</span>
 9 |         <span>Scissors</span>
10 |       </div>
11 |       <div className="score-box">
12 |         <span>Score</span>
13 |         <div className="score-box__score">{score}</div>
14 |       </div>
15 |     </div>
16 |   );
17 | };
18 | 
19 | export default Header;
20 | 


--------------------------------------------------------------------------------
/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import close from "../images/icon-close.svg";
 4 | import rules from "../images/image-rules.svg";
 5 | 
 6 | const Modal = ({ toggle }) => {
 7 |   return ReactDOM.createPortal(
 8 |     <div className="modal-container">
 9 |       <div className="modal-box">
10 |         <div className="modal__header">
11 |           <h1>Rules</h1>
12 |           <button onClick={toggle}>
13 |             <img src={close} alt="Close" srcset="" />
14 |           </button>
15 |         </div>
16 |         <img src={rules} alt="Rules" srcset="" />
17 |       </div>
18 |     </div>,
19 |     document.getElementById("modal")
20 |   );
21 | };
22 | 
23 | export default Modal;
24 | 


--------------------------------------------------------------------------------
/src/components/Play.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import Triangle from "../images/bg-triangle.svg";
 4 | 
 5 | const Play = ({ setMyChoice }) => {
 6 |   const setChoice = (e) => {
 7 |     setMyChoice(e.target.dataset.id);
 8 |   };
 9 | 
10 |   return (
11 |     <div className="play">
12 |       <img src={Triangle} alt="" className="triangle" />
13 |       <div className="items">
14 |         <Link to="/game">
15 |           <div
16 |             data-id="paper"
17 |             onClick={setChoice}
18 |             className="icon icon--paper"
19 |           ></div>
20 |         </Link>
21 |         <Link to="/game">
22 |           <div
23 |             data-id="scissors"
24 |             onClick={setChoice}
25 |             className="icon icon--scissors"
26 |           ></div>
27 |         </Link>
28 |         <Link to="/game">
29 |           <div
30 |             data-id="rock"
31 |             onClick={setChoice}
32 |             className="icon icon--rock"
33 |           ></div>
34 |         </Link>
35 |       </div>
36 |     </div>
37 |   );
38 | };
39 | 
40 | export default Play;
41 | 


--------------------------------------------------------------------------------
/src/images/bg-pentagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="329" height="313"><path fill="none" stroke="#000" stroke-width="15" d="M164.5 9.27L9.26 122.06l59.296 182.495h191.888L319.74 122.06 164.5 9.271z" opacity=".2"/></svg>


--------------------------------------------------------------------------------
/src/images/bg-triangle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="305" height="277"><path fill="none" stroke="#000" stroke-width="15" d="M291.5 7.5H4.574c3.119 0 52.416 84.667 147.892 254L291.5 7.5z" opacity=".2"/></svg>


--------------------------------------------------------------------------------
/src/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebucks27/ReactJs-rock-paper-scissors-game/7f2c97a833d5a051f27f01d6119652b3d9d2cdbb/src/images/favicon-32x32.png


--------------------------------------------------------------------------------
/src/images/icon-close.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#3B4262" fill-rule="evenodd" d="M16.97 0l2.122 2.121-7.425 7.425 7.425 7.425-2.121 2.12-7.425-7.424-7.425 7.425L0 16.97l7.425-7.425L0 2.121 2.121 0l7.425 7.425L16.971 0z" opacity=".25"/></svg>


--------------------------------------------------------------------------------
/src/images/icon-lizard.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="63" height="60"><path fill="#3B4262" d="M49.483 2.096c3.229-2 6.324-2.433 8.714-1.219 5.359 2.72 4.583 12.845 2.39 17.232-1.238 2.477-3.432 4.287-6.527 5.387-1.2 3.799-2.884 7.064-5.034 9.764a7.904 7.904 0 005.079 1.837h.09l3.02-2.982c.761-.75 1.994-.751 2.754 0 .76.75.76 1.968 0 2.718l-.267.264h.608c1.075 0 1.947.861 1.947 1.923 0 1.061-.872 1.922-1.947 1.922h-.608l.267.264c.76.75.76 1.968 0 2.719-.38.375-.878.563-1.376.563-.499 0-.997-.188-1.377-.563l-3.022-2.983h-.09a11.823 11.823 0 01-7.724-2.857c-.415.377-.843.738-1.284 1.083-3.732 2.92-8.294 4.617-13.627 5.082a12.08 12.08 0 01.343 6.352l-.02.09 2.325 3.66a1.998 1.998 0 01-.589 2.741 1.936 1.936 0 01-1.057.316 1.953 1.953 0 01-1.651-.912l-.206-.324-.13.605a1.966 1.966 0 01-1.913 1.562 1.95 1.95 0 01-.419-.046 1.984 1.984 0 01-1.498-2.36l.13-.605-.32.209a1.946 1.946 0 01-2.709-.597 1.998 1.998 0 01.59-2.74l3.617-2.353.02-.09a8.073 8.073 0 00-.713-5.394 44.773 44.773 0 01-4.797-.4c-4.684-.634-7.341 1.433-8.044 2.081-5.518 5.093-6.586 14.092-6.596 14.183a1.977 1.977 0 01-1.96 1.757 1.97 1.97 0 01-1.63-.867c-.087-.13-2.164-3.234-3.075-7.615-1.237-5.95.238-11.407 4.266-15.783a20.702 20.702 0 018.738-5.615l-.407.106a7.99 7.99 0 00-3.375-.747h-.09l-3.032 2.983a1.965 1.965 0 01-1.382.563c-.5 0-1-.188-1.382-.563a1.9 1.9 0 010-2.719l.268-.264h-.61c-1.08 0-1.954-.86-1.954-1.922 0-1.062.875-1.922 1.954-1.922h.61l-.268-.264a1.9 1.9 0 010-2.72c.763-.75 2-.75 2.764 0l3.032 2.983h.09a11.87 11.87 0 018.661 3.726l-.217-.223a22.914 22.914 0 015.352.095c4.946.67 8.99-.018 12.113-2.052a12.215 12.215 0 01-2.71-7.7v-.092L30.6 16.287a2.034 2.034 0 010-2.812 1.885 1.885 0 012.725 0l.265.273v-.621c0-1.099.862-1.989 1.926-1.989s1.927.89 1.927 1.989v.62l.265-.272a1.885 1.885 0 012.725 0c1.146 1.183.32 2.483 0 2.812l-2.99 3.086v.091c0 1.878.635 3.673 1.771 5.098 1.412-1.686 2.522-3.808 3.325-6.36-.587-1.625-1.5-5.473.828-9.837 1.22-2.285 3.564-4.687 6.117-6.269z"/></svg>


--------------------------------------------------------------------------------
/src/images/icon-paper.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="49" height="59"><path fill="#3B4262" d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"/></svg>


--------------------------------------------------------------------------------
/src/images/icon-rock.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#3B4262" d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"/></svg>


--------------------------------------------------------------------------------
/src/images/icon-scissors.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="51" height="58"><path fill="#3B4262" d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"/></svg>


--------------------------------------------------------------------------------
/src/images/icon-spock.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="45" height="59"><path fill="#3B4262" d="M44.042 32.422l-.863-.86c-2.062-2.054-5.433-2.5-7.95-1.06l-5.376 3.059 1.12-24.502c0-2.054-1.678-3.726-3.743-3.726-.446 0-.875.079-1.273.222l.134-1.315c0-2.077-1.705-3.767-3.798-3.767-1.936 0-3.559 1.445-3.764 3.299l-3.45 20.75c-.045.282-.536.253-.588.075L10.416 7.962a3.658 3.658 0 00-3.502-2.629c-1.118 0-2.157.501-2.853 1.375a3.592 3.592 0 00-.69 3.08l.792 3.35a3.34 3.34 0 00-1.335.168 3.447 3.447 0 00-2.326 3.818L2.9 30.85c0 5.415.953 9.423 1.754 11.83a13.61 13.61 0 01.687 4.291c0 1.284-.179 2.562-.534 3.796l-1.86 6.482c-.104.366-.03.76.198 1.065.232.304.592.483.975.483h21.97a1.218 1.218 0 001.16-1.6c-.013-.031-1.033-3.169-.067-7.437 1.225-.99 5.514-4.462 7.054-5.862 2.546-2.315 9.521-9.468 9.817-9.772a1.21 1.21 0 00-.012-1.705z"/></svg>


--------------------------------------------------------------------------------
/src/images/image-rules-bonus.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="336" height="330"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF" stop-opacity=".097"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(233 92)"><ellipse cx="51.5" cy="50.172" fill="#B1B4C5" rx="51.5" ry="50.172"/><ellipse cx="51.5" cy="50.172" fill="url(#a)" rx="51.5" ry="50.172"/><g transform="translate(11.965 11.897)"><ellipse cx="39.535" cy="39.31" fill="#E1E4ED" rx="39.535" ry="39.31"/><path fill="#8A90AC" fill-rule="nonzero" d="M54.896 29.133a2.078 2.078 0 00-.874-.14c-.405.028-.732.192-.925.46-1.14 1.595-2.074 4.607-2.827 7.028-.345 1.119-.81 2.616-1.145 3.327-.35-1.991.045-9.287.199-12.096l.002-.046c.107-1.952.121-2.294.098-2.444-.17-1.07-.599-1.774-1.278-2.088-.686-.32-1.577-.178-2.537.399-.481.29-.614 1.288-1.028 5.81l-.001.02c-.228 2.485-.751 8.206-1.395 9.159-.727-1.333-1.728-8.907-2.16-12.185-.301-2.296-.477-3.614-.596-4.012-.249-.834-1.3-1.544-2.34-1.583-.867-.043-1.578.397-1.917 1.162-.635.705-.41 3.045.29 8.586.335 2.637 1.024 8.084.59 8.695-.865-.094-2.35-3.506-4.414-10.144-.58-1.86-.759-2.418-.937-2.663-.35-.853-1.542-1.51-2.61-1.436-.092.006-.18.018-.268.035-.56.11-1.836.625-1.564 2.998.754 3.29 1.573 5.705 2.367 8.05l.016.046c.476 1.404.925 2.731 1.343 4.204.984 3.476.601 5.633.596 5.658-.032.222-.1.357-.204.405a.396.396 0 01-.139.031c-.311.022-.78-.185-1.02-.319-.551-1.051-3.293-6.062-5.778-6.757l-.09-.026-.09.008c-.911.086-1.581.43-1.991 1.023-.649.937-.38 2.13-.315 2.369l.036.086c.02.036 2.013 3.664 2.322 5.352.266 1.447 1.642 3.015 2.748 4.275l.046.051c.36.413.672.769.917 1.099 3.21 3.343 8.287 6.156 8.328 6.179.633.466.985.917 1.023 1.306a.566.566 0 01-.114.41l-.11.116.702.681 13.392-.94.571-2.613c1.766-7.38 1.397-13.672 1.391-13.714.007-.232.502-2.47.9-4.28l.011-.046c.794-3.603 1.78-8.087 1.97-9.793.082-.73-.386-1.399-1.19-1.703z"/></g></g><g transform="translate(0 92)"><ellipse cx="51.5" cy="52.5" fill="#B1B4C5" rx="51.5" ry="52.5"/><ellipse cx="51.5" cy="50.172" fill="url(#a)" rx="51.5" ry="50.172"/><g transform="translate(11.965 11.897)"><ellipse cx="39.535" cy="39.31" fill="#E1E4ED" rx="39.535" ry="39.31"/><path fill="#8A90AC" fill-rule="nonzero" d="M56.968 42.321l-.613-.61c-1.465-1.456-3.86-1.774-5.647-.752l-3.82 2.17.797-17.382a2.654 2.654 0 00-2.659-2.644c-.317 0-.621.056-.904.158l.095-.933c0-1.474-1.211-2.673-2.698-2.673-1.375 0-2.528 1.025-2.674 2.34l-2.45 14.721c-.032.2-.381.18-.418.054l-2.895-11.802a2.598 2.598 0 00-2.487-1.865c-.794 0-1.533.356-2.027.975a2.546 2.546 0 00-.49 2.186l.563 2.376a2.376 2.376 0 00-.949.12 2.445 2.445 0 00-1.652 2.708l1.703 9.739c0 3.842.678 6.685 1.246 8.392.324.974.488 1.999.488 3.045 0 .911-.127 1.818-.38 2.693l-1.32 4.599a.863.863 0 00.833 1.098h15.607a.866.866 0 00.823-1.135c-.009-.022-.734-2.248-.048-5.276.87-.703 3.917-3.166 5.011-4.16 1.809-1.642 6.764-6.716 6.974-6.932a.858.858 0 00-.009-1.21z"/></g></g><g transform="translate(117)"><ellipse cx="51.5" cy="52.5" fill="#B1B4C5" rx="51.5" ry="52.5"/><ellipse cx="51.5" cy="50.172" fill="url(#a)" rx="51.5" ry="50.172"/><g transform="translate(11.965 11.897)"><ellipse cx="39.535" cy="39.31" fill="#E1E4ED" rx="39.535" ry="39.31"/><path fill="#8A90AC" fill-rule="nonzero" d="M29.214 38.974l4.271-5.97c-1.775-.295-5.035-.36-7.705 2.295-4.208 4.184-5.913 13.225-6.268 15.413l10.696 10.636c1.926-.164 10.452-1.296 18.667-9.464.087-.177 2.088-1.647.452-3.274-.78-.776-2.073-.762-2.871.032a1.01 1.01 0 01-1.436.014.996.996 0 01.014-1.428l2.903-2.886c1.476-1.467.085-3.941-1.974-3.347l-2.377 2.023a1.022 1.022 0 01-1.435-.099c-.369-.424-.29-1.067.13-1.429 8.301-7.242 7.09-6.37 12.43-11.347 1.996-1.652-.515-4.575-2.481-2.901L39.31 38.794a1.01 1.01 0 01-1.322-.014c-.427-.367-.437-.895-.158-1.312l9.012-13.931c1.318-1.774-1.275-3.744-2.663-1.956l-13.325 18.53a1.009 1.009 0 01-1.41.246.976.976 0 01-.23-1.383z"/></g></g><g transform="translate(187 225)"><ellipse cx="51.5" cy="52.5" fill="#B1B4C5" rx="51.5" ry="52.5"/><ellipse cx="51.5" cy="50.172" fill="url(#a)" rx="51.5" ry="50.172"/><g transform="translate(11.965 11.897)"><ellipse cx="39.535" cy="39.31" fill="#E1E4ED" rx="39.535" ry="39.31"/><path fill="#8A90AC" fill-rule="nonzero" d="M54.85 33.665c-.455-5.744-6.914-5.157-6.914-5.157-2.726-4.8-6.984-1.323-6.984-1.323-3.272-4.704-7.374-.345-7.374-.345-7.072-.762-6.798 5.013-6.798 5.013-.167 1.836.996 7.515.996 7.515-1.049-3.273-3.325-.556-3.325-.556-2.797 4.312-.691 6.673-.691 6.673 3.785 4.431 11.854 9.75 11.854 9.75 2.92 1.671 1.685 3.161 1.685 3.161l17.67-2.916.407-3.346c2.686-8.114-.525-18.47-.525-18.47z"/></g></g><g transform="translate(46 225)"><ellipse cx="51.5" cy="52.5" fill="#B1B4C5" rx="51.5" ry="52.5"/><ellipse cx="51.5" cy="50.172" fill="url(#a)" rx="51.5" ry="50.172"/><g transform="translate(11.965 11.897)"><ellipse cx="39.535" cy="39.31" fill="#E1E4ED" rx="39.535" ry="39.31"/><path fill="#8A90AC" fill-rule="nonzero" d="M52.31 21.516c2.294-1.419 4.492-1.726 6.19-.865 3.806 1.93 3.255 9.113 1.698 12.226-.88 1.757-2.438 3.04-4.637 3.821-.852 2.695-2.048 5.011-3.575 6.927a5.615 5.615 0 003.607 1.304h.064l2.146-2.116a1.397 1.397 0 011.956 0 1.35 1.35 0 010 1.929l-.19.187H60c.764 0 1.383.61 1.383 1.364 0 .753-.62 1.363-1.383 1.363h-.432l.19.188a1.35 1.35 0 010 1.928c-.27.267-.624.4-.978.4s-.708-.133-.978-.4l-2.146-2.116h-.064a8.404 8.404 0 01-5.487-2.027 15.99 15.99 0 01-.913.77c-2.65 2.07-5.892 3.275-9.68 3.604.478 1.435.571 2.99.244 4.507l-.013.063 1.651 2.598a1.416 1.416 0 01-.418 1.944 1.387 1.387 0 01-1.924-.423l-.146-.23-.093.43a1.396 1.396 0 01-1.656 1.075 1.407 1.407 0 01-1.065-1.674l.093-.43-.228.148c-.647.42-1.508.231-1.924-.423a1.416 1.416 0 01.419-1.944l2.57-1.67.014-.063a5.721 5.721 0 00-.507-3.827 31.796 31.796 0 01-3.407-.283c-3.328-.45-5.215 1.016-5.714 1.476-3.92 3.613-4.679 9.998-4.686 10.062a1.403 1.403 0 01-1.391 1.247 1.4 1.4 0 01-1.158-.615c-.063-.093-1.538-2.295-2.185-5.403-.879-4.22.169-8.093 3.03-11.197a14.707 14.707 0 016.21-3.985l-.292.076a5.682 5.682 0 00-2.397-.53h-.064l-2.154 2.116c-.271.267-.627.4-.982.4s-.71-.133-.982-.4a1.347 1.347 0 010-1.928l.191-.188h-.433c-.767 0-1.389-.61-1.389-1.363 0-.754.622-1.364 1.389-1.364h.433l-.19-.188a1.347 1.347 0 010-1.928 1.406 1.406 0 011.963 0l2.154 2.116h.064c2.345 0 4.568.96 6.152 2.643l-.154-.158a16.297 16.297 0 013.802.067c3.513.475 6.386-.013 8.604-1.456a8.658 8.658 0 01-1.924-5.463v-.065l-2.124-2.19a1.442 1.442 0 010-1.995 1.34 1.34 0 011.936 0l.187.194v-.44c0-.78.613-1.411 1.37-1.411.755 0 1.368.631 1.368 1.41v.441l.188-.194a1.34 1.34 0 011.935 0c.815.84.227 1.762 0 1.996l-2.123 2.189v.065c0 1.332.45 2.606 1.259 3.618 1.002-1.198 1.79-2.703 2.36-4.514-.417-1.153-1.065-3.882.589-6.978.866-1.622 2.531-3.326 4.345-4.448z"/></g></g><g fill="#B1B4C5" transform="rotate(-40 152.162 -62.778)"><rect width="32.692" height="2.667" y="6.667" rx="1.333"/><path d="M27.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M25.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><g fill="#B1B4C5" transform="scale(1 -1) rotate(-40 11.858 -344.091)"><rect width="32.692" height="2.667" y="6.667" rx="1.333"/><path d="M27.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M25.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><g fill="#B1B4C5" transform="rotate(127 100.649 180.558)"><rect width="32.692" height="2.667" y="6.667" rx="1.333"/><path d="M27.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M25.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><g fill="#B1B4C5" transform="matrix(-1 0 0 1 186 297)"><rect width="32.692" height="2.667" y="6.667" rx="1.333"/><path d="M27.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M25.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><g fill="#B1B4C5" transform="scale(-1 1) rotate(-53 195.597 178.185)"><rect width="32.692" height="2.667" y="6.667" rx="1.333"/><path d="M27.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M25.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><g fill="#B1B4C5"><g transform="matrix(-1 0 0 1 212 131)"><rect width="85" height="2.667" x=".692" y="6.667" rx="1.333"/><path d="M80.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M78.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><text font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="6" font-style="condensed" font-weight="bold" transform="translate(124 131)"><tspan x="36" y="14">BEATS</tspan></text><g transform="rotate(40 -169.505 247.617)"><rect width="85" height="2.667" x=".692" y="6.667" rx="1.333"/><path d="M80.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M78.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><text font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="6" font-style="condensed" font-weight="bold" transform="rotate(40 -161.263 250.617)"><tspan x="36" y="6">BEATS</tspan></text><g transform="rotate(-40 381.505 -93.07)"><rect width="85" height="2.667" x=".692" y="6.667" rx="1.333"/><path d="M80.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M78.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><text font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="6" font-style="condensed" font-weight="bold" transform="rotate(-40 373.263 -90.07)"><tspan x="36" y="6">BEATS</tspan></text><g><g transform="rotate(-110 176.867 31.934)"><rect width="85" height="2.667" x=".692" y="6.667" rx="1.333"/><path d="M80.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M78.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><text font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="6" font-style="condensed" font-weight="bold" transform="rotate(-110 174.766 34.934)"><tspan x="36" y="6">BEATS</tspan></text></g><g><g transform="rotate(110 35.133 118.76)"><rect width="85" height="2.667" x=".692" y="6.667" rx="1.333"/><path d="M80.437 1.343l5.617 5.819c.47.487.466 1.26-.009 1.744a1.187 1.187 0 01-1.7-.009l-5.617-5.819a1.249 1.249 0 01.009-1.744 1.187 1.187 0 011.7.009z"/><path d="M78.728 12.922l5.617-5.82a1.187 1.187 0 011.7-.008c.475.483.48 1.257.009 1.744l-5.617 5.82a1.187 1.187 0 01-1.7.008 1.249 1.249 0 01-.009-1.744z"/></g><text font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="6" font-style="condensed" font-weight="bold" transform="rotate(110 37.234 121.76)"><tspan x="36" y="6">BEATS</tspan></text></g></g><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="11" font-style="condensed" font-weight="bold"><tspan x="252" y="64">BEATS</tspan></text><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="11" font-style="condensed" font-weight="bold"><tspan x="55" y="64">BEATS</tspan></text><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="11" font-style="condensed" font-weight="bold"><tspan x="305" y="225">BEATS</tspan></text><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="11" font-style="condensed" font-weight="bold"><tspan x="1" y="225">BEATS</tspan></text><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="11" font-style="condensed" font-weight="bold"><tspan x="154" y="328">BEATS</tspan></text></g></svg>


--------------------------------------------------------------------------------
/src/images/image-rules.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="304" height="270"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF" stop-opacity=".097"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF" stop-opacity=".097"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><ellipse cx="53.189" cy="54.815" fill="#B1B4C5" rx="53.189" ry="54.815"/><ellipse cx="53.189" cy="52.385" fill="url(#a)" rx="53.189" ry="52.385"/><g transform="translate(12.357 12.421)"><ellipse cx="40.832" cy="41.044" fill="#E1E4ED" rx="40.832" ry="41.044"/><path fill="#8A90AC" fill-rule="nonzero" d="M56.697 30.417a2.125 2.125 0 00-.904-.146c-.417.03-.755.201-.955.481-1.177 1.666-2.141 4.81-2.919 7.337-.357 1.169-.836 2.733-1.183 3.475-.362-2.08.047-9.697.206-12.63l.002-.047c.11-2.038.125-2.396.1-2.553-.174-1.118-.618-1.852-1.319-2.18-.708-.333-1.629-.186-2.62.417-.497.303-.635 1.345-1.061 6.067l-.002.02c-.235 2.595-.776 8.568-1.441 9.563-.75-1.392-1.784-9.3-2.23-12.722-.312-2.397-.494-3.774-.616-4.19-.257-.87-1.343-1.611-2.418-1.653-.895-.044-1.629.415-1.98 1.214-.655.736-.423 3.179.302 8.964.344 2.754 1.056 8.441.608 9.08-.893-.099-2.427-3.661-4.559-10.592-.598-1.942-.783-2.525-.967-2.78-.362-.891-1.593-1.578-2.696-1.5a2.314 2.314 0 00-.277.036c-.578.116-1.896.653-1.615 3.13.779 3.435 1.624 5.957 2.445 8.405l.016.05c.491 1.465.955 2.85 1.387 4.388 1.016 3.63.621 5.882.616 5.907-.034.232-.105.374-.211.423a.405.405 0 01-.143.033c-.322.023-.805-.193-1.055-.333-.568-1.098-3.4-6.33-5.967-7.055L25.15 41l-.093.008c-.942.09-1.634.45-2.057 1.068-.67.978-.393 2.224-.325 2.474l.038.09c.02.037 2.079 3.825 2.397 5.587.275 1.511 1.696 3.148 2.838 4.464l.047.054c.373.43.695.802.948 1.146 3.316 3.492 8.558 6.428 8.601 6.452.654.487 1.018.958 1.056 1.363a.595.595 0 01-.117.43l-.114.12.725.711 13.832-.98.59-2.73c1.823-7.705 1.442-14.275 1.436-14.319.007-.242.518-2.58.93-4.468l.011-.048c.82-3.763 1.838-8.444 2.034-10.225.085-.761-.398-1.46-1.23-1.779z"/></g><g transform="translate(196)"><ellipse cx="53.686" cy="54.815" fill="#B1B4C5" rx="53.686" ry="54.815"/><ellipse cx="53.686" cy="52.385" fill="url(#b)" rx="53.686" ry="52.385"/><g transform="translate(12.473 12.421)"><ellipse cx="41.214" cy="41.044" fill="#E1E4ED" rx="41.214" ry="41.044"/><path fill="#8A90AC" fill-rule="nonzero" d="M30.455 40.692l4.451-6.234c-1.85-.307-5.248-.375-8.031 2.397-4.388 4.37-6.165 13.809-6.535 16.093l11.15 11.105c2.008-.17 10.896-1.353 19.46-9.881.09-.184 2.177-1.72.471-3.418-.814-.81-2.162-.796-2.993.033a1.051 1.051 0 01-1.497.015 1.04 1.04 0 01.015-1.49l3.026-3.014c1.538-1.532.089-4.116-2.058-3.495l-2.477 2.112a1.065 1.065 0 01-1.497-.103c-.384-.443-.302-1.114.135-1.492 8.654-7.562 7.39-6.65 12.958-11.848 2.08-1.725-.536-4.776-2.586-3.03L40.978 40.506a1.051 1.051 0 01-1.378-.015c-.445-.383-.455-.934-.164-1.37l9.395-14.545c1.373-1.852-1.33-3.91-2.776-2.042L32.164 41.881a1.05 1.05 0 01-1.47.255 1.02 1.02 0 01-.24-1.444z"/></g></g><g transform="translate(98 160)"><ellipse cx="53.686" cy="54.815" fill="#B1B4C5" rx="53.686" ry="54.815"/><ellipse cx="53.686" cy="52.385" fill="url(#b)" rx="53.686" ry="52.385"/><g transform="translate(12.473 12.421)"><ellipse cx="41.214" cy="41.044" fill="#E1E4ED" rx="41.214" ry="41.044"/><path fill="#8A90AC" fill-rule="nonzero" d="M57.179 35.15c-.475-5.997-7.208-5.385-7.208-5.385-2.842-5.01-7.281-1.381-7.281-1.381-3.41-4.911-7.687-.36-7.687-.36-7.373-.796-7.087 5.234-7.087 5.234-.173 1.917 1.04 7.847 1.04 7.847-1.094-3.418-3.467-.581-3.467-.581-2.917 4.502-.721 6.967-.721 6.967 3.947 4.626 12.357 10.18 12.357 10.18 3.046 1.745 1.757 3.3 1.757 3.3l18.42-3.044.424-3.494c2.8-8.472-.547-19.284-.547-19.284z"/></g></g><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="13" font-style="condensed" font-weight="bold"><tspan x="134" y="31">BEATS</tspan></text><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="13" font-style="condensed" font-weight="bold"><tspan x="40" y="147">BEATS</tspan></text><text fill="#B1B4C5" font-family="BarlowSemiCondensed-Bold, Barlow Semi Condensed" font-size="13" font-style="condensed" font-weight="bold"><tspan x="235" y="147">BEATS</tspan></text><g fill="#B1B4C5" transform="matrix(-1 0 0 1 177 39)"><rect width="50" height="4" y="10" rx="2"/><path d="M41.963 2.015l8.59 8.728c.716.727.71 1.896-.013 2.616a1.833 1.833 0 01-2.6-.013l-8.59-8.728a1.855 1.855 0 01.013-2.616 1.833 1.833 0 012.6.013z"/><path d="M39.35 19.382l8.59-8.728a1.833 1.833 0 012.6-.013c.723.72.729 1.889.013 2.616l-8.59 8.728a1.833 1.833 0 01-2.6.013 1.855 1.855 0 01-.013-2.616z"/></g><g fill="#B1B4C5" transform="scale(1 -1) rotate(-55 -82.574 -131.195)"><rect width="50" height="4" y="10" rx="2"/><path d="M41.963 2.015l8.59 8.728c.716.727.71 1.896-.013 2.616a1.833 1.833 0 01-2.6-.013l-8.59-8.728a1.855 1.855 0 01.013-2.616 1.833 1.833 0 012.6.013z"/><path d="M39.35 19.382l8.59-8.728a1.833 1.833 0 012.6-.013c.723.72.729 1.889.013 2.616l-8.59 8.728a1.833 1.833 0 01-2.6.013 1.855 1.855 0 01-.013-2.616z"/></g><g fill="#B1B4C5" transform="rotate(-55 240.022 -103.651)"><rect width="50" height="4" y="10" rx="2"/><path d="M41.963 2.015l8.59 8.728c.716.727.71 1.896-.013 2.616a1.833 1.833 0 01-2.6-.013l-8.59-8.728a1.855 1.855 0 01.013-2.616 1.833 1.833 0 012.6.013z"/><path d="M39.35 19.382l8.59-8.728a1.833 1.833 0 012.6-.013c.723.72.729 1.889.013 2.616l-8.59 8.728a1.833 1.833 0 01-2.6.013 1.855 1.855 0 01-.013-2.616z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/images/logo-bonus.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="115" height="114"><defs><filter id="a" width="111%" height="111.1%" x="-5.5%" y="-2.8%" filterUnits="objectBoundingBox"><feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.196705638 0"/></filter><path id="b" d="M37.096 42a.324.324 0 00.238-.098.324.324 0 00.098-.238V34.02c0-.093.047-.14.14-.14h1.764c.056 0 .103.037.14.112l2.828 7.728c.056.187.187.28.392.28h3.416c.205 0 .308-.084.308-.252a.312.312 0 00-.028-.14L43.2 33.572c-.037-.093-.01-.159.084-.196a4.812 4.812 0 002.212-1.96c.523-.877.784-1.913.784-3.108 0-1.157-.233-2.184-.7-3.08a5.042 5.042 0 00-1.988-2.086c-.859-.495-1.839-.742-2.94-.742H33.82a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm2.912-11.144h-2.436c-.093 0-.14-.047-.14-.14v-4.788c0-.093.047-.14.14-.14h2.436c.69 0 1.25.229 1.68.686.43.457.644 1.078.644 1.862 0 .765-.215 1.377-.644 1.834-.43.457-.99.686-1.68.686zm14.84 11.396c1.288 0 2.427-.261 3.416-.784a5.58 5.58 0 002.296-2.212c.541-.952.812-2.063.812-3.332v-7.448c0-1.25-.27-2.352-.812-3.304a5.58 5.58 0 00-2.296-2.212c-.99-.523-2.128-.784-3.416-.784-1.288 0-2.422.261-3.402.784a5.602 5.602 0 00-2.282 2.212c-.541.952-.812 2.053-.812 3.304v7.448c0 1.27.27 2.38.812 3.332a5.602 5.602 0 002.282 2.212c.98.523 2.114.784 3.402.784zm0-3.388c-.765 0-1.381-.257-1.848-.77-.467-.513-.7-1.18-.7-2.002v-7.728c0-.84.233-1.517.7-2.03.467-.513 1.083-.77 1.848-.77.784 0 1.41.257 1.876.77.467.513.7 1.19.7 2.03v7.728c0 .821-.233 1.489-.7 2.002-.467.513-1.092.77-1.876.77zm15.232 3.36c1.27 0 2.39-.247 3.36-.742a5.362 5.362 0 002.254-2.114c.532-.915.798-1.97.798-3.164v-.084a.324.324 0 00-.098-.238.324.324 0 00-.238-.098l-3.276-.14c-.224 0-.336.103-.336.308v.364c0 .765-.224 1.377-.672 1.834-.448.457-1.045.686-1.792.686-.747 0-1.344-.229-1.792-.686-.448-.457-.672-1.069-.672-1.834v-8.204c0-.765.224-1.381.672-1.848.448-.467 1.045-.7 1.792-.7.747 0 1.344.233 1.792.7.448.467.672 1.083.672 1.848v.364c0 .205.112.308.336.308l3.276-.14a.305.305 0 00.238-.112.373.373 0 00.098-.252v-.14c0-1.195-.266-2.24-.798-3.136-.532-.896-1.283-1.591-2.254-2.086-.97-.495-2.09-.742-3.36-.742s-2.39.252-3.36.756a5.426 5.426 0 00-2.254 2.142c-.532.924-.798 1.993-.798 3.206v7.784c0 1.232.266 2.315.798 3.248a5.401 5.401 0 002.254 2.156c.97.504 2.09.756 3.36.756zM82.624 42a.324.324 0 00.238-.098.324.324 0 00.098-.238v-5.6a.43.43 0 01.056-.168l1.26-1.82c.037-.056.075-.084.112-.084.037 0 .065.028.084.084l3.976 7.672c.093.168.224.252.392.252h3.584c.205 0 .308-.075.308-.224a.43.43 0 00-.056-.168l-5.488-10.584a.348.348 0 010-.196l5.18-8.036c.075-.112.089-.205.042-.28-.047-.075-.135-.112-.266-.112h-3.612a.439.439 0 00-.392.224l-5.012 7.616c-.019.056-.051.075-.098.056-.047-.019-.07-.056-.07-.112v-7.448a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.276a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zM37.012 64a.324.324 0 00.238-.098.324.324 0 00.098-.238v-7.28c0-.093.047-.14.14-.14h3.024c1.12 0 2.114-.243 2.982-.728a5.038 5.038 0 002.016-2.058c.476-.887.714-1.909.714-3.066 0-1.176-.238-2.221-.714-3.136a5.158 5.158 0 00-2.016-2.128c-.868-.504-1.862-.756-2.982-.756h-6.776a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.956c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm2.856-10.892h-2.38c-.093 0-.14-.047-.14-.14v-5.04c0-.093.047-.14.14-.14h2.38c.728 0 1.311.243 1.75.728.439.485.658 1.139.658 1.96 0 .803-.22 1.442-.658 1.918-.439.476-1.022.714-1.75.714zM51.152 64c.187 0 .308-.093.364-.28l.644-2.744c.019-.075.065-.112.14-.112h5.236c.075 0 .121.037.14.112l.644 2.744c.056.187.187.28.392.28h3.416c.205 0 .308-.084.308-.252l-.028-.112-5.04-18.956c-.056-.187-.187-.28-.392-.28h-4.06c-.205 0-.336.093-.392.28l-5.04 18.956c-.056.243.037.364.28.364h3.388zm5.6-6.188h-3.696a.186.186 0 01-.112-.042c-.037-.028-.047-.07-.028-.126l1.876-8.12c.019-.075.047-.112.084-.112.037 0 .065.037.084.112l1.932 8.12c.019.056.01.098-.028.126a.186.186 0 01-.112.042zM68.036 64a.324.324 0 00.238-.098.324.324 0 00.098-.238v-7.28c0-.093.047-.14.14-.14h3.024c1.12 0 2.114-.243 2.982-.728a5.038 5.038 0 002.016-2.058c.476-.887.714-1.909.714-3.066 0-1.176-.238-2.221-.714-3.136a5.158 5.158 0 00-2.016-2.128c-.868-.504-1.862-.756-2.982-.756H64.76a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.956c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm2.856-10.892h-2.38c-.093 0-.14-.047-.14-.14v-5.04c0-.093.047-.14.14-.14h2.38c.728 0 1.311.243 1.75.728.439.485.658 1.139.658 1.96 0 .803-.22 1.442-.658 1.918-.439.476-1.022.714-1.75.714zM90.968 64a.324.324 0 00.238-.098.324.324 0 00.098-.238v-2.716a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-7.504c-.093 0-.14-.047-.14-.14v-4.508c0-.093.047-.14.14-.14h4.676a.324.324 0 00.238-.098.324.324 0 00.098-.238v-2.716a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-4.676c-.093 0-.14-.047-.14-.14v-4.368c0-.093.047-.14.14-.14h7.504a.324.324 0 00.238-.098.324.324 0 00.098-.238v-2.716a.324.324 0 00-.098-.238.324.324 0 00-.238-.098H79.712a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h11.256zm6.328 0a.324.324 0 00.238-.098.324.324 0 00.098-.238V56.02c0-.093.047-.14.14-.14h1.764c.056 0 .103.037.14.112l2.828 7.728c.056.187.187.28.392.28h3.416c.205 0 .308-.084.308-.252a.312.312 0 00-.028-.14l-3.192-8.036c-.037-.093-.01-.159.084-.196a4.812 4.812 0 002.212-1.96c.523-.877.784-1.913.784-3.108 0-1.157-.233-2.184-.7-3.08a5.042 5.042 0 00-1.988-2.086c-.859-.495-1.839-.742-2.94-.742H94.02a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm2.912-11.144h-2.436c-.093 0-.14-.047-.14-.14v-4.788c0-.093.047-.14.14-.14h2.436c.69 0 1.25.229 1.68.686.43.457.644 1.078.644 1.862 0 .765-.215 1.377-.644 1.834-.43.457-.99.686-1.68.686zM39.364 86.224c1.904 0 3.43-.5 4.578-1.498 1.148-.999 1.722-2.347 1.722-4.046 0-.952-.205-1.764-.616-2.436a5.687 5.687 0 00-1.526-1.666c-.607-.439-1.451-.957-2.534-1.554l-.588-.336c-.952-.467-1.661-.845-2.128-1.134-.467-.29-.812-.593-1.036-.91a1.892 1.892 0 01-.336-1.12c0-.616.191-1.097.574-1.442.383-.345.91-.518 1.582-.518.803 0 1.437.224 1.904.672.467.448.7 1.008.7 1.68v.504c0 .093.033.173.098.238a.324.324 0 00.238.098h3.22a.324.324 0 00.238-.098.324.324 0 00.098-.238v-.56c0-1.12-.27-2.11-.812-2.968-.541-.859-1.297-1.526-2.268-2.002-.97-.476-2.081-.714-3.332-.714-1.195 0-2.259.22-3.192.658-.933.439-1.657 1.064-2.17 1.876-.513.812-.77 1.76-.77 2.842 0 1.083.252 2.007.756 2.772a6.714 6.714 0 001.82 1.876c.71.485 1.624 1.008 2.744 1.568.915.467 1.591.835 2.03 1.106.439.27.78.56 1.022.868.243.308.364.677.364 1.106 0 .579-.191 1.055-.574 1.428-.383.373-.938.56-1.666.56-.821 0-1.475-.22-1.96-.658a2.118 2.118 0 01-.728-1.638v-.532a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.22a.324.324 0 00-.238.098.324.324 0 00-.098.238v.728c0 1.083.266 2.04.798 2.87.532.83 1.283 1.475 2.254 1.932.97.457 2.1.686 3.388.686zm14.756 0c1.27 0 2.39-.247 3.36-.742a5.362 5.362 0 002.254-2.114c.532-.915.798-1.97.798-3.164v-.084a.324.324 0 00-.098-.238.324.324 0 00-.238-.098l-3.276-.14c-.224 0-.336.103-.336.308v.364c0 .765-.224 1.377-.672 1.834-.448.457-1.045.686-1.792.686-.747 0-1.344-.229-1.792-.686-.448-.457-.672-1.069-.672-1.834v-8.204c0-.765.224-1.381.672-1.848.448-.467 1.045-.7 1.792-.7.747 0 1.344.233 1.792.7.448.467.672 1.083.672 1.848v.364c0 .205.112.308.336.308l3.276-.14a.305.305 0 00.238-.112.373.373 0 00.098-.252v-.14c0-1.195-.266-2.24-.798-3.136-.532-.896-1.283-1.591-2.254-2.086-.97-.495-2.09-.742-3.36-.742s-2.39.252-3.36.756a5.426 5.426 0 00-2.254 2.142c-.532.924-.798 1.993-.798 3.206v7.784c0 1.232.266 2.315.798 3.248a5.401 5.401 0 002.254 2.156c.97.504 2.09.756 3.36.756zM66.664 86a.324.324 0 00.238-.098.324.324 0 00.098-.238V66.736a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.276a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm9.156.224c1.904 0 3.43-.5 4.578-1.498 1.148-.999 1.722-2.347 1.722-4.046 0-.952-.205-1.764-.616-2.436a5.687 5.687 0 00-1.526-1.666c-.607-.439-1.451-.957-2.534-1.554l-.588-.336c-.952-.467-1.661-.845-2.128-1.134-.467-.29-.812-.593-1.036-.91a1.892 1.892 0 01-.336-1.12c0-.616.191-1.097.574-1.442.383-.345.91-.518 1.582-.518.803 0 1.437.224 1.904.672.467.448.7 1.008.7 1.68v.504c0 .093.033.173.098.238a.324.324 0 00.238.098h3.22a.324.324 0 00.238-.098.324.324 0 00.098-.238v-.56c0-1.12-.27-2.11-.812-2.968-.541-.859-1.297-1.526-2.268-2.002-.97-.476-2.081-.714-3.332-.714-1.195 0-2.259.22-3.192.658-.933.439-1.657 1.064-2.17 1.876-.513.812-.77 1.76-.77 2.842 0 1.083.252 2.007.756 2.772a6.714 6.714 0 001.82 1.876c.71.485 1.624 1.008 2.744 1.568.915.467 1.591.835 2.03 1.106.439.27.78.56 1.022.868.243.308.364.677.364 1.106 0 .579-.191 1.055-.574 1.428-.383.373-.938.56-1.666.56-.821 0-1.475-.22-1.96-.658a2.118 2.118 0 01-.728-1.638v-.532a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.22a.324.324 0 00-.238.098.324.324 0 00-.098.238v.728c0 1.083.266 2.04.798 2.87.532.83 1.283 1.475 2.254 1.932.97.457 2.1.686 3.388.686zm14.56 0c1.904 0 3.43-.5 4.578-1.498 1.148-.999 1.722-2.347 1.722-4.046 0-.952-.205-1.764-.616-2.436a5.687 5.687 0 00-1.526-1.666c-.607-.439-1.451-.957-2.534-1.554l-.588-.336c-.952-.467-1.661-.845-2.128-1.134-.467-.29-.812-.593-1.036-.91a1.892 1.892 0 01-.336-1.12c0-.616.191-1.097.574-1.442.383-.345.91-.518 1.582-.518.803 0 1.437.224 1.904.672.467.448.7 1.008.7 1.68v.504c0 .093.033.173.098.238a.324.324 0 00.238.098h3.22a.324.324 0 00.238-.098.324.324 0 00.098-.238v-.56c0-1.12-.27-2.11-.812-2.968-.541-.859-1.297-1.526-2.268-2.002-.97-.476-2.081-.714-3.332-.714-1.195 0-2.259.22-3.192.658-.933.439-1.657 1.064-2.17 1.876-.513.812-.77 1.76-.77 2.842 0 1.083.252 2.007.756 2.772A6.714 6.714 0 0086.6 76.2c.71.485 1.624 1.008 2.744 1.568.915.467 1.591.835 2.03 1.106.439.27.78.56 1.022.868.243.308.364.677.364 1.106 0 .579-.191 1.055-.574 1.428-.383.373-.938.56-1.666.56-.821 0-1.475-.22-1.96-.658a2.118 2.118 0 01-.728-1.638v-.532a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.22a.324.324 0 00-.238.098.324.324 0 00-.098.238v.728c0 1.083.266 2.04.798 2.87.532.83 1.283 1.475 2.254 1.932.97.457 2.1.686 3.388.686zm14.84.028c1.288 0 2.427-.261 3.416-.784a5.58 5.58 0 002.296-2.212c.541-.952.812-2.063.812-3.332v-7.448c0-1.25-.27-2.352-.812-3.304a5.58 5.58 0 00-2.296-2.212c-.99-.523-2.128-.784-3.416-.784-1.288 0-2.422.261-3.402.784a5.602 5.602 0 00-2.282 2.212c-.541.952-.812 2.053-.812 3.304v7.448c0 1.27.27 2.38.812 3.332a5.602 5.602 0 002.282 2.212c.98.523 2.114.784 3.402.784zm0-3.388c-.765 0-1.381-.257-1.848-.77-.467-.513-.7-1.18-.7-2.002v-7.728c0-.84.233-1.517.7-2.03.467-.513 1.083-.77 1.848-.77.784 0 1.41.257 1.876.77.467.513.7 1.19.7 2.03v7.728c0 .821-.233 1.489-.7 2.002-.467.513-1.092.77-1.876.77zM117.988 86a.324.324 0 00.238-.098.324.324 0 00.098-.238V78.02c0-.093.047-.14.14-.14h1.764c.056 0 .103.037.14.112l2.828 7.728c.056.187.187.28.392.28h3.416c.205 0 .308-.084.308-.252a.312.312 0 00-.028-.14l-3.192-8.036c-.037-.093-.01-.159.084-.196a4.812 4.812 0 002.212-1.96c.523-.877.784-1.913.784-3.108 0-1.157-.233-2.184-.7-3.08a5.042 5.042 0 00-1.988-2.086c-.859-.495-1.839-.742-2.94-.742h-6.832a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm2.912-11.144h-2.436c-.093 0-.14-.047-.14-.14v-4.788c0-.093.047-.14.14-.14h2.436c.69 0 1.25.229 1.68.686.43.457.644 1.078.644 1.862 0 .765-.215 1.377-.644 1.834-.43.457-.99.686-1.68.686zm14.56 11.368c1.904 0 3.43-.5 4.578-1.498 1.148-.999 1.722-2.347 1.722-4.046 0-.952-.205-1.764-.616-2.436a5.687 5.687 0 00-1.526-1.666c-.607-.439-1.451-.957-2.534-1.554l-.588-.336c-.952-.467-1.661-.845-2.128-1.134-.467-.29-.812-.593-1.036-.91a1.892 1.892 0 01-.336-1.12c0-.616.191-1.097.574-1.442.383-.345.91-.518 1.582-.518.803 0 1.437.224 1.904.672.467.448.7 1.008.7 1.68v.504c0 .093.033.173.098.238a.324.324 0 00.238.098h3.22a.324.324 0 00.238-.098.324.324 0 00.098-.238v-.56c0-1.12-.27-2.11-.812-2.968-.541-.859-1.297-1.526-2.268-2.002-.97-.476-2.081-.714-3.332-.714-1.195 0-2.259.22-3.192.658-.933.439-1.657 1.064-2.17 1.876-.513.812-.77 1.76-.77 2.842 0 1.083.252 2.007.756 2.772a6.714 6.714 0 001.82 1.876c.71.485 1.624 1.008 2.744 1.568.915.467 1.591.835 2.03 1.106.439.27.78.56 1.022.868.243.308.364.677.364 1.106 0 .579-.191 1.055-.574 1.428-.383.373-.938.56-1.666.56-.821 0-1.475-.22-1.96-.658a2.118 2.118 0 01-.728-1.638v-.532a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.22a.324.324 0 00-.238.098.324.324 0 00-.098.238v.728c0 1.083.266 2.04.798 2.87.532.83 1.283 1.475 2.254 1.932.97.457 2.1.686 3.388.686zM45.076 108a.324.324 0 00.238-.098.324.324 0 00.098-.238v-2.716a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-7.504c-.093 0-.14-.047-.14-.14V88.736a.324.324 0 00-.098-.238.324.324 0 00-.238-.098H33.82a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h11.256zm5.992 0a.324.324 0 00.238-.098.324.324 0 00.098-.238V88.736a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.276a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm14.168 0a.324.324 0 00.238-.098.324.324 0 00.098-.238v-2.716a.324.324 0 00-.098-.238.324.324 0 00-.238-.098H58.04c-.112 0-.14-.056-.084-.168l7.504-12.348a.833.833 0 00.112-.42v-2.94a.324.324 0 00-.098-.238.324.324 0 00-.238-.098H53.924a.324.324 0 00-.238.098.324.324 0 00-.098.238v2.716c0 .093.033.173.098.238a.324.324 0 00.238.098h7.196c.112 0 .14.056.084.168L53.7 104.304a.833.833 0 00-.112.42v2.94c0 .093.033.173.098.238a.324.324 0 00.238.098h11.312zm5.488 0c.187 0 .308-.093.364-.28l.644-2.744c.019-.075.065-.112.14-.112h5.236c.075 0 .121.037.14.112l.644 2.744c.056.187.187.28.392.28H81.7c.205 0 .308-.084.308-.252l-.028-.112-5.04-18.956c-.056-.187-.187-.28-.392-.28h-4.06c-.205 0-.336.093-.392.28l-5.04 18.956c-.056.243.037.364.28.364h3.388zm5.6-6.188h-3.696a.186.186 0 01-.112-.042c-.037-.028-.047-.07-.028-.126l1.876-8.12c.019-.075.047-.112.084-.112.037 0 .065.037.084.112l1.932 8.12c.019.056.01.098-.028.126a.186.186 0 01-.112.042zM87.692 108a.324.324 0 00.238-.098.324.324 0 00.098-.238v-7.644c0-.093.047-.14.14-.14h1.764c.056 0 .103.037.14.112l2.828 7.728c.056.187.187.28.392.28h3.416c.205 0 .308-.084.308-.252a.312.312 0 00-.028-.14l-3.192-8.036c-.037-.093-.01-.159.084-.196a4.812 4.812 0 002.212-1.96c.523-.877.784-1.913.784-3.108 0-1.157-.233-2.184-.7-3.08a5.042 5.042 0 00-1.988-2.086c-.859-.495-1.839-.742-2.94-.742h-6.832a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm2.912-11.144h-2.436c-.093 0-.14-.047-.14-.14v-4.788c0-.093.047-.14.14-.14h2.436c.69 0 1.25.229 1.68.686.43.457.644 1.078.644 1.862 0 .765-.215 1.377-.644 1.834-.43.457-.99.686-1.68.686zM105.64 108c1.25 0 2.357-.233 3.318-.7.961-.467 1.703-1.13 2.226-1.988.523-.859.784-1.857.784-2.996v-8.232c0-1.139-.261-2.137-.784-2.996s-1.265-1.521-2.226-1.988c-.961-.467-2.067-.7-3.318-.7h-6.02a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h6.02zm-2.268-3.388c-.093 0-.14-.047-.14-.14V91.928c0-.093.047-.14.14-.14h2.296c.71 0 1.279.247 1.708.742.43.495.644 1.162.644 2.002v7.336c-.019.821-.243 1.48-.672 1.974-.43.495-.99.742-1.68.742l-2.296.028zm-64.008 25.612c1.904 0 3.43-.5 4.578-1.498 1.148-.999 1.722-2.347 1.722-4.046 0-.952-.205-1.764-.616-2.436a5.687 5.687 0 00-1.526-1.666c-.607-.439-1.451-.957-2.534-1.554l-.588-.336c-.952-.467-1.661-.845-2.128-1.134-.467-.29-.812-.593-1.036-.91a1.892 1.892 0 01-.336-1.12c0-.616.191-1.097.574-1.442.383-.345.91-.518 1.582-.518.803 0 1.437.224 1.904.672.467.448.7 1.008.7 1.68v.504c0 .093.033.173.098.238a.324.324 0 00.238.098h3.22a.324.324 0 00.238-.098.324.324 0 00.098-.238v-.56c0-1.12-.27-2.11-.812-2.968-.541-.859-1.297-1.526-2.268-2.002-.97-.476-2.081-.714-3.332-.714-1.195 0-2.259.22-3.192.658-.933.439-1.657 1.064-2.17 1.876-.513.812-.77 1.76-.77 2.842 0 1.083.252 2.007.756 2.772a6.714 6.714 0 001.82 1.876c.71.485 1.624 1.008 2.744 1.568.915.467 1.591.835 2.03 1.106.439.27.78.56 1.022.868.243.308.364.677.364 1.106 0 .579-.191 1.055-.574 1.428-.383.373-.938.56-1.666.56-.821 0-1.475-.22-1.96-.658a2.118 2.118 0 01-.728-1.638v-.532a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.22a.324.324 0 00-.238.098.324.324 0 00-.098.238v.728c0 1.083.266 2.04.798 2.87.532.83 1.283 1.475 2.254 1.932.97.457 2.1.686 3.388.686zM51.572 130a.324.324 0 00.238-.098.324.324 0 00.098-.238v-7.28c0-.093.047-.14.14-.14h3.024c1.12 0 2.114-.243 2.982-.728a5.038 5.038 0 002.016-2.058c.476-.887.714-1.909.714-3.066 0-1.176-.238-2.221-.714-3.136a5.158 5.158 0 00-2.016-2.128c-.868-.504-1.862-.756-2.982-.756h-6.776a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.956c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276zm2.856-10.892h-2.38c-.093 0-.14-.047-.14-.14v-5.04c0-.093.047-.14.14-.14h2.38c.728 0 1.311.243 1.75.728.439.485.658 1.139.658 1.96 0 .803-.22 1.442-.658 1.918-.439.476-1.022.714-1.75.714zm14.644 11.144c1.288 0 2.427-.261 3.416-.784a5.58 5.58 0 002.296-2.212c.541-.952.812-2.063.812-3.332v-7.448c0-1.25-.27-2.352-.812-3.304a5.58 5.58 0 00-2.296-2.212c-.99-.523-2.128-.784-3.416-.784-1.288 0-2.422.261-3.402.784a5.602 5.602 0 00-2.282 2.212c-.541.952-.812 2.053-.812 3.304v7.448c0 1.27.27 2.38.812 3.332a5.602 5.602 0 002.282 2.212c.98.523 2.114.784 3.402.784zm0-3.388c-.765 0-1.381-.257-1.848-.77-.467-.513-.7-1.18-.7-2.002v-7.728c0-.84.233-1.517.7-2.03.467-.513 1.083-.77 1.848-.77.784 0 1.41.257 1.876.77.467.513.7 1.19.7 2.03v7.728c0 .821-.233 1.489-.7 2.002-.467.513-1.092.77-1.876.77zm15.232 3.36c1.27 0 2.39-.247 3.36-.742a5.362 5.362 0 002.254-2.114c.532-.915.798-1.97.798-3.164v-.084a.324.324 0 00-.098-.238.324.324 0 00-.238-.098l-3.276-.14c-.224 0-.336.103-.336.308v.364c0 .765-.224 1.377-.672 1.834-.448.457-1.045.686-1.792.686-.747 0-1.344-.229-1.792-.686-.448-.457-.672-1.069-.672-1.834v-8.204c0-.765.224-1.381.672-1.848.448-.467 1.045-.7 1.792-.7.747 0 1.344.233 1.792.7.448.467.672 1.083.672 1.848v.364c0 .205.112.308.336.308l3.276-.14a.305.305 0 00.238-.112.373.373 0 00.098-.252v-.14c0-1.195-.266-2.24-.798-3.136-.532-.896-1.283-1.591-2.254-2.086-.97-.495-2.09-.742-3.36-.742s-2.39.252-3.36.756a5.426 5.426 0 00-2.254 2.142c-.532.924-.798 1.993-.798 3.206v7.784c0 1.232.266 2.315.798 3.248a5.401 5.401 0 002.254 2.156c.97.504 2.09.756 3.36.756zM96.848 130a.324.324 0 00.238-.098.324.324 0 00.098-.238v-5.6a.43.43 0 01.056-.168l1.26-1.82c.037-.056.075-.084.112-.084.037 0 .065.028.084.084l3.976 7.672c.093.168.224.252.392.252h3.584c.205 0 .308-.075.308-.224a.43.43 0 00-.056-.168l-5.488-10.584a.348.348 0 010-.196l5.18-8.036c.075-.112.089-.205.042-.28-.047-.075-.135-.112-.266-.112h-3.612a.439.439 0 00-.392.224l-5.012 7.616c-.019.056-.051.075-.098.056-.047-.019-.07-.056-.07-.112v-7.448a.324.324 0 00-.098-.238.324.324 0 00-.238-.098h-3.276a.324.324 0 00-.238.098.324.324 0 00-.098.238v18.928c0 .093.033.173.098.238a.324.324 0 00.238.098h3.276z"/></defs><g fill="none" transform="translate(-30 -22)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g></svg>


--------------------------------------------------------------------------------
/src/images/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162" height="99"><defs><filter id="a" width="107.7%" height="112.9%" x="-3.9%" y="-3.2%" filterUnits="objectBoundingBox"><feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.196705638 0"/></filter><path id="b" d="M39.28 56a.463.463 0 00.34-.14.463.463 0 00.14-.34V44.6c0-.133.067-.2.2-.2h2.52c.08 0 .147.053.2.16l4.04 11.04c.08.267.267.4.56.4h4.88c.293 0 .44-.12.44-.36a.445.445 0 00-.04-.2L48 43.96c-.053-.133-.013-.227.12-.28 1.36-.613 2.413-1.547 3.16-2.8.747-1.253 1.12-2.733 1.12-4.44 0-1.653-.333-3.12-1-4.4a7.203 7.203 0 00-2.84-2.98c-1.227-.707-2.627-1.06-4.2-1.06H34.6a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.04c0 .133.047.247.14.34.093.093.207.14.34.14h4.68zm4.16-15.92h-3.48c-.133 0-.2-.067-.2-.2v-6.84c0-.133.067-.2.2-.2h3.48c.987 0 1.787.327 2.4.98s.92 1.54.92 2.66c0 1.093-.307 1.967-.92 2.62s-1.413.98-2.4.98zm21.2 16.28c1.84 0 3.467-.373 4.88-1.12 1.413-.747 2.507-1.8 3.28-3.16.773-1.36 1.16-2.947 1.16-4.76V36.68c0-1.787-.387-3.36-1.16-4.72-.773-1.36-1.867-2.413-3.28-3.16-1.413-.747-3.04-1.12-4.88-1.12-1.84 0-3.46.373-4.86 1.12a8.003 8.003 0 00-3.26 3.16c-.773 1.36-1.16 2.933-1.16 4.72v10.64c0 1.813.387 3.4 1.16 4.76a8.003 8.003 0 003.26 3.16c1.4.747 3.02 1.12 4.86 1.12zm0-4.84c-1.093 0-1.973-.367-2.64-1.1-.667-.733-1-1.687-1-2.86V36.52c0-1.2.333-2.167 1-2.9.667-.733 1.547-1.1 2.64-1.1 1.12 0 2.013.367 2.68 1.1.667.733 1 1.7 1 2.9v11.04c0 1.173-.333 2.127-1 2.86-.667.733-1.56 1.1-2.68 1.1zm21.76 4.8c1.813 0 3.413-.353 4.8-1.06 1.387-.707 2.46-1.713 3.22-3.02.76-1.307 1.14-2.813 1.14-4.52v-.12a.463.463 0 00-.14-.34.463.463 0 00-.34-.14l-4.68-.2c-.32 0-.48.147-.48.44v.52c0 1.093-.32 1.967-.96 2.62-.64.653-1.493.98-2.56.98s-1.92-.327-2.56-.98c-.64-.653-.96-1.527-.96-2.62V36.16c0-1.093.32-1.973.96-2.64.64-.667 1.493-1 2.56-1s1.92.333 2.56 1c.64.667.96 1.547.96 2.64v.52c0 .293.16.44.48.44l4.68-.2a.436.436 0 00.34-.16.533.533 0 00.14-.36v-.2c0-1.707-.38-3.2-1.14-4.48-.76-1.28-1.833-2.273-3.22-2.98-1.387-.707-2.987-1.06-4.8-1.06-1.813 0-3.413.36-4.8 1.08-1.387.72-2.46 1.74-3.22 3.06-.76 1.32-1.14 2.847-1.14 4.58v11.12c0 1.76.38 3.307 1.14 4.64a7.716 7.716 0 003.22 3.08c1.387.72 2.987 1.08 4.8 1.08zm17.92-.32a.463.463 0 00.34-.14.463.463 0 00.14-.34v-8c0-.053.027-.133.08-.24l1.8-2.6c.053-.08.107-.12.16-.12.053 0 .093.04.12.12l5.68 10.96c.133.24.32.36.56.36h5.12c.293 0 .44-.107.44-.32a.614.614 0 00-.08-.24l-7.84-15.12a.498.498 0 010-.28l7.4-11.48c.107-.16.127-.293.06-.4-.067-.107-.193-.16-.38-.16h-5.16a.627.627 0 00-.56.32l-7.16 10.88c-.027.08-.073.107-.14.08-.067-.027-.1-.08-.1-.16V28.48a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-4.68a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.04c0 .133.047.247.14.34.093.093.207.14.34.14h4.68zM39.16 88a.463.463 0 00.34-.14.463.463 0 00.14-.34v-10.4c0-.133.067-.2.2-.2h4.32c1.6 0 3.02-.347 4.26-1.04a7.197 7.197 0 002.88-2.94c.68-1.267 1.02-2.727 1.02-4.38 0-1.68-.34-3.173-1.02-4.48-.68-1.307-1.64-2.32-2.88-3.04-1.24-.72-2.66-1.08-4.26-1.08h-9.68a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.08c0 .133.047.247.14.34.093.093.207.14.34.14h4.68zm4.08-15.56h-3.4c-.133 0-.2-.067-.2-.2v-7.2c0-.133.067-.2.2-.2h3.4c1.04 0 1.873.347 2.5 1.04.627.693.94 1.627.94 2.8 0 1.147-.313 2.06-.94 2.74-.627.68-1.46 1.02-2.5 1.02zM59.36 88c.267 0 .44-.133.52-.4l.92-3.92c.027-.107.093-.16.2-.16h7.48c.107 0 .173.053.2.16l.92 3.92c.08.267.267.4.56.4h4.88c.293 0 .44-.12.44-.36l-.04-.16-7.2-27.08c-.08-.267-.267-.4-.56-.4h-5.8c-.293 0-.48.133-.56.4l-7.2 27.08c-.08.347.053.52.4.52h4.84zm8-8.84h-5.28a.266.266 0 01-.16-.06c-.053-.04-.067-.1-.04-.18l2.68-11.6c.027-.107.067-.16.12-.16.053 0 .093.053.12.16l2.76 11.6c.027.08.013.14-.04.18a.266.266 0 01-.16.06zM83.48 88a.463.463 0 00.34-.14.463.463 0 00.14-.34v-10.4c0-.133.067-.2.2-.2h4.32c1.6 0 3.02-.347 4.26-1.04a7.197 7.197 0 002.88-2.94c.68-1.267 1.02-2.727 1.02-4.38 0-1.68-.34-3.173-1.02-4.48-.68-1.307-1.64-2.32-2.88-3.04-1.24-.72-2.66-1.08-4.26-1.08H78.8a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.08c0 .133.047.247.14.34.093.093.207.14.34.14h4.68zm4.08-15.56h-3.4c-.133 0-.2-.067-.2-.2v-7.2c0-.133.067-.2.2-.2h3.4c1.04 0 1.873.347 2.5 1.04.627.693.94 1.627.94 2.8 0 1.147-.313 2.06-.94 2.74-.627.68-1.46 1.02-2.5 1.02zM116.24 88a.463.463 0 00.34-.14.463.463 0 00.14-.34v-3.88a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-10.72c-.133 0-.2-.067-.2-.2v-6.44c0-.133.067-.2.2-.2h6.68a.463.463 0 00.34-.14.463.463 0 00.14-.34v-3.88a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-6.68c-.133 0-.2-.067-.2-.2v-6.24c0-.133.067-.2.2-.2h10.72a.463.463 0 00.34-.14.463.463 0 00.14-.34v-3.88a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-16.08a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.04c0 .133.047.247.14.34.093.093.207.14.34.14h16.08zm9.04 0a.463.463 0 00.34-.14.463.463 0 00.14-.34V76.6c0-.133.067-.2.2-.2h2.52c.08 0 .147.053.2.16l4.04 11.04c.08.267.267.4.56.4h4.88c.293 0 .44-.12.44-.36a.445.445 0 00-.04-.2L134 75.96c-.053-.133-.013-.227.12-.28 1.36-.613 2.413-1.547 3.16-2.8.747-1.253 1.12-2.733 1.12-4.44 0-1.653-.333-3.12-1-4.4a7.203 7.203 0 00-2.84-2.98c-1.227-.707-2.627-1.06-4.2-1.06h-9.76a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.04c0 .133.047.247.14.34.093.093.207.14.34.14h4.68zm4.16-15.92h-3.48c-.133 0-.2-.067-.2-.2v-6.84c0-.133.067-.2.2-.2h3.48c.987 0 1.787.327 2.4.98s.92 1.54.92 2.66c0 1.093-.307 1.967-.92 2.62s-1.413.98-2.4.98zm-86.92 48.24c2.72 0 4.9-.713 6.54-2.14 1.64-1.427 2.46-3.353 2.46-5.78 0-1.36-.293-2.52-.88-3.48a8.124 8.124 0 00-2.18-2.38c-.867-.627-2.073-1.367-3.62-2.22l-.84-.48c-1.36-.667-2.373-1.207-3.04-1.62-.667-.413-1.16-.847-1.48-1.3-.32-.453-.48-.987-.48-1.6 0-.88.273-1.567.82-2.06.547-.493 1.3-.74 2.26-.74 1.147 0 2.053.32 2.72.96.667.64 1 1.44 1 2.4v.72c0 .133.047.247.14.34.093.093.207.14.34.14h4.6a.463.463 0 00.34-.14.463.463 0 00.14-.34v-.8c0-1.6-.387-3.013-1.16-4.24-.773-1.227-1.853-2.18-3.24-2.86-1.387-.68-2.973-1.02-4.76-1.02-1.707 0-3.227.313-4.56.94-1.333.627-2.367 1.52-3.1 2.68-.733 1.16-1.1 2.513-1.1 4.06 0 1.547.36 2.867 1.08 3.96.72 1.093 1.587 1.987 2.6 2.68 1.013.693 2.32 1.44 3.92 2.24 1.307.667 2.273 1.193 2.9 1.58.627.387 1.113.8 1.46 1.24.347.44.52.967.52 1.58 0 .827-.273 1.507-.82 2.04-.547.533-1.34.8-2.38.8-1.173 0-2.107-.313-2.8-.94-.693-.627-1.04-1.407-1.04-2.34v-.76a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-4.6a.463.463 0 00-.34.14.463.463 0 00-.14.34v1.04c0 1.547.38 2.913 1.14 4.1.76 1.187 1.833 2.107 3.22 2.76 1.387.653 3 .98 4.84.98zm21.08 0c1.813 0 3.413-.353 4.8-1.06 1.387-.707 2.46-1.713 3.22-3.02.76-1.307 1.14-2.813 1.14-4.52v-.12a.463.463 0 00-.14-.34.463.463 0 00-.34-.14l-4.68-.2c-.32 0-.48.147-.48.44v.52c0 1.093-.32 1.967-.96 2.62-.64.653-1.493.98-2.56.98s-1.92-.327-2.56-.98c-.64-.653-.96-1.527-.96-2.62v-11.72c0-1.093.32-1.973.96-2.64.64-.667 1.493-1 2.56-1s1.92.333 2.56 1c.64.667.96 1.547.96 2.64v.52c0 .293.16.44.48.44l4.68-.2a.436.436 0 00.34-.16.533.533 0 00.14-.36v-.2c0-1.707-.38-3.2-1.14-4.48-.76-1.28-1.833-2.273-3.22-2.98-1.387-.707-2.987-1.06-4.8-1.06-1.813 0-3.413.36-4.8 1.08-1.387.72-2.46 1.74-3.22 3.06-.76 1.32-1.14 2.847-1.14 4.58v11.12c0 1.76.38 3.307 1.14 4.64a7.716 7.716 0 003.22 3.08c1.387.72 2.987 1.08 4.8 1.08zm17.92-.32a.463.463 0 00.34-.14.463.463 0 00.14-.34V92.48a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-4.68a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.04c0 .133.047.247.14.34.093.093.207.14.34.14h4.68zm13.08.32c2.72 0 4.9-.713 6.54-2.14 1.64-1.427 2.46-3.353 2.46-5.78 0-1.36-.293-2.52-.88-3.48a8.124 8.124 0 00-2.18-2.38c-.867-.627-2.073-1.367-3.62-2.22l-.84-.48c-1.36-.667-2.373-1.207-3.04-1.62-.667-.413-1.16-.847-1.48-1.3-.32-.453-.48-.987-.48-1.6 0-.88.273-1.567.82-2.06.547-.493 1.3-.74 2.26-.74 1.147 0 2.053.32 2.72.96.667.64 1 1.44 1 2.4v.72c0 .133.047.247.14.34.093.093.207.14.34.14h4.6a.463.463 0 00.34-.14.463.463 0 00.14-.34v-.8c0-1.6-.387-3.013-1.16-4.24-.773-1.227-1.853-2.18-3.24-2.86-1.387-.68-2.973-1.02-4.76-1.02-1.707 0-3.227.313-4.56.94-1.333.627-2.367 1.52-3.1 2.68-.733 1.16-1.1 2.513-1.1 4.06 0 1.547.36 2.867 1.08 3.96.72 1.093 1.587 1.987 2.6 2.68 1.013.693 2.32 1.44 3.92 2.24 1.307.667 2.273 1.193 2.9 1.58.627.387 1.113.8 1.46 1.24.347.44.52.967.52 1.58 0 .827-.273 1.507-.82 2.04-.547.533-1.34.8-2.38.8-1.173 0-2.107-.313-2.8-.94-.693-.627-1.04-1.407-1.04-2.34v-.76a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-4.6a.463.463 0 00-.34.14.463.463 0 00-.14.34v1.04c0 1.547.38 2.913 1.14 4.1.76 1.187 1.833 2.107 3.22 2.76 1.387.653 3 .98 4.84.98zm20.8 0c2.72 0 4.9-.713 6.54-2.14 1.64-1.427 2.46-3.353 2.46-5.78 0-1.36-.293-2.52-.88-3.48a8.124 8.124 0 00-2.18-2.38c-.867-.627-2.073-1.367-3.62-2.22l-.84-.48c-1.36-.667-2.373-1.207-3.04-1.62-.667-.413-1.16-.847-1.48-1.3-.32-.453-.48-.987-.48-1.6 0-.88.273-1.567.82-2.06.547-.493 1.3-.74 2.26-.74 1.147 0 2.053.32 2.72.96.667.64 1 1.44 1 2.4v.72c0 .133.047.247.14.34.093.093.207.14.34.14h4.6a.463.463 0 00.34-.14.463.463 0 00.14-.34v-.8c0-1.6-.387-3.013-1.16-4.24-.773-1.227-1.853-2.18-3.24-2.86-1.387-.68-2.973-1.02-4.76-1.02-1.707 0-3.227.313-4.56.94-1.333.627-2.367 1.52-3.1 2.68-.733 1.16-1.1 2.513-1.1 4.06 0 1.547.36 2.867 1.08 3.96.72 1.093 1.587 1.987 2.6 2.68 1.013.693 2.32 1.44 3.92 2.24 1.307.667 2.273 1.193 2.9 1.58.627.387 1.113.8 1.46 1.24.347.44.52.967.52 1.58 0 .827-.273 1.507-.82 2.04-.547.533-1.34.8-2.38.8-1.173 0-2.107-.313-2.8-.94-.693-.627-1.04-1.407-1.04-2.34v-.76a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-4.6a.463.463 0 00-.34.14.463.463 0 00-.14.34v1.04c0 1.547.38 2.913 1.14 4.1.76 1.187 1.833 2.107 3.22 2.76 1.387.653 3 .98 4.84.98zm21.2.04c1.84 0 3.467-.373 4.88-1.12 1.413-.747 2.507-1.8 3.28-3.16.773-1.36 1.16-2.947 1.16-4.76v-10.64c0-1.787-.387-3.36-1.16-4.72-.773-1.36-1.867-2.413-3.28-3.16-1.413-.747-3.04-1.12-4.88-1.12-1.84 0-3.46.373-4.86 1.12a8.003 8.003 0 00-3.26 3.16c-.773 1.36-1.16 2.933-1.16 4.72v10.64c0 1.813.387 3.4 1.16 4.76a8.003 8.003 0 003.26 3.16c1.4.747 3.02 1.12 4.86 1.12zm0-4.84c-1.093 0-1.973-.367-2.64-1.1-.667-.733-1-1.687-1-2.86v-11.04c0-1.2.333-2.167 1-2.9.667-.733 1.547-1.1 2.64-1.1 1.12 0 2.013.367 2.68 1.1.667.733 1 1.7 1 2.9v11.04c0 1.173-.333 2.127-1 2.86-.667.733-1.56 1.1-2.68 1.1zm18.24 4.48a.463.463 0 00.34-.14.463.463 0 00.14-.34V108.6c0-.133.067-.2.2-.2h2.52c.08 0 .147.053.2.16l4.04 11.04c.08.267.267.4.56.4h4.88c.293 0 .44-.12.44-.36a.445.445 0 00-.04-.2l-4.56-11.48c-.053-.133-.013-.227.12-.28 1.36-.613 2.413-1.547 3.16-2.8.747-1.253 1.12-2.733 1.12-4.44 0-1.653-.333-3.12-1-4.4a7.203 7.203 0 00-2.84-2.98c-1.227-.707-2.627-1.06-4.2-1.06h-9.76a.463.463 0 00-.34.14.463.463 0 00-.14.34v27.04c0 .133.047.247.14.34.093.093.207.14.34.14h4.68zm4.16-15.92h-3.48c-.133 0-.2-.067-.2-.2v-6.84c0-.133.067-.2.2-.2H159c.987 0 1.787.327 2.4.98s.92 1.54.92 2.66c0 1.093-.307 1.967-.92 2.62s-1.413.98-2.4.98zm20.8 16.24c2.72 0 4.9-.713 6.54-2.14 1.64-1.427 2.46-3.353 2.46-5.78 0-1.36-.293-2.52-.88-3.48a8.124 8.124 0 00-2.18-2.38c-.867-.627-2.073-1.367-3.62-2.22l-.84-.48c-1.36-.667-2.373-1.207-3.04-1.62-.667-.413-1.16-.847-1.48-1.3-.32-.453-.48-.987-.48-1.6 0-.88.273-1.567.82-2.06.547-.493 1.3-.74 2.26-.74 1.147 0 2.053.32 2.72.96.667.64 1 1.44 1 2.4v.72c0 .133.047.247.14.34.093.093.207.14.34.14h4.6a.463.463 0 00.34-.14.463.463 0 00.14-.34v-.8c0-1.6-.387-3.013-1.16-4.24-.773-1.227-1.853-2.18-3.24-2.86-1.387-.68-2.973-1.02-4.76-1.02-1.707 0-3.227.313-4.56.94-1.333.627-2.367 1.52-3.1 2.68-.733 1.16-1.1 2.513-1.1 4.06 0 1.547.36 2.867 1.08 3.96.72 1.093 1.587 1.987 2.6 2.68 1.013.693 2.32 1.44 3.92 2.24 1.307.667 2.273 1.193 2.9 1.58.627.387 1.113.8 1.46 1.24.347.44.52.967.52 1.58 0 .827-.273 1.507-.82 2.04-.547.533-1.34.8-2.38.8-1.173 0-2.107-.313-2.8-.94-.693-.627-1.04-1.407-1.04-2.34v-.76a.463.463 0 00-.14-.34.463.463 0 00-.34-.14h-4.6a.463.463 0 00-.34.14.463.463 0 00-.14.34v1.04c0 1.547.38 2.913 1.14 4.1.76 1.187 1.833 2.107 3.22 2.76 1.387.653 3 .98 4.84.98z"/></defs><g fill="none" transform="translate(-30 -27)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g></svg>


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 |   <head>
 6 | 
 7 |     <meta charset="UTF-8" />
 8 | 
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 | 
11 |     <!-- displays site properly based on user's device -->
12 | 
13 |     <link
14 |       rel="icon"
15 |       type="image/png"
16 |       sizes="32x32"
17 |       href="./images/favicon-32x32.png"
18 |     />
19 | 
20 |     <title>Frontend Mentor | Rock, Paper, Scissors</title>
21 | 
22 |   </head>
23 | 
24 |   <body>
25 | 
26 |     <div id="modal"></div>
27 | 
28 |     <div id="app"></div>
29 | 
30 |     <script type="module" src="index.js"></script>
31 | 
32 |   </body>
33 | 
34 | </html>
35 | 
36 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createRoot } from 'react-dom/client';
 3 | import { BrowserRouter as Router } from "react-router-dom";
 4 | import App from "./App";
 5 | import "./styles.scss";
 6 | 
 7 | // This implementation has changed after React 18
 8 | const mountNode = document.getElementById('app');
 9 | const root = createRoot(mountNode)
10 | 
11 | root.render(
12 |   <Router>
13 |     <App />
14 |   </Router>
15 | );
16 | 


--------------------------------------------------------------------------------
/src/scss/_footer.scss:
--------------------------------------------------------------------------------
 1 | .footer{
 2 |     width: 100vw;
 3 | 
 4 |     .attribution{
 5 |         position: absolute;
 6 |         left: 50%;
 7 |         transform: translate(-50%);
 8 |         bottom: 1rem;
 9 |     }
10 | 
11 |     button{
12 |         position: absolute;
13 |         bottom: 1rem;
14 |         padding: 7px 25px;
15 |         right: 1rem;
16 |         border-radius: .4rem;
17 |         border: 3px solid $header-outline;
18 |         color: lighten($header-outline,20%);
19 |         background: none;
20 |         font-weight: 600;
21 |         letter-spacing: 2px;
22 | 
23 |         &:hover{
24 |             background-color: rgba($color: #ffffff, $alpha: .8);
25 |             color: $dark-text;
26 |             cursor: pointer;
27 |         }
28 |     }
29 | }


--------------------------------------------------------------------------------
/src/scss/_game.scss:
--------------------------------------------------------------------------------
  1 | .game{
  2 |     display: flex;
  3 |     margin-top: 50px;
  4 |     flex-wrap: nowrap;
  5 |     align-items: center;
  6 | 
  7 |     &__you{
  8 |         display: flex;
  9 |         flex-direction: column;
 10 |         margin-right: 2.5rem;
 11 | .text{
 12 |     text-transform: uppercase;
 13 |     font-size: 1.2rem;
 14 |     font-weight: 300;
 15 |     margin-bottom: 2.5rem;
 16 | }
 17 |         .icon{
 18 |             height: 250px;
 19 |             width: 250px;
 20 |             border-radius: 50%;
 21 |             border-color: transparent;
 22 |             border: 25px solid;
 23 |             background-size: 50%;
 24 | 
 25 | 
 26 |             &--paper{
 27 |                 @include icon($imageP,$paper-gradient);
 28 | 
 29 |                 &--winner{
 30 |                 @include bigShadow($paper-gradient);
 31 |                 }
 32 |                 
 33 |             }
 34 |             &--scissors{
 35 |                 @include icon($imageS,$scissors-gradient);
 36 |                 &--winner{
 37 |                     @include bigShadow($scissors-gradient);
 38 |                     }
 39 |             }
 40 |             &--rock{
 41 |                 @include icon($imageR,$rock-gradient);
 42 | 
 43 |                 &--winner{
 44 |                     @include bigShadow($rock-gradient);
 45 |                     }
 46 |            
 47 | 
 48 |                 
 49 |             }
 50 |         }
 51 |     }
 52 | 
 53 |     &__play{
 54 |         display: flex;
 55 |         flex-direction: column;
 56 |         margin: 0 2rem;
 57 |         .text{
 58 |             text-transform: uppercase;
 59 |             font-size: 3rem;
 60 |             font-weight: 700;
 61 |             margin-bottom: 10px;
 62 |         }
 63 |         .play-again{
 64 |             background-color: #fff;
 65 |             text-decoration: none;
 66 |             text-transform: uppercase;
 67 |             padding: 10px 20px;
 68 |             border-radius: 5px;
 69 |             font-size: .8rem;
 70 | 
 71 |             &:hover{
 72 |                 color: red;
 73 |             }
 74 |         }
 75 |     }
 76 | 
 77 |     &__house{
 78 |         display: flex;
 79 |         flex-direction: column;
 80 |         margin-left: 2.5rem;
 81 | .text{
 82 |     text-transform: uppercase;
 83 |     font-size: 1.2rem;
 84 |     font-weight: 300;
 85 |     margin-bottom: 2.5rem;
 86 | }
 87 |         .icon{
 88 |             height: 250px;
 89 |             width: 250px;
 90 |             border-radius: 50%;
 91 |             border-color: transparent;
 92 |             border: 25px solid;
 93 |             background-size: 50%;
 94 | 
 95 | 
 96 |             &--paper{
 97 |                 @include icon($imageP,$paper-gradient);
 98 | 
 99 |                 &--winner{
100 |                     @include bigShadow($paper-gradient);
101 |                     }
102 |             }
103 |             &--scissors{
104 |                 @include icon($imageS,$scissors-gradient);
105 | 
106 |                 &--winner{
107 |                     @include bigShadow($scissors-gradient);
108 |                     }
109 |             }
110 |             &--rock{
111 |                 @include icon($imageR,$rock-gradient);
112 | 
113 |                 &--winner{
114 |                     @include bigShadow($rock-gradient);
115 |                     }
116 |             }
117 |         }
118 | 
119 |         .counter{
120 |             height: 250px;
121 |             width: 250px;
122 |             border-radius: 50%;
123 |             background-color: rgba($color: #000000, $alpha: .3);
124 |             font-size: 8rem;
125 | 
126 |             display: flex;
127 |             flex-direction: column;
128 |             justify-content: center;
129 |         }
130 |     }
131 | }


--------------------------------------------------------------------------------
/src/scss/_globals.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap');
 2 | 
 3 | 
 4 | *,*::before,*::after{
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     box-sizing: inherit;
 8 | }
 9 | 
10 | body{
11 |     font-family: 'Barlow Semi Condensed', sans-serif;
12 |     color: #fff;
13 |     background:$background-gradient;
14 |     text-align: center;
15 |     box-sizing: border-box;
16 | }
17 | 
18 | .container{
19 |     display: flex;
20 |     flex-direction: column;
21 |     align-items: center;
22 | }


--------------------------------------------------------------------------------
/src/scss/_header.scss:
--------------------------------------------------------------------------------
 1 | .header{
 2 |     display:flex;
 3 |     border: 3px solid $header-outline;
 4 |     max-width: 43.75rem;
 5 |     width: 100%;
 6 | 
 7 |     margin-top: 1.875rem;
 8 |     border-radius: 1rem;
 9 |     padding: 1.25rem;
10 | 
11 |     display: flex;
12 |     justify-content: space-between;
13 | 
14 |     .text{
15 |         font-size: 2.5rem;
16 |         text-transform: uppercase;
17 |         display: flex;
18 |         flex-direction: column;
19 |         align-items: flex-start;
20 |         line-height: 2rem;
21 |     }
22 | 
23 |     .score-box{
24 |         padding: .75rem 2.5rem;
25 |         background-color: #fff;
26 |         color: $score-text;
27 |         border-radius: 5px;
28 | 
29 |         &__score{
30 |             color: $dark-text;
31 |             font-size: 3.5rem;
32 |             font-weight: 700;
33 |         }
34 | 
35 |     }
36 | }


--------------------------------------------------------------------------------
/src/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin icon($image,$color){
 2 |     background-color: #fff;
 3 |     background-image: url($image);
 4 |     background-position: center;
 5 |     background-repeat: no-repeat;
 6 |     border-color: $color;
 7 |     box-shadow: inset 0px 5px 6px grey, 
 8 |     0px 8px darken($color, 15%);
 9 |     
10 | }
11 | 
12 | @mixin bigShadow($color){
13 | box-shadow:inset 0px 5px 6px grey, 
14 |     0px 8px darken($color, 15%),
15 |     0px 0px 0px 50px rgba(#ffffff, .07),
16 |     0px 0px 0px 100px rgba(#ffffff, .05),
17 |     0px 0px 0px 150px rgba(#ffffff, .025),;
18 | }


--------------------------------------------------------------------------------
/src/scss/_modal.scss:
--------------------------------------------------------------------------------
 1 | .modal-container{
 2 |     position: absolute;
 3 |     height: 100vh;
 4 |     width: 100vw;
 5 |     z-index: 10;
 6 |     display: flex;
 7 |     justify-content: center;
 8 |     align-items: center;
 9 | 
10 |     .modal-box{
11 |         color: $dark-text;
12 |         background-color: #fff;
13 |         border-radius: 8px;
14 |         padding: 30px;
15 | 
16 |         img{
17 |             width: 100%;
18 |         }
19 | 
20 |         .modal__header{
21 |             display: flex;
22 |             justify-content: space-between;
23 |             margin-bottom: 30px;
24 | 
25 |             h1{
26 |                 text-transform: uppercase;
27 |                 margin: 0;
28 |                 padding: 0;
29 |             }
30 |         }
31 |     }
32 | 
33 |     button{
34 |         background:none ;
35 |         border: none;
36 |         align-self: center;
37 |         color: $dark-text;
38 | 
39 |         &:hover{
40 |             cursor: pointer;
41 |         }
42 | 
43 |     }
44 | }


--------------------------------------------------------------------------------
/src/scss/_play.scss:
--------------------------------------------------------------------------------
 1 | .play{
 2 | 
 3 |     width: 100%;
 4 | 
 5 |     position: relative;
 6 |     margin-top: 3.125rem;
 7 | 
 8 |     display: flex;
 9 |     flex-direction: column;
10 | 
11 |     .triangle{
12 |         position: absolute;
13 |         align-self: center;
14 |         margin-top: 4.375rem;
15 |     }
16 | 
17 |     .items{
18 |         display: flex;
19 |         justify-content: center;
20 | 
21 |         .icon{
22 |             height: 160px;
23 |             width: 160px;
24 |             border: 18px solid;
25 |             border-radius: 50%;
26 |             transition: transform .2s;
27 | 
28 |             &--paper{
29 |                 @include icon($imageP,$paper-gradient);
30 |                 transform: translateX(1.5rem);
31 |                 
32 |                 &:hover{
33 |                 transform: translateX(1.5rem) scale(1.1);
34 | 
35 |                 }
36 | 
37 |             }
38 |             &--scissors{
39 |                 @include icon($imageS,$scissors-gradient);
40 |                 transform: translateX(8rem);
41 | 
42 |                 &:hover{
43 |                     transform: translateX(8rem) scale(1.1);
44 | 
45 | 
46 |                 }
47 |             }
48 |             &--rock{
49 |                 @include icon($imageR,$rock-gradient);
50 |                 transform: translateX(-10rem) translateY(13rem);
51 |             
52 | 
53 |                 &:hover{
54 |                     transform: translateX(-10rem) translateY(13rem) scale(1.1);
55 | 
56 |                 }
57 |             
58 |             }
59 |         }
60 |     }
61 | }


--------------------------------------------------------------------------------
/src/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | //colors
 2 | 
 3 | $scissors-gradient: hsl(39, 89%, 49%);
 4 | $paper-gradient: hsl(230, 89%, 62%);
 5 | $rock-gradient: hsl(349, 71%, 52%);
 6 | 
 7 | 
 8 | //text
 9 | 
10 | $dark-text: hsl(229, 25%, 31%);
11 | $score-text: hsl(229, 64%, 46%);
12 | $header-outline: hsl(217, 16%, 45%);
13 | 
14 | //Background
15 | $background-gradient: radial-gradient(circle, hsl(214, 47%, 23%),
16 | hsl(237, 49%, 15%)
17 | );
18 | 
19 | //Images
20 | 
21 | $imageP:"../src/images/icon-paper.svg";
22 | $imageS:"../src/images/icon-scissors.svg";
23 | $imageR:"../src/images/icon-rock.svg";
24 | 
25 | 


--------------------------------------------------------------------------------
/src/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Front-end Style Guide
 2 | 
 3 | ## Layout
 4 | 
 5 | The designs were created to the following widths:
 6 | 
 7 | - Mobile: 375px
 8 | - Desktop: 1366px
 9 | 
10 | ## Colors
11 | 
12 | ### Primary
13 | 
14 | - Scissors Gradient: hsl(39, 89%, 49%) to hsl(40, 84%, 53%)
15 | - Paper Gradient: hsl(230, 89%, 62%) to hsl(230, 89%, 65%)
16 | - Rock Gradient: hsl(349, 71%, 52%) to hsl(349, 70%, 56%)
17 | - Lizard Gradient: hsl(261, 73%, 60%) to hsl(261, 72%, 63%)
18 | - Cyan: hsl(189, 59%, 53%) to hsl(189, 58%, 57%)
19 | 
20 | ### Neutral
21 | 
22 | - Dark Text: hsl(229, 25%, 31%)
23 | - Score Text: hsl(229, 64%, 46%)
24 | - Header Outline: hsl(217, 16%, 45%)
25 | 
26 | ### Background
27 | 
28 | - Radial Gradient: hsl(214, 47%, 23%) to hsl(237, 49%, 15%)
29 | 
30 | ## Fonts
31 | 
32 | - Family: [Barlow Semi Condensed](https://fonts.google.com/specimen/Barlow+Semi+Condensed)
33 | - Weights: 600, 700
34 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | @import "./scss/variables";
 2 | @import "./scss/globals";
 3 | @import "./scss/mixins";
 4 | 
 5 | 
 6 | 
 7 | @import "./scss/header";
 8 | @import "./scss/play";
 9 | @import "./scss/game";
10 | @import "./scss/footer";
11 | @import "./scss/modal";
12 | 
13 | 
14 | 
15 | 


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