fix: Make entire NordaGPT banner clickable with hover effect

- Entire banner is now clickable (onclick on div)
- Added hover effect (translateY, shadow, brightness)
- Changed input/button to spans for cleaner click handling
- Fixed title element ID reference

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-01-13 14:41:50 +01:00
parent e87c0556f8
commit 91e42dd668

View File

@ -147,6 +147,13 @@
position: relative;
overflow: hidden;
transition: var(--transition);
cursor: pointer;
}
.chat-banner:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
filter: brightness(1.05);
}
.chat-banner::before {
@ -711,16 +718,14 @@
<!-- NordaGPT Chat Banner -->
{% if current_user.is_authenticated %}
<div class="chat-banner" id="chatBanner">
<div class="chat-banner" id="chatBanner" onclick="openNordaGPT()" style="cursor: pointer;">
<div class="chat-banner-icon">🤖</div>
<div class="chat-banner-content">
<div class="chat-banner-label">NordaGPT - Asystent AI Norda Biznes</div>
<div class="chat-banner-title">Zapytaj o firmy, usługi, wydarzenia...</div>
<div class="chat-banner-title" id="chatBannerTitle">Zapytaj o firmy, usługi, wydarzenia...</div>
<div class="chat-banner-input-wrapper">
<input type="text" class="chat-banner-input" id="chatBannerInput"
placeholder="Np. Kto oferuje usługi IT? Kiedy następne spotkanie?"
onclick="openNordaGPT()" readonly>
<button class="chat-banner-btn" onclick="openNordaGPT()">Rozpocznij chat →</button>
<span class="chat-banner-input">Np. Kto oferuje usługi IT? Kiedy następne spotkanie?</span>
<span class="chat-banner-btn">Rozpocznij chat →</span>
</div>
</div>
</div>
@ -971,9 +976,9 @@
document.body.style.overflow = '';
nordaGPTIsMinimized = true;
// Show banner again with indicator that chat is active
const banner = document.getElementById('chatBanner');
if (banner) {
banner.querySelector('.chat-banner-title').textContent = 'Chat aktywny - kliknij aby kontynuować';
const title = document.getElementById('chatBannerTitle');
if (title) {
title.textContent = 'Chat aktywny - kliknij aby kontynuować';
}
}
@ -983,9 +988,9 @@
document.body.style.overflow = '';
nordaGPTIsMinimized = false;
// Reset banner
const banner = document.getElementById('chatBanner');
if (banner) {
banner.querySelector('.chat-banner-title').textContent = 'Zapytaj o firmy, usługi, wydarzenia...';
const title = document.getElementById('chatBannerTitle');
if (title) {
title.textContent = 'Zapytaj o firmy, usługi, wydarzenia...';
}
}