349　AIとの対話履歴を、数式を崩さずに綺麗な状態でHTML化するためのプロンプト

<body>
    <!-- 1. 設定UI -->
    <div class="settings-ui" style="background-color: var(--box-bg); border: 1px solid var(--box-border); padding: 15px; margin-bottom: 20px; border-radius: 8px;">
        <div class="settings-row" style="margin-bottom: 10px;">
            <label for="font-size-slider">文字サイズ:</label>
            <input type="range" id="font-size-slider" min="10" max="40" value="22" step="1">
            <span id="font-size-display">22px</span>
        </div>
        <div class="settings-row" style="margin-bottom: 10px;">
            <label for="math-style-selector">数式スタイル:</label>
            <select id="math-style-selector">
                <option value="default">標準（自動）</option>
                <option value="force-inline">全てインライン（テキスト内埋め込み）</option>
                <option value="force-display">全て独立行（ディスプレイ）</option>
            </select>
        </div>
        <div class="settings-row">
            <select id="ai-selector">
                <option value="AI Studio">AI Studio</option>
                <option value="Chat GPT">Chat GPT</option>
                <option value="Claude">Claude</option>
            </select>
            <button id="download-btn">この対話を保存</button>
            <button id="dark-mode-btn">背景・文字色を反転</button>
        </div>
    </div>

    <!-- 2. 先頭のリンク -->
    <div class="link-section" id="top-links">
        <h3>【関連リンク】</h3>
        <ul><!-- 【提供したリンク】のリスト --></ul>
    </div>

    <!-- 3. 対話本文 -->
    <div id="chat-content">
        <div class="message user" style="background-color: var(--user-bg);">
            <h3>ユーザー</h3>
            <p><!-- ユーザーのテキスト --></p>
        </div>
        <div class="message ai" style="background-color: var(--ai-bg);">
            <h3>AI</h3>
            <p><!-- AIのテキスト --></p>
        </div>
    </div>

    <!-- 4. 本文内の抽出リンク -->
    <div class="link-section" id="inline-links">
        <h3>【本文内リンク】</h3>
        <ul><!-- 抽出したリンク --></ul>
    </div>

    <!-- 5. PDFリンク -->
    <div class="link-section" id="pdf-links">
        <h3>【読み込みPDFリンク先】</h3>
        <ul><!-- 【PDFのリンク】 --></ul>
    </div>

    <!-- 6. JavaScript -->
    <script>
        // ここに指示通りJSを記述する
    </script>
</body>

先頭に追加リンクを付けて　リンクと　リンク対おる


ここまでのあなたとの対話履歴を、1つのHTMLファイルとして出力してください。

【厳守する条件】
1. 私（ユーザー）とあなた（AI）の対話内容のみを抽出し、HTML化してください。AIが読み込んだPDFなどのデータ内容は絶対にHTMLに含めないでください。
2. 私は別途ログインページを作成中ですが、**今回の出力においてログインページ（ログイン画面）は絶対に作らないでください**。
3. ログイン画面などがポップアップするような仕様（JavaScript等）も一切含めないでください。純粋な対話ログのみを読むためのページにしてください。
4. 数式は画像や他の文字に変形せず、LaTeX形式のまま保持してください。
5. HTML上で数式を綺麗に表示（LaTeXの代替表示）するため、ヘッダーに必ず「MathJax」を読み込むスクリプトを含めてください。
6. インライン数式は `\( ... \)`、ブロック数式は `$$ ... $$` または `\[ ... \]` の記法を用いてください。
7. コピーしやすいように、全体を1つの `html` コードブロック（ ```html で始まり ``` で終わる形）で出力してください。

【デザイン指定】
- 全体の背景色は真っ白ではなく、ほんの僅かに灰色（例: #f8f9fa ）に指定してください。
- 文字色は黒（#000000）に指定してください。

【HTMLのテンプレート】
以下の構造を使用し、<body> タグの中に対話履歴を書き込んでください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIとの対話履歴</title>
    <!-- MathJaxの読み込み -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        body { 
            font-family: sans-serif; 
            line-height: 1.6; 
            padding: 20px; 
            max-width: 800px; 
            margin: 0 auto; 
            background-color: #f8f9fa ; /* ほんの僅かに灰色 */
            color: #000000 ; /* 黒文字 */
        }
        .user { background-color: #e6f7ff ; padding: 15px; border-radius: 8px; margin-bottom: 10px; }
        .ai { background-color: #f6ffed ; padding: 15px; border-radius: 8px; margin-bottom: 30px; }
        h3 { margin-top: 0; font-size: 1em; color: #333 ; }
        p { white-space: pre-wrap; margin: 0; }
    </style>
</head>
<body>
    <!-- ここに以下の形式でこれまでの対話を追加してください -->
    <!-- <div class="user"><h3>ユーザー</h3><p>質問の内容</p></div> -->
    <!-- <div class="ai"><h3>AI</h3><p>回答の内容（数式含む）</p></div> -->
</body>
</html>


ログイン画面なし
ログインポップアップなし
ログイン用JavaScriptなし
対話ログを読むだけのHTML
MathJaxは維持
背景色・文字色も指定どおり