Masticationpedia

Dashboard Masticationpedia: differenze tra le versioni

← Differenza precedenteDifferenza successiva →
VisualeWikitesto
Nessun oggetto della modifica
Etichetta: Annullato
Nessun oggetto della modifica
Etichetta: Annullato
Riga 1: Riga 1:
<!-- ======= MINI TEST: Masticationpedia AI (apri/chiudi + echo locale) ======= -->


<!-- Pulsante per aprire la UI -->
<html>
<div style="margin:16px 0">
<h2>🔧 Dashboard Operativa – Masticationpedia</h2>
  <button id="btn-open-mpai" style="padding:.5rem .9rem;border:1px solid #ccc;border-radius:8px;cursor:pointer">
 
    🤖 Masticationpedia AI
<!-- Pulsante -->
  </button>
<button id="btn-open-mpai" style="padding:.5rem .9rem;border:1px solid #ccc;border-radius:8px;cursor:pointer">
</div>
🤖 Masticationpedia AI
</button>


<!-- Pannello AI -->
<!-- Schermata AI nascosta -->
<div id="mpAI" class="mpai-root" style="display:none">
<div id="mpAI" class="mpai-root" style="display:none; margin-top:1rem; border:1px solid #e5e7eb; border-radius:12px; padding:12px;">
   <div class="mpai-header">
   <div class="mpai-header">
     <div class="mpai-title">🤖 Masticationpedia <b>AI</b> — test minimo</div>
     <div class="mpai-title">🤖 Masticationpedia <b>AI</b></div>
    <div class="mpai-actions">
      <button id="mpai-close" class="mpai-btn">Chiudi</button>
      <button id="mpai-clear" class="mpai-btn danger">Pulisci</button>
    </div>
   </div>
   </div>
 
   <div id="mpai-chat" class="mpai-chat" style="border:1px solid #ccc; border-radius:8px; padding:10px; min-height:120px; margin:10px 0; background:#fff; overflow-y:auto; max-height:200px;">
   <div class="mpai-chat" id="mpai-chat">
     <div class="mpai-msg assistant"><b>GPT:</b> Benvenuto! Scrivi un messaggio qui sotto.</div>
     <div class="mpai-msg mpai-hint">Pannello aperto ✔️. Scrivi sotto e premi Invia (risponde con un “echo” locale).</div>
   </div>
   </div>
 
   <div class="mpai-composer" style="display:flex; gap:8px;">
   <div class="mpai-composer">
     <textarea id="mpai-input" rows="2" style="flex:1; border:1px solid #ccc; border-radius:8px; padding:8px;"></textarea>
     <textarea id="mpai-input" rows="3" placeholder="Scrivi qui la tua domanda..."></textarea>
     <button id="mpai-send" style="padding:.5rem .9rem; border:1px solid #0a7cff; border-radius:8px; background:#0a7cff; color:#fff; cursor:pointer">Invia</button>
     <button id="mpai-send" class="mpai-btn primary">Invia</button>
   </div>
   </div>
</div>
</div>


<!-- Stili minimi -->
<style>
<style>
  #mpAI { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111827; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
   .mpai-msg { margin:6px 0; padding:6px; border-radius:8px; }
   .mpai-header{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
   .mpai-msg.user { background:#eff6ff; border:1px solid #bee3f8; }
  .mpai-title{font-size:18px;font-weight:700}
   .mpai-msg.assistant { background:#f0fdf4; border:1px solid #d1fae5; }
  .mpai-actions{display:flex;gap:8px}
  .mpai-btn{border:1px solid #e5e7eb;background:#fff;padding:.45rem .8rem;border-radius:8px;cursor:pointer}
   .mpai-btn:hover{background:#f7f7f7}
  .mpai-btn.primary{background:#0a7cff;border-color:#0a7cff;color:#fff}
  .mpai-btn.danger{background:#e74c3c;border-color:#e74c3c;color:#fff}
  .mpai-chat{display:flex;flex-direction:column;gap:10px;max-height:40vh;overflow:auto;border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;margin-bottom:10px}
  .mpai-msg{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff}
  .mpai-msg.user{border-color:#bee3f8;background:#eff6ff}
   .mpai-msg.assistant{border-color:#d1fae5;background:#f0fdf4}
  .mpai-msg .role{font-weight:600;margin-bottom:4px}
  .mpai-hint{border-style:dashed;color:#6b7280}
  .mpai-composer{display:flex;gap:8px;align-items:flex-end}
  .mpai-composer textarea{flex:1 1 auto;min-height:80px;border:1px solid #e5e7eb;border-radius:12px;padding:10px}
</style>
</style>


<!-- JS minimo: apre/chiude e fa echo locale -->
<script>
<script>
(function(){
document.addEventListener("DOMContentLoaded", function(){
   var panel = document.getElementById('mpAI');
   const panel = document.getElementById("mpAI");
   var chatEl = document.getElementById('mpai-chat');
   const chatEl = document.getElementById("mpai-chat");
   var inputEl = document.getElementById('mpai-input');
   const inputEl = document.getElementById("mpai-input");
  const btnOpen = document.getElementById("btn-open-mpai");
  const btnSend = document.getElementById("mpai-send");
 
  // Apri la schermata AI
  btnOpen.onclick = () => { panel.style.display = "block"; };


   function append(role, text){
  // Aggiungi messaggio in chat
     var d = document.createElement('div');
   function appendMsg(role, text){
     d.className = 'mpai-msg ' + (role === 'user' ? 'user' : 'assistant');
     const div = document.createElement("div");
     d.innerHTML = '<div class="role">' + (role === 'user' ? 'Tu' : 'Assistente') + '</div>'
     div.className = "mpai-msg " + role;
                + '<div class="content" style="white-space:pre-wrap">' + text + '</div>';
     div.innerHTML = "<b>"+(role==="user"?"Tu":"GPT")+":</b> " + text;
     chatEl.appendChild(d);
     chatEl.appendChild(div);
     chatEl.scrollTop = chatEl.scrollHeight;
     chatEl.scrollTop = chatEl.scrollHeight;
   }
   }


   function sendEcho(){
   // Invia messaggio
     var t = (inputEl.value || '').trim();
  btnSend.onclick = () => {
     if(!t){ inputEl.focus(); return; }
     const text = inputEl.value.trim();
     append('user', t);
     if(!text) return;
     inputEl.value = '';
     appendMsg("user", text);
     setTimeout(function(){ append('assistant', 'Echo: ' + t); }, 300);
     inputEl.value = "";
  }
     // Risposta finta (per test)
 
     setTimeout(()=> appendMsg("assistant", "Hai scritto: " + text), 600);
  // Bind
   };
  document.getElementById('btn-open-mpai').addEventListener('click', function(){
});
     panel.style.display = 'block';
  });
  document.getElementById('mpai-close').addEventListener('click', function(){
    panel.style.display = 'none';
  });
  document.getElementById('mpai-clear').addEventListener('click', function(){
    chatEl.innerHTML = '<div class="mpai-msg mpai-hint">Conversazione pulita.</div>';
  });
  document.getElementById('mpai-send').addEventListener('click', sendEcho);
   document.addEventListener('keydown', function(e){
    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && document.activeElement === inputEl){
      e.preventDefault(); sendEcho();
    }
  });
 
  // espongo per test console
  window.sendPrompt = sendEcho;
})();
</script>
</script>
<!-- ======= /MINI TEST ======= -->
</html>

Versione delle 07:16, 28 set 2025

🔧 Dashboard Operativa – Masticationpedia

Estratto da "https://staging.masticationpedia.org/index.php?title=Dashboard_Masticationpedia&oldid=4575"