{"id":19,"date":"2026-05-06T21:05:57","date_gmt":"2026-05-06T21:05:57","guid":{"rendered":"https:\/\/julia.julsoft.pl\/?page_id=19"},"modified":"2026-05-06T21:06:45","modified_gmt":"2026-05-06T21:06:45","slug":"health_diary_app","status":"publish","type":"page","link":"https:\/\/julia.julsoft.pl\/","title":{"rendered":"health_diary_app"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19\" class=\"elementor elementor-19\">\n\t\t\t\t<div class=\"elementor-element elementor-element-471800e e-flex e-con-boxed e-con e-parent\" data-id=\"471800e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d85832b elementor-widget elementor-widget-shortcode\" data-id=\"d85832b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <meta name=\"mobile-web-app-capable\" content=\"yes\">\n    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">\n    <meta name=\"apple-mobile-web-app-title\" content=\"VitalSync\">\n    <meta name=\"theme-color\" content=\"#d946ef\">\n    <link rel=\"manifest\" href=\"\/hd-manifest.json\">\n    <link rel=\"apple-touch-icon\" href=\"https:\/\/julia.julsoft.pl\/wp-content\/uploads\/2026\/05\/Designer.png\">\n    \n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\n\n    <style>\n        #hd-app-container { font-family: 'Inter', sans-serif; }\n        \n        .app-wrapper { \n            height: 100vh; \n            height: 100dvh; \n            max-height: 900px;\n        }\n        \n        \/* Ozdobne t\u0142o w kropki medyczne *\/\n        .bg-medical-pattern {\n            background-image: radial-gradient(rgba(236, 72, 153, 0.15) 2px, transparent 2px);\n            background-size: 24px 24px;\n        }\n\n        \/* Szklane karty (Glassmorphism) *\/\n        .glass-card {\n            background: rgba(255, 255, 255, 0.75);\n            backdrop-filter: blur(20px);\n            -webkit-backdrop-filter: blur(20px);\n            border-radius: 24px;\n            box-shadow: 0 10px 40px -10px rgba(236, 72, 153, 0.15);\n            border: 1px solid rgba(255, 255, 255, 0.8);\n            margin-bottom: 1.25rem;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.3s ease;\n            padding: 16px 20px;\n        }\n        .glass-card:focus-within {\n            box-shadow: 0 15px 50px -10px rgba(217, 70, 239, 0.3);\n            transform: translateY(-2px);\n        }\n\n        \/* Animacja pulsu przycisku *\/\n        @keyframes pulse-ring {\n            0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.7); }\n            70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(217, 70, 239, 0); }\n            100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(217, 70, 239, 0); }\n        }\n        .pulse-btn-icon {\n            animation: pulse-ring 2s infinite;\n        }\n\n        input[type=\"number\"]::-webkit-inner-spin-button, \n        input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }\n        \n        \/* Animacje zak\u0142adek *\/\n        .tab-content { display: none; height: 100%; flex-direction: column; }\n        .tab-content.active { display: flex; animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }\n\n        \/* KARTA MEDYCZNA - CUSTOM CSS *\/\n        .medical-chart-wrapper { display: flex; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px -5px rgba(236, 72, 153, 0.08); border: 1px solid #fce7f3; overflow: hidden; position: relative; }\n        .chart-y-axis { width: 45px; flex-shrink: 0; background: #fffafc; border-right: 1px solid #fce7f3; display: flex; flex-direction: column; z-index: 10; }\n        .chart-scroll-area { flex-grow: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }\n        .chart-graph-area { position: relative; height: 250px; background-image: linear-gradient(to bottom, #fce7f3 1px, transparent 1px); background-size: 100% 25px; }\n        .chart-data-rows { border-top: 2px solid #fce7f3; background: #fff; }\n        .data-row { display: flex; border-bottom: 1px solid #fdf2f8; height: 35px; }\n        .data-row-title { width: 45px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #94a3b8; border-right: 1px solid #fce7f3; background: #fffafc; text-transform: uppercase; }\n        .data-cell { width: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border-right: 1px solid #fdf2f8; color: #334155; text-align: center; line-height: 1.2; }\n    <\/style>\n\n    <div id=\"hd-app-container\" class=\"app-wrapper relative w-full max-w-md mx-auto bg-[#fffcfd] bg-medical-pattern text-slate-800 sm:rounded-[3rem] overflow-hidden flex flex-col shadow-[0_20px_60px_rgba(217,70,239,0.2)] border-0 sm:border border-pink-100\">\n        \n        <!-- Header -->\n        <div class=\"px-5 py-4 flex justify-between items-center bg-white\/80 backdrop-blur-md z-30 border-b border-pink-50 shadow-sm flex-shrink-0\">\n            <div class=\"flex items-center gap-3\">\n                <div class=\"w-10 h-10 rounded-xl overflow-hidden bg-pink-50 flex items-center justify-center p-1 border border-pink-100 shadow-inner\">\n                    <img decoding=\"async\" src=\"https:\/\/julia.julsoft.pl\/wp-content\/uploads\/2026\/05\/Designer.png\" alt=\"Ikona\" class=\"w-full h-full object-cover rounded-lg\">\n                <\/div>\n                <h1 class=\"text-xl font-black tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-purple-600\">VitalSync<\/h1>\n            <\/div>\n            <div class=\"flex items-center gap-2 bg-white px-3 py-1.5 rounded-full border border-slate-100 shadow-sm\">\n                <span class=\"text-[9px] font-bold text-slate-500 uppercase tracking-widest\">Aktywna<\/span>\n                <div class=\"w-2.5 h-2.5 rounded-full bg-[#2dd4bf] shadow-[0_0_8px_#2dd4bf]\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- BANERY APLIKACJI (PWA) Wzorowane na Portal Klasy -->\n        <div id=\"pwa-install-banner\" class=\"hidden bg-gradient-to-r from-pink-500 to-purple-600 text-white p-3 flex justify-between items-center text-sm font-bold cursor-pointer shadow-md z-40 flex-shrink-0\" onclick=\"hdInstallPWA()\">\n            <span class=\"flex items-center\"><i class=\"fa-solid fa-download mr-2 animate-bounce\"><\/i> Zainstaluj aplikacj\u0119 (Szybki dost\u0119p!)<\/span>\n            <span class=\"bg-white text-purple-600 px-3 py-1 rounded-full text-xs shadow-sm\">Instaluj<\/span>\n        <\/div>\n\n        <div id=\"pwa-ios-install-hint\" class=\"hidden bg-pink-50 border-b border-pink-200 text-pink-800 p-3 text-xs md:text-sm shadow-inner text-center z-40 flex-shrink-0\">\n            <strong>Masz iPhone'a?<\/strong> Dodaj t\u0119 stron\u0119 jako aplikacj\u0119! Kliknij ikon\u0119 udost\u0119pniania na dole ekranu, a nast\u0119pnie wybierz <strong>\"Dodaj do ekranu g\u0142\u00f3wnego\"<\/strong>.\n        <\/div>\n\n        <!-- Zawarto\u015b\u0107 aplikacji - z du\u017cym paddingiem dolnym pb-32 na widoczno\u015b\u0107 przycisku! -->\n        <div class=\"flex-1 overflow-y-auto px-5 pt-6 pb-32 scroll-smooth relative z-20\">\n            \n            <!-- Dekoracyjne \u015bwiat\u0142a w tle dla futurystycznego efektu -->\n            <div class=\"absolute top-10 left-10 w-32 h-32 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse pointer-events-none\"><\/div>\n            <div class=\"absolute bottom-40 right-10 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse pointer-events-none\"><\/div>\n\n            <!-- ZAK\u0141ADKA 1: NOWY POMIAR (FUTURYSTYCZNY WYGL\u0104D) -->\n            <div id=\"tab-add\" class=\"tab-content active relative z-10\">\n                <div class=\"text-center mb-6\">\n                    <div class=\"text-[10px] text-pink-500 mb-1 font-black tracking-[0.2em] uppercase drop-shadow-sm\">System Pomiarowy<\/div>\n                    <div id=\"current-date-display\" class=\"text-2xl font-light text-slate-700 tracking-tight\">--:--<\/div>\n                <\/div>\n\n                <form id=\"add-log-form\" class=\"space-y-4 flex-1 flex flex-col\">\n                    \n                    <div class=\"glass-card\">\n                        <div class=\"absolute -right-6 -top-6 text-pink-100 opacity-40 pointer-events-none\">\n                            <i class=\"fa-solid fa-droplet text-8xl\"><\/i>\n                        <\/div>\n                        <div class=\"relative z-10\">\n                            <label class=\"block text-[10px] text-[#f472b6] font-black uppercase tracking-widest mb-1\">Skurczowe (SYS)<\/label>\n                            <div class=\"flex items-end justify-between\">\n                                <input type=\"number\" id=\"input-sys\" required min=\"50\" max=\"250\" class=\"w-2\/3 bg-transparent text-5xl font-black text-slate-800 outline-none placeholder-slate-200\" placeholder=\"120\">\n                                <div class=\"bg-pink-50\/80 text-pink-500 px-3 py-1.5 rounded-lg text-xs font-bold border border-pink-100 shadow-sm backdrop-blur-sm\">mmHg<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"glass-card\">\n                        <div class=\"absolute -right-4 -top-4 text-purple-100 opacity-40 pointer-events-none\">\n                            <i class=\"fa-solid fa-heart text-8xl\"><\/i>\n                        <\/div>\n                        <div class=\"relative z-10\">\n                            <label class=\"block text-[10px] text-[#a855f7] font-black uppercase tracking-widest mb-1\">Rozkurczowe (DIA)<\/label>\n                            <div class=\"flex items-end justify-between\">\n                                <input type=\"number\" id=\"input-dia\" required min=\"30\" max=\"150\" class=\"w-2\/3 bg-transparent text-5xl font-black text-slate-800 outline-none placeholder-slate-200\" placeholder=\"80\">\n                                <div class=\"bg-purple-50\/80 text-purple-500 px-3 py-1.5 rounded-lg text-xs font-bold border border-purple-100 shadow-sm backdrop-blur-sm\">mmHg<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"glass-card\">\n                        <div class=\"absolute -right-6 -top-4 text-rose-100 opacity-40 pointer-events-none\">\n                            <i class=\"fa-solid fa-heart-pulse text-8xl\"><\/i>\n                        <\/div>\n                        <div class=\"relative z-10\">\n                            <label class=\"block text-[10px] text-[#fb7185] font-black uppercase tracking-widest mb-1\">Puls (BPM)<\/label>\n                            <div class=\"flex items-end justify-between\">\n                                <input type=\"number\" id=\"input-pulse\" required min=\"30\" max=\"200\" class=\"w-2\/3 bg-transparent text-5xl font-black text-slate-800 outline-none placeholder-slate-200\" placeholder=\"70\">\n                                <div class=\"bg-rose-50\/80 text-rose-500 px-3 py-1.5 rounded-lg text-xs font-bold border border-rose-100 shadow-sm backdrop-blur-sm\">bpm<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Przycisk jest w scrollu z dobrym marginesem pb-32 na zewn\u0105trz -->\n                    <div class=\"mt-4 relative z-20\">\n                        <button type=\"submit\" id=\"btn-save-log\" class=\"w-full h-16 bg-gradient-to-r from-pink-500 via-purple-500 to-pink-500 bg-[length:200%_auto] hover:bg-[position:right_center] text-white rounded-2xl font-black text-lg shadow-[0_10px_30px_rgba(217,70,239,0.4)] transition-all duration-300 active:scale-95 flex items-center justify-center gap-3 overflow-hidden\">\n                            <div class=\"pulse-btn-icon rounded-full bg-white\/20 p-2 flex items-center justify-center\">\n                                <i class=\"fa-solid fa-check text-white\"><\/i>\n                            <\/div>\n                            <span>ZAPISZ POMIAR<\/span>\n                        <\/button>\n                    <\/div>\n                <\/form>\n            <\/div>\n\n            <!-- ZAK\u0141ADKA 2: WYKRESY (KARTA MEDYCZNA) -->\n            <div id=\"tab-charts\" class=\"tab-content relative z-10\">\n                <div class=\"flex justify-between items-end mb-6\">\n                    <h2 class=\"text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-slate-700 to-slate-900\">Karta Parametr\u00f3w<\/h2>\n                <\/div>\n                \n                <div class=\"medical-chart-wrapper mb-6\">\n                    <div class=\"chart-y-axis\" id=\"karta-y-axis\"><\/div>\n                    <div class=\"chart-scroll-area\" id=\"karta-scroll-area\">\n                        <div class=\"chart-graph-area\" id=\"karta-graph-area\">\n                            <svg id=\"karta-svg\" class=\"absolute top-0 left-0 w-full h-full pointer-events-none\" preserveAspectRatio=\"none\"><\/svg>\n                        <\/div>\n                        <div class=\"chart-data-rows\" id=\"karta-data-rows\">\n                            <div class=\"data-row\" id=\"row-bp\"><\/div>\n                            <div class=\"data-row\" id=\"row-pulse\"><\/div>\n                            <div class=\"data-row\" id=\"row-date\"><\/div>\n                            <div class=\"data-row\" id=\"row-time\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"text-center text-[10px] text-slate-400 font-medium bg-white\/50 py-2 rounded-full backdrop-blur-sm border border-white\">\n                    <i class=\"fa-solid fa-arrows-left-right mr-1\"><\/i> Przesu\u0144 wykres w prawo\/lewo\n                <\/div>\n                \n                <div class=\"mt-6 flex justify-center gap-6 text-[10px] font-bold text-slate-600 uppercase bg-white\/80 p-3 rounded-2xl shadow-sm border border-white backdrop-blur-md\">\n                    <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-[#a855f7] rounded-sm shadow-sm\"><\/div> Ci\u015bnienie<\/div>\n                    <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-[#fb7185] rounded-full shadow-sm\"><\/div> Puls<\/div>\n                <\/div>\n            <\/div>\n\n            <!-- ZAK\u0141ADKA 3: HISTORIA -->\n            <div id=\"tab-history\" class=\"tab-content relative z-10\">\n                <div class=\"flex justify-between items-end mb-6\">\n                    <h2 class=\"text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-slate-700 to-slate-900\">Historia<\/h2>\n                    <span class=\"text-xs font-black text-pink-500 bg-pink-100 px-3 py-1.5 rounded-full shadow-inner border border-pink-200\" id=\"history-count\">0 wpis\u00f3w<\/span>\n                <\/div>\n                <div id=\"history-list\" class=\"space-y-4\"><\/div>\n            <\/div>\n\n            <!-- ZAK\u0141ADKA 4: USTAWIENIA \/ ALARMY -->\n            <div id=\"tab-settings\" class=\"tab-content relative z-10\">\n                <h2 class=\"text-2xl font-black mb-6 text-transparent bg-clip-text bg-gradient-to-r from-slate-700 to-slate-900\">Przypomnienia<\/h2>\n                \n                <div class=\"bg-white\/80 backdrop-blur-xl border border-white shadow-[0_10px_30px_rgba(236,72,153,0.1)] rounded-3xl p-6 space-y-6 relative overflow-hidden\">\n                    <div class=\"absolute -right-10 -top-10 text-pink-100 opacity-50 pointer-events-none\">\n                        <i class=\"fa-solid fa-bell text-9xl\"><\/i>\n                    <\/div>\n                    \n                    <p class=\"text-xs text-slate-600 font-medium leading-relaxed bg-pink-50\/80 p-4 rounded-2xl border border-pink-100 relative z-10\">\n                        Zezw\u00f3l na powiadomienia, a nast\u0119pnie dostosuj godziny poni\u017cej. Aplikacja przypomni Ci o pomiarze zgodnie z Twoim harmonogramem.\n                    <\/p>\n                    \n                    <div class=\"flex items-center justify-between border-b border-pink-50 pb-4 relative z-10\">\n                        <div>\n                            <div class=\"font-bold text-slate-800 text-sm\">Przypomnienie Poranne<\/div>\n                            <div class=\"flex items-center mt-2\">\n                                <i class=\"fa-regular fa-sun text-[#f472b6] mr-2\"><\/i>\n                                <input type=\"time\" id=\"time-morning\" class=\"bg-white border border-pink-100 text-slate-700 text-xs rounded-lg px-2 py-1.5 font-bold outline-none focus:border-pink-400 focus:ring-2 focus:ring-pink-200 transition-all shadow-sm\">\n                            <\/div>\n                        <\/div>\n                        <label class=\"relative inline-flex items-center cursor-pointer shadow-sm rounded-full\">\n                            <input type=\"checkbox\" id=\"toggle-morning\" class=\"sr-only peer\">\n                            <div class=\"w-12 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gradient-to-r peer-checked:from-pink-400 peer-checked:to-pink-500 shadow-inner\"><\/div>\n                        <\/label>\n                    <\/div>\n\n                    <div class=\"flex items-center justify-between border-b border-pink-50 pb-4 relative z-10\">\n                        <div>\n                            <div class=\"font-bold text-slate-800 text-sm\">Przypomnienie Wieczorne<\/div>\n                            <div class=\"flex items-center mt-2\">\n                                <i class=\"fa-regular fa-moon text-[#a855f7] mr-2\"><\/i>\n                                <input type=\"time\" id=\"time-evening\" class=\"bg-white border border-purple-100 text-slate-700 text-xs rounded-lg px-2 py-1.5 font-bold outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-200 transition-all shadow-sm\">\n                            <\/div>\n                        <\/div>\n                        <label class=\"relative inline-flex items-center cursor-pointer shadow-sm rounded-full\">\n                            <input type=\"checkbox\" id=\"toggle-evening\" class=\"sr-only peer\">\n                            <div class=\"w-12 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gradient-to-r peer-checked:from-purple-400 peer-checked:to-purple-500 shadow-inner\"><\/div>\n                        <\/label>\n                    <\/div>\n                    \n                    <button id=\"btn-request-notif\" class=\"w-full py-3.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-black uppercase tracking-widest transition-colors border border-slate-200 relative z-10 flex items-center justify-center\">\n                        <i class=\"fa-solid fa-lock-open mr-2\"><\/i> Wymu\u015b uprawnienia\n                    <\/button>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <!-- Dolna Nawigacja (Zawsze na dole, na wierzchu) -->\n        <div class=\"absolute bottom-0 left-0 w-full bg-white\/90 backdrop-blur-xl border-t border-pink-100 flex justify-around items-center pb-safe pt-2 px-2 z-50 shadow-[0_-10px_30px_rgba(236,72,153,0.05)] flex-shrink-0\">\n            <button class=\"nav-btn flex flex-col items-center p-2 pt-3 pb-3 w-16 text-pink-500 transition-colors\" data-target=\"tab-add\">\n                <div class=\"relative\">\n                    <i class=\"fa-solid fa-plus text-xl mb-1.5 relative z-10 drop-shadow-md\"><\/i>\n                    <div class=\"nav-glow absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-8 h-8 bg-pink-400 rounded-full blur-md opacity-30\"><\/div>\n                <\/div>\n                <span class=\"text-[9px] font-black tracking-widest uppercase\">Dodaj<\/span>\n            <\/button>\n            <button class=\"nav-btn flex flex-col items-center p-2 pt-3 pb-3 w-16 text-slate-400 hover:text-pink-500 transition-colors\" data-target=\"tab-charts\">\n                <div class=\"relative\">\n                    <i class=\"fa-solid fa-chart-line text-xl mb-1.5 relative z-10\"><\/i>\n                    <div class=\"nav-glow absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-8 h-8 bg-pink-400 rounded-full blur-md opacity-0 transition-opacity\"><\/div>\n                <\/div>\n                <span class=\"text-[9px] font-black tracking-widest uppercase\">Wykres<\/span>\n            <\/button>\n            <button class=\"nav-btn flex flex-col items-center p-2 pt-3 pb-3 w-16 text-slate-400 hover:text-pink-500 transition-colors\" data-target=\"tab-history\">\n                <div class=\"relative\">\n                    <i class=\"fa-solid fa-clock-rotate-left text-xl mb-1.5 relative z-10\"><\/i>\n                    <div class=\"nav-glow absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-8 h-8 bg-pink-400 rounded-full blur-md opacity-0 transition-opacity\"><\/div>\n                <\/div>\n                <span class=\"text-[9px] font-black tracking-widest uppercase\">Historia<\/span>\n            <\/button>\n            <button class=\"nav-btn flex flex-col items-center p-2 pt-3 pb-3 w-16 text-slate-400 hover:text-pink-500 transition-colors\" data-target=\"tab-settings\">\n                <div class=\"relative\">\n                    <i class=\"fa-solid fa-bell text-xl mb-1.5 relative z-10\"><\/i>\n                    <div class=\"nav-glow absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-8 h-8 bg-pink-400 rounded-full blur-md opacity-0 transition-opacity\"><\/div>\n                <\/div>\n                <span class=\"text-[9px] font-black tracking-widest uppercase\">Alarmy<\/span>\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const API_URL = 'https:\/\/julia.julsoft.pl\/index.php?rest_route=\/health-diary\/v1\/logs';\n        const NONCE = '192d86792f';\n        \n        let logsData = [];\n\n        \/\/ Nawigacja\n        const navBtns = document.querySelectorAll('.nav-btn');\n        const tabs = document.querySelectorAll('.tab-content');\n\n        navBtns.forEach(btn => {\n            btn.addEventListener('click', () => {\n                navBtns.forEach(b => {\n                    b.classList.remove('text-pink-500');\n                    b.classList.add('text-slate-400');\n                    b.querySelector('i').classList.remove('drop-shadow-md');\n                    b.querySelector('.nav-glow').classList.remove('opacity-30');\n                    b.querySelector('.nav-glow').classList.add('opacity-0');\n                });\n                btn.classList.add('text-pink-500');\n                btn.classList.remove('text-slate-400');\n                btn.querySelector('i').classList.add('drop-shadow-md');\n                btn.querySelector('.nav-glow').classList.add('opacity-30');\n                btn.querySelector('.nav-glow').classList.remove('opacity-0');\n\n                tabs.forEach(t => t.classList.remove('active'));\n                document.getElementById(btn.dataset.target).classList.add('active');\n\n                if(btn.dataset.target === 'tab-charts') renderCustomChart();\n            });\n        });\n\n        \/\/ Zegar i Data\n        const dateDisplay = document.getElementById('current-date-display');\n        const months = ['stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca', 'lipca', 'sierpnia', 'wrze\u015bnia', 'pa\u017adziernika', 'listopada', 'grudnia'];\n        const days = ['Niedziela', 'Poniedzia\u0142ek', 'Wtorek', '\u015aroda', 'Czwartek', 'Pi\u0105tek', 'Sobota'];\n        \n        setInterval(() => {\n            const now = new Date();\n            const dayName = days[now.getDay()];\n            const dayNum = String(now.getDate()).padStart(2, '0');\n            const monthName = months[now.getMonth()];\n            const h = String(now.getHours()).padStart(2, '0');\n            const m = String(now.getMinutes()).padStart(2, '0');\n            dateDisplay.innerText = `${dayName}, ${dayNum} ${monthName} ${h}:${m}`;\n        }, 1000);\n\n        \/\/ Fetch & Save\n        async function fetchLogs() {\n            try {\n                const res = await fetch(API_URL, { headers: { 'X-WP-Nonce': NONCE } });\n                if (res.ok) {\n                    logsData = await res.json();\n                    updateHistoryUI();\n                    if(document.getElementById('tab-charts').classList.contains('active')) renderCustomChart();\n                }\n            } catch (e) { console.error('B\u0142\u0105d pobierania danych', e); }\n        }\n\n        const form = document.getElementById('add-log-form');\n        const btnSave = document.getElementById('btn-save-log');\n        \n        form.addEventListener('submit', async (e) => {\n            e.preventDefault();\n            const originalContent = btnSave.innerHTML;\n            btnSave.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin text-white\"><\/i> <span>PRZETWARZANIE...<\/span>';\n            btnSave.disabled = true;\n\n            const payload = {\n                systolic: document.getElementById('input-sys').value,\n                diastolic: document.getElementById('input-dia').value,\n                pulse: document.getElementById('input-pulse').value\n            };\n\n            try {\n                const res = await fetch(API_URL, {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application\/json', 'X-WP-Nonce': NONCE },\n                    body: JSON.stringify(payload)\n                });\n                if (res.ok) {\n                    form.reset();\n                    await fetchLogs();\n                    document.querySelector('[data-target=\"tab-charts\"]').click(); \n                }\n            } catch (e) { alert('B\u0142\u0105d po\u0142\u0105czenia.'); } \n            finally {\n                btnSave.innerHTML = originalContent;\n                btnSave.disabled = false;\n            }\n        });\n\n        \/\/ Historia UI\n        function updateHistoryUI() {\n            const list = document.getElementById('history-list');\n            document.getElementById('history-count').innerText = logsData.length + ' wpis\u00f3w';\n            list.innerHTML = '';\n\n            if (logsData.length === 0) {\n                list.innerHTML = '<div class=\"text-center text-slate-400 text-sm py-10 bg-white\/60 backdrop-blur-md rounded-2xl border border-white\">Brak danych. Dodaj sw\u00f3j pierwszy pomiar!<\/div>';\n                return;\n            }\n\n            const reversedLogs = [...logsData].reverse();\n\n            reversedLogs.forEach(log => {\n                const dateObj = new Date(log.measured_at.replace(' ', 'T'));\n                const timeStr = dateObj.toLocaleTimeString('pl-PL', { hour: '2-digit', minute:'2-digit' });\n                const dateStr = dateObj.toLocaleDateString('pl-PL', { day: '2-digit', month: '2-digit' });\n                \n                const item = document.createElement('div');\n                item.className = `p-4 rounded-2xl bg-white\/80 backdrop-blur-md shadow-sm border border-pink-100 flex justify-between items-center transition-transform hover:-translate-y-1`;\n                item.innerHTML = `\n                    <div class=\"flex items-center gap-4\">\n                        <div class=\"text-center bg-gradient-to-b from-pink-50 to-purple-50 rounded-xl p-2 min-w-[60px] border border-white shadow-inner\">\n                            <div class=\"text-xs font-black text-slate-600\">${timeStr}<\/div>\n                            <div class=\"text-[9px] font-bold text-slate-400 tracking-wider\">${dateStr}<\/div>\n                        <\/div>\n                        <div>\n                            <div class=\"text-xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 tracking-tight\">${log.systolic} <span class=\"text-slate-300 font-light text-base mx-0.5\">\/<\/span> ${log.diastolic}<\/div>\n                            <div class=\"text-[10px] font-black text-rose-500 mt-0.5 flex items-center gap-1.5 uppercase tracking-wider\"><i class=\"fa-solid fa-heart-pulse\"><\/i> ${log.pulse} bpm<\/div>\n                        <\/div>\n                    <\/div>\n                `;\n                list.appendChild(item);\n            });\n        }\n\n        \/\/ Karta Medyczna (Wykres)\n        function renderCustomChart() {\n            const yAxisDiv = document.getElementById('karta-y-axis');\n            yAxisDiv.innerHTML = '';\n            \n            const maxVal = 220;\n            const minVal = 40;\n            const range = maxVal - minVal;\n            const step = 20; \n            const graphHeight = 250; \n            \n            for (let v = maxVal; v >= minVal; v -= step) {\n                const el = document.createElement('div');\n                const percentFromTop = ((maxVal - v) \/ range) * 100;\n                el.style.position = 'absolute';\n                el.style.top = `calc(${percentFromTop}% - 6px)`; \n                el.style.width = '100%';\n                el.style.textAlign = 'center';\n                el.style.fontSize = '9px';\n                el.style.fontWeight = '700';\n                el.style.color = '#94a3b8';\n                el.innerText = v;\n                yAxisDiv.appendChild(el);\n            }\n            yAxisDiv.style.position = 'relative';\n            yAxisDiv.style.height = `${graphHeight}px`;\n\n            if (logsData.length === 0) return;\n            \n            const colWidth = 50; \n            const totalWidth = logsData.length * colWidth;\n            \n            document.getElementById('row-bp').innerHTML = '<div class=\"data-row-title text-[#a855f7]\">BP<\/div>';\n            document.getElementById('row-pulse').innerHTML = '<div class=\"data-row-title text-[#fb7185]\">Puls<\/div>';\n            document.getElementById('row-date').innerHTML = '<div class=\"data-row-title\">Data<\/div>';\n            document.getElementById('row-time').innerHTML = '<div class=\"data-row-title\">Czas<\/div>';\n\n            const svg = document.getElementById('karta-svg');\n            svg.innerHTML = ''; \n            svg.setAttribute('width', totalWidth);\n            svg.setAttribute('height', graphHeight);\n            \n            document.getElementById('karta-graph-area').style.width = `${totalWidth}px`;\n            \n            const getY = (val) => {\n                const v = parseInt(val, 10);\n                if (isNaN(v)) return null;\n                const clampedV = Math.max(minVal, Math.min(maxVal, v)); \n                return graphHeight - (((clampedV - minVal) \/ range) * graphHeight);\n            };\n\n            let lastPulse = null;\n\n            logsData.forEach((log, index) => {\n                const cx = (index * colWidth) + (colWidth \/ 2);\n                \n                const ySys = getY(log.systolic);\n                const yDia = getY(log.diastolic);\n                const yPulse = getY(log.pulse);\n\n                if (ySys !== null && yDia !== null) {\n                    const g = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"g\");\n                    const line = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n                    line.setAttribute('x1', cx); line.setAttribute('y1', ySys);\n                    line.setAttribute('x2', cx); line.setAttribute('y2', yDia);\n                    line.setAttribute('stroke', '#a855f7'); line.setAttribute('stroke-width', '2.5');\n                    g.appendChild(line);\n                    \n                    const topCap = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n                    topCap.setAttribute('x1', cx-5); topCap.setAttribute('y1', ySys);\n                    topCap.setAttribute('x2', cx+5); topCap.setAttribute('y2', ySys);\n                    topCap.setAttribute('stroke', '#a855f7'); topCap.setAttribute('stroke-width', '2.5');\n                    topCap.setAttribute('stroke-linecap', 'round');\n                    g.appendChild(topCap);\n\n                    const botCap = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n                    botCap.setAttribute('x1', cx-5); botCap.setAttribute('y1', yDia);\n                    botCap.setAttribute('x2', cx+5); topCap.setAttribute('y2', yDia);\n                    botCap.setAttribute('stroke', '#a855f7'); botCap.setAttribute('stroke-width', '2.5');\n                    botCap.setAttribute('stroke-linecap', 'round');\n                    g.appendChild(botCap);\n\n                    svg.appendChild(g);\n                }\n\n                if (yPulse !== null) {\n                    if (lastPulse !== null) {\n                        const pLine = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n                        pLine.setAttribute('x1', lastPulse.x); pLine.setAttribute('y1', lastPulse.y);\n                        pLine.setAttribute('x2', cx); pLine.setAttribute('y2', yPulse);\n                        pLine.setAttribute('stroke', '#fb7185'); pLine.setAttribute('stroke-width', '2');\n                        svg.appendChild(pLine);\n                    }\n                    \n                    const circle = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\n                    circle.setAttribute('cx', cx);\n                    circle.setAttribute('cy', yPulse);\n                    circle.setAttribute('r', '4');\n                    circle.setAttribute('fill', '#fff');\n                    circle.setAttribute('stroke', '#fb7185');\n                    circle.setAttribute('stroke-width', '2');\n                    svg.appendChild(circle);\n\n                    lastPulse = { x: cx, y: yPulse };\n                }\n\n                const dateObj = new Date(log.measured_at.replace(' ', 'T'));\n                \n                const cellBP = document.createElement('div');\n                cellBP.className = 'data-cell text-[#a855f7]';\n                cellBP.innerHTML = `${log.systolic}<br><span class=\"text-[9px] text-[#d8b4fe] border-t border-[#fce7f3] w-full pt-0.5 mt-0.5 inline-block\">${log.diastolic}<\/span>`;\n                document.getElementById('row-bp').appendChild(cellBP);\n\n                const cellPulse = document.createElement('div');\n                cellPulse.className = 'data-cell text-[#fb7185] font-black';\n                cellPulse.innerText = log.pulse;\n                document.getElementById('row-pulse').appendChild(cellPulse);\n\n                const cellDate = document.createElement('div');\n                cellDate.className = 'data-cell text-[9px] font-bold text-slate-500';\n                cellDate.innerText = dateObj.toLocaleDateString('pl-PL', { day: '2-digit', month: '2-digit' });\n                document.getElementById('row-date').appendChild(cellDate);\n\n                const cellTime = document.createElement('div');\n                cellTime.className = 'data-cell text-[9px] font-bold text-slate-400';\n                cellTime.innerText = dateObj.toLocaleTimeString('pl-PL', { hour: '2-digit', minute:'2-digit' });\n                document.getElementById('row-time').appendChild(cellTime);\n            });\n\n            const scrollArea = document.getElementById('karta-scroll-area');\n            setTimeout(() => { scrollArea.scrollLeft = scrollArea.scrollWidth; }, 50);\n        }\n\n        \/\/ --- System Przypomnie\u0144 PWA (Ustawienia Alarm\u00f3w z Czasem) ---\n        const toggleMorning = document.getElementById('toggle-morning');\n        const toggleEvening = document.getElementById('toggle-evening');\n        const timeMorning = document.getElementById('time-morning');\n        const timeEvening = document.getElementById('time-evening');\n        \n        \/\/ Odczyt z localStorage z domy\u015blnymi godzinami\n        const settings = JSON.parse(localStorage.getItem('hd_settings') || '{\"morning\":false,\"evening\":false,\"morningTime\":\"07:00\",\"eveningTime\":\"22:00\"}');\n        \n        toggleMorning.checked = settings.morning;\n        toggleEvening.checked = settings.evening;\n        timeMorning.value = settings.morningTime || \"07:00\";\n        timeEvening.value = settings.eveningTime || \"22:00\";\n\n        function saveSettings() {\n            localStorage.setItem('hd_settings', JSON.stringify({ \n                morning: toggleMorning.checked, \n                evening: toggleEvening.checked,\n                morningTime: timeMorning.value,\n                eveningTime: timeEvening.value\n            }));\n        }\n        toggleMorning.addEventListener('change', saveSettings);\n        toggleEvening.addEventListener('change', saveSettings);\n        timeMorning.addEventListener('change', saveSettings);\n        timeEvening.addEventListener('change', saveSettings);\n\n        document.getElementById('btn-request-notif').addEventListener('click', async () => {\n            if (!(\"Notification\" in window)) { alert(\"Przegl\u0105darka nie obs\u0142uguje powiadomie\u0144.\"); return; }\n            const perm = await Notification.requestPermission();\n            if (perm === \"granted\") alert(\"Powiadomienia pomy\u015blnie aktywowane!\");\n        });\n\n        let lastNotifiedMinute = '';\n        setInterval(() => {\n            const now = new Date();\n            const h = String(now.getHours()).padStart(2, '0');\n            const m = String(now.getMinutes()).padStart(2, '0');\n            const currentTimeStr = `${h}:${m}`;\n            \n            \/\/ Sprawdzenie, czy dla aktualnej minuty jeszcze nie by\u0142o powiadomienia\n            if (lastNotifiedMinute !== currentTimeStr) {\n                const stored = JSON.parse(localStorage.getItem('hd_settings') || '{}');\n                let wasNotifiedNow = false;\n                \n                if (stored.morning && currentTimeStr === (stored.morningTime || '07:00')) {\n                    showNotification(\"Poranny Pomiar\", \"Rozpocznij dzie\u0144 ze zdrowiem! Czas zmierzy\u0107 ci\u015bnienie i puls.\");\n                    wasNotifiedNow = true;\n                }\n                if (stored.evening && currentTimeStr === (stored.eveningTime || '22:00')) {\n                    showNotification(\"Wieczorny Pomiar\", \"Pami\u0119taj o wieczornej kontroli parametr\u00f3w.\");\n                    wasNotifiedNow = true;\n                }\n                \n                if (wasNotifiedNow) {\n                    lastNotifiedMinute = currentTimeStr;\n                }\n            }\n        }, 10000);\n\n        function showNotification(title, body) {\n            if (Notification.permission === 'granted' && navigator.serviceWorker.controller) {\n                navigator.serviceWorker.ready.then(reg => {\n                    reg.showNotification(title, { body: body, icon: '\/hd-manifest.json' });\n                });\n            }\n        }\n\n        \/\/ --- PWA Instalacja (Wzorowana na Portal Klasy) ---\n        let deferredPrompt;\n        const installBanner = document.getElementById('pwa-install-banner');\n        \n        window.addEventListener('beforeinstallprompt', (e) => {\n            e.preventDefault(); \n            deferredPrompt = e;\n            if(installBanner) {\n                installBanner.classList.remove('hidden');\n                installBanner.classList.add('flex');\n            }\n        });\n\n        window.hdInstallPWA = function() {\n            if (deferredPrompt) {\n                deferredPrompt.prompt();\n                deferredPrompt.userChoice.then((choiceResult) => {\n                    if (choiceResult.outcome === 'accepted') {\n                        installBanner.classList.add('hidden');\n                        installBanner.classList.remove('flex');\n                    }\n                    deferredPrompt = null;\n                });\n            }\n        };\n\n        const isIos = () => \/iphone|ipad|ipod\/.test(window.navigator.userAgent.toLowerCase());\n        const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);\n        \n        if (isIos() && !isInStandaloneMode()) {\n            const hint = document.getElementById('pwa-ios-install-hint');\n            if(hint) {\n                hint.classList.remove('hidden');\n                hint.classList.add('block');\n            }\n        }\n\n        if ('serviceWorker' in navigator) {\n            navigator.serviceWorker.register('\/hd-sw.js').catch(err => console.error('B\u0142\u0105d SW', err));\n        }\n\n        fetchLogs(); \n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":4,"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/julia.julsoft.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}