Skip to content

ФТ-203 Володин Вячеслав, Зюков Михаил #162

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

ФТ-203 Володин Вячеслав, Зюков Михаил #162

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
ff46e23
task 1
volodout Apr 8, 2025
56017b7
2
mzukov Apr 8, 2025
0b77a32
0
volodout Apr 8, 2025
b1f8707
Merge remote-tracking branch 'origin/master'
volodout Apr 8, 2025
3187e43
3
volodout Apr 8, 2025
55ccada
4
mzukov Apr 8, 2025
5f133a3
5 done
volodout Apr 8, 2025
83827d6
Done
mzukov Apr 8, 2025
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
8 changes: 8 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.

12 changes: 12 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.

50 changes: 48 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,53 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<script src="index.js"></script>

<div class="windows">
<div class="square square1"></div>
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>
</div>

<div class="japan">
<div class="flag"></div>
</div>

<div class="overlay">
<div class="lightbox">
<button class="closeButton">X</button>
<h2>Привет!</h2>
<p>
Абоба!
</p>
<div class="bar">
<div class="progress"></div>
</div>
</div>
</div>

<div class="accordeon">
<input type="checkbox" id="acc-1" class="acc-hidden">
<label for="acc-1">Аккордеон</label>
<div class="acc-content">
<p>Контент1</p>
</div>

<input type="checkbox" id="acc-2" class="acc-hidden">
<label for="acc-2">Скрипка</label>
<div class="acc-content">
<p>Контент2</p>
</div>

<input type="checkbox" id="acc-3" class="acc-hidden">
<label for="acc-3">Альт</label>
<div class="acc-content">
<p>Контент3</p>
</div>
</div>


<script src="index.js"></script>

</body>
</html>
42 changes: 36 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,37 @@
/*
Изменить элементу цвет и ширину можно вот так:
function animateProgressBar() {
const progressBar = document.querySelector('.progress');
let progress = 0;

const element = document.querySelector('.myElement');
element.style.color = 'red';
element.style.width = '300px';
*/
const interval = setInterval(() => {
if (progress < 100) {
progress++;
progressBar.style.width = `${progress}%`;
} else {
clearInterval(interval);
}
}, 30);

setTimeout(() => {
clearInterval(interval);
}, 3000);
}

function setupLightboxClose() {
const closeButton = document.querySelector('.closeButton');
const overlay = document.querySelector('.overlay');

closeButton.addEventListener('click', () => {
overlay.style.display = 'none';
});

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

document.addEventListener('DOMContentLoaded', () => {
animateProgressBar();
setupLightboxClose();
});
151 changes: 151 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
.windows {
display: flex;
flex-wrap: wrap;
width: 100px;
height: 100px;
border: 5px black solid;
margin: 5px;
}

.windows .square {
width: calc(50% - 4px);
height: calc(50% - 4px);
margin: 2px;
}

.windows .square1 {
background: rgb(241, 81, 27);
}

.windows .square2 {
background: rgb(128, 204, 40);
}

.windows .square3 {
background: rgb(0, 173, 239);
}

.windows .square4 {
background: rgb(251, 188, 9);
}

.flag {
margin: 5px;
width: 100px;
height: 100px;
background-color: white;
border: 5px solid black;
position: relative;
}

.flag::after {
content: '';
position: absolute;
top: 25%;
left: 25%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #BF0C22FF;
}

.overlay {
position: absolute;
left: 0;
top: 0;
background-color: rgba(85, 84, 84, 0.8);
width: 100%;
height: 100%;
}

.lightbox {
box-sizing: border-box;
background-color: white;
border: 1px solid black;
position: fixed;
top: 40%;
left: calc(50% - 320px);
width: 640px;
padding: 20px;
}

.lightbox .closeButton {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 92.1%;
z-index: 1;
}

.lightbox .closeButton:hover {
background-color: red;
color: aliceblue;
cursor: pointer;
}

.bar {
background-color: gray;
width: 600px;
height: 30px;
position: relative;
margin: 20px auto;
}

.bar::before, .progress::before {
content: "Loading...";
color: white;
position: absolute;
left: 300px;
top: 15px;
transform: translate(-50%, -50%);
}

.progress {
position: absolute;
background-color: red;
height: 100%;
z-index: 1;
overflow: hidden;
}

.bar::before {
color: black;
}


.accordeon{
display: flex;
flex-direction: column;
}

label{
background-color: gray;
margin-bottom: 10px;
padding: 20px 10px;
color: white;
font-size: 48px;
}

.acc-hidden {
display: none;
}

.acc-content {
display: none;
}

.acc-content p {
margin: 10px 0;
background-color: rgba(66, 66, 66, 0.8);
padding: 20px 10px;
color: white;
font-size: 24px;
}

.acc-hidden:checked + label + .acc-content {
display: block;
}