breakpilot-pwa/backend/frontend/modules/hilfe.py

"""
BreakPilot Studio - Hilfe & Dokumentation Modul

Benutzerfreundliche Anleitung fuer Lehrer mit Schritt-fuer-Schritt Erklaerungen.
"""


class HilfeModule:
    """Hilfe und Dokumentation fuer Lehrer."""

    @staticmethod
    def get_css() -> str:
        """CSS fuer das Hilfe-Modul."""
        return """
/* =============================================
   HILFE & DOKUMENTATION MODULE
   ============================================= */

/* Container */
.hilfe-container {
  max-width: 100%;
  min-height: 100%;
  background: var(--bp-bg, #0f172a);
  color: var(--bp-text, #e2e8f0);
}

/* Header */
.hilfe-header {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  padding: 40px;
  text-align: center;
  position: relative;
}

.hilfe-header h1 {
  color: white;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.hilfe-header p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  margin: 0;
}

/* Navigation Tabs */
.hilfe-nav {
  display: flex;
  gap: 4px;
  padding: 16px 24px;
  background: var(--bp-surface, #1e293b);
  border-bottom: 1px solid var(--bp-border, #334155);
  flex-wrap: wrap;
}

.hilfe-nav-tab {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--bp-border, #334155);
  border-radius: 8px;
  color: var(--bp-text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.hilfe-nav-tab:hover {
  background: var(--bp-surface-elevated, #334155);
  color: var(--bp-text, #e2e8f0);
}

.hilfe-nav-tab.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

/* Content */
.hilfe-content {
  padding: 32px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.hilfe-section {
  display: none;
}

.hilfe-section.active {
  display: block;
}

/* Cards */
.hilfe-card {
  background: var(--bp-surface, #1e293b);
  border: 1px solid var(--bp-border, #334155);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.hilfe-card h2 {
  color: var(--bp-text, #e2e8f0);
  font-size: 20px;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hilfe-card h3 {
  color: var(--bp-text, #e2e8f0);
  font-size: 16px;
  margin: 24px 0 12px 0;
}

.hilfe-card p {
  color: var(--bp-text-muted, #94a3b8);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px 0;
}

/* Step List */
.hilfe-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.hilfe-step {
  position: relative;
  padding: 20px 20px 20px 70px;
  background: var(--bp-surface-elevated);
  border-radius: 12px;
  margin-bottom: 12px;
  counter-increment: step;
}

.hilfe-step::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.hilfe-step h4 {
  color: var(--bp-text);
  font-size: 15px;
  margin: 0 0 6px 0;
}

.hilfe-step p {
  color: var(--bp-text-muted);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* Info Box */
.hilfe-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hilfe-info-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.hilfe-info-text {
  color: var(--bp-text);
  font-size: 14px;
  line-height: 1.6;
}

.hilfe-info-text strong {
  color: #3b82f6;
}

/* Warning Box */
.hilfe-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hilfe-warning-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.hilfe-warning-text {
  color: var(--bp-text);
  font-size: 14px;
  line-height: 1.6;
}

/* Success Box */
.hilfe-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hilfe-success-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.hilfe-success-text {
  color: var(--bp-text);
  font-size: 14px;
  line-height: 1.6;
}

/* FAQ */
.hilfe-faq {
  border: 1px solid var(--bp-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.hilfe-faq-question {
  padding: 16px 20px;
  background: var(--bp-surface-elevated);
  color: var(--bp-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.hilfe-faq-question:hover {
  background: var(--bp-border);
}

.hilfe-faq-arrow {
  transition: transform 0.3s;
}

.hilfe-faq.open .hilfe-faq-arrow {
  transform: rotate(180deg);
}

.hilfe-faq-answer {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s;
  background: var(--bp-surface);
}

.hilfe-faq.open .hilfe-faq-answer {
  padding: 16px 20px;
  max-height: 500px;
}

.hilfe-faq-answer p {
  margin: 0;
}

/* Keyboard Shortcuts */
.hilfe-shortcut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--bp-border);
}

.hilfe-shortcut:last-child {
  border-bottom: none;
}

.hilfe-shortcut-keys {
  display: flex;
  gap: 4px;
}

.hilfe-shortcut-keys kbd {
  background: var(--bp-surface-elevated);
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: monospace;
  font-size: 13px;
  color: var(--bp-text);
}

.hilfe-shortcut-desc {
  color: var(--bp-text-muted);
  font-size: 14px;
}

/* Contact Card */
.hilfe-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 600px) {
  .hilfe-contact {
    grid-template-columns: 1fr;
  }
}

.hilfe-contact-card {
  background: var(--bp-surface-elevated);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.hilfe-contact-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.hilfe-contact-title {
  color: var(--bp-text);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hilfe-contact-info {
  color: var(--bp-text-muted);
  font-size: 14px;
}
"""

    @staticmethod
    def get_html() -> str:
        """HTML fuer das Hilfe-Modul."""
        return """
<!-- Hilfe & Dokumentation Panel -->
<div class="panel panel-hilfe" id="panel-hilfe" style="display: none;">
  <div class="hilfe-container">

  <!-- Header -->
  <div class="hilfe-header">
    <h1>Hilfe & Dokumentation</h1>
    <p>Schritt-fuer-Schritt Anleitungen fuer alle BreakPilot-Funktionen</p>
  </div>

  <!-- Navigation -->
  <div class="hilfe-nav">
    <button class="hilfe-nav-tab active" data-tab="start" onclick="showHilfeTab('start')">Schnellstart</button>
    <button class="hilfe-nav-tab" data-tab="abitur" onclick="showHilfeTab('abitur')">Abiturkorrektur</button>
    <button class="hilfe-nav-tab" data-tab="arbeitsblatt" onclick="showHilfeTab('arbeitsblatt')">Arbeitsblaetter</button>
    <button class="hilfe-nav-tab" data-tab="tastatur" onclick="showHilfeTab('tastatur')">Tastenkuerzel</button>
    <button class="hilfe-nav-tab" data-tab="faq" onclick="showHilfeTab('faq')">FAQ</button>
    <button class="hilfe-nav-tab" data-tab="kontakt" onclick="showHilfeTab('kontakt')">Kontakt</button>
  </div>

  <!-- Content -->
  <div class="hilfe-content">

    <!-- Schnellstart Section -->
    <div id="hilfe-start" class="hilfe-section active">
      <div class="hilfe-card">
        <h2>Willkommen bei BreakPilot</h2>
        <p>BreakPilot ist Ihr digitaler Assistent fuer den Schulalltag. Mit KI-Unterstuetzung sparen Sie Zeit bei der Korrektur, Erstellung von Materialien und Kommunikation.</p>

        <div class="hilfe-info">
          <span class="hilfe-info-icon">💡</span>
          <div class="hilfe-info-text">
            <strong>Tipp:</strong> Druecken Sie <kbd>Ctrl+K</kbd> um schnell zwischen Modulen zu suchen.
          </div>
        </div>

        <h3>Die wichtigsten Module</h3>
        <ul class="hilfe-steps">
          <li class="hilfe-step">
            <h4>Abiturklausuren korrigieren</h4>
            <p>KI-gestuetzte Korrektur nach dem 15-Punkte-System mit automatischer Gutachten-Generierung.</p>
          </li>
          <li class="hilfe-step">
            <h4>Arbeitsblaetter erstellen</h4>
            <p>Laden Sie PDFs hoch und erstellen Sie interaktive Lernmaterialien mit Mindmaps und Tests.</p>
          </li>
          <li class="hilfe-step">
            <h4>Elternbriefe schreiben</h4>
            <p>Rechtssichere Elternbriefe mit GFK-Analyse und Vorlagen.</p>
          </li>
          <li class="hilfe-step">
            <h4>Klassen verwalten</h4>
            <p>Schueler, Noten und Klassenbuch an einem Ort.</p>
          </li>
        </ul>

        <div class="hilfe-success">
          <span class="hilfe-success-icon">🔒</span>
          <div class="hilfe-success-text">
            <strong>Datenschutz:</strong> Alle Daten bleiben auf dem Schulserver. Keine Cloud-Speicherung, keine Weitergabe an Dritte.
          </div>
        </div>
      </div>
    </div>

    <!-- Abiturkorrektur Section -->
    <div id="hilfe-abitur" class="hilfe-section">
      <div class="hilfe-card">
        <h2>Abiturklausuren korrigieren</h2>
        <p>Die KI-gestuetzte Abiturkorrektur hilft Ihnen, bis zu 80% Zeit bei der Erstkorrektur zu sparen.</p>

        <h3>So starten Sie</h3>
        <ul class="hilfe-steps">
          <li class="hilfe-step">
            <h4>Klicken Sie auf "Abiturklausuren" im Dashboard</h4>
            <p>Oder nutzen Sie die Sidebar und waehlen "Klausurkorrektur" unter Leistungsbewertung.</p>
          </li>
          <li class="hilfe-step">
            <h4>Waehlen Sie eine Einstiegsoption</h4>
            <p><strong>Schnellstart:</strong> Laden Sie Arbeiten direkt hoch - ideal fuer sofortiges Loslegen.<br>
            <strong>Neue Klausur:</strong> Erstellen Sie eine Klausur mit allen Metadaten fuer vollstaendige Verwaltung.</p>
          </li>
          <li class="hilfe-step">
            <h4>Laden Sie die eingescannten Arbeiten hoch</h4>
            <p>Unterstuetzte Formate: PDF, JPG, PNG. Drag & Drop oder Dateiauswahl moeglich.</p>
          </li>
          <li class="hilfe-step">
            <h4>Optional: Erwartungshorizont bereitstellen</h4>
            <p>Waehlen Sie einen Aufgabentyp und beschreiben Sie die Aufgabenstellung. Die KI nutzt dies fuer bessere Bewertungsvorschlaege.</p>
          </li>
          <li class="hilfe-step">
            <h4>Korrigieren Sie die Arbeiten</h4>
            <p>Im 2/3-1/3 Layout: Links das Dokument mit Zoom, rechts die Bewertungskriterien.</p>
          </li>
          <li class="hilfe-step">
            <h4>Setzen Sie Anmerkungen</h4>
            <p>Klicken Sie auf das Dokument um Fehler zu markieren:<br>
            <strong>RS (rot):</strong> Rechtschreibfehler<br>
            <strong>Gram (blau):</strong> Grammatikfehler<br>
            <strong>Inhalt (gruen):</strong> Inhaltliche Anmerkungen</p>
          </li>
          <li class="hilfe-step">
            <h4>Bewerten Sie die 5 Kriterien</h4>
            <p>Rechtschreibung (15%), Grammatik (15%), Inhalt (40%), Struktur (15%), Stil (15%)</p>
          </li>
          <li class="hilfe-step">
            <h4>Generieren Sie das Gutachten</h4>
            <p>Klicken Sie "Gutachten generieren" fuer einen KI-Vorschlag. Sie koennen es frei bearbeiten.</p>
          </li>
        </ul>

        <div class="hilfe-info">
          <span class="hilfe-info-icon">📊</span>
          <div class="hilfe-info-text">
            <strong>Fairness-Analyse:</strong> Nach mehreren Korrekturen koennen Sie die Fairness-Analyse nutzen, um Ausreisser zu identifizieren und die Konsistenz Ihrer Bewertungen zu pruefen.
          </div>
        </div>

        <h3>PDF-Export</h3>
        <p>Exportieren Sie Ihre Ergebnisse als PDF:</p>
        <ul style="color: var(--bp-text-muted); line-height: 1.8; padding-left: 20px;">
          <li><strong>Einzelgutachten:</strong> PDF fuer einen Schueler</li>
          <li><strong>Alle Gutachten:</strong> Gesamtes PDF fuer alle Arbeiten</li>
          <li><strong>Notenuebersicht:</strong> Uebersicht aller Noten</li>
          <li><strong>Anmerkungen:</strong> Alle Annotationen als PDF</li>
        </ul>

        <div class="hilfe-warning">
          <span class="hilfe-warning-icon">⚠️</span>
          <div class="hilfe-warning-text">
            <strong>Wichtig:</strong> Der KI-Vorschlag ist nur ein Startpunkt. Pruefen und passen Sie alle Bewertungen und Gutachten nach Ihrem fachlichen Urteil an.
          </div>
        </div>
      </div>
    </div>

    <!-- Arbeitsblaetter Section -->
    <div id="hilfe-arbeitsblatt" class="hilfe-section">
      <div class="hilfe-card">
        <h2>Arbeitsblaetter erstellen</h2>
        <p>Erstellen Sie interaktive Lernmaterialien aus Ihren vorhandenen PDFs.</p>

        <h3>Schritt-fuer-Schritt</h3>
        <ul class="hilfe-steps">
          <li class="hilfe-step">
            <h4>Oeffnen Sie "Arbeitsblaetter" im Dashboard</h4>
            <p>Oder ueber die Sidebar unter "Studio".</p>
          </li>
          <li class="hilfe-step">
            <h4>Laden Sie ein PDF hoch</h4>
            <p>Ziehen Sie die Datei in den Upload-Bereich oder klicken Sie zum Auswaehlen.</p>
          </li>
          <li class="hilfe-step">
            <h4>Waehlen Sie Generierungsoptionen</h4>
            <p>Mindmap, Multiple-Choice-Test, Lueckentext oder Zusammenfassung.</p>
          </li>
          <li class="hilfe-step">
            <h4>Bearbeiten Sie das Ergebnis</h4>
            <p>Passen Sie die generierten Inhalte nach Bedarf an.</p>
          </li>
          <li class="hilfe-step">
            <h4>Exportieren oder teilen</h4>
            <p>Speichern Sie als PDF oder teilen Sie direkt mit Schuelern.</p>
          </li>
        </ul>

        <div class="hilfe-success">
          <span class="hilfe-success-icon">✨</span>
          <div class="hilfe-success-text">
            Die KI analysiert den Text und erstellt passende Lernmaterialien. Sie behalten die volle Kontrolle ueber alle Inhalte.
          </div>
        </div>
      </div>
    </div>

    <!-- Tastenkuerzel Section -->
    <div id="hilfe-tastatur" class="hilfe-section">
      <div class="hilfe-card">
        <h2>Tastenkuerzel</h2>
        <p>Arbeiten Sie schneller mit diesen Tastenkuerzeln.</p>

        <h3>Navigation</h3>
        <div class="hilfe-shortcut">
          <div class="hilfe-shortcut-keys"><kbd>Ctrl</kbd><kbd>K</kbd></div>
          <div class="hilfe-shortcut-desc">Schnellsuche oeffnen</div>
        </div>
        <div class="hilfe-shortcut">
          <div class="hilfe-shortcut-keys"><kbd>Esc</kbd></div>
          <div class="hilfe-shortcut-desc">Suche schliessen / Abbrechen</div>
        </div>

        <h3>Im Korrektur-Modus</h3>
        <div class="hilfe-shortcut">
          <div class="hilfe-shortcut-keys"><kbd>+</kbd></div>
          <div class="hilfe-shortcut-desc">Hineinzoomen</div>
        </div>
        <div class="hilfe-shortcut">
          <div class="hilfe-shortcut-keys"><kbd>-</kbd></div>
          <div class="hilfe-shortcut-desc">Herauszoomen</div>
        </div>
        <div class="hilfe-shortcut">
          <div class="hilfe-shortcut-keys"><kbd>←</kbd></div>
          <div class="hilfe-shortcut-desc">Vorherige Arbeit</div>
        </div>
        <div class="hilfe-shortcut">
          <div class="hilfe-shortcut-keys"><kbd>→</kbd></div>
          <div class="hilfe-shortcut-desc">Naechste Arbeit</div>
        </div>
        <div class="hilfe-shortcut">
          <div class="hilfe-shortcut-keys"><kbd>Ctrl</kbd><kbd>S</kbd></div>
          <div class="hilfe-shortcut-desc">Speichern</div>
        </div>
      </div>
    </div>

    <!-- FAQ Section -->
    <div id="hilfe-faq" class="hilfe-section">
      <div class="hilfe-card">
        <h2>Haeufige Fragen</h2>

        <div class="hilfe-faq" onclick="toggleFaq(this)">
          <div class="hilfe-faq-question">
            Kann ich eine Korrektur unterbrechen und spaeter fortsetzen?
            <span class="hilfe-faq-arrow">▼</span>
          </div>
          <div class="hilfe-faq-answer">
            <p>Ja, alle Aenderungen werden automatisch gespeichert. Sie koennen jederzeit unterbrechen und spaeter an derselben Stelle weitermachen.</p>
          </div>
        </div>

        <div class="hilfe-faq" onclick="toggleFaq(this)">
          <div class="hilfe-faq-question">
            Was passiert mit meinen Daten?
            <span class="hilfe-faq-arrow">▼</span>
          </div>
          <div class="hilfe-faq-answer">
            <p>Alle Daten werden lokal auf dem Schulserver gespeichert. Es gibt keine Cloud-Speicherung und keine Weitergabe an Dritte. Die KI-Verarbeitung erfolgt auf unserer eigenen Infrastruktur.</p>
          </div>
        </div>

        <div class="hilfe-faq" onclick="toggleFaq(this)">
          <div class="hilfe-faq-question">
            Kann ich den KI-Vorschlag komplett ueberschreiben?
            <span class="hilfe-faq-arrow">▼</span>
          </div>
          <div class="hilfe-faq-answer">
            <p>Ja, das Gutachten ist frei editierbar. Der KI-Vorschlag ist nur ein Startpunkt. Sie haben die volle Kontrolle ueber alle Inhalte.</p>
          </div>
        </div>

        <div class="hilfe-faq" onclick="toggleFaq(this)">
          <div class="hilfe-faq-question">
            Wie funktioniert die Handschrift-Erkennung?
            <span class="hilfe-faq-arrow">▼</span>
          </div>
          <div class="hilfe-faq-answer">
            <p>Das System erkennt Handschrift automatisch mit einer speziellen KI. Bei schlechter Lesbarkeit koennen Sie den erkannten Text manuell korrigieren.</p>
          </div>
        </div>

        <div class="hilfe-faq" onclick="toggleFaq(this)">
          <div class="hilfe-faq-question">
            Werden Schuelernamen an die KI gesendet?
            <span class="hilfe-faq-arrow">▼</span>
          </div>
          <div class="hilfe-faq-answer">
            <p>Nein! Die Klausurkorrektur verwendet Pseudonymisierung. Schuelernamen bleiben immer lokal in Ihrem Browser. Nur anonymisierte Tokens werden zur Verarbeitung gesendet.</p>
          </div>
        </div>

        <div class="hilfe-faq" onclick="toggleFaq(this)">
          <div class="hilfe-faq-question">
            Wie funktioniert die Zweitkorrektur?
            <span class="hilfe-faq-arrow">▼</span>
          </div>
          <div class="hilfe-faq-answer">
            <p>Nach Abschluss der Erstkorrektur kann ein Zweitkorrektor zugewiesen werden. Bei einer Differenz von 3 Punkten ist eine Einigung erforderlich, bei 4+ Punkten wird automatisch eine Drittkorrektur ausgeloest.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Kontakt Section -->
    <div id="hilfe-kontakt" class="hilfe-section">
      <div class="hilfe-card">
        <h2>Hilfe & Support</h2>
        <p>Bei Fragen oder Problemen stehen Ihnen folgende Ansprechpartner zur Verfuegung.</p>

        <div class="hilfe-contact">
          <div class="hilfe-contact-card">
            <div class="hilfe-contact-icon">👨‍💼</div>
            <div class="hilfe-contact-title">Schuladministrator</div>
            <div class="hilfe-contact-info">Erster Ansprechpartner fuer technische Fragen</div>
          </div>
          <div class="hilfe-contact-card">
            <div class="hilfe-contact-icon">📧</div>
            <div class="hilfe-contact-title">E-Mail Support</div>
            <div class="hilfe-contact-info">support@breakpilot.de</div>
          </div>
        </div>

        <div class="hilfe-info" style="margin-top: 24px;">
          <span class="hilfe-info-icon">📚</span>
          <div class="hilfe-info-text">
            <strong>Weitere Ressourcen:</strong> Nutzen Sie die einzelnen Modul-Anleitungen in der Sidebar oder schauen Sie in das System-Info Modul fuer technische Details.
          </div>
        </div>
      </div>
    </div>

  </div>
  </div><!-- /hilfe-container -->
</div>
"""

    @staticmethod
    def get_js() -> str:
        """JavaScript fuer das Hilfe-Modul."""
        return """
// =============================================
// HILFE & DOKUMENTATION MODULE
// =============================================

let hilfeInitialized = false;

function loadHilfeModule() {
  if (hilfeInitialized) {
    console.log('Hilfe module already initialized');
    return;
  }

  console.log('Initializing Hilfe Module...');
  hilfeInitialized = true;
  console.log('Hilfe Module initialized');
}

function showHilfeTab(tabName) {
  // Update tabs
  document.querySelectorAll('.hilfe-nav-tab').forEach(tab => {
    tab.classList.toggle('active', tab.dataset.tab === tabName);
  });

  // Update sections
  document.querySelectorAll('.hilfe-section').forEach(section => {
    section.classList.remove('active');
  });

  const targetSection = document.getElementById('hilfe-' + tabName);
  if (targetSection) {
    targetSection.classList.add('active');
  }
}

function toggleFaq(element) {
  element.classList.toggle('open');
}

// Show panel function
function showHilfePanel() {
  hideAllPanels();
  const panel = document.getElementById('panel-hilfe');
  if (panel) {
    panel.classList.add('active');
    loadHilfeModule();
  }
}
"""