Oliver/my-biz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working

Browse Source
This commit is contained in:
oliver
2026-04-25 06:13:51 -03:00
parent 3ac948e01b
commit c6f6942701
1 changed files with 102 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+102 -120
View File
@@ -142,22 +142,70 @@
} }
.nav-chat { .nav-chat {
position: relative;
display: flex; display: flex;
align-items: center; align-items: flex-end;
width: 360px; width: 360px;
height: 38px; height: 38px;
background: rgba(93, 64, 55, 0.06); min-height: 38px;
border: 1px solid var(--border); --chat-panel-height: 304px;
border-radius: 999px; overflow: visible;
overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
transition: border-color 0.25s, box-shadow 0.25s;
} }
.nav-chat:focus-within { .nav-chat:focus-within {
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-glow); 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-toggle,
.nav-chat-send, .nav-chat-send,
.chat-panel-close, .chat-panel-close,
@@ -259,31 +307,6 @@
display: none; 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 { .chat-panel-header {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -308,7 +331,8 @@
} }
.chat-history { .chat-history {
height: 260px; flex: 1;
min-height: 260px;
overflow-y: auto; overflow-y: auto;
padding: 16px; padding: 16px;
display: flex; display: flex;
@@ -357,29 +381,6 @@
color: var(--grey); 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, section,
footer { footer {
scroll-margin-top: 72px; scroll-margin-top: 72px;
@@ -1678,8 +1679,7 @@
} }
.nav-links, .nav-links,
.nav-chat, .nav-chat {
.chat-panel {
display: none; display: none;
} }
@@ -1761,63 +1761,48 @@
<div class="nav-right"> <div class="nav-right">
<a class="nav-cta-book" href="#story">Book Meeting</a> <a class="nav-cta-book" href="#story">Book Meeting</a>
<div class="nav-chat" id="nav-chat"> <div class="nav-chat" id="nav-chat">
<button <div class="nav-chat-panel chat-panel" id="chat-panel" aria-hidden="true">
class="nav-chat-toggle" <div class="chat-panel-header">
id="nav-chat-toggle" <span class="chat-panel-title">&#128172; Sales Agent</span>
aria-label="Toggle chat history" <button
> class="chat-panel-close"
&#128172; id="chat-panel-close"
</button> aria-label="Close chat"
<input >
type="text" &#10005;
class="nav-chat-input" </button>
id="nav-chat-input" </div>
placeholder="Ask your sales agent" <div class="chat-history" id="chat-history"></div>
aria-label="Ask your AI sales agent" </div>
/> <div class="nav-chat-main">
<button <button
class="nav-chat-send" class="nav-chat-toggle"
id="nav-chat-send" id="nav-chat-toggle"
aria-label="Send message" aria-label="Toggle chat history"
> >
&#10148; &#128172;
</button> </button>
<input
type="text"
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="nav-chat-send chat-input-send"
id="nav-chat-send"
aria-label="Send message"
>
&#10148;
</button>
</div>
</div> </div>
<a class="nav-cta" id="open-modal" href="#">Free Trial</a> <a class="nav-cta" id="open-modal" href="#">Free Trial</a>
<a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a> <a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a>
</div> </div>
</nav> </nav>
<div class="chat-panel" id="chat-panel" aria-hidden="true">
<div class="chat-panel-header">
<span class="chat-panel-title">&#128172; Sales Agent</span>
<button
class="chat-panel-close"
id="chat-panel-close"
aria-label="Close chat"
>
&#10005;
</button>
</div>
<div class="chat-history" id="chat-history"></div>
<div class="chat-input-row">
<input
type="text"
class="chat-input-field"
id="chat-input-field"
placeholder="Type a message..."
aria-label="Chat message"
/>
<button
class="chat-input-send"
id="chat-input-send"
aria-label="Send"
>
&#10148;
</button>
</div>
</div>
<section class="hero" id="home"> <section class="hero" id="home">
<div class="hero-bg-wrap"> <div class="hero-bg-wrap">
<img <img
@@ -2714,8 +2699,6 @@
var closeBtn = document.getElementById("chat-panel-close"); var closeBtn = document.getElementById("chat-panel-close");
var navInput = document.getElementById("nav-chat-input"); var navInput = document.getElementById("nav-chat-input");
var navSend = document.getElementById("nav-chat-send"); 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 busy = false;
var greeted = false; var greeted = false;
@@ -2743,6 +2726,8 @@
} }
function openPanel() { function openPanel() {
var navChat = document.getElementById("nav-chat");
if (navChat) navChat.classList.add("open");
panel.classList.add("open"); panel.classList.add("open");
panel.setAttribute("aria-hidden", "false"); panel.setAttribute("aria-hidden", "false");
if (!greeted) { if (!greeted) {
@@ -2752,10 +2737,13 @@
"Hi! I’m your Sales Agent. Ask me about plans, setup, customization, or pricing.", "Hi! I’m your Sales Agent. Ask me about plans, setup, customization, or pricing.",
); );
} }
panel.offsetHeight;
scrollLog(); scrollLog();
} }
function closePanel() { function closePanel() {
var navChat = document.getElementById("nav-chat");
if (navChat) navChat.classList.remove("open");
panel.classList.remove("open"); panel.classList.remove("open");
panel.setAttribute("aria-hidden", "true"); panel.setAttribute("aria-hidden", "true");
} }
@@ -2769,8 +2757,11 @@
appendMsg: appendMsg, appendMsg: appendMsg,
openSilent: function () { openSilent: function () {
greeted = true; greeted = true;
var navChat = document.getElementById("nav-chat");
if (navChat) navChat.classList.add("open");
panel.classList.add("open"); panel.classList.add("open");
panel.setAttribute("aria-hidden", "false"); panel.setAttribute("aria-hidden", "false");
panel.offsetHeight;
scrollLog(); scrollLog();
}, },
}; };
@@ -2783,7 +2774,6 @@
appendMsg("user", text); appendMsg("user", text);
openPanel(); openPanel();
navInput.value = ""; navInput.value = "";
panelInput.value = "";
var thinkEl = appendMsg("agent", "..."); var thinkEl = appendMsg("agent", "...");
thinkEl.classList.add("chat-thinking"); thinkEl.classList.add("chat-thinking");
@@ -2837,19 +2827,11 @@
if (navSend) navSend.addEventListener("click", function () { if (navSend) navSend.addEventListener("click", function () {
send(navInput.value); send(navInput.value);
}); });
if (panelSend) panelSend.addEventListener("click", function () {
send(panelInput.value);
});
if (navInput) { if (navInput) {
navInput.addEventListener("keydown", function (e) { navInput.addEventListener("keydown", function (e) {
if (e.key === "Enter") send(navInput.value); 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) { document.addEventListener("click", function (e) {
var nc = document.getElementById("nav-chat"); var nc = document.getElementById("nav-chat");