diff --git a/index.html b/index.html index 846cf93..854150d 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,26 @@ - +
+ + +
+ +
+ +
+
+ +
+
+

TEEEEXT

+
+
+ Loading... +
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..3eaebd9 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,23 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +document.addEventListener('DOMContentLoaded', () => { + let progress = 0; + const interval = 30; + const duration = 3000; + const step = interval / duration * 100; + + const progressElement = document.getElementById('progress'); + const progressText = document.getElementById('progress-text'); + + const intervalId = setInterval(() => { + progress += step; + if (progress >= 100) { + progress = 100; + clearInterval(intervalId); + } + + progressElement.style.width = `${progress}%`;}, interval); + }); + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..4423de2 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,76 @@ +.square{ + display: flex; + flex-direction: column; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + height: 100vh; + overflow: hidden; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 10; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background-color: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + z-index: 20; +} + +.modal-header { + padding: 10px; + text-align: right; +} + +.close-button { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; +} + +.modal-body { +padding: 20px; +} + +.progress-bar { +position: relative; +width: 100%; +height: 30px; +background-color: grey; +color: black; +text-align: center; +line-height: 30px; +overflow: hidden; +} + +.progress { +position: absolute; +left: 0; +top: 0; +width: 0%; +height: 100%; +background-color: red; +transition: width 0.5s; +z-index: 1; +} + +.progress-text { +position: relative; +z-index: 2; +} \ No newline at end of file