lab4 first page
This commit is contained in:
parent
a4da7a569e
commit
e98aca40cd
@ -1 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 43 43 0 96 0h96V190.7c0 13.4 15.5 20.9 26 12.5L272 160l54 43.2c10.5 8.4 26 .9 26-12.5V0h32 32c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32v64c17.7 0 32 14.3 32 32s-14.3 32-32 32H384 96c-53 0-96-43-96-96V96zM64 416c0 17.7 14.3 32 32 32H352V384H96c-17.7 0-32 14.3-32 32z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 525 B After Width: | Height: | Size: 648 B |
1
ReactLibrary/src/assets/logo.svg
Normal file
1
ReactLibrary/src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 43 43 0 96 0h96V190.7c0 13.4 15.5 20.9 26 12.5L272 160l54 43.2c10.5 8.4 26 .9 26-12.5V0h32 32c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32v64c17.7 0 32 14.3 32 32s-14.3 32-32 32H384 96c-53 0-96-43-96-96V96zM64 416c0 17.7 14.3 32 32 32H352V384H96c-17.7 0-32 14.3-32 32z"/></svg>
|
||||
|
After Width: | Height: | Size: 525 B |
@ -1,25 +0,0 @@
|
||||
#banner {
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#banner img {
|
||||
border: 1px solid #3c3c3f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#banner img.banner-show {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 1s, visibility 0s;
|
||||
}
|
||||
|
||||
#banner img.banner-hide {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s, visibility 0s 1s;
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import banner1 from '../../assets/banner1.png';
|
||||
import banner2 from '../../assets/banner2.png';
|
||||
import banner3 from '../../assets/banner3.png';
|
||||
import './Banner.css';
|
||||
|
||||
const Banner = () => {
|
||||
const [currentBanner, setCurrentBanner] = useState(0);
|
||||
const banners = [banner1, banner2, banner3];
|
||||
|
||||
const getBannerClass = (index) => {
|
||||
return currentBanner === index ? 'banner-show' : 'banner-hide';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const bannerInterval = setInterval(
|
||||
() => {
|
||||
console.info('Banner changed');
|
||||
let current = currentBanner + 1;
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
setCurrentBanner(current);
|
||||
},
|
||||
5000,
|
||||
);
|
||||
return () => clearInterval(bannerInterval);
|
||||
});
|
||||
|
||||
return (
|
||||
<div id="banner" >
|
||||
{
|
||||
banners.map((banner, index) =>
|
||||
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
||||
@ -1,5 +1,5 @@
|
||||
.my-footer {
|
||||
background-color: #9c9c9c;
|
||||
background-color: #000000;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -5,7 +5,7 @@ const Footer = () => {
|
||||
|
||||
return (
|
||||
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Автор, {year}
|
||||
Захаров Р. А., {year}
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
.my-navbar {
|
||||
background-color: #3c3c3c !important;
|
||||
background-color: #ff6600 !important;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.my-navbar .link a:hover {
|
||||
text-decoration: underline !important;
|
||||
|
||||
color: #000000 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.my-navbar .logoImage {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.my-navbar .logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||
import { Cart2 } from 'react-bootstrap-icons';
|
||||
import { BookHalf } from 'react-bootstrap-icons';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import './Navigation.css';
|
||||
|
||||
@ -8,14 +8,13 @@ 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' bg='dark' data-bs-theme='dark' className='my-navbar'>
|
||||
<Navbar expand='md' bg='light' data-bs-theme='light' className='my-navbar'>
|
||||
<Container fluid>
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||
<Cart2 className='d-inline-block align-top me-1 logo' />
|
||||
My shop
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'} className='logo'>
|
||||
<BookHalf className='d-inline-block align-top me-1 logoImage' />
|
||||
Библиотека
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
|
||||
@ -1,53 +1,24 @@
|
||||
body{
|
||||
font-family: "Verdana", sans-serif;
|
||||
background-color: #ffffff;
|
||||
color: #ff6600;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
header nav{
|
||||
background-color: #ff6600;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
header nav{
|
||||
height: 84px;
|
||||
}
|
||||
}
|
||||
footer{
|
||||
background-color: #000000;
|
||||
}
|
||||
.nav-link:hover{
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.library-reference{
|
||||
background-color: #e0adff;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.library-reference:hover{
|
||||
background-color: #e0adff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.library-button{
|
||||
background-color: #e8b8e8;
|
||||
color: #000000;
|
||||
font-size: 1em;
|
||||
border-radius: 15px;
|
||||
border: #e8b8e8;
|
||||
}
|
||||
|
||||
.library-button:hover{
|
||||
background-color: #bf80e6;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.height-min{
|
||||
height: min-content
|
||||
}
|
||||
h1{
|
||||
color: #ff6600;
|
||||
}
|
||||
.black-text{
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.orange-text{
|
||||
color: #ff6600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.white-text{
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@ -5,38 +5,15 @@ 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 MainPage from './pages/MainPage.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <Page1 />,
|
||||
element: <MainPage />,
|
||||
title: 'Главная страница',
|
||||
},
|
||||
{
|
||||
path: '/page2',
|
||||
element: <Page2 />,
|
||||
title: 'Вторая страница',
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
element: <Page3 />,
|
||||
title: 'Третья страница',
|
||||
},
|
||||
{
|
||||
path: '/page4',
|
||||
element: <Page4 />,
|
||||
title: 'Четвертая страница',
|
||||
},
|
||||
{
|
||||
path: '/page-edit',
|
||||
element: <PageEdit />,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createBrowserRouter([
|
||||
|
||||
25
ReactLibrary/src/pages/MainPage.jsx
Normal file
25
ReactLibrary/src/pages/MainPage.jsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const MainPage = () => {
|
||||
return (
|
||||
<>
|
||||
<h1 className='mt-2 text-md-start text-center'>
|
||||
Пример web-страницы.
|
||||
</h1>
|
||||
<p className="mt-2 text-md-start text-center">
|
||||
Здесь вы обязательно найдете нужные вам книги.
|
||||
Для этого перейдите на страницу Поиск.
|
||||
Вы можете сохранить в Избранные понравившиеся книги.
|
||||
Вы найдете их в вашем Личном кабинете.
|
||||
Там же вы можете посмотреть вашу Историю чтения.
|
||||
</p>
|
||||
<div className="d-grid gap-2 mt-2 d-md-flex justify-content-md-start">
|
||||
<Button as={Link} to="/user-page.html" className='library-button'>Личный кабинет</Button>
|
||||
<Button as={Link} to="/search.html" className='library-button'>Поиск</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainPage;
|
||||
Loading…
Reference in New Issue
Block a user