<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Дополнительные предпрофессиональные программы</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #fafafa, #f2f2f2);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.schedule-section {
width: 100%;
max-width: 800px;
background-color: #fff;
border-radius: 14px;
box-shadow: 0 6px 14px rgba(90, 0, 20, 0.2);
overflow: hidden;
}
/* Заголовки */
.section-title,
.accordion-header {
padding: 16px 20px;
font-weight: bold;
color: #5a0014;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #fff, #f9f2f4);
border-bottom: 1px solid #e6d6da;
transition: background 0.3s ease, color 0.3s ease;
}
.section-title:hover,
.accordion-header:hover {
background: linear-gradient(135deg, #f7ebee, #f0dde2);
color: #800020;
}
.accordion-title {
font-size: 1rem;
display: flex;
align-items: center;
gap: 10px;
}
.accordion-title svg {
width: 18px;
height: 18px;
color: #b3002d;
}
.accordion-icon {
width: 20px;
height: 20px;
color: #800020;
transition: transform 0.3s ease, color 0.3s ease;
}
.accordion-icon.active {
transform: rotate(180deg);
color: #b3002d;
}
/* Контент */
.accordion-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-5px);
transition: max-height 0.45s ease, opacity 0.45s ease, transform 0.45s ease;
background: linear-gradient(135deg, #ffffff, #fdf9fa);
border-left: 3px solid #b3002d;
}
.accordion-content.open {
opacity: 1;
transform: translateY(0);
}
.accordion-body {
padding: 18px;
text-align: center;
}
/* Кнопка */
.schedule-btn {
display: inline-block;
padding: 12px 20px;
font-size: 1rem;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #b3002d, #800020);
color: white;
cursor: pointer;
text-decoration: none;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
width: 100%;
max-width: 260px;
box-shadow: 0 4px 10px rgba(128, 0, 32, 0.3);
}
.schedule-btn:hover {
background: linear-gradient(135deg, #800020, #5a0014);
transform: scale(1.05);
box-shadow: 0 6px 14px rgba(90, 0, 20, 0.4);
}
@media (max-width: 600px) {
.accordion-title { font-size: 0.9rem; }
.schedule-btn {
font-size: 0.95rem;
padding: 10px;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="schedule-section">
<div class="accordion-item">
<div class="section-title" onclick="toggleAccordion(this, true)">
<span class="accordion-title">
<!-- Иконка 📑 -->
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h8l6-6V4a2 2 0 00-2-2H4z"/>
</svg>
Дополнительные предпрофессиональные программы
</span>
<svg class="accordion-icon" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 \
111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</div>
<div class="accordion-content">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div class="accordion-title">
<!-- Иконка 🎼 -->
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 2h2v12a2 2 0 11-2-2V2z"/>
</svg>
1 КЛАСС ФОРТЕПИАНО, СКРИПКА, ВИОЛОНЧЕЛЬ
</div>
<svg class="accordion-icon" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 \
111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</div>
<div class="accordion-content">
<div class="accordion-body">
<a href="https://disk.yandex.ru/i/kYJS2OzIUlluew" class="schedule-btn" target="_blank">Открыть расписание</a>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div class="accordion-title">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 2h2v12a2 2 0 11-2-2V2z"/>
</svg>
2 КЛАСС ФОРТЕПИАНО
</div>
<svg class="accordion-icon" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 \
111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</div>
<div class="accordion-content">
<div class="accordion-body">
<a href="https://disk.yandex.ru/i/kYJS2OzIUlluew" class="schedule-btn" target="_blank">Открыть расписание</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function toggleAccordion(header, isMain = false) {
const content = header.nextElementSibling;
const icon = header.querySelector('.accordion-icon');
if (!content) return;
const parent = header.parentNode.parentNode;
const allItems = parent.querySelectorAll(':scope > .accordion-item > .accordion-content');
allItems.forEach(item => {
if (item !== content) {
item.style.maxHeight = null;
item.classList.remove('open');
const ic = item.previousElementSibling.querySelector('.accordion-icon');
if (ic) ic.classList.remove('active');
}
});
if (content.style.maxHeight && content.style.maxHeight !== '0px') {
content.style.maxHeight = null;
content.classList.remove('open');
icon.classList.remove('active');
} else {
content.style.maxHeight = content.scrollHeight + 'px';
content.classList.add('open');
icon.classList.add('active');
}
const parentContent = header.closest('.accordion-content');
if (parentContent) {
setTimeout(() => {
parentContent.style.maxHeight = parentContent.scrollHeight + 'px';
}, 350);
}
}
</script>
</body>
Решаем вместе
Не убран мусор, яма на дороге, не горит фонарь?
Столкнулись с проблемой — сообщите о ней!