Skip to content

ФТ-201, Шишкина Светлана Шеварков Юрий #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
uller123 wants to merge 8 commits into
base: master
Choose a base branch
from
Open

ФТ-201, Шишкина Светлана Шеварков Юрий #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0c76b88
done logo 7
srolket Apr 7, 2026
ec18e32
mikki
uller123 Apr 7, 2026
2d2c4f9
done modal
srolket Apr 7, 2026
6e8a5cb
1and2 merge
srolket Apr 7, 2026
f675318
5 done
srolket Apr 7, 2026
3a9b6f1
12
uller123 Apr 7, 2026
a4f55bb
Merge branch 'master' of https://github.com/srolket/positioning
uller123 Apr 7, 2026
3c64bef
final
uller123 Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .idea/.gitignore
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions .idea/encodings.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/modules.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/positioning.iml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/vcs.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

82 changes: 81 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,87 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<div class="logo react">
<div class="circle"></div>
<div class="ellipse e1"></div>
<div class="ellipse e2"></div>
<div class="ellipse e3"></div>
</div>

<div class="logo-mickey">
<div class="head"></div>
<div class="ear left"></div>
<div class="ear right"></div>
</div>

<button class="lightbox-btn" id="lightboxBtn">Открыть модальное окно</button>

<div class="modal-overlay" id="modalOverlay">
<div class="modal">
<button class="modal-close" id="modalCloseBtn">&times;</button>
<div class="modal-content">
<div class="accordion">
<div class="accordion-item">
<input type="checkbox" id="section1" class="accordion-input">
<label for="section1" class="accordion-label">Section 1</label>
<div class="accordion-body">
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Himenaeos himenaeos varius
vestibulum integer nullam lacinia. Porttitor semper viverra nisl congue quisque
tristique maximus. Nunc etiam maximus himenaeos suspendisse a scelerisque. Aliquam erat
volutpat; tempus congue velit accumsan litora
</p>

<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
</ul>
</div>
</div>

<div class="accordion-item">
<input type="checkbox" id="section2" class="accordion-input">
<label for="section2" class="accordion-label">Section 2</label>
<div class="accordion-body">
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus
pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque
semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu
iaculis leo purus venenatis dui
</p>
</div>
</div>

<div class="accordion-item">
<input type="checkbox" id="section3" class="accordion-input">
<label for="section3" class="accordion-label">Section 3</label>
<div class="accordion-body">
<p>
Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Phasellus
nec sem in justo pellentesque facilisis
</p>

<p>
Дополнительный блок текста, который появляется при открытии секции. Просто для примера
</p>
</div>
</div>

</div>
</div>

<div class="progress">
<div class="bar"></div>

<div class="text text-black">Loading...</div>
<div class="text text-white">Loading...</div>
</div>
</div>
</div>

<script src="index.js"></script>
</body>
</html>
63 changes: 57 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,58 @@
/*
Изменить элементу цвет и ширину можно вот так:
const openBtn = document.getElementById('lightboxBtn');
const overlay = document.getElementById('modalOverlay');
const closeBtn = document.getElementById('modalCloseBtn');

const element = document.querySelector('.myElement');
element.style.color = 'red';
element.style.width = '300px';
*/
function openModal() {
overlay.style.display = 'flex';

bar.style.width = '0%';
textWhite.style.clipPath = 'inset(0 100% 0 0)';

animateProgress();
}

function closeModal() {
overlay.style.display = 'none';
}

openBtn.addEventListener('click', openModal);

closeBtn.addEventListener('click', closeModal);

overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
closeModal();
}
});

document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && overlay.style.display === 'flex') {
closeModal();
}
});

const bar = document.querySelector('.bar');
const textWhite = document.querySelector('.text-white');

function animateProgress() {
let progress = 0;

const duration = 3000;
const fps = 60;
const stepTime = 1000 / fps;
const step = 100 / (duration / stepTime);

const interval = setInterval(() => {
progress += step;

if (progress >= 100) {
progress = 100;
clearInterval(interval);
}

bar.style.width = progress + '%';

textWhite.style.clipPath = `inset(0 ${100 - progress}% 0 0)`;

}, stepTime);
}
Loading