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 simple, de style Glassmorphism, avec une palette de couleurs pastel, conçu pour la consommation de contenu. Il dispose d’une mise en page réactive et d’un support de thème sombre.
Composant de fenêtre de chat
Composant de fenêtre de chat tridimensionnel en niveaux de gris pour les tableaux de bord de complexité modérée et les fonctionnalités interactives. Conception réactive avec prise en charge du thème sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat minimaliste pour les sites de commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une complexité modérée et d’une réactivité avec prise en charge du mode sombre. Construit avec HTML et Tailwind CSS.