index alow ready
@ -3,13 +3,14 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<!-- <img src="/src/assets/logo_livecinema.png" class="d-inline-block align-text-top me-4 d-none d-sm-block"> -->
|
||||
<link rel="icon" type="image/svg+xml" href="/src/assets/logo_livecinema.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>LiveCinema</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="root" class="min-vh-100 d-flex flex-column"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
|
||||
BIN
public/logotip_LC.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
@ -1,4 +1,4 @@
|
||||
#root {
|
||||
/* #root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
@ -39,4 +39,4 @@
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
} */
|
||||
@ -9,7 +9,7 @@ const App = ({ routes }) => {
|
||||
return (
|
||||
<>
|
||||
<Navigation routes={routes}></Navigation>
|
||||
<Container className='p-2' as="main" fluid>
|
||||
<Container className='flex-fill d-flex justify-content-center' as="main">
|
||||
<Outlet />
|
||||
</Container>
|
||||
<Footer />
|
||||
|
||||
BIN
src/assets/11.jpeg
Normal file
|
After Width: | Height: | Size: 9.6 KiB |
BIN
src/assets/222.jpeg
Normal file
|
After Width: | Height: | Size: 9.0 KiB |
BIN
src/assets/86.jpg
Normal file
|
After Width: | Height: | Size: 86 KiB |
BIN
src/assets/Barbie-fon.jpeg
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/barbie_big.png
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/bg.png
Normal file
|
After Width: | Height: | Size: 596 KiB |
BIN
src/assets/bg2.png
Normal file
|
After Width: | Height: | Size: 630 KiB |
BIN
src/assets/films.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/frame1.jpg
Normal file
|
After Width: | Height: | Size: 258 KiB |
BIN
src/assets/frame2.webp
Normal file
|
After Width: | Height: | Size: 248 KiB |
BIN
src/assets/frame3.jpg
Normal file
|
After Width: | Height: | Size: 493 KiB |
BIN
src/assets/frame4.jpg
Normal file
|
After Width: | Height: | Size: 624 KiB |
BIN
src/assets/img1.webp
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/img10.webp
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/img11.webp
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/img12.webp
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/img13.webp
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/img2.webp
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/img3.webp
Normal file
|
After Width: | Height: | Size: 9.6 KiB |
BIN
src/assets/img4.webp
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/assets/img5.webp
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/img6.webp
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/img7.webp
Normal file
|
After Width: | Height: | Size: 9.8 KiB |
BIN
src/assets/img8.webp
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/img9.webp
Normal file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/logo_light.png
Normal file
|
After Width: | Height: | Size: 458 KiB |
BIN
src/assets/logo_livecinema.png
Normal file
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/logotip_LC.png
Normal file
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/pngwing.com (1).png
Normal file
|
After Width: | Height: | Size: 9.6 KiB |
BIN
src/assets/pngwing.com.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/scale.jpeg
Normal file
|
After Width: | Height: | Size: 156 KiB |
BIN
src/assets/Без названия (1).jpeg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/Без названия.jpeg
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
src/assets/Полицейский_с_Рублёвки._Новогодний_беспредел.jpeg
Normal file
|
After Width: | Height: | Size: 198 KiB |
BIN
src/assets/сериалы.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
5
src/components/footer/Footer.css
Normal file
@ -0,0 +1,5 @@
|
||||
.my-footer {
|
||||
background-color: #3C2C72;
|
||||
color: white;
|
||||
height: 32px;
|
||||
}
|
||||
13
src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import './Footer.css';
|
||||
|
||||
const Footer = () => {
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Автор, {year}
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -0,0 +1,14 @@
|
||||
.my-navbar {
|
||||
background-color: #3C2C72;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.my-navbar .link a:hover {
|
||||
text-decoration: underline !important;
|
||||
color: rgb(251, 158, 149);
|
||||
}
|
||||
|
||||
.my-navbar .logo {
|
||||
/* width: 60px; */
|
||||
height: 30px;
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||
// import { Cart2 } from 'react-bootstrap-icons';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import './Navigation.css';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const location = useLocation();
|
||||
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||
|
||||
return (
|
||||
<header>
|
||||
<Navbar expand='md' data-bs-theme='dark' className='my-navbar'>
|
||||
<Container fluid>
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||
{/* <Cart2 className='d-inline-block align-top me-1 logo' /> */}
|
||||
<img src="./src/assets/logo_livecinema.png" alt="" className='logo' />
|
||||
LiveCinema
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||
{
|
||||
pages.map((page) =>
|
||||
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||
{page.title}
|
||||
</Nav.Link>)
|
||||
}
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
{/* <nav className="my-navbar navbar-expand-lg navbar-dark">
|
||||
<div className="container-fluid">
|
||||
<a className="navbar-brand d-flex align-items-center">
|
||||
<img src={logo} className="d-inline-block align-text-top me-4 d-none d-sm-block" />
|
||||
LiveCinema
|
||||
</a>
|
||||
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span className="navbar-toggler-icon" />
|
||||
</button>
|
||||
<div className="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link active" href="index.html">Главная</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="katalog.html">Каталог</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="logIn.html">Регистрация</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="into.html">Вход</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="subscribe.html">Подписка</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="admin.html">Админка</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav> */}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
BIN
src/fonts/Candara Light.TTF
Normal file
BIN
src/fonts/Carattere-Regular.ttf
Normal file
BIN
src/fonts/Commissioner-ExtraLight.ttf
Normal file
BIN
src/fonts/Commissioner-Thin.ttf
Normal file
BIN
src/fonts/candara-light.ttf
Normal file
BIN
src/fonts/candara.ttf
Normal file
@ -1,4 +1,4 @@
|
||||
:root {
|
||||
/* :root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
@ -65,4 +65,4 @@ button:focus-visible {
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
} */
|
||||
59
src/main.jsx
@ -5,8 +5,57 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom';
|
||||
import App from './App.jsx';
|
||||
import './index.css';
|
||||
import ErrorPage from './pages/ErrorPage.jsx';
|
||||
import Page1 from './pages/Page1.jsx';
|
||||
import Page2 from './pages/Page2.jsx';
|
||||
import Page3 from './pages/Page3.jsx';
|
||||
import Page4 from './pages/Page4.jsx';
|
||||
import PageEdit from './pages/PageEdit.jsx';
|
||||
import Index from './pages/Index.jsx';
|
||||
// import Catalog from './pages/Catalog.jsx';
|
||||
// import Into from './pages/Into.jsx';
|
||||
// import Login from './pages/Login.jsx';
|
||||
// import Subscribe from './pages/Subscribe.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <Index />,
|
||||
title: 'Главная страница',
|
||||
},
|
||||
// {
|
||||
// path: '/catalog',
|
||||
// element: <Catalog />,
|
||||
// title: 'Каталог',
|
||||
// },
|
||||
// {
|
||||
// path: '/into',
|
||||
// element: <Into />,
|
||||
// title: 'Вход',
|
||||
// },
|
||||
// {
|
||||
// path: '/login',
|
||||
// element: <Login />,
|
||||
// title: 'Регистрация',
|
||||
// },
|
||||
// {
|
||||
// path: '/subscribe',
|
||||
// element: <Subscribe />,
|
||||
// title: 'Подписка',
|
||||
// },
|
||||
// {
|
||||
// path: '/subscribe',
|
||||
// element: <Subscribe />,
|
||||
// title: 'Подписка',
|
||||
// },
|
||||
];
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App routes={routes} />,
|
||||
children: routes,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
0
src/pages/Admin.jsx
Normal file
0
src/pages/Catalog.jsx
Normal file
19
src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Alert, Button, Container } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const ErrorPage = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Container fluid className="p-2 row justify-content-center">
|
||||
<Container className='col-md-6'>
|
||||
<Alert variant="danger">
|
||||
Страница не найдена
|
||||
</Alert>
|
||||
<Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
64
src/pages/Index.jsx
Normal file
@ -0,0 +1,64 @@
|
||||
//import { Link } from 'react-router-dom';
|
||||
|
||||
import '../pagescss/Index.css';
|
||||
|
||||
import fon from "../assets/11.jpeg";
|
||||
|
||||
import img1 from "../assets/frame1.jpg";
|
||||
import img2 from "../assets/frame2.webp";
|
||||
import img3 from "../assets/frame3.jpg";
|
||||
import img4 from "../assets/frame4.jpg";
|
||||
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="page flex-fill d-flex flex-column" id="main-page">
|
||||
<div className="row flex-fill">
|
||||
<div className="col d-none d-md-flex flex-column justify-content-around align-items-center">
|
||||
<img src={fon} className="w-75 img-fluid rounded-5" />
|
||||
<img src={img2} className="w-75 img-fluid rounded-5" />
|
||||
</div>
|
||||
<div className="promo-text-block col d-flex flex-column justify-content-around align-content-center">
|
||||
<span className="text-center promo-top">
|
||||
Кино месяца
|
||||
</span>
|
||||
<span className="text-center promo-middle">
|
||||
Barbie
|
||||
</span>
|
||||
<span className="text-center promo-bottom">
|
||||
Марго Роби и Райан Гослинг
|
||||
</span>
|
||||
</div>
|
||||
<div className="col d-none d-md-flex flex-column justify-content-around align-items-center">
|
||||
<img src={img3} className="w-75 img-fluid rounded-5" />
|
||||
<img src={img4} className="w-75 img-fluid rounded-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="carouselExample" className="carousel slide d-block d-md-none">
|
||||
<div className="carousel-inner">
|
||||
<div className="carousel-item active">
|
||||
<img src={img1} className="d-block w-100" />
|
||||
</div>
|
||||
<div className="carousel-item active">
|
||||
<img src={img2} className="d-block w-100" />
|
||||
</div>
|
||||
<div className="carousel-item active">
|
||||
<img src={img3} className="d-block w-100" />
|
||||
</div>
|
||||
</div>
|
||||
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
|
||||
<span className="carousel-control-prev-icon" aria-hidden="true" />
|
||||
<span className="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button className="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
|
||||
<span className="carousel-control-next-icon" aria-hidden="true" />
|
||||
<span className="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
0
src/pages/Into.jsx
Normal file
0
src/pages/Login.jsx
Normal file
0
src/pages/Subscribe.jsx
Normal file
44
src/pagescss/Index.css
Normal file
@ -0,0 +1,44 @@
|
||||
@font-face {
|
||||
font-family: Candara;
|
||||
src: url("../fonts/candara-light.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Carattere;
|
||||
src: url("../fonts/Carattere-Regular.ttf");
|
||||
}
|
||||
|
||||
.promo-text-block {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.promo-text-block .promo-top,
|
||||
.promo-bottom {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.promo-text-block .promo-middle {
|
||||
font-family: Carattere;
|
||||
font-size: 160px;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-image: url("../assets/barbie_big.png");
|
||||
/* background-position: center; */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
|
||||
.promo-text-block .promo-top,
|
||||
.promo-bottom {
|
||||
font-size: min(10vw, 36px);
|
||||
}
|
||||
|
||||
.promo-text-block .promo-middle {
|
||||
font-size: min(20vw, 160px);
|
||||
}
|
||||
}
|
||||