working
This commit is contained in:
+87
-105
@@ -142,22 +142,70 @@
|
||||
}
|
||||
|
||||
.nav-chat {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
width: 360px;
|
||||
height: 38px;
|
||||
background: rgba(93, 64, 55, 0.06);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.25s, box-shadow 0.25s;
|
||||
min-height: 38px;
|
||||
--chat-panel-height: 304px;
|
||||
overflow: visible;
|
||||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
|
||||
}
|
||||
|
||||
.nav-chat:focus-within {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 3px var(--gold-glow);
|
||||
}
|
||||
|
||||
.nav-chat-main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
|
||||
}
|
||||
|
||||
.nav-chat.open .nav-chat-main {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 16px 32px rgba(62, 39, 35, 0.12);
|
||||
transform: translateY(var(--chat-panel-height));
|
||||
}
|
||||
|
||||
.nav-chat-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: var(--chat-panel-height);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 24px 80px rgba(62, 39, 35, 0.24);
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: opacity 0.22s ease, visibility 0.22s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
|
||||
.nav-chat.open .nav-chat-panel {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-chat-toggle,
|
||||
.nav-chat-send,
|
||||
.chat-panel-close,
|
||||
@@ -259,31 +307,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
position: fixed;
|
||||
top: 62px;
|
||||
right: 8vw;
|
||||
width: 420px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-top: 3px solid var(--gold);
|
||||
border-radius: 0 0 18px 18px;
|
||||
box-shadow: 0 24px 80px rgba(62, 39, 35, 0.24);
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
transition: opacity 0.22s ease, visibility 0.22s ease,
|
||||
transform 0.22s ease;
|
||||
z-index: 498;
|
||||
}
|
||||
|
||||
.chat-panel.open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.chat-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -308,7 +331,8 @@
|
||||
}
|
||||
|
||||
.chat-history {
|
||||
height: 260px;
|
||||
flex: 1;
|
||||
min-height: 260px;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
@@ -357,29 +381,6 @@
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.chat-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.chat-input-field {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 14px 16px;
|
||||
color: var(--white);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.chat-input-send {
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
color: var(--gold);
|
||||
border-left: 1px solid var(--border);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
section,
|
||||
footer {
|
||||
scroll-margin-top: 72px;
|
||||
@@ -1678,8 +1679,7 @@
|
||||
}
|
||||
|
||||
.nav-links,
|
||||
.nav-chat,
|
||||
.chat-panel {
|
||||
.nav-chat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1761,34 +1761,7 @@
|
||||
<div class="nav-right">
|
||||
<a class="nav-cta-book" href="#story">Book Meeting</a>
|
||||
<div class="nav-chat" id="nav-chat">
|
||||
<button
|
||||
class="nav-chat-toggle"
|
||||
id="nav-chat-toggle"
|
||||
aria-label="Toggle chat history"
|
||||
>
|
||||
💬
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
class="nav-chat-input"
|
||||
id="nav-chat-input"
|
||||
placeholder="Ask your sales agent"
|
||||
aria-label="Ask your AI sales agent"
|
||||
/>
|
||||
<button
|
||||
class="nav-chat-send"
|
||||
id="nav-chat-send"
|
||||
aria-label="Send message"
|
||||
>
|
||||
➤
|
||||
</button>
|
||||
</div>
|
||||
<a class="nav-cta" id="open-modal" href="#">Free Trial</a>
|
||||
<a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="chat-panel" id="chat-panel" aria-hidden="true">
|
||||
<div class="nav-chat-panel chat-panel" id="chat-panel" aria-hidden="true">
|
||||
<div class="chat-panel-header">
|
||||
<span class="chat-panel-title">💬 Sales Agent</span>
|
||||
<button
|
||||
@@ -1800,23 +1773,35 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="chat-history" id="chat-history"></div>
|
||||
<div class="chat-input-row">
|
||||
</div>
|
||||
<div class="nav-chat-main">
|
||||
<button
|
||||
class="nav-chat-toggle"
|
||||
id="nav-chat-toggle"
|
||||
aria-label="Toggle chat history"
|
||||
>
|
||||
💬
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
class="chat-input-field"
|
||||
id="chat-input-field"
|
||||
placeholder="Type a message..."
|
||||
aria-label="Chat message"
|
||||
class="nav-chat-input chat-input-field"
|
||||
id="nav-chat-input"
|
||||
placeholder="Ask your sales agent"
|
||||
aria-label="Ask your AI sales agent"
|
||||
/>
|
||||
<button
|
||||
class="chat-input-send"
|
||||
id="chat-input-send"
|
||||
aria-label="Send"
|
||||
class="nav-chat-send chat-input-send"
|
||||
id="nav-chat-send"
|
||||
aria-label="Send message"
|
||||
>
|
||||
➤
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a class="nav-cta" id="open-modal" href="#">Free Trial</a>
|
||||
<a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-bg-wrap">
|
||||
@@ -2714,8 +2699,6 @@
|
||||
var closeBtn = document.getElementById("chat-panel-close");
|
||||
var navInput = document.getElementById("nav-chat-input");
|
||||
var navSend = document.getElementById("nav-chat-send");
|
||||
var panelInput = document.getElementById("chat-input-field");
|
||||
var panelSend = document.getElementById("chat-input-send");
|
||||
var busy = false;
|
||||
var greeted = false;
|
||||
|
||||
@@ -2743,6 +2726,8 @@
|
||||
}
|
||||
|
||||
function openPanel() {
|
||||
var navChat = document.getElementById("nav-chat");
|
||||
if (navChat) navChat.classList.add("open");
|
||||
panel.classList.add("open");
|
||||
panel.setAttribute("aria-hidden", "false");
|
||||
if (!greeted) {
|
||||
@@ -2752,10 +2737,13 @@
|
||||
"Hi! I’m your Sales Agent. Ask me about plans, setup, customization, or pricing.",
|
||||
);
|
||||
}
|
||||
panel.offsetHeight;
|
||||
scrollLog();
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
var navChat = document.getElementById("nav-chat");
|
||||
if (navChat) navChat.classList.remove("open");
|
||||
panel.classList.remove("open");
|
||||
panel.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
@@ -2769,8 +2757,11 @@
|
||||
appendMsg: appendMsg,
|
||||
openSilent: function () {
|
||||
greeted = true;
|
||||
var navChat = document.getElementById("nav-chat");
|
||||
if (navChat) navChat.classList.add("open");
|
||||
panel.classList.add("open");
|
||||
panel.setAttribute("aria-hidden", "false");
|
||||
panel.offsetHeight;
|
||||
scrollLog();
|
||||
},
|
||||
};
|
||||
@@ -2783,7 +2774,6 @@
|
||||
appendMsg("user", text);
|
||||
openPanel();
|
||||
navInput.value = "";
|
||||
panelInput.value = "";
|
||||
|
||||
var thinkEl = appendMsg("agent", "...");
|
||||
thinkEl.classList.add("chat-thinking");
|
||||
@@ -2837,19 +2827,11 @@
|
||||
if (navSend) navSend.addEventListener("click", function () {
|
||||
send(navInput.value);
|
||||
});
|
||||
if (panelSend) panelSend.addEventListener("click", function () {
|
||||
send(panelInput.value);
|
||||
});
|
||||
if (navInput) {
|
||||
navInput.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Enter") send(navInput.value);
|
||||
});
|
||||
}
|
||||
if (panelInput) {
|
||||
panelInput.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Enter") send(panelInput.value);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("click", function (e) {
|
||||
var nc = document.getElementById("nav-chat");
|
||||
|
||||
Reference in New Issue
Block a user