First Commit

2020-01-13 23:51:54 +01:00
27 changed files with 85 additions and 272 deletions
--- a/public/index.html
+++ b/public/index.html
@ -3,7 +3,7 @@
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1" />
-        <title>LORD//CHANNEL</title>
+        <title>LORDNABBO</title>
    </head>
    <body style="background-color: #343a40;">
        <div id="root"></div>
--- a/src/About.js
+++ b/src/About.js
@ -0,0 +1,14 @@
 import React from 'react';
 import Navbar from './Navbar';
 class About extends React.Component {
    render() {
        return (
            <>
                <Navbar brand="LORDNABBO" />
            </>
        );
    }
 }
 export default About;
--- a/src/App.js
+++ b/src/App.js
@ -1,41 +1,21 @@
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 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 => {
+const Notfound = lazy(() => import('./notfound'));
        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 {
    render() {
        return (
            <Router>
-                <Suspense fallback={<Loading />}>
+                <Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                        <Route exact path="/" component={Home}/>
-                        <Route path="/Film" component={Film}/>
+                        <Route path="/About" component={About}/>
                        <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} />
+                        <Route component={Notfound} />
                    </Switch>
                </Suspense>
            </Router>
--- a/src/Buttons.js
+++ b/src/Buttons.js
@ -1,17 +1,23 @@
-import React from 'react';
+import React from 'react'
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router-dom'
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
 import './Buttons.css';
-class NavButton extends React.Component {
+export default class NavButton extends React.Component {
    render() {
        return (
        <li className="nav-item">
-            <Link to={this.props.lhref}><button className="btn1">{this.props.name}</button></Link>
+            <Button name={this.props.name} />
        </li>
        );
    }
 }
-export default NavButton;
+export class Button extends React.Component {
    render() {
        return (
        <button className="btn1" type="button"><Link to="/About">{this.props.name}</Link></button>
        );
    }
 }
--- a/src/Error.jpg
+++ b/src/Error.jpg
--- a/src/Error.png
+++ b/src/Error.png
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@ -1,13 +1,13 @@
 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 {
    render() {
        return (
            <>
-                <Navbar brand="CHANNEL" />
+                <Navbar brand="LORDNABBO" />
                <Parallax />
                <CardContainer sectionTitle="Latest Uploads" />
                <CardContainer sectionTitle="Random" />
--- a/src/ModalButton.css
+++ b/src/ModalButton.css
@ -1,4 +1,4 @@
-.VideoPlayer {
+.videoPlayer {
    width: 100%;
    height: 250px;
    background-color: black;
--- a/src/ModalButton.js
+++ b/src/ModalButton.js
@ -1,7 +1,7 @@
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
-import Button from 'react-bootstrap/Button';
+import Button from './Buttons';
 import Modal from 'react-bootstrap/Modal';
 import './Buttons.css';
 import './ModalButton.css';
@ -11,17 +11,16 @@ function ModalButton() {
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    return (
    <>
-        <Button className="btn1" onClick={handleShow} lhref="#">View</Button>
+        <Button className="btn1" name="view" onClick={handleShow} />
        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>Card Title</Modal.Title>
            </Modal.Header>
            <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.
            </Modal.Body>
        </Modal>
@ -29,4 +28,12 @@ function ModalButton() {
    );
 }
 class VideoPlayer extends React.Component {
    render() {
        return (
            <div className="videoPlayer"></div>
        );
    }
 }
 export default ModalButton;
--- a/src/Navbar.js
+++ b/src/Navbar.js
@ -1,5 +1,4 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
 import NavButton from './Buttons';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
@ -9,23 +8,20 @@ class Navbar extends React.Component {
    render() {
        return (
        <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">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse flex" id="navButtons">
                <ul className="navbar-nav nav-mod">
-                    <NavButton name="Film" lhref="/Film" />
+                    <NavButton name="Home" lhref="/" />
-                    <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" lhref="/About" />
                    <NavButton name="Musica" lhref="/Musica" />
                    <NavButton name="Giochi" lhref="/Giochi" />
                    <NavButton name="Programmi" lhref="/Programmi" />
                </ul>
-                <form className="form-inline my-2 my-lg-0">
+                <form class="form-inline my-2 my-lg-0">
-                    <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
-                    <button className="btn1" type="submit">Search</button>
+                    <button class="btn1" type="submit">Search</button>
                </form>
            </div>
        </nav>
--- a/src/NavbarError.css
+++ b/src/NavbarError.css
@ -0,0 +1,7 @@
 .centered{
    text-align: center;
 }
 .loli-not-found{
    height: 300px;
    width: 300px;  /*modifica la dimensione dell'immagine come ritieni opportuno*/
 }
--- a/src/notfound.js
+++ b/src/notfound.js
@ -0,0 +1,22 @@
 import React from 'react';
 import Navbar from './Navbar';
 class NotFound extends React.Component {    //non mi caricava l'immagine il server quindi non so se le modifiche che ho fatto funzionano sull'immagine spero di si
    render() {
        return (
            <>
                <Navbar brand="LORD//404" />
                <div class="container">
                    <h1 class="header">
                        SwEMBRA CHwE QwUALCwOSA SwIA ANDwATO STwORTwO NYAN! UwU
                        <div class="container centered loli-not-found">
                            <img src="Error.png" alt="ragazza anime molto carina"></img>     
                        </div>
                    </h1>
                </div>
            </>
        );
    }
 }
 export default NotFound;
--- a/src/routes/Anime.js
+++ b/src/routes/Anime.js
@ -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;
--- a/src/routes/Film.js
+++ b/src/routes/Film.js
@ -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;
--- a/src/routes/Giochi.js
+++ b/src/routes/Giochi.js
@ -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;
--- a/src/routes/Immagini.js
+++ b/src/routes/Immagini.js
@ -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;
--- a/src/routes/Loading.js
+++ b/src/routes/Loading.js
@ -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;
--- a/src/routes/Musica.js
+++ b/src/routes/Musica.js
@ -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;
--- a/src/routes/NotFound.js
+++ b/src/routes/NotFound.js
@ -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;
--- a/src/routes/Pannocchiacattiva.js
+++ b/src/routes/Pannocchiacattiva.js
@ -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;
--- a/src/routes/Programmi.js
+++ b/src/routes/Programmi.js
@ -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;
--- a/src/routes/SerieTV.js
+++ b/src/routes/SerieTV.js
@ -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;
--- a/src/routes/centercontainer.css
+++ b/src/routes/centercontainer.css
@ -1,15 +0,0 @@
 .centered {
    height: 93vh;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .row {
    width: auto;
 }
 img {
    height: 30vh;
    width: auto;
 }
--- a/src/routes/loadinggifs/loading1.gif
+++ b/src/routes/loadinggifs/loading1.gif
--- a/src/routes/loadinggifs/loading2.gif
+++ b/src/routes/loadinggifs/loading2.gif
--- a/src/routes/loadinggifs/loading3.gif
+++ b/src/routes/loadinggifs/loading3.gif
--- a/src/routes/loadinggifs/loading4.gif
+++ b/src/routes/loadinggifs/loading4.gif