updated styling for lab

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+to_reform

convert_to_html.py

@@ -1,37 +0,0 @@
-import csv
-
-def create_html_table_from_csv(csv_path, html_path):
-    try:
-        with open(csv_path, 'r', newline='', encoding='utf-8') as csv_file:
-            reader = csv.reader(csv_file)
-            header = next(reader)
-            
-            with open(html_path, 'w', encoding='utf-8') as html_file:
-                html_file.write('<table class="data-table">\n')
-                
-                html_file.write('<thead>\n')
-                html_file.write('<tr>\n')
-                for column_header in header:
-                    html_file.write(f'<th>{column_header}</th>\n')
-                html_file.write('</tr>\n')
-                html_file.write('</thead>\n')
-                
-                html_file.write('<tbody>\n')
-                for row in reader:
-                    html_file.write('<tr>\n')
-                    for cell in row:
-                        html_file.write(f'<td>{cell}</td>\n')
-                    html_file.write('</tr>\n')
-                html_file.write('</tbody>\n')
-                
-                html_file.write('</table>\n')
-        
-        print(f"Successfully created {html_path} from {csv_path}")
-
-    except:
-        pass
-
-if __name__ == '__main__':
-    csv_file_name = 'temp_sensor_data.csv'
-    html_file_name = 'test.html'
-    create_html_table_from_csv(csv_file_name, html_file_name)

index.css

@@ -1,214 +0,0 @@
-/* menu part */
-.menu {
-    border-top: double 4px silver;
-    border-bottom: double 4px silver;
-    text-align: right;
-    font-size:  0;
-}
-
-.menu-item {
-    display: inline-block;
-    width: 8%;
-    height: 3em;
-    line-height: 3em; /* to align to center */
-    text-align: center;
-    vertical-align: middle;
-    margin: 0 1%;
-    overflow: hidden;
-    text-overflow: ellipsis ;
-    font-size:  medium;
-
-}
-
-.menu .selected {
-    color: green;
-    font-weight: bold;
-    border-left: double 4px silver;
-    border-right: double 4px silver;
-}
-
-.menu .menu-header {
-    color: green;
-    font-weight: bold;
-    float: left;
-}
-
-.menu a {
-    color: black;
-}
-
-
-/* 4 images part */
-.images-container  *{
-    border:solid thin black;
-}
-.images-container {
-    width: 90%;
-    height: 200pt;
-    margin: auto;
-    overflow: hidden;
-}
-
-.half-size {
-    width: 49%;
-    margin: 0.2%;
-    float: left;
-}
-
-.quarter-size {
-    width: 24%;
-    margin: 0.2%;
-    float: left;
-}
-
-.image-column-container {
-    width: 24%;
-    height:100%;
-    margin: 0.15%;
-    float: left;
-
-}
-
-.image-column-container > div {
-    width: 100%;
-    height: 50%;
-    margin-bottom: 1.4%;
-    overflow: hidden;
-
-    /* text-align: center; */
-}
-
-
-.images-container img{
-    width:100% 
-}
-
-/* main block part */
-
-.main-block{
-    width:80%;
-    margin:1.2% auto;
-
-}
-.main-column{
-    display: inline-block;
-    width:25%;
-}
-.main-center{
-    vertical-align: top;
-    width: 48%;
-    height:100%;
-    display: inline-block;
-    
-}
-
-.img-margin-fix {
-    margin-right:10px;
-}
-.info-block{
-    height:10%;
-    padding: 5%;
-}
-
-.bg-aqua{
-    background: #80DEEA;
-}
-.bg-grey{
-    background: #B0BFC6;
-}
-.bg-blue{
-    background: #BBDEFA;
-}
-.bg-yellow{
-    background: #FFE0B2;
-}
-
-
-.info-block-header{
-    display: block;
-    margin:auto;
-    text-align: center;
-    font-size: 1.5em;
-    font-weight: bold;
-}
-.info-block-text{
-    display: block;
-    text-align: justify;
-}
-.info-block-image{
-    margin: 0% 5% 5%;
-    width:90%;
-    overflow: hidden;
-}
-.info-block-image >img{
-    width: 100%;
-}
-.rounded{
-    border-radius: 20px;
-    overflow: hidden;
-}
-.info-block-button{
-    float: right;
-    color:white;
-    background-color: #2294F4;
-    border-radius: 5px;
-}
-.button-left{
-    float: left;
-}
-.pad-down{
-    margin-top: 40%;
-    bottom: 0;
-}
-/* main block center part */
-.center-upper, .center-lower, .center-center{
-    /* background-color: lightblue; DEBUG*/
-    margin:5%;
-}
-.info-block-image-small{
-    display: inline-block;
-    width: 20%;
-    height: 100%;
-    background-color:black ;
-    overflow: hidden;
-    vertical-align: top;
-}
-.info-block-image-small >img{
-    width: 100%;
-}
-.align-left{
-    text-align: left;
-}
-.align-right{
-    text-align: right;
-}
-.inline {
-    display: inline-block;
-
-}
-.info-block-wide-text-container{
-    width: 75%;
-    margin: 0 1%;
-}
-
-.link{
-    display: block;
-    color:gray;
-    margin-bottom: 0px;
-    white-space: nowrap;
-}
-.info-block-image-center{
-    display: inline-block;
-    width: 50%;
-    /* height: 100px; */
-    background-color:black ;
-    overflow: hidden;
-    vertical-align: top;
-}
-.info-block-image-center >img{
-    width: 100%;
-}
-.small-w{
-    vertical-align: top;
-    width: 23%;
-}

index.html

@@ -3,167 +3,227 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-        "Portfolio"
+
-    </title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="./index.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.js"></script>
+    <link href="labs/lab4/css/bootstrap.min.css" rel="stylesheet">
+    <script src="labs/lab4/js/bootstrap.bundle.min.js"></script>
+
+    <title>Portfolio</title>
 </head>
 
 <body>
-    <div class="menu">
+    <!-- Navigation -->
-        <div class="menu-item menu-header">Portfolio Site </div>
+    <nav class="navbar navbar-expand-md bg-light navbar-light">
-        <a href="./index.html">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-            <div class="menu-item selected">Home</div>
+                <span class="navbar-toggler-icon"></span>
-        </a>
+            </button>
-        <a href="./embeded_details.html">
+            <div class="collapse navbar-collapse" id="navbarNav">
-            <div class="menu-item">Embedded</div>
+                <ul class="navbar-nav">
-        </a>
+                    <li class="nav-item">
-        <a href="./opencv_details.html">
+                        <a class="nav-link selected-menu px-3" href="./index.html">Home</a>
-            <div class="menu-item">OpenCV</div>
+                    </li>
-        </a>
+                    <li class="nav-item">
-        <a href="./photography_details.html">
+                        <a class="nav-link px-3" href="./embeded_details.html">Embedded</a>
-            <div class="menu-item">Photography</div>
+                    </li>
-        </a>
+                    <li class="nav-item">
-        <a href="./table.html">
+                        <a class="nav-link px-3" href="./opencv_details.html">OpenCV</a>
-            <div class="menu-item">Table</div>
+                    </li>
-        </a>
+                    <li class="nav-item">
-        <a href="./images/institute.png">
+                        <a class="nav-link px-3" href="./photography_details.html">Photography</a>
-            <div class="menu-item">Institute</div>
+                    </li>
-        </a>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="./table.html">Table</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="./images/institute.png">Institute</a>
+                    </li>
+                </ul>
             </div>
+    </nav>
 
-
+    <!-- Image Gallery -->
-    <div class="images-container">
+    <div class="container-fluid my-4 text-center">
-        <div class="half-size">
+        <div class="row g-2">
-            <img src="./images/arduino.png" alt="Arduino">
+            <div class="col-lg-4 col-md-12">
+                <div class="hover-overlay">
+                <img src="./images/sqarucos.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="Arduino">
                 </div>
-
-        <div class="quarter-size">
-            <img src="./images/esp32.png" alt="ESP32">
             </div>
-
+            <div class="col-lg-4 col-md-12">
-        <div class="image-column-container">
+                <div class="hover-overlay">
-            <div>
+                    <img src="./images/sqstm32.png" class="img-fluid border border-dark hover-shadow w-100" alt="STM32">
-                <img src="./images/institute.png" alt="ESP32">
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-12">
+                <div class="hover-overlay">
+                    <img src="./images/sqesp32.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="ESP32">
                 </div>
-            <div>
-                <img src="./images/arucos.png" alt="ESP32">
             </div>
         </div>
     </div>
 
-    <div class="main-block">
+    <!-- Main Content -->
-        <div class="main-column">
+    <div class="container-fluid">
-            <div class="info-block rounded bg-aqua">
+        <div class="row">
-                <span class="info-block-header">Embedded Systems</span>
+            <!-- Main Content Area -->
-                <span class="info-block-text">THad a serval projects with different MCUs and wrote firmware for them.
+            <div class="col-lg-9 col-md-12">
+                <!-- First Block -->
+                <div class="card mb-4">
+                    <div class="card-header text-center">
+                        <h5 class="fw-bold mb-0">Embedded Systems</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row align-items-center">
+                            <div class="col-lg-4 col-md-12 mb-3">
+                                <p class="text-justify">
+                                    Had several projects with different MCUs and wrote firmware for them.
                                     My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
-                </span>
+                                </p>
-                <div class="info-block-image rounded">
-                    <img src="./images/16x9/esp32.png" alt="ESP32">
                             </div>
-                <button type="button" class="info-block-button">More info»</button>
+                            <div class="col-lg-4 col-md-12 mb-3">
+                                <p class="text-justify">
+                                    I love embedded development because of autonomy of produced devices, the devices are
+                                    not
+                                    dependent on any other hardware and can work autonomously
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More info»</a>
+                            </div>
+                            <div class="col-lg-4 col-md-12 mb-3">
+                                <img src="./images/AQ_monitor.png" class="img-fluid" alt="ESP32">
                             </div>
-
-            <div class="info-block rounded bg-grey pad-down">
-                <span class="info-block-header">OpenCV</span>
-                <span class="info-block-text">I love when programs are able to see things or recognise them
-                    so i had serval projects involding image processing
-                    Sadly i'm used to opencv binding in python and not C++ , but that is solvable)
-                </span>
-                <div class="info-block-image rounded">
-                    <img src="./images/16x9/opencv.png" alt="ESP32">
                         </div>
-                <button type="button" class="info-block-button">More info»</button>
                     </div>
                 </div>
 
-        <div class="main-center">
+                <!-- Second Block -->
-            <div class="center-upper">
+                <div class="card mb-4">
-                <div class="info-block-image-small ">
+                    <div class="card-header text-center">
-                    <img src="./images/sqstm32.png" alt="stm32">
+                        <h5 class="fw-bold mb-0">Embedded Systems</h5>
                     </div>
-                <div class="inline info-block-wide-text-container ">
+                    <div class="card-body">
-                    <span class="info-block-header align-left">STM 32</span>
+                        <div class="row align-items-center">
-                    <span class="info-block-text ">Chinese STM32 microcontrollers are affordable and compatible with
+                            <div class="col-lg-3 col-md-12 mb-3">
-                        STM32 tools but may face flashing issues due to bootloader differences. Proper connections and
+                                <p class="text-justify">
-                        reliable tools can help resolve these.</span>
+                                    Had several projects with different MCUs and wrote firmware for them.
-                    </span>
+                                    My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
-                    <a class="link align-left" href="./index.html">More info»</a>
+                                </p>
+                            </div>
+                            <div class="col-lg-6 col-md-12 mb-3 text-center">
+                                <img src="./images/remote.jpeg" class="img-fluid" alt="Remote">
+                            </div>
+                            <div class="col-lg-3 col-md-12 mb-3">
+                                <p class="text-justify">
+                                    I love embedded development because of autonomy of produced devices, the devices
+                                    are not dependent on any other hardware and can work autonomously or off the grid
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More info»</a>
                             </div>
                         </div>
-            <div class="center-center">
-                <span class="info-block-header">Stephen King's books</span>
-                <span class="info-block-text inline small-w">Stephen King's books are a fascinating blend of horror,
-                    suspense, and deep
-                    character development. His storytelling captivates readers and keeps them on the edge of their
-                    seats.</span>
-
-                <div class="info-block-image-center">
-                    <img src="./images/institute.png" alt="ESP32">
                     </div>
-
-                <span class="info-block-text inline small-w">
-                    Especially I love the institute, its architecture, and the vibrant community it fosters. The
-                    institute has been a source of inspiration and growth for me, providing countless opportunities to
-                    learn and collaborate.
-                    <a class="link small-w" href="./index.html">More info»</a>
-
-                </span>
-
-            </div>
-            <div class="center-lower">
-
-                <div class="inline info-block-wide-text-container">
-                    <span class="info-block-header align-right">Arucos</span>
-                    <span class="info-block-text ">ArUco markers are widely used in computer vision for camera
-                        calibration, pose estimation, and augmented reality applications. They are square fiducial
-                        markers with a unique binary pattern that can be easily detected and identified in
-                        images.</span>
-                    </span>
-                    <a class="link align-right" href="./index.html">More info»</a>
-                </div>
-                <div class="info-block-image-small">
-                    <img src="./images/sqarucos.png" alt="ESP32">
                 </div>
             </div>
 
+            <!-- Sidebar -->
+            <div class="col-lg-3 col-md-12 border-start">
+                <!-- Small Info Block 1 -->
+                <div class="card mb-3 mt-lg-0 mt-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">3D Printer</h6>
+                                <p class="card-text small text-justify">
+                                    3D printers are versatile tools used for creating prototypes,
+                                    custom parts, and artistic designs. They work by layering materials.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
                             </div>
-
-
-        <div class="main-column">
-            <div class="info-block rounded bg-blue">
-                <div class="info-block-image rounded">
-                    <img src="./images/16x9/image0.png" alt="Photography">
                         </div>
-                <span class="info-block-header">Photography</span>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
-                <span class="info-block-text">Capturing moments through the lens is a passion of mine. I enjoy exploring
+                            <div class="hover-overlay">
-                    different perspectives and techniques to create different visuals.</span>
+                                <img src="images/16x10/3d-printer.jpeg" class="img-fluid hover-zoom" alt="3D Printer">
-
+                                <div class="mask" style="background-color: rgba(63, 107, 69, 0.2);"></div>
-                <button type="button" class="info-block-button button-left">More info»</button>
                             </div>
-
-            <div class="info-block rounded bg-yellow pad-down">
-
-                <div class="info-block-image rounded">
-                    <img src="./images/16x9/AQ_monitor.png" alt="Air Quality Monitor">
                         </div>
-                <span class="info-block-header">IoT and Air Quality Monitoring</span>
-                <span class="info-block-text">The Internet of Things (IoT) enables devices to communicate and share data
-                    seamlessly. One of the applications is air quality monitoring, where sensors collect data on
-                    pollutants and environmental conditions, providing real-time insights to improve health and
-                    safety.</span>
-
-                <button type="button" class="info-block-button button-left">More info»</button>
-            </div>
-
                     </div>
                 </div>
 
+                <!-- Small Info Block 2 -->
+                <div class="card mb-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">BLHeli ESCs</h6>
+                                <p class="card-text small text-justify">
+                                    BLHeli ESCs are electronic speed controllers designed
+                                    for drones, offering smooth and precise motor control.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
+                            </div>
+                        </div>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
+                            <div class="hover-overlay">
+                                <img src="images/16x10/blheli-esc.jpeg" class="img-fluid hover-zoom" alt="BLHeli ESC">
+                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
+                <!-- Small Info Block 3 -->
+                <div class="card mb-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">Raspberry Pi Nano</h6>
+                                <p class="card-text small text-justify">
+                                    Raspberry Pi Nano is a compact computer ideal for learning,
+                                    prototyping, and IoT projects. It is highly energy-efficient.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
+                            </div>
+                        </div>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
+                            <div class="hover-overlay">
+                                <img src="images/16x10/rpi-nano.jpeg" class="img-fluid hover-zoom"
+                                    alt="Raspberry Pi Nano">
+                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
-    <p>Author: Kulesh <br>
+                <!-- Small Info Block 4 -->
-        Group: Б9123-09.03.04</p>
+                <div class="card mb-3">
+                    <div class="row g-0">
+                        <div class="col-md-8 col-lg-12 col-xl-8">
+                            <div class="card-body p-3">
+                                <h6 class="card-title fw-bold text-end">Smart Thermostats</h6>
+                                <p class="card-text small text-justify">
+                                    Smart thermostats help regulate home temperatures efficiently,
+                                    saving energy and enhancing comfort with automation.
+                                </p>
+                                <a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
+                            </div>
+                        </div>
+                        <div class="col-md-4 col-lg-12 col-xl-4">
+                            <div class="hover-overlay">
+                                <img src="images/16x10/thermostat.jpeg" class="img-fluid hover-zoom"
+                                    alt="Smart Thermostat">
+                                <div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="container-fluid bg-light">
+        <span class="lead p-4 ">Kulesh A.</span>
+        <span class="lead p-4 "> Б9123-09.03.04</span>
+    </div>
 </body>
 
 </html>

labs/fake-lab4/index.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Лабораторная работа Bootstrap</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <script src="js/bootstrap.bundle.min.js"></script>
+    <style>
+        .lead{
+            text-align: justify;
+        }
+
+        @media (max-width: 576px) {
+            .lead{
+            font-size: 1rem;
+            }
+        }
+
+
+    </style>
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-md bg-light navbar-light">
+
+            <!-- Заголовок -->
+            <a class="navbar-brand" href="#">Топ высотных зданий</a>
+            <!-- Кнопка для свернутого меню -->
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <!-- меню -->
+            <div class="collapse navbar-collapse" id="menu">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="#">Главная</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Список зданий</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link disabled" href="#">Контакты</a>
+                    </li>
+                </ul>
+
+                <!-- форма для поиска -->
+                <form class="d-flex">
+                    <input class="form-control" type="text" placeholder="Найти">
+                    <button class="btn btn-outline-success" type="submit">Найти</button>
+                </form>
+            </div>
+
+        </nav>
+
+    </header>
+    <div class="row gy-3 text-center d-none d-md-flex">
+        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
+            <img src="images/image1.jpg" alt="">
+        </div>
+        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
+            <img src="images/image2.jpg" alt="">
+        </div>
+        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
+            <img src="images/image12.jpg" alt="">
+        </div>
+        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
+            <img src="images/image4.jpg" alt="">
+        </div>
+        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
+            <img src="images/image5.jpg" alt="">
+        </div>
+        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
+            <img src="images/image6.jpg" alt="">
+        </div>
+    </div>
+
+
+
+
+
+
+    <div id="gallery" class="carousel slide carousel-dark d-block d-md-none " data-bs-ride="carousel">
+
+        <!-- Содержимое галереи -->
+        <div class="carousel-inner">
+            <div class="carousel-item active">
+
+            </div>
+            <div class="carousel-item ">
+                <img src="images/image1.jpg" class="d-block mx-auto" alt="">
+            </div>
+            <div class="carousel-item">
+                <img src="images/image2.jpg" class="d-block mx-auto" alt="">
+            </div>
+            <div class="carousel-item">
+                <img src="images/image12.jpg" class="d-block mx-auto" alt="">
+            </div>
+            <div class="carousel-item">
+                <img src="images/image4.jpg" class="d-block mx-auto" alt="">
+            </div>
+            <div class="carousel-item">
+                <img src="images/image5.jpg" class="d-block mx-auto" alt="">
+            </div>
+            <div class="carousel-item">
+                <img src="images/image6.jpg" class="d-block mx-auto" alt="">
+            </div>
+
+        </div>
+
+        <!-- Кнопки управления -->
+        <button class="carousel-control-prev" type="button" data-bs-target="#gallery" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Предыдущий</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#gallery" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Следующий</span>
+        </button>
+
+    </div>
+
+
+    <main class="container">
+        <div class="row">
+            <div class="col-md-9">
+                <h2>
+                    CN Tower, <span class="text-muted">Торонто, Канада</span>
+                </h2>
+                <p class="lead">
+                    553,3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по
+                    2007 год,
+                    а также до сих пор остаётся таковым в Западном полушарии. Является символом Торонто.
+
+                </p>
+                <p class="lead">
+                    Земляные работы для сооружения железобетонной конструкции с последующим
+                    натяжением арматуры весом 130 000 т начались 12 февраля 1973 г., а уже 2 апреля 1975 г. возведение
+                    башни было завершено.
+                </p>
+                <p class="lead">
+                    Башня используется для телекоммуникационных нужд. Кроме того, башня используется как обзорная
+                    площадка.
+                    Также на башне имеется вращающийся ресторан.
+                </p>
+                <p class="lead">
+                    На высоте 447 м находится астрономическая обсерватория.
+                </p>
+            </div>
+            <div class="col-md-3">
+                <img src="images/image9.jpg">
+            </div>
+        </div>
+
+        <div class="row order flex-row-reverse">
+            <div class="col-md-9">
+            <h2>
+                Бурдж-Халифа, <span class="text-muted">Дубай, ОАЭ</span>
+            </h2>
+            <p class="lead">
+                Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.
+            </p>
+            <p class="lead">
+                Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве 
+                работало до 12 000 рабочих. На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры. 
+                Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических 
+                конструкций.
+            </p>
+            <p class="lead">
+                Специально для «Бурдж-Халифа» была разработана особая марка бетона, который выдерживает температуру до +50 °C.
+                Бетонную смесь укладывали только ночью, а в раствор добавляли лёд.
+            </p>
+            </div>
+             <div class="col-md-3">
+            <img src="images/image13.jpg">
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-9">
+            <h2>
+                Небесное дерево, <span class="text-muted">Токио, Япония</span>
+            </h2>
+            <p class="lead">
+                Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
+                Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» —
+                названию исторической области, где находится современный Токио.
+            </p>
+            <p class="lead">
+                Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
+                Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться
+                панорамными видами реки и города.
+            </p>
+            <p class="lead">
+                Имеются две наблюдательные площадки: одна на высоте 350 м (вместимостью 2000 человек), другая на высоте 450 м
+                (вместимостью 900 человек).
+            </p>
+            </div>
+            <div class="col-md-3">
+            <img src="images/image11.jpg">
+            </div>
+        </div>
+    </main>
+</body>
+
+</html>

labs/lab4/index.html

@@ -11,198 +11,89 @@
         .lead {
             text-align: justify;
         }
-
-        @media (max-width: 576px) {
-            .lead{
-            font-size: 1rem;
-            }
-        }
-
-
     </style>
 </head>
 
-<body>
-    <header>
-        <nav class="navbar navbar-expand-md bg-light navbar-light">
-
-            <!-- Заголовок -->
-            <a class="navbar-brand" href="#">Топ высотных зданий</a>
-            <!-- Кнопка для свернутого меню -->
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <!-- меню -->
-            <div class="collapse navbar-collapse" id="menu">
-                <ul class="navbar-nav">
-                    <li class="nav-item">
-                        <a class="nav-link active" href="#">Главная</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">Список зданий</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link disabled" href="#">Контакты</a>
-                    </li>
-                </ul>
-
-                <!-- форма для поиска -->
-                <form class="d-flex">
-                    <input class="form-control" type="text" placeholder="Найти">
-                    <button class="btn btn-outline-success" type="submit">Найти</button>
-                </form>
-            </div>
-
-        </nav>
-
-    </header>
-    <div class="row gy-3 text-center d-none d-md-flex">
-        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
-            <img src="images/image1.jpg" alt="">
-        </div>
-        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
-            <img src="images/image2.jpg" alt="">
-        </div>
-        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
-            <img src="images/image12.jpg" alt="">
-        </div>
-        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
-            <img src="images/image4.jpg" alt="">
-        </div>
-        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
-            <img src="images/image5.jpg" alt="">
-        </div>
-        <div class="col-lg-2 col-md-4 col-6 img-fluid img-thumbnail">
-            <img src="images/image6.jpg" alt="">
-        </div>
-    </div>
 
 
+<body class="container">
 
-
+    <div class="row bg-lg-light justify-content-center">
-
+        <div class="col-sm-12 col-md-6 col-xl-4  p-4 text-center">
-
+            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-    <div id="gallery" class="carousel slide carousel-dark d-block d-md-none " data-bs-ride="carousel">
+                JavaScript
-
+            </h3>
-        <!-- Содержимое галереи -->
+            <div class="bg-light d-lg-flex align-self-center">
-        <div class="carousel-inner">
+                <p class="lead px-2 m-0">
-            <div class="carousel-item active">
+                    разработан в 1996 году, автор - американский программист Брендан Айк.
-
-            </div>
-            <div class="carousel-item ">
-                <img src="images/image1.jpg" class="d-block mx-auto" alt="">
-            </div>
-            <div class="carousel-item">
-                <img src="images/image2.jpg" class="d-block mx-auto" alt="">
-            </div>
-            <div class="carousel-item">
-                <img src="images/image12.jpg" class="d-block mx-auto" alt="">
-            </div>
-            <div class="carousel-item">
-                <img src="images/image4.jpg" class="d-block mx-auto" alt="">
-            </div>
-            <div class="carousel-item">
-                <img src="images/image5.jpg" class="d-block mx-auto" alt="">
-            </div>
-            <div class="carousel-item">
-                <img src="images/image6.jpg" class="d-block mx-auto" alt="">
-            </div>
-
-        </div>
-
-        <!-- Кнопки управления -->
-        <button class="carousel-control-prev" type="button" data-bs-target="#gallery" data-bs-slide="prev">
-            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="visually-hidden">Предыдущий</span>
-        </button>
-        <button class="carousel-control-next" type="button" data-bs-target="#gallery" data-bs-slide="next">
-            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="visually-hidden">Следующий</span>
-        </button>
-
-    </div>
-
-
-    <main class="container">
-        <div class="row">
-            <div class="col-md-9">
-                <h2>
-                    CN Tower, <span class="text-muted">Торонто, Канада</span>
-                </h2>
-                <p class="lead">
-                    553,3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по
-                    2007 год,
-                    а также до сих пор остаётся таковым в Западном полушарии. Является символом Торонто.
-
-                </p>
-                <p class="lead">
-                    Земляные работы для сооружения железобетонной конструкции с последующим
-                    натяжением арматуры весом 130 000 т начались 12 февраля 1973 г., а уже 2 апреля 1975 г. возведение
-                    башни было завершено.
-                </p>
-                <p class="lead">
-                    Башня используется для телекоммуникационных нужд. Кроме того, башня используется как обзорная
-                    площадка.
-                    Также на башне имеется вращающийся ресторан.
-                </p>
-                <p class="lead">
-                    На высоте 447 м находится астрономическая обсерватория.
                 </p>
+                <img src="images/javascript.jpg" class="d-block m-auto w-50">
             </div>
-            <div class="col-md-3">
+        </div>
-                <img src="images/image9.jpg">
+    </div>
+    <div class="row bg-lg-light justify-content-center">
+        <div class="col-sm-12 col-md-6  col-xl-4 p-4 text-center">
+            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
+                Java
+            </h3>
+            <div class="bg-light d-lg-flex align-self-center">
+                <p class="lead px-2 m-0"></p>
+                    разработан в 1990–1996 годах канадским программистом Джеймсом Гослингом.
+                </p>
+                <img src="images/java.jpg" class="d-block m-auto w-50">
             </div>
         </div>
    
-        <div class="row order flex-row-reverse">
+        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
-            <div class="col-md-9">
+            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-            <h2>
+                C
-                Бурдж-Халифа, <span class="text-muted">Дубай, ОАЭ</span>
+            </h3>
-            </h2>
+            <div class="bg-light d-lg-flex align-self-center">
-            <p class="lead">
+                <p class="lead px-2 m-0">
-                Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.
+                    разработан в 1969–1973 годах сотрудником Bell Labs Деннисом Ритчи.
-            </p>
-            <p class="lead">
-                Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве 
-                работало до 12 000 рабочих. На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры. 
-                Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических 
-                конструкций.
-            </p>
-            <p class="lead">
-                Специально для «Бурдж-Халифа» была разработана особая марка бетона, который выдерживает температуру до +50 °C.
-                Бетонную смесь укладывали только ночью, а в раствор добавляли лёд.
                 </p>
+                <img src="images/c.jpg" class="d-block m-auto w-50">
             </div>
-             <div class="col-md-3">
-            <img src="images/image13.jpg">
         </div>
    </div>
 
-        <div class="row">
+    <div class="row bg-lg-light justify-content-center">
-            <div class="col-md-9">
+        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
-            <h2>
+            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                Небесное дерево, <span class="text-muted">Токио, Япония</span>
+                Prolog
-            </h2>
+            </h3>
-            <p class="lead">
+            <div class="bg-light d-lg-flex align-self-center">
-                Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
+                <p class="lead px-2 m-0">
-                Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» —
+                    разработан в 1972 году, автор - французский программист Ален Колмероэ.
-                названию исторической области, где находится современный Токио.
                 </p>
-            <p class="lead">
+                <img src="images/prolog.jpg" class="d-block m-auto w-50">
-                Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
+            </div>
-                Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться
+        </div>
-                панорамными видами реки и города.
+   
-            </p>
+        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
-            <p class="lead">
+            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
-                Имеются две наблюдательные площадки: одна на высоте 350 м (вместимостью 2000 человек), другая на высоте 450 м
+                Python
-                (вместимостью 900 человек).
+            </h3>
-            </p>
+            <div class="bg-light d-lg-flex align-self-center">
-            </div>
+                <p class="lead px-2 m-0">
-            <div class="col-md-3">
+                    создан в 1989–1991 годах голландским программистом Гвидо ван Россумом.
-            <img src="images/image11.jpg">
+                </p>
+                <img src="images/python.jpg" class="d-block m-auto w-50">
+            </div>
+        </div>
+    
+        <div class="col-sm-12 col-md-6 col-xl-4 p-4 text-center">
+            <h3 class="bg-light d-sm-block d-lg-inline my-0 p-2">
+                Ruby
+            </h3>
+            <div class="bg-light d-lg-flex align-self-center">
+                <p class="lead px-2 m-0">
+                    разработан в 1993-1995 годах, автор - японский программист Юкихиро Мацумото.
+                </p>
+                <img src="images/ruby.jpg" class="d-block m-auto w-50">
+            </div>
         </div>
     </div>
-    </main>
 </body>
 
 </html>

labs/lab5/.gitignore

@@ -0,0 +1 @@
+node_modules

labs/lab5/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "template_pug",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --mode production",
+    "serve": "webpack serve --open --mode development",
+    "dev": "webpack --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "chokidar": "^4.0.3",
+    "css-loader": "^6.8.1",
+    "filemanager-webpack-plugin": "^8.0.0",
+    "glob": "^11.0.3",
+    "html-webpack-plugin": "^5.5.3",
+    "pug": "^2.0.4",
+    "pug-loader": "^2.4.0",
+    "style-loader": "^3.3.3",
+    "stylus": "^0.61.0",
+    "stylus-loader": "^7.1.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

labs/lab5/src/components/data.pug

@@ -0,0 +1,36 @@
+block variables
+- var title = 'Самые высокие здания и сооружения'
+	-
+		var dictMenu = {'Главная': 'index.html', 
+				'Небоскребы' : "#",  
+				'Башни': "#", 
+				'Список': "#"
+		}
+		
+	- var listImages = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']
+
+	- 
+		var listSections = [
+			{'header' : 'Бурдж-Халифа в Дубае, ОАЭ',
+			'image' : 'image7.jpg', 
+			'text' : 'Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.'
+			},
+			{'header' : 'Токийское небесное дерево, Япония',
+			'image' : 'image6.jpg', 
+			'text' : 'Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.'
+			},
+			{'header' : 'CN Tower, Канада',
+			'image' : 'image8.jpg', 
+			'text' : 'Си-Эн Тауэр  — самое высокое свободно стоящее сооружение в мире с 1976 по 2007 год. Его высота составляет 553,33 метра.'
+			}
+		]
+	-
+		var structures = [
+		{
+			menuItem: "Ворота Запада, США",
+			pict: "image1_big.jpg",
+			firstP: `Арка в Сент-Луисе, также известная под именем «Врата на запад» — мемориал, являющийся частью Джефферсоновского национального экспансиального мемориала, а также визитной карточкой Сент-Луиса, штат Миссури, США.`,
+			secondP: `Арка была спроектирована финско-американским архитектором Ээро Саариненом в 1947 году. Её высота 192 метра в самой высокой точке, ширина её основания также 192 метра. 
+			Таким образом арка является самым высоким памятником на территории США. Её строительство началось 12 февраля 1963 года и было закончено 28 октября 1965 года. Памятник открылся для посетителей 24 июля 1967 года.`
+		}
+		]

labs/lab5/src/components/header.pug

@@ -0,0 +1,2 @@
+h2= 'Hello World!'
+img(src= require("../images/img1.jpg"))

labs/lab5/src/components/mixin.pug

@@ -0,0 +1,20 @@
+include ../components/data.pug
+
+mixin createMenu(menu, active)
+    each value, key in menu
+        if active == key
+            a.active(href= value)= key
+        else
+            a(href= value)= key
+
+mixin createMenuBuild(menu, active)
+    each value, key in menu
+            a(href= value)= key
+    a.active(href= "")= active
+mixin createSection()
+    each item in listSections
+        section
+            h3= item.header
+            img(src= require("../images/" + item.image))
+            p= item.text
+                a(href="#") …

labs/lab5/src/index.js

@@ -0,0 +1 @@
+import './styles/main.styl'

labs/lab5/src/pages/building.pug

@@ -0,0 +1,19 @@
+extends template
+
+block nav
+    title #{structures[0].menuItem}
+    nav
+        +createMenuBuild(dictMenu, structures[0].menuItem)
+
+block header 
+    h2= structures[0].menuItem
+
+block content
+
+    img.big(src= require("../images/" + structures[0].pict))
+
+    section
+        p= structures[0].firstP
+        p= structures[0].secondP
+
+    

labs/lab5/src/pages/index.pug

@@ -0,0 +1,19 @@
+extends template
+
+block nav
+    nav
+        +createMenu(dictMenu, 'Главная')
+        
+block content
+    div.images
+        each pict in listImages
+            a(href= "building.html")
+                img(src= require("../images/" + pict))
+
+    article
+        each item in listSections
+            section
+                h3= item.header
+                img(src= require("../images/"  + item.image))
+                p= item.text
+                    a(href="#") …

labs/lab5/src/pages/template.pug

@@ -0,0 +1,18 @@
+include ../components/mixin.pug
+include ../components/data.pug
+
+doctype html
+html(lang="ru")
+    head
+        title #{title} 
+    body
+        block header
+            h2= title
+
+        block nav
+
+        block content
+            
+        block footer
+            footer
+                h4 © Пример html-страницы 

labs/lab5/src/styles/main.styl

@@ -0,0 +1,86 @@
+colorText = #6f6d6d
+
+back(size)
+	background-color #f1f1f1
+	box-shadow 4px 5px 10px rgba(0, 0, 0, 0.4)
+	padding: size + "%"
+	margin 0 0 1% 0
+
+html
+	color colorText
+
+nav
+	back(0)
+	text-align right
+
+	& a
+		display inline-block
+		padding 1%
+		color colorText
+		text-decoration: none
+				
+		&:hover
+		&.active
+			background-color #f87777
+			color #f8f8f8     
+
+div.images
+	display grid
+	grid-template-columns repeat(5, 1fr)
+	grid-gap 0.5%
+	back(1)
+	overflow hidden
+
+	& img
+		width: 100%
+	@media (max-width: 600px)
+		grid-template-rows repeat(5, 1fr)
+		grid-template-columns 1fr
+		justify-items center
+		
+article
+	width 80%
+	margin auto
+	display grid
+	grid-template-columns repeat(3, 1fr)
+	grid-gap 4%
+	overflow hidden
+
+	@media (max-width: 600px)
+		grid-template-rows repeat(3, 1fr)
+		grid-template-columns 1fr
+	& section
+		display grid
+		grid-template-columns 1fr 2fr
+		grid-gap 2%
+		align-items center
+		back(2)
+		
+		& h3
+			grid-column 1/3
+			margin 0
+			text-align center
+
+		& img
+			width: 100%
+
+
+footer
+	background-color colorText
+	color white
+	@media (max-width: 600px)
+		margin 3vh 0
+	& h4 
+			padding:10px
+
+.big
+	width 50vw
+	@media (max-width: 600px)
+		width 100vw
+
+section
+	display grid
+	grid-template-columns 1fr 1fr 
+
+	@media (max-width: 600px)
+		grid-template-columns 1fr

labs/lab5/webpack.config.js

@@ -0,0 +1,69 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const FileManagerPlugin = require("filemanager-webpack-plugin");
+const path = require("path");
+const fs = require("fs");
+
+const pagesDir = path.join(__dirname, "src", "pages");
+const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
+
+module.exports = {
+  output: {
+    path: path.join(__dirname, "dist"),
+    filename: "index.[contenthash].js",
+    assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
+  },
+  entry: path.join(__dirname, "src", "index.js"),
+  module: {
+    rules: [
+      {
+        test: /\.pug$/,
+        loader: "pug-loader",
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif)$/i,
+        type: "asset/resource",
+      },
+      {
+        test: /\.svg$/,
+        type: "asset/resource",
+        generator: {
+          filename: path.join("icons", "[name].[contenthash][ext]"),
+        },
+      },
+      {
+        test: /\.styl$/,
+        use: [
+          {
+            loader: "style-loader",
+          },
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "stylus-loader",
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    ...pages.map(
+      (page) =>
+        new HtmlWebpackPlugin({
+          template: path.join(pagesDir, page),
+          filename: page.replace(".pug", ".html"),
+        })
+    ),
+    new FileManagerPlugin({
+      events: {
+        onStart: {
+          delete: ["dist"],
+        },
+      },
+    }),
+  ],
+  devServer: {
+    watchFiles: path.join(__dirname, "src"),
+    port: 9000,
+  },
+};