Fix chat widget click blocking and enhance Telegram CTA

- Add pointer-events: none to chat-widget-container to prevent blocking page links
- Add pointer-events: auto to chat-toggle-btn and open state for clickability
- Resize chat widget to 420x580px
- Update chat header text to "무엇이든 물어보세요"
- Enhance Telegram section with prominent badge and blue styling

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-20 01:15:02 +09:00
parent fb185602c4
commit 81509c8ba4

View File

@@ -188,11 +188,12 @@
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: 1rem; gap: 1rem;
pointer-events: none;
} }
.chat-frame-wrapper { .chat-frame-wrapper {
width: 380px; width: 420px;
height: 600px; height: 580px;
background: white; background: white;
border: 2px solid #1e1e1e; border: 2px solid #1e1e1e;
border-radius: 4px; border-radius: 4px;
@@ -203,10 +204,12 @@
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
pointer-events: none;
} }
.chat-frame-wrapper.open { .chat-frame-wrapper.open {
transform: scale(1); transform: scale(1);
pointer-events: auto;
} }
.chat-header { .chat-header {
@@ -243,6 +246,7 @@
transition: all 0.2s ease; transition: all 0.2s ease;
font-size: 1.5rem; font-size: 1.5rem;
position: relative; position: relative;
pointer-events: auto;
} }
.chat-toggle-btn:hover { .chat-toggle-btn:hover {
@@ -330,9 +334,12 @@
</div> </div>
<!-- Telegram Bot Highlight --> <!-- Telegram Bot Highlight -->
<div class="mt-16 sketch-border p-8 max-w-3xl mx-auto" style="transform: rotate(0deg);"> <div class="mt-16 sketch-border p-8 max-w-3xl mx-auto bg-sketch-blue/5" style="transform: rotate(0deg); border-color: #1971c2;">
<div class="sketch-badge mb-4 mx-auto w-fit" style="border-color: #1971c2; color: #1971c2;">
📢 모든 신청 및 관리는 텔레그램으로!
</div>
<div class="flex flex-col md:flex-row items-center gap-6"> <div class="flex flex-col md:flex-row items-center gap-6">
<div class="w-16 h-16 bg-sketch-blue/10 border-2 border-sketch-line rounded-full flex items-center justify-center flex-shrink-0"> <div class="w-16 h-16 bg-sketch-blue/20 border-2 border-sketch-blue rounded-full flex items-center justify-center flex-shrink-0">
<!-- Telegram 아이콘 (손그림 스타일) --> <!-- Telegram 아이콘 (손그림 스타일) -->
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 5L2 12.5l7 2M21 5l-5 14-6-8.5M21 5L9 14.5M9 14.5V21l3.5-4"/> <path d="M21 5L2 12.5l7 2M21 5l-5 14-6-8.5M21 5L9 14.5M9 14.5V21l3.5-4"/>
@@ -341,8 +348,8 @@
<div class="text-center md:text-left flex-1"> <div class="text-center md:text-left flex-1">
<h3 class="text-xl font-bold mb-2">텔레그램 하나로 모든 것을 관리하세요!</h3> <h3 class="text-xl font-bold mb-2">텔레그램 하나로 모든 것을 관리하세요!</h3>
<p class="text-sketch-line/70"> <p class="text-sketch-line/70">
서비스 신청, 상태 조회, 도메인 등록, 결제까지 —<br class="hidden md:block"> <span class="highlight-box font-bold">별도의 대시보드 없이</span> 서비스 신청, 상태 조회,<br class="hidden md:block">
복잡한 대시보드 없이 <span class="highlight-box font-bold">대화만으로</span> 모든 것이 가능합니다. 도메인 등록, 결제까지 대화만으로 모든 것이 가능합니다.
</p> </p>
</div> </div>
<a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-6 py-3 text-lg flex items-center gap-2 flex-shrink-0"> <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-6 py-3 text-lg flex items-center gap-2 flex-shrink-0">
@@ -976,7 +983,7 @@
<div id="chatFrame" class="chat-frame-wrapper"> <div id="chatFrame" class="chat-frame-wrapper">
<div class="chat-header"> <div class="chat-header">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span>💬 실시간 상담</span> <span>🔨 무엇이든 물어보세요</span>
</div> </div>
<button onclick="toggleChat()" class="hover:text-cream transition"> <button onclick="toggleChat()" class="hover:text-cream transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>