From 7a2011e5078537addd5753c44ed5d3f556906c05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9?= Date: Tue, 7 Apr 2026 18:08:33 +0500 Subject: [PATCH 1/5] 1-5 --- index.html | 100 ++++++++++++++++++-- index.js | 50 +++++++++- styles.css | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 411 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 846cf93..df08857 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,94 @@ - + - - + + Практика позиционирования - - - - + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + - - \ No newline at end of file + + diff --git a/index.js b/index.js index dd50919..3773dc0 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,52 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + + +const element = document.querySelector('.progress-fill'); +const progressBar = document.querySelector('.progress-bar'); +const whiteText = document.querySelector('.progress-text-white'); + +function updateWhiteText() { + const progressWidth = element.offsetWidth / progressBar.offsetWidth * 100; + whiteText.style.clipPath = `inset(0 ${100 - progressWidth}% 0 0)`; + + if (progressWidth < 100) { + requestAnimationFrame(updateWhiteText); + } +} + +element.style.width = '100%'; + +updateWhiteText(); + +const closeButton = document.querySelector('.modal-close'); +closeButton.addEventListener('click', () => { + const modal = document.querySelector('.modal'); + const overlay = document.querySelector('.modal-overlay'); + + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +}); + +const openModalBtn = document.getElementById('openModalBtn'); +openModalBtn.addEventListener('click', () => { + const modal = document.querySelector('.modal'); + const overlay = document.querySelector('.modal-overlay'); + + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); +}); + + +const logos = document.querySelectorAll('.logo'); +logos.forEach(logo => { + logo.addEventListener('click', () => { + const modal = document.querySelector('.modal'); + const overlay = document.querySelector('.modal-overlay'); + + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); + }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..921d341 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,271 @@ + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + background-color: #f0f0f0; + gap: 40px; +} +.open-modal-btn { + padding: 12px 24px; + font-size: 16px; + cursor: pointer; + background-color: #2ecc71; + color: white; + border: none; + border-radius: 5px; + transition: background-color 0.3s; +} + +.open-modal-btn:hover { + background-color: #27ae60; +} + +.container { + display: flex; + gap: 40px; +} + +.logo-wrapper { + width: 100px; + height: 100px; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #ccc; +} + +.logo-microsoft { + width: 80px; + height: 80px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 4px; +} + +.square { + width: 100%; + height: 100%; +} + +.red { + background-color: #f25022; +} + +.green { + background-color: #7fbb00; +} + +.blue { + background-color: #00a4ef; +} + +.yellow { + background-color: #ffb900; +} + +.logo-target { + width: 90px; + height: 90px; + background-color: #e80018; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.target-white-ring { + width: 60px; + height: 60px; + background-color: white; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.target-center { + width: 30px; + height: 30px; + background-color: #e80018; + border-radius: 50%; +} + + +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + opacity: 1; + visibility: visible; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +.modal-overlay.hidden { + opacity: 0; + visibility: hidden; +} + +.modal { + position: relative; + width: 640px; + background-color: white; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + padding: 20px; + opacity: 1; + transform: scale(1); + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.modal.hidden { + opacity: 0; + transform: scale(0.9); +} + +.modal-close { + position: absolute; + top: 10px; + right: 10px; + font-size: 24px; + border: none; + background: none; + cursor: pointer; + padding: 0; + line-height: 1; + width: 30px; + height: 30px; + border-radius: 50%; +} + +.modal-close:hover { + background-color: #f0f0f0; +} + +.modal-content { + max-width: 100%; +} + +.progress-container { + margin-top: 20px; + width: 100%; +} + +.progress-bar { + position: relative; + height: 30px; + background-color: #ddd; + border-radius: 4px; + overflow: hidden; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 0%; + background-color: #ff0000; + transition: width 3s; +} + +.progress-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: #000; + z-index: 1; +} + +.progress-text-white { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: white; + z-index: 2; + clip-path: inset(0 100% 0 0); +} + +.accordeon { + margin-top: 30px; + border: 1px solid #eee; + border-radius: 4px; + overflow: hidden; +} + +.accordeon-item { + border-bottom: 1px solid #eee; +} + +.accordeon-item:last-child { + border-bottom: none; +} + +.accordeon-toggle { + position: absolute; + opacity: 0; + z-index: -1; +} + +.accordeon-title { + display: block; + padding: 15px; + font-weight: bold; + background-color: #f5f5f5; + cursor: pointer; + position: relative; +} + +.accordeon-title::after { + content: '+'; + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + font-size: 20px; + transition: none; +} + +.accordeon-toggle:checked~.accordeon-title::after { + content: '+'; + animation: rotate-plus 0.3s forwards; +} + +.accordeon-toggle:not(:checked)~.accordeon-title::after { + content: '+'; + animation: rotate-minus 0.3s forwards; +} + +.accordeon-content { + max-height: 0; + overflow: hidden; + padding: 0 15px; + transition: max-height 0.3s ease, padding 0.3s ease; +} + +.accordeon-toggle:checked~.accordeon-content { + max-height: 500px; + padding: 15px; +} \ No newline at end of file From 7022b328f96ba7f51419b788ebdd24ac13f0c6d7 Mon Sep 17 00:00:00 2001 From: Stepan Grigoryev Date: Tue, 7 Apr 2026 18:11:19 +0500 Subject: [PATCH 2/5] linter --- index.html | 190 ++++++++++++++++------------- styles.css | 344 +++++++++++++++++++++++++++-------------------------- 2 files changed, 280 insertions(+), 254 deletions(-) diff --git a/index.html b/index.html index df08857..eb87679 100644 --- a/index.html +++ b/index.html @@ -1,94 +1,116 @@ - - - Практика позиционирования - - - - + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ - - - + + diff --git a/styles.css b/styles.css index 921d341..c0d9dfa 100644 --- a/styles.css +++ b/styles.css @@ -1,271 +1,275 @@ - -body { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: 100vh; - margin: 0; - background-color: #f0f0f0; - gap: 40px; +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + background-color: #f0f0f0; + gap: 40px; } .open-modal-btn { - padding: 12px 24px; - font-size: 16px; - cursor: pointer; - background-color: #2ecc71; - color: white; - border: none; - border-radius: 5px; - transition: background-color 0.3s; + padding: 12px 24px; + font-size: 16px; + cursor: pointer; + background-color: #2ecc71; + color: white; + border: none; + border-radius: 5px; + transition: background-color 0.3s; } .open-modal-btn:hover { - background-color: #27ae60; + background-color: #27ae60; } .container { - display: flex; - gap: 40px; + display: flex; + gap: 40px; } .logo-wrapper { - width: 100px; - height: 100px; - background-color: white; - display: flex; - justify-content: center; - align-items: center; - border: 1px solid #ccc; + width: 100px; + height: 100px; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #ccc; } .logo-microsoft { - width: 80px; - height: 80px; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - gap: 4px; + width: 80px; + height: 80px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 4px; } .square { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .red { - background-color: #f25022; + background-color: #f25022; } .green { - background-color: #7fbb00; + background-color: #7fbb00; } .blue { - background-color: #00a4ef; + background-color: #00a4ef; } .yellow { - background-color: #ffb900; + background-color: #ffb900; } .logo-target { - width: 90px; - height: 90px; - background-color: #e80018; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; + width: 90px; + height: 90px; + background-color: #e80018; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; } .target-white-ring { - width: 60px; - height: 60px; - background-color: white; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; + width: 60px; + height: 60px; + background-color: white; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; } .target-center { - width: 30px; - height: 30px; - background-color: #e80018; - border-radius: 50%; + width: 30px; + height: 30px; + background-color: #e80018; + border-radius: 50%; } - .modal-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; - opacity: 1; - visibility: visible; - transition: opacity 0.3s ease, visibility 0.3s ease; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + opacity: 1; + visibility: visible; + transition: + opacity 0.3s ease, + visibility 0.3s ease; } .modal-overlay.hidden { - opacity: 0; - visibility: hidden; + opacity: 0; + visibility: hidden; } .modal { - position: relative; - width: 640px; - background-color: white; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - padding: 20px; - opacity: 1; - transform: scale(1); - transition: opacity 0.3s ease, transform 0.3s ease; + position: relative; + width: 640px; + background-color: white; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + padding: 20px; + opacity: 1; + transform: scale(1); + transition: + opacity 0.3s ease, + transform 0.3s ease; } .modal.hidden { - opacity: 0; - transform: scale(0.9); + opacity: 0; + transform: scale(0.9); } .modal-close { - position: absolute; - top: 10px; - right: 10px; - font-size: 24px; - border: none; - background: none; - cursor: pointer; - padding: 0; - line-height: 1; - width: 30px; - height: 30px; - border-radius: 50%; + position: absolute; + top: 10px; + right: 10px; + font-size: 24px; + border: none; + background: none; + cursor: pointer; + padding: 0; + line-height: 1; + width: 30px; + height: 30px; + border-radius: 50%; } .modal-close:hover { - background-color: #f0f0f0; + background-color: #f0f0f0; } .modal-content { - max-width: 100%; + max-width: 100%; } .progress-container { - margin-top: 20px; - width: 100%; + margin-top: 20px; + width: 100%; } .progress-bar { - position: relative; - height: 30px; - background-color: #ddd; - border-radius: 4px; - overflow: hidden; + position: relative; + height: 30px; + background-color: #ddd; + border-radius: 4px; + overflow: hidden; } .progress-fill { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 0%; - background-color: #ff0000; - transition: width 3s; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 0%; + background-color: #ff0000; + transition: width 3s; } .progress-text { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - color: #000; - z-index: 1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: #000; + z-index: 1; } .progress-text-white { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - color: white; - z-index: 2; - clip-path: inset(0 100% 0 0); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: white; + z-index: 2; + clip-path: inset(0 100% 0 0); } .accordeon { - margin-top: 30px; - border: 1px solid #eee; - border-radius: 4px; - overflow: hidden; + margin-top: 30px; + border: 1px solid #eee; + border-radius: 4px; + overflow: hidden; } .accordeon-item { - border-bottom: 1px solid #eee; + border-bottom: 1px solid #eee; } .accordeon-item:last-child { - border-bottom: none; + border-bottom: none; } .accordeon-toggle { - position: absolute; - opacity: 0; - z-index: -1; + position: absolute; + opacity: 0; + z-index: -1; } .accordeon-title { - display: block; - padding: 15px; - font-weight: bold; - background-color: #f5f5f5; - cursor: pointer; - position: relative; + display: block; + padding: 15px; + font-weight: bold; + background-color: #f5f5f5; + cursor: pointer; + position: relative; } .accordeon-title::after { - content: '+'; - position: absolute; - right: 15px; - top: 50%; - transform: translateY(-50%); - font-size: 20px; - transition: none; + content: "+"; + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + font-size: 20px; + transition: none; } -.accordeon-toggle:checked~.accordeon-title::after { - content: '+'; - animation: rotate-plus 0.3s forwards; +.accordeon-toggle:checked ~ .accordeon-title::after { + content: "+"; + animation: rotate-plus 0.3s forwards; } -.accordeon-toggle:not(:checked)~.accordeon-title::after { - content: '+'; - animation: rotate-minus 0.3s forwards; +.accordeon-toggle:not(:checked) ~ .accordeon-title::after { + content: "+"; + animation: rotate-minus 0.3s forwards; } .accordeon-content { - max-height: 0; - overflow: hidden; - padding: 0 15px; - transition: max-height 0.3s ease, padding 0.3s ease; + max-height: 0; + overflow: hidden; + padding: 0 15px; + transition: + max-height 0.3s ease, + padding 0.3s ease; } -.accordeon-toggle:checked~.accordeon-content { - max-height: 500px; - padding: 15px; -} \ No newline at end of file +.accordeon-toggle:checked ~ .accordeon-content { + max-height: 500px; + padding: 15px; +} From bac25f5fd87a0885cd64deb348986699cf20aa85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9?= Date: Tue, 7 Apr 2026 18:17:26 +0500 Subject: [PATCH 3/5] fix --- index.js | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/index.js b/index.js index 3773dc0..8812414 100644 --- a/index.js +++ b/index.js @@ -1,16 +1,19 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ - - const element = document.querySelector('.progress-fill'); const progressBar = document.querySelector('.progress-bar'); const whiteText = document.querySelector('.progress-text-white'); +function startProgressBar() { + element.style.transition = 'none'; + element.style.width = '0%'; + whiteText.style.clipPath = 'inset(0 100% 0 0)'; + + setTimeout(() => { + element.style.transition = 'width 3s'; + element.style.width = '100%'; + updateWhiteText(); + }, 10); +} + function updateWhiteText() { const progressWidth = element.offsetWidth / progressBar.offsetWidth * 100; whiteText.style.clipPath = `inset(0 ${100 - progressWidth}% 0 0)`; @@ -20,10 +23,6 @@ function updateWhiteText() { } } -element.style.width = '100%'; - -updateWhiteText(); - const closeButton = document.querySelector('.modal-close'); closeButton.addEventListener('click', () => { const modal = document.querySelector('.modal'); @@ -40,10 +39,12 @@ openModalBtn.addEventListener('click', () => { modal.classList.remove('hidden'); overlay.classList.remove('hidden'); + + startProgressBar(); }); -const logos = document.querySelectorAll('.logo'); +const logos = document.querySelectorAll('.logo-wrapper'); logos.forEach(logo => { logo.addEventListener('click', () => { const modal = document.querySelector('.modal'); @@ -51,5 +52,7 @@ logos.forEach(logo => { modal.classList.remove('hidden'); overlay.classList.remove('hidden'); + + startProgressBar(); }); }); \ No newline at end of file From 5c1d71ff61e594fca7937aa9bd8adf5ac255e5f6 Mon Sep 17 00:00:00 2001 From: Stepan Grigoryev Date: Tue, 7 Apr 2026 18:18:25 +0500 Subject: [PATCH 4/5] qqq --- styles.css | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/styles.css b/styles.css index c0d9dfa..4949117 100644 --- a/styles.css +++ b/styles.css @@ -53,25 +53,25 @@ } .red { - background-color: #f25022; + background-color: #f3582e; } .green { - background-color: #7fbb00; + background-color: #6a9709; } .blue { - background-color: #00a4ef; + background-color: #0c93d1; } .yellow { - background-color: #ffb900; + background-color: #fcbe11; } .logo-target { width: 90px; height: 90px; - background-color: #e80018; + background-color: red; border-radius: 50%; display: flex; justify-content: center; @@ -101,7 +101,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: gray; display: flex; justify-content: center; align-items: center; @@ -123,7 +123,7 @@ width: 640px; background-color: white; border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 10px gray; padding: 20px; opacity: 1; transform: scale(1); @@ -153,7 +153,7 @@ } .modal-close:hover { - background-color: #f0f0f0; + background-color: lightgrey; } .modal-content { @@ -168,7 +168,7 @@ .progress-bar { position: relative; height: 30px; - background-color: #ddd; + background-color: lightgrey; border-radius: 4px; overflow: hidden; } @@ -179,7 +179,7 @@ left: 0; height: 100%; width: 0%; - background-color: #ff0000; + background-color: red; transition: width 3s; } @@ -192,7 +192,7 @@ display: flex; align-items: center; justify-content: center; - color: #000; + color: black; z-index: 1; } @@ -212,13 +212,13 @@ .accordeon { margin-top: 30px; - border: 1px solid #eee; + border: 1px solid whitesmoke; border-radius: 4px; overflow: hidden; } .accordeon-item { - border-bottom: 1px solid #eee; + border-bottom: 1px solid whitesmoke; } .accordeon-item:last-child { @@ -235,7 +235,7 @@ display: block; padding: 15px; font-weight: bold; - background-color: #f5f5f5; + background-color: whitesmoke; cursor: pointer; position: relative; } From fac9038152dc49e44e300ea1d64f726dbb31c65d Mon Sep 17 00:00:00 2001 From: Stepan Grigoryev Date: Tue, 7 Apr 2026 18:26:05 +0500 Subject: [PATCH 5/5] ch --- styles.css | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/styles.css b/styles.css index 4949117..d52c975 100644 --- a/styles.css +++ b/styles.css @@ -5,23 +5,8 @@ align-items: center; min-height: 100vh; margin: 0; - background-color: #f0f0f0; gap: 40px; } -.open-modal-btn { - padding: 12px 24px; - font-size: 16px; - cursor: pointer; - background-color: #2ecc71; - color: white; - border: none; - border-radius: 5px; - transition: background-color 0.3s; -} - -.open-modal-btn:hover { - background-color: #27ae60; -} .container { display: flex; @@ -101,7 +86,6 @@ left: 0; width: 100%; height: 100%; - background-color: gray; display: flex; justify-content: center; align-items: center;