チャットウィンドウコンポーネント - 旅行/観光スキューモーフィック
旅行/観光 Web サイト向けに設計された複雑で応答性の高いチャット ウィンドウ コンポーネントで、類似の配色とダーク モードのサポートを備えたスキューモーフィック スタイルが特徴です。
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>関連コンポーネント
チャットウィンドウコンポーネント
Tailwind CSS を使用したダーク モードをサポートするレスポンシブ チャット ウィンドウ コンポーネント。ユーザー情報を含むヘッダー、受信メッセージと送信メッセージを含むメッセージ領域、および新しいメッセージを入力するためのフッターを備えています。画像は picsum.photos と randomuser.me のプレースホルダーです。