commit front 4

front/src/App.js

@@ -0,0 +1,45 @@
+import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom'
+import Films from './pages/Films'
+import FilmPage from './pages/FilmPage'
+import Header from './pages/components/Header'
+import Footer from './pages/components/Footer'
+import SearchSame from './pages/SearchSame'
+import Registration from './pages/Registration'
+import Sessions from './pages/Sessions'
+import Orders from './pages/Orders'
+
+function Router(props) {
+  return useRoutes(props.rootRoute);
+}
+
+export default function App() {
+  const routes = [
+    { index: true, element: <Films /> },
+    { path: '/films', element: <Films />, label: 'Главная' },
+    { path: '/registration', element: <Registration />, label: 'Регистрация' },
+    { path: '/sessions', element: <Sessions />, label: 'Сеансы' },
+    { path: '/orders', element: <Orders />, label: 'Заказы' },
+    { path: '/films/:id', element: <FilmPage /> },
+    { path: '/search-same/:request', element: <SearchSame /> }
+  ];
+  const links = routes.filter(route => route.hasOwnProperty('label'));
+  const rootRoute = [
+    { path: '/', element: render(links), children: routes }
+  ];
+
+  function render(links) {
+    return (
+      <>
+        <Header links={links} />
+          <Outlet />
+        <Footer />
+      </>
+    );
+  }
+
+  return (
+    <BrowserRouter>
+      <Router rootRoute={ rootRoute } />
+    </BrowserRouter>
+  );
+}

front/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import 'bootstrap/dist/css/bootstrap.css'
+import './styles/index.css'
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);

front/src/styles/ModalEdit.module.css

@@ -0,0 +1,22 @@
+.myModal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: none;
+    background: rgba(0,0,0, 0.5);
+}
+
+.myModalContent {
+    padding: 25px;
+    background: white;
+    border-radius: 16px;
+    max-width: 600px;
+}
+
+.myModal.active {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

front/src/styles/banner.css

@@ -0,0 +1,23 @@
+#banner {
+    margin: 15px;
+}
+
+@keyframes newAnim {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+#banner img {
+    max-width: 90%;
+    border-radius: 5px;
+    animation: newAnim 1s forwards;
+}
+
+#banner a.show {
+    text-align: center;
+    display: block;
+}
+
+#banner a.hide {
+    display: none;
+}

front/src/styles/index.css

@@ -0,0 +1,72 @@
+html,
+body {
+    background: #2b2d33;
+}
+.green-mark {
+    background-color: #38a65d;
+}
+.willSee {
+    background-color: #38a65d;
+}
+.delete {
+    background-color: #e94049;
+}
+.icon {
+    width: 50px; 
+    height: 50px;
+}
+hr {
+    height: 2px; /* Толщина линии */
+}
+.description {
+    color: #8f9398;
+}
+.editIcon {
+    height: 2.5vh;
+}
+.posterChoiceToTaste {
+    width: 290px;
+    height: 437px;
+}
+.posterFilmPage{
+    width: 290px;
+    height: 437px;
+}
+a {
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+/* for film-page */
+.table {
+    color: #8f9398;
+}
+/* main */
+@media screen and (max-width: 290px) {
+    .posterItem {
+        display: none !important;
+    }
+    .fs-1 {
+        margin-left: 1em !important;
+    }
+}
+/* willsee */
+@media screen and (max-width: 290px) {
+    .posterItem {
+        display: none !important;
+    }
+    .fs-1 {
+        font-size: medium !important;
+        margin-left: 1em !important;
+    }
+}
+/* choicetotaste */
+@media screen and (max-width: 250px) {
+    .fs-2 {
+        font-size: medium !important;
+    }
+    .fs-1 {
+        font-size: large !important;
+    }
+}

front/src/styles/styleBlock.css

@@ -0,0 +1,14 @@
+html,
+body {
+    background: #2b2d33;
+}
+
+.content {
+    min-height: calc(100vh - 25.1vh);
+    background: #40444d;
+}
+
+.content_header {
+    margin: -1.5em -1.5em 0em -1.5em;
+    background-color: #8f9297;
+}

front/src/styles/styleFilmItem.css

@@ -0,0 +1,13 @@
+.posterItem {
+    width: 90px;
+    height: 90px;
+    margin-top: -10px;
+}
+
+form input {
+    max-width: 300px;
+}
+
+table tbody tr td {
+    border: 0px !important;
+}

front/src/styles/styleFooter.css

@@ -0,0 +1,9 @@
+footer {
+    flex: 0 0 auto !important;
+    background: #1a1c20;
+    color: #c2c2c2;
+}
+
+footer nav {
+    color: #c2c2c2;
+}

front/src/styles/styleHeader.css

@@ -0,0 +1,15 @@
+header {
+    background: #1a1c20;
+}
+
+header a {
+    color: #c2c2c2;
+}
+
+header a:hover {
+    color: #ffffff;
+}
+
+.mainInput {
+    max-width: 200px;
+}