Skip to content

ФТ-201, Орныш, Шихова #188

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

ФТ-201, Орныш, Шихова #188

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
ad446c1
1
sw1ftin Apr 8, 2025
2772721
second task done
ElizavetaShikhova Apr 8, 2025
418945f
3-4
sw1ftin Apr 8, 2025
0e0c30d
5
sw1ftin Apr 8, 2025
0fb6231
Update index.js
sw1ftin Apr 8, 2025
2c3b239
white "Loading..."
sw1ftin 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
57 changes: 56 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,62 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<div class="logo-container">
<div class="logo-box">
<img src="designs/logo5.png" alt="Logo 5" class="logo logo-5">
</div>
<div class="logo-box">
<img src="designs/logo2.png" alt="Logo 2" class="logo logo-2">
</div>
</div>

<div class="modal-overlay" id="modalOverlay">
<div class="modal">
<button class="modal-close">&times;</button>
<div class="modal-content">
<h2>Модальное окно</h2>
<p>Это содержимое модального окна.</p>

<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
<div class="progress-text">Loading...</div>
<div class="progress-text-white">Loading...</div>
</div>
</div>

<div class="accordeon">
<div class="accordeon-item">
<input type="checkbox" id="accordeon1" class="accordeon-toggle">
<label for="accordeon1" class="accordeon-title">Реферат по математике</label>
<div class="accordeon-content">
<p>Тема: «Интеграл Гамильтона как абсолютная погрешность»</p>
<p>Линейное программирование, следовательно, специфицирует расходящийся ряд. Итак, ясно, что предел функции категорически раскручивает интеграл Пуассона. Детерминант, не вдаваясь в подробности, изменяет эмпирический полином.</p>
</div>
</div>

<div class="accordeon-item">
<input type="checkbox" id="accordeon2" class="accordeon-toggle">
<label for="accordeon2" class="accordeon-title">Точка перегиба</label>
<div class="accordeon-content">
<p>Точка перегиба ускоряет математический анализ. Теорема Гаусса - Остроградского однородно программирует экспериментальный скачок функции, явно демонстрируя всю чушь вышесказанного.</p>
<p>Открытое множество продуцирует равновероятный двойной интеграл, дальнейшие выкладки оставим студентам в качестве несложной домашней работы.</p>
</div>
</div>

<div class="accordeon-item">
<input type="checkbox" id="accordeon3" class="accordeon-toggle">
<label for="accordeon3" class="accordeon-title">Бином Ньютона</label>
<div class="accordeon-content">
<p>Уравнение в частных производных масштабирует аксиоматичный критерий интегрируемости, явно демонстрируя всю чушь вышесказанного. До недавнего времени считалось, что критерий интегрируемости существенно допускает ротор векторного поля.</p>
<p>Ввиду непрерывности функции f(x), расходящийся ряд проецирует ротор векторного поля. Бином Ньютона категорически поддерживает интеграл по бесконечной области. Многочлен, в первом приближении, осмысленно отображает ортогональный определитель.</p>
</div>
</div>
</div>
</div>
</div>
</div>

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


const element = document.querySelector('.progress-fill');
const progressBar = document.querySelector('.progress-bar');
const whiteText = document.querySelector('.progress-text-white');

function updateWhiteText() {
const progressWidth = element.offsetWidth / progressBar.offsetWidth * 100;
whiteText.style.clipPath = `inset(0 ${100 - progressWidth}% 0 0)`;

if (progressWidth < 100) {
requestAnimationFrame(updateWhiteText);
}
}

element.style.width = '100%';

updateWhiteText();

const closeButton = document.querySelector('.modal-close');
closeButton.addEventListener('click', () => {
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.modal-overlay');

modal.classList.add('hidden');
overlay.classList.add('hidden');
});


const logos = document.querySelectorAll('.logo');
logos.forEach(logo => {
logo.addEventListener('click', () => {
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.modal-overlay');

modal.classList.remove('hidden');
overlay.classList.remove('hidden');
});
});
221 changes: 221 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
.logo-container {
display: flex;
gap: 20px;
margin: 20px;
}

.logo-box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}

.logo {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.logo-2 {
transform: scale(0.9);
}

.logo-5 {
transform: scale(0.85);
}

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.hidden {
opacity: 0;
visibility: hidden;
}

.modal {
position: relative;
width: 640px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 20px;
opacity: 1;
transform: scale(1);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal.hidden {
opacity: 0;
transform: scale(0.9);
}

.modal-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
border: none;
background: none;
cursor: pointer;
padding: 0;
line-height: 1;
width: 30px;
height: 30px;
border-radius: 50%;
}

.modal-close:hover {
background-color: #f0f0f0;
}

.modal-content {
max-width: 100%;
}

.progress-container {
margin-top: 20px;
width: 100%;
}

.progress-bar {
position: relative;
height: 30px;
background-color: #ddd;
border-radius: 4px;
overflow: hidden;
}

.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background-color: #ff0000;
transition: width 3s;
}

.progress-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #000;
z-index: 1;
}

.progress-text-white {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
z-index: 2;
clip-path: inset(0 100% 0 0);
}

.accordeon {
margin-top: 30px;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}

.accordeon-item {
border-bottom: 1px solid #eee;
}

.accordeon-item:last-child {
border-bottom: none;
}

.accordeon-toggle {
position: absolute;
opacity: 0;
z-index: -1;
}

.accordeon-title {
display: block;
padding: 15px;
font-weight: bold;
background-color: #f5f5f5;
cursor: pointer;
position: relative;
}

.accordeon-title::after {
content: '+';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
transition: none;
}

.accordeon-toggle:checked ~ .accordeon-title::after {
content: '+';
animation: rotate-plus 0.3s forwards;
}

.accordeon-toggle:not(:checked) ~ .accordeon-title::after {
content: '+';
animation: rotate-minus 0.3s forwards;
}

.accordeon-content {
max-height: 0;
overflow: hidden;
padding: 0 15px;
transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordeon-toggle:checked ~ .accordeon-content {
max-height: 500px;
padding: 15px;
}

@keyframes rotate-plus {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(135deg);
}
}

@keyframes rotate-minus {
0% {
transform: translateY(-50%) rotate(135deg);
}
100% {
transform: translateY(-50%) rotate(0deg);
}
}