Modifica di Dashboard Masticationpedia

<html>
<!-- 🔧 DASHBOARD OPERATIVA – MASTICATIONPEDIA -->
<h2>🔧 Dashboard Operativa – Masticationpedia</h2>
<p><em>Centro di comando per progetti, API, file e backup</em></p>

<!-- 🔘 Pulsanti di navigazione -->
<div style="margin: 2rem 0; display: flex; flex-wrap: wrap; gap: 1rem;">
  <button class="dashboard-toggle" onclick="toggleDashboardBox('api-settings')">⚙️ Connessione API</button>
  <button class="dashboard-toggle" onclick="toggleDashboardBox('server-files')">📀 Accesso File Server</button>
  <button class="dashboard-toggle" onclick="toggleDashboardBox('project-status')">📊 Stato Progetti</button>
  <button class="dashboard-toggle" onclick="toggleDashboardBox('test-tools')">🧪 Strumenti di Test</button>
</div>
<button class="dashboard-toggle" onclick="toggleDashboardBox('activity-log')">📘 Registro Attività</button>


<!-- 📦 Box: Connessione API -->
<div id="api-settings" style="display:none; padding:1rem; border:1px solid #ccc; border-radius:8px; background:#f9f9f9; margin-bottom:1rem;">
  <strong>Connessione API:</strong><br><br>
  <input id="api-key" placeholder="🔑 Inserisci API Key" style="width:100%; margin-bottom:0.5rem;"><br>
  <select id="model-select" style="width:100%; margin-bottom:0.5rem;">
    <option value="gpt-4">gpt-4</option>
    <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
  </select><br>
  <textarea id="test-prompt" rows="3" style="width:100%; margin-bottom:0.5rem;">Dimmi una curiosità sulla mandibola</textarea><br>
  <button onclick="testAPIConnection()">▶️ Testa connessione</button>
  <pre id="api-result" style="background:#f0f0f0; padding:1rem; border:1px solid #ccc; margin-top:1rem; white-space:pre-wrap;"></pre>
</div>

<!-- 📦 Box: Accesso File Server -->
<div id="server-files" style="display:none; padding:1rem; border:1px solid #ccc; border-radius:8px; background:#f9f9f9; margin-bottom:1rem;">
  <strong>File Server:</strong> Accesso ai file CSS, JS, configurazioni.<br><br>
  <select id="fileSelect" style="margin-bottom:0.5rem;">
    <option value="common.css">common.css</option>
    <option value="common.js">common.js</option>
    <option value="LocalSettings.php">LocalSettings.php</option>
  </select><br>
  <textarea id="fileContent" rows="10" style="width:100%; display:none;"></textarea><br>
  <button onclick="saveMockFile()" style="display:none;" id="saveBtn">📀 Salva</button>
</div>

<!-- 📦 Box: Stato Progetti -->
<div id="project-status" style="display:none; padding:1rem; border:1px solid #ccc; border-radius:8px; background:#f9f9f9; margin-bottom:1rem;">
  <strong>Stato Progetti:</strong> Riepilogo visuale dei moduli operativi.<br><br>
  <button onclick="openProjectDialog()" style="margin-bottom:1rem; background:#007bff; color:white; border:none; padding:0.5rem 1rem; border-radius:5px; font-weight:bold;">➕ Nuovo Progetto</button>

  <table id="projectTable" style="width:100%; border-collapse: collapse; font-size: 0.95rem;">
    <thead>
      <tr style="background:#eaeaea;">
        <th style="padding:0.5rem; border:1px solid #ccc;">🧱 Modulo</th>
        <th style="padding:0.5rem; border:1px solid #ccc;">📊 Stato</th>
        <th style="padding:0.5rem; border:1px solid #ccc;">📅 Data</th>
        <th style="padding:0.5rem; border:1px solid #ccc;">🔍 Note</th>
      </tr>
    </thead>
    <tbody id="projectRows">
      <tr>
        <td style="padding:0.5rem; border:1px solid #ccc;">Connessione API</td>
        <td style="padding:0.5rem; border:1px solid #ccc; color:green; font-weight:bold;">✅ Completato</td>
        <td style="padding:0.5rem; border:1px solid #ccc;">6 apr 2025</td>
        <td style="padding:0.5rem; border:1px solid #ccc;">Setup funzionante</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 📦 Box: Strumenti di Test -->
<div id="test-tools" style="display:none; padding:1rem; border:1px solid #ccc; border-radius:8px; background:#f9f9f9; margin-bottom:1rem;">
  <strong>Mini console:</strong><br><br>
  <textarea id="codeArea" placeholder="Scrivi codice JS da testare..." style="width:100%; height:100px;"></textarea><br>
  <button onclick="runTestCode()">▶️ Esegui</button><br><br>
  <pre id="consoleOutput" style="background:#000; color:#0f0; padding:1rem; border-radius:8px; font-family:monospace;"></pre>
</div>
<!-- 📘 Box: Registro Attività -->
<div id="activity-log" style="display:none; padding:1rem; border:1px solid #ccc; border-radius:8px; background:#fdfdfd; margin-bottom:1rem;">
  <strong>Registro Attività:</strong><br><br>
  <div id="activityLogContent" style="background:#f4f4f4; border:1px solid #ccc; padding:1rem; height:200px; overflow-y:auto; font-family:monospace; font-size:0.9rem;">
    <p><em>In attesa di attività...</em></p>
  </div>
  <br>
  <button onclick="clearActivityLog()" style="background:#e74c3c; color:white; border:none; padding:0.4rem 1rem; border-radius:6px; font-weight:bold;">🧹 Pulisci Log</button>
</div>


<!-- 🪟 Dialog Nuovo Progetto -->
<div id="newProjectDialog" style="display:none; position:fixed; top:20%; left:50%; transform:translateX(-50%); background:white; padding:1.5rem; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.3); z-index:999; max-width:500px;">
  <h3>🆕 Nuovo Progetto</h3>
  <label>Titolo:</label><br>
  <input id="newProjectTitle" style="width:100%; margin-bottom:0.5rem;"><br>
  <label>Descrizione o Note:</label><br>
  <textarea id="newProjectNotes" rows="4" style="width:100%;"></textarea><br><br>
  <button onclick="addNewProject()" style="background:#28a745; color:white; border:none; padding:0.5rem 1rem; border-radius:6px; font-weight:bold;">💾 Salva</button>
  <button onclick="closeProjectDialog()" style="margin-left:1rem;">❌ Annulla</button>
</div>

<!-- 📜 Registro attività -->
<div style="margin-top:2rem; padding:1rem; border:1px solid #ccc; border-radius:8px; background:#fdfdfd;">
  <strong>📜 Registro attività:</strong>
  <button onclick="clearActivityLog()" style="float:right; background:#dc3545; color:white; border:none; padding:0.3rem 0.8rem; border-radius:6px; font-weight:bold;">🧹 Svuota</button>
  <div id="activityLogContent" style="margin-top:1rem; max-height:250px; overflow-y:auto; background:#f0f0f0; padding:1rem; border:1px solid #ccc; border-radius:6px; font-family:monospace; font-size:0.85rem;">
    <em><span style="color:#888;">Registro avviato...</span></em>
  </div>
</div>


</html>