добавил историю расчётов

index.html

@@ -24,6 +24,15 @@ button:active{transform:scale(.98)}
 .result .detail{font-size:14px;color:#5B6573;margin-top:8px}
 .error{color:#e74c3c;font-size:14px;margin-top:8px;display:none}
 .error.show{display:block}
+.history{margin-top:32px;padding-top:24px;border-top:2px solid #e8eaed;display:none}
+.history.show{display:block}
+.history h3{font-size:15px;color:#5B6573;font-weight:600;margin-bottom:12px}
+.history-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;cursor:pointer;transition:.1s;font-size:15px}
+.history-item:hover{background:#f0f2f5}
+.history-item .h-port{font-weight:700}
+.history-item .h-result{color:#0088cc;font-weight:600}
+.history-item .h-copy{color:#9aa3b2;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:4px}
+.history-item .h-copy:hover{background:#d0d5dd;color:#0F1218}
 @media(max-width:480px){.card{padding:24px}h1{font-size:24px}input[type=number]{font-size:20px}}
 </style>
 </head>
@@ -41,12 +50,20 @@ button:active{transform:scale(.98)}
     <div class="big" id="output"></div>
     <div class="detail" id="detail"></div>
   </div>
+
+  <div class="history" id="history">
+    <h3>📋 История расчётов</h3>
+    <div id="historyList"></div>
+  </div>
 </div>
 
 <script>
 const PORTS_PER_CASSETTE = 16;
 const TOTAL_CASSETTES = 84;
 const TOTAL_PORTS = TOTAL_CASSETTES * PORTS_PER_CASSETTE;
+const MAX_HISTORY = 50;
+
+let history = JSON.parse(localStorage.getItem('portHistory')||'[]');
 
 function calc(){
   const input=document.getElementById('port');
@@ -72,9 +89,45 @@ function calc(){
   output.innerHTML=`${cassette} <span>кассета</span> — ${port} <span>порт</span>`;
   detail.textContent=`Кассета ${cassette}: порты ${firstPort}–${lastPort}`;
   result.classList.add('show');
+
+  addHistory(val,cassette,port,firstPort,lastPort);
+}
+
+function addHistory(portNum,cassette,port,firstPort,lastPort){
+  const entry={portNum,cassette,port,firstPort,lastPort,time:Date.now()};
+  history.unshift(entry);
+  if(history.length>MAX_HISTORY)history=history.slice(0,MAX_HISTORY);
+  localStorage.setItem('portHistory',JSON.stringify(history));
+  renderHistory();
+}
+
+function renderHistory(){
+  const el=document.getElementById('history');
+  const list=document.getElementById('historyList');
+  if(!history.length){el.classList.remove('show');return}
+  el.classList.add('show');
+  list.innerHTML=history.map((h,i)=>`
+    <div class="history-item" onclick="useHistory(${i})" title="Нажми чтобы вставить номер">
+      <span class="h-port">${h.portNum}</span>
+      <span class="h-result">${h.cassette} к — ${h.port} п</span>
+      <span class="h-copy" onclick="event.stopPropagation();copyResult(${i})" title="Копировать">📋</span>
+    </div>
+  `).join('');
+}
+
+function useHistory(i){
+  document.getElementById('port').value=history[i].portNum;
+  calc();
+}
+
+function copyResult(i){
+  const h=history[i];
+  const text=`${h.portNum} → ${h.cassette} кассета — ${h.port} порт`;
+  navigator.clipboard.writeText(text).catch(()=>{});
 }
 
 document.getElementById('port').addEventListener('keydown',e=>{if(e.key==='Enter')calc()});
+renderHistory();
 </script>
 </body>
 </html>