Componente della finestra di chat - Skeuomorphic di viaggi/turismo
Un componente complesso e reattivo della finestra di chat progettato per siti Web di viaggi/turismo, caratterizzato da uno stile scheumorfico con una combinazione di colori analoga e supporto per la modalità scura.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl h-[80vh] min-h-[600px] flex flex-col rounded-3xl shadow-2xl overflow-hidden
bg-gradient-to-br from-blue-200 to-indigo-200 dark:from-gray-700 dark:to-gray-900
border-4 border-solid border-blue-300 dark:border-gray-600
p-1 sm:p-2">
<!-- Chat Window Glassmorphic Frame -->
<div class="flex-1 flex flex-col bg-white/60 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30
relative overflow-hidden">
<!-- Header Bar -->
<div class="flex items-center justify-between p-4 sm:p-5 border-b border-white/50 dark:border-gray-700/50
bg-blue-300/80 dark:bg-gray-800/80 rounded-t-2xl shadow-md z-10
text-blue-900 dark:text-gray-100 font-semibold text-lg sm:text-xl">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden border-2 border-blue-500 dark:border-gray-500 shadow-md">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
</div>
<div>
<p>Travel Assistant</p>
<p class="text-sm text-blue-800 dark:text-gray-300 font-normal">Online</p>
</div>
</div>
<div class="flex space-x-3 text-blue-700 dark:text-gray-300">
<button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg></button>
<button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg></button>
</div>
</div>
<!-- Chat Messages Area -->
<div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar">
<!-- Operator Message -->
<div class="flex items-start mb-6">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
</div>
<div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
<div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
<p class="text-sm sm:text-base text-blue-900 dark:text-gray-100">Hello! I'm your travel assistant. How can I help you plan your next adventure?</p>
</div>
</div>
<!-- User Message -->
<div class="flex justify-end items-start mb-6">
<div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
<div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
<p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Hi! I'm looking for a tropical getaway in December. Any recommendations?</p>
</div>
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
</div>
</div>
<!-- Operator Message with Image -->
<div class="flex items-start mb-6">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
</div>
<div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
<div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
<p class="text-sm sm:text-base text-blue-900 dark:text-gray-100 mb-2">December is perfect for the Caribbean! How about a relaxing stay in Barbados?</p>
<img src="https://picsum.photos/400/250?random=1" alt="Barbados Beach" class="rounded-lg mt-2 shadow-md border border-blue-400/50 dark:border-gray-600/50">
<p class="text-xs text-blue-800 dark:text-gray-300 mt-2">Click for details or more options!</p>
</div>
</div>
<!-- User Message, more text -->
<div class="flex justify-end items-start mb-6">
<div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
<div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
<p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Barbados sounds lovely! What about flight and accommodation packages? I'm looking for something all-inclusive and relaxing, perhaps a resort with spa facilities.</p>
</div>
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
</div>
</div>
</div>
<!-- Input Area -->
<div class="p-4 sm:p-5 flex items-center space-x-3 sm:space-x-4 border-t border-white/50 dark:border-gray-700/50
bg-gradient-to-r from-blue-300/80 to-indigo-300/80 dark:from-gray-800/80 dark:to-gray-900/80
rounded-b-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30 z-10">
<button class="p-2 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-gray-600 dark:hover:bg-gray-500
text-white shadow-md transition-colors duration-200 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" /></svg>
</button>
<input type="text" placeholder="Type your message..." class="flex-1 p-3 sm:p-4 rounded-xl
bg-white/80 dark:bg-gray-700/80 border border-blue-400 dark:border-gray-600
text-blue-900 dark:text-gray-100 placeholder-blue-700/70 dark:placeholder-gray-300/70
shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-gray-500
transition-all duration-200 text-sm sm:text-base">
<button class="p-2 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-purple-600 dark:hover:bg-purple-700
text-white shadow-lg transition-colors duration-200 flex-shrink-0 rotate-45 -mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
</button>
</div>
</div>
</div>
<!-- Custom Scrollbar Styles (typically in a separate CSS file or a style tag if compiled) -->
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(var(--tw-fill-blue-200), 0.5); /* Using Tailwind var for blue-200 */
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(var(--tw-fill-blue-500), 0.7); /* Using Tailwind var for blue-500 */
border-radius: 10px;
border: 2px solid rgba(var(--tw-fill-blue-200), 0.5); /* Match track color */
}
.custom-scrollbar::-m-scrollbar-thumb {
background-color: rgba(var(--tw-fill-blue-500), 0.7);
border-radius: 10px;
border: 2px solid rgba(var(--tw-fill-blue-200), 0.5);
}
/* Dark mode scrollbar styles */
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: rgba(var(--tw-fill-gray-800), 0.5);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(var(--tw-fill-gray-600), 0.7);
border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
}
.dark .custom-scrollbar::-m-scrollbar-thumb {
background-color: rgba(var(--tw-fill-gray-600), 0.7);
border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
}
.shadow-inner-lg {
box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.1), inset 0 0px 8px rgba(0, 0, 0, 0.05);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.4), inset 0 0px 8px rgba(0, 0, 0, 0.2);
}
</style>
<!-- Emulate Tailwind CSS variables for custom scrollbar (for browser compatibility) -->
<script>
document.documentElement.style.setProperty('--tw-fill-blue-100', '219, 234, 254');
document.documentElement.style.setProperty('--tw-fill-blue-200', '191, 219, 254');
document.documentElement.style.setProperty('--tw-fill-blue-300', '147, 197, 253');
document.documentElement.style.setProperty('--tw-fill-blue-400', '96, 165, 250');
document.documentElement.style.setProperty('--tw-fill-blue-500', '59, 130, 246');
document.documentElement.style.setProperty('--tw-fill-purple-100', '233, 213, 255');
document.documentElement.style.setProperty('--tw-fill-purple-200', '221, 214, 254');
document.documentElement.style.setProperty('--tw-fill-purple-300', '196, 181, 253');
document.documentElement.style.setProperty('--tw-fill-gray-700', '55, 65, 81');
document.documentElement.style.setProperty('--tw-fill-gray-800', '31, 41, 55');
document.documentElement.style.setProperty('--tw-fill-gray-900', '17, 24, 39');
document.documentElement.style.setProperty('--tw-fill-gray-600', '75, 85, 99');
document.documentElement.style.setProperty('--tw-fill-gray-500', '107, 114, 128');
// Toggles dark mode for demonstration
// For a real app, integrate with your theme management
// function toggleDarkMode() {
// document.documentElement.classList.toggle('dark');
// }
// document.addEventListener('DOMContentLoaded', () => {
// // Check for preferred theme or user setting
// if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
// document.documentElement.classList.add('dark');
// } else {
// document.documentElement.classList.remove('dark');
// }
// });
</script>
</div>
Componenti correlati
RetroChatWindow
Un componente per la finestra di chat in stile retrò/vintage che utilizza Tailwind CSS, con design reattivo e supporto per la modalità oscura. Include messaggi segnaposto e avatar. Niente JavaScript.
Componente della finestra di chat
Un semplice componente della finestra di chat con microinterazioni, design reattivo e supporto per temi scuri, adatto per blog o consumo di contenuti.
Componente della finestra di chat
Un componente reattivo della finestra di chat con supporto per la modalità oscura, progettato per l'uso aziendale con microinterazioni sottili. Utilizza una combinazione di colori monocromatica. Non è richiesto alcun JavaScript.