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/index.html b/index.html index 846cf93..735326e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,44 @@ - + + +
+
+
+ Loading... +
+
+
+ Loading... +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +

+ dasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdas + dasdasdasdasdasdasdsdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdas + +

+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..776e367 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,41 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +const progressFill = document.querySelector('.progress-fill'); + +let currentProgress = 0; +const duration = 3000; +const updateTime = 20; +const steps = duration / updateTime; +const incProcent = 100 / steps; + +const timer = setInterval(() => { + currentProgress += incProcent; + progressFill.style.width = `${currentProgress}%`; + + if (currentProgress >= 100) { + progressFill.style.width = `100%`; + clearInterval(timer); + } +}, updateTime); + +const modal = document.getElementById('window'); +const overlay = document.getElementById('overlay'); +const btn = document.getElementById('open-modal'); +const close = document.querySelector('.close'); + +btn.onclick = function() { + modal.style.display = 'block'; + overlay.style.display = 'block'; +}; + +close.onclick = function() { + modal.style.display = 'none'; + overlay.style.display = 'none'; +}; + +overlay.onclick = function() { + modal.style.display = 'none'; + overlay.style.display = 'none'; +}; diff --git a/styles.css b/styles.css index e69de29..aee97ab 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,119 @@ +/*#3*/ +.modal-overlay { + display: flex; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: white; +} + +.progress-wrapper { + position: relative; + width: 500px; + height: 50px; + font-family: Arial, sans-serif; + font-size: 24px; +} + +.progress-layer { + position: absolute; + top: 0; + left: 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.progress-bg { + width: 100%; + background-color: #434343; + color: #000000; +} + +.logo-microsoft { + width: 100px; + height: 100px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px; + padding: 4px; + box-sizing: border-box; +} + +.jp-flag { + width: 100px; + height: 100px; +} + +.red-circle { + position: relative; + background-color: red; + border-radius: 50%; + width: 30%; + height: 30%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.ms-red { + background-color: #F25022; +} +.ms-green { + background-color: #7FBA00; +} +.ms-blue { + background-color: #00A4EF; +} +.ms-yellow { + background-color: #FFB900; +} + +#window { + display: none; + z-index: 1; + width: 640px; + background-color: white; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 1px solid; +} + +.close { + display: block; + margin: 5px; +} + +.content { + margin: 10px; +} + +#overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 0; +} + +.progress-fill { + width: 70%; + z-index: 2; + background-color: #df0000; + overflow: hidden; + justify-content: flex-start; +} + +.text-white-container { + color: white; + width: 500px; + text-align: center; + flex-shrink: 0; +} \ No newline at end of file