diff --git a/labs/lab4/src/App.css b/labs/lab4/src/App.css deleted file mode 100644 index f90339d..0000000 --- a/labs/lab4/src/App.css +++ /dev/null @@ -1,184 +0,0 @@ -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } -} - -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } -} - -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} diff --git a/labs/lab4/src/App.jsx b/labs/lab4/src/App.jsx index b2bf2e8..cf97cd8 100644 --- a/labs/lab4/src/App.jsx +++ b/labs/lab4/src/App.jsx @@ -1,120 +1,15 @@ import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import heroImg from './assets/hero.png' -import './App.css' - +import Table from './components/Table.jsx'; +import buildings from './data.js'; +import './CSS/App.css' function App() { const [count, setCount] = useState(0) return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.jsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
- +
+

Самые высокие здания и сооружения

+ + ) } diff --git a/labs/lab4/src/CSS/App.css b/labs/lab4/src/CSS/App.css new file mode 100644 index 0000000..f716aeb --- /dev/null +++ b/labs/lab4/src/CSS/App.css @@ -0,0 +1,34 @@ +body{ + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +table{ + border-collapse: collapse; +} +td,rt,th{ + border: solid thin black; + padding: 5px 5px; +} + +th{ + background-color: lightblue; +} + +h3{ + font-weight: bold; +} +.hide{ + display: none; +} + +span{ + padding:0 3px; + background-color: lightskyblue; + margin-top: 5px; + margin-right: 3px; +} + +span:hover,.selected { + font-weight: bold; + background-color: blue; + color:white; +} diff --git a/labs/lab4/src/CSS/index.css b/labs/lab4/src/CSS/index.css new file mode 100644 index 0000000..e69de29 diff --git a/labs/lab4/src/assets/hero.png b/labs/lab4/src/assets/hero.png deleted file mode 100644 index cc51a3d..0000000 Binary files a/labs/lab4/src/assets/hero.png and /dev/null differ diff --git a/labs/lab4/src/assets/react.svg b/labs/lab4/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/labs/lab4/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/labs/lab4/src/assets/vite.svg b/labs/lab4/src/assets/vite.svg deleted file mode 100644 index 5101b67..0000000 --- a/labs/lab4/src/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ -Vite diff --git a/labs/lab4/src/components/Filter.jsx b/labs/lab4/src/components/Filter.jsx new file mode 100644 index 0000000..3b03790 --- /dev/null +++ b/labs/lab4/src/components/Filter.jsx @@ -0,0 +1,76 @@ +/* + компонент, для фильтрации таблицы + пропсы: + fullData - полные данные, по которым формировалась таблица при загрузке страницы + data - данные для фильтрации + filtering - функция обновления данных для фильтрации +*/ + +const Filter = (props) => { + + const handleSubmit = (event) => { + event.preventDefault(); + + // создаем словарь со значениями полей формы + const filterField = { + "Название": event.target["structure"].value.toLowerCase(), + "Тип": event.target["type"].value.toLowerCase(), + "Страна": event.target["country"].value.toLowerCase(), + "Город": event.target["city"].value.toLowerCase(), + "Год":[event.target["yearFrom"].value==""?null:Number(event.target["yearFrom"].value),event.target["yearTo"].value==""?null:Number(event.target["yearTo"].value)], + "Высота":[event.target["heightFrom"].value==""?null:Number(event.target["heightFrom"].value),event.target["heightTo"].value==""?null:Number(event.target["heightTo"].value)] + }; + + //фильтруем данные по значениям всех полей формы + let arr = props.fullData; + for (const key in filterField) { + arr = arr.filter(item => + typeof(filterField[key])=="object"? + (filterField[key][0]==null? true:item[key]>=filterField[key][0] )&&(filterField[key][1]==null? true:item[key]<=filterField[key][1] ) : + item[key].toLowerCase().includes(filterField[key]) + ) + } + + //передаем родительскому компоненту новое состояние - отфильтрованный массив + props.filtering(arr); + } + return ( + +

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + + + +

+

+ + + + +

+ +

+ + +

+ + ) +} + + export default Filter; \ No newline at end of file diff --git a/labs/lab4/src/components/Table.jsx b/labs/lab4/src/components/Table.jsx new file mode 100644 index 0000000..747b5e9 --- /dev/null +++ b/labs/lab4/src/components/Table.jsx @@ -0,0 +1,52 @@ +import { useState } from "react"; +import TableHead from './TableHead.jsx'; +import TableBody from './TableBody.jsx'; +import Filter from './Filter.jsx'; + +/* + компонент, выводящий на страницу таблицу с пагинацией + пропсы: + data - данные для таблицы в виде массива объектов +*/ + +const Table = (props) => { + const [activePage, setActivePage] = useState("1"); + + const [dataTable, setDataTable] = useState(props.data); + const updateDataTable = (value) => setDataTable(value); + + const changeActive = (event) => { + setActivePage(event.target.innerHTML); + }; + + //количество страниц разбиения таблицы + const n = Math.ceil(dataTable.length / props.amountRows); + + // массив с номерами страниц + const arr = Array.from({ length: n }, (v, i) => i + 1); + + //формируем совокупность span с номерами страниц + const pages = arr.map((item, index) => + {item} + ); + + return ( + <> +

Фильтры

+ + +
+ + +
+ + {n>1 && +
+ {pages} +
+ } + + ) +} + +export default Table; \ No newline at end of file diff --git a/labs/lab4/src/components/TableBody.jsx b/labs/lab4/src/components/TableBody.jsx new file mode 100644 index 0000000..b9ba80a --- /dev/null +++ b/labs/lab4/src/components/TableBody.jsx @@ -0,0 +1,33 @@ +import TableRow from './TableRow.jsx'; + +/* + компонент, для вывода tbody таблицы + пропсы: + body - данные для таблицы в виде массива объектов + numPage - номер текущей страницы + amountRows - количество строк таблицы на странице +*/ + +const TableBody = (props) => { + // номера строк, отображаемых на странице + const begRange = (props.numPage - 1) * props.amountRows; + const endRange = begRange + Number(props.amountRows); + + //формируем строки на основе переданных данных + const tbody = props.body.map((item, index) => + // оставляем видимыми только строки, индексы которых принадлежат интервалу + = begRange && index < endRange) ? "show" : "hide" + }> + + + ); + + return ( + + {tbody} + + ) +} + +export default TableBody; \ No newline at end of file diff --git a/labs/lab4/src/components/TableHead.jsx b/labs/lab4/src/components/TableHead.jsx new file mode 100644 index 0000000..3d224cf --- /dev/null +++ b/labs/lab4/src/components/TableHead.jsx @@ -0,0 +1,18 @@ +import TableRow from './TableRow.jsx'; + +/* + компонент, для вывода thead таблицы + пропсы: + head - данные для шапки таблицы в виде массива +*/ +const TableHead = (props) => { + return ( + + + + + + ) +} + +export default TableHead; \ No newline at end of file diff --git a/labs/lab4/src/components/TableRow.jsx b/labs/lab4/src/components/TableRow.jsx new file mode 100644 index 0000000..2446adf --- /dev/null +++ b/labs/lab4/src/components/TableRow.jsx @@ -0,0 +1,19 @@ +/* + компонент, для вывода строки таблицы + пропсы: + row - данные для формирования ячеек строки таблицы в виде массива + isHead - 0 - если формируются ячейки td, 1 - если формируются ячейки th +*/ + +const TableRow = (props) => { + + const cells = (props.isHead == "0") + ? props.row.map((item, index) => {item} ) + : props.row.map((item, index) => {item} ); + + return( + <> {cells} + ) +} + +export default TableRow; \ No newline at end of file diff --git a/labs/lab4/src/data.js b/labs/lab4/src/data.js new file mode 100644 index 0000000..f346dae --- /dev/null +++ b/labs/lab4/src/data.js @@ -0,0 +1,519 @@ + +const buildings= [ + { + "Название": "Бурдж-Халифа", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2010, + "Высота": 828 + }, + { + "Название": "Варшавская радиомачта", + "Тип": "Антенная мачта", + "Страна": "Польша", + "Город": "Константинов", + "Год": 1974, + "Высота": 646.38 + }, + { + "Название": "Tokyo Skytree", + "Тип": "Бетонная башня", + "Страна": "Япония", + "Город": "Токио", + "Год": 2012, + "Высота": 634 + }, + { + "Название": "Шанхайская башня", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 2013, + "Высота": 632 + }, + { + "Название": "Телерадиомачта KVLY-TV", + "Тип": "Радиомачта", + "Страна": "США", + "Город": "Бланчард", + "Год": 1963, + "Высота": 629 + }, + { + "Название": "Телебашня Гуанчжоу", + "Тип": "Гиперболоидная башня", + "Страна": "КНР", + "Город": "Гуанчжоу", + "Год": 2009, + "Высота": 600 + }, + { + "Название": "Международный финансовый центр Пинань", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 2017, + "Высота": 600 + }, + { + "Название": "Lotte World Tower", + "Тип": "Небоскрёб", + "Страна": "Южная Корея", + "Город": "Сеул", + "Год": 2017, + "Высота": 555 + }, + { + "Название": "Си-Эн Тауэр", + "Тип": "Бетонная башня", + "Страна": "Канада", + "Город": "Торонто", + "Год": 1976, + "Высота": 553 + }, + { + "Название": "Останкинская башня", + "Тип": "Бетонная башня", + "Страна": "Россия", + "Город": "Москва", + "Год": 1967, + "Высота": 540.1 + }, + { + "Название": "Уиллис-тауэр", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Чикаго", + "Год": 1974, + "Высота": 527.3 + }, + { + "Название": "Тайбэй 101", + "Тип": "Небоскрёб", + "Страна": "Тайвань", + "Город": "Тайбэй", + "Год": 2004, + "Высота": 509.2 + }, + { + "Название": "Шанхайский всемирный финансовый центр", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 2008, + "Высота": 492 + }, + { + "Название": "Международный коммерческий центр", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 2009, + "Высота": 484 + }, + { + "Название": "Восточная жемчужина", + "Тип": "Бетонная башня", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 1994, + "Высота": 467.9 + }, + { + "Название": "Лахта-центр", + "Тип": "Небоскрёб", + "Страна": "Россия", + "Город": "Санкт-Петербург", + "Год": 2018, + "Высота": 462 + }, + { + "Название": "Landmark 81", + "Тип": "Небоскрёб", + "Страна": "Вьетнам", + "Город": "Хошимин", + "Год": 2018, + "Высота": 461.2 + }, + { + "Название": "875 Норт-Мичиган-авеню", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Чикаго", + "Год": 1969, + "Высота": 457.2 + }, + { + "Название": "Петронас. башня 1 и 2", + "Тип": "Небоскрёб", + "Страна": "Малайзия", + "Город": "Куала-Лумпур", + "Год": 1998, + "Высота": 452 + }, + { + "Название": "Финансовый центр Наньцзин-Гринлэнд", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Нанкин", + "Год": 2009, + "Высота": 450 + }, + { + "Название": "Эмпайр-стейт-билдинг", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Нью-Йорк", + "Год": 1931, + "Высота": 448.7 + }, + { + "Название": "Международный финансовый центр. башня зап.", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Гуанчжоу", + "Год": 2010, + "Высота": 437.5 + }, + { + "Название": "Kingkey 100", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 2011, + "Высота": 439.8 + }, + { + "Название": "Бордже Милад", + "Тип": "Бетонная башня", + "Страна": "Иран", + "Город": "Тегеран", + "Год": 2003, + "Высота": 435 + }, + { + "Название": "Парк-авеню. 432", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Нью-Йорк", + "Год": 2015, + "Высота": 425.5 + }, + { + "Название": "Международная гостиница и башня Трампа", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Чикаго", + "Год": 2009, + "Высота": 423.4 + }, + { + "Название": "Менара Куала-Лумпур", + "Тип": "Бетонная башня", + "Страна": "Малайзия", + "Город": "Куала-Лумпур", + "Год": 1995, + "Высота": 421 + }, + { + "Название": "Цзинь Мао", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шанхай", + "Год": 1999, + "Высота": 420.5 + }, + { + "Название": "Экибастузская ГРЭС-2", + "Тип": "Дымовая труба", + "Страна": "Казахстан", + "Город": "Экибастуз", + "Год": 1987, + "Высота": 419.7 + }, + { + "Название": "Международный финансовый центр", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 2003, + "Высота": 415.8 + }, + { + "Название": "Тяньцзиньская телебашня", + "Тип": "Бетонная башня", + "Страна": "КНР", + "Город": "Тяньцзинь", + "Год": 1991, + "Высота": 415.2 + }, + { + "Название": "Башня Аль-Хамра", + "Тип": "Небоскрёб", + "Страна": "Кувейт", + "Город": "Кувейт", + "Год": 2010, + "Высота": 412 + }, + { + "Название": "Пекинская телебашня", + "Тип": "Бетонная башня", + "Страна": "КНР", + "Город": "Пекин", + "Год": 1992, + "Высота": 405 + }, + { + "Название": "Башня CITIC", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Гуанчжоу", + "Год": 1997, + "Высота": 391.1 + }, + { + "Название": "Киевская телебашня", + "Тип": "Решётчатая мачта", + "Страна": "Украина", + "Город": "Киев", + "Год": 1973, + "Высота": 385 + }, + { + "Название": "Башня Сёньхин", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 1996, + "Высота": 384 + }, + { + "Название": "Абу-Даби Плаза", + "Тип": "Небоскрёб", + "Страна": "Казахстан", + "Город": "Астана", + "Год": 2015, + "Высота": 382 + }, + { + "Название": "Бурдж-Мохаммед-бин-Рашид", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Абу-Даби", + "Год": 2014, + "Высота": 381 + }, + { + "Название": "Inco Superstack", + "Тип": "Дымовая труба", + "Страна": "Канада", + "Город": "Copper Cliff", + "Год": 1971, + "Высота": 380 + }, + { + "Название": "Тантекс-Скай-Тауэр", + "Тип": "Небоскрёб", + "Страна": "Тайвань", + "Город": "Гаосюн", + "Год": 1997, + "Высота": 378 + }, + { + "Название": "JW Marriott Marquis Dubai. 1 и 2", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2010, + "Высота": 376 + }, + { + "Название": "Ташкентская телебашня", + "Тип": "Башня", + "Страна": "Узбекистан", + "Город": "Ташкент", + "Год": 1985, + "Высота": 374.9 + }, + { + "Название": "Башня Федерация «Восток»", + "Тип": "Небоскрёб", + "Страна": "Россия", + "Город": "Москва", + "Год": 2016, + "Высота": 374 + }, + { + "Название": "Сентрал-плаза", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 1992, + "Высота": 374 + }, + { + "Название": "Башня Освобождения", + "Тип": "Бетонная башня", + "Страна": "Кувейт", + "Город": "Кувейт", + "Год": 1996, + "Высота": 372 + }, + { + "Название": "Телебашня «Коктобе»", + "Тип": "Башня", + "Страна": "Казахстан", + "Город": "Алматы", + "Год": 1983, + "Высота": 371.5 + }, + { + "Название": "Дымовая труба электростанции", + "Тип": "Дымовая труба", + "Страна": "США", + "Город": "Homer City", + "Год": 1977, + "Высота": 371 + }, + { + "Название": "Дымовая труба Берёзовской ГРЭС", + "Тип": "Дымовая труба", + "Страна": "Россия", + "Город": "Шарыпово", + "Год": 1985, + "Высота": 370 + }, + { + "Название": "Рижская телебашня", + "Тип": "Бетонная башня", + "Страна": "Латвия", + "Город": "Рига", + "Год": 1987, + "Высота": 368.5 + }, + { + "Название": "Берлинская телебашня", + "Тип": "Бетонная башня", + "Страна": "Германия", + "Город": "Берлин", + "Год": 1969, + "Высота": 368 + }, + { + "Название": "Дымовая труба электростанции.", + "Тип": "Дымовая труба", + "Страна": "США", + "Город": "Маундсвилл", + "Год": 1968, + "Высота": 367.6 + }, + { + "Название": "Башня Банка Китая", + "Тип": "Небоскрёб", + "Страна": "Гонконг", + "Город": "Гонконг", + "Год": 1990, + "Высота": 367.4 + }, + { + "Название": "Башня Банка Америки", + "Тип": "Небоскрёб", + "Страна": "США", + "Город": "Нью-Йорк", + "Год": 2008, + "Высота": 366 + }, + { + "Название": "Башня Алмас", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2008, + "Высота": 363 + }, + { + "Название": "Дымовая труба электростанции в Трбовле", + "Тип": "Дымовая труба", + "Страна": "Словения", + "Город": "Трбовле", + "Год": 1976, + "Высота": 360 + }, + { + "Название": "Endesa Termic ", + "Тип": "Дымовая труба", + "Страна": "Испания", + "Город": "Ферроль", + "Год": 1974, + "Высота": 356 + }, + { + "Название": "SEG Plaza", + "Тип": "Небоскрёб", + "Страна": "КНР", + "Город": "Шэньчжэнь", + "Год": 2000, + "Высота": 355.8 + }, + { + "Название": "First Canadian Place", + "Тип": "Небоскрёб", + "Страна": "Канада", + "Город": "Торонто", + "Год": 1976, + "Высота": 355 + }, + { + "Название": "Эмиратская офисная башня", + "Тип": "Небоскрёб", + "Страна": "ОАЭ", + "Город": "Дубай", + "Год": 2000, + "Высота": 354.6 + }, + { + "Название": "ОКО Южная башня", + "Тип": "Небоскрёб", + "Страна": "Россия", + "Город": "Москва", + "Год": 2015, + "Высота": 354 + }, + { + "Название": "Виннцкая телемачта", + "Тип": "Радиомачта", + "Страна": "Украина", + "Город": "Винница", + "Год": 1961, + "Высота": 354 + }, + { + "Название": "Медеплавильный завод", + "Тип": "Дымовая труба", + "Страна": "Румыния", + "Город": "Бая-Маре", + "Год": 1995, + "Высота": 351.5 + }, + { + "Название": "Стратосфера Лас-Вегас", + "Тип": "Бетонная башня", + "Страна": "США", + "Город": "Лас-Вегас", + "Год": 1996, + "Высота": 350.2 + }, + { + "Название": "Дымовая труба Сырдарьинской электростанции", + "Тип": "Дымовая труба", + "Страна": "Узбекистан", + "Город": "Сырдарья", + "Год": 1980, + "Высота": 350 + } +]; + + + +export default buildings; diff --git a/labs/lab4/src/index.css b/labs/lab4/src/index.css deleted file mode 100644 index 2c84af0..0000000 --- a/labs/lab4/src/index.css +++ /dev/null @@ -1,111 +0,0 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } -} - -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } -} - -body { - margin: 0; -} - -#root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} diff --git a/labs/lab4/src/main.jsx b/labs/lab4/src/main.jsx index b9a1a6d..495eb04 100644 --- a/labs/lab4/src/main.jsx +++ b/labs/lab4/src/main.jsx @@ -1,6 +1,6 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' +import './CSS/index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render(