{"id":3566,"date":"2025-10-16T23:51:29","date_gmt":"2025-10-16T16:51:29","guid":{"rendered":"https:\/\/cellbio.site\/?page_id=3566"},"modified":"2025-10-16T23:57:00","modified_gmt":"2025-10-16T16:57:00","slug":"li","status":"publish","type":"page","link":"https:\/\/cellbio.site\/en\/li\/","title":{"rendered":"Smart Household Account Book"},"content":{"rendered":"
\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 - \ud604\uae08 & \uacc4\uc88c \ud1b5\ud569 \uad00\ub9ac<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --primary: #4361ee;\r\n --secondary: #3f37c9;\r\n --success: #4cc9f0;\r\n --light: #f8f9fa;\r\n --dark: #212529;\r\n --warning: #f72585;\r\n --gray: #6c757d;\r\n --light-gray: #e9ecef;\r\n --card-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n --transition: all 0.3s ease;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', 'Roboto', 'Noto Sans KR', sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f5f7fb;\r\n color: var(--dark);\r\n padding-bottom: 60px;\r\n }\r\n \r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 15px;\r\n }\r\n \r\n \/* \ud5e4\ub354 \uc2a4\ud0c0\uc77c *\/\r\n header {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n color: white;\r\n padding: 1rem 0;\r\n box-shadow: var(--card-shadow);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n \r\n .header-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n \r\n .logo i {\r\n font-size: 2rem;\r\n }\r\n \r\n .logo h1 {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n }\r\n \r\n .date-display {\r\n background: rgba(255, 255, 255, 0.15);\r\n padding: 8px 16px;\r\n border-radius: 30px;\r\n font-size: 1rem;\r\n }\r\n \r\n \/* \ub124\ube44\uac8c\uc774\uc158 *\/\r\n nav ul {\r\n display: flex;\r\n list-style: none;\r\n gap: 20px;\r\n }\r\n \r\n nav a {\r\n color: white;\r\n text-decoration: none;\r\n font-weight: 500;\r\n padding: 8px 12px;\r\n border-radius: 6px;\r\n transition: var(--transition);\r\n }\r\n \r\n nav a:hover, nav a.active {\r\n background: rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* \uba54\uc778 \ucf58\ud150\uce20 *\/\r\n main {\r\n padding: 2rem 0;\r\n }\r\n \r\n \/* \uce74\ub4dc \uc704\uc82f *\/\r\n .card {\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: var(--card-shadow);\r\n padding: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n transition: var(--transition);\r\n }\r\n \r\n .card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n \r\n .card-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 1.25rem;\r\n padding-bottom: 0.75rem;\r\n border-bottom: 1px solid var(--light-gray);\r\n }\r\n \r\n .card-title {\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n \r\n .card-title i {\r\n margin-right: 10px;\r\n color: var(--primary);\r\n }\r\n \r\n \/* \uacc4\uc88c \uc694\uc57d *\/\r\n .account-summary {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 1.5rem;\r\n }\r\n \r\n .account-card {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n \r\n .account-icon {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n }\r\n \r\n .cash-icon { background: linear-gradient(135deg, #4ade80, #22c55e); color: white; }\r\n .corporate-icon { background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white; }\r\n .personal-icon { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }\r\n \r\n .account-info h3 {\r\n font-size: 1.1rem;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .account-balance {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n }\r\n \r\n .positive { color: #10b981; }\r\n .negative { color: #ef4444; }\r\n \r\n \/* \ucc28\ud2b8 *\/\r\n .chart-container {\r\n height: 300px;\r\n position: relative;\r\n }\r\n \r\n \/* \ud14c\uc774\ube14 *\/\r\n .table-responsive {\r\n overflow-x: auto;\r\n }\r\n \r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n }\r\n \r\n thead th {\r\n background-color: var(--light-gray);\r\n padding: 12px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--gray);\r\n }\r\n \r\n tbody tr {\r\n border-bottom: 1px solid var(--light-gray);\r\n }\r\n \r\n tbody tr:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n tbody td {\r\n padding: 12px 15px;\r\n color: var(--dark);\r\n }\r\n \r\n tbody tr:hover {\r\n background-color: rgba(67, 97, 238, 0.05);\r\n }\r\n \r\n .transaction-income {\r\n color: #10b981;\r\n font-weight: 500;\r\n }\r\n \r\n .transaction-expense {\r\n color: #ef4444;\r\n font-weight: 500;\r\n }\r\n \r\n \/* \ubc84\ud2bc *\/\r\n .btn {\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n border: none;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .btn-primary {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n \r\n .btn-primary:hover {\r\n background: var(--secondary);\r\n transform: translateY(-2px);\r\n }\r\n \r\n .btn-outline-primary {\r\n background: transparent;\r\n border: 1px solid var(--primary);\r\n color: var(--primary);\r\n }\r\n \r\n .btn-outline-primary:hover {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n \r\n .btn-group {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n \r\n \/* \ud3fc *\/\r\n .form-group {\r\n margin-bottom: 1.25rem;\r\n }\r\n \r\n .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n color: var(--dark);\r\n }\r\n \r\n .form-control {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 1px solid var(--light-gray);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n transition: var(--transition);\r\n }\r\n \r\n .form-control:focus {\r\n border-color: var(--primary);\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);\r\n }\r\n \r\n .form-row {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 1rem;\r\n }\r\n \r\n .form-select {\r\n padding: 12px 15px;\r\n border: 1px solid var(--light-gray);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n \/* \uacc4\ud68d \uc785\ub825 *\/\r\n .plan-input {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n \r\n .plan-amount {\r\n flex: 1;\r\n min-width: 120px;\r\n }\r\n \r\n \/* \ud478\ud130 *\/\r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n color: var(--gray);\r\n font-size: 0.9rem;\r\n margin-top: 2rem;\r\n }\r\n \r\n \/* \ubaa8\ubc14\uc77c \uba54\ub274 *\/\r\n .mobile-menu-btn {\r\n display: none;\r\n background: transparent;\r\n border: none;\r\n color: white;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n }\r\n \r\n \/* \ubc18\uc751\ud615 \ub514\uc790\uc778 *\/\r\n @media (max-width: 768px) {\r\n .header-content {\r\n flex-wrap: wrap;\r\n }\r\n \r\n .logo {\r\n width: 100%;\r\n justify-content: center;\r\n margin-bottom: 1rem;\r\n }\r\n \r\n nav ul {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n \r\n .mobile-menu-btn {\r\n display: block;\r\n position: absolute;\r\n top: 20px;\r\n right: 15px;\r\n }\r\n \r\n nav {\r\n position: relative;\r\n }\r\n \r\n nav ul {\r\n display: none;\r\n position: absolute;\r\n top: 60px;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n flex-direction: column;\r\n padding: 1rem;\r\n border-radius: 0 0 16px 16px;\r\n box-shadow: 0 10px 15px rgba(0,0,0,0.1);\r\n }\r\n \r\n nav ul.show {\r\n display: flex;\r\n }\r\n \r\n nav a {\r\n color: var(--dark);\r\n display: block;\r\n padding: 12px;\r\n border-radius: 8px;\r\n }\r\n \r\n .account-summary {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .btn-group {\r\n flex-direction: column;\r\n }\r\n }\r\n \r\n \/* \uc5d1\uc140 \ub0b4\ubcf4\ub0b4\uae30 \ubc84\ud2bc *\/\r\n .export-btn {\r\n background: var(--success);\r\n color: white;\r\n }\r\n \r\n .export-btn:hover {\r\n background: #38b2ac;\r\n }\r\n \r\n .export-btn i {\r\n font-size: 1.2rem;\r\n }\r\n \r\n \/* \uc54c\ub9bc *\/\r\n .notification {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n padding: 15px 25px;\r\n background: white;\r\n border-radius: 12px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n transform: translateY(100px);\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n z-index: 1000;\r\n }\r\n \r\n .notification.show {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n \r\n .notification.success {\r\n border-left: 4px solid var(--success);\r\n }\r\n \r\n .notification.error {\r\n border-left: 4px solid var(--warning);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- \uc54c\ub9bc -->\r\n <div class=\"notification\" id=\"notification\">\r\n <div class=\"notification-content\"><\/div>\r\n <\/div>\r\n \r\n <!-- \ud5e4\ub354 -->\r\n <header>\r\n <div class=\"container\">\r\n <div class=\"header-content\">\r\n <div class=\"logo\">\r\n <i class=\"fas fa-wallet\"><\/i>\r\n <h1>Smart Household Account Book<\/h1>\r\n <\/div>\r\n <div class=\"date-display\">\r\n <i class=\"far fa-calendar-alt\"><\/i>\r\n <span id=\"current-date\">October 15, 2023<\/span>\r\n <\/div>\r\n <button class=\"mobile-menu-btn\" id=\"mobile-menu-btn\">\r\n <i class=\"fas fa-bars\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <nav>\r\n <ul id=\"nav-menu\">\r\n <li><a href=\"#\" class=\"active\"><i class=\"fas fa-home\"><\/i> Dashboard<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-history\"><\/i> Transaction history<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-chart-bar\"><\/i> Expenditure Analysis<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-tasks\"><\/i> Planning Management<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-file-export\"><\/i> Export data<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n \r\n <!-- \uba54\uc778 \ucf58\ud150\uce20 -->\r\n <main class=\"container\">\r\n <!-- \uacc4\uc88c \uc694\uc57d -->\r\n <section class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-university\"><\/i> Account Summary<\/h2>\r\n <div>\r\n <span>Real-time updates<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-summary\">\r\n <div class=\"account-card\">\r\n <div class=\"account-icon cash-icon\">\r\n <i class=\"fas fa-money-bill-wave\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>cash<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 1,250,000<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-card\">\r\n <div class=\"account-icon corporate-icon\">\r\n <i class=\"fas fa-building\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>corporate account<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 8,750,300<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-card\">\r\n <div class=\"account-icon personal-icon\">\r\n <i class=\"fas fa-user\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>personal account<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 3,420,500<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-card\">\r\n <div class=\"account-icon\" style=\"background: linear-gradient(135deg, #6b7280, #4b5563); color: white;\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>Total assets<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 13,420,800<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n <!-- \ub300\uc2dc\ubcf4\ub4dc -->\r\n <section class=\"row\">\r\n <div class=\"col-md-8\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-chart-bar\"><\/i> Recent spending trends<\/h2>\r\n <div>\r\n <select class=\"form-select\">\r\n <option>Last 7 days<\/option>\r\n <option>This month<\/option>\r\n <option>Last month<\/option>\r\n <option>3 months<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"expenseChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-history\"><\/i> Recent Transaction History<\/h2>\r\n <div>\r\n <a href=\"#\" class=\"btn btn-outline-primary\"><i class=\"fas fa-plus\"><\/i> Add Transaction<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n <th>date<\/th>\r\n <th>account<\/th>\r\n <th>category<\/th>\r\n <th>detail<\/th>\r\n <th>amount<\/th>\r\n <th>Balance<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>2023-10-15<\/td>\r\n <td><i class=\"fas fa-building corporate-icon\"><\/i> corporate account<\/td>\r\n <td><span class=\"transaction-expense\">Withdrawal<\/span><\/td>\r\n <td>Purchase office supplies<\/td>\r\n <td>\u20a9 120,000<\/td>\r\n <td>\u20a9 8,750,300<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-14<\/td>\r\n <td><i class=\"fas fa-money-bill-wave cash-icon\"><\/i> cash<\/td>\r\n <td><span class=\"transaction-expense\">Withdrawal<\/span><\/td>\r\n <td>lunch<\/td>\r\n <td>\u20a9 12,000<\/td>\r\n <td>\u20a9 1,250,000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-13<\/td>\r\n <td><i class=\"fas fa-user personal-icon\"><\/i> personal account<\/td>\r\n <td><span class=\"transaction-income\">Deposit<\/span><\/td>\r\n <td>salary<\/td>\r\n <td>\u20a9 3,200,000<\/td>\r\n <td>\u20a9 3,420,500<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-12<\/td>\r\n <td><i class=\"fas fa-building corporate-icon\"><\/i> corporate account<\/td>\r\n <td><span class=\"transaction-expense\">Withdrawal<\/span><\/td>\r\n <td>rental fee<\/td>\r\n <td>\u20a9 750,000<\/td>\r\n <td>\u20a9 8,870,300<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-10<\/td>\r\n <td><i class=\"fas fa-user personal-icon\"><\/i> personal account<\/td>\r\n <td><span class=\"transaction-expense\">Withdrawal<\/span><\/td>\r\n <td>Communication costs<\/td>\r\n <td>\u20a9 110,000<\/td>\r\n <td>\u20a9 220,500<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"col-md-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-tasks\"><\/i> Spending plan<\/h2>\r\n <div>\r\n <a href=\"#\" class=\"btn btn-outline-primary\"><i class=\"fas fa-plus\"><\/i> Add a plan<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n <th>item<\/th>\r\n <th>category<\/th>\r\n <th>amount<\/th>\r\n <th>Remaining work<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Food expenses<\/td>\r\n <td>weekly<\/td>\r\n <td>\u20a9 200,000<\/td>\r\n <td>2 days<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Transportation expenses<\/td>\r\n <td>Monthly<\/td>\r\n <td>\u20a9 100,000<\/td>\r\n <td>15th<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Cultural life<\/td>\r\n <td>Monthly<\/td>\r\n <td>\u20a9 150,000<\/td>\r\n <td>10 days<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>savings<\/td>\r\n <td>Monthly<\/td>\r\n <td>\u20a9 500,000<\/td>\r\n <td>25th<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>condolence money<\/td>\r\n <td>Monthly<\/td>\r\n <td>\u20a9 300,000<\/td>\r\n <td>20th<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-plus-circle\"><\/i> Add a new transaction<\/h2>\r\n <\/div>\r\n <form action=\"\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"date\">date<\/label>\r\n <input type=\"date\" class=\"form-control\" id=\"date\" value=\"2023-10-15\">\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"account\">account<\/label>\r\n <select class=\"form-control\" id=\"account\">\r\n <option>cash<\/option>\r\n <option>corporate account<\/option>\r\n <option>personal account<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-row\">\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"type\">category<\/label>\r\n <select class=\"form-control\" id=\"type\">\r\n <option>Deposit<\/option>\r\n <option>Withdrawal<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"amount\">amount<\/label>\r\n <input type=\"number\" class=\"form-control\" id=\"amount\" placeholder=\"Enter amount\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"description\">detail<\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"description\" placeholder=\"Transaction details\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"category\">Category<\/label>\r\n <select class=\"form-control\" id=\"category\">\r\n <option>Food expenses<\/option>\r\n <option>traffic<\/option>\r\n <option>culture<\/option>\r\n <option>education<\/option>\r\n <option>medical treatment<\/option>\r\n <option>congratulatory and condolence messages<\/option>\r\n <option>savings<\/option>\r\n <option>etc<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button type=\"submit\" class=\"btn btn-primary btn-block\">\r\n <i class=\"fas fa-plus\"><\/i> Add Transaction\r\n <\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-file-export\"><\/i> Export data<\/h2>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p>All data entered so far can be exported to an Excel file.<\/p>\r\n <div class=\"btn-group\">\r\n <button class=\"btn export-btn\" id=\"export-transactions\">\r\n <i class=\"fas fa-file-excel\"><\/i> Export transaction history\r\n <\/button>\r\n <button class=\"btn export-btn\" id=\"export-plans\">\r\n <i class=\"fas fa-file-excel\"><\/i> Export plan details\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n \r\n <!-- \ud478\ud130 -->\r\n <footer>\r\n <div class=\"container\">\r\n <p>\u00a9 2023 Smart Household Account Book | Real-time financial management solution | Available on both PC and mobile<\/p>\r\n <p>Data is stored locally in your browser and is optimized for privacy.<\/p>\r\n <\/div>\r\n <\/footer>\r\n \r\n <script>\r\n \/\/ \ud604\uc7ac \ub0a0\uc9dc \ud45c\uc2dc\r\n const currentDate = document.getElementById('current-date');\r\n const options = { year: 'numeric', month: 'long', day: 'numeric' };\r\n currentDate.textContent = new Date().toLocaleDateString('ko-KR', options);\r\n \r\n \/\/ \ubaa8\ubc14\uc77c \uba54\ub274 \ud1a0\uae00\r\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\r\n const navMenu = document.getElementById('nav-menu');\r\n \r\n mobileMenuBtn.addEventListener('click', () => {\r\n navMenu.classList.toggle('show');\r\n });\r\n \r\n \/\/ \uc54c\ub9bc \uae30\ub2a5\r\n function showNotification(message, type) {\r\n const notification = document.getElementById('notification');\r\n const notificationContent = document.querySelector('.notification-content');\r\n \r\n notificationContent.textContent = message;\r\n notification.className = `notification ${type} show`;\r\n \r\n setTimeout(() => {\r\n notification.classList.remove('show');\r\n }, 3000);\r\n }\r\n \r\n \/\/ \uac70\ub798\ub0b4\uc5ed \uc5d1\uc140 \ub0b4\ubcf4\ub0b4\uae30\r\n document.getElementById('export-transactions').addEventListener('click', () => {\r\n \/\/ \uc0d8\ud50c \ub370\uc774\ud130 (\uc2e4\uc81c \uc0ac\uc6a9 \uc2dc\uc5d0\ub294 \ub85c\uceec\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0\uc11c \ubd88\ub7ec\uc640\uc57c \ud568)\r\n const transactions = [\r\n { date: \"2023-10-15\", account: \"\ubc95\uc778 \uacc4\uc88c\", type: \"\ucd9c\uae08\", description: \"\uc0ac\ubb34\uc6a9\ud488 \uad6c\ub9e4\", amount: 120000, balance: 8750300 },\r\n { date: \"2023-10-14\", account: \"\ud604\uae08\", type: \"\ucd9c\uae08\", description: \"\uc810\uc2ec \uc2dd\uc0ac\", amount: 12000, balance: 1250000 },\r\n { date: \"2023-10-13\", account: \"\uac1c\uc778 \uacc4\uc88c\", type: \"\uc785\uae08\", description: \"\uc6d4\uae09\", amount: 3200000, balance: 3420500 },\r\n { date: \"2023-10-12\", account: \"\ubc95\uc778 \uacc4\uc88c\", type: \"\ucd9c\uae08\", description: \"\ub80c\ud0c8\ube44\", amount: 750000, balance: 8870300 },\r\n { date: \"2023-10-10\", account: \"\uac1c\uc778 \uacc4\uc88c\", type: \"\ucd9c\uae08\", description: \"\ud1b5\uc2e0\ube44\", amount: 110000, balance: 220500 }\r\n ];\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \uc0dd\uc131\r\n const ws = XLSX.utils.json_to_sheet(transactions);\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, \"\uac70\ub798\ub0b4\uc5ed\");\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc\r\n XLSX.writeFile(wb, \"smart_account_book_transactions.xlsx\");\r\n showNotification(\"\uac70\ub798\ub0b4\uc5ed\uc774 \uc5d1\uc140 \ud30c\uc77c\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\", \"success\");\r\n });\r\n \r\n \/\/ \uacc4\ud68d\ub0b4\uc5ed \uc5d1\uc140 \ub0b4\ubcf4\ub0b4\uae30\r\n document.getElementById('export-plans').addEventListener('click', () => {\r\n \/\/ \uc0d8\ud50c \ub370\uc774\ud130 (\uc2e4\uc81c \uc0ac\uc6a9 \uc2dc\uc5d0\ub294 \ub85c\uceec\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0\uc11c \ubd88\ub7ec\uc640\uc57c \ud568)\r\n const plans = [\r\n { item: \"\uc2dd\ube44\", type: \"\uc8fc\uac04\", amount: 200000, dueDate: \"2023-10-20\", remainingDays: 5 },\r\n { item: \"\uad50\ud1b5\ube44\", type: \"\uc6d4\uac04\", amount: 100000, dueDate: \"2023-10-31\", remainingDays: 16 },\r\n { item: \"\ubb38\ud654\uc0dd\ud65c\", type: \"\uc6d4\uac04\", amount: 150000, dueDate: \"2023-10-25\", remainingDays: 10 },\r\n { item: \"\uc800\ucd95\", type: \"\uc6d4\uac04\", amount: 500000, dueDate: \"2023-10-31\", remainingDays: 16 },\r\n { item: \"\uacbd\uc870\uc0ac\ube44\", type: \"\uc6d4\uac04\", amount: 300000, dueDate: \"2023-10-30\", remainingDays: 15 }\r\n ];\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \uc0dd\uc131\r\n const ws = XLSX.utils.json_to_sheet(plans);\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, \"\uacc4\ud68d\ub0b4\uc5ed\");\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc\r\n XLSX.writeFile(wb, \"smart_account_book_plans.xlsx\");\r\n showNotification(\"\uacc4\ud68d\ub0b4\uc5ed\uc774 \uc5d1\uc140 \ud30c\uc77c\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\", \"success\");\r\n });\r\n \r\n \/\/ \ucc28\ud2b8 \ucd08\uae30\ud654\r\n const ctx = document.getElementById('expenseChart').getContext('2d');\r\n const expenseChart = new Chart(ctx, {\r\n type: 'line',\r\n data: {\r\n labels: ['10\/09', '10\/10', '10\/11', '10\/12', '10\/13', '10\/14', '10\/15'],\r\n datasets: [{\r\n label: '\uc77c\uc77c \uc9c0\ucd9c',\r\n data: [25000, 42000, 18000, 95000, 32000, 12000, 0],\r\n borderColor: '#4361ee',\r\n backgroundColor: 'rgba(67, 97, 238, 0.1)',\r\n borderWidth: 3,\r\n tension: 0.3,\r\n fill: true\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n grid: {\r\n color: 'rgba(0,0,0,0.05)'\r\n }\r\n },\r\n x: {\r\n grid: {\r\n display: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ \uac70\ub798 \ucd94\uac00 \ud3fc\r\n const transactionForm = document.querySelector('form');\r\n transactionForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n \/\/ \uc785\ub825 \uac12 \uac00\uc838\uc624\uae30\r\n const date = document.getElementById('date').value;\r\n const account = document.getElementById('account').value;\r\n const type = document.getElementById('type').value;\r\n const amount = document.getElementById('amount').value;\r\n const description = document.getElementById('description').value;\r\n const category = document.getElementById('category').value;\r\n \r\n \/\/ \uc720\ud6a8\uc131 \uac80\uc0ac\r\n if (!amount || amount <= 0) {\r\n showNotification(\"\uae08\uc561\uc744 \uc62c\ubc14\ub974\uac8c \uc785\ub825\ud574\uc8fc\uc138\uc694.\", \"error\");\r\n return;\r\n }\r\n \r\n if (!description) {\r\n showNotification(\"\uac70\ub798 \ub0b4\uc6a9\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.\", \"error\");\r\n return;\r\n }\r\n \r\n \/\/ TODO: \uc2e4\uc81c\ub85c\ub294 localStorage\uc5d0 \uc800\uc7a5\ud558\ub294 \ub85c\uc9c1\uc774 \ub4e4\uc5b4\uac00\uc57c \ud568\r\n showNotification(\"\uac70\ub798\uac00 \uc815\uc0c1\uc801\uc73c\ub85c \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\", \"success\");\r\n \r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n transactionForm.reset();\r\n });\r\n <\/script>\r\n<\/body>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 – \ud604\uae08 & \uacc4\uc88c \ud1b5\ud569 \uad00\ub9ac \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 2023\ub144 10\uc6d4 15\uc77c \ub300\uc2dc\ubcf4\ub4dc \uac70\ub798\ub0b4\uc5ed \uc9c0\ucd9c\ubd84\uc11d \uacc4\ud68d\uad00\ub9ac \ub370\uc774\ud130 \ub0b4\ubcf4\ub0b4\uae30 \uacc4\uc88c \uc694\uc57d \uc2e4\uc2dc\uac04 \uc5c5\ub370\uc774\ud2b8 \ud604\uae08 \u20a9 1,250,000 \ubc95\uc778 \uacc4\uc88c \u20a9 8,750,300 \uac1c\uc778 \uacc4\uc88c \u20a9 3,420,500 \ucd1d \uc790\uc0b0 \u20a9 13,420,800 \ucd5c\uadfc \uc9c0\ucd9c \ucd94\uc774 \uc9c0\ub09c 7\uc77c\uc774\ubc88 \ub2ec\uc9c0\ub09c \ub2ec3\uac1c\uc6d4 \ucd5c\uadfc \uac70\ub798\ub0b4\uc5ed \uac70\ub798 \ucd94\uac00 \uc77c\uc790 \uacc4\uc88c \uc720\ud615 \ub0b4\uc6a9 \uae08\uc561 \uc794\uc561 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3566","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/pages\/3566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/comments?post=3566"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/pages\/3566\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/media?parent=3566"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.site\/en\/wp-json\/wp\/v2\/wf_page_folders?post=3566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}