diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /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/copilot.data.migration.ask2agent.xml b/.idea/copilot.data.migration.ask2agent.xml new file mode 100644 index 0000000..1f2ea11 --- /dev/null +++ b/.idea/copilot.data.migration.ask2agent.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file 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/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..67fa43d --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning.iml b/.idea/positioning.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/positioning.iml @@ -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..e33d4e4 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,43 @@ + +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Loading... +
+
+
+ +
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..48f03d0 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,60 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +'use strict'; + +let activate = false; +let progress = 0; +function activateProgressBar() { + if (activate) { + alert("Прогресс-бар уже активирован!"); + } else { + activateProgressBarIteration(); + activate = true; + } +} + +function activateProgressBarIteration() { + if (progress < 100) { + const bar = document.getElementById('bar'); + progress += 3.5; + bar.style.width = progress + '%'; + const loading = document.getElementById('loading'); + const progressBar = document.querySelector('.progress-bar'); + updateLetterColors(loading, progressBar) + + setTimeout(activateProgressBarIteration, 75); + } +} + +function updateLetterColors(loadingElement, progressBarElement) { + const spans = loadingElement.querySelectorAll('span'); + const progressBarWidth = progressBarElement.offsetWidth; + const currentProgress = progressBarWidth * (progress / 100); + + spans.forEach((span, index) => { + const spanPosition = (progressBarWidth / spans.length) * index + (progressBarWidth / spans.length) / 2; + + if (spanPosition < currentProgress) { + span.style.color = 'white'; + } + }); +} + +function openLightbox(){ + const lightBoxElement = document.getElementById("lightbox"); + lightBoxElement.style.display = 'block'; + + const overlayElement = document.getElementById("lightboxOverlay"); + overlayElement.style.display = 'block'; +} + +function closeLightbox(){ + const overlayElement = document.getElementById("lightboxOverlay"); + overlayElement.style.display = 'none'; + + const lightBoxElement = document.getElementById("lightbox"); + lightBoxElement.style.display = 'none'; +} \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..207f560 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,156 @@ +.overlay{ + position:fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +#lightboxOverlay{ + background-color: rgba(0, 0, 0, 0.3); + display: none; + z-index: 2; +} + +.lightbox{ + width: 600px; + position: fixed; + z-index: 3; + border-style: solid; + border-color: black; + border-width: 2px; + background-color: white; +} +#lightbox{ + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: none; +} + +.lightboxContent{ + padding: 50px; +} + +#openLightboxButton{ + background-color: orange; + position: fixed; + width: 100px; + bottom: 20px; + right: 10px; +} + +#closeLightboxButton{ + position: absolute; + width: 10px; + top: 10px; + right: 10px; +} +.container { + display: flex; +} + +.logo-container { + width: 200px; + height: 100px; + position: relative; + display: inline-flex; +} + +.logo-japan { + width: 100px; + height: 100px; +} + +.logo-japan .circle { + background-color: red; + width: 100px; + height: 100px; + border-radius: 50%; + transform: scale(0.5); +} + +.logo-4 { + width: 100px; + height: 100px; + position: relative; +} + +.logo-4 .small-circle { + background-color: red; + width: 100px; + height: 100px; + border-radius: 50%; + transform: translate(-50%, -50%) scale(0.3); + position: absolute; + top: 50%; + left: 50%; + z-index: 4; +} + +.logo-4 .average-circle { + background-color: white; + width: 100px; + height: 100px; + border-radius: 50%; + transform: translate(-50%, -50%) scale(0.5); + position: absolute; + top: 50%; + left: 50%; + z-index: 3; +} + +.logo-4 .big-circle { + background-color: red; + width: 100px; + height: 100px; + border-radius: 50%; + transform: translate(-50%, -50%) scale(0.7); + position: absolute; + top: 50%; + left: 50%; + z-index: 2; +} + +.progress-bar { + position: relative; + background-color: lightgray; + width: 300px; + height: 25px; + overflow: hidden; + + display: flex; + align-items: center; + justify-content: center; +} + +.loading { + position: relative; + font-size: 20px; + font-family: sans-serif; + text-align: center; + z-index: 100; + letter-spacing: 2px; +} + +.loading span { + color: black; + transition: color 0.05s ease; + z-index: 1; +} + +.bar { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + background-color: red; + z-index: 0; +} + +.progress-button { + height: 50%; + position: relative; + display: flex; +} \ No newline at end of file