some modifies lab 4

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "bootstrap": "^5.3.2",
+        "lorem-ipsum": "^2.0.8",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-bootstrap": "^2.9.1",
@@ -1470,6 +1471,14 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3075,6 +3084,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lorem-ipsum": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/lorem-ipsum/-/lorem-ipsum-2.0.8.tgz",
+      "integrity": "sha512-5RIwHuCb979RASgCJH0VKERn9cQo/+NcAi2BMe9ddj+gp7hujl6BI+qdOG4nVsLDpwWEJwTVYXNKP6BGgbcoGA==",
+      "dependencies": {
+        "commander": "^9.3.0"
+      },
+      "bin": {
+        "lorem-ipsum": "dist/bin/lorem-ipsum.bin.js"
+      },
+      "engines": {
+        "node": ">= 8.x",
+        "npm": ">= 5.x"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",

package.json

@@ -10,13 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0",
     "bootstrap": "^5.3.2",
+    "lorem-ipsum": "^2.0.8",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
     "react-bootstrap-icons": "^1.10.3",
-    "prop-types": "^15.8.1"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -5,7 +5,7 @@ import './App.css';
 import Footer from './components/footer/Footer.jsx';
 import Navigation from './components/navigation/Navigation.jsx';
 
-const App = ({ routes }) => {
+export const App = ({ routes }) => {
   return (
     <>
       <Navigation routes={routes}></Navigation>
@@ -21,4 +21,3 @@ App.propTypes = {
   routes: PropTypes.array,
 };
 
-export default App;

src/components/adminTable/AdminTable.css

@@ -0,0 +1,12 @@
+#items-table {
+	font-family: Candara;
+	font-size: 20px;
+	color: aliceblue;
+}
+
+@media screen and (max-width: 576px) {
+
+	#items-table {
+		font-size: min(10vw, 25px);
+	}
+}

src/components/adminTable/AdminTable.jsx

@@ -0,0 +1,44 @@
+import './AdminTable.css';
+
+const AdminTable = () => {
+	return (
+		<table className="table table-sm table-responsive table-bordered border-primary table-hover" id="table">
+			<thead>
+				<tr>
+					<th scope="col">№</th>
+					<th scope="col">Название</th>
+					<th scope="col">Жанр</th>
+					<th scope="col" className="text-center">
+						<span className="d-none d-sm-block">Описание</span><i className="bi bi-clock-history d-block d-sm-none"></i>
+					</th>
+					<th scope="col" className="text-center">
+						<span className="d-none d-sm-block"> Длительность </span><i className="bi bi-clock-history d-block d-sm-none"></i>
+					</th>
+					<th scope="col" className="text-center">
+						<span>Действие</span>
+					</th>
+				</tr>
+			</thead>
+			<tbody id="movie-table-body">
+				<tr>
+					<td>1</td>
+					<td>Постучись в мою дверь</td>
+					<td>Драма</td>
+					<td>
+						Это какой-то очередной слезливый сериал про великую любовь и
+						Серкана Болата
+					</td>
+					<td>2:03</td>
+					<td>
+						<span className="d-flex justify-content-around">
+							<a id="movie-button-edit-1"><i className="bi bi-pen"></i></a>
+							<a id="movie-button-delete-1"><i className="bi bi-trash"></i></a>
+						</span>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	);
+};
+
+export default AdminTable;

src/components/cardFilm/CardFilm.jsx

@@ -1,3 +1,16 @@
+// import React from 'react';
+import {
+	BrowserRouter as Router,
+	Route,
+	Link,
+	Switch
+} from 'react-router-dom';
+
+
+// import CategoryFilm from "../../pages/CategoryFilm.jsx";
+
+// import { Link } from "react-router-dom";
+
 import './CardFilm.css';
 
 import img1 from "/src/assets/img1.webp";
@@ -5,30 +18,53 @@ import img1 from "/src/assets/img1.webp";
 const CardFilm = () => {
 	return (
 		<>
+			<Router>
+				<div className="categories-row d-flex flex-column flex-md-row justify-content-around mt-5">
+					<a className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
 
-			<div className="categories-row d-flex flex-column flex-md-row justify-content-around mt-5">
+						<Link to="../../pages/CategoryFilm"></Link>
-				<a className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
-					href="#">
-					<img src={img1} className="rounded-3"></img>
-					<span className="category-name text-center mt-2">Драма</span>
-				</a>
 
-				<a className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
+						<span className="category-name text-center mt-2">Драма</span>
-					href="#">
+					</a>
-					<img src={img1} className="rounded-3"></img>
-					<span className="category-name text-center mt-2">Драма</span>
-				</a>
 
-				<a className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
+					<a className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
-					href="#">
+						href="/src/pages/CategoryFilm.jsx">
-					<img src={img1} className="rounded-3"></img>
+						<img src={img1} className="rounded-3"></img>
-					<span className="category-name text-center mt-2">Драма</span>
+						<span className="category-name text-center mt-2">Драма</span>
-				</a>
+					</a>
 
-			</div>
+					<a className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0"
+						href="#">
+						<img src={img1} className="rounded-3"></img>
+						<span className="category-name text-center mt-2">Драма</span>
+					</a>
 
+				</div>
+
+
+				<main>
+					{/* <Switch> рендерит первый <Route>, совпавший с URL */}
+					<Switch>
+						<Route path="../../pages/CategoryFilm">
+							<About />
+						</Route>
+						<Route path="../../pages/CategoryFilm">
+							<Users />
+						</Route>
+						<Route path="../../pages/CategoryFilm">
+							<Home />
+						</Route>
+					</Switch>
+				</main>
+			</Router>
 		</>
 	);
 };
 
+const Home = () => <img src={img1} className="rounded-3"></img>;
+
+const About = () => <img src={img1} className="rounded-3"></img>;
+
+const Users = () => <img src={img1} className="rounded-3"></img>;
+
 export default CardFilm;

src/components/cardForSubscribe/CardForSubscribe.css

@@ -0,0 +1,6 @@
+#img-1,
+#img-2,
+#img-3 {
+	height: 320px;
+	width: 220px;
+}

src/components/cardForSubscribe/CardForSubscribe.jsx

@@ -0,0 +1,28 @@
+import './CardForSubscribe.css';
+
+import img1 from "/src/assets/serkan.jpeg";
+import img2 from "/src/assets/ment-s_rub.jpeg";
+import img3 from "/src/assets/akademy-ambrella.jpeg";
+
+
+
+const CardForSubscribe = () => {
+	return (
+		<div className="img-div d-flex flex-column flex-md-row justify-content-around mt-5">
+
+			<div className="img d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
+				<img src={img1} id="img-3" className="rounded-3"></img>
+			</div>
+
+			<div className="img d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
+				<img src={img2} id="img-2" className="rounded-3"></img>
+			</div>
+
+			<div className="img d-flex flex-column justify-content-center align-items-center mb-4 mb-md-0">
+				<img src={img3} id="img-1" className="rounded-3"></img>
+			</div>
+		</div>
+	);
+};
+
+export default CardForSubscribe;

src/components/navigation/Navigation.css

@@ -1,14 +1,16 @@
 .my-navbar {
+	font-family: Candara;
 	background-color: #3C2C72;
+	font-size: 2.5vh;
 	color: white;
 }
 
 .my-navbar .link a:hover {
+	font-family: Candara;
 	text-decoration: underline !important;
 	color: rgb(251, 158, 149);
 }
 
 .my-navbar .logo {
-	/* width: 60px; */
 	height: 30px;
 }

src/components/navigation/Navigation.jsx

@@ -31,39 +31,6 @@ const Navigation = ({ routes }) => {
 					</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>
 	);
 };

src/main.jsx

@@ -2,14 +2,16 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import App from './App.jsx';
+import { App } from './App.jsx';
 import './index.css';
 import ErrorPage from './pages/ErrorPage.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 Login from './pages/Login.jsx';
-// import Subscribe from './pages/Subscribe.jsx';
+import Subscribe from './pages/Subscribe.jsx';
+import Admin from './pages/Admin.jsx';
+
 
 const routes = [
   {
@@ -28,21 +30,21 @@ const routes = [
     element: <Into />,
     title: 'Вход',
   },
-  // {
+  {
-  //   path: '/login',
+    path: '/login',
-  //   element: <Login />,
+    element: <Login />,
-  //   title: 'Регистрация',
+    title: 'Регистрация',
-  // },
+  },
-  // {
+  {
-  //   path: '/subscribe',
+    path: '/subscribe',
-  //   element: <Subscribe />,
+    element: <Subscribe />,
-  //   title: 'Подписка',
+    title: 'Подписка',
-  // },
+  },
-  // {
+  {
-  //   path: '/subscribe',
+    path: '/admin',
-  //   element: <Subscribe />,
+    element: <Admin />,
-  //   title: 'Подписка',
+    title: 'Админка',
-  // },
+  },
 ];
 
 const router = createBrowserRouter([

src/pages/Admin.jsx

@@ -0,0 +1,17 @@
+import '../pagescss/Admin.css';
+
+import AdminTable from '../components/adminTable/AdminTable';
+
+const Admin = () => {
+	return (
+		<div className="container-fluid flex-fill d-flex flex-column px-1 px-md-2" id='main'>
+			<div className="control-group py-2">
+				<button id="items-add" className="btn btn-light">Добавить фильм</button>
+			</div>
+			{/* <div className="container-fluid flex-fill"></div> */}
+			<AdminTable></AdminTable>
+		</div>
+	);
+};
+
+export default Admin;

src/pages/CategoryFilm.jsx

@@ -0,0 +1,71 @@
+const CategoryFilm = () => {
+	<main className="flex-fill d-flex justify-content-center">
+		<div className="content d-flex w-100 flex-column justify-content-around mb-5" id="films">
+			<div className="categories-row d-flex flex-column flex-md-row justify-content-around mt-5 mb-5">
+				<div className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
+					<img src="./static/img/img2.webp" className="img-fluid rounded-3" id="img1" />
+					<div className="icons w-50 d-flex justify-content-around mt-1 mb-1">
+						<svg width="16" height="16" className="bi bi-heart" id="icons"></svg>
+						<svg width="16" height="16" className="bi bi-clock-history" id="icons"></svg>
+					</div>
+					<div className="tooltip-content text-center w-50 d-flex justify-content-center align-items-center">
+						<p>
+							Некая информация об этом фильме. Вы сможете узнать всю
+							информацию чуть позже, когда будет в процессе приготовления 3
+							лаба...
+						</p>
+					</div>
+				</div>
+
+				<div className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
+					<img src="./static/img/img2.webp" className="rounded-3" />
+
+					<div className="icons w-50 d-flex justify-content-around mt-1 mb-1">
+						<svg width="16" height="16" className="bi bi-heart" id="icons"></svg>
+						<svg width="16" height="16" className="bi bi-clock-history" id="icons"></svg>
+					</div>
+					<div className="tooltip-content text-center w-50 d-flex justify-content-center align-items-center">
+						<p>
+							Некая информация об этом фильме. Вы сможете узнать всю
+							информацию чуть позже, когда будет в процессе приготовления 3
+							лаба...
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<div className="categories-row d-flex flex-column flex-md-row justify-content-around mt-5">
+				<div className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
+					<img src="./static/img/img2.webp" className="rounded-3" />
+					<div className="icons w-50 d-flex justify-content-around mt-1 mb-1">
+						<svg width="16" height="16" className="bi bi-heart" id="icons"></svg>
+						<svg width="16" height="16" className="bi bi-clock-history" id="icons"></svg>
+					</div>
+					<div className="tooltip-content text-center w-50 d-flex justify-content-center align-items-center">
+						<p>
+							Некая информация об этом фильме. Вы сможете узнать всю
+							информацию чуть позже, когда будет в процессе приготовления 3
+							лаба...
+						</p>
+					</div>
+				</div>
+				<div className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
+					<img src="./static/img/img2.webp" className="rounded-3" />
+					<div className="icons w-50 d-flex justify-content-around mt-1 mb-1">
+						<svg width="16" height="16" className="bi bi-heart" id="icons"></svg>
+						<svg width="16" height="16" className="bi bi-clock-history" id="icons"></svg>
+					</div>
+					<div className="tooltip-content text-center w-50 d-flex justify-content-center align-items-center">
+						<p>
+							Некая информация об этом фильме. Вы сможете узнать всю
+							информацию чуть позже, когда будет в процессе приготовления 3
+							лаба...
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+};
+
+export default CategoryFilm;

src/pages/Login.jsx

@@ -0,0 +1,41 @@
+import '../pagescss/Login.css';
+
+const Login = () => {
+	return (
+		<>
+			<main className="flex-fill d-flex" id="main-pg">
+
+				<div className="container d-flex flex-column justify-content-center align-items-center">
+
+					<p className="mt-4 d-flex flex-column align-items-center">
+						Имя пользователя / электронная почта
+					</p>
+					<div className="mb-4 w-50">
+						<input id="username" className="form-control" placeholder="Имя пользователя / Эл. Почта" type="text"
+							required></input>
+					</div>
+
+					<p className="d-flex flex-column align-items-center">
+						Пароль
+					</p>
+					<div className="mb-4 w-50">
+						<input id="password" className="form-control" placeholder="Пароль" type="text" required></input>
+					</div>
+
+					<p className="d-flex flex-column align-items-center">
+						Пароль повторно
+					</p>
+					<div className="mb-4 w-50">
+						<input id="passwordrepeat" className="form-control" placeholder="Пароль повторно" type="text" required></input>
+					</div>
+
+					<div className="mt-4 h-25 d-flex flex-column justify-content-center mb-4">
+						<button type="button" className="btn btn-light">Зарегистрироваться</button>
+					</div>
+				</div>
+			</main>
+		</>
+	);
+};
+
+export default Login;

src/pages/Subscribe.jsx

@@ -0,0 +1,30 @@
+import '../pagescss/Subscribe.css';
+
+import CardForSubscribe from '../components/cardForSubscribe/CardForSubscribe';
+
+const Subscribe = () => {
+	return (
+		<div className="w-100 min-vh-100 flex-fill d-flex justify-content-center" id="mainSubscribe">
+			<div className="container d-flex flex-column justify-content-around" id="subscribeDiv">
+
+				<CardForSubscribe>
+
+				</CardForSubscribe>
+
+
+				<div className="span-row d-flex flex-column flex-md-row justify-content-around  mb-4 mt-md-5">
+					<span className="category-name text-center mt-2">Оформи подписку</span>
+				</div>
+
+				<div className="frame-button d-flex flex-column flex-md-row justify-content-around mb-4 mt-md-5">
+					<div className="button d-flex flex-row flex-md-column justify-content-center align-items-center h-25 p-0">
+						<button type="button" className="btn btn-light">Подписаться</button>
+					</div>
+				</div>
+
+			</div>
+		</div>
+	);
+};
+
+export default Subscribe;

src/pagescss/Admin.css

@@ -0,0 +1,6 @@
+#main {
+	font-family: Candara;
+	background-image: linear-gradient(to bottom, #b69fe1, rgb(40, 34, 79));
+	color: white;
+	background-size: cover;
+}

src/pagescss/Catalog.css

@@ -1,4 +1,5 @@
 .main-page {
+	font-family: Candara;
 	background-image: url('../assets/bg.png');
 	background-color: rgba(0, 0, 0, 0.75);
 	background-blend-mode: multiply;

src/pagescss/Into.css

@@ -4,6 +4,7 @@
 } */
 
 #main {
+	font-family: Candara;
 	background-color: #D8BAFF;
 	background-image: url("../assets/logotip_LC.png");
 	background-position: center;

src/pagescss/Login.css

@@ -0,0 +1,42 @@
+#main-pg {
+	font-family: Candara;
+	background-image: url("../assets/logo_light.png");
+	background-color: rgb(0, 0, 0);
+	/* background-blend-mode: multiply; */
+	background-position: center;
+	background-size: cover;
+	background-repeat: no-repeat;
+	color: #ffffff;
+}
+
+.col {
+	opacity: 0.6;
+}
+
+p {
+	font-size: 25px;
+	text-align: center;
+}
+
+.btn {
+	width: 300px;
+	height: 50px;
+	font-size: 25px;
+	transition: 0.3s;
+}
+
+.btn:hover {
+	transform: scale(1.1);
+}
+
+@media screen and (max-width: 576px) {
+
+	p {
+		font-size: min(10vw, 25px);
+	}
+
+	.btn {
+		font-size: min(10vw, 18px);
+		width: 30vh;
+	}
+}

src/pagescss/Subscribe.css

@@ -0,0 +1,40 @@
+#mainSubscribe {
+	font-family: Candara;
+	background-color: rgba(0, 0, 0, 0.6);
+	background-image: url("../assets/films.jpg");
+	background-blend-mode: multiply;
+	background-size: cover;
+	background-position: center;
+	background-repeat: repeat-y;
+	color: #ffffff;
+}
+
+.span-row {
+	font-size: 30px;
+	text-decoration: underline;
+}
+
+@media screen and (max-width: 576px) {
+	.container {
+		width: 100%;
+	}
+
+	.btn,
+	.span-row {
+		font-size: min(10vw, 25px);
+	}
+}
+
+
+.btn {
+	width: 248px;
+	height: 50px;
+	font-size: 25px;
+	text-align: center;
+	cursor: pointer;
+	transition: 0.3s;
+}
+
+.btn:hover {
+	transform: scale(1.1);
+}