index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="theme-color" content="#0a0a0f">
    
  <!-- Kill Service Worker to prevent caching old versions during dev -->
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for(let registration of registrations) {
          registration.unregister();
        }
      });
    }
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />
  <script>
    window.onerror = function(msg, url, lineNo, columnNo, error) {
      alert("GLOBAL ERROR: " + msg + "\nURL: " + url + "\nLine: " + lineNo + "\nCol: " + columnNo + "\nError: " + (error ? error.stack : ''));
      return false;
    };
    window.addEventListener('unhandledrejection', function(event) {
      alert("UNHANDLED PROMISE: " + (event.reason ? (event.reason.stack || event.reason.message || event.reason) : 'Unknown'));
    });
  </script>
  <title>SchoolMind AI</title>
  
  <!-- Fonts: Inter for UI, JetBrains Mono for Code -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  
  <!-- Design System & Global Styles -->
  <link rel="stylesheet" href="/src/styles/design-tokens.css" />
  <link rel="stylesheet" href="/src/styles/learn.css">
  <link rel="stylesheet" href="/src/styles/iserv.css?v=4">
  <link rel="stylesheet" href="/src/styles/markdown.css">
  <!-- Presentation Styles -->
  <link rel="stylesheet" href="/src/styles/presentation.css">
  <link rel="stylesheet" href="/src/styles/global.css?v=88" />
  <link rel="stylesheet" href="/src/styles/shop.css" />
  <link rel="stylesheet" href="/src/styles/detective-board.css" />
  <link rel="stylesheet" href="/src/styles/deep-research-loader.css" />
  <link rel="stylesheet" href="/src/styles/presentation-loader.css" />
  <link rel="stylesheet" href="/src/styles/learn.css?v=4" />

  <!-- MathJax Configuration for Chemistry and Math rendering -->
  <script>
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']],
        packages: {'[+]': ['mhchem']}
      },
      loader: {load: ['[tex]/mhchem']},
      options: {
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
      }
    };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>

  <!-- D3 and Function Plot for Math Graphs -->
  <script src="https://unpkg.com/d3@3/d3.min.js"></script>
  <script src="https://unpkg.com/function-plot/dist/function-plot.js"></script>

    <!-- Plotly and Math.js for 3D/Interactive Graphs -->
    <script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.4.2/math.min.js"></script>

    <!-- html2pdf for PDF Export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<body class="dark-theme in-chat-view" style="visibility: hidden;">
  
  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.334</div>
    
  <!-- SVG Filters for Liquid Glass Refraction -->
  <svg width="0" height="0" style="position: absolute; pointer-events: none;">
    <filter id="liquid-glass">
      <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="3" result="noise" seed="1"/>
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </svg>

  <!-- Aurora Background Animation -->
  <div class="aurora-background">
    <div class="aurora-blob-3"></div>
  </div>

  <!-- App Container -->
  <div id="ambient-light"></div>
  
  <div id="app"></div>

  <!-- Entry Script -->
  <script type="module" src="/src/app.js?v=1076"></script>

  <!-- Article View Modal -->
  <div id="article-view-modal" class="liquid-glass-heavy" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background: var(--bg-color); overflow-y: auto; overflow-x: hidden;">
    <div class="article-modal-header">
      <button id="article-modal-close" class="icon-btn" title="Zurück">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
      </button>
      <div class="article-actions">
        <button id="article-pdf-btn" class="liquid-glass article-action-btn">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> Als PDF / Editor öffnen
        </button>
        <button id="article-pres-btn" class="liquid-glass article-action-btn">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg> Präsentation erstellen
        </button>
      </div>
    </div>
    <div class="article-modal-content">
      <div id="article-document" class="article-document pdf-document">
        <!-- Content will be injected here -->
      </div>
    </div>
  </div>

  <!-- PDF Preview Modal -->
  <div id="pdf-modal" class="modal-overlay" style="display: none;">
    <div class="pdf-modal-content">
      <div class="pdf-modal-header">
        <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
          <h2 style="margin: 0; white-space: nowrap;">PDF Vorschau</h2>
          <button id="pdf-darkmode-btn" class="icon-btn" style="background: rgba(255,255,255,0.1); flex-shrink: 0;" title="Dark Mode">
            <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
          </button>
        </div>
        <input type="text" id="pdf-filename-input" value="Schul-Dokument" title="Dateiname für den Download" />
        <button id="pdf-modal-close" class="icon-btn">
          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
      </div>
      <div class="pdf-modal-body">
        <div class="pdf-preview-pane-wrapper">

          <div class="pdf-preview-pane">
            <!-- The printable document -->
            <div id="pdf-document" class="printable-document">
              <!-- Content will be injected here -->
            </div>
          </div>
          
          <!-- Cover to hide flickering during download -->
          <div id="pdf-download-cover" style="position: absolute; inset: 0; background: rgba(13, 15, 18, 0.9); z-index: 100; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px);">
            <div style="color: white; font-family: sans-serif; font-size: 16px; animation: pulse-status 1.5s infinite alternate;">Generiere PDF...</div>
          </div>
        </div>
        <div class="pdf-chat-pane">
          <div id="pdf-chat-history" class="pdf-chat-history"></div>
          <input type="file" id="pdf-image-upload-input" accept="image/*" style="display: none;" />
          <div id="pdf-image-preview-container" style="display: none; position: relative; margin-bottom: 12px; align-self: flex-start;">
            <img id="pdf-image-preview-img" style="max-height: 80px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);" />
            <button id="pdf-clear-image-btn" class="icon-btn" style="position: absolute; top: -8px; right: -8px; background: #ff3b30; color: white; width: 20px; height: 20px; padding: 2px;">
              <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
          </div>
          <div class="pdf-chat-input-wrapper siri-capsule">
            <input type="text" id="pdf-chat-input" placeholder="Änderungswünsche..." autocomplete="off" style="background: transparent; border: none; color: white; outline: none; flex: 1; min-width: 0;" />
            <button id="pdf-attach-image-btn" class="icon-btn" title="Bild anhängen">
              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
            </button>
            <button id="pdf-chat-send" class="icon-btn">
              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
            </button>
          </div>
          <div style="display: flex; gap: 8px; margin-top: 16px;">
            <button id="pdf-undo-btn" class="icon-btn" style="display: none; background: rgba(255,255,255,0.1);" title="Rückgängig">
              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg>
            </button>
            <button id="pdf-redo-btn" class="icon-btn" style="display: none; background: rgba(255,255,255,0.1);" title="Wiederholen">
              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 3.7"></path></svg>
            </button>
            <button id="pdf-download-btn" class="primary-btn" style="flex: 1;">
              <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" style="margin-right: 8px; vertical-align: middle;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              PDF Herunterladen
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Presentation Modal -->
  <div id="pres-modal" style="display: none;">
    <div class="pres-modal-header">
      <div style="display: flex; align-items: center; gap: 8px;">
        <h2 style="margin: 0; white-space: nowrap;">Präsentation</h2>
        <select id="pres-theme-select" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 4px 8px; border-radius: 4px; margin-left: 12px; outline: none;">
          <option value="dynamic">✨ Dynamisch (KI wählt passend zum Thema)</option>
          <option value="schoolmind">SchoolMind Dark</option>
          <option value="light">Light Minimalist</option>
          <option value="ocean">Deep Ocean</option>
        </select>
      </div>
      <div class="pres-header-actions">
        <button id="pres-present-btn" class="liquid-glass article-action-btn" style="padding: 6px 12px; font-size: 14px;">▶ Präsentieren</button>
        <button id="pres-download-btn" class="icon-btn" title="Als HTML exportieren" style="background: rgba(255,255,255,0.1);">
          <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
        </button>
        <button id="pres-modal-close" class="icon-btn" style="background: rgba(255,255,255,0.1);">✕</button>
      </div>
    </div>
    <div class="pres-modal-body">
      <!-- Left: Thumbnails -->
      <div class="pres-thumbnails-pane" id="pres-thumbnails">
        <!-- Thumbnails injected here -->
      </div>
      <!-- Center: Stage -->
      <div class="pres-stage-pane">
        <div id="pres-slide-stage" class="pres-slide-container">
          <!-- Slide injected here -->
        </div>
      </div>
      <!-- Right: Chat Sidebar -->
      <div class="pres-chat-pane pdf-chat-pane">
        <div id="pres-chat-history" class="pdf-chat-history"></div>
        <div class="pdf-chat-input-wrapper siri-capsule">
          <input type="text" id="pres-chat-input" placeholder="Änderungswünsche..." />
          <button id="pres-chat-send">➤</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Detective Board Fullscreen UI -->
  <div id="detective-board-fullscreen">
    <div class="db-header">
      <button class="db-back-btn" id="db-back-btn">
        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
        Zurück zum Chat
      </button>
    </div>
    <div class="db-scene" id="db-scene">
      <div class="db-canvas" id="db-canvas">
        <div class="db-pan-layer" id="db-pan-layer">
          <svg class="db-svg" id="db-svg" width="10000" height="10000" viewBox="0 0 10000 10000" xmlns="http://www.w3.org/2000/svg"></svg>
        </div>
      </div>
    </div>
    <button class="db-scroll-bottom-btn" id="db-scroll-bottom-btn" title="Zum neuesten Element scrollen">
      <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
    </button>
    <div class="db-tooltip" id="db-tooltip">
      <h4 id="db-tooltip-title">Titel</h4>
      <p id="db-tooltip-text">Inhalt</p>
      <div class="db-close" id="db-tooltip-close">✖</div>
    </div>
  </div>
</body>
</html>