Update nutri_call.html

nutri_call.html

@@ -760,21 +760,117 @@ function showCalculationStatus(response) {
 
 
 
+<style>
+  .pnotify-card {
+    font-family: 'Segoe UI', sans-serif;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  }
   
-</script>
-
+  .card-header {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    color: white;
+  }
+  
+  .card-header.success {
+    background: linear-gradient(135deg, #4CAF50, #2E7D32);
+  }
+  
+  .card-header.error {
+    background: linear-gradient(135deg, #F44336, #C62828);
+  }
+  
+  .card-header h3 {
+    margin: 0 0 0 12px;
+    font-size: 1.2rem;
+  }
+  
+  .card-header .icon {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .card-body {
+    padding: 16px;
+    background: white;
+  }
+  
+  .card-body ul {
+    margin: 0;
+    padding-left: 20px;
+  }
+  
+  .card-body p {
+    margin: 0 0 8px 0;
+  }
+  
+  .card-body small {
+    color: #666;
+    font-size: 0.8rem;
+  }
+</style>  
+<script type="module">
+  import { alert, defaultModules } from 'https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/PNotify.js';
+  import * as PNotifyMobile from 'https://cdn.jsdelivr.net/npm/@pnotify/mobile@5.2.0/dist/PNotifyMobile.js';
+  import 'https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/BrightTheme.css';
+  import 'https://cdn.jsdelivr.net/npm/@pnotify/bootstrap4@5.2.0/dist/PNotifyBootstrap4.css';
 
-<button id="testNotify">Тест уведомлений</button>
+  defaultModules.set(PNotifyMobile, {});
 
-<script>
-document.getElementById('testNotify').addEventListener('click', () => {
-  showCalculationStatus({ deficits: {} }); // Тест успеха
-  setTimeout(() => {
-    showCalculationStatus({ deficits: { Ca: -5.2, Mg: -1.1 } }); // Тест ошибки
-  }, 3500);
-});
+  window.showCalculationStatus = function(response) {
+    const successTemplate = `
+      <div class="pnotify-card">
+        <div class="card-header success">
+          <svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></svg>
+          <h3>Расчёт успешен</h3>
+        </div>
+        <div class="card-body">
+          <p>Все элементы идеально сбалансированы</p>
+          <small>Общая концентрация: ${response.total_ppm.toFixed(2)} ppm</small>
+        </div>
+      </div>
+    `;
+
+    const errorTemplate = `
+      <div class="pnotify-card">
+        <div class="card-header error">
+          <svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
+          <h3>Обнаружены дефициты</h3>
+        </div>
+        <div class="card-body">
+          <ul>
+            ${Object.entries(response.deficits).map(([el, val]) => `
+              <li><strong>${el}:</strong> ${val.toFixed(2)} ppm</li>
+            `).join('')}
+          </ul>
+        </div>
+      </div>
+    `;
+
+    alert({
+      type: Object.keys(response.deficits || {}).length === 0 ? 'success' : 'error',
+      text: Object.keys(response.deficits || {}).length === 0 ? successTemplate : errorTemplate,
+      delay: 4000,
+      width: '320px',
+      modules: {
+        Desktop: {
+          desktop: true
+        },
+        Animate: {
+          animate: true,
+          inClass: 'zoomIn',
+          outClass: 'zoomOut'
+        }
+      }
+    });
+  };
 </script>
 
+
+
   
 </body>
 </html>