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:
21
index.html
21
index.html
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user