v3: таблица накоплений по дням + ежемесячный план

index.html

@@ -59,9 +59,10 @@ input:focus,select:focus{outline:2px solid var(--cyan);border-color:transparent}
 <h2>💰 Калькулятор накоплений</h2>
 <div class="card">
 <h3>Сколько можете откладывать в месяц?</h3>
-<input type="number" id="monthly" placeholder="Например: 30000" min="0" value="30000">
+<input type="number" id="monthly" placeholder="Например: 50000" min="0" value="50000">
 <h3>На какой срок?</h3>
 <select id="months">
+<option value="3">3 месяца</option>
 <option value="6">6 месяцев</option>
 <option value="12">12 месяцев (1 год)</option>
 <option value="18">18 месяцев (1.5 года)</option>
@@ -70,6 +71,7 @@ input:focus,select:focus{outline:2px solid var(--cyan);border-color:transparent}
 <h3>Уже есть накопления?</h3>
 <input type="number" id="initial" placeholder="Например: 50000" min="0" value="50000">
 <button class="btn" onclick="calculate()">Рассчитать</button>
+<button class="btn" onclick="showDailyTable()" style="margin-left:12px;background:var(--green);color:#fff">📊 Таблица по дням</button>
 
 <div class="result-box" id="result" style="display:none">
 <h3>💵 Итого накопите:</h3>
@@ -79,6 +81,13 @@ input:focus,select:focus{outline:2px solid var(--cyan);border-color:transparent}
 </p>
 </div>
 </div>
+
+<div id="dailyTable" class="card" style="display:none;margin-top:24px">
+<h3>📅 Таблица накоплений по дням и месяцам</h3>
+<p style="color:var(--gray-500);margin-bottom:16px">Откладывайте эту сумму ежедневно + 50 000 ₸ с зарплаты</p>
+<div id="tableContent"></div>
+</div>
+</div>
 </div>
 </section>
 
@@ -467,6 +476,42 @@ function calculate() {
   
   document.getElementById('result').style.display = 'block';
 }
+
+function showDailyTable() {
+  var monthly = parseFloat(document.getElementById('monthly').value) || 50000;
+  var months = parseInt(document.getElementById('months').value);
+  var initial = parseFloat(document.getElementById('initial').value) || 50000;
+  
+  var daily = Math.round(monthly / 30);
+  var tableHtml = '<div style="overflow-x:auto"><table style="width:100%;border-collapse:collapse;font-size:15px">';
+  tableHtml += '<tr style="background:var(--cyan-50)"><th style="padding:12px;border:1px solid #ddd">Месяц</th><th style="padding:12px;border:1px solid #ddd">Ежедневно</th><th style="padding:12px;border:1px solid #ddd">С зарплаты</th><th style="padding:12px;border:1px solid #ddd">Всего в месяц</th><th style="padding:12px;border:1px solid #ddd">Накоплено</th></tr>';
+  
+  var cumulative = initial;
+  for (var i = 1; i <= months; i++) {
+    var fromDaily = daily * 30;
+    var fromSalary = 50000;
+    var monthTotal = fromDaily + fromSalary;
+    cumulative += monthTotal;
+    
+    var rowColor = i % 2 === 0 ? '#fff' : '#f9f9f9';
+    tableHtml += '<tr style="background:' + rowColor + '">';
+    tableHtml += '<td style="padding:12px;border:1px solid #ddd;font-weight:700">' + i + ' мес.</td>';
+    tableHtml += '<td style="padding:12px;border:1px solid #ddd;color:var(--green)">' + daily.toLocaleString('ru-RU') + ' ₸</td>';
+    tableHtml += '<td style="padding:12px;border:1px solid #ddd;color:var(--cyan)">50 000 ₸</td>';
+    tableHtml += '<td style="padding:12px;border:1px solid #ddd;font-weight:700">' + monthTotal.toLocaleString('ru-RU') + ' ₸</td>';
+    tableHtml += '<td style="padding:12px;border:1px solid #ddd;font-weight:700;color:var(--ink)">' + cumulative.toLocaleString('ru-RU') + ' ₸</td>';
+    tableHtml += '</tr>';
+  }
+  
+  tableHtml += '</table></div>';
+  tableHtml += '<div style="margin-top:20px;padding:16px;background:var(--green);color:#fff;border-radius:8px">';
+  tableHtml += '<strong>💰 Итого за ' + months + ' мес.:</strong> ' + cumulative.toLocaleString('ru-RU') + ' ₸<br>';
+  tableHtml += '<small>Ежедневно: ' + daily.toLocaleString('ru-RU') + ' ₸ + с зарплаты: 50 000 ₸</small></div>';
+  
+  document.getElementById('tableContent').innerHTML = tableHtml;
+  document.getElementById('dailyTable').style.display = 'block';
+  document.getElementById('dailyTable').scrollIntoView({behavior:'smooth'});
+}
 </script>
 
 </body>