diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..69ab804 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..df87cf9 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/indexLayout.xml b/.idea/indexLayout.xml new file mode 100644 index 0000000..7b08163 --- /dev/null +++ b/.idea/indexLayout.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/projectSettingsUpdater.xml b/.idea/projectSettingsUpdater.xml new file mode 100644 index 0000000..ef20cb0 --- /dev/null +++ b/.idea/projectSettingsUpdater.xml @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..f3a646c 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,61 @@ - - + +
+
+
+
+
+
+
+ + +
+ +
+
+
+
+
+
+
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..bcdabe6 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,44 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const btnClk = document.getElementById("ModalOpenBtn"); +btnClk.addEventListener("click", () => { + startLoading(); + const bluer = document.getElementById("blur"); + bluer.style.display = "block"; +}) - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const btnCross = document.getElementById("modal1_cross"); +btnCross.addEventListener("click", () => { + const bluer = document.getElementById("blur"); + bluer.style.display = "none"; +}) +const blocks = document.querySelectorAll('.logo5 .block'); +document.querySelector('.logo5 .block1').style.backgroundColor = 'red'; +document.querySelector('.logo5 .block2').style.backgroundColor = 'greenyellow'; +document.querySelector('.logo5 .block3').style.backgroundColor = 'deepskyblue'; +document.querySelector('.logo5 .block4').style.backgroundColor = 'yellow'; + + +function startLoading() { + const fill = document.getElementById("fill"); + const whiteText = document.getElementById("whiteText"); + const duration = 3000; + const frames = 100; + const intervalTime = duration / frames; + + let progress = 0; + + function setProgress(value) { + fill.style.width = value + "%"; + const clipValue = 100 - value; + whiteText.style.clipPath = `inset(0 ${clipValue}% 0 0)`; + } + + const interval = setInterval(() => { + progress++; + if (progress <= 100) { + setProgress(progress); + } + if (progress >= 100) { + clearInterval(interval); + } + }, intervalTime); +} diff --git a/styles.css b/styles.css index e69de29..6d898aa 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,194 @@ +.logo4 { + display: flex; + justify-content: center; + box-sizing: border-box; + position: absolute; + top: 50px; + left: 300px; +} + +.logo4 .outer-circle { + display: flex; + justify-content: center; + height: 100px; + width: 100px; + background-color: crimson; + border-radius: 50%; + align-items: center; +} + +.logo4 .inner-white-part { + display: flex; + justify-content: center; + height: 70px; + width: 70px; + background-color: whitesmoke; + border-radius: 50%; + align-items: center; +} + +.logo4 .center-circle { + height: 40px; + width: 40px; + background-color: crimson; + border-radius: 50%; + align-items: center; +} + +.modal_window { + display: flex; + flex-direction: column; + position: fixed; + z-index: 100000; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 2px solid black; + background-color: white; + width: 640px; + height: min-content; + padding: 20px; +} +.modal_window p { + font-size: 25px; +} +.cross{ + position: absolute; + border: none; + padding: 0; + background-color: transparent; + top: 1px; + right: 1px; + width: 1em; + font-size: 15px; +} +.blur { + display: none; + position: fixed; + top: 0; + left: 0; + z-index: 99999; + box-sizing: border-box; + width: 100vw; + min-height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(10px); +} +.logo5 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2px; + width: 100px; + position: absolute; + top: 50px; + left: 150px; +} + +.logo5 .block1, +.logo5 .block2, +.logo5 .block3, +.logo5 .block4 { + height: 48px; +} + +.modal { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.modal-content-wrapper { + background-color: white; + padding: 30px; + border-radius: 10px; + width: 100%; + max-width: 500px; +} + +.progress-bar { + position: relative; + width: 100%; + height: 40px; + background: #ccc; + border-radius: 20px; + overflow: hidden; + margin-bottom: 20px; +} + +.progress-fill { + position: absolute; + height: 100%; + width: 0; + background: #e31837; + transition: width 0.1s linear; +} + +.progress-text { + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} + +.text-black { + color: black; + position: absolute; +} + +.text-white { + color: white; + position: absolute; + clip-path: inset(0 100% 0 0); + transition: clip-path 0.1s linear; +} + + +.accordion { + width: 100%; + font-family: Arial, sans-serif; + border-top: 1px solid #ccc; +} + +.accordion-item { + border-bottom: 1px solid #ccc; +} + +.accordion-input { + display: none; +} + +.accordion-header { + display: block; + padding: 15px; + background-color: #f0f0f0; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s ease; +} + +.accordion-header:hover { + background-color: #e0e0e0; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + background-color: #fafafa; + padding: 0 15px; + transition: max-height 0.4s ease-out, padding 0.4s ease-out; +} + +.accordion-input:checked + .accordion-header { + background-color: #ddd; +} + +.accordion-input:checked ~ .accordion-content { + max-height: 200px; + padding: 15px; +}