shinalok/youlbot-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: upgrade example chips to card style with emoji, shadow, hover animation

Browse Source 
- Add category emojis to question text (👶/🏫/💰)
- Card design: border-radius 14px, soft drop shadow, min-height 60px
- Equal-width flex cards (flex:1) with full-height stretch
- ::after arrow indicator (→), transitions on hover
- Hover: indigo gradient bg, purple border, translateY(-2px) lift
- Dark mode: matching dark card + purple glow on hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
shinalok
2026-06-02 17:46:24 +09:00
co-authored by Claude Sonnet 4.6
parent 7decd21126
commit 2d8e83581c
1 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+43 -18
View File
@@ -312,9 +312,9 @@ def _welcome_html(user_name: str) -> str:
_EXAMPLE_QUESTIONS = [ _EXAMPLE_QUESTIONS = [
"육아휴직 급여 신청 방법을 알려주세요", "👶 육아휴직 급여 신청 방법을 알려주세요",
"어린이집 입소 대기 기간은 얼마나 걸리나요?", "🏫 어린이집 입소 대기 기간은 얼마나 걸리나요?",
"아이 의료비 세금 공제는 어떻게 하나요?", "💰 아이 의료비 세금 공제는 어떻게 하나요?",
] ]
@@ -565,24 +565,49 @@ footer { display: none !important; }
/* ── 입력 Row 세로 중앙 정렬 ── */ /* ── 입력 Row 세로 중앙 정렬 ── */
.input-row { align-items: center !important; gap: 8px !important; } .input-row { align-items: center !important; gap: 8px !important; }
/* ── 예시 질문 Chip (D4-4) ── */ /* ── 예시 질문 Chip 카드 (D4-4) ── */
.example-chips-row { padding: 6px 0 4px !important; flex-wrap: wrap !important; gap: 8px !important; } .example-chips-row {
padding: 10px 0 6px !important;
flex-wrap: nowrap !important;
gap: 10px !important;
align-items: stretch !important;
}
.example-chip-btn {
flex: 1 !important;
min-width: 0 !important;
}
.example-chip-btn button { .example-chip-btn button {
border-radius: 20px !important; border-radius: 14px !important;
border: 1.5px solid #e2e8f0 !important; border: 1.5px solid #e8edf4 !important;
background: #fff !important; background: #ffffff !important;
color: #374151 !important; color: #1e293b !important;
padding: 8px 18px !important; padding: 14px 18px !important;
font-size: .875rem !important; font-size: .875rem !important;
box-shadow: none !important;
white-space: nowrap !important;
transition: all .15s !important;
font-weight: 400 !important; font-weight: 400 !important;
line-height: 1.5 !important;
box-shadow: 0 1px 6px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.02) !important;
white-space: normal !important;
text-align: left !important;
width: 100% !important;
height: 100% !important;
min-height: 60px !important;
justify-content: flex-start !important;
transition: all .2s ease !important;
}
.example-chip-btn button::after {
content: ' →';
color: #94a3b8;
font-size: .8rem;
margin-left: 4px;
transition: color .2s, transform .2s;
display: inline-block;
} }
.example-chip-btn button:hover { .example-chip-btn button:hover {
background: #eff6ff !important; background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%) !important;
border-color: #93c5fd !important; border-color: #a5b4fc !important;
color: #1d4ed8 !important; color: #1e40af !important;
box-shadow: 0 6px 20px rgba(99,102,241,.15) !important;
transform: translateY(-2px) !important;
} }
/* ── 컨트롤 패널 (D4-5) ── */ /* ── 컨트롤 패널 (D4-5) ── */
@@ -647,8 +672,8 @@ footer { display: none !important; }
.dark .message-wrap .bot { background: #1e293b !important; border-color: #334155 !important; } .dark .message-wrap .bot { background: #1e293b !important; border-color: #334155 !important; }
.dark .nav-btn button:hover { background: #1e293b !important; } .dark .nav-btn button:hover { background: #1e293b !important; }
.dark .nav-btn button.nav-active { background: #1e3a5f !important; color: #93c5fd !important; } .dark .nav-btn button.nav-active { background: #1e3a5f !important; color: #93c5fd !important; }
.dark .example-chip-btn button { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } .dark .example-chip-btn button { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; box-shadow: 0 1px 6px rgba(0,0,0,.3) !important; }
.dark .example-chip-btn button:hover { background: #1e3a5f !important; border-color: #3b82f6 !important; } .dark .example-chip-btn button:hover { background: linear-gradient(135deg, #1e3a5f, #1e1b4b) !important; border-color: #818cf8 !important; color: #c7d2fe !important; }
.dark #control-panel { background: #1e293b !important; border-color: #334155 !important; } .dark #control-panel { background: #1e293b !important; border-color: #334155 !important; }
""" """