p20319658
/
monkey
forked from p34709852/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI: Add tsparticles to landing-page. Stretched the landing page main 

screen
This commit is contained in:
Ilija Lazoroski 2021-07-27 11:52:25 +02:00
parent 9119a49bff
commit 61229f259b
3 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx
View File

@ -1,17 +1,19 @@
import React from 'react'; import React from 'react';
import {Col, Row} from 'react-bootstrap'; import {Container,Col, Row} from 'react-bootstrap';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faFileCode, faLightbulb} from '@fortawesome/free-solid-svg-icons'; import {faFileCode, faLightbulb} from '@fortawesome/free-solid-svg-icons';
import '../../styles/pages/LandingPage.scss'; import '../../styles/pages/LandingPage.scss';
import IslandHttpClient from "../IslandHttpClient"; import IslandHttpClient from "../IslandHttpClient";
import ParticleBackground from '../ui-components/ParticleBackground';
import Logo from "../logo/LogoComponent"; import Logo from "../logo/LogoComponent";
const LandingPageComponent = (props) => { const LandingPageComponent = (props) => {
return ( return (
<> <>
<ParticleBackground/>
<Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}} <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
lg={{offset: 3, span: 9}} xl={{offset: 3, span: 6}} lg={{offset: 3, span: 9}} xl={{offset: 3, span: 6}}
className={'landing-page'}> className={'landing-page'}>
@ -20,13 +22,13 @@ const LandingPageComponent = (props) => {
<ScenarioButtons/> <ScenarioButtons/>
<br/> <br/>
</div> </div>
</Col> <br/>
<br/>
<Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}} <Col className={'guardicore-logo'}>
lg={{offset: 3, span: 9}} xl={{offset: 3, span: 6}}
className={'guardicore-logo'}>
<Logo/> <Logo/>
</Col> </Col>
</Col>
</> </>
); );
@ -86,13 +88,13 @@ function MonkeyInfo() {
} }
function ScenarioInfo() { function ScenarioInfo() {
// TODO change links when added to documentation // TODO change link when scenarios are added to documentation
return ( return (
<> <>
<div className={'scenario-info'}> <div className={'scenario-info'}>
Check the Infection Monkey documentation hub for more information Check the Infection Monkey documentation hub for more information
on <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank"> on <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
simulations scenarios
</a>. </a>.
</div> </div>
</> </>

2
monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss
View File

@ -1,5 +1,5 @@
.particle-background { .particle-background {
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: -100; z-index: -100;

13
monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss
View File

@ -1,3 +1,10 @@
.landing-page {
background-color: rgba(255, 255, 255, 0.89);
position: absolute !important;
height: 100%;
bottom: 0;
}
.landing-page h1.page-title { .landing-page h1.page-title {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@ -20,10 +27,10 @@
height: 100%; height: 100%;
} }
.guardicore-logo { .landing-page .guardicore-logo {
margin-bottom: 0.5em; position: absolute;
position: absolute !important;
bottom: 0; bottom: 0;
left: 0 !important;
} }
.guardicore-logo .license-text { .guardicore-logo .license-text {