MainNav&SubNav UI

e8766404 · Kim, Subin · 2143589a · e8766404 · e8766404 · e8766404
Commit e8766404 authored Dec 26, 2020 by Kim, Subin
--- a/client/.eslintcache
+++ b/client/.eslintcache
-[{"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\index.js":"1","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\reportWebVitals.js":"2","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\App.js":"3"},{"size":500,"mtime":499162500000,"results":"4","hashOfConfig":"5"},{"size":362,"mtime":499162500000,"results":"6","hashOfConfig":"5"},{"size":528,"mtime":499162500000,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"zu2uto",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\index.js",[],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\reportWebVitals.js",[],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\App.js",[]]
+[{"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\index.js":"1","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\reportWebVitals.js":"2","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\App.js":"3","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Login.js":"4","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Admin.js":"5","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Signup.js":"6","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Home.js":"7","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\ShoppingCart.js":"8","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Payment.js":"9","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Components\\MainNav.js":"10","C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Components\\SubNav.js":"11"},{"size":1111,"mtime":1608984426449,"results":"12","hashOfConfig":"13"},{"size":362,"mtime":499162500000,"results":"14","hashOfConfig":"13"},{"size":528,"mtime":499162500000,"results":"15","hashOfConfig":"13"},{"size":299,"mtime":1608990331905,"results":"16","hashOfConfig":"13"},{"size":347,"mtime":1608990317155,"results":"17","hashOfConfig":"13"},{"size":349,"mtime":1608990352583,"results":"18","hashOfConfig":"13"},{"size":299,"mtime":1608990328892,"results":"19","hashOfConfig":"13"},{"size":361,"mtime":1608990350408,"results":"20","hashOfConfig":"13"},{"size":305,"mtime":1608990335736,"results":"21","hashOfConfig":"13"},{"size":1105,"mtime":1608994411660,"results":"22","hashOfConfig":"13"},{"size":1130,"mtime":1608994516868,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26","usedDeprecatedRules":"27"},"zu2uto",{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"34","messages":"35","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"36","messages":"37","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"42","messages":"43","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"44","messages":"45","errorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"46","messages":"47","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\index.js",["48","49","50"],"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';\nimport Home from './Pages/Home';\nimport Login from './Pages/Login';\nimport Signup from './Pages/Signup';\nimport Admin from './Pages/Admin';\nimport ShoppingCart from './Pages/ShoppingCart';\nimport Payment from './Pages/Payment';\nimport reportWebVitals from './reportWebVitals';\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nReactDOM.render(\n  <React.StrictMode>\n    <Router>\n      <Switch>\n        <Route exact path=\"/\" component={Home} />\n        <Route path=\"/login\" component={Login} />\n        <Route path=\"/signup\" component={Signup} />\n        <Route path=\"/shoppingcart\" component={ShoppingCart} />\n        <Redirect path=\"/\" to=\"/\" />\n      </Switch>\n    </Router>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();",["51","52"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\reportWebVitals.js",[],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\App.js",[],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Login.js",["53","54","55"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Admin.js",["56","57","58","59"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Signup.js",["60","61","62","63"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Home.js",["64","65","66"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\ShoppingCart.js",["67","68","69","70"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Pages\\Payment.js",["71","72","73"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Components\\MainNav.js",["74","75","76","77","78","79"],"C:\\Users\\MathUser\\Desktop\\Code\\shopping-mall\\client\\src\\Components\\SubNav.js",["80","81","82","83","84"],{"ruleId":"85","severity":1,"message":"86","line":4,"column":8,"nodeType":"87","messageId":"88","endLine":4,"endColumn":11},{"ruleId":"85","severity":1,"message":"89","line":8,"column":8,"nodeType":"87","messageId":"88","endLine":8,"endColumn":13},{"ruleId":"85","severity":1,"message":"90","line":10,"column":8,"nodeType":"87","messageId":"88","endLine":10,"endColumn":15},{"ruleId":"91","replacedBy":"92"},{"ruleId":"93","replacedBy":"94"},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"85","severity":1,"message":"98","line":2,"column":10,"nodeType":"87","messageId":"88","endLine":2,"endColumn":18},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"85","severity":1,"message":"98","line":2,"column":10,"nodeType":"87","messageId":"88","endLine":2,"endColumn":18},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"85","severity":1,"message":"98","line":2,"column":10,"nodeType":"87","messageId":"88","endLine":2,"endColumn":18},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"99","severity":1,"message":"100","line":12,"column":17,"nodeType":"101","endLine":12,"endColumn":58},{"ruleId":"99","severity":1,"message":"100","line":19,"column":21,"nodeType":"101","endLine":19,"endColumn":62},{"ruleId":"99","severity":1,"message":"100","line":23,"column":21,"nodeType":"101","endLine":23,"endColumn":64},{"ruleId":"85","severity":1,"message":"95","line":1,"column":17,"nodeType":"87","messageId":"88","endLine":1,"endColumn":25},{"ruleId":"85","severity":1,"message":"96","line":1,"column":27,"nodeType":"87","messageId":"88","endLine":1,"endColumn":36},{"ruleId":"85","severity":1,"message":"97","line":1,"column":38,"nodeType":"87","messageId":"88","endLine":1,"endColumn":44},{"ruleId":"85","severity":1,"message":"102","line":2,"column":10,"nodeType":"87","messageId":"88","endLine":2,"endColumn":16},{"ruleId":"85","severity":1,"message":"103","line":5,"column":14,"nodeType":"87","messageId":"88","endLine":5,"endColumn":30},"no-unused-vars","'Nav' is defined but never used.","Identifier","unusedVar","'Admin' is defined but never used.","'Payment' is defined but never used.","no-native-reassign",["104"],"no-negated-in-lhs",["105"],"'useState' is defined but never used.","'useEffect' is defined but never used.","'useRef' is defined but never used.","'Redirect' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'Navbar' is defined but never used.","'handleMouseEnter' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
\ No newline at end of file
+.eslintcache
\ No newline at end of file
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

--- a/client/public/footprint.ico
+++ b/client/public/footprint.ico
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/footprint.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta

--- a/client/src/Components/MainNav.js
+++ b/client/src/Components/MainNav.js
 import React, { useState, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Navbar, Nav } from 'react-bootstrap';
+import logo from '../../public/img/footprint.ico';
+import cart from '../cart.svg';
+import option from '../option.svg';
 function MainNav() {
    return (
-        <div>
+        <Navbar bg="dark" variant="dark">
-        </div>
+            <Navbar.Brand href="/home">
+                <img src={logo} width="30" height="30" />
+                {' '}KU#
+            </Navbar.Brand>
+            <Nav className="justify-content-end">
+                <Nav.Link href="/login">Login</Nav.Link>
+                <Nav.Link href="/signup">Signup</Nav.Link>
+                <Nav.Link href="/shoppingcart">
+                    <img src={cart} width="30" height="30" />
+                </Nav.Link>
+                <Nav.Link onClick={() => { alert('로그아웃이 완료되었습니다.') }}>Logout</Nav.Link>
+                <Nav.Link href="/admin/:id">
+                    <img src={option} width="30" height="30" />
+                </Nav.Link>
+            </Nav>
+        </Navbar>
    )
 }

--- a/client/src/Components/SubNav.js
+++ b/client/src/Components/SubNav.js
 import React, { useState, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Navbar, Nav } from 'react-bootstrap';
 function SubNav() {
+    function handleMouseEnter(e) {
+        console.log(e.target)
+    }
    return (
-        <div>
+        <Nav>
-        </div>
+            <Nav.Item eventKey="1">
+                <Nav.Link href="/dress">DRESS</Nav.Link>
+            </Nav.Item>
+            <Nav.Item eventKey="2">
+                <Nav.Link href="/outer">OUTER</Nav.Link>
+            </Nav.Item>
+            <Nav.Item eventKey="3">
+                <Nav.Link href="/top">TOP</Nav.Link>
+            </Nav.Item>
+            <Nav.Item eventKey="4">
+                <Nav.Link href="/bottom">BOTTOM</Nav.Link>
+            </Nav.Item>
+            <Nav.Item eventKey="5">
+                <Nav.Link href="/training">TRAINING</Nav.Link>
+            </Nav.Item>
+            <Nav.Item eventKey="6">
+                <Nav.Link href="/inner">INNER</Nav.Link>
+            </Nav.Item>
+            <Nav.Item eventKey="7">
+                <Nav.Link href="/shoes">SHOES</Nav.Link>
+            </Nav.Item>
+        </Nav>
    )
 }

--- a/client/src/Pages/Admin.js
+++ b/client/src/Pages/Admin.js
 import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router';
+import { Redirect } from 'react-router-dom';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function Admin() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/Home.js
+++ b/client/src/Pages/Home.js
 import React, { useState, useEffect, useRef } from 'react';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function Home() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/Login.js
+++ b/client/src/Pages/Login.js
 import React, { useState, useEffect, useRef } from 'react';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function Login() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/Payment.js
+++ b/client/src/Pages/Payment.js
 import React, { useState, useEffect, useRef } from 'react';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function Payment() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/Products.js
+++ b/client/src/Pages/Products.js
 import React, { useState, useEffect, useRef } from 'react';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function Products() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/ProductsList.js
+++ b/client/src/Pages/ProductsList.js
 import React, { useState, useEffect, useRef } from 'react';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 import Products from './Products';
 function ProductsList() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/ProductsRegist.js
+++ b/client/src/Pages/ProductsRegist.js
 import React, { useState, useEffect, useRef } from 'react';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function ProductsRegist() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/ShoppingCart.js
+++ b/client/src/Pages/ShoppingCart.js
 import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router';
+import { Redirect } from 'react-router-dom';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function ShoppingCart() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/Pages/Signup.js
+++ b/client/src/Pages/Signup.js
 import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router';
+import { Redirect } from 'react-router-dom';
-import Nav1 from '../Components/MainNav';
+import MainNav from '../Components/MainNav';
-import Nav2 from '../Components/SubNav';
+import SubNav from '../Components/SubNav';
 function Signup() {
    return (
        <div>
-            <Nav1 />
+            <MainNav />
-            <Nav2 />
+            <SubNav />
        </div>
    )
 }

--- a/client/src/cart.svg
+++ b/client/src/cart.svg
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><path d="M23.52,29h-15a5.48,5.48,0,0,1-5.31-6.83L6.25,9.76a1,1,0,0,1,1-.76H24a1,1,0,0,1,1,.7l3.78,12.16a5.49,5.49,0,0,1-.83,4.91A5.41,5.41,0,0,1,23.52,29ZM8,11,5.11,22.65A3.5,3.5,0,0,0,8.48,27h15a3.44,3.44,0,0,0,2.79-1.42,3.5,3.5,0,0,0,.53-3.13L23.28,11Z"/><path d="M20,17a1,1,0,0,1-1-1V8a3,3,0,0,0-6,0v8a1,1,0,0,1-2,0V8A5,5,0,0,1,21,8v8A1,1,0,0,1,20,17Z"/></g><g id="frame"><rect class="cls-1" height="32" width="32"/></g></svg>
\ No newline at end of file
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -17,6 +17,7 @@ ReactDOM.render(
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
+        <Route path="/shoppingcart" component={ShoppingCart} />
        <Redirect path="/" to="/" />
      </Switch>
    </Router>

--- a/client/src/option.svg
+++ b/client/src/option.svg
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g id="setting"><path d="M19.06,32H12.94A1.94,1.94,0,0,1,11,30.06V28.38c-.19-.08-.38-.15-.57-.24L9.21,29.37a1.92,1.92,0,0,1-2.68,0l-3.9-3.9a1.92,1.92,0,0,1,0-2.68l1.24-1.23c-.09-.19-.16-.38-.24-.57H1.94A1.94,1.94,0,0,1,0,19.06V12.94A1.94,1.94,0,0,1,1.94,11H3.62c.08-.19.15-.38.24-.57L2.63,9.21a1.92,1.92,0,0,1,0-2.68l3.9-3.9a1.92,1.92,0,0,1,2.68,0l1.23,1.24c.19-.09.38-.16.57-.24V1.94A1.94,1.94,0,0,1,12.94,0h6.12A1.94,1.94,0,0,1,21,1.94V3.62l.57.24,1.22-1.23a1.92,1.92,0,0,1,2.68,0l3.9,3.9a1.92,1.92,0,0,1,0,2.68l-1.24,1.23c.09.19.16.38.24.57h1.68A1.94,1.94,0,0,1,32,12.94v6.12A1.94,1.94,0,0,1,30.06,21H28.38c-.08.19-.15.38-.24.57l1.23,1.22a1.92,1.92,0,0,1,0,2.68l-3.9,3.9a1.92,1.92,0,0,1-2.68,0l-1.23-1.24c-.19.09-.38.16-.57.24v1.68A1.94,1.94,0,0,1,19.06,32Zm-9-7,.63.32a10.57,10.57,0,0,0,1.6.66l.67.22V30l5.62-.06-.06-3.05.7-.22A11.36,11.36,0,0,0,20.93,26l.65-.32,2.29,2.2L27.81,24,25.52,21.9l.31-.59a10.72,10.72,0,0,0,.73-1.71l.21-.6H30l-.06-6H26.89l-.2-.62A11.72,11.72,0,0,0,26,10.71l-.31-.61,2.2-2.2L24,4.11,21.9,6.31,21.27,6a10.57,10.57,0,0,0-1.6-.66L19,5.11V2l-6.06.06L13,5.11l-.67.22a10.57,10.57,0,0,0-1.6.66l-.63.32L7.9,4.11,4.11,8l2.2,2.12L6,10.73a10.57,10.57,0,0,0-.66,1.6L5.11,13H2l.06,5.41,3.05-.06.22.67A10.57,10.57,0,0,0,6,20.62l.32.63-2.2,2.2L8,27.24Z"/><path d="M16,24a8,8,0,1,1,8-8A8,8,0,0,1,16,24Zm0-14a6,6,0,1,0,6,6A6,6,0,0,0,16,10Z"/></g></svg>
\ No newline at end of file
--- a/client/src/tiger.svg
+++ b/client/src/tiger.svg
+<svg width="128" height="128" style="enable-background:new 0 0 128 128;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Layer_2">
+    <g>
+      <g>
+        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="7.1665" x2="41.611" y1="25.8911" y2="25.8911">
+          <stop offset="0.5" style="stop-color:#FFB700"/>
+          <stop offset="0.6437" style="stop-color:#FFB503"/>
+          <stop offset="0.7668" style="stop-color:#FFB10E"/>
+          <stop offset="0.882" style="stop-color:#FFA920"/>
+          <stop offset="0.9" style="stop-color:#FFA723"/>
+        </linearGradient>
+        <circle cx="24.39" cy="25.89" r="17.22" style="fill:url(#SVGID_1_);stroke:#DE8900;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;"/>
+        <circle cx="24.39" cy="25.89" r="9.82" style="fill:#FFFFFF;"/>
+      </g>
+      <g>
+        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="86.389" x2="120.8335" y1="25.8911" y2="25.8911">
+          <stop offset="0.5" style="stop-color:#FFB700"/>
+          <stop offset="0.6437" style="stop-color:#FFB503"/>
+          <stop offset="0.7668" style="stop-color:#FFB10E"/>
+          <stop offset="0.882" style="stop-color:#FFA920"/>
+          <stop offset="0.9" style="stop-color:#FFA723"/>
+        </linearGradient>
+        <circle cx="103.61" cy="25.89" r="17.22" style="fill:url(#SVGID_2_);stroke:#DE8900;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;"/>
+        <circle cx="103.61" cy="25.89" r="9.82" style="fill:#FFFFFF;"/>
+      </g>
+    </g>
+    <g>
+      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="64" x2="64" y1="13.6818" y2="116.8519">
+        <stop offset="0.5" style="stop-color:#FFB700"/>
+        <stop offset="0.6341" style="stop-color:#FCB402"/>
+        <stop offset="0.7489" style="stop-color:#F2A90A"/>
+        <stop offset="0.8564" style="stop-color:#E29717"/>
+        <stop offset="0.9" style="stop-color:#D98E1E"/>
+      </linearGradient>
+      <path d="M64,117.83c-25.77,0-53.5-16.43-53.5-52.5c0-36.07,27.73-52.5,53.5-52.5 c14.27,0,27.48,4.81,37.21,13.54c10.66,9.57,16.29,23.04,16.29,38.96c0,15.84-5.63,29.29-16.29,38.89 C91.45,113,78.24,117.83,64,117.83z" style="fill:url(#SVGID_3_);"/>
+      <path d="M64,14.33L64,14.33c13.9,0,26.75,4.67,36.2,13.16c10.33,9.28,15.8,22.37,15.8,37.84 c0,15.4-5.46,28.46-15.8,37.77c-9.47,8.53-22.33,13.23-36.2,13.23c-25.04,0-52-15.96-52-51c0-15.65,5.46-28.8,15.79-38.01 C37.18,18.94,50.04,14.33,64,14.33 M64,11.33L64,11.33L64,11.33L64,11.33c-28.56,0-55,18.66-55,54c0,35.15,26.44,54,55,54h0h0h0 c28.55,0,55-19.33,55-54C119,30.47,92.56,11.33,64,11.33L64,11.33z" style="fill:#DE8900;"/>
+    </g>
+    <g>
+      <ellipse cx="37.14" cy="58.34" rx="8.84" ry="10" style="fill:#404040;"/>
+      <ellipse cx="90.86" cy="58.22" rx="8.84" ry="10" style="fill:#404040;"/>
+    </g>
+    <path d="M64,91.51c10.62,0,19.23-4.43,19.23,0.99c0,5.43-8.61,21.25-19.23,21.25S44.77,97.93,44.77,92.5 C44.77,87.08,53.38,91.51,64,91.51z" style="fill:#CCCCCC;"/>
+    <path d="M64,86.35c14.11,0,25.54-4.02,25.54,0.9S78.11,106.5,64,106.5S38.46,92.17,38.46,87.25 S49.89,86.35,64,86.35z" style="fill:#231F20;"/>
+    <g>
+      <path d="M57.52,47.03c0,0,0.11-0.17,0.32-0.45c0.05-0.07,0.11-0.14,0.18-0.23 c0.09-0.09,0.2-0.18,0.31-0.29c0.23-0.21,0.5-0.43,0.78-0.62c0.28-0.21,0.61-0.41,0.97-0.59c0.36-0.2,0.76-0.33,1.18-0.49 c0.42-0.12,0.87-0.25,1.33-0.31c0.46-0.09,0.94-0.1,1.41-0.12c0.47,0.02,0.95,0.03,1.41,0.12c0.46,0.06,0.91,0.19,1.33,0.31 c0.42,0.15,0.82,0.29,1.18,0.49c0.36,0.18,0.69,0.38,0.97,0.59c0.29,0.19,0.53,0.4,0.74,0.59c0.21,0.18,0.38,0.36,0.51,0.52 c0.26,0.31,0.39,0.5,0.39,0.5c0.52,0.77,0.32,1.81-0.44,2.33c-0.34,0.23-0.73,0.32-1.11,0.28l-0.33-0.03c0,0-0.18-0.02-0.46-0.07 c-0.28-0.06-0.68-0.12-1.12-0.19c-0.89-0.14-1.99-0.25-3.07-0.26c-1.09,0-2.18,0.12-3.08,0.25c-0.21,0.03-0.41,0.06-0.58,0.08 c-0.09,0.01-0.16,0.02-0.25,0.03c-0.1,0.03-0.19,0.05-0.27,0.07c-0.34,0.09-0.54,0.12-0.54,0.12c-0.95,0.16-1.85-0.48-2.02-1.43 C57.2,47.82,57.3,47.39,57.52,47.03z" style="fill:#404040;"/>
+      <path d="M52.63,37.06c0,0,0.22-0.3,0.65-0.76c0.11-0.12,0.23-0.25,0.36-0.39 c0.16-0.15,0.35-0.29,0.54-0.46c0.39-0.33,0.85-0.7,1.36-1c0.26-0.16,0.52-0.33,0.8-0.5c0.29-0.15,0.59-0.3,0.9-0.45 c0.62-0.33,1.32-0.54,2.04-0.8c0.73-0.19,1.5-0.42,2.3-0.51c0.79-0.15,1.61-0.16,2.43-0.2c0.82,0.04,1.64,0.05,2.43,0.2 c0.8,0.09,1.56,0.32,2.3,0.51c0.72,0.26,1.42,0.48,2.04,0.8c0.31,0.16,0.61,0.31,0.9,0.45c0.28,0.17,0.54,0.34,0.8,0.5 c0.52,0.3,0.95,0.66,1.32,0.97c0.38,0.3,0.68,0.59,0.92,0.85c0.48,0.51,0.72,0.82,0.72,0.82c0.56,0.72,0.43,1.76-0.28,2.32 c-0.41,0.32-0.91,0.42-1.38,0.31l-0.21-0.05c0,0-0.34-0.08-0.88-0.25c-0.26-0.1-0.6-0.18-0.97-0.29 c-0.37-0.11-0.78-0.23-1.23-0.33c-0.44-0.12-0.93-0.22-1.44-0.32c-0.5-0.13-1.05-0.17-1.59-0.28c-0.56-0.05-1.11-0.14-1.69-0.17 C65.17,37.99,64.58,38,64,37.97c-0.58,0.02-1.17,0.01-1.74,0.07c-0.58,0.02-1.14,0.12-1.69,0.17c-0.54,0.11-1.09,0.15-1.59,0.28 c-0.51,0.1-1,0.19-1.44,0.32c-0.44,0.11-0.84,0.22-1.19,0.31c-0.18,0.04-0.34,0.09-0.5,0.13c-0.18,0.06-0.34,0.12-0.49,0.17 c-0.6,0.21-0.95,0.3-0.95,0.3c-0.9,0.24-1.82-0.31-2.06-1.21C52.21,37.99,52.33,37.46,52.63,37.06z" style="fill:#404040;"/>
+      <path d="M51.12,27.09c0,0,0.26-0.33,0.76-0.85c0.13-0.13,0.26-0.27,0.42-0.43 c0.18-0.16,0.39-0.32,0.61-0.5c0.45-0.36,0.96-0.77,1.54-1.1c0.29-0.18,0.59-0.36,0.9-0.56c0.32-0.17,0.67-0.33,1.02-0.5 c0.7-0.36,1.49-0.6,2.3-0.89c0.83-0.21,1.69-0.46,2.59-0.57c0.89-0.16,1.82-0.18,2.74-0.22c0.92,0.04,1.84,0.05,2.74,0.22 c0.9,0.1,1.76,0.35,2.59,0.56c0.81,0.29,1.6,0.53,2.3,0.89c0.35,0.17,0.69,0.34,1.02,0.5c0.31,0.19,0.61,0.38,0.9,0.56 c0.59,0.34,1.07,0.73,1.5,1.08c0.43,0.33,0.78,0.66,1.05,0.95c0.55,0.56,0.83,0.9,0.83,0.9c0.57,0.7,0.47,1.74-0.23,2.31 c-0.42,0.34-0.96,0.45-1.45,0.32l-0.19-0.05c0,0-0.39-0.1-1-0.32c-0.3-0.12-0.69-0.23-1.11-0.36c-0.43-0.13-0.9-0.28-1.42-0.41 c-0.51-0.15-1.08-0.27-1.67-0.39c-0.58-0.16-1.22-0.21-1.84-0.35c-0.65-0.06-1.3-0.18-1.97-0.21c-0.67-0.07-1.35-0.06-2.03-0.09 c-0.68,0.03-1.36,0.02-2.03,0.09c-0.67,0.03-1.33,0.15-1.97,0.21c-0.63,0.14-1.27,0.19-1.84,0.35c-0.59,0.12-1.16,0.24-1.67,0.4 c-0.53,0.14-0.98,0.27-1.38,0.39c-0.2,0.06-0.39,0.12-0.58,0.16c-0.2,0.08-0.39,0.14-0.55,0.21c-0.67,0.25-1.08,0.37-1.08,0.37 c-0.89,0.26-1.82-0.25-2.07-1.14C50.66,28.06,50.8,27.5,51.12,27.09z" style="fill:#404040;"/>
+    </g>
+    <path d="M64,58.45c-4.39,0-8,3.59-8,7.97V76.8c0,4.39,3.61,7.97,8,7.97s8-3.59,8-7.97V66.42 C72,62.03,68.39,58.45,64,58.45z" style="fill:#FF9D00;"/>
+    <g>
+      <circle cx="51.24" cy="85.37" r="16.17" style="fill:#FFFFFF;"/>
+      <circle cx="76.76" cy="85.37" r="16.17" style="fill:#FFFFFF;"/>
+    </g>
+    <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="64.0008" x2="64.0008" y1="70" y2="79.2418">
+      <stop offset="0.1628" style="stop-color:#4D4D4D"/>
+      <stop offset="0.3672" style="stop-color:#373737"/>
+      <stop offset="0.7836" style="stop-color:#0F0F0F"/>
+      <stop offset="1" style="stop-color:#000000"/>
+    </linearGradient>
+    <path d="M64,78.87c3.23,0,6.19-3.26,8-5.92c0.9-1.32-0.04-2.95-1.64-2.95H57.64 c-1.59,0-2.53,1.63-1.64,2.95C57.82,75.61,60.77,78.87,64,78.87z" style="fill:url(#SVGID_4_);"/>
+    <g>
+      <defs>
+        <path id="SVGID_5_" d="M119,65.33c0-34.86-26.44-54-55-54h0h0h0c-28.55,0-55,18.66-55,54c0,35.15,26.44,54,55,54h0h0h0 C92.56,119.33,119,100,119,65.33z"/>
+      </defs>
+      <clipPath id="SVGID_6_">
+        <use style="overflow:visible;" xlink:href="#SVGID_5_"/>
+      </clipPath>
+      <g style="clip-path:url(#SVGID_6_);">
+        <g>
+          <path d="M9.61,59.21l12.73,1.75c0.83,0.11,1.41,0.88,1.29,1.71c-0.09,0.69-0.64,1.2-1.29,1.29L9.61,65.7 c-1.79,0.25-3.44-1.01-3.69-2.8c-0.25-1.79,1.01-3.44,2.8-3.69C9.01,59.17,9.32,59.18,9.61,59.21z" style="fill:#404040;"/>
+          <path d="M9.61,69.21l12.73,1.75c0.83,0.11,1.41,0.88,1.29,1.71c-0.09,0.69-0.64,1.2-1.29,1.29L9.61,75.7 c-1.79,0.25-3.44-1.01-3.69-2.8c-0.25-1.79,1.01-3.44,2.8-3.69C9.01,69.17,9.32,69.17,9.61,69.21z" style="fill:#404040;"/>
+          <path d="M9.61,49.71l12.73,1.75c0.83,0.11,1.41,0.88,1.29,1.71c-0.09,0.69-0.64,1.2-1.29,1.29L9.61,56.2 c-1.79,0.25-3.44-1.01-3.69-2.8c-0.25-1.79,1.01-3.44,2.8-3.69C9.01,49.67,9.32,49.68,9.61,49.71z" style="fill:#404040;"/>
+        </g>
+        <g>
+          <path d="M118.67,65.73l-12.73-1.75c-0.83-0.11-1.41-0.88-1.29-1.71c0.09-0.69,0.64-1.2,1.29-1.29 l12.73-1.75c1.79-0.25,3.44,1.01,3.69,2.8s-1.01,3.44-2.8,3.69C119.26,65.77,118.95,65.77,118.67,65.73z" style="fill:#404040;"/>
+          <path d="M118.67,75.72l-12.73-1.75c-0.83-0.11-1.41-0.88-1.29-1.71c0.09-0.69,0.64-1.2,1.29-1.29 l12.73-1.75c1.79-0.25,3.44,1.01,3.69,2.8s-1.01,3.44-2.8,3.69C119.26,75.77,118.95,75.76,118.67,75.72z" style="fill:#404040;"/>
+          <path d="M118.67,56.23l-12.73-1.75c-0.83-0.11-1.41-0.88-1.29-1.71c0.09-0.69,0.64-1.2,1.29-1.29 l12.73-1.75c1.79-0.25,3.44,1.01,3.69,2.8s-1.01,3.44-2.8,3.69C119.26,56.27,118.95,56.27,118.67,56.23z" style="fill:#404040;"/>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g id="Layer_1" style="display:none;">
+    <g style="display:inline;">
+      <g style="opacity:0.6;">
+        <circle cx="64" cy="64" r="28" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2625;stroke-miterlimit:10;"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="84" x2="84" y1="0" y2="128"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="44" x2="44" y1="0" y2="128"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="64" x2="64" y1="0" y2="128"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="64" y2="64"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="44" y2="44"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="83.75" y2="83.75"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="0" y1="128" y2="0"/>
+        <line style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="0" x2="128" y1="128" y2="0"/>
+        <g style="opacity:0.61;">
+          <path d="M64,4.26c32.94,0,59.74,26.8,59.74,59.74S96.94,123.74,64,123.74S4.26,96.94,4.26,64S31.06,4.26,64,4.26 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z"/>
+        </g>
+        <path d="M107.97,115.97H20.03 c-4.42,0-8.03-3.61-8.03-8.03V20.03c0-4.42,3.61-8.03,8.03-8.03h87.94c4.42,0,8.03,3.61,8.03,8.03v87.91 C116,112.36,112.39,115.97,107.97,115.97z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2578;stroke-miterlimit:10;"/>
+        <path d="M100,124H28c-4.4,0-8-3.6-8-8 V12c0-4.4,3.6-8,8-8h72c4.4,0,8,3.6,8,8v104C108,120.4,104.4,124,100,124z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2628;stroke-miterlimit:10;"/>
+        <path d="M113.77,108H14.23 C8.6,108,4,103.4,4,97.77V30.28c0-5.63,4.6-10.23,10.23-10.23h99.54c5.63,0,10.23,4.6,10.23,10.23v67.48 C124,103.4,119.4,108,113.77,108z" style="opacity:0.61;fill:none;stroke:#000000;stroke-width:0.2627;stroke-miterlimit:10;"/>
+      </g>
+      <g>
+        <g style="opacity:0.2;">
+          <defs>
+            <rect id="SVGID_24_" height="128" style="opacity:0.2;" width="128" x="0" y="0"/>
+          </defs>
+          <clipPath id="SVGID_7_">
+            <use style="overflow:visible;" xlink:href="#SVGID_24_"/>
+          </clipPath>
+          <g style="clip-path:url(#SVGID_7_);">
+            <g>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-28" x2="-28" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-24" x2="-24" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-20" x2="-20" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-16" x2="-16" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-12" x2="-12" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-8" x2="-8" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-4" x2="-4" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="0" x2="0" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="4" x2="4" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="8" x2="8" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="12" x2="12" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="16" x2="16" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="20" x2="20" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="24" x2="24" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="28" x2="28" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="32" x2="32" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="36" x2="36" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="40" x2="40" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="44" x2="44" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="48" x2="48" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="52" x2="52" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="56" x2="56" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="60" x2="60" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="64" x2="64" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="68" x2="68" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="72" x2="72" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="76" x2="76" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="80" x2="80" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="84" x2="84" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="88" x2="88" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="92" x2="92" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="96" x2="96" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="100" x2="100" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="104" x2="104" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="108" x2="108" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="112" x2="112" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="116" x2="116" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="120" x2="120" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="124" x2="124" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="128" x2="128" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="132" x2="132" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="136" x2="136" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="137" x2="137" y1="166.05" y2="-25.95"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="144" x2="144" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="148" x2="148" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="152" x2="152" y1="160" y2="-32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="156" x2="156" y1="160" y2="-32"/>
+            </g>
+            <g>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-28" y2="-28"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-24" y2="-24"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-20" y2="-20"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-16" y2="-16"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-12" y2="-12"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-8" y2="-8"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="-4" y2="-4"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="0" y2="0"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="4" y2="4"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="8" y2="8"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="12" y2="12"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="16" y2="16"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="20" y2="20"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="24" y2="24"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="28" y2="28"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="32" y2="32"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="36" y2="36"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="40" y2="40"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="44" y2="44"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="48" y2="48"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="52" y2="52"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="56" y2="56"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="60" y2="60"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="64" y2="64"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="68" y2="68"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="72" y2="72"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="76" y2="76"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="80" y2="80"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="84" y2="84"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="88" y2="88"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="92" y2="92"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="96" y2="96"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="100" y2="100"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="104" y2="104"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="108" y2="108"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="112" y2="112"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="116" y2="116"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="120" y2="120"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="124" y2="124"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="128" y2="128"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="132" y2="132"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="136" y2="136"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="140" y2="140"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="144" y2="144"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="148" y2="148"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="152" y2="152"/>
+              <line style="fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;" x1="-32" x2="160" y1="156" y2="156"/>
+            </g>
+            <path d="M159.75-31.75v191.5h-191.5v-191.5H159.75 M160-32H-32v192h192V-32L160-32z"/>
+          </g>
+        </g>
+        <g>
+          <rect height="128" style="opacity:0.3;fill:#F44336;" width="4" x="0" y="0"/>
+          <rect height="128" style="opacity:0.3;fill:#F44336;" width="4" x="124" y="0"/>
+          <rect height="120" style="opacity:0.3;fill:#F44336;" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 66 -62)" width="4" x="62" y="-58"/>
+          <rect height="120" style="opacity:0.3;fill:#F44336;" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 190 62)" width="4" x="62" y="66"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file