add clear history with confirm + action log

index.html

@@ -144,18 +144,23 @@
     </div>
     
     <div class="translator-demo">
-      <div class="lang-selector">
-        <select id="sourceLang" class="kt-ai-select">
-          <option value="ru">Русский</option>
-          <option value="kk">Қазақша</option>
-          <option value="en">English</option>
-        </select>
-        <span class="lang-arrow">→</span>
-        <select id="targetLang" class="kt-ai-select">
-          <option value="kk">Қазақша</option>
-          <option value="ru">Русский</option>
-          <option value="en">English</option>
-        </select>
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--kt-ai-space-4);">
+        <div class="lang-selector" style="margin-bottom: 0;">
+          <select id="sourceLang" class="kt-ai-select">
+            <option value="ru">Русский</option>
+            <option value="kk">Қазақша</option>
+            <option value="en">English</option>
+          </select>
+          <span class="lang-arrow">→</span>
+          <select id="targetLang" class="kt-ai-select">
+            <option value="kk">Қазақша</option>
+            <option value="ru">Русский</option>
+            <option value="en">English</option>
+          </select>
+        </div>
+        <button id="clearHistoryBtn" class="kt-ai-btn" data-variant="ghost" data-size="sm" title="Очистить историю">
+          🗑️ Очистить
+        </button>
       </div>
       
       <div class="kt-ai-field">
@@ -175,6 +180,13 @@
           <span style="color: var(--kt-ai-fg-muted)">Здесь появится перевод...</span>
         </div>
       </div>
+      
+      <div style="margin-top: var(--kt-ai-space-6); padding-top: var(--kt-ai-space-4); border-top: 1px solid var(--kt-ai-border);">
+        <h4 style="margin-bottom: var(--kt-ai-space-3);">📋 Журнал действий</h4>
+        <div id="logBox" class="result-box" style="min-height: 60px; max-height: 200px; overflow-y: auto;">
+          <span style="color: var(--kt-ai-fg-muted)">История пуста...</span>
+        </div>
+      </div>
     </div>
   </div>
 </section>
@@ -329,6 +341,65 @@ function saveData(input, source, target, result) {
   localStorage.setItem('translatorSourceLang', source);
   localStorage.setItem('translatorTargetLang', target);
   localStorage.setItem('translatorResult', result);
+  
+  // Запись в журнал
+  addToLog('Перевод', source + ' → ' + target, input.substring(0, 50) + (input.length > 50 ? '...' : ''));
+}
+
+// Добавление записи в журнал
+function addToLog(action, details, data) {
+  const logs = JSON.parse(localStorage.getItem('translatorLog') || '[]');
+  logs.unshift({
+    action: action,
+    details: details,
+    data: data,
+    timestamp: new Date().toISOString()
+  });
+  // Храним последние 20 записей
+  if (logs.length > 20) logs.pop();
+  localStorage.setItem('translatorLog', JSON.stringify(logs));
+  renderLog();
+}
+
+// Отображение журнала
+function renderLog() {
+  const logBox = document.getElementById('logBox');
+  const logs = JSON.parse(localStorage.getItem('translatorLog') || '[]');
+  
+  if (logs.length === 0) {
+    logBox.innerHTML = '<span style="color: var(--kt-ai-fg-muted)">История пуста...</span>';
+    return;
+  }
+  
+  const langNames = { ru: 'Русский', kk: 'Қазақша', en: 'English' };
+  logBox.innerHTML = logs.map(function(log) {
+    var date = new Date(log.timestamp);
+    var time = date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
+    return '<div style="padding: var(--kt-ai-space-2) 0; border-bottom: 1px solid var(--kt-ai-border); font-size: var(--kt-ai-text-sm);">' +
+      '<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">' +
+        '<strong>' + log.action + '</strong>' +
+        '<span style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs);">' + time + '</span>' +
+      '</div>' +
+      '<div style="color: var(--kt-ai-fg-muted);">' + log.details + ': ' + log.data + '</div>' +
+    '</div>';
+  }).join('');
+}
+
+// Очистка истории
+function clearHistory() {
+  if (confirm('Вы уверены, что хотите очистить всю историю переводов? Это действие нельзя отменить.')) {
+    localStorage.removeItem('translatorInput');
+    localStorage.removeItem('translatorSourceLang');
+    localStorage.removeItem('translatorTargetLang');
+    localStorage.removeItem('translatorResult');
+    localStorage.removeItem('translatorLog');
+    
+    document.getElementById('inputText').value = '';
+    document.getElementById('resultBox').innerHTML = '<span style="color: var(--kt-ai-fg-muted)">Здесь появится перевод...</span>';
+    document.getElementById('logBox').innerHTML = '<span style="color: var(--kt-ai-fg-muted)">История пуста...</span>';
+    
+    addToLog('Очистка', 'История', 'Все данные удалены');
+  }
 }
 
 // Функция перевода
@@ -413,6 +484,9 @@ document.getElementById('contactForm').addEventListener('submit', function(e) {
   });
   localStorage.setItem('contactLeads', JSON.stringify(leads));
   
+  // Запись в журнал
+  addToLog('Заявка', name, phone + (company ? ' | ' + company : ''));
+  
   // Показ сообщения об успехе
   document.getElementById('contactForm').style.display = 'none';
   document.getElementById('successMessage').classList.add('show');
@@ -426,8 +500,10 @@ document.getElementById('contactForm').addEventListener('submit', function(e) {
 // Инициализация
 document.addEventListener('DOMContentLoaded', function() {
   loadSavedData();
+  renderLog();
   
   document.getElementById('translateBtn').addEventListener('click', translate);
+  document.getElementById('clearHistoryBtn').addEventListener('click', clearHistory);
   
   // Перевод по Enter в textarea
   document.getElementById('inputText').addEventListener('keydown', function(e) {