محاسبه گر حرفه ای آنلاین سقف کاذب

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>دکو منعم</title>

  <style>

    :root {

      --brand: #1f9d55;

      --brand-dark: #167c43;

      --bg: #f4f7f6;

      --text: #24303f;

      --muted: #64748b;

      --line: #e2e8f0;

      --soft: #f8fafc;

      --success: #f0fdf4;

    }

    * { box-sizing: border-box; }

    body {

      margin: 0;

      padding: 10px;

      background: var(--bg);

      font-family: Tahoma, Arial, sans-serif;

      color: var(--text);

      direction: rtl;

    }

    .app {

      max-width: 520px;

      margin: 0 auto;

      background: #fff;

      border-radius: 16px;

      overflow: hidden;

      box-shadow: 0 6px 22px rgba(15, 23, 42, 0.10);

    }

    .header {

      background: linear-gradient(135deg, var(--brand), var(--brand-dark));

      color: #fff;

      text-align: center;

      padding: 18px 14px 16px;

    }

    .logo {

      width: 54px;

      height: 54px;

      margin: 0 auto 8px;

      border-radius: 14px;

      background: rgba(255,255,255,.14);

      border: 1px solid rgba(255,255,255,.22);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 22px;

      font-weight: bold;

    }

    .header h1 {

      margin: 0;

      font-size: 22px;

    }

    .subtitle {

      margin-top: 4px;

      font-size: 12px;

      opacity: .92;

    }

    .content {

      padding: 15px;

    }

    .field {

      margin-bottom: 14px;

    }

    label {

      display: block;

      margin-bottom: 6px;

      font-size: 13px;

      color: #475569;

      font-weight: bold;

    }

    input[type="number"] {

      width: 100%;

      border: 1px solid #cbd5e1;

      border-radius: 10px;

      padding: 12px;

      font-size: 16px;

      outline: none;

      background: #fff;

    }

    input[type="number"]:focus {

      border-color: var(--brand);

      box-shadow: 0 0 0 3px rgba(31,157,85,.12);

    }

 

    .table-wrap {

      overflow-x: auto;

      margin-top: 18px;

    }

    table {

      width: 100%;

      border-collapse: collapse;

      table-layout: fixed;

      font-size: 11px;

    }

    th, td {

      border: 1px solid var(--line);

      text-align: center;

      vertical-align: middle;

      padding: 8px 4px;

    }

    th {

      background: var(--soft);

      color: #475569;

      line-height: 1.5;

    }

    th:nth-child(1) { width: 22%; }

    th:nth-child(2) { width: 18%; }

    th:nth-child(3) { width: 18%; }

    th:nth-child(4) { width: 22%; }

    th:nth-child(5) { width: 20%; }

 

    .input-price {

      width: 100%;

      min-width: 70px;

      padding: 7px 4px;

      font-size: 11px;

      text-align: center;

      border: 1px solid #cbd5e1;

      border-radius: 6px;

      outline: none;

    }

    .input-price:focus {

      border-color: var(--brand);

    }

    .unit-label {

      display: block;

      margin-top: 4px;

      font-size: 9px;

      color: var(--muted);

      line-height: 1.4;

    }

 

    .cell-title {

      display: block;

      font-size: 10px;

      color: var(--muted);

      margin-bottom: 2px;

    }

 

    .totals {

      margin-top: 16px;

      background: var(--success);

      border: 1px solid #dcfce7;

      border-radius: 12px;

      padding: 14px;

    }

    .row {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 10px;

      margin-bottom: 8px;

      font-size: 14px;

    }

    .row:last-child {

      margin-bottom: 0;

    }

    .grand {

      margin-top: 10px;

      padding-top: 10px;

      border-top: 1px solid #ccefd9;

      font-size: 18px;

      font-weight: bold;

      color: var(--brand-dark);

    }

 

    .notes-box {

      margin-top: 18px;

      background: #fffef7;

      border: 1px solid #fde68a;

      border-radius: 12px;

      padding: 14px;

    }

    .notes-title {

      font-size: 14px;

      font-weight: bold;

      color: #92400e;

      margin-bottom: 8px;

    }

    .notes-box p {

      margin: 0 0 8px 0;

      font-size: 12px;

      color: #4b5563;

      line-height: 1.9;

    }

    .notes-box p:last-child {

      margin-bottom: 0;

    }

    .phone {

      font-weight: bold;

      color: #111827;

      direction: ltr;

      unicode-bidi: embed;

      display: inline-block;

    }

 

    button {

      width: 100%;

      border: none;

      border-radius: 10px;

      padding: 14px;

      margin-top: 18px;

      font-size: 16px;

      font-weight: bold;

      cursor: pointer;

      background: var(--brand);

      color: #fff;

    }

    button:active {

      transform: scale(.995);

    }

  </style>

</head>

<body>

  <div class="app">

    <div class="header">

      <div class="logo">DM</div>

      <h1>دکو منعم</h1>

      <div class="subtitle">محاسبه‌گر سقف کاذب و برآورد متریال</div>

    </div>

 

    <div class="content">

      <div class="field">

        <label for="area">مساحت کل (مترمربع)</label>

        <input type="number" id="area" placeholder="مثلاً 50" oninput="calculate()">

      </div>

 

      <div class="field">

        <label for="perimeter">طول دیوار / محیط کل (متر)</label>

        <input type="number" id="perimeter" placeholder="مثلاً 30" oninput="calculate()">

      </div>

 

      <div class="table-wrap">

        <table>

          <thead>

            <tr>

              <th>کالا</th>

              <th>تعداد مورد نیاز</th>

              <th>مقدار مصرفی</th>

              <th>قیمت واحد</th>

              <th>جمع کل</th>

            </tr>

          </thead>

          <tbody>

            <tr id="row-tile">

              <td>تایل ۶۰×۶۰</td>

              <td class="qty-count">-</td>

              <td class="qty-meter"><span class="cell-title">متراژ مصرفی</span>-</td>

              <td>

                <input type="number" class="input-price" oninput="savePrice('tile', this.value)">

                <span class="unit-label">تومان / مترمربع</span>

              </td>

              <td class="total-val">۰</td>

            </tr>

            <tr id="row-s360">

              <td>سازه ۳.۶۰</td>

              <td class="qty-count">-</td>

              <td class="qty-meter"><span class="cell-title">طول کل</span>-</td>

              <td>

                <input type="number" class="input-price" oninput="savePrice('s360', this.value)">

                <span class="unit-label">تومان / متر</span>

              </td>

              <td class="total-val">۰</td>

            </tr>

            <tr id="row-s120">

              <td>سازه ۱.۲۰</td>

              <td class="qty-count">-</td>

              <td class="qty-meter"><span class="cell-title">طول کل</span>-</td>

              <td>

                <input type="number" class="input-price" oninput="savePrice('s120', this.value)">

                <span class="unit-label">تومان / متر</span>

              </td>

              <td class="total-val">۰</td>

            </tr>

            <tr id="row-s060">

              <td>سازه ۰.۶۰</td>

              <td class="qty-count">-</td>

              <td class="qty-meter"><span class="cell-title">طول کل</span>-</td>

              <td>

                <input type="number" class="input-price" oninput="savePrice('s060', this.value)">

                <span class="unit-label">تومان / متر</span>

              </td>

              <td class="total-val">۰</td>

            </tr>

            <tr id="row-angle">

              <td>نبشی L24</td>

              <td class="qty-count">-</td>

              <td class="qty-meter"><span class="cell-title">طول کل</span>-</td>

              <td>

                <input type="number" class="input-price" oninput="savePrice('angle', this.value)">

                <span class="unit-label">تومان / متر</span>

              </td>

              <td class="total-val">۰</td>

            </tr>

          </tbody>

        </table>

      </div>

 

      <div class="totals">

        <div class="row">

          <span>جمع متریال:</span>

          <span id="sumMat">۰ تومان</span>

        </div>

        <div class="row">

          <span>اجرت نصب:</span>

          <span id="sumLabor">۰ تومان</span>

        </div>

        <div class="row grand">

          <span>مبلغ نهایی:</span>

          <span id="grandTotal">۰ تومان</span>

        </div>

      </div>

 

      <div class="notes-box">

        <div class="notes-title">توضیحات مهم</div>

        <p>

          متراژ تایل و سازه‌ها به‌صورت تقریبی و نزدیک به مقدار واقعی محاسبه می‌شود، اما با توجه به نوع نقشه و نحوه چیدمان سازه‌ها ممکن است تعداد هر نوع سازه تغییر کند.

        </p>

        <p>

          برای مثال در یک کار ۲۵ متری، ممکن است یک نقشه ۷ شاخه سازه ۳.۶۰ و ۳۷ عدد سازه ۱.۲۰ نیاز داشته باشد و در نقشه‌ای دیگر ۴ شاخه سازه ۳.۶۰ و تعداد بیشتری سازه ۱.۲۰ استفاده شود، اما در مجموع مقدار کلی سازه مصرفی تقریباً نزدیک به هم خواهد بود.

        </p>

        <p>

          اگر مشتری تعداد دقیق مصالح را بخواهد، می‌تواند از طریق اپلیکیشن یا پیامک به شماره

          <span class="phone">09192288443</span>

          درخواست محاسبه دقیق بدهد.

        </p>

        <p>

          در صورتی که ارتفاع سقف بیشتر از ۳ متر باشد، هزینه نصب بیشتر خواهد شد.

        </p>

      </div>

 

      <button onclick="share()">اشتراک‌گذاری در واتساپ</button>

    </div>

  </div>

 

  <script>

    const ids = ['tile', 's360', 's120', 's060', 'angle'];

 

    window.onload = function () {

      ids.forEach(function(id) {

        const savedPrice = localStorage.getItem('p_' + id);

        if (savedPrice !== null) {

          const row = document.getElementById('row-' + id);

          row.querySelector('.input-price').value = savedPrice;

        }

      });

      calculate();

    };

 

    function formatMoney(value) {

      return Math.round(value).toLocaleString() + ' تومان';

    }

 

    function calculate() {

      const area = parseFloat(document.getElementById('area').value) || 0;

      const perimeter = parseFloat(document.getElementById('perimeter').value) || 0;

 

      const counts = {

        tile: Math.ceil((area / 0.36) * 1.05),

        s360: Math.ceil((area / 4.32) * 1.05),

        s120: Math.ceil((area / 1.44) * 1.05),

        s060: Math.ceil((area / 0.72) * 1.05),

        angle: Math.ceil((perimeter / 3) * 1.05)

      };

 

      const meters = {

        tile: (counts.tile * 0.36),

        s360: (counts.s360 * 3.6),

        s120: (counts.s120 * 1.2),

        s060: (counts.s060 * 0.6),

        angle: (counts.angle * 3)

      };

 

      const countSuffix = {

        tile: ' عدد',

        s360: ' شاخه',

        s120: ' شاخه',

        s060: ' شاخه',

        angle: ' شاخه'

      };

 

      const meterSuffix = {

        tile: ' مترمربع',

        s360: ' متر',

        s120: ' متر',

        s060: ' متر',

        angle: ' متر'

      };

 

      let sumMat = 0;

 

      ids.forEach(function(id) {

        const row = document.getElementById('row-' + id);

        const price = parseFloat(row.querySelector('.input-price').value) || 0;

        const total = meters[id] * price;

 

        sumMat += total;

 

        const titleHtml = id === 'tile'

          ? '<span class="cell-title">متراژ مصرفی</span>'

          : '<span class="cell-title">طول کل</span>';

 

        row.querySelector('.qty-count').innerText = counts[id] + countSuffix[id];

        row.querySelector('.qty-meter').innerHTML = titleHtml + meters[id].toFixed(id === 'tile' ? 2 : 1) + meterSuffix[id];

        row.querySelector('.total-val').innerText = Math.round(total).toLocaleString();

      });

 

      const labor = area * 200000;

      const grandTotal = sumMat + labor;

 

      document.getElementById('sumMat').innerText = formatMoney(sumMat);

      document.getElementById('sumLabor').innerText = formatMoney(labor);

      document.getElementById('grandTotal').innerText = formatMoney(grandTotal);

    }

 

    function savePrice(id, value) {

      localStorage.setItem('p_' + id, value);

      calculate();

    }

 

    function share() {

      const area = document.getElementById('area').value || 0;

      const perimeter = document.getElementById('perimeter').value || 0;

 

      let text = 'پیش فاکتور دکو منعم\n';

      text += 'مساحت کل: ' + area + ' مترمربع\n';

      text += 'طول دیوار / محیط کل: ' + perimeter + ' متر\n\n';

 

      ids.forEach(function(id) {

        const row = document.getElementById('row-' + id);

        const name = row.cells[0].innerText;

        const count = row.querySelector('.qty-count').innerText;

        const meter = row.querySelector('.qty-meter').innerText.replace(/\n/g, ' ');

        text += name + ': ' + count + ' | ' + meter + '\n';

      });

 

      text += '\nجمع متریال: ' +

document.getElementById('sumMat').innerText + '\n';

      text += 'اجرت نصب: ' + document.getElementById('sumLabor').innerText + '\n';

      text += 'مبلغ نهایی: ' + document.getElementById('grandTotal').innerText + '\n\n';

      text += 'توضیح: مقادیر تقریبی هستند و برای محاسبه دقیق می‌توانید پیامک ارسال کنید: 09192288443';

 

      window.open('https://wa.me/?text=' + encodeURIComponent(text), '_blank');

    }

  </script>

</body>

</html>