محاسبه سهم زمین و بودجه

I'll help you develop this code further. Based on the provided CSS file, I'll create a complete HTML template with JavaScript functionality for the landshare calculator. محاسبه سهم زمین و بودجه

محاسبه سهم زمین و بودجه

مساحت کل زمین (متر مربع):

تعداد واحدها:

بودجه کل (ریال):

شماره واحد	سهم از زمین (متر مربع)	سهم از بودجه (ریال)

خلاصه اطلاعات	مقدار
مساحت کل زمین	0 متر مربع
تعداد واحدها	0
بودجه کل	0 ریال

تاریخ: ${item.date} ${item.edited ? '(ویرایش شده)' : ''}

مساحت: ${item.landArea.toLocaleString()} متر مربع

واحدها: ${item.unitCount}

بودجه: ${item.totalBudget.toLocaleString()} ریال

سهم هر واحد: ${landShare} متر مربع / ${budgetShare} ریال

`; historyList.appendChild(historyItem); }); } function deleteHistoryItem(id) { let history = JSON.parse(localStorage.getItem('calculationHistory')) || []; history = history.filter(item => item.id !== id); localStorage.setItem('calculationHistory', JSON.stringify(history)); loadHistory(); } function clearHistory() { if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) { localStorage.removeItem('calculationHistory'); historyList.innerHTML = ''; } } function filterHistory() { const searchTerm = historySearch.value.toLowerCase(); const historyItems = document.querySelectorAll('.history-item'); historyItems.forEach(item => { const text = item.textContent.toLowerCase(); if (text.includes(searchTerm)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } // Make deleteHistoryItem available globally for onclick events window.deleteHistoryItem = deleteHistoryItem; }); /* Theme Name: landshare Theme URI: http://example.com Author: pouyan fazlali serkani Author URI: http://example.com Description: calculate landshare and budjet for land | apartemans Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: landshare */ @font-face { font-family: 'Vazir'; src: url('fonts/Vazir.woff2') format('woff2'); font-weight: 400; /* وزن معمولی */ font-style: normal; font-display: swap; } @font-face { font-family: 'Vazir'; src: url('fonts/Vazir-Medium.woff2') format('woff2'); font-weight: 500; /* وزن متوسط */ font-style: normal; font-display: swap; } @font-face { font-family: 'Vazir'; src: url('fonts/Vazir-Bold.woff2') format('woff2'); font-weight: 700; /* وزن بولد */ font-style: normal; font-display: swap; } :root { --bg: #f9fafb; --text: #111827; --box: #fff; --primary: #0ea5e9; --shadow: #cbd5e1; --primary-light: #d9f0ff; /* آبی کمرنگ هماهنگ */ --responsive :#b3dbff; } .dark-mode { --bg: #1e293b; --text: #f8fafc; --box: #334155; --primary: #38bdf8; --shadow: #475569; --primary-light: #264d73; /* نسخه ملایم‌تر برای حالت تاریک */ --responsive :#3b6a99; } body { font-family: 'Vazir', sans-serif; background-color: var(--bg); color: var(--text); padding: 2rem; transition: background-color 0.3s ease, color 0.3s ease; min-height: 100vh; box-sizing: border-box; } h1, h2 { text-align: center; margin-bottom: 1.5rem; font-family: 'Vazir', sans-serif; } .container { max-width: 90%; margin: auto; background: var(--box); padding: 1.5rem; border-radius: 12px; box-shadow: 0 0 10px var(--shadow); font-family: 'Vazir', sans-serif; border-bottom: 2px solid var(--primary-light); } .form-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; align-items: center; font-family: 'Vazir', sans-serif; } label { min-width: 160px; font-weight: 700; font-family: 'Vazir', sans-serif; } input[type="number"], input[type="text"] { flex: 1; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--shadow); font-size: 1rem; font-family: 'Vazir', sans-serif; } button { background-color: var(--primary); color: #fff; border: none; padding: 0.7rem 1.5rem; margin: 0.5rem; border-radius: 8px; font-size: 1rem; cursor: button; transition: all 0.3s ease; font-weight: bold; font-family: 'Vazir', sans-serif; } button:hover { opacity: 0.85; color: var(--primary); background-color: var(--box); border: 2px solid var(--primary); font-family: 'Vazir', sans-serif; } table { width: 100%; border-collapse: collapse; margin-top: 2rem; direction: rtl; font-family: 'Vazir', sans-serif; } th, td { padding: 0.75rem; border: 1px solid var(--shadow); text-align: center; font-family: 'Vazir', sans-serif; } th { background: var(--primary); color: #fff; font-weight: 700; font-family: 'Vazir', sans-serif; } .actions { text-align: center; margin-top: 2rem; font-family: 'Vazir', sans-serif; } .dark-toggle, .toggle-btn { position: fixed; top: 1rem; z-index: 999; border: none; background: var(--primary); color: white; border-radius: 8px; padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer; font-family: 'Vazir', sans-serif; } .dark-toggle { left: 1rem; } .toggle-btn { right: 1rem; } .toggle-btn .responsive-label { display: none; } .p-title { text-decoration: underline; font-weight: bold; font-size: 28px; background: linear-gradient(90deg, #9945FF, #0ea5e9, #14f195); background-size: 400% 400%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: animateGradient 3s ease infinite; text-align: center; font-family: 'Vazir', sans-serif; } @keyframes animateGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .responsive-table { font-family: 'Vazir', sans-serif; } .sidebar { position: fixed; top: 0; right: -100%; width: 300px; height: 100%; background: var(--box); box-shadow: -3px 0 10px rgba(0,0,0,0.3); transition: right 0.3s ease-in-out; z-index: 1000; padding: 20px; overflow-y: auto; font-family: 'Vazir', sans-serif; } .sidebar.active { right: 0; } .sidebar-header { margin-bottom: 20px; font-family: 'Vazir', sans-serif; } .sidebar-header input { width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid var(--shadow); border-radius: 6px; font-family: 'Vazir', sans-serif; } .clear-btn { background: #38bdf8; color: white; padding: 0.5rem 1rem; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; font-family: 'Vazir', sans-serif; } .history-list { max-height: calc(100vh - 150px); overflow-y: auto; } .history-item { background: var(--box); border: 1px solid var(--shadow); border-radius: 6px; margin-bottom: 10px; padding: 10px; position: relative; font-family: 'Vazir', sans-serif; } .delete-entry { position: absolute; font-family: 'Vazir', sans-serif; left: 8px; color:var(--primary); background-color: var(--box); font-size: 1rem; cursor: pointer; } .edited-label { font-size: 0.7em; color: #999; padding: 2px 4px; background: none; font-style: italic; display: inline-block; vertical-align: middle; font-family: 'Vazir', sans-serif; } .close-sidebar-btn { position: absolute; top: 25px; left: -15px; background: transparent; border: none; font-size: 20px; color: var(--primary); cursor: pointer; z-index: 1000; transition: color 0.2s; font-family: 'Vazir', sans-serif; } .close-sidebar-btn:hover { color: #fd0000; border: none; transition: color 0.2s; } .top-navbar { display: flex; justify-content: space-between; align-items: center; background-color: var(--bg); backdrop-filter: blur(10px); padding: 20px; border-bottom: 1px solid var(--primary); direction: rtl; opacity: 0.95; flex-wrap: nowrap; /* مهم: همیشه افقی */ overflow-x: auto; /* اگر عرض کم شد اسکرول افقی */ font-family: 'Vazir', sans-serif; } /* عنوان سایت */ .site-title { margin: 10px; font-size: 20px; font-weight: bold; color: var(--text); text-align: center; font-family: 'Vazir', sans-serif; white-space: nowrap; font-family: 'Vazir', sans-serif; } /* دکمه‌های چپ و راست */ .nav-left, .nav-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; font-family: 'Vazir', sans-serif; } /* دکمه‌ها */ .nav-left button, .nav-right button { background: var(--primary); color: white; border-radius: 8px; padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer; border: none; transition: background 0.2s ease-out; white-space: nowrap; font-family: 'Vazir', sans-serif; } /* لینک‌های منو */ .nav-links { list-style: none !important; display: flex; gap: 8px; margin: 0; padding: 0; justify-content: center; flex-wrap: nowrap; /* مهم: همیشه افقی */ font-family: 'Vazir', sans-serif; } .nav-links li a { text-decoration: none; list-style : none; color: var(--text); font-size: 15px; padding: 6px 8px; border-radius: 6px; transition: color 0.2s ease, background-color 0.2s ease-in; white-space: nowrap; /* جلوگیری از شکستن خط */ font-family: 'Vazir', sans-serif; } .nav-links li a:hover { color: white; background-color: var(--primary); } .nav-center { display: flex; align-items: center; gap: 10px; } .logo { height: 90px; /* یا 32px اگر کوچکتر می‌خوای */ vertical-align: middle; width: auto; background-color:transparent; } .site-footer { background: var(--box); /* مشکی شیک */ color: var(--text); max-width: 90%; margin: auto; padding: 1.5rem; border: 1px solid var(--box); border-radius: 12px; box-shadow: 0 0 10px var(--primary-light); font-family: 'Vazir', sans-serif; margin-top : 10rem; } .footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; font-family: 'Vazir', sans-serif; } .footer-column { flex: 1 1 250px; min-width: 220px; font-family: 'Vazir', sans-serif; } .footer-column h3 { color: var(--primary); font-size: 18px; margin-bottom: 15px; text-decoration: underline; font-family: 'Vazir', sans-serif; font-size: larger; } .footer-column p, .footer-column ul { font-size: 16px; line-height: 1.8; } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column ul li { margin-bottom: 8px; font-family: 'Vazir', sans-serif; } .footer-column ul li a { color: var(--text); text-decoration: none; transition: color 0.3s; font-family: 'Vazir', sans-serif; } .footer-column ul li a:hover { color: var(--text); transition: color 0.5s; font-size: large; border : none ; border-bottom: 2px solid var(--primary); } .social-icons { margin-top: 20px; } .social-icons a { display: inline-block; margin-right: 12px; font-size: 30px; color:var(--shadow); transition: color 0.3s; } .social-icons a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid var(--primary); margin-top: 30px; padding: 15px 10px; text-align: center; font-size: 13px; color: var(--primary); display: flex; justify-content: space-between; align-items: center; flex-wrap :wrap; gap : 10px; } .footer-column-contact{ color: var(--primary); font-size: 18px; margin-bottom: 15px; text-decoration: none; font-family: 'Vazir', sans-serif; margin-top : 15px; } .responsive-table { width: 100%; font-family: 'Vazir', sans-serif; } .responsive-table table{ width: 100%; border-collapse: collapse; font-family: 'Vazir', sans-serif; } .responsive-table th, .responsive-table td { border: 1px solid var(--shadow); padding: 8px; text-align: center; word-break: break-word; /* جلوگیری از بیرون‌زدن متن */ } .responsive-table input { width: 100%; box-sizing: border-box; background-color: #F0FBFF; } /* تمام ستون‌های واحد */ /* حالت موبایل: فقط کاهش سایز فونت */ /* ======== حالت تا 768 پیکسل ======== */ @media screen and (max-width: 767px) { .top-navbar { display: flex; flex-direction: column; /* عمودی بچینه کل ناوبری رو */ align-items: center; } @keyframes gradientSpin { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .toggle-btn .responsive-label { display: inline-block; /* فقط اندازه متن */ font-size: 30px; cursor: pointer; user-select: none; background: linear-gradient(90deg, #9945FF, #0ea5e9, #14f195); background-size: 600% 600%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientSpin 8s ease-in infinite; /* مدت زمان بیشتر و easing نرم‌تر */ padding: 0; margin: 0; width: auto; /* مهم */ } .full-label { display: none; } .nav-center { display: flex; flex-direction: column; align-items: center; order: 1; /* اول بیاد */ margin-bottom: 10px; } .nav-center .logo { order: 1; /* لوگو اول */ height: 80px; width: auto; margin-bottom: 8px; transition: transform 0.3s ease; } .nav-center .logo:hover { transform: scale(1.05); } .nav-center .site-title { order: 2; /* عنوان بعد از لوگو */ font-size: 28px; font-weight: 500; text-align: center; margin: 0; color :var(--primary); } /* دکمه‌های چپ و راست زیر عنوان */ .nav-left, .nav-right { order: 2; width: 100%; display: flex; justify-content: center; gap: 15px; margin-top: 12px; } /* دکمه‌ها هم اندازه */ .nav-left button, .nav-right button { padding:0; font-size: 1rem; border-radius: 10px; background-color : var(--bg); color:var(--primary); } /* حالت رسپانسیو کارت مانند جدول */ .responsive-table thead { display: none; /* هدر مخفی */ } .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; } .responsive-table tr { border: 2px solid var(--primary-light); margin-bottom: 10px; padding: 8px; display: block; border-radius : 10px; } .responsive-table td { display: flex; justify-content: flex-end; align-items: center; border: none; border-bottom: 1px solid #eee; padding: 6px 0; word-break: break-word; /* متن نشکنه بیرون */ } .responsive-table td::before { content: attr(data-label); font-weight: bold; flex: 1 1 20%; text-align: right; /* سمت شروع RTL */ direction : rtl; color: var(--primary); } .responsive-table td:last-child { border-bottom: none; } .responsive-table tbody tr:nth-child(even) { background-color: var(--primary-light); /* یا هر رنگی که خواستی */ } .responsive-table tbody tr:nth-child(odd) { background-color: var(--responsive); /* یا هر رنگی که خواستی */ } .responsive-table input { flex: 1 1 55%; /* ورودی عرض مجاز داشته باشه */ min-width: 100px; max-width: 100%; } .footer-bottom { flex-direction: column; justify-content: center; gap: 8px; } .footer-bottom > * { width: 100%; max-width: 100%; word-wrap: break-word; } #summary thead { display: none; } #summary, #summary tbody, #summary tr, #summary td { display: block; width: 100%; } #summary tr { border: 1px solid var(--primary-light); padding: 8px; background-color:var(--box); } #summary td { justify-content: right; align-items: center; border: none; padding: 6px 0; word-break: break-word; } #summary td::before { content: attr(data-label); font-weight: bold; flex: 1 1 40%; text-align: right; color: var(--primary); direction: rtl; } #summary td:first-child { background-color : var(--primary); } #summary td:last-child { background-color: var(--primary-light); /* رنگ پس‌زمینه ستون دوم */ } .nav-links { gap: 8px; /* فاصله کمتر */ padding: 0 5px; /* کمی padding چپ و راست */ justify-content: center; /* چپ چین (یا راست چین بر اساس جهت سایت) */ } .nav-links li a { font-size: 13px; /* فونت کوچکتر */ padding: 5px 8px; /* padding کمتر */ } /* ======== حالت تا 480 پیکسل ======== */ @media (max-width: 480px) { .footer-bottom { flex-direction: column; gap: 15px; } .footer-bottom ul.nav-links { flex-direction: column; gap: 10px; } .footer-bottom .social-icons { flex-direction: row; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 13px; padding: 0 10px; } } /* حالت چاپ */ @media print { .actions, .dark-toggle, .toggle-btn, .p-title { display: none !important; } .p-print { display: block; font-weight: bold; color: #414141; text-align: center; } table { border: 1px solid #000; } th, td { border: 1px solid #000; color: #000; } }