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

feat: inline chat bar (panel pushes input down), Hire Agent→#pricing, founder story, clean footer

Browse Source
This commit is contained in:
Oliver
2026-06-07 16:13:09 -03:00
parent 5cf3a4779b
commit b57f88dae4
1 changed files with 197 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+190 -181
View File
@@ -1106,140 +1106,90 @@
} }
} }
/* ── Chat Widget (floating bottom-right) ────────────── */ /* ── Chat Bar (inline below header) ────────────────── */
.chat-fab { .chat-bar {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
width: 56px;
height: 56px;
border-radius: 28px;
background: var(--accent);
border: none;
cursor: pointer;
box-shadow: 0 4px 24px rgba(79, 142, 247, 0.35);
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: center; align-items: flex-start;
font-size: 24px; margin-top: 60px;
color: #fff; padding: 0 24px;
transition: transform 0.2s, box-shadow 0.2s; max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
} }
.chat-fab:hover { .chat-bar-panel {
transform: scale(1.08); width: 340px;
box-shadow: 0 6px 32px rgba(79, 142, 247, 0.5); max-width: 100%;
} height: 300px;
.chat-fab.open {
transform: scale(0.9);
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--accent);
box-shadow: none;
}
.chat-widget {
position: fixed;
bottom: 92px;
right: 24px;
z-index: 9998;
width: 360px;
max-width: calc(100vw - 48px);
height: 460px;
max-height: calc(100vh - 140px);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px; border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,0.5); box-shadow: 0 24px 80px rgba(0,0,0,0.5);
overflow: hidden; overflow: hidden;
display: flex; display: none;
flex-direction: column; flex-direction: column;
opacity: 0; margin-bottom: 8px;
visibility: hidden;
transform: translateY(12px) scale(0.96);
transform-origin: bottom right;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
} }
.chat-widget.open { .chat-bar-panel.open {
opacity: 1; display: flex;
visibility: visible;
transform: translateY(0) scale(1);
} }
.chat-header { .chat-bar-input {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; width: 340px;
padding: 16px 18px 12px; max-width: 100%;
border-bottom: 1px solid var(--border); 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-header-avatar { .chat-bar-input:focus-within {
width: 32px; border-color: var(--accent);
height: 32px; box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
border-radius: 50%; }
background: var(--accent-dim); .chat-bar-toggle,
.chat-bar-send {
background: none;
border: none;
cursor: pointer;
height: 100%;
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: 15px;
flex-shrink: 0;
} }
.chat-header-info { .chat-bar-toggle {
border-right: 1px solid var(--border);
font-size: 0.8rem;
padding: 0 8px;
}
.chat-bar-send {
border-left: 1px solid var(--border);
}
.chat-bar-field {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} padding: 0 10px;
.chat-header-name {
font-weight: 600;
font-size: 13.5px;
color: var(--text);
}
.chat-header-status {
font-size: 11px;
color: var(--success);
display: flex;
align-items: center;
gap: 4px;
}
.chat-header-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
display: inline-block;
}
.chat-header-close {
background: none;
border: none; border: none;
color: var(--text-muted); outline: none;
cursor: pointer; background: transparent;
font-size: 16px; font: inherit;
padding: 4px;
line-height: 1;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.chat-header-close:hover {
color: var(--text); color: var(--text);
background: var(--bg-hover); font-size: 0.78rem;
}
.chat-msgs {
flex: 1;
overflow-y: auto;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
} }
.chat-bar-field::placeholder { color: var(--text-muted); }
.chat-msg { .chat-msg {
max-width: 85%; max-width: 85%;
padding: 9px 14px; padding: 8px 12px;
border-radius: 14px; border-radius: 12px;
line-height: 1.45; line-height: 1.4;
word-wrap: break-word; word-wrap: break-word;
font-size: 13px; font-size: 12.5px;
animation: msgIn 0.2s ease;
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
} }
.chat-msg-bot { .chat-msg-bot {
align-self: flex-start; align-self: flex-start;
@@ -1248,8 +1198,7 @@
} }
.chat-msg-user { .chat-msg-user {
align-self: flex-end; align-self: flex-end;
background: var(--accent); background: var(--accent-dim);
color: #fff;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.chat-msg-thinking { .chat-msg-thinking {
@@ -1258,65 +1207,103 @@
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
opacity: 0.6; opacity: 0.6;
} }
.chat-input-row { .chat-panel-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; justify-content: space-between;
padding: 12px 18px 16px; padding: 12px 16px;
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
} font-weight: 600;
.chat-input-box {
flex: 1;
min-width: 0;
height: 40px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: 20px;
outline: none;
background: var(--bg-inner);
font: inherit;
color: var(--text);
font-size: 13px; font-size: 13px;
transition: border-color 0.2s; color: var(--text);
} }
.chat-input-box:focus { .chat-panel-close {
border-color: var(--accent); background: none;
}
.chat-input-box::placeholder {
color: var(--text-muted);
}
.chat-send-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent);
border: none; border: none;
color: var(--text-muted);
cursor: pointer; cursor: pointer;
color: #fff; font-size: 14px;
font-size: 16px; padding: 2px 6px;
line-height: 1;
}
.chat-panel-close:hover { color: var(--text); }
.chat-history {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
@media (max-width: 700px) {
.chat-bar { display: none; }
}
/* ══════════════════════════════════════════════════════════
FOUNDER STORY
══════════════════════════════════════════════════════════ */
.story-card {
display: flex;
align-items: flex-start;
gap: 40px;
max-width: 760px;
margin: 0 auto;
background: var(--bg-card);
border: 1px solid var(--border-hi);
border-radius: var(--radius-card);
padding: 40px 36px;
box-shadow: var(--shadow);
}
.story-avatar {
flex-shrink: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--accent-dim);
border: 2px solid var(--accent);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; font-size: 40px;
transition: opacity 0.15s, transform 0.1s; color: var(--accent);
overflow: hidden;
} }
.chat-send-btn:hover { opacity: 0.85; } .story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-send-btn:active { transform: scale(0.92); } .story-body { flex: 1; }
.chat-send-btn:disabled { .story-label {
opacity: 0.4; font-size: 11px;
cursor: not-allowed; font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 6px;
} }
@media (max-width: 500px) { .story-body h2 {
.chat-widget { margin-bottom: 16px;
right: 12px; font-size: 1.5rem;
bottom: 84px;
width: calc(100vw - 24px);
max-height: calc(100vh - 120px);
} }
.chat-fab { .story-body p {
right: 12px; font-size: 14px;
bottom: 16px; line-height: 1.7;
color: var(--text-muted);
margin-bottom: 14px;
} }
.story-body p strong { color: var(--text); }
.story-signoff {
font-style: italic;
color: var(--accent) !important;
margin-top: 8px;
font-weight: 500;
}
@media (max-width: 600px) {
.story-card {
flex-direction: column;
align-items: center;
text-align: center;
gap: 24px;
padding: 28px 20px;
}
.story-avatar { width: 72px; height: 72px; font-size: 28px; }
} }
</style> </style>
</head> </head>
@@ -1352,7 +1339,7 @@
</svg> </svg>
Sign In Sign In
</a> </a>
<a href="https://app.derez.ai" class="btn btn-primary btn-signup-header">Hire Agent</a> <a href="#pricing" class="btn btn-primary btn-signup-header">Hire Agent</a>
<button class="hamburger" id="hamburger" aria-label="Toggle menu" onclick="toggleMobile()"> <button class="hamburger" id="hamburger" aria-label="Toggle menu" onclick="toggleMobile()">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</button> </button>
@@ -1361,22 +1348,20 @@
</header> </header>
<!-- ═══════════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════════
CHAT WIDGET (floating bottom-right) CHAT BAR (inline — panel above input, pushes it down)
═══════════════════════════════════════════════════════════════ --> ═══════════════════════════════════════════════════════════════ -->
<button class="chat-fab" id="chat-fab" onclick="chatToggle()" aria-label="Open chat">💬</button> <div class="chat-bar">
<div class="chat-widget" id="chat-widget" aria-hidden="true"> <div class="chat-bar-panel" id="chat-panel" aria-hidden="true">
<div class="chat-header"> <div class="chat-panel-header">
<div class="chat-header-avatar">🤖</div> <span class="chat-panel-title">💬 Sales Agent</span>
<div class="chat-header-info"> <button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button>
<div class="chat-header-name">Sales Agent</div>
<div class="chat-header-status">Online</div>
</div> </div>
<button class="chat-header-close" onclick="chatClose()" aria-label="Close chat">✕</button> <div class="chat-history" id="chat-msgs"></div>
</div> </div>
<div class="chat-msgs" id="chat-msgs"></div> <div class="chat-bar-input">
<div class="chat-input-row"> <button class="chat-bar-toggle" id="chat-toggle" onclick="chatToggle()" aria-label="Toggle chat">💬</button>
<input type="text" class="chat-input-box" id="chat-input" placeholder="Ask your sales agent..." onkeydown="chatKey(event)" /> <input type="text" class="chat-bar-field" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" />
<button class="chat-send-btn" id="chat-send-btn" onclick="chatSend()">➤</button> <button class="chat-bar-send" id="chat-send-btn" onclick="chatSend()">➤</button>
</div> </div>
</div> </div>
@@ -1692,6 +1677,35 @@
</div> </div>
</section> </section>
<!-- ═══════════════════════════════════════════════════════════════
FOUNDER STORY
═══════════════════════════════════════════════════════════════ -->
<section id="story">
<div class="container">
<div class="story-card">
<div class="story-avatar">
<div class="story-avatar-placeholder" style="font-size:40px;">👤</div>
</div>
<div class="story-body">
<div class="story-label">From the Founder</div>
<h2>Why I Built Derez.ai</h2>
<p>
I set up Hermes Agent for my company, ODOO4projects LLC. After days of solid work,
two things hit me: <strong>I couldn't reuse my workflow for a new project without
trashing my current agent's context</strong>, and then — by accident — <strong>I deleted
my entire setup</strong>. No backup. No recovery. Just gone.
</p>
<p>
That's when it clicked: agents need to be <strong>scalable, portable, and backed up</strong>.
A month later, Derez.ai was live — dedicated instances, one-click backups, and a fresh
agent for every project. No more context collisions. No more accidental nukes.
</p>
<p class="story-signoff">— Oliver Arnold, Founder</p>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════════
PRICING PRICING
═══════════════════════════════════════════════════════════════ --> ═══════════════════════════════════════════════════════════════ -->
@@ -1991,9 +2005,6 @@
<div class="container"> <div class="container">
<span>&copy; 2026 Derez.ai &mdash; AI Agent Hosting</span> <span>&copy; 2026 Derez.ai &mdash; AI Agent Hosting</span>
<div class="footer-links"> <div class="footer-links">
<a href="https://app.derez.ai">Dashboard</a>
<a href="#faq">FAQ</a>
<a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener">Hermes Agent</a>
<a href="https://ODOO4projects.com" target="_blank" rel="noopener">Powered by ODOO4projects LLC</a> <a href="https://ODOO4projects.com" target="_blank" rel="noopener">Powered by ODOO4projects LLC</a>
</div> </div>
</div> </div>
@@ -2215,9 +2226,8 @@
function chatToggle() { function chatToggle() {
chatOpen = !chatOpen; chatOpen = !chatOpen;
document.getElementById('chat-widget').classList.toggle('open', chatOpen); document.getElementById('chat-panel').classList.toggle('open', chatOpen);
document.getElementById('chat-fab').classList.toggle('open', chatOpen); document.getElementById('chat-panel').setAttribute('aria-hidden', !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));
@@ -2234,9 +2244,8 @@
function chatOpenSilent() { function chatOpenSilent() {
if (!chatOpen) { if (!chatOpen) {
chatOpen = true; chatOpen = true;
document.getElementById('chat-widget').classList.add('open'); document.getElementById('chat-panel').classList.add('open');
document.getElementById('chat-fab').classList.add('open'); document.getElementById('chat-panel').setAttribute('aria-hidden', 'false');
document.getElementById('chat-widget').setAttribute('aria-hidden', 'false');
} }
} }