Pastein: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } body, html { width: 100%; h

Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
        body, html { width: 100%; height: 100%; font-family: 'Segoe UI', Arial, sans-serif; overflow: hidden; background-image: url('images/bg.png'); background-size: cover; }
        .tabs-header { display: flex; width: 100%; background: transparent; position: relative; z-index: 10; }
        .tab-btn { width: 33.33%; padding: 14px 0; text-align: center; color: #888; font-family: 'Consolas', monospace; font-size: 15px; font-weight: 500; letter-spacing: 2px; cursor: pointer; border-bottom: 2px solid transparent; background: rgba(0,0,0,0); opacity: 0.6; transition: 0.2s; }
        .tab-btn.active { color: #fff; border-bottom: 3px solid #2bc0b4; opacity: 1; background: rgba(0,0,0,0.55); }
        .tabs-content { width: 100%; height: calc(100% - 49px); padding: 20px; }
        .tab-page { display: none; width: 100%; height: 100%; }
        .tab-page.active { display: flex; flex-direction: column; }
        
        .actions-bar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
        .action-btn { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: #ccc; padding: 6px 14px; border-radius: 12px; font-size: 11px; letter-spacing: 1px; cursor: pointer; }
        .action-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
        .btn-clear:hover { background: rgba(180,50,50,0.3); border-color: rgba(255,100,100,0.3); }

        .input-row { display: flex; gap: 15px; margin-bottom: 20px; width: 100%; }
        input[type="text"], input[type="number"] { height: 44px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 2px 20px 0px 20px; color: #fff; font-size: 14px; outline: none; }
        .btn-ok { width: 120px; height: 44px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; color: #fff; font-weight: bold; cursor: pointer; }
        
        .glass-panel { flex: 1; background-color: rgba(0,0,0,0.35); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; }
        .scroll-content { width: 100%; height: 100%; overflow-y: auto; padding-right: 5px; }
        
        .form-title { font-size: 13px; font-weight: bold; color: #2bc0b4; margin-bottom: 8px; }
        .form-input { width: 100%; height: 38px; border-radius: 19px; font-size: 13px; margin-bottom: 8px; padding: 0 15px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: #fff; }
        .form-hint-text { font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.3; margin-bottom: 10px; }
        .side-btn { width: 100%; height: 40px; background: rgba(43,192,180,0.2); border: 1px solid rgba(43,192,180,0.3); border-radius: 20px; color: #fff; cursor: pointer; }
        
        @keyframes highlight { 0% { background: rgba(43,192,180,0.3); } 100% { background: transparent; } }
        .highlight { animation: highlight 1.5s ease-out; }
    </style>
</head>
<body>
    <div class="tabs-header">
        <div class="tab-btn active" id="btn-0" onclick="switchTab(0)">ДНЕВНИК</div>
        <div class="tab-btn" id="btn-1" onclick="switchTab(1)">ИСТОРИЯ</div>
        <div class="tab-btn" id="btn-2" onclick="switchTab(2)">ПРОДУКТЫ</div>
    </div>
    <div class="tabs-content">
        <div class="tab-page active" id="page-0">
            <div class="input-row"><input type="text" id="meal-input" style="flex:1;" placeholder="Введите продукт..."> <button class="btn-ok" onclick="sendData()">OK</button></div>
            <div class="glass-panel"><div class="scroll-content" id="diary-box"></div></div>
        </div>
        <div class="tab-page" id="page-1">
            <div class="actions-bar"><button class="action-btn" onclick="triggerAction('open')">OPEN</button><button class="action-btn" onclick="triggerAction('save')">SAVE</button><button class="action-btn btn-clear" onclick="triggerAction('clear')">CLEAR</button></div>
            <div class="glass-panel"><div class="scroll-content" id="history-box"></div></div>
        </div>
        <div class="tab-page" id="page-2">
            <div style="display:flex; gap:20px; height:100%;">
                <div style="flex:1; display:flex; flex-direction:column; height:100%;">
                    <input type="text" id="search-input" style="width:100%; margin-bottom:15px;" placeholder="Поиск..." oninput="filterProducts()">
                    <div class="glass-panel"><div class="scroll-content" id="db-box"></div></div>
                </div>
                <div style="width:260px; height:100%;">
                    <div class="glass-panel" style="display:flex; flex-direction:column; overflow-y:auto; padding:15px;">
                        <div class="form-title" id="form-action-title">НОВЫЙ ПРОДУКТ</div>
                        <input type="text" id="f-name" class="form-input" placeholder="Название">
                        <input type="number" id="f-kcal" class="form-input" placeholder="Ккал (авто)" disabled>
                        <input type="number" id="f-b" class="form-input" placeholder="Белки (100г)" oninput="recalcKcal()">
                        <input type="number" id="f-j" class="form-input" placeholder="Жиры (100г)" oninput="recalcKcal()">
                        <input type="number" id="f-u" class="form-input" placeholder="Углеводы (100г)" oninput="recalcKcal()">
                        <input type="number" id="f-w" class="form-input" placeholder="Вес 1 шт (гр)">
                        <div class="form-hint-text">БЖУ выше пиши <strong>на 100г</strong>. Поле «Вес 1 шт» нужно для ввода порциями. Например, если 3 мелких яблока весят в сумме 100г, то 1 шт = 33г (100 / 3). Укажи 33, и при вводе <strong>яблоко 3</strong> программа сама посчитает это как 100г. Для яиц 50г обычно. Если штук нет — оставь 0.</div>
                        <button class="side-btn" id="form-submit-btn" onclick="saveNewProduct()">ДОБАВИТЬ</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function switchTab(i) { document.querySelectorAll('.tab-btn').forEach((b,idx)=>b.classList.toggle('active',idx===i)); document.querySelectorAll('.tab-page').forEach((p,idx)=>p.classList.toggle('active',idx===i)); }
        function sendData() { document.title = "add:" + document.getElementById('meal-input').value.trim(); document.getElementById('meal-input').value = ""; }
        function triggerAction(n) { document.title = "btn:" + n; }
        function recalcKcal() { var b=parseFloat(document.getElementById('f-b').value)||0, j=parseFloat(document.getElementById('f-j').value)||0, u=parseFloat(document.getElementById('f-u').value)||0; document.getElementById('f-kcal').value = Math.round((b*4)+(j*9)+(u*4)); }
        function saveNewProduct() { var n=document.getElementById('f-name').value.trim(); document.title = "dbadd:" + n + ":" + (document.getElementById('f-kcal').value||"0") + "..." + (document.getElementById('f-w').value||"0"); }
        // Функция для анимации при добавлении
        function triggerHighlight(id) { var el = document.getElementById(id); if(el) { el.classList.add('highlight'); setTimeout(()=>el.classList.remove('highlight'), 1500); } }
        window.onload = function() { document.title = "ui_ready:true"; };
    </script>
</body>
</html>
Больше возможностей при регистрации:
