diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml 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..24643cc --- /dev/null +++ b/.idea/positioning.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ 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..962a767 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,54 @@ - +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..eefe7eb 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,14 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const element = document.querySelector('.progress'); +let current = 0; +const totalFrames = 180; +const duration = 3000; +const intervalTime = duration / totalFrames; +const step = 100 / totalFrames; +const interval = setInterval(() => { + current += step; + if (current >= 100) { + current = 100; + clearInterval(interval); + } + element.style.width = current + '%'; +}, intervalTime); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..1a2d1d3 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,197 @@ +body { + margin: 10px; +} + +.container { + display: flex; + gap: 10px; +} + +.japan { + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid black; +} + +.circle { + width: 70px; + height: 70px; + background-color: #BC002C; + border-radius: 50%; +} + +.log1 { + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; +} + +.log1 div { + position: absolute; + width: 25px; + height: 50px; + background: black; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + transform: rotate(0deg); +} + +.log1 div.block1 { + top: 0; + left: 25%; + transform: translate(50%, 25%) rotate(0deg); +} + +.log1 div.block2 { + bottom: 0; + left: 0; + transform: translateX(60%) rotate(60deg); +} + +.log1 div.block3 { + bottom: 0; + right: 0; + transform: translateX(-60%) rotate(300deg); +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 999; +} + +.modal { + background: #fff; + width: 640px; + max-width: 90%; + border-radius: 8px; + padding: 20px 30px; + position: relative; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); +} + +.close-btn { + position: absolute; + top: 15px; + right: 20px; + font-size: 22px; + font-weight: bold; + color: #999; + cursor: pointer; + border: none; + background: none; +} + +.close-btn:hover { + color: #000; +} + +.modal a { + color: #007bff; + text-decoration: none; +} + +.modal a:hover { + text-decoration: underline; +} + +.modal .footer-button { + margin-top: 20px; +} + +.footer-button button { + padding: 10px 20px; + background: #5cae69; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.footer-button button:hover { + background: #4b9c5b; +} + +.progress-bar { + position: relative; + width: 300px; + height: 40px; + background-color: #ccc; + margin: 20px auto; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; +} + +.progress-text.back { + color: black; + z-index: 1; +} + +.progress { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + background-color: red; + z-index: 2; + overflow: hidden; +} + +.progress-text.front { + color: white; + text-align: center; + line-height: 40px; + z-index: 3; + position: absolute; + width: 300px; + left: 0; +} + +.accordion { + margin-top: 30px; +} + +.accordion-item { + border: 1px solid #ccc; + margin-bottom: 10px; + border-radius: 4px; + overflow: hidden; +} + +.accordion-title { + display: block; + padding: 15px; + background-color: #f2f2f2; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; +} + +.accordion-title:hover { + background-color: #e0e0e0; +} + +.accordion-content { + max-height: 0; + transition: max-height 0.3s ease, padding 0.3s ease; + padding: 0 15px; + background: #fafafa; +} + +input[type="checkbox"]:checked ~ .accordion-content { + max-height: 200px; + padding: 15px; +} \ No newline at end of file