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

feat: move chat toggle to nav bar, remove floating button, trim nav items

Browse Source
This commit is contained in:
Oliver
2026-06-06 16:48:05 -03:00
parent bd4b5d65d0
commit 22cdcc21c1
1 changed files with 16 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -47
View File
@@ -971,41 +971,13 @@
}
}
/* ── Chat Widget ─────────────────────────────────────────── */
.chat-widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
font-size: 14px;
line-height: 1.5;
}
.chat-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 60px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 20px rgba(79, 142, 247, 0.35);
transition: opacity 0.25s, transform 0.25s;
}
.chat-toggle:hover {
opacity: 0.9;
transform: scale(1.04);
}
.chat-toggle svg { flex-shrink: 0; }
/* ── Chat Panel (fixed overlay, toggled from nav) ──────── */
.chat-panel {
display: none;
flex-direction: column;
position: fixed;
bottom: 80px;
right: 24px;
bottom: 20px;
right: 20px;
width: 360px;
max-height: 520px;
background: var(--bg-card);
@@ -1013,6 +985,7 @@
border-radius: var(--radius-card);
box-shadow: var(--shadow);
overflow: hidden;
z-index: 9999;
animation: chatSlideUp 0.28s ease;
}
.chat-panel.open { display: flex; }
@@ -1114,11 +1087,9 @@
right: 10px;
left: 10px;
width: auto;
bottom: 72px;
bottom: 10px;
max-height: 60vh;
}
.chat-widget { bottom: 14px; right: 14px; }
.chat-toggle { padding: 10px 16px; font-size: 13px; }
}
</style>
</head>
@@ -1143,11 +1114,9 @@
</a>
<ul class="nav-links" id="nav-links">
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#agents">Agents</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#" onclick="chatToggle(); return false;">Chat with Sales Agent</a></li>
</ul>
<div class="header-actions">
@@ -1864,7 +1833,6 @@
function chatToggle() {
chatOpen = !chatOpen;
document.getElementById("chat-panel").classList.toggle("open", chatOpen);
document.getElementById("chat-toggle-btn").classList.toggle("active", chatOpen);
if (chatOpen) {
if (!chatId) {
chatId = String(Math.floor(100000 + Math.random() * 900000));
@@ -2022,14 +1990,7 @@
})();
</script>
<!-- ── Chat Widget ───────────────────────────────────────────── -->
<div class="chat-widget" id="chat-widget">
<button class="chat-toggle" id="chat-toggle-btn" onclick="chatToggle()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
Talk to Us
</button>
<!-- ── Chat Panel (fixed overlay, toggled from nav) ────────── -->
<div class="chat-panel" id="chat-panel">
<div class="chat-header">
<span>Sales Agent</span>
@@ -2041,7 +2002,6 @@
<button id="chat-send-btn" onclick="chatSend()">Send</button>
</div>
</div>
</div>
</body>
</html>