Skip to content
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

ФТ201 Букина, Силаев #107

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

ФТ201 Букина, Силаев #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb089a8
.
Apr 3, 2023
5d93308
.
Apr 3, 2023
e5be794
.
Apr 3, 2023
ed9de4c
.
Apr 3, 2023
4ddf37a
.
Apr 3, 2023
a50f9cf
.
Apr 3, 2023
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
5 changes: 5 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.

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.

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.

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

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

34 changes: 34 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,40 @@
</head>
<body>
<!--Верстать тут-->
<img src="designs/logo1.png" alt="1" class="img img1">
<img src="designs/logo2.png" alt="2" class="img img2">
<div class="overlay">
<div class="modal">
<button class="close-btn">&times;</button>
<div class="modal-content">
<div class="progress-bar">
<div class="progress-bar-fill"></div>
<div class="progress-bar-text">Loading...</div>
</div>

<div class="accordion">
<input type="checkbox" id="accordion-item-1" name="accordion" />
<label for="accordion-item-1">Accordion Item 1</label>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus nunc eu tellus suscipit bibendum. Proin nec magna quis diam cursus posuere.</p>
</div>

<input type="checkbox" id="accordion-item-2" name="accordion" />
<label for="accordion-item-2">Accordion Item 2</label>
<div class="accordion-content">
<p>Aliquam hendrerit elit a orci ornare, vitae lacinia mauris lobortis. Integer ultrices suscipit sapien, eu tempus libero malesuada in. Etiam scelerisque volutpat urna, sit amet tincidunt sapien consectetur non.</p>
</div>

<input type="checkbox" id="accordion-item-3" name="accordion" />
<label for="accordion-item-3">Accordion Item 3</label>
<div class="accordion-content">
<p>Duis eu dolor auctor, dignissim ante eu, posuere justo. Fusce tincidunt diam quam, quis consequat orci malesuada vel. Fusce vel hendrerit massa. Ut eleifend, sem non blandit viverra, massa sapien bibendum ex, nec aliquam libero sem vel est.</p>
</div>
</div>
</div>
</div>
</div>

<script src="index.js"></script>
</body>
</html>
35 changes: 34 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,37 @@
const element = document.querySelector('.myElement');
element.style.color = 'red';
element.style.width = '300px';
*/
*/

const overlay = document.querySelector('.overlay');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close-btn');

function openModal() {
overlay.style.display = 'block';
}

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

overlay.addEventListener('click', closeModal);
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', function(event) {
event.stopPropagation(); // предотвращаем закрытие окна при клике внутри него
});

const progressBarFill = document.querySelector('.progress-bar-fill');

function updateProgressBar(percent) {
progressBarFill.style.width = percent + '%';
}

let percent = 0;
let intervalId = setInterval(function() {
percent += 1;
updateProgressBar(percent);
if (percent >= 100) {
clearInterval(intervalId);
}
}, 30); // 100% за 3000 миллисекунд (30 * 100 = 3000)
107 changes: 107 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
img {
width: 100px;
height: 100px;
overflow: hidden;
object-fit: cover;
}

/* Скрыть модальное окно и оверлей по умолчанию */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* полупрозрачный цвет фона */
z-index: 9999; /* показывать окно поверх всего остального на странице */
}

.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 640px;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* тень вокруг окна */
}

.modal-content {
/* стили для контента модального окна */
}

.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
background-color: transparent;
border: none;
cursor: pointer;
}

/* Стили для модального окна и оверлея */
/* ... */

/* Стили для прогресс-бара */
.progress-bar {
width: 100%;
height: 30px;
background-color: #ccc; /* серый цвет */
position: relative;
}

.progress-bar-fill {
height: 100%;
background-color: red; /* красный цвет */
position: absolute;
left: 0;
top: 0;
width: 0;
transition: width 1s ease-in-out; /* анимация заполнения прогресс-бара */
}

.progress-bar-text {
color: #000; /* черный цвет для букв, находящихся на сером фоне */
position: relative;
/*top: 50%;*/
/*left: 50%;*/
align-self: center;
font-size: 16px;
font-weight: bold;
}

.progress-bar-fill .progress-bar-text {
color: #fff; /* белый цвет для букв, находящихся на красном фоне */
}

.accordion {
margin-top: 20px;
}

.accordion input[type="checkbox"] {
display: none;
}

.accordion label {
display: block;
padding: 10px;
background-color: #f0f0f0;
font-weight: bold;
cursor: pointer;
}

.accordion label:hover {
background-color: #e0e0e0;
}

.accordion-content {
padding: 10px;
background-color: #fff;
display: none;
}

.accordion input[type="checkbox"]:checked + label + .accordion-content {
display: block;
}