diff --git a/.gitattributes b/.gitattributes index 0f6c0ebfd5df5f35292b8f0d9056cf4e48c413ac..41ecf8ec685544f3c89111831d491737b9b0b12d 100644 --- a/.gitattributes +++ b/.gitattributes @@ -39,3 +39,9 @@ docs/public/flower3.jpg filter=lfs diff=lfs merge=lfs -text docs/public/flower4.jpg filter=lfs diff=lfs merge=lfs -text docs/public/flower5.jpg filter=lfs diff=lfs merge=lfs -text docs/public/x5.png filter=lfs diff=lfs merge=lfs -text +public/flower1.jpg filter=lfs diff=lfs merge=lfs -text +public/flower2.jpg filter=lfs diff=lfs merge=lfs -text +public/flower3.jpg filter=lfs diff=lfs merge=lfs -text +public/flower4.jpg filter=lfs diff=lfs merge=lfs -text +public/flower5.jpg filter=lfs diff=lfs merge=lfs -text +public/x5.png filter=lfs diff=lfs merge=lfs -text diff --git a/public/FileOutlined.svg b/public/FileOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..bfb54b350161fdae6876a52d15cfd8f3d61a0a2b --- /dev/null +++ b/public/FileOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/GithubOutlined.svg b/public/GithubOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..9c902f682718b0e4da90a5267de7929473a09bf6 --- /dev/null +++ b/public/GithubOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/LaptopOutlined.svg b/public/LaptopOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..80f268c07f5ea83372369e7c9d3e0c39e3746bda --- /dev/null +++ b/public/LaptopOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/MISIS-logo.svg b/public/MISIS-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..65e3aaffdf8efd0b87bc1ffe3b6a70cf8711268f --- /dev/null +++ b/public/MISIS-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/SearchOutlined.svg b/public/SearchOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..007400d8ad9dda7747e1693374f7b843c14ae0df --- /dev/null +++ b/public/SearchOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/airi_logo_black.svg b/public/airi_logo_black.svg new file mode 100644 index 0000000000000000000000000000000000000000..dbeab7e1d254caca3e1fd5b9c7ddd19e2aa2f3eb --- /dev/null +++ b/public/airi_logo_black.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/airi_logo_white.svg b/public/airi_logo_white.svg new file mode 100644 index 0000000000000000000000000000000000000000..bd909706b069efb69ef9a91c267a7aa73f2cc877 --- /dev/null +++ b/public/airi_logo_white.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/copy.svg b/public/copy.svg new file mode 100644 index 0000000000000000000000000000000000000000..83e986b81c825dbe63e257715bbc83d6c7875aad --- /dev/null +++ b/public/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/flower1.jpg b/public/flower1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..009cc6b7bae1fb3fcbf287674befaa73d3cfa604 --- /dev/null +++ b/public/flower1.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1a4a9761b4e2941755ba98c0e3d295e43919340cc5316c2816855f10a3d196c9 +size 994896 diff --git a/public/flower2.jpg b/public/flower2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2d19b3aa0cf56b5c006415f75a2a02b1eff08ff1 --- /dev/null +++ b/public/flower2.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a45a0b4936267c03aa804c3a3f4bf7800d545cf49b38193bebcdd07d58e30235 +size 6954649 diff --git a/public/flower3.jpg b/public/flower3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..16daa374e733f65d99647b8baa2c68dc182b43d6 --- /dev/null +++ b/public/flower3.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:37b904aad22531a25c042484449ccf7bf1b11aa4249e88ef3e010ceba553ddb8 +size 1594922 diff --git a/public/flower4.jpg b/public/flower4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fec6ba412da636b020d6478f4ecb7c3cde66d737 --- /dev/null +++ b/public/flower4.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c8447ff4b199298bc8e00f703db5661db9df1e02623722fc42bf010e5d5109d7 +size 1403295 diff --git a/public/flower5.jpg b/public/flower5.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6dfbf702991d824d30223935f951db7a65307798 --- /dev/null +++ b/public/flower5.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4f83da281bd3642d52400d50dcd61a3ea138a865b6b760fe2fa3929858a1fb43 +size 26037264 diff --git a/public/hse-logo.svg b/public/hse-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..b243fc7fcbc6c74656b5d1508268f9de92eaf5f7 --- /dev/null +++ b/public/hse-logo.svg @@ -0,0 +1,95 @@ + + + + + + + diff --git a/public/huggingFace.svg b/public/huggingFace.svg new file mode 100644 index 0000000000000000000000000000000000000000..d387191579e775e010132d6ba89e6f1fb6e74653 --- /dev/null +++ b/public/huggingFace.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/link.svg b/public/link.svg new file mode 100644 index 0000000000000000000000000000000000000000..0d8b88e90b98e65b42b51072df0db5e4aa0d8e46 --- /dev/null +++ b/public/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/linkedIn_logo.svg b/public/linkedIn_logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..68b26399338b3630342fef0a6f2169442ab07700 --- /dev/null +++ b/public/linkedIn_logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/mei-logo.svg b/public/mei-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..74218093f7250b15eca69bbb40e7c5d46df6cdc9 --- /dev/null +++ b/public/mei-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/mirea-logo.svg b/public/mirea-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..098c6ba27cb288d00b210e6bb8200af37e44e61b --- /dev/null +++ b/public/mirea-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/mtuci-logo.svg b/public/mtuci-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..118b4f9d189d1c62e68069a5bad708abeafb41c1 --- /dev/null +++ b/public/mtuci-logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/ok.svg b/public/ok.svg new file mode 100644 index 0000000000000000000000000000000000000000..c55fcaa7192a7a145e3425b6e1dbc424839ed763 --- /dev/null +++ b/public/ok.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/paper-svgrepo-com.svg b/public/paper-svgrepo-com.svg new file mode 100644 index 0000000000000000000000000000000000000000..a2abd1141ca99a9130a6090bc16142d7f397529b --- /dev/null +++ b/public/paper-svgrepo-com.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/telegram.svg b/public/telegram.svg new file mode 100644 index 0000000000000000000000000000000000000000..2b9da8e1c530b80b3c05fad02b19717c5d1f01eb --- /dev/null +++ b/public/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/vk.svg b/public/vk.svg new file mode 100644 index 0000000000000000000000000000000000000000..3ed20e6ba86d9690bfea595f58ca49b7055fdaeb --- /dev/null +++ b/public/vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/x4.jpg b/public/x4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b91ed8868cb781eae21ad5762634ab86dbe34687 Binary files /dev/null and b/public/x4.jpg differ diff --git a/public/x5.png b/public/x5.png new file mode 100644 index 0000000000000000000000000000000000000000..729dd6e8f3679cf2a90ee9c9dbccef9dc8126ea7 --- /dev/null +++ b/public/x5.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5e06859afd7a1ffcc9fccca46545754d16080ffbdd3e2a1fbadb4ee2ad777de2 +size 319414 diff --git a/public/x6.png b/public/x6.png new file mode 100644 index 0000000000000000000000000000000000000000..a6a715f899de01e0b7e771c1526251e4585cd798 Binary files /dev/null and b/public/x6.png differ diff --git a/public/x_logo.svg b/public/x_logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..3654b1bec43121f65a3215a5da0adae63adae7d4 --- /dev/null +++ b/public/x_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/barChart.js b/scripts/barChart.js new file mode 100644 index 0000000000000000000000000000000000000000..e48752394aef5b7136bceaf6bd96e25d3f603554 --- /dev/null +++ b/scripts/barChart.js @@ -0,0 +1,30 @@ +new Chart(document.getElementById('BarChart'), { + type: 'bar', + data: { + labels: ['q', 'w', 'e', 'r', 't', 'y'], + datasets: [ + { + label: 'Dataset 1', + data: [520, 760, 240, 433, 156, 380], + backgroundColor: '#64bbf3', + }, + { + label: 'Dataset 2', + data: [450, 810, 370, 400, 215, 300], + backgroundColor: '#ee6c71', + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Chart.js Bar Chart', + }, + }, + }, +}) diff --git a/scripts/beforeAfter.js b/scripts/beforeAfter.js new file mode 100644 index 0000000000000000000000000000000000000000..6e973e4d08efe635bb4e6942eedf31d4b606f5f8 --- /dev/null +++ b/scripts/beforeAfter.js @@ -0,0 +1,14 @@ +const container = document.querySelector('.compare-images') +const handle = document.querySelector('.slider-handle') +const beforeImg = document.querySelector('.before-img') + +container.addEventListener('mousemove', (e) => { + const rect = container.getBoundingClientRect() + const offsetX = e.clientX - rect.left + + const clampedX = Math.max(0, Math.min(offsetX, rect.width)) + + handle.style.left = `${clampedX}px` + + beforeImg.style.clipPath = `inset(0 0 0 ${clampedX}px)` +}) diff --git a/scripts/codeCopy.js b/scripts/codeCopy.js new file mode 100644 index 0000000000000000000000000000000000000000..73361f75c979aaa1a48d7ea644f581e4e6a0519d --- /dev/null +++ b/scripts/codeCopy.js @@ -0,0 +1,30 @@ +document.querySelectorAll('.bibTeX-section').forEach((section) => { + const button = section.querySelector('.copy-button') + if (!button) return + + const codeElement = section.querySelector('.bibTeX') + const activeСontent = button.querySelector('.active-content') + const inactiveСontent = button.querySelector('.inactive-content') + + const code = codeElement ? codeElement.innerText : '' + + button.addEventListener('click', () => { + navigator.clipboard.writeText(code).catch((err) => { + console.error('Ошибка копирования:', err) + }) + + button.classList.add('copy-button--inactive') + button.classList.remove('copy-button--active') + + if (activeСontent) activeСontent.style.display = 'none' + if (inactiveСontent) inactiveСontent.style.display = 'block' + + setTimeout(() => { + button.classList.remove('copy-button--inactive') + button.classList.add('copy-button--active') + + if (activeСontent) activeСontent.style.display = 'block' + if (inactiveСontent) inactiveСontent.style.display = 'none' + }, 3000) + }) +}) diff --git a/scripts/dropdown.js b/scripts/dropdown.js new file mode 100644 index 0000000000000000000000000000000000000000..839aaab63a5ea1e46e9d6912fe8e0d56ff811498 --- /dev/null +++ b/scripts/dropdown.js @@ -0,0 +1,22 @@ +document.addEventListener('DOMContentLoaded', function () { + const dropdowns = document.querySelectorAll('[data-dropdown]') + const selectedValue = document.getElementById('selectedValue') + + dropdowns.forEach((dropdown) => { + const button = dropdown.querySelector('.dropdown__button') + + const items = dropdown.querySelectorAll('.dropdown__item') + + button.addEventListener('click', function (e) { + dropdown.classList.toggle('open') + }) + + items.forEach((item) => { + item.addEventListener('click', function () { + const value = this.textContent + selectedValue.textContent = value + dropdown.classList.remove('open') + }) + }) + }) +}) diff --git a/scripts/lightbox.js b/scripts/lightbox.js new file mode 100644 index 0000000000000000000000000000000000000000..0d66e1281bd3fd926e5f7b62cf4e6111bb1b0f16 --- /dev/null +++ b/scripts/lightbox.js @@ -0,0 +1,30 @@ +function setupLightbox(thumbnailId, lightboxId, lightboxImgId, closeBtnId) { + const thumbnail = document.getElementById(thumbnailId) + const lightbox = document.getElementById(lightboxId) + const lightboxImg = document.getElementById(lightboxImgId) + const closeBtn = document.getElementById(closeBtnId) + + if (thumbnail && lightbox && lightboxImg && closeBtn) { + thumbnail.addEventListener('click', () => { + lightbox.style.display = 'block' + lightboxImg.src = thumbnail.src + }) + + closeBtn.addEventListener('click', () => { + lightbox.style.display = 'none' + }) + + lightbox.addEventListener('click', (e) => { + if (e.target === lightbox) { + lightbox.style.display = 'none' + } + }) + } else { + console.warn(`Элементы лайтбокса "${lightboxId}" не найдены.`) + } +} + +setupLightbox('openLightbox1', 'lightbox1', 'lightbox-img1', 'closeLightbox1') +setupLightbox('openLightbox2', 'lightbox2', 'lightbox-img2', 'closeLightbox2') +setupLightbox('openLightbox3', 'lightbox3', 'lightbox-img3', 'closeLightbox3') +setupLightbox('openLightbox4', 'lightbox4', 'lightbox-img4', 'closeLightbox4') diff --git a/scripts/lineChart.js b/scripts/lineChart.js new file mode 100644 index 0000000000000000000000000000000000000000..9973e36959006417f6e79dd589923d181b9adbdf --- /dev/null +++ b/scripts/lineChart.js @@ -0,0 +1,30 @@ +new Chart(document.getElementById('LineChart'), { + type: 'line', + data: { + labels: ['qq', 'w', 'e', 'r', 't', 'y'], + datasets: [ + { + label: 'Dataset 1', + data: [520, 760, 240, 433, 156, 380], + backgroundColor: '#64bbf3', + }, + { + label: 'Dataset 2', + data: [450, 810, 370, 400, 215, 300], + backgroundColor: '#ee6c71', + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Chart.js Line Chart', + }, + }, + }, +}) diff --git a/scripts/pieChart.js b/scripts/pieChart.js new file mode 100644 index 0000000000000000000000000000000000000000..5f496eac4db7d92e8821c2994e2d2a8a93e2bfda --- /dev/null +++ b/scripts/pieChart.js @@ -0,0 +1,29 @@ +new Chart(document.getElementById('PieChart'), { + type: 'pie', + data: { + labels: ['1', '2', '3'], + datasets: [ + { + label: 'Dataset 1', + data: [50, 15, 35], + backgroundColor: ['#64bbf3', '#ee6c71', '#fecc4e'], + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + labels: { + boxWidth: 15, + padding: 15, + }, + }, + title: { + display: true, + text: 'Chart.js Pie Chart', + }, + }, + }, +}) diff --git a/scripts/sidebar.js b/scripts/sidebar.js new file mode 100644 index 0000000000000000000000000000000000000000..f70342c37fd120f3446db61bbe60f5f6f13e9213 --- /dev/null +++ b/scripts/sidebar.js @@ -0,0 +1,72 @@ +document.addEventListener('DOMContentLoaded', function () { + const sections = document.querySelectorAll('section[id]') + const navItems = document.querySelectorAll('.sidebar .nav-item') + const sidebar = document.querySelector('.sidebar') + const footer = document.getElementById('footer') + + document.querySelectorAll('.sidebar a[href^="#"]').forEach((link) => { + const target = link.getAttribute('href') + const parentItem = link.closest('.nav-item') + if (parentItem && target) { + parentItem.setAttribute('data-target', target) + } + }) + + function updateActiveLink() { + let currentSectionId = null + + sections.forEach((section) => { + const rect = section.getBoundingClientRect() + if (rect.top <= 100 && rect.bottom >= 50) { + currentSectionId = section.id + } + }) + + navItems.forEach((item) => item.classList.remove('active')) + + if (!currentSectionId) return + + const activeItem = document.querySelector( + `.sidebar .nav-item[data-target="#${currentSectionId}"]` + ) + if (activeItem) { + activeItem.classList.add('active') + } + } + + function adjustSidebarPosition() { + if (!sidebar || !footer) return + + const footerRect = footer.getBoundingClientRect() + const sidebarHeight = sidebar.offsetHeight + const scrollTop = window.scrollY || document.documentElement.scrollTop + + const footerTop = scrollTop + footerRect.top + + const bodyContainer = document.querySelector('.body-container') + const bodyBottom = bodyContainer + ? bodyContainer.offsetTop + bodyContainer.offsetHeight + : footerTop + + const initialSidebarTop = window.innerHeight * 0.2 + const sidebarBottomOnPage = scrollTop + initialSidebarTop + sidebarHeight + + if (sidebarBottomOnPage >= footerTop - 20) { + sidebar.style.position = 'absolute' + sidebar.style.top = `${bodyBottom - sidebarHeight - 20}px` + } else { + sidebar.style.position = 'fixed' + sidebar.style.top = `${20}%` + } + } + + window.addEventListener('scroll', () => { + updateActiveLink() + adjustSidebarPosition() + }) + + window.addEventListener('resize', adjustSidebarPosition) + + updateActiveLink() + adjustSidebarPosition() +}) diff --git a/scripts/swiper.js b/scripts/swiper.js new file mode 100644 index 0000000000000000000000000000000000000000..34af6c55c84b3c506e1c52eb39024b17f0fac93a --- /dev/null +++ b/scripts/swiper.js @@ -0,0 +1,35 @@ +var swiper = new Swiper('.mySwiper', { + loop: true, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, +}) + +const swiperLightbox = document.getElementById('swiper-lightbox') +const swiperLightboxImg = document.getElementById('swiper-lightbox-img') +const swiperCloseBtn = document.getElementById('swiper-lightbox__close') + +if (swiperLightbox && swiperLightboxImg && swiperCloseBtn) { + document.querySelectorAll('.swiper-slide img').forEach((slideImage) => { + slideImage.addEventListener('click', () => { + const imgSrc = slideImage.src + if (imgSrc) { + swiperLightbox.style.display = 'flex' + swiperLightboxImg.src = imgSrc + } + }) + }) + + swiperCloseBtn.addEventListener('click', () => { + swiperLightbox.style.display = 'none' + }) + + swiperLightbox.addEventListener('click', (e) => { + if (swiperLightbox.style.display === 'flex') { + swiperLightbox.style.display = 'none' + } + }) +} else { + console.warn('Элементы лайтбокса в слайдере не найдены.') +} diff --git a/scripts/swiperCharts.js b/scripts/swiperCharts.js new file mode 100644 index 0000000000000000000000000000000000000000..7c655a93429cbcd58398108797bb194147d1bb7e --- /dev/null +++ b/scripts/swiperCharts.js @@ -0,0 +1,142 @@ +const charts = {} + +function initBarChart() { + if (charts.barChart) return + charts.barChart = new Chart(document.getElementById('BarChart-slider'), { + type: 'bar', + data: { + labels: ['q', 'w', 'e', 'r', 't', 'y'], + datasets: [ + { + label: 'Dataset 1', + data: [520, 760, 240, 433, 156, 380], + backgroundColor: '#64bbf3', + }, + { + label: 'Dataset 2', + data: [450, 810, 370, 400, 215, 300], + backgroundColor: '#ee6c71', + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Chart.js Bar Chart', + }, + }, + }, + }) +} + +function initLineChart() { + if (charts.lineChart) return + charts.lineChart = new Chart(document.getElementById('LineChart-slider'), { + type: 'line', + data: { + labels: ['qq', 'w', 'e', 'r', 't', 'y'], + datasets: [ + { + label: 'Dataset 1', + data: [520, 760, 240, 433, 156, 380], + backgroundColor: '#64bbf3', + }, + { + label: 'Dataset 2', + data: [450, 810, 370, 400, 215, 300], + backgroundColor: '#ee6c71', + }, + ], + }, + options: { + responsive: true, + plugins: { + title: { + display: true, + text: 'Chart.js Line Chart', + }, + }, + }, + }) +} + +function initPieChart() { + if (charts.pieChart) return + charts.pieChart = new Chart(document.getElementById('PieChart-slider'), { + type: 'pie', + data: { + labels: ['1', '2', '3'], + datasets: [ + { + label: 'Dataset 1', + data: [50, 15, 35], + backgroundColor: ['#64bbf3', '#ee6c71', '#fecc4e'], + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + labels: { + boxWidth: 15, + padding: 15, + }, + }, + title: { + display: true, + text: 'Chart.js Pie Chart', + }, + }, + }, + }) +} + +initBarChart() + +var swiperOnButton = new Swiper('.my-swiper-on-button', { + loop: false, +}) + +function onSlideChange() { + const activeIndex = swiperOnButton.realIndex + + ;['barChart', 'lineChart', 'pieChart'].forEach((key) => { + if (charts[key]) { + charts[key].destroy() + charts[key] = null + } + }) + + if (activeIndex === 0) initBarChart() + if (activeIndex === 1) initLineChart() + if (activeIndex === 2) initPieChart() +} + +swiperOnButton.on('slideChange', onSlideChange) + +document.querySelectorAll('[data-slide-to]').forEach((button) => { + button.addEventListener('click', () => { + console.log( + 'click', + charts, + button.getAttribute('data-slide-to'), + parseInt(button.getAttribute('data-slide-to')) + ) + document.querySelectorAll('.swiper-button').forEach((btn) => { + btn.classList.remove('active') + }) + button.classList.add('active') + const index = parseInt(button.getAttribute('data-slide-to')) + swiperOnButton.slideTo(index) + + setTimeout(() => { + onSlideChange() + }, 10) + }) +}) diff --git a/styles/beforeAfter.css b/styles/beforeAfter.css new file mode 100644 index 0000000000000000000000000000000000000000..8f19042dc80a62cca908601dbdd0553094c17de8 --- /dev/null +++ b/styles/beforeAfter.css @@ -0,0 +1,60 @@ +.compare-container { + max-width: 800px; + margin: 40px auto; + position: relative; + cursor: crosshair; +} + +.compare-images { + position: relative; + width: 100%; + height: auto; + overflow: hidden; + + border-radius: 10px; + aspect-ratio: 16 / 9; +} + +.compare-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: clip-path 0.1s ease-out; +} + +.before-img { + clip-path: inset(0 0 0 50%); + z-index: 1; +} + +.after-img { + z-index: 0; +} + +.slider-handle { + position: absolute; + top: 0; + left: 50%; + width: 2px; + height: 100%; + background-color: #2ebead; + pointer-events: none; + z-index: 2; + opacity: 0.7; + transition: left 0.1s ease-out; +} + +.slider-handle::after { + content: ''; + position: absolute; + top: 50%; + left: -11px; + transform: translateY(-50%); + width: 25px; + height: 25px; + background-color: #2ebead; + border-radius: 50%; +} diff --git a/styles/bibTex.css b/styles/bibTex.css new file mode 100644 index 0000000000000000000000000000000000000000..f14ca72b9877214421bebe365f1efa59653db41a --- /dev/null +++ b/styles/bibTex.css @@ -0,0 +1,65 @@ +.bibTeX-section__container { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + justify-items: center; + overflow: hidden; + transition: all 0.3s ease; +} + +.bibTeX__container { + border-radius: 15px; + padding: 20px; + background-color: #f4f4f4; +} + +.bibTeX { + margin: 0; + padding: 0; + white-space: pre-wrap; + word-break: break-word; + background: transparent; + border: none; + font-size: 16px; + color: #333; +} + +.copy-button { + padding: 10px; + text-align: center; + width: 180px; + margin-left: auto; + margin-right: auto; + color: white; + font-size: 18px; + + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.2s ease; +} +.copy-button > p, +.copy-button > img { + text-align: center; + margin-top: auto; + margin-bottom: auto; + margin-left: auto; + margin-right: auto; +} + +.copy-button--active { + background-color: #64bbf3; +} +.copy-button--inactive { + background-color: #53d98a; +} + +.copy-button--active:hover { + background-color: #56a1d3; +} + +.copy-button .inactive-content { + display: none; + pointer-events: none; +} diff --git a/styles/charts.css b/styles/charts.css new file mode 100644 index 0000000000000000000000000000000000000000..debc348733215dd636640582673414c77fcf12d8 --- /dev/null +++ b/styles/charts.css @@ -0,0 +1,30 @@ +.diagrams-section__container { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.myChart { + margin-bottom: 20px; + padding: 10px; + border-radius: 15px; + border: 1px solid rgb(245, 245, 245); + transition: all 0.3s ease; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); +} + +.myChart:hover { + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +.caption { + margin: 0 auto 40px auto; + font-size: 12px; +} + +@media (max-width: 670px) { + .diagrams-section__container { + width: 90vw; + } +} diff --git a/styles/codeSection.css b/styles/codeSection.css new file mode 100644 index 0000000000000000000000000000000000000000..9e3fb47a21bcab89b6e32e45ca7b3278b5863f75 --- /dev/null +++ b/styles/codeSection.css @@ -0,0 +1,31 @@ +.code-section__container { + position: relative; + + border-radius: 5px; + padding: 50px; + overflow: hidden; + transition: all 0.3s ease; + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06); +} + +.code__container { + padding: 20px; + background-color: #f4f4f4; +} + +.code { + margin: 0; + padding: 0; + white-space: pre-wrap; + word-break: break-word; + background: transparent; + border: none; + font-size: 16px; + color: #333; +} + +@media (max-width: 600px) { + .code-section__container { + padding: 20px; + } +} diff --git a/styles/columnsSection.css b/styles/columnsSection.css new file mode 100644 index 0000000000000000000000000000000000000000..30b8d72e21a385932eec5fab1acdfc930c7d979e --- /dev/null +++ b/styles/columnsSection.css @@ -0,0 +1,28 @@ +.columns-section__container { + border: 1px solid rgb(245, 245, 245); + border-radius: 15px; + padding: 50px; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); +} + +.column { + padding: 0 10px; + height: 100%; + border: none; +} + +.row { + margin-bottom: 30px; + display: flex; + justify-content: center; +} + +@media (max-width: 600px) { + .columns-section__container { + padding: 20px; + } +} diff --git a/styles/dropdown.css b/styles/dropdown.css new file mode 100644 index 0000000000000000000000000000000000000000..c17a4eefb64178145ea2b2ca49e1584e46fa3fc4 --- /dev/null +++ b/styles/dropdown.css @@ -0,0 +1,81 @@ +.dropdown-section__container { + border: 1px solid rgb(245, 245, 245); + border-radius: 15px; + padding: 50px; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); +} +.dropdown__row { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 10px; +} + +.dropdown { + width: 100%; + position: relative; + flex: 1 1 30%; + min-width: 200px; + transition: flex 5.3s ease; +} + +.dropdown__button { + width: 100%; + padding: 10px 15px; + background-color: #0b6efd; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + text-align: left; + transition: background-color 0.2s ease; +} +.dropdown__button:hover { + background-color: #0353c4; +} + +.dropdown__content { + display: none; + top: 100%; + left: 0; + right: 0; + background-color: white; + z-index: 1000; + border-radius: 4px; + overflow: hidden; + margin-top: 4px; + animation: fadeIn 0.5s ease forwards; +} + +.dropdown.open .dropdown__content { + display: block; +} + +.dropdown__item { + white-space: normal; + word-wrap: break-word; + text-align: left; + padding: 10px 16px; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-5px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@media (max-width: 600px) { + .dropdown-section__container { + padding: 20px; + } +} diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 0000000000000000000000000000000000000000..444dccda35e47237cedf8f79d9d5bd0001b9d9c1 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,113 @@ +footer { + width: 100%; + background-color: #171c27; + color: white; + padding: 20px 20px 10px 20px; +} + +.footer-section { + max-width: 1400px; + margin: 45px auto 0 auto; +} + +.footer__information { + max-width: 1000px; + margin-left: auto; + margin-right: auto; + display: flex; + justify-self: center; + justify-content: space-between; + flex-direction: row; +} + +.airi-logo-section { + max-width: 180px; + display: flex; + flex-direction: column; + justify-content: start; + + color: #8c9090; +} +.airi-logo-section > img { + width: 160px; +} +.airi-logo-section > p { + margin-top: 14px; + font-size: 12px; +} + +.footer__mails { + display: flex; + flex-direction: column; +} + +.copyrighted { + width: 100%; + text-align: center; + margin: 3vh auto 1vh auto; + color: #8c9090; +} + +.gray { + color: #8c9090; +} + +.mail { + font-size: 16px; + color: #fff; + transition: color 0.5s ease; +} + +.mail:hover { + color: #2ebead; +} + +.mail__description { + margin-bottom: 5px; + font-size: 14px; + color: #8c9090; +} + +.media-logo { + margin: 5px 5px 5px 0; + fill: white; + transition: all 0.3s ease; +} + +.media-logo:hover { + fill: #2fbead; +} + +@media (max-width: 900px) { + .footer__information { + flex-direction: column; + justify-content: center; + } + .airi-logo { + margin-bottom: 50px; + } + .footer__information { + width: 100%; + padding: 0 5vw; + } + + .footer__mails { + flex-direction: column; + width: 100%; + margin: 0; + } + + .copyrighted { + width: 100%; + margin: 5vh 0 1vh 0; + } + + .footer__social-media { + width: 100%; + padding: 0 5vw; + margin-bottom: 50px; + } + .mail__contanct { + margin: 20px 0 0 0; + } +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 0000000000000000000000000000000000000000..963f24cccb62dbc1caa0b580a953ec748e35c0fc --- /dev/null +++ b/styles/header.css @@ -0,0 +1,104 @@ +header { + padding: 5vh 10vw 0 10vw; + width: 100%; + display: flex; + justify-content: center; + + background: linear-gradient( + 180deg, + rgb(254, 243, 227) 0%, + rgba(255, 255, 255, 1) 100% + ); +} +.header__container { + max-width: 800px; + font-family: 'Inter', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.header__container > h1 { + text-align: center; +} + +.header__link-container { + margin-bottom: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px 15px; + line-height: 1.6; + margin-top: 50px; + width: 80%; +} + +a { + font-size: 14px; + color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); + text-decoration: none; +} + +.linkContainer__authors { + margin-bottom: 2vh; +} +.header__button-container { + margin-top: 20px; + display: flex; + flex-direction: row; +} +.header__button { + display: flex; + align-items: center; + padding: 25px 20px 25px 20px; + font-size: 16px; + width: 10em; + height: 40px; + margin: 2.5px; + border-radius: 30px; + background-color: #2ebead; + border: none; + color: #fff; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0); +} + +.header__button:hover { + transform: scale(1.05); + background-color: #29ac9d; +} + +.header__button-logo { + position: absolute; + margin: 0; +} +.header__button-text { + font-size: 14px; + margin: 0 auto 0 auto; + text-align: center; +} +.header__participants-container { + margin-bottom: 40px; +} +.header__participants-logo { + width: 170px; + height: 120px; +} + +@media (max-width: 600px) { + .header__participants-logo { + width: 150px; + } + .header__button-container { + flex-direction: column; + } + .header__link-container { + width: 90%; + } + .header__button { + width: 18em; + margin-bottom: 10px; + } +} diff --git a/styles/lightbox.css b/styles/lightbox.css new file mode 100644 index 0000000000000000000000000000000000000000..284f62fe0bc7fd7176af3b05c3fc23c06e33b11a --- /dev/null +++ b/styles/lightbox.css @@ -0,0 +1,77 @@ +.lighbox-container { + display: flex; + width: 100%; + + flex-direction: column; +} + +.lighbox-row { + display: flex; + justify-content: space-between; +} + +.thumbnail { + cursor: pointer; + width: 250px; + height: auto; + border-radius: 8px; + transition: transform 0.2s ease; +} + +.thumbnail:hover { + transform: scale(1.05); +} + +.lightbox { + display: none; + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(4px); +} + +.lightbox-content { + margin: 5% auto; + display: block; + max-width: 90%; + max-height: 80vh; + animation: zoom 0.3s; +} + +.close-btn { + position: absolute; + top: 20px; + right: 35px; + color: white; + font-size: 40px; + font-weight: bold; + cursor: pointer; + z-index: 10000; +} + +.close-btn:hover, +.close-btn:focus { + color: #bbb; + text-decoration: none; + cursor: pointer; +} + +@keyframes zoom { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} + +@media (max-width: 600px) { + .lighbox-container { + padding: 20px; + } +} diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000000000000000000000000000000000000..e3352ac1a04b38869e930958cc4b06ef56d9e84b --- /dev/null +++ b/styles/main.css @@ -0,0 +1,84 @@ +body { + min-height: 100vh; + background-color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +main { + flex: 1; +} + +section { + max-width: 800px; + margin-bottom: 100px; +} + +.body-container { + font-family: 'Montserrat', sans-serif; +} + +p, +h1, +h2, +h3, +ul, +li { + max-width: 660px; + text-align: left; +} + +h1 { + width: 100%; + margin: 0; + font-weight: 700; + font-size: 38px; +} + +p { + margin-bottom: 30px; + font-weight: 400; + text-align: left; + font-size: 16px; + line-height: 1.6; +} + +h2 { + width: 100%; + margin: 0; + margin-bottom: 40px; + font-weight: 600; + font-size: 32px; +} + +h3 { + font-size: 26px; + font-weight: 500; +} +li { + margin-bottom: 15px; + line-height: 1.6; +} +@media (max-width: 800px) { + .body-container { + width: 90vw; + } +} +@media (max-width: 600px) { + section { + margin-bottom: 45px; + } + h1 { + font-size: 30px; + } + h2 { + font-size: 24px; + margin-bottom: 25px; + } + p { + font-size: 16px; + margin-bottom: 20px; + } +} diff --git a/styles/numberSection.css b/styles/numberSection.css new file mode 100644 index 0000000000000000000000000000000000000000..ad0aaeacc3b1c7163032a4e0f825c82ffbc230ec --- /dev/null +++ b/styles/numberSection.css @@ -0,0 +1,27 @@ +.numbers-section__container { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + justify-items: center; +} + +.numbers__container { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.number__card { + margin-right: 10px; +} + +.number__card > h1 { + width: fit-content; + margin-left: auto; + margin-right: auto; +} +.number__card > p { + text-align: center; + margin-bottom: 0; +} diff --git a/styles/sidebar.css b/styles/sidebar.css new file mode 100644 index 0000000000000000000000000000000000000000..2c2c1cca4abdffff54bdaf542f0f987b2a415971 --- /dev/null +++ b/styles/sidebar.css @@ -0,0 +1,52 @@ +.sidebar { + font-size: 12px; + line-height: 10px; + position: fixed; + top: 20%; + left: 10px; + width: 250px; + max-height: calc(100vh - 40px); + overflow-y: auto; + z-index: 1000; + padding: 10px; + border-radius: 4px; +} + +.content { + margin-left: 290px; + padding: 5px; + width: 100%; +} + +.nav-link { + color: black; +} + +.sidebar .nav-item { + position: relative; + padding-left: 3px; + margin-bottom: 5px; + line-height: 1; +} + +.indicator { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #ccc; + transition: background-color 0.3s ease; +} + +.nav-item.active .indicator { + background-color: #007bff; +} + +@media (max-width: 1100px) { + .sidebar { + display: none; + } +} diff --git a/styles/swiper.css b/styles/swiper.css new file mode 100644 index 0000000000000000000000000000000000000000..3f31d6cf1b4f55a155e5f529c8e4b3b5dcf8bd6e --- /dev/null +++ b/styles/swiper.css @@ -0,0 +1,88 @@ +.swiper-container { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.swiper { + border-radius: 15px; + color: white; + width: 100%; + height: 315px; +} + +.swiper-slide { + text-align: center; + font-size: 18px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +.swiper-button-next, +.swiper-button-prev { + color: #2ebead !important; +} + +.swiper-lightbox { + display: none; + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(4px); +} + +.swiper-lightbox-content { + margin: 5% auto; + max-width: 90vw; + max-height: 80vh; + object-fit: contain; +} + +.swiper-lightbox__close { + position: absolute; + top: 20px; + right: 35px; + color: white; + font-size: 40px; + font-weight: bold; + cursor: pointer; + z-index: 10000; +} + +.swiper-lightbox__close:hover, +.swiper-lightbox__close:focus { + color: #bbb; + text-decoration: none; + cursor: pointer; +} + +@keyframes zoom { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} + +@media (max-width: 800px) { + .swiper { + width: 90vw; + height: 45vw; + } +} diff --git a/styles/swiperOnButton.css b/styles/swiperOnButton.css new file mode 100644 index 0000000000000000000000000000000000000000..f9b32d4c1b3d62af1cfbc9bd6ce352bc6c53d59c --- /dev/null +++ b/styles/swiperOnButton.css @@ -0,0 +1,107 @@ +.swiper-on-button__container { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.swiper-buttons { + display: flex; + + padding: 30px 0; +} + +.swiper-button { + align-items: center; + text-align: center; + font-size: 16px; + font-weight: 500; + width: 140px; + height: 40px; + margin: 10px; + border-radius: 30px; + color: black; + border: none; + cursor: pointer; + transition: all 0.3s ease; +} + +.swiper-button:hover { + transform: scale(1.05); + color: white; + background-color: #35d0be; +} + +.swiper-button.active { + color: white; + background-color: #2fbead; + transform: scale(1.1); +} + +.my-swiper-on-button { + height: 400px !important; +} + +.swiper { + border: 1px solid #ececec; + border-radius: 15px; + color: white; + width: 100%; + height: 315px; +} + +.swiper-slide { + text-align: center; + font-size: 18px; + display: flex; + justify-content: center; + object-fit: cover; + align-items: center; +} + +.myChart-slide { + height: 100% !important; + width: auto !important; + margin: 0 auto; + padding: 20px; + transition: all 0.3s ease; +} + +@media (max-width: 800px) { + .swiper-on-button__container { + width: 90vw; + margin-left: auto; + margin-right: auto; + } + .myChart-slide { + padding: 5px; + } + .my-swiper-on-button { + width: 100% !important; + height: 45vw !important; + } + .swiper-buttons { + padding: 5px 0; + } + .swiper-button { + width: 25vw; + height: 5vw; + font-size: 12px; + } +} + +@media (max-width: 600px) { + .swiper-button { + width: 30vw; + height: 7vw; + font-size: 12px; + margin: 5px; + } +} +@media (max-width: 400px) { + .swiper-button { + width: 30vw; + height: 10vw; + font-size: 12px; + } +} diff --git a/styles/table.css b/styles/table.css new file mode 100644 index 0000000000000000000000000000000000000000..2fed5db1b2bb2df804eaae2e24b251b8b102b12d --- /dev/null +++ b/styles/table.css @@ -0,0 +1,65 @@ +.table-section { + text-align: left; +} +.table-section__container { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); + max-width: 100%; + overflow-x: auto; + position: relative; +} + +table { + width: 100%; + border-collapse: collapse; + min-width: 600px; + table-layout: fixed; +} + +th, +td { + padding: 10px; + padding-left: 30px; + text-align: left; + + border: 1px solid #ddd; + background-color: white; +} + +td:first-child, +th:first-child { + padding: 10px; + text-align: center; + position: sticky; + left: 0; + z-index: 10; + background-color: #f9f9f9; + box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.1); + width: fit-content; +} + +th:first-child { + position: sticky; + left: 0; + z-index: 11; + background-color: #f2f2f2; +} + +tr:hover > td { + background-color: #f2f2f2; +} + +@media (max-width: 600px) { + .table-container { + font-size: 13px; + } + + th, + td { + padding: 6px; + } + + td:first-child, + th:first-child { + width: fit-content; + } +} diff --git a/styles/textSection.css b/styles/textSection.css new file mode 100644 index 0000000000000000000000000000000000000000..42fa5f96fbd4d59bba3e0cb96bd585bc6561336b --- /dev/null +++ b/styles/textSection.css @@ -0,0 +1,11 @@ +.text-section { + max-width: 660px; + margin-left: auto; + margin-right: auto; +} +.text-section__container { + border-radius: 35px; + display: flex; + justify-content: center; + flex-direction: column; +} diff --git "a/styles/textSection\320\222order.css" "b/styles/textSection\320\222order.css" new file mode 100644 index 0000000000000000000000000000000000000000..6707cfd39c037eec6a395663ba07d8de53528b3c --- /dev/null +++ "b/styles/textSection\320\222order.css" @@ -0,0 +1,16 @@ +.text-section-border { + border: 1px solid rgb(245, 245, 245); + border-radius: 15px; + padding: 50px; + display: flex; + justify-content: center; + flex-direction: column; + transition: all 0.3s ease; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); +} + +@media (max-width: 600px) { + .text-section-border { + padding: 20px; + } +} diff --git a/styles/verticalLine.css b/styles/verticalLine.css new file mode 100644 index 0000000000000000000000000000000000000000..053a1aea39e0d62e44d374a8bf1521648f078622 --- /dev/null +++ b/styles/verticalLine.css @@ -0,0 +1,26 @@ +.text-withline__container { + display: flex; + align-items: flex-start; + position: relative; + padding-left: 20px; +} + +.vertical-line { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; +} + +.red-line { + background-color: #e6434e; +} + +.blue-line { + background-color: #2daaf0; +} + +.green-line { + background-color: #53d98a; +} diff --git a/styles/video.css b/styles/video.css new file mode 100644 index 0000000000000000000000000000000000000000..6bf13914a007dbd9864068e28170d4592786bfab --- /dev/null +++ b/styles/video.css @@ -0,0 +1,18 @@ +.video-container { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.iframe { + width: 100%; + height: 445px; +} + +@media (max-width: 800px) { + .iframe { + width: 90vw; + height: 45vw; + } +}