Enri1196
/
lordfrontend
1
0
Fork 4
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: Enri1196:master
Branches Tags
Enri1196:master
Mick877:master
..
compare: Mick877:master
Branches Tags
Mick877:master
Enri1196:master

No commits in common. "master" and "master" have entirely different histories.
master ... master

22 changed files with 35 additions and 275 deletions
Show Stats Expand all files Collapse all files

2
public/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1" /> <meta name="viewport" content="initial-scale=1" />
<title>LORD//CHANNEL</title> <title>MPBE</title>
</head> </head>
<body style="background-color: #343a40;"> <body style="background-color: #343a40;">
<div id="root"></div> <div id="root"></div>

31
src/App.js
View File

@ -1,41 +1,16 @@
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react'; import React, { Suspense, lazy } from 'react';
import Loading from "./routes/Loading";
//const Home = lazy(() => import('./routes/Home')); const Home = lazy(() => import('./Home'));
const Home = lazy(() => { //const About = lazy(() => import('./About'));
return new Promise(resolve => {
setTimeout(() => resolve(import("./routes/Home")), 500);
});
});
const Film = lazy(() => import('./routes/Film'));
const Anime = lazy(() => import('./routes/Anime'));
const SerieTV = lazy(() => import('./routes/SerieTV'));
const Immagini = lazy(() => import('./routes/Immagini'));
const Musica = lazy(() => import('./routes/Musica'));
const Giochi = lazy(() => import('./routes/Giochi'));
const Programmi = lazy(() => import('./routes/Programmi'));
const Pannocchiacattiva = lazy(() => import('./routes/Pannocchiacattiva'))
const NotFound = lazy(() => import('./routes/NotFound'));
class App extends React.Component { class App extends React.Component {
render() { render() {
return ( return (
<Router> <Router>
<Suspense fallback={<Loading />}> <Suspense fallback={<div>Loading...</div>}>
<Switch> <Switch>
<Route exact path="/" component={Home}/> <Route exact path="/" component={Home}/>
<Route path="/Film" component={Film}/>
<Route path="/Anime" component={Anime}/>
<Route path="/SerieTV" component={SerieTV}/>
<Route path="/Immagini" component={Immagini}/>
<Route path="/Musica" component={Musica}/>
<Route path="/Giochi" component={Giochi}/>
<Route path="/Programmi" component={Programmi}/>
<Route path="/Pannocchiacattiva" component={Pannocchiacattiva}/>
<Route component={NotFound} />
</Switch> </Switch>
</Suspense> </Suspense>
</Router> </Router>

15
src/Buttons.js
View File

@ -1,17 +1,22 @@
import React from 'react'; import React from 'react'
import {Link} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
import './Buttons.css'; import './Buttons.css';
class NavButton extends React.Component { export default class NavButton extends React.Component {
render() { render() {
return ( return (
<li className="nav-item"> <li className="nav-item">
<Link to={this.props.lhref}><button className="btn1">{this.props.name}</button></Link> <Button name={this.props.name} />
</li> </li>
); );
} }
} }
export default NavButton; export class Button extends React.Component {
render() {
return (
<button className="btn1">{this.props.name}</button>
);
}
}

8
src/routes/Home.js → src/Home.js
View File

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import Navbar from '../Navbar'; import Navbar from './Navbar';
import Parallax from '../Parallax'; import Parallax from './Parallax';
import CardContainer from '../CardContainer'; import CardContainer from './CardContainer';
class Home extends React.Component { class Home extends React.Component {
render() { render() {
return ( return (
<> <>
<Navbar brand="CHANNEL" /> <Navbar brand="LORDNABBO" />
<Parallax /> <Parallax />
<CardContainer sectionTitle="Latest Uploads" /> <CardContainer sectionTitle="Latest Uploads" />
<CardContainer sectionTitle="Random" /> <CardContainer sectionTitle="Random" />

2
src/ModalButton.css
View File

@ -1,4 +1,4 @@
.VideoPlayer { .videoPlayer {
width: 100%; width: 100%;
height: 250px; height: 250px;
background-color: black; background-color: black;

15
src/ModalButton.js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
import Button from 'react-bootstrap/Button'; import Button from './Buttons';
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
import './Buttons.css'; import './Buttons.css';
import './ModalButton.css'; import './ModalButton.css';
@ -11,17 +11,16 @@ function ModalButton() {
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
return ( return (
<> <>
<Button className="btn1" onClick={handleShow} lhref="#">View</Button> <Button className="btn1" name="view" onClick={handleShow} />
<Modal show={show} onHide={handleClose}> <Modal show={show} onHide={handleClose}>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>Card Title</Modal.Title> <Modal.Title>Card Title</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div className="VideoPlayer"></div> <VideoPlayer />
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
</Modal.Body> </Modal.Body>
</Modal> </Modal>
@ -29,4 +28,12 @@ function ModalButton() {
); );
} }
class VideoPlayer extends React.Component {
render() {
return (
<div className="videoPlayer"></div>
);
}
}
export default ModalButton; export default ModalButton;

18
src/Navbar.js
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom';
import NavButton from './Buttons'; import NavButton from './Buttons';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
@ -9,24 +8,17 @@ class Navbar extends React.Component {
render() { render() {
return ( return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark"> <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<Link to="/"><span className="navbar-brand">LORD//{this.props.brand}</span></Link> <span className="navbar-brand">{this.props.brand}</span>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navButtons" aria-controls="navButtons" aria-expanded="false" aria-label="Toggle navigation"> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navButtons" aria-controls="navButtons" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
<div className="collapse navbar-collapse flex" id="navButtons"> <div className="collapse navbar-collapse flex" id="navButtons">
<ul className="navbar-nav nav-mod"> <ul className="navbar-nav nav-mod">
<NavButton name="Film" lhref="/Film" /> <NavButton name="Home" />
<NavButton name="Anime" lhref="/Anime" /> <NavButton name="Film" />
<NavButton name="Serie TV" lhref="/Serietv" /> <NavButton name="Series" />
<NavButton name="Immagini" lhref="/Immagini" /> <NavButton name="About" />
<NavButton name="Musica" lhref="/Musica" />
<NavButton name="Giochi" lhref="/Giochi" />
<NavButton name="Programmi" lhref="/Programmi" />
</ul> </ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn1" type="submit">Search</button>
</form>
</div> </div>
</nav> </nav>
); );

14
src/routes/Anime.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
class Anime extends React.Component {
render() {
return (
<>
<Navbar brand="ANIME" />
</>
);
}
}
export default Anime;

14
src/routes/Film.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
class Film extends React.Component {
render() {
return (
<>
<Navbar brand="FILM" />
</>
);
}
}
export default Film;

14
src/routes/Giochi.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
class Giochi extends React.Component {
render() {
return (
<>
<Navbar brand="GIOCHI" />
</>
);
}
}
export default Giochi;

14
src/routes/Immagini.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
class Immagini extends React.Component {
render() {
return (
<>
<Navbar brand="IMMAGINI" />
</>
);
}
}
export default Immagini;

38
src/routes/Loading.js
View File

@ -1,38 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import "./centercontainer.css";
import loading1 from "./loadinggifs/loading1.gif";
import loading2 from "./loadinggifs/loading2.gif";
import loading3 from "./loadinggifs/loading3.gif";
import loading4 from "./loadinggifs/loading4.gif";
class Loading extends React.Component {
render() {
let randInt = () => {
return Math.round(Math.random() * 4);
};
let randomGif = () => {
let images = [loading1, loading2, loading3, loading4]
return images[randInt()];
};
console.log(randomGif())
return (
<>
<Navbar brand="LOADING" />
<div className="centered">
<div className="row">
<img alt="Loading..." src={randomGif()} />
</div>
</div>
</>
);
}
}
export default Loading;

14
src/routes/Musica.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
class Musica extends React.Component {
render() {
return (
<>
<Navbar brand="MUSICA" />
</>
);
}
}
export default Musica;

22
src/routes/NotFound.js
View File

@ -1,22 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import "./centercontainer.css"
class NotFound extends React.Component {
render() {
return (
<>
<Navbar brand="404" />
<div className="centered">
<div className="row">
<img alt="Loading..." src="https://i.pinimg.com/originals/8f/c3/21/8fc32146cbf72ae17430e05ecc8b61be.gif" />
</div>
</div>
</>
);
}
}
export default NotFound;

46
src/routes/Pannocchiacattiva.js
View File

@ -1,46 +0,0 @@
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';
import '../Buttons.css';
import Navbar from '../Navbar';
class Pannocchiacattiva extends React.Component {
render() {
const shiroTexto = {
color: 'white'
}
return (
<>
<Navbar brand="PANNOCCHIA" />
<div className="centered" style={shiroTexto}>
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Control type="text" placeholder="Titolo Anime" />
</Form.Group>
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Control type="text" placeholder="Trama" as="textarea" rows="3" />
</Form.Group>
<Form.Row>
<Form.Group as={Col} controlId="formGridCity">
<Form.Control type="text" placeholder="Durata" />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Control type="text" placeholder="Voto" />
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Control type="text" placeholder="Lingua" />
</Form.Group>
</Form.Row>
<button className="btn1">Submit</button>
</Form>
</div>
</>
);
}
}
export default Pannocchiacattiva;

14
src/routes/Programmi.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
class Programmi extends React.Component {
render() {
return (
<>
<Navbar brand="PROGRAMMI" />
</>
);
}
}
export default Programmi;

14
src/routes/SerieTV.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Navbar from '../Navbar';
class SerieTV extends React.Component {
render() {
return (
<>
<Navbar brand="SERIETV" />
</>
);
}
}
export default SerieTV;

15
src/routes/centercontainer.css
View File

@ -1,15 +0,0 @@
.centered {
height: 93vh;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
}
img {
height: 30vh;
width: auto;
}

BIN
src/routes/loadinggifs/loading1.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

BIN
src/routes/loadinggifs/loading2.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 679 KiB

BIN
src/routes/loadinggifs/loading3.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 117 KiB

BIN
src/routes/loadinggifs/loading4.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 268 KiB