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

feat: awesome floating chat widget - glass morphism, gradient, glow pulse, slide animation

Browse Source
This commit is contained in:
Oliver
2026-06-07 16:26:35 -03:00
parent bb8bcd3ce9
commit d209b0f563
1 changed files with 250 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+250 -123
View File
@@ -1106,137 +1106,259 @@
} }
} }
/* ── Chat Bar (inline below header) ────────────────── */ /* ── Chat Widget (glowing floating button + glass panel) ── */
.chat-bar { .chat-fab {
display: flex; position: fixed;
flex-direction: column; bottom: 28px;
align-items: flex-start; right: 28px;
margin-top: 60px; z-index: 9999;
padding: 0 24px; width: 60px;
max-width: var(--max-width); height: 60px;
margin-left: auto; border-radius: 50%;
margin-right: auto; background: linear-gradient(135deg, #4f8ef7, #6c5ce7);
}
.chat-bar-panel {
width: 340px;
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;
display: none;
flex-direction: column;
margin-bottom: 8px;
}
.chat-bar-panel.open {
display: flex;
}
.chat-bar-input {
display: flex;
align-items: center;
width: 340px;
max-width: 100%;
height: 36px;
background: var(--bg-inner);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
transition: border-color 0.25s, box-shadow 0.25s;
}
.chat-bar-input:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
}
.chat-bar-toggle,
.chat-bar-send {
background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
height: 100%; box-shadow: 0 4px 24px rgba(79, 142, 247, 0.45), 0 0 0 0 rgba(79, 142, 247, 0.4);
color: var(--accent);
padding: 0 10px;
font-size: 0.85rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 26px;
color: #fff;
transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
animation: fabPulse 2.5s ease-in-out infinite;
} }
.chat-bar-toggle { @keyframes fabPulse {
border-right: 1px solid var(--border); 0%, 100% { box-shadow: 0 4px 24px rgba(79, 142, 247, 0.45), 0 0 0 0 rgba(79, 142, 247, 0.4); }
font-size: 0.8rem; 50% { box-shadow: 0 4px 32px rgba(79, 142, 247, 0.6), 0 0 0 12px rgba(79, 142, 247, 0); }
padding: 0 8px;
} }
.chat-bar-send { .chat-fab:hover {
border-left: 1px solid var(--border); transform: scale(1.12) rotate(-8deg);
box-shadow: 0 6px 36px rgba(79, 142, 247, 0.55);
animation: none;
} }
.chat-bar-field { .chat-fab:active { transform: scale(0.92); }
flex: 1; .chat-fab.open {
min-width: 0; transform: scale(0.88);
padding: 0 10px;
border: none;
outline: none;
background: transparent;
font: inherit;
color: var(--text);
font-size: 0.78rem;
}
.chat-bar-field::placeholder { color: var(--text-muted); }
.chat-msg {
max-width: 85%;
padding: 8px 12px;
border-radius: 12px;
line-height: 1.4;
word-wrap: break-word;
font-size: 12.5px;
}
.chat-msg-bot {
align-self: flex-start;
background: var(--bg-inner);
border-bottom-left-radius: 4px;
}
.chat-msg-user {
align-self: flex-end;
background: var(--accent-dim);
border-bottom-right-radius: 4px;
}
.chat-msg-thinking {
align-self: flex-start;
background: var(--bg-inner);
border-bottom-left-radius: 4px;
opacity: 0.6; opacity: 0.6;
animation: none;
} }
.chat-panel-header { .chat-widget {
position: fixed;
bottom: 100px;
right: 28px;
z-index: 9998;
width: 380px;
max-width: calc(100vw - 56px);
height: 520px;
max-height: calc(100vh - 160px);
background: rgba(26, 29, 39, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(79, 142, 247, 0.25);
border-radius: 22px;
box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 40px rgba(79, 142, 247, 0.08);
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.94);
transform-origin: bottom right;
transition: opacity 0.3s cubic-bezier(.22,1,.36,1), transform 0.35s cubic-bezier(.22,1,.36,1), visibility 0.3s;
}
.chat-widget.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.chat-widget::before {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
padding: 1px;
background: linear-gradient(135deg, rgba(79, 142, 247, 0.35), rgba(108, 92, 231, 0.15), rgba(79, 142, 247, 0.35));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.chat-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 12px;
padding: 12px 16px; padding: 18px 20px 14px;
border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(79, 142, 247, 0.08), rgba(108, 92, 231, 0.04));
font-weight: 600; border-bottom: 1px solid rgba(79, 142, 247, 0.12);
font-size: 13px;
color: var(--text);
} }
.chat-panel-close { .chat-header-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-dim), #2a1f5e);
border: 2px solid var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
position: relative;
}
.chat-header-avatar::after {
content: '';
position: absolute;
bottom: -1px;
right: -1px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--success);
border: 2px solid var(--bg-card);
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-name {
font-weight: 700;
font-size: 14px;
color: var(--text);
letter-spacing: -0.01em;
}
.chat-header-status {
font-size: 11px;
color: var(--success);
display: flex;
align-items: center;
gap: 5px;
}
.chat-header-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--success);
display: inline-block;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.chat-header-close {
background: none; background: none;
border: none; border: none;
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 18px;
padding: 2px 6px; padding: 6px;
line-height: 1; line-height: 1;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
} }
.chat-panel-close:hover { color: var(--text); } .chat-header-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.chat-history { .chat-msgs {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 12px 16px; padding: 16px 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 10px;
scroll-behavior: smooth;
} }
@media (max-width: 700px) { .chat-msgs::-webkit-scrollbar { width: 4px; }
.chat-bar { display: none; } .chat-msgs::-webkit-scrollbar-track { background: transparent; }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.chat-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px 16px;
border-top: 1px solid rgba(79, 142, 247, 0.08);
background: rgba(15, 17, 23, 0.5);
}
.chat-input-box {
flex: 1;
min-width: 0;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: 22px;
outline: none;
background: rgba(18, 21, 31, 0.8);
color: var(--text);
font-size: 13px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input-box:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.1);
}
.chat-input-box::placeholder { color: var(--text-muted); }
.chat-send-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #6c5ce7);
border: none;
cursor: pointer;
color: #fff;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.15s, transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s;
box-shadow: 0 2px 12px rgba(79, 142, 247, 0.3);
}
.chat-send-btn:hover { opacity: 0.9; transform: scale(1.08); box-shadow: 0 4px 16px rgba(79, 142, 247, 0.4); }
.chat-send-btn:active { transform: scale(0.88); }
.chat-send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.chat-msg {
max-width: 80%;
padding: 10px 14px;
border-radius: 16px;
line-height: 1.5;
word-wrap: break-word;
font-size: 13px;
animation: msgSlide 0.25s cubic-bezier(.22,1,.36,1);
}
@keyframes msgSlide {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg-bot {
align-self: flex-start;
background: rgba(26, 29, 39, 0.8);
border: 1px solid rgba(79, 142, 247, 0.1);
border-bottom-left-radius: 4px;
}
.chat-msg-user {
align-self: flex-end;
background: linear-gradient(135deg, var(--accent), #5a7de0);
color: #fff;
border-bottom-right-radius: 4px;
}
.chat-msg-thinking {
align-self: flex-start;
background: rgba(26, 29, 39, 0.6);
border: 1px solid rgba(79, 142, 247, 0.08);
border-bottom-left-radius: 4px;
opacity: 0.5;
}
@media (max-width: 500px) {
.chat-widget {
right: 12px;
bottom: 84px;
width: calc(100vw - 24px);
max-height: calc(100vh - 120px);
}
.chat-fab {
right: 16px;
bottom: 20px;
width: 52px;
height: 52px;
font-size: 22px;
}
}
@media (max-width: 350px) {
.chat-widget { display: none; }
} }
/* ══════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════
@@ -1348,20 +1470,24 @@
</header> </header>
<!-- ═══════════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════════
CHAT BAR (inline — panel above input, pushes it down) CHAT WIDGET (floating bottom-right)
═══════════════════════════════════════════════════════════════ --> ═══════════════════════════════════════════════════════════════ -->
<div class="chat-bar"> <button class="chat-fab" id="chat-fab" onclick="chatToggle()" aria-label="Chat with Sales Agent">
<div class="chat-bar-panel" id="chat-panel" aria-hidden="true"> <svg width="28" height="28" 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>
<div class="chat-panel-header"> </button>
<span class="chat-panel-title">💬 Sales Agent</span> <div class="chat-widget" id="chat-widget" aria-hidden="true">
<button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button> <div class="chat-header">
<div class="chat-header-avatar">⚡</div>
<div class="chat-header-info">
<div class="chat-header-name">Sales Agent</div>
<div class="chat-header-status">Online</div>
</div> </div>
<div class="chat-history" id="chat-msgs"></div> <button class="chat-header-close" onclick="chatClose()" aria-label="Close chat">✕</button>
</div> </div>
<div class="chat-bar-input"> <div class="chat-msgs" id="chat-msgs"></div>
<button class="chat-bar-toggle" id="chat-toggle" onclick="chatToggle()" aria-label="Toggle chat">💬</button> <div class="chat-input-row">
<input type="text" class="chat-bar-field" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" /> <input type="text" class="chat-input-box" id="chat-input" placeholder="Ask your sales agent..." onkeydown="chatKey(event)" />
<button class="chat-bar-send" id="chat-send-btn" onclick="chatSend()">➤</button> <button class="chat-send-btn" id="chat-send-btn" onclick="chatSend()">➤</button>
</div> </div>
</div> </div>
@@ -2226,14 +2352,15 @@
function chatToggle() { function chatToggle() {
chatOpen = !chatOpen; chatOpen = !chatOpen;
document.getElementById('chat-panel').classList.toggle('open', chatOpen); document.getElementById('chat-widget').classList.toggle('open', chatOpen);
document.getElementById('chat-panel').setAttribute('aria-hidden', !chatOpen); document.getElementById('chat-fab').classList.toggle('open', chatOpen);
document.getElementById('chat-widget').setAttribute('aria-hidden', !chatOpen);
if (chatOpen) { if (chatOpen) {
if (!chatId) { if (!chatId) {
chatId = String(Math.floor(100000 + Math.random() * 900000)); chatId = String(Math.floor(100000 + Math.random() * 900000));
chatAppendMsg('bot', "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent."); chatAppendMsg('bot', "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent.");
} }
setTimeout(() => document.getElementById('chat-input').focus(), 100); setTimeout(() => document.getElementById('chat-input').focus(), 300);
} }
} }
@@ -2244,8 +2371,8 @@
function chatOpenSilent() { function chatOpenSilent() {
if (!chatOpen) { if (!chatOpen) {
chatOpen = true; chatOpen = true;
document.getElementById('chat-panel').classList.add('open'); document.getElementById('chat-widget').classList.add('open');
document.getElementById('chat-panel').setAttribute('aria-hidden', 'false'); document.getElementById('chat-widget').setAttribute('aria-hidden', 'false');
} }
} }