index.html - master - brawny/asdf

index.html
256 строк12 KB
brawny
upload files
17 фев 2026, 19:23
17 фев 2026, 19:23dcfe1c5
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AI Diary Pro</title>
    <style>
        :root { --bg: #121212; --card: #1e1e1e; --accent: #FFE100; --text: #ffffff; --err: #ff4d4d; }
        body { background: var(--bg); color: var(--text); font-family: sans-serif; margin: 0; padding: 0; overflow: hidden; }
        
        /* Header & Progress */
        header { padding: 15px; background: var(--card); border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
        .lvl-badge { background: var(--accent); color: #000; padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 12px; }
        .xp-container { background: #333; height: 6px; width: 100px; border-radius: 3px; margin-top: 5px; overflow: hidden; }
        #xp-fill { background: var(--accent); height: 100%; width: 0%; transition: 0.3s; }

        /* Content */
        main { height: calc(100vh - 140px); overflow-y: auto; padding: 15px; box-sizing: border-box; }
        .tab { display: none; }
        .tab.active { display: block; animation: fadeIn 0.2s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .card { background: var(--card); padding: 15px; border-radius: 12px; margin-bottom: 10px; border: 1px solid #333; }
        h2 { color: var(--accent); margin: 0 0 15px 0; font-size: 20px; }
        
        /* Inputs & Buttons */
        input { background: #222; color: #fff; border: 1px solid #444; padding: 12px; width: 100%; box-sizing: border-box; border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
        .btn { border: none; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%; }
        .btn-main { background: var(--accent); color: #000; }
        .btn-day { background: #333; color: #fff; width: auto; padding: 8px 12px; margin-right: 5px; font-size: 12px; margin-bottom: 5px; }
        .btn-day.active { background: var(--accent); color: #000; }

        /* Lists */
        .item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #333; }
        .item:last-child { border-bottom: none; }
        .del-btn { color: var(--err); background: none; border: none; font-size: 18px; cursor: pointer; }

        /* AI Chat */
        #chat-window { height: 200px; overflow-y: auto; background: #151515; border-radius: 8px; padding: 10px; margin-bottom: 10px; border: 1px solid #333; }
        .msg { margin-bottom: 10px; line-height: 1.4; font-size: 14px; }
        .msg-ai { color: var(--accent); }

        /* Navigation */
        nav { position: fixed; bottom: 0; width: 100%; background: var(--card); display: flex; justify-content: space-around; padding: 15px 0; border-top: 1px solid #333; }
        .nav-icon { font-size: 24px; cursor: pointer; opacity: 0.4; }
        .nav-icon.active { opacity: 1; transform: scale(1.1); }

        /* Notifications */
        #toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #000; padding: 10px 20px; border-radius: 20px; font-weight: bold; display: none; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
    </style>
</head>
<body>

    <div id="toast"></div>

    <header>
        <div>
            <span class="lvl-badge">УРОВЕНЬ <span id="lvl">1</span></span>
            <div class="xp-container"><div id="xp-fill"></div></div>
        </div>
        <div style="text-align: right; font-size: 12px; color: #aaa;">ОПЫТ: <span id="xp">0</span>/100</div>
    </header>

    <main>
        <section id="tab1" class="tab active">
            <h2>📝 Домашнее задание</h2>
            <div class="card">
                <input type="text" id="hw-text" placeholder="Что нужно сделать?">
                <input type="datetime-local" id="hw-date">
                <button class="btn btn-main" onclick="addHW()">Добавить (+20 XP)</button>
            </div>
            <div id="hw-list"></div>
        </section>

        <section id="tab2" class="tab">
            <h2>📅 Расписание</h2>
            <div id="day-selector" style="margin-bottom: 15px;">
                <button class="btn btn-day active" onclick="setDay('ПН', this)">ПН</button>
                <button class="btn btn-day" onclick="setDay('ВТ', this)">ВТ</button>
                <button class="btn btn-day" onclick="setDay('СР', this)">СР</button>
                <button class="btn btn-day" onclick="setDay('ЧТ', this)">ЧТ</button>
                <button class="btn btn-day" onclick="setDay('ПТ', this)">ПТ</button>
            </div>
            <div class="card">
                <h3 id="current-day-name" style="margin-top:0">Понедельник</h3>
                <div id="sched-list"></div>
                <div style="display:flex; gap:5px; margin-top:10px">
                    <input type="text" id="lesson-input" placeholder="Урок..." style="margin:0">
                    <button class="btn btn-main" onclick="addLesson()" style="width:60px">+</button>
                </div>
            </div>
        </section>

        <section id="tab3" class="tab">
            <h2>📊 Оценки (Средний: <span id="avg">0</span>)</h2>
            <div class="card">
                <input type="text" id="gr-name" placeholder="Предмет">
                <input type="number" id="gr-val" placeholder="Оценка (2-5)">
                <button class="btn btn-main" onclick="addGrade()">Сохранить</button>
            </div>
            <div id="gr-list"></div>
        </section>

        <section id="tab4" class="tab">
            <h2>🤖 AI Помощник</h2>
            <div class="card">
                <div id="chat-window"></div>
                <div style="display:flex; gap:5px">
                    <input type="text" id="ai-in" placeholder="Спроси о чем угодно..." style="margin:0">
                    <button class="btn btn-main" onclick="askAI()" style="width:60px">></button>
                </div>
            </div>
        </section>
    </main>

    <nav>
        <span class="nav-icon active" onclick="switchTab(1, this)">📝</span>
        <span class="nav-icon" onclick="switchTab(2, this)">📅</span>
        <span class="nav-icon" onclick="switchTab(3, this)">📊</span>
        <span class="nav-icon" onclick="switchTab(4, this)">🤖</span>
    </nav>

    <script>
        // ДАННЫЕ
        let db = JSON.parse(localStorage.getItem('school_db')) || {
            xp: 0, lvl: 1, hw: [], grades: [], 
            sched: { 'ПН': [], 'ВТ': [], 'СР': [], 'ЧТ': [], 'ПТ': [] }
        };
        let curDay = 'ПН';

        function save() {
            localStorage.setItem('school_db', JSON.stringify(db));
            render();
        }

        // НАВИГАЦИЯ
        function switchTab(n, el) {
            document.querySelectorAll('.tab').forEach((t, i) => t.classList.toggle('active', i+1 === n));
            document.querySelectorAll('.nav-icon').forEach(i => i.classList.remove('active'));
            el.classList.add('active');
        }

        function setDay(day, el) {
            curDay = day;
            document.querySelectorAll('.btn-day').forEach(b => b.classList.remove('active'));
            el.classList.add('active');
            const names = {'ПН':'Понедельник','ВТ':'Вторник','СР':'Среда','ЧТ':'Четверг','ПТ':'Пятница'};
            document.getElementById('current-day-name').innerText = names[day];
            renderSched();
        }

        // ЛОГИКА
        function notify(msg) {
            const t = document.getElementById('toast');
            t.innerText = msg; t.style.display = 'block';
            setTimeout(() => t.style.display = 'none', 3000);
        }

        function addHW() {
            const txt = document.getElementById('hw-text').value;
            const date = document.getElementById('hw-date').value;
            if(!txt) return;
            db.hw.push({ txt, date, done: false, id: Date.now() });
            db.xp += 20;
            if(db.xp >= 100) { db.xp = 0; db.lvl++; notify("🎉 Новый уровень!"); }
            document.getElementById('hw-text').value = '';
            save();
        }

        function addLesson() {
            const inp = document.getElementById('lesson-input');
            if(!inp.value) return;
            db.sched[curDay].push(inp.value);
            inp.value = '';
            save();
            renderSched();
        }

        function addGrade() {
            const n = document.getElementById('gr-name').value;
            const v = parseInt(document.getElementById('gr-val').value);
            if(n && v) { db.grades.push({n, v}); save(); document.getElementById('gr-name').value = ''; }
        }

        // РЕНДЕР
        function renderSched() {
            const list = document.getElementById('sched-list');
            list.innerHTML = db.sched[curDay].map((s, i) => `
                <div class="item">
                    <span>${i+1}. ${s}</span>
                    <button class="del-btn" onclick="db.sched['${curDay}'].splice(${i},1);save();renderSched()">×</button>
                </div>
            `).join('');
        }

        function render() {
            document.getElementById('lvl').innerText = db.lvl;
            document.getElementById('xp').innerText = db.xp;
            document.getElementById('xp-fill').style.width = db.xp + '%';

            document.getElementById('hw-list').innerHTML = db.hw.map((h, i) => `
                <div class="card">
                    <div style="font-weight:bold">${h.txt}</div>
                    <div style="font-size:12px; color:#aaa">${h.date ? 'Срок: '+h.date.replace('T',' ') : 'Без срока'}</div>
                    <button class="btn btn-main" style="margin-top:10px; padding:5px" onclick="db.hw.splice(${i},1);save()">Выполнено</button>
                </div>
            `).join('');

            document.getElementById('gr-list').innerHTML = db.grades.map((g, i) => `
                <div class="item"><span>${g.n}</span> <b>${g.v}</b> <button class="del-btn" onclick="db.grades.splice(${i},1);save()">🗑</button></div>
            `).join('');

            const avg = db.grades.length ? (db.grades.reduce((a,b)=>a+b.v,0)/db.grades.length).toFixed(2) : 0;
            document.getElementById('avg').innerText = avg;
        }

        // AI
        async function askAI() {
            const inp = document.getElementById('ai-in');
            const win = document.getElementById('chat-window');
            if(!inp.value) return;
            const q = inp.value;
            win.innerHTML += `<div class="msg"><b>Вы:</b> ${q}</div>`;
            inp.value = '...';
            try {
                const r = await fetch('https://routerai.ru/api/v1/chat/completions', {
                    method: 'POST',
                    headers: { 'Authorization': 'Bearer sk-6uXKGiRd8clYL4_rr1iaEG6r_l5HEKgv', 'Content-Type': 'application/json' },
                    body: JSON.stringify({ model: 'stepfun/step-3.5-flash', messages: [{role:'user', content: q}] })
                });
                const d = await r.json();
                win.innerHTML += `<div class="msg msg-ai"><b>AI:</b> ${d.choices[0].message.content}</div>`;
            } catch(e) { win.innerHTML += `<div style="color:red">Ошибка сети</div>`; }
            inp.value = ''; win.scrollTop = win.scrollHeight;
        }

        // ПРОВЕРКА ДЕДЛАЙНОВ (каждую минуту)
        setInterval(() => {
            const now = new Date();
            db.hw.forEach(h => {
                if(h.date) {
                    const dDate = new Date(h.date);
                    const diff = dDate - now;
                    if(diff > 0 && diff < 3600000) { // Если осталось меньше часа
                        notify(`🔥 Срочно! Дедлайн: ${h.txt}`);
                    }
                }
            });
        }, 60000);

        // СТАРТ
        render();
        renderSched();
    </script>
</body>
</html>