diff --git a/.gitattributes b/.gitattributes index a6344aac8c09253b3b630fb776ae94478aa0275b..0f6c0ebfd5df5f35292b8f0d9056cf4e48c413ac 100644 --- a/.gitattributes +++ b/.gitattributes @@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text *.zip filter=lfs diff=lfs merge=lfs -text *.zst filter=lfs diff=lfs merge=lfs -text *tfevents* filter=lfs diff=lfs merge=lfs -text +docs/public/flower1.jpg filter=lfs diff=lfs merge=lfs -text +docs/public/flower2.jpg filter=lfs diff=lfs merge=lfs -text +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 diff --git a/docs/.DS_Store b/docs/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b1f29c0d04ec3fe61ae3dffa87e6162df27b660c Binary files /dev/null and b/docs/.DS_Store differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000000000000000000000000000000000000..78313123c9889a6c6404bd3da37f85225821cd6c --- /dev/null +++ b/docs/index.html @@ -0,0 +1,728 @@ + + + + + + AIRI institute + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+

Abstract

+

Large language models (LLMs) are notorious for hallucinating, i. e., producing erroneous claims in their output. Such hallucinations can be dangerous, as occasional factual inaccuracies in the generated text might be obscured by the rest of the output being generally factually correct, making it extremely hard for the users to spot them. Current services that leverage LLMs usually do not provide any means for detecting unreliable generations. Here, we aim to bridge this gap. In particular, we propose a novel fact-checking and hallucination detection pipeline based on token-level uncertainty quantification. Uncertainty scores leverage information encapsulated in the output of a neural network or its layers to detect unreliable predictions, and we show that they can be used to fact-check the atomic claims in the LLM output. Moreover, we present a novel token-level uncertainty quantification method that removes the impact of uncertainty about what claim to generate on the current step and what surface form to use. Our method Claim Conditioned Probability (CCP) measures only the uncertainty of a particular claim value expressed by the model. Experiments on the task of biography generation demonstrate strong improvements for CCP compared to the baselines for seven LLMs and four languages. Human evaluation reveals that the fact-checking pipeline based on uncertainty quantification is competitive with a fact-checking tool that leverages external knowledge.

+
+
+
+
+

Video

+
+ +
+
+
+
+
+

Introduction

+

Large language models (LLMs) have become a ubiquitous and versatile tool for addressing a variety of natural language processing (NLP) tasks. People use these models for tasks including information search Sun et al. (2023b), to ask medical questions Thirunavukarasu et al. (2023), or to generate new content Sun et al. (2023a). Recently, there has been a notable shift in user behavior, indicating an increasing reliance on and trust in LLMs as primary information sources, often surpassing traditional channels. However, a significant challenge with the spread of these models is their tendency to produce «hallucinations», i.e., factually incorrect generations that contain misleading information Bang et al. (2023); Dale et al. (2023). This is a side-effect of the way modern LLMs are designed and trained Kalai and Vempala (2023).

LLM hallucinations are a major concern because the deceptive content at the surface level can be highly coherent and persuasive. Common examples include the creation of fictitious biographies or the assertion of unfounded claims. The danger is that a few occasional false claims might be easily obscured by a large number of factual statements, making it extremely hard for people to spot them. As hallucinations in LLM outputs are hard to eliminate completely, users of such systems could be informed via highlighting some potential caveats in the text, and this is where our approach can help.

Fact-checking is a research direction that addresses this problem. It is usually approached using complex systems that leverage external knowledge sources Guo et al. (2022); Nakov et al. (2021); Wadden et al. (2020). This introduces problems related to the incomplete nature of such sources and notable overhead in terms of storing the knowledge. We argue that information about whether a generation is a hallucination is encapsulated in the model output itself, and can be extracted using uncertainty quantification (UQ) Gal et al. (2016); Kotelevskii et al. (2022); Vazhentsev et al. (2022, 2023a). This avoids implementing complex and expensive fact-checking systems that require additional computational overhead and rely on external resources.

Prior work has mainly focused on quantification of uncertainty for the whole generated text and been mostly limited to tasks such as machine translation Malinin and Gales (2020), question answering Kuhn et al. (2023), and text summarization van der Poel et al. (2022). However, the need for an uncertainty score for only a part of the generation substantially complicates the problem. We approach it by leveraging token-level uncertainty scores and aggregating them into claim-level scores. Moreover, we introduce a new token-level uncertainty score, namely claim-conditioned probability (CCP), which demonstrates confident improvements over several baselines for seven LLMs and four languages.

To the best of our knowledge, there is no previous work that has investigated the quality of claim-level UQ techniques for LLM generation. Therefore, for this purpose, we construct a novel benchmark based on fact-checking of biographies of individuals generated using a range of LLMs. Note that different LLMs produce different outputs, which generally have higher variability than, e.g., outputs in such tasks as machine translation or question answering. Therefore, we compare the predictions and uncertainty scores to the results of an automatic external fact-checking system FactScore Min et al. (2023). Human evaluation verifies that our constructed benchmark based on FactScore can adequately evaluate the performance of the uncertainty scores.

Our contributions are as follows:

  • We propose a novel framework for fact-checking LLM generations using token-level uncertainty quantification. We provide a procedure for efficiently estimating the uncertainty of atomic claims generated by a white-box model and highlighting potentially deceptive fragments by mapping them back to the original response.
  • We propose a novel method for token-level uncertainty quantification that outperforms baselines and can be used as a plug-infact-checking framework.
  • We design a novel approach to evaluation of token-level UQ methods for white-box LLMs based on fact-checking, which can be applied to other white-box LLMs.
  • We provide an empirical and ablation analysis of the method for fact-checking of LLM generations, and find that the uncertainty scores we produce can help to spot claims with factual errors for seven LLMs over four languages: English, Chinese, Arabic, and Russian.
  • The method is implemented as a part of the LM-Polygraph library Fadeeva et al. (2023). All the code and data for experiments is publicly available1.
  • +
+
+
+
+
+

Swiper

+
+
+
+
+
+
+
+
+
+
+
+
+ × + +
+
+
+
+

Lightbox

+ +
+ + + + + + +
+ + + + + + +
+
+ +
+

Before-after

+
+
+ Before + + After + +
+
+
+
+
+
+

Swiper with buttons

+
+ + + +
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+

Charts

+ +

+ The comparison of token-level uncertainty quantification methods in + terms of ROC-AUC scores, measured for Chinese dataset. The results + are split into bins when considering only facts from the first 2, 5, + and all sentences. +

+ +

+ The comparison of token-level uncertainty quantification methods in + terms of ROC-AUC scores, measured for Chinese dataset. The results + are split into bins when considering only facts from the first 2, 5, + and all sentences. +

+ +

+ The comparison of token-level uncertainty quantification methods in + terms of ROC-AUC scores, measured for Chinese dataset. The results + are split into bins when considering only facts from the first 2, 5, + and all sentences. +

+
+
+ +
+

+ ROC-AUC of claim-level UQ methods with manual annotation as the ground + truth. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ModelYi 6b, ChineseJais 13b, ArabicGPT-4, ArabicVikhr 7b, Russian
CCP (ours)0.64 ± 0.030.66 ± 0.020.56 ± 0.050.68 ± 0.04
Maximum Prob.0.52 ± 0.030.59 ± 0.020.55 ± 0.080.63 ± 0.04
Perplexity0.51 ± 0.040.56 ± 0.020.54 ± 0.080.58 ± 0.04
Token Entropy0.51 ± 0.040.56 ± 0.020.54 ± 0.080.58 ± 0.04
P(True)0.52 ± 0.030.59 ± 0.020.55 ± 0.080.63 ± 0.04
+
+
+
+
+

Number of claims

+
+
+

100

+

Vicuna 13b, English

+
+
+

1,603

+

Yi 6b, Chinese

+
+
+

200

+

GPT-4, Arabic

+
+
+

146

+

Vikhr 7b, Russian

+
+
+
+
+
+
+

Datasets and Statistics

+ +
+
+
+

For Arabic, using GPT-4, we generate 100 biographies of people randomly selected from the list of the most visited websites in Arabic Wikipedia. The used Arabic prompt is the translation of: «Tell me the biography of {person name}». To extract claims, we prompt GPT-4 in the following way: «Convert the following biography into Arabic atomic factual claims that can be verified, one claim per line. Biography is: {biography}». Arabic biographies and claims are translated into English using Google Translate. It is worth mentioning that almost one-third of the names in the list of person names are foreign

+
+
+
+
+

For Jais 13b experiments, we use the same prompts used for GPT-4. We notice that the biographies generated by Jais 13b are much shorter than the ones generated by GPT-4 (almost half-length). Similarly, we use GPT-4 to extract claims from the generated biographies. On average, biographies generated by Jais 13b have nine claims. Jais 13b generates empty biographies for seven names (out of 100) with response messages like: «I am sorry! I cannot provide information about {name}», or «What do you want to know exactly?». Two random claims from each biography are verified manually (total = 186 claims).

+
+
+
+
+
+
+

Since FactScore only supports English, for Arabic, Chinese, and Russian, we generate biographies of well-known people and annotate them only manually. We also manually annotate English claims generated by Vicuna 13b. The statistics for annotated datasets are presented in Table 7.

+
+
+
+
+

For Chinese, we first prompt ChatGPT to generate a list of famous people. Then use the same way as we have done Arabic, but change the prompt to Chinese, to biographies and claims. We use Yi 6b to generate texts GPT-4 to split them into atomic claims.

+
+
+
+
+

For Russian, we conduct a similar approach, prompting to generate a list of 100 famous people and checking result to obtain representative personalities from different areas such as science, sport, literature, art, activity, cinematography, heroes, etc.

+
+
+
+
+
+ +
+
+

Code

+

items.forEach((item) => { + item.addEventListener('click', function () { + const value = this.textContent + selectedValue.textContent = value + dropdown.classList.remove('open') + }) +})

+
+
+ +
+
+

BibTeX

+

@misc{salnikov2025geopolitical, + title={Geopolitical biases in LLMs: what are the "good" and the "bad" countries according to contemporary language models}, + author={Mikhail Salnikov and Dmitrii Korzh and Ivan Lazichny and Elvir Karimov and Artyom Iudin and Ivan Oseledets and Oleg Y. Rogov and Alexander Panchenko and Natalia Loukachevitch and Elena Tutubalina}, + year={2025}, + eprint={2506.06751}, + archivePrefix={arXiv}, + primaryClass={cs.CL}, + url={https://arxiv.org/abs/2506.06751} +}

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/FileOutlined.svg b/docs/public/FileOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..bfb54b350161fdae6876a52d15cfd8f3d61a0a2b --- /dev/null +++ b/docs/public/FileOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/GithubOutlined.svg b/docs/public/GithubOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..9c902f682718b0e4da90a5267de7929473a09bf6 --- /dev/null +++ b/docs/public/GithubOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/LaptopOutlined.svg b/docs/public/LaptopOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..80f268c07f5ea83372369e7c9d3e0c39e3746bda --- /dev/null +++ b/docs/public/LaptopOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/MISIS-logo.svg b/docs/public/MISIS-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..65e3aaffdf8efd0b87bc1ffe3b6a70cf8711268f --- /dev/null +++ b/docs/public/MISIS-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/SearchOutlined.svg b/docs/public/SearchOutlined.svg new file mode 100644 index 0000000000000000000000000000000000000000..007400d8ad9dda7747e1693374f7b843c14ae0df --- /dev/null +++ b/docs/public/SearchOutlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/airi_logo_black.svg b/docs/public/airi_logo_black.svg new file mode 100644 index 0000000000000000000000000000000000000000..dbeab7e1d254caca3e1fd5b9c7ddd19e2aa2f3eb --- /dev/null +++ b/docs/public/airi_logo_black.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/docs/public/airi_logo_white.svg b/docs/public/airi_logo_white.svg new file mode 100644 index 0000000000000000000000000000000000000000..bd909706b069efb69ef9a91c267a7aa73f2cc877 --- /dev/null +++ b/docs/public/airi_logo_white.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/docs/public/copy.svg b/docs/public/copy.svg new file mode 100644 index 0000000000000000000000000000000000000000..83e986b81c825dbe63e257715bbc83d6c7875aad --- /dev/null +++ b/docs/public/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/flower1.jpg b/docs/public/flower1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..009cc6b7bae1fb3fcbf287674befaa73d3cfa604 --- /dev/null +++ b/docs/public/flower1.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1a4a9761b4e2941755ba98c0e3d295e43919340cc5316c2816855f10a3d196c9 +size 994896 diff --git a/docs/public/flower2.jpg b/docs/public/flower2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2d19b3aa0cf56b5c006415f75a2a02b1eff08ff1 --- /dev/null +++ b/docs/public/flower2.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a45a0b4936267c03aa804c3a3f4bf7800d545cf49b38193bebcdd07d58e30235 +size 6954649 diff --git a/docs/public/flower3.jpg b/docs/public/flower3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..16daa374e733f65d99647b8baa2c68dc182b43d6 --- /dev/null +++ b/docs/public/flower3.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:37b904aad22531a25c042484449ccf7bf1b11aa4249e88ef3e010ceba553ddb8 +size 1594922 diff --git a/docs/public/flower4.jpg b/docs/public/flower4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fec6ba412da636b020d6478f4ecb7c3cde66d737 --- /dev/null +++ b/docs/public/flower4.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c8447ff4b199298bc8e00f703db5661db9df1e02623722fc42bf010e5d5109d7 +size 1403295 diff --git a/docs/public/flower5.jpg b/docs/public/flower5.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6dfbf702991d824d30223935f951db7a65307798 --- /dev/null +++ b/docs/public/flower5.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4f83da281bd3642d52400d50dcd61a3ea138a865b6b760fe2fa3929858a1fb43 +size 26037264 diff --git a/docs/public/hse-logo.svg b/docs/public/hse-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..b243fc7fcbc6c74656b5d1508268f9de92eaf5f7 --- /dev/null +++ b/docs/public/hse-logo.svg @@ -0,0 +1,95 @@ + + + + + + + diff --git a/docs/public/huggingFace.svg b/docs/public/huggingFace.svg new file mode 100644 index 0000000000000000000000000000000000000000..d387191579e775e010132d6ba89e6f1fb6e74653 --- /dev/null +++ b/docs/public/huggingFace.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/link.svg b/docs/public/link.svg new file mode 100644 index 0000000000000000000000000000000000000000..0d8b88e90b98e65b42b51072df0db5e4aa0d8e46 --- /dev/null +++ b/docs/public/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/linkedIn_logo.svg b/docs/public/linkedIn_logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..68b26399338b3630342fef0a6f2169442ab07700 --- /dev/null +++ b/docs/public/linkedIn_logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/public/mei-logo.svg b/docs/public/mei-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..74218093f7250b15eca69bbb40e7c5d46df6cdc9 --- /dev/null +++ b/docs/public/mei-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + \ No newline at end of file diff --git a/docs/public/mirea-logo.svg b/docs/public/mirea-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..098c6ba27cb288d00b210e6bb8200af37e44e61b --- /dev/null +++ b/docs/public/mirea-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/mtuci-logo.svg b/docs/public/mtuci-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..118b4f9d189d1c62e68069a5bad708abeafb41c1 --- /dev/null +++ b/docs/public/mtuci-logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/public/ok.svg b/docs/public/ok.svg new file mode 100644 index 0000000000000000000000000000000000000000..c55fcaa7192a7a145e3425b6e1dbc424839ed763 --- /dev/null +++ b/docs/public/ok.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/paper-svgrepo-com.svg b/docs/public/paper-svgrepo-com.svg new file mode 100644 index 0000000000000000000000000000000000000000..a2abd1141ca99a9130a6090bc16142d7f397529b --- /dev/null +++ b/docs/public/paper-svgrepo-com.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/public/telegram.svg b/docs/public/telegram.svg new file mode 100644 index 0000000000000000000000000000000000000000..2b9da8e1c530b80b3c05fad02b19717c5d1f01eb --- /dev/null +++ b/docs/public/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/vk.svg b/docs/public/vk.svg new file mode 100644 index 0000000000000000000000000000000000000000..3ed20e6ba86d9690bfea595f58ca49b7055fdaeb --- /dev/null +++ b/docs/public/vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/x4.jpg b/docs/public/x4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b91ed8868cb781eae21ad5762634ab86dbe34687 Binary files /dev/null and b/docs/public/x4.jpg differ diff --git a/docs/public/x5.png b/docs/public/x5.png new file mode 100644 index 0000000000000000000000000000000000000000..729dd6e8f3679cf2a90ee9c9dbccef9dc8126ea7 --- /dev/null +++ b/docs/public/x5.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5e06859afd7a1ffcc9fccca46545754d16080ffbdd3e2a1fbadb4ee2ad777de2 +size 319414 diff --git a/docs/public/x6.png b/docs/public/x6.png new file mode 100644 index 0000000000000000000000000000000000000000..a6a715f899de01e0b7e771c1526251e4585cd798 Binary files /dev/null and b/docs/public/x6.png differ diff --git a/docs/public/x_logo.svg b/docs/public/x_logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..3654b1bec43121f65a3215a5da0adae63adae7d4 --- /dev/null +++ b/docs/public/x_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/scripts/barChart.js b/docs/scripts/barChart.js new file mode 100644 index 0000000000000000000000000000000000000000..e48752394aef5b7136bceaf6bd96e25d3f603554 --- /dev/null +++ b/docs/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/docs/scripts/beforeAfter.js b/docs/scripts/beforeAfter.js new file mode 100644 index 0000000000000000000000000000000000000000..6e973e4d08efe635bb4e6942eedf31d4b606f5f8 --- /dev/null +++ b/docs/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/docs/scripts/codeCopy.js b/docs/scripts/codeCopy.js new file mode 100644 index 0000000000000000000000000000000000000000..73361f75c979aaa1a48d7ea644f581e4e6a0519d --- /dev/null +++ b/docs/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/docs/scripts/dropdown.js b/docs/scripts/dropdown.js new file mode 100644 index 0000000000000000000000000000000000000000..839aaab63a5ea1e46e9d6912fe8e0d56ff811498 --- /dev/null +++ b/docs/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/docs/scripts/lightbox.js b/docs/scripts/lightbox.js new file mode 100644 index 0000000000000000000000000000000000000000..0d66e1281bd3fd926e5f7b62cf4e6111bb1b0f16 --- /dev/null +++ b/docs/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/docs/scripts/lineChart.js b/docs/scripts/lineChart.js new file mode 100644 index 0000000000000000000000000000000000000000..9973e36959006417f6e79dd589923d181b9adbdf --- /dev/null +++ b/docs/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/docs/scripts/pieChart.js b/docs/scripts/pieChart.js new file mode 100644 index 0000000000000000000000000000000000000000..5f496eac4db7d92e8821c2994e2d2a8a93e2bfda --- /dev/null +++ b/docs/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/docs/scripts/sidebar.js b/docs/scripts/sidebar.js new file mode 100644 index 0000000000000000000000000000000000000000..f70342c37fd120f3446db61bbe60f5f6f13e9213 --- /dev/null +++ b/docs/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/docs/scripts/swiper.js b/docs/scripts/swiper.js new file mode 100644 index 0000000000000000000000000000000000000000..34af6c55c84b3c506e1c52eb39024b17f0fac93a --- /dev/null +++ b/docs/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/docs/scripts/swiperCharts.js b/docs/scripts/swiperCharts.js new file mode 100644 index 0000000000000000000000000000000000000000..7c655a93429cbcd58398108797bb194147d1bb7e --- /dev/null +++ b/docs/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/docs/styles/beforeAfter.css b/docs/styles/beforeAfter.css new file mode 100644 index 0000000000000000000000000000000000000000..8f19042dc80a62cca908601dbdd0553094c17de8 --- /dev/null +++ b/docs/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/docs/styles/bibTex.css b/docs/styles/bibTex.css new file mode 100644 index 0000000000000000000000000000000000000000..f14ca72b9877214421bebe365f1efa59653db41a --- /dev/null +++ b/docs/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/docs/styles/charts.css b/docs/styles/charts.css new file mode 100644 index 0000000000000000000000000000000000000000..debc348733215dd636640582673414c77fcf12d8 --- /dev/null +++ b/docs/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/docs/styles/codeSection.css b/docs/styles/codeSection.css new file mode 100644 index 0000000000000000000000000000000000000000..9e3fb47a21bcab89b6e32e45ca7b3278b5863f75 --- /dev/null +++ b/docs/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/docs/styles/columnsSection.css b/docs/styles/columnsSection.css new file mode 100644 index 0000000000000000000000000000000000000000..30b8d72e21a385932eec5fab1acdfc930c7d979e --- /dev/null +++ b/docs/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/docs/styles/dropdown.css b/docs/styles/dropdown.css new file mode 100644 index 0000000000000000000000000000000000000000..c17a4eefb64178145ea2b2ca49e1584e46fa3fc4 --- /dev/null +++ b/docs/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/docs/styles/footer.css b/docs/styles/footer.css new file mode 100644 index 0000000000000000000000000000000000000000..444dccda35e47237cedf8f79d9d5bd0001b9d9c1 --- /dev/null +++ b/docs/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/docs/styles/header.css b/docs/styles/header.css new file mode 100644 index 0000000000000000000000000000000000000000..963f24cccb62dbc1caa0b580a953ec748e35c0fc --- /dev/null +++ b/docs/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/docs/styles/lightbox.css b/docs/styles/lightbox.css new file mode 100644 index 0000000000000000000000000000000000000000..284f62fe0bc7fd7176af3b05c3fc23c06e33b11a --- /dev/null +++ b/docs/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/docs/styles/main.css b/docs/styles/main.css new file mode 100644 index 0000000000000000000000000000000000000000..e3352ac1a04b38869e930958cc4b06ef56d9e84b --- /dev/null +++ b/docs/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/docs/styles/numberSection.css b/docs/styles/numberSection.css new file mode 100644 index 0000000000000000000000000000000000000000..ad0aaeacc3b1c7163032a4e0f825c82ffbc230ec --- /dev/null +++ b/docs/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/docs/styles/sidebar.css b/docs/styles/sidebar.css new file mode 100644 index 0000000000000000000000000000000000000000..2c2c1cca4abdffff54bdaf542f0f987b2a415971 --- /dev/null +++ b/docs/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/docs/styles/swiper.css b/docs/styles/swiper.css new file mode 100644 index 0000000000000000000000000000000000000000..3f31d6cf1b4f55a155e5f529c8e4b3b5dcf8bd6e --- /dev/null +++ b/docs/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/docs/styles/swiperOnButton.css b/docs/styles/swiperOnButton.css new file mode 100644 index 0000000000000000000000000000000000000000..f9b32d4c1b3d62af1cfbc9bd6ce352bc6c53d59c --- /dev/null +++ b/docs/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/docs/styles/table.css b/docs/styles/table.css new file mode 100644 index 0000000000000000000000000000000000000000..2fed5db1b2bb2df804eaae2e24b251b8b102b12d --- /dev/null +++ b/docs/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/docs/styles/textSection.css b/docs/styles/textSection.css new file mode 100644 index 0000000000000000000000000000000000000000..42fa5f96fbd4d59bba3e0cb96bd585bc6561336b --- /dev/null +++ b/docs/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/docs/styles/textSection\320\222order.css" "b/docs/styles/textSection\320\222order.css" new file mode 100644 index 0000000000000000000000000000000000000000..6707cfd39c037eec6a395663ba07d8de53528b3c --- /dev/null +++ "b/docs/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/docs/styles/verticalLine.css b/docs/styles/verticalLine.css new file mode 100644 index 0000000000000000000000000000000000000000..053a1aea39e0d62e44d374a8bf1521648f078622 --- /dev/null +++ b/docs/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/docs/styles/video.css b/docs/styles/video.css new file mode 100644 index 0000000000000000000000000000000000000000..6bf13914a007dbd9864068e28170d4592786bfab --- /dev/null +++ b/docs/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; + } +}