Skip to content

ФТ-203, Моховиков, Фирсов #161

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

ФТ-203, Моховиков, Фирсов #161

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
b0ba975
1-2
Firsikita Apr 8, 2025
3092f3a
add tasks 3, 4
mmdoneperson Apr 8, 2025
002f06a
ровняем
Firsikita Apr 8, 2025
9993fc8
add task 5
mmdoneperson Apr 8, 2025
139ee95
ready
Firsikita Apr 8, 2025
32a0689
h
Firsikita 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
55 changes: 52 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,56 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<script src="index.js"></script>
<div class="logo-mickey">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="head"></div>
</div>

<div class="logo-microsoft">
<div class="square red"></div>
<div class="square green"></div>
<div class="square blue"></div>
<div class="square yellow"></div>
</div>

<button id="openModalBtn">Открыть модалку</button>

<div class="overlay" id="overlay">
<div class="modal">
<button class="close-btn" id="closeModalBtn">&times;</button>
<div class="modal-content">
<h2>Привет!</h2>
<p>Это модальное окно с прогресс-баром и аккордеоном.</p>

<div class="progress-bar">
<div class="progress"></div>
<div class="loading-text" id="loadingText"></div>
</div>

<div class="accordion">
<input type="checkbox" id="acc1">
<label for="acc1" class="accordion-title">Что такое философия?</label>
<div class="accordion-content">
<p>Философия — это наука, изучающая общие и фундаментальные вопросы бытия, знания, ценностей, разума, сознания и языка.</p>
</div>

<input type="checkbox" id="acc2">
<label for="acc2" class="accordion-title">Что такое демократия?</label>
<div class="accordion-content">
<p>Демократия — это политический режим, при котором власть принадлежит народу, а решения принимаются большинством голосов.</p>
</div>

<input type="checkbox" id="acc3">
<label for="acc3" class="accordion-title">Что изучает биология?</label>
<div class="accordion-content">
<p>Биология — это наука о живых организмах, их строении, функциях, развитии, происхождении и распределении на Земле.</p>
</div>
</div>
</div>
</div>
</div>

<script src="index.js"></script>
</body>
</html>
</html>
80 changes: 74 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,75 @@
/*
Изменить элементу цвет и ширину можно вот так:
const progressBar = document.querySelector('.progress');
const loadingText = document.getElementById('loadingText');

const element = document.querySelector('.myElement');
element.style.color = 'red';
element.style.width = '300px';
*/
let animationStarted = false;
const text = 'Loading...';

text.split('').forEach(char => {
const span = document.createElement('span');
span.textContent = char;
loadingText.appendChild(span);
});

const letterSpans = loadingText.querySelectorAll('span');

const animateProgress = () => {
const duration = 3000;
const startTime = Date.now();

const step = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const percent = progress * 100;
progressBar.style.width = `${percent}%`;

const barRect = progressBar.getBoundingClientRect();
const barRight = barRect.left + barRect.width;

letterSpans.forEach(span => {
const spanRect = span.getBoundingClientRect();
const spanCenter = spanRect.left + spanRect.width / 2;

if (spanCenter < barRight) {
span.style.color = 'white';
} else {
span.style.color = 'black';
}
});

if (progress < 1) {
requestAnimationFrame(step);
} else {
// Когда загрузка завершена
loadingText.innerHTML = ''; // очищаем старые буквы
const completeText = 'Complete!';
completeText.split('').forEach(char => {
const span = document.createElement('span');
span.textContent = char;
span.style.color = 'white'; // весь текст белый
loadingText.appendChild(span);
});
}
};

requestAnimationFrame(step);
};

const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const overlay = document.getElementById('overlay');

openModalBtn.addEventListener('click', () => {
overlay.classList.add('active');
if (!animationStarted) {
animateProgress();
animationStarted = true;
}
});
closeModalBtn.addEventListener('click', () => {
overlay.classList.remove('active');
});
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
overlay.classList.remove('active');
}
});
214 changes: 214 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@

body {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
min-height: 100vh;
margin: 0;
background-color: #f5f5f5;
padding: 20px;
font-family: Arial, sans-serif;
}

/* Логотип микимаус */
.logo-mickey {
position: relative;
width: 100px;
height: 100px;
}

.logo-mickey .head {
width: 65px;
height: 65px;
background: black;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

.logo-mickey .ear {
width: 40px;
height: 40px;
background: black;
border-radius: 50%;
position: absolute;
top: -5px;
z-index: 2;
}

.logo-mickey .ear.left {
left: 0;
}

.logo-mickey .ear.right {
right: 0;
}

/* Логотип Microsoft */
.logo-microsoft {
width: 100px;
height: 100px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
background: white;
padding: 4px;
box-sizing: border-box;
}

.logo-microsoft .square {
width: 44px;
height: 44px;
}

.logo-microsoft .red {
background-color: #F25022;
}

.logo-microsoft .green {
background-color: #7FBA00;
}

.logo-microsoft .blue {
background-color: #00A4EF;
}

.logo-microsoft .yellow {
background-color: #FFB900;
}

/* Кнопка */
#openModalBtn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

/* Оверлей */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1000;
}

.overlay.active {
visibility: visible;
opacity: 1;
}

/* Модалка */
.modal {
position: relative;
background: #fff;
width: 640px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.modal-content {
margin-top: 10px;
}

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

/* Прогресс-бар */
.progress-bar {
background-color: #e0e0e0;
border-radius: 10px;
width: 100%;
height: 30px;
position: relative;
overflow: hidden;
margin: 20px 0;
}

.progress {
width: 0%;
height: 100%;
background-color: #ff3333;
position: absolute;
top: 0;
left: 0;
transition: width 0.1s linear;
}

.loading-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
z-index: 2;
pointer-events: none;
user-select: none;
}

.loading-text span {
position: relative;
z-index: 3;
transition: color 0.1s;
white-space: pre;
}

/* Аккордеон */
.accordion {
margin-top: 30px;
}

.accordion input {
display: none;
}

.accordion-title {
display: block;
background: #eee;
padding: 10px;
cursor: pointer;
font-weight: bold;
border: 1px solid #ccc;
margin-bottom: 5px;
}

.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: #fafafa;
padding: 0 10px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

input:checked + .accordion-title + .accordion-content {
max-height: 200px;
padding: 10px;
}