doin lab5

lab3/css/banner.css

@@ -1,28 +0,0 @@
-#banner {
-    margin: 5px;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-
-    justify-content: space-around; /* распределяет элементы равномерно по горизонтали */
-    flex-wrap: nowrap; /* если вы хотите, чтобы все элементы были в одной линии и не переходили на новую линию. Если нужно переход на новую линию при нехватке места, укажите 'wrap' */
-}
-
-#banner img {
-    border: 1px solid #3c3c3f;
-    border-radius: 5px;
-}
-
-#banner img.banner-show {
-    width: 20%;
-    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;
-}

lab3/js/banner.js

@@ -1,48 +0,0 @@
-// модуль для смены изображения в баннере по таймеру
-
-import '../css/banner.css';
-
-// указывается блок, в котором будет баннер
-// блок должен содержать изображения
-function myBanner(root) {
-    console.info("Loaded");
-
-    // получение всех изображений внутри баннера
-    const banners = document.querySelectorAll(`${root} img`);
-
-    // всем изображениям устанавливается класс banner-hide
-    // если были другие классы, то они будут удалены
-    for (let i = 0; i < banners.length; i += 1) {
-        banners[i].setAttribute("class", "banner-hide");
-    }
-
-    let old = banners.length - 1;
-    let current = 0;
-    let current2 = 1;
-    let current3 = 2;
-  
-    // функция меняет изображения в цикле
-    // изображение с классом banner-show будет показано
-    // изображение с классом banner-hide будет скрыто
-    // функция запускает таймер, который через 5 секунд
-    // запускает функцию, снова создается таймер и т. д.
-    function loop() {
-        banners[current].setAttribute("class", "banner-show");
-        banners[old].setAttribute("class", "banner-hide");
-
-        console.info("Banner changed");
-
-        old = current;
-        current += 1;
-
-        if (current === banners.length) {
-            current = 0;
-        }
-
-        setTimeout(loop, 5000);
-    }
-
-    loop();
-}
-
-export default myBanner;

lab3/js/lines.js

@@ -484,7 +484,6 @@
 
     }
     
-    
     // export async function UpdateVideos() {
     //     clearVideos();
     //     console.info("UpdateVideos");

lab5/src/components/lines/form/LinesItemForm.jsx

@@ -14,13 +14,13 @@ const LinesItemForm = ({ item, handleChange }) => {
                 <img id='image-preview' className='rounded' alt='placeholder'
                     src={item.image || imgPlaceholder} />
             </div>
-            <Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
+            {/* <Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
-                required />
+                required /> */}
-            <Input name='price' label='Цена' value={item.price} onChange={handleChange}
+            <Input name='price' label='Name of video' value={item.name} onChange={handleChange}
-                type='number' min='1000.0' step='0.50' required />
+                type='string' mrequired />
-            <Input name='count' label='Количество' value={item.count} onChange={handleChange}
+            <Input name='count' label='Name of channel' value={item.description} onChange={handleChange}
-                type='number' min='1' step='1' required />
+                type='string' required />
-            <Input name='image' label='Изображение' onChange={handleChange}
+            <Input name='image' label='Image' onChange={handleChange}
                 type='file' accept='image/*' />
         </>
     );

lab5/src/components/lines/videos/UpdateVideos.jsx

@@ -11,6 +11,40 @@ import LinesItemForm from '../form/LinesItemForm.jsx';
 import useLines from '../hooks/LinesHook';
 // linesChangeHandle изменять состояние => при вызове изменения linesChangeHandle
 // должно все перерисовываться
+import {
+    PencilFill, Trash3,
+} from 'react-bootstrap-icons';
+
+const UpdateVideo1 = ({
+    item, onEdit, onDelete,
+}) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+    return (
+        <div className="col-md-4 mb-4">
+            <div className="rectNews d-flex flex-column">
+                <img src={item.image} width="100%" alt={item.name} />
+                <div className="rectNewsTextBox text-center">
+                    <span className="rectNewsText">
+                        <a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
+                        <a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a>
+                        {item.description}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+UpdateVideo.propTypes = {
+    index: PropTypes.number,
+    item: PropTypes.object,
+    onDelete: PropTypes.func,
+    onEdit: PropTypes.func,
+};
+
 
 const UpdateVideos = () => {
     const { lines, handleLinesChange } = useLines();
@@ -40,15 +74,17 @@ const UpdateVideos = () => {
                 <Button variant='info' onClick={() => showFormModal()}>
                 Добавить товар</Button>
             </div>
-        <div className="mainDiv row">
+            <div className="mainDiv col-md-9 ml-sm-auto col-lg-10 px-">
+            <div className='mainRow row'>
             {lines.map((item) => (
-                <UpdateVideo key={item.id}
+                <UpdateVideo1 key={item.id}
                 item={item}
                 onDelete={() => showDeleteModal(item.id)}
                 onEdit={() => showFormModal(item.id)}
                 />
             ))}
             </div>
+        </div>
         <ModalConfirm show={isDeleteModalShow}
             onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
             title='Удаление' message='Удалить элемент?' />

lab5/src/components/lines/videos/UpdateVideos2.jsx

@@ -13,20 +13,19 @@ import useLines from '../hooks/LinesHook'; // Замените 'путь_к_ва
 // import { createAnchor } from ''; // Замените 'путь_к_вашему_утилитарному_модулю' на актуальный путь к вашему утилитарному модулю
 
 const VideoComponent = ({ item, onEdit, onDelete }) => {
-  const handleAnchorClick = (event, handler) => {
+    const handleAnchorClick = (event, action) => {
         event.preventDefault();
-    handler(item);
+        action();
     };
   
   return (
     <div className="col-md-4 mb-4">
       <div className="rectNews d-flex flex-column">
-        <img src={item.image} width="100%" alt={item.name} />
+        <img src={item.image} width="100%"/>
         <div className="rectNewsTextBox text-center">
-          <span className="rectNewsText">
+          <span className="rectNewsText">{item.name} {item.description}
           <a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
             <a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a>
-            {item.description}
           </span>
         </div>
       </div>

lab5/src/components/sidebar/Sidebar.css

@@ -1,13 +1,7 @@
-
+header nav {
-.col-md-2.sidebar {
+  background-color: #292828;
-  width: 100%;
-  max-width: 100%;
 }
 
-.col-md-2.sidebar .container {
-  padding-right: 0;
-  padding-left: 0;
-}
 html, body {
 height: 100%;
 margin: 0;
@@ -27,6 +21,16 @@ html, body {
 margin: 1%; /* Внешний отступ */
 }
 
+header nav a:hover {
+  text-decoration: underline;
+}
+
+footer {
+  background-color: #9c9c9c;
+  height: 32px;
+  color: #ffffff;
+}
+
 h1 {
   font-size: 1.5em;
 }
@@ -41,15 +45,45 @@ h3 {
 h4 {
   font-size: 1.5px;
 }
+/* .container{
+  width: 500px;
+  height: 500px;
+}*/
+/* .container-fluid{
+  height: 100vh;
+} 
+.full-page-div {
+width: 100%;
+height: calc(100vh - 56px); /* 56px - высота навигационной панели (navbar) 
+overflow-y: auto;  Добавляет вертикальную прокрутку, если содержимое не помещается
 
+} */
 .card{
 font-size: 19px;
 }
 
+.circle-container {
+width: 100px;
+height: 100px;
+border-radius: 50%;
+overflow: hidden; /* обрезаем лишнее изображение за пределами круга */
+margin: auto; /* автоматическое выравнивание по горизонтали */
+margin-top: 20px; /* опциональное выравнивание по вертикали (если нужно) */
+}
+
+.circle-container img {
+width: 100%;
+height: 100%;
+object-fit: cover; /* сохраняем соотношение сторон и обрезаем изображение, чтобы оно полностью заполнило круг */
+}
+
 a{
 margin-bottom: 2px;
 margin-top: 2px;
 }
+/* .container-main {
+flex: 1;
+} */
 
 .streamer-nickname {
 padding-top: 5px;
@@ -74,23 +108,24 @@ a{
 font-size: 13px;
 }
 
+
 /* .sidebar {
 background-color: #f8f9fa;
 height: 100vh;
 } */
-body {
+.video-thumbnail {
-  margin: 0;
+/* width: 1920px;
-  padding: 0;
+height: 1080px; */
+max-width: 100%;
+max-height: 100%;
+width: 100%;
+height: 100%;
 } 
-
+.embed-responsive{
-.full-page-div {
+max-width: 100%;
-  margin: 0;
+max-height: 100%;
-  padding: 0;
+width: 1600px;
-}
+height: 800px;
-
-.container-fluid {
-  margin: 0;
-  padding: 0;
 }
 
 img,
@@ -102,12 +137,22 @@ svg {
 flex-wrap: nowrap;
 justify-content: center;
 }
-
+.card-img-top{
+max-width: 100%;
+height: auto;
+max-height: 500px;
+}
+.avatar-img{
+max-width: 100%;
+height: auto;
+max-height: 40px;
+}
 .modal-dialog img{
 max-width: 310px;
 max-height: 200px;
 object-fit: cover;
 }
-
+.fa-pencil{
-
+margin-right: 15px;
+}
 

lab5/src/components/sidebar/Sidebar.jsx

@@ -3,6 +3,8 @@ import './Sidebar.css';
 
 const Sidebar = () => {
   return (
+    <div className="container-fluid ">
+
       <div className="row">
         <nav className="col-md-2 bg-dark sidebar">
           <div className="d-flex flex-column align-items-center align-items-sm-start px-8 pt-3 text-white">
@@ -75,6 +77,7 @@ const Sidebar = () => {
           </div>
         </nav>
     </div>
+    </div>
   );
 };
 

lab5/src/pages/StartPage.jsx

@@ -1,10 +1,29 @@
-// import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
-import UpdateVideos2 from '../components/lines/videos/UpdateVideos2.jsx';
+import UpdateVideos from '../components/lines/videos/UpdateVideos.jsx';
 
 const StartPage = () => {
     return (
-        <UpdateVideos2 />
+    <>
+    <div className="d-flex">
+      <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
+        <div className="full-page-div">
+            <div className="p-5 text-center">
+                <h1 className="display-4 fw-bold">Welcome to our streaming service</h1>
+                <p className="fs-5">Explore the whole streaming world!</p>
+                <Link className="btn btn-outline-danger btn-lg" to="page2" role="button">Главная страница</Link>
+            </div>
 
+            <div className="p-5 text-bg-dark rounded-3">
+                <h2>Популярные трансляции</h2>
+                    <div className="row">
+                    <UpdateVideos />
+
+                    </div>
+            </div>
+        </div>
+        </main>
+    </div>
+    </>
     // <div className="d-flex">
     //   <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
     //     <div className="full-page-div">