design.py

custom_css = """
body {
    background-color: #eef2f7;
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", sans-serif;
}

#title-area {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #333;
}

#chatbot-container, #references-container, #download-container {
    max-width: 1100px;
    margin: auto;
    background: #f0f7ff;
}

#chatbot-container {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

#references-container {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
}

#submit-btn button {
    background-color: #007bff;
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
}

#update-btn button {
    background-color: #28a745;
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
}

h3 {
    color: #444;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 20px;
}
"""
custom_head = """
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>
"""

js_func = """
function refresh() {
    const url = new URL(window.location);

    if (url.searchParams.get('__theme') !== 'light') {
        url.searchParams.set('__theme', 'light');
        window.location.href = url.href;
    }
}
"""

title_html = """
<div style="display: flex; align-items: center; justify-content: center;">
    <img src="https://cdn.profile-image.st-hatena.com/users/saratoga623/profile.png?1728512391" style="width:50px; height:50px; margin-right:10px;">
    <h1 style="margin: 0;">
        <a href="https://note.com/saratoga623" target="_blank" style="text-decoration: none; color: inherit;">
            プロジェクトマネジメント勉強会 <i class='fa fa-lightbulb-o'></i>
        </a>
    </h1>
</div>
"""
title_text = """
<div style="display: flex; align-items: center; justify-content: center;">
    <div>
        <p>経験上、プロジェクトマネジメントで大切だと思っている考え方で</p>
        <p>疑問に答え、音声、参考資料が提供されます</p>
    </div>
    <dotlottie-player src="https://lottie.host/e2d675e6-73f4-4e92-a217-89bf1a4e49d3/cyif3Z9bwS.lottie"
        background="transparent" speed="1" style="width: 150px; height: 150px" loop autoplay></dotlottie-player>
</div>
"""
params_text = """
#### 🔎 回答スタイル
ユーザーのニーズに合わせて、回答のスタイルを調整することができます。以下はそれぞれの回答タイプの説明です

##### 🎨 創造的な回答
創意性を重視した回答です。検索された情報にとらわれすぎず、独自の視点や発想を取り入れ、柔軟かつ豊かな表現で会話を展開します。例え話やユーモア、感情のこもった言い回しなども使用されることがあります。

##### 📘 事実的な回答
事実や検索された情報に基づき、正確性と明快さを優先した回答です。主観的な意見や比喩表現は控えめに、情報の整理と伝達に重点を置きます。

##### 📝 詳細な説明
質問に対して背景や前提条件を含めながら、複数の段落で論理的に説明するスタイルです。情報の抜けがなく、読者が安心して理解できるよう丁寧に構成されています。特に専門的な話題や複雑な問いに適しています。

##### ✏️ 簡潔な説明
要点だけを簡潔にまとめた回答です。時間がないときや、簡単な疑問にすぐ答えたいときに適しています。冗長な説明を避け、核心を押さえることを意識します。  

📌 ご希望のスタイルをお選びください。用途や目的に応じて、最適な形式で回答いたします。
"""
speaker_text = """
#### さらとが
[さらとが](https://note.com/saratoga623)

#### ケンシロウ
[ケンシロウ](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%B3%E3%82%B7%E3%83%AD%E3%82%A6)

#### まな
[芦田 愛菜](https://ja.wikipedia.org/wiki/%E8%8A%A6%E7%94%B0%E6%84%9B%E8%8F%9C)
"""