130 lines
5.3 KiB
HTML
130 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Расписание - Амаль и Амре</title>
|
|
<style>
|
|
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--pink:#FF6B9D;--blue:#4A90E2}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
|
.container{max-width:900px;margin:0 auto;padding:40px 20px}
|
|
header{text-align:center;padding:30px 0;background:linear-gradient(135deg,var(--cyan-50),#fff)}
|
|
h1{font-size:36px;font-weight:800;margin-bottom:10px}
|
|
.subtitle{color:var(--gray-500);font-size:18px}
|
|
.child-selector{display:flex;gap:16px;justify-content:center;margin:30px 0}
|
|
.child-btn{flex:1;max-width:200px;padding:20px;border:3px solid var(--gray-100);border-radius:16px;background:#fff;cursor:pointer;font-size:20px;font-weight:700;transition:all 0.3s}
|
|
.child-btn.amal{border-color:var(--pink);color:var(--pink)}
|
|
.child-btn.amre{border-color:var(--blue);color:var(--blue)}
|
|
.child-btn.active{transform:scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,0.1)}
|
|
.child-btn.amal.active{background:var(--pink);color:#fff}
|
|
.child-btn.amre.active{background:var(--blue);color:#fff}
|
|
.section{margin:30px 0}
|
|
.section-title{font-size:24px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
|
.card{background:var(--gray-100);border-radius:16px;padding:20px;margin-bottom:16px}
|
|
.day-card{background:#fff;border-left:4px solid var(--cyan);margin-bottom:12px;padding:16px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
|
|
.day-title{font-weight:700;font-size:18px;margin-bottom:12px;color:var(--ink)}
|
|
.schedule-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--gray-100)}
|
|
.schedule-item:last-child{border-bottom:none}
|
|
.schedule-time{font-weight:700;color:var(--cyan);font-size:14px}
|
|
.items-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
|
|
.item-tag{background:var(--cyan-50);color:var(--ink);padding:8px 14px;border-radius:20px;font-size:14px;font-weight:500}
|
|
.club-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:700;margin-left:8px}
|
|
.club-badge.ballet{background:var(--pink);color:#fff}
|
|
.club-badge.chess{background:#9B59B6;color:#fff}
|
|
.club-badge.dombra{background:#F39C12;color:#fff}
|
|
.tab-nav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
|
|
.tab-btn{padding:10px 20px;border:2px solid var(--gray-100);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;transition:all 0.2s}
|
|
.tab-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
|
|
.hidden{display:none}
|
|
@media(max-width:640px){h1{font-size:28px}.child-selector{flex-direction:column}.child-btn{max-width:none}.section-title{font-size:20px}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<h1>📚 Расписание занятий</h1>
|
|
<p class="subtitle">Для Амаль и Амре</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="child-selector">
|
|
<button class="child-btn amal active" onclick="selectChild('amal')">👧 Амаль</button>
|
|
<button class="child-btn amre" onclick="selectChild('amre')">👦 Амре</button>
|
|
</div>
|
|
|
|
<div id="content"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentChild = 'amal';
|
|
let data = null;
|
|
|
|
async function loadData() {
|
|
const res = await fetch('/api/data');
|
|
data = await res.json();
|
|
render();
|
|
}
|
|
|
|
function selectChild(child) {
|
|
currentChild = child;
|
|
document.querySelectorAll('.child-btn').forEach(btn => btn.classList.remove('active'));
|
|
document.querySelector('.child-btn.' + child).classList.add('active');
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
if (!data) return;
|
|
|
|
const childData = data[currentChild];
|
|
const content = document.getElementById('content');
|
|
|
|
let html = '';
|
|
|
|
html += '<div class="section">';
|
|
html += '<div class="section-title">🏫 Школьные занятия</div>';
|
|
childData.school.forEach(day => {
|
|
html += '<div class="day-card">';
|
|
html += '<div class="day-title">' + day.day + '</div>';
|
|
day.items.forEach(item => {
|
|
html += '<div class="schedule-item"><span>' + item + '</span></div>';
|
|
});
|
|
html += '<div class="items-list">';
|
|
data.items.school.forEach(it => {
|
|
html += '<span class="item-tag">🎒 ' + it + '</span>';
|
|
});
|
|
html += '</div></div>';
|
|
});
|
|
html += '</div>';
|
|
|
|
html += '<div class="section">';
|
|
html += '<div class="section-title">🎨 Кружки и секции</div>';
|
|
childData.clubs.forEach(club => {
|
|
const clubClass = club.name.toLowerCase();
|
|
const itemsKey = club.name.toLowerCase();
|
|
const items = data.items[itemsKey] || [];
|
|
|
|
html += '<div class="day-card">';
|
|
html += '<div class="day-title">' + club.day + ' <span class="schedule-time">' + club.time + '</span>';
|
|
html += '<span class="club-badge ' + clubClass + '">' + club.name + '</span></div>';
|
|
|
|
if (items.length > 0) {
|
|
html += '<div class="items-list">';
|
|
items.forEach(it => {
|
|
html += '<span class="item-tag">📦 ' + it + '</span>';
|
|
});
|
|
html += '</div>';
|
|
}
|
|
html += '</div>';
|
|
});
|
|
html += '</div>';
|
|
|
|
content.innerHTML = html;
|
|
}
|
|
|
|
loadData();
|
|
</script>
|
|
</body>
|
|
</html>
|