Composant de la fenêtre de chat - Voyage/Tourisme Skeuomorphic
Un composant de fenêtre de chat complexe et réactif conçu pour les sites Web de voyage/tourisme, avec un style skeuomorphe avec une palette de couleurs analogue et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif conçu selon les principes de Material Design et Tailwind CSS, avec prise en charge du mode sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, réactif, inspiré de la 3D avec une palette de couleurs pastel, conçu pour un portfolio afin de présenter du travail ou des produits. Il inclut la prise en charge du mode sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif conçu selon les principes de Material Design, avec une palette de couleurs automnale adaptée aux organisations à but non lucratif/caritatives. Comprend la prise en charge du mode sombre et des éléments interactifs tels que des bulles de message et un champ de saisie.