Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chat: move widget to standalone bar below header, panel above input, 340px fixed width, blue border, left-aligned

Browse Source
This commit is contained in:
Oliver
2026-06-06 17:17:54 -03:00
parent c327822bc7
commit 570c9d0951
1 changed files with 37 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+37 -41
View File
@@ -336,7 +336,7 @@
HERO
══════════════════════════════════════════════════════════ */
.hero {
padding: 140px 0 80px;
padding: 104px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
@@ -960,7 +960,7 @@
.features-grid { grid-template-columns: 1fr; }
.hero-stats { gap: 24px; }
.hero { padding: 110px 0 60px; }
.hero { padding: 90px 0 60px; }
section { padding: 60px 0; }
.pricing-card { padding: 32px 24px; }
@@ -971,47 +971,37 @@
}
}
/* ── Nav Chat ──────────────────────────────────────────── */
.nav-chat {
position: relative;
/* ── Chat Bar (standalone below header) ───────────────── */
.nav-chat-wrap {
display: flex;
align-items: center;
flex-direction: column;
align-items: flex-start;
width: 340px;
height: 36px;
--chat-panel-height: 300px;
max-width: 100%;
position: relative;
}
.nav-chat-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 340px;
min-width: 340px;
max-width: 340px;
height: var(--chat-panel-height);
max-width: 100%;
height: 300px;
background: var(--bg-card);
border: 1px solid var(--accent);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
overflow: hidden;
visibility: hidden;
opacity: 0;
pointer-events: none;
display: flex;
display: none;
flex-direction: column;
transition: opacity 0.22s ease, visibility 0.22s ease;
margin-bottom: 8px;
z-index: 9999;
}
.nav-chat.open .nav-chat-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
display: flex;
}
.nav-chat-main {
position: relative;
z-index: 2;
display: flex;
align-items: center;
width: 100%;
width: 340px;
max-width: 100%;
height: 36px;
background: var(--bg-inner);
border: 1px solid var(--border);
@@ -1020,7 +1010,7 @@
flex-shrink: 0;
transition: border-color 0.25s, box-shadow 0.25s;
}
.nav-chat:focus-within .nav-chat-main {
.nav-chat-main:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
}
@@ -1108,7 +1098,7 @@
opacity: 0.6;
}
@media (max-width: 700px) {
.nav-chat { display: none; }
.nav-chat-wrap { display: none; }
}
</style>
</head>
@@ -1136,20 +1126,6 @@
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
<div class="nav-chat" id="nav-chat">
<div class="nav-chat-panel" id="chat-panel" aria-hidden="true">
<div class="chat-panel-header">
<span class="chat-panel-title">💬 Sales Agent</span>
<button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button>
</div>
<div class="chat-history" id="chat-msgs"></div>
</div>
<div class="nav-chat-main">
<button class="nav-chat-toggle" id="nav-chat-toggle" onclick="chatToggle()" aria-label="Toggle chat history">💬</button>
<input type="text" class="nav-chat-input" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" />
<button class="nav-chat-send" id="chat-send-btn" onclick="chatSend()">➤</button>
</div>
</div>
<div class="header-actions">
<a href="https://app.derez.ai" class="btn-login">
@@ -1167,6 +1143,26 @@
</div>
</header>
<!-- ═══════════════════════════════════════════════════════════════
CHAT BAR (standalone below fixed header)
═══════════════════════════════════════════════════════════════ -->
<div class="container" style="padding-top: 66px; padding-bottom: 6px;">
<div class="nav-chat-wrap" id="nav-chat">
<div class="nav-chat-panel" id="chat-panel" aria-hidden="true">
<div class="chat-panel-header">
<span class="chat-panel-title">💬 Sales Agent</span>
<button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button>
</div>
<div class="chat-history" id="chat-msgs"></div>
</div>
<div class="nav-chat-main">
<button class="nav-chat-toggle" id="nav-chat-toggle" onclick="chatToggle()" aria-label="Toggle chat history">💬</button>
<input type="text" class="nav-chat-input" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" />
<button class="nav-chat-send" id="chat-send-btn" onclick="chatSend()">➤</button>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════════════ -->