FAQ-workshop / design.py
yeelou's picture
add speakers and English , update blog
460899a
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)
"""