111 lines
4.6 KiB
JavaScript
111 lines
4.6 KiB
JavaScript
import React, {Component} from 'react';
|
|
import { Header, Grid, Message, Button, Segment, Responsive, Image} from 'semantic-ui-react';
|
|
import {Link } from "react-router-dom";
|
|
import MyHeader from '../components/HeaderController'
|
|
|
|
|
|
export default class FourOhFour extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
const meme = ['1.jpeg', '2.jpeg', '3.png', '4.jpeg', '5.jpeg', '6.jpg', '7.jpg',
|
|
'8.jpg', '9.jpeg', '10.jpg', '11.jpeg', '12.gif', '13.gif', '14.gif'];
|
|
var arrayNum = Math.floor(Math.random() * 13) + 1;
|
|
var path = 'img/room_404_meme/' + meme[arrayNum];
|
|
this.state = {meme : path};
|
|
}
|
|
|
|
render() {
|
|
|
|
return (
|
|
<Segment.Group>
|
|
<Responsive as={Segment} minWidth={768}>
|
|
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
|
<Grid >
|
|
<Grid.Row color='black'>
|
|
<Grid.Column>
|
|
<MyHeader logout={this.props.logout} />
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row color='black'>
|
|
<Grid.Column width={16}>
|
|
<Segment inverted color='red'>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column textAlign='center'>
|
|
<h1>404 Page Not Found</h1>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
<Grid.Column width={8}>
|
|
<Image centered src={this.state.meme} size='medium' />
|
|
</Grid.Column>
|
|
<Grid.Column width={8}>
|
|
<p>
|
|
Hey what are you doing here?
|
|
Looks like you are lost, this room does not exist. Maybe you were looking for
|
|
the kitchen, or the garage, or the bedroom, or your love room... so don't
|
|
wait here and let's go back to our main room! ...or refresh this page
|
|
some times...
|
|
</p>
|
|
<Button fluid inverted color='white'>
|
|
<Link style={{color: 'black'}} to="/">Let's go back to our main room!</Link>
|
|
</Button>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Segment>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</div>
|
|
</Responsive>
|
|
|
|
<Responsive as={Segment} maxWidth={768}>
|
|
<div style={{background: '#1b1c1d'}}>
|
|
<Grid >
|
|
<Grid.Row color='black'>
|
|
<Grid.Column>
|
|
<MyHeader logout={this.props.logout} />
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row color='black'>
|
|
<Grid.Column width={16}>
|
|
<Segment inverted color='red'>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column textAlign='center'>
|
|
<h1>404 Page Not Found</h1>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
<Grid.Column width={16}>
|
|
<Image centered src={this.state.meme} size='medium' />
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
<Grid.Column width={16}>
|
|
<p>
|
|
Hey what are you doing here?
|
|
Looks like you are lost, this room does not exist. Maybe you were looking for
|
|
the kitchen, or the garage, or the bedroom, or your love room... so don't
|
|
wait here and let's go back to our main room! ...or refresh this page
|
|
some times...
|
|
</p>
|
|
<Button fluid inverted color='white'>
|
|
<Link style={{color: 'black'}} to="/">Let's go back to our main room!</Link>
|
|
</Button>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Segment>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</div>
|
|
</Responsive>
|
|
</Segment.Group>
|
|
)
|
|
}
|
|
}
|