Skip to content

ФТ-201-1, Соловьев Кирилл, Ипатов Игорь #213

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
Kin211 wants to merge 7 commits into
base: master
Choose a base branch
from
Open

ФТ-201-1, Соловьев Кирилл, Ипатов Игорь #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
27a0b10
done3
IpatovIgor Apr 7, 2026
507aad1
1 + 3
Kin211 Apr 7, 2026
0811820
Merge remote-tracking branch 'origin/master'
Kin211 Apr 7, 2026
aa7818f
до 3
Kin211 Apr 7, 2026
09b96ea
до 3 222
Kin211 Apr 7, 2026
a9053bd
до 4
Kin211 Apr 7, 2026
a0fa51d
до 5
Kin211 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
49 changes: 48 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,54 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<img src="/designs/logo1.png" alt="logo1">
<img src="/designs/logo2.png" alt="logo2">
<button class="lightbox__open">Открыть модальное окно</button>

<div class="lightbox" style="display: none;">
<div class="lightbox-content">
<button class="lightbox__close">✕</button>
<h1>That's all, folks</h1>
<p>Бла бла бал. Здесь может быть любой контент. Высота подстраивается автоматически.</p>
<p>Добавьте ещё текста, чтобы проверить, что высота действительно подстраивается.</p>
<div class="progress">
<div class="prog">Loading...</div>
<div class="prog-load"><div class="prog-load-text">Loading...</div></div>
</div>

<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-content">
<p>amoma</p>
<ul>
<li>List item one</li>
<li>List item two</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-content">
<p>dfdfsdd dfsdfds</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-content">
<p>fdsfdsfkn jfkldnskf kldsflk</p>
</div>
</div>
</div>
</div>
</div>

<script src="index.js"></script>
</body>
</html>
40 changes: 39 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,42 @@
const element = document.querySelector('.myElement');
element.style.color = 'red';
element.style.width = '300px';
*/
*/

const load = document.querySelector('.prog-load');

function startAnimation() {
let width = 0;
const timer = setInterval(() => {
width++; // Прибавляем 1%
load.style.width = width + '%';

if (width >= 100) {
clearInterval(timer);
}
}, 30);
}

function buttonFunction(event) {
let target = event.target;

if (target.classList.contains('lightbox__close')) {
let lightbox = document.querySelector('.lightbox');
lightbox.style.display = 'none';
}
else if (target.classList.contains('lightbox__open')) {
let lightbox = document.querySelector('.lightbox');
lightbox.style.display = 'block';
startAnimation();
load.style.width = "0%"
}
}


let openButton = document.querySelector('.lightbox__close');
openButton.addEventListener('click', buttonFunction);
let closeButton = document.querySelector('.lightbox__open');
closeButton.addEventListener('click', buttonFunction);



172 changes: 172 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
img {
width: 100px;
height: 100px;
}

.progress {
display: flex;
background-color: lightgray;
width: 400px;
height: 200px;
justify-content: center;
align-items: center;
position: relative;
}

.prog, .prog-load {
position: absolute;
width: 100%;
height: 40px;
font-size: 25px;
line-height: 40px;
text-align: center;
}

.prog {
background-color: grey;
color: black;
z-index: 1;
}

.prog-load {
background-color: red;
color: white;
z-index: 2;
width: 40%;
overflow: hidden;
left: 0
}

.prog-load-text {
width: 400px;
height: 100%;
}

.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}

.lightbox-content {
background-color: lightblue;
width: 640px;
min-width: 200px;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

border-radius: 8px;
padding: 20px 0 20px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

display: flex;
flex-direction: column;
align-items: center;
}

.lightbox h1 {
margin-left: 20px;
margin-right: 50px;
}

.lightbox p {
margin-left: 20px;
margin-right: 20px;
}

.lightbox__close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}

.lightbox__close:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.lightbox__open {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
}

.lightbox__open:hover {
background-color: #0056b3;
}





.accordion {
border: 1px solid #ccc;
border-radius: 4px;
}

.accordion-item {
border-bottom: 1px solid #ccc;
}


.accordion-input {
display: none;
}

.accordion-label {
display: block;
padding: 10px 15px;
background: lightgray;
cursor: pointer;
font-weight: bold;
color: #333;
position: relative;
border-bottom: 1px solid #ccc;
}

.accordion-label::before {
content: '▶';
display: inline-block;
margin-right: 10px;
font-size: 10px;
transition: transform 0.2s;
}

.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: white;
padding: 0 15px;
}

.accordion-input:checked + .accordion-label::before {
transform: rotate(90deg);
}

.accordion-input:checked ~ .accordion-content {
max-height: 500px;
padding: 15px;
border-top: 1px solid #eee;
}