HTML 代码
<div class="flex flex-col h-screen bg-amber-50 dark:bg-zinc-950 font-mono text-zinc-800 dark:text-zinc-200 p-4 sm:p-6 lg:p-8">
<!-- Top Bar / Header -->
<div class="flex items-center justify-between p-4 bg-orange-800 dark:bg-zinc-800 text-white rounded-t-lg shadow-md mb-4">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/1018/60/60" alt="Team Logo" class="w-10 h-10 rounded-full border-2 border-white object-cover">
<h2 class="text-lg sm:text-xl font-bold flex flex-col sm:flex-row items-baseline">
<span class="block sm:mr-2">Team 'Apex Predators'</span>
<span class="text-orange-200 text-sm sm:text-base">(Workout 05/11 Chat)</span>
</h2>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
</button>
<button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
</div>
<!-- Chat Area -->
<div class="flex-1 overflow-y-auto p-4 bg-orange-50 dark:bg-zinc-900 rounded-lg shadow-inner mb-4 border border-orange-200 dark:border-zinc-800 space-y-4 sm:space-y-6">
<!-- Message 1 (Other User) -->
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
<div class="flex-1">
<div class="flex items-baseline mb-1">
<span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Coach Mike</span>
<span class="text-xs text-orange-600 dark:text-zinc-400">10:15 AM</span>
</div>
<div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
<p class="text-sm sm:text-base">Alright team, focus on form today. We're hitting those high-intensity reps. Hydrate well!</p>
<div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
</div>
</div>
</div>
<!-- Message 2 (Self) -->
<div class="flex items-start justify-end">
<div class="flex-1 text-right">
<div class="flex items-baseline justify-end mb-1">
<span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:17 AM</span>
<span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
</div>
<div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
<p class="text-sm sm:text-base">Got it, Coach! Ready to push hard. 💪 Any specific warm-up routine you recommend?</p>
<div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
</div>
</div>
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
</div>
<!-- Message 3 (Other user with image) -->
<div class="flex items-start">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
<div class="flex-1">
<div class="flex items-baseline mb-1">
<span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Alex G.</span>
<span class="text-xs text-orange-600 dark:text-zinc-400">10:20 AM</span>
</div>
<div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
<p class="text-sm sm:text-base">Checking in! Here's my progress from yesterday's cardio:</p>
<img src="https://picsum.photos/id/237/300/200" alt="Activity Progress" class="mt-2 rounded-md max-w-full h-auto object-cover">
<div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
</div>
</div>
</div>
<!-- Message 4 (Self - long message) -->
<div class="flex items-start justify-end">
<div class="flex-1 text-right">
<div class="flex items-baseline justify-end mb-1">
<span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:22 AM</span>
<span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
</div>
<div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
<p class="text-sm sm:text-base">Awesome work, Alex! That's a solid run. Keep it up! I'm struggling a bit with my squat depth, considering filming a set today to review it later. Any tips for getting lower without losing form?</p>
<div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
</div>
</div>
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
</div>
<!-- System message / separator -->
<div class="text-center text-xs text-orange-700 dark:text-zinc-500 font-semibold italic my-4">
--- Today ---
</div>
<!-- Pinned message / announcement -->
<div class="flex items-start p-3 bg-brown-700 dark:bg-brown-900 text-white rounded-lg shadow-md border border-brown-600 dark:border-brown-800">
<svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4H9V9h2v5zm-2-7a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path></svg>
<p class="text-sm sm:text-base font-semibold">Reminder: <span class="font-normal">Warm-up drills posted in the 'Resources' channel.</span></p>
</div>
</div>
<!-- Input Area -->
<div class="flex flex-col sm:flex-row items-center p-4 bg-orange-800 dark:bg-zinc-800 rounded-b-lg shadow-md space-y-3 sm:space-y-0 sm:space-x-3">
<button class="p-2 rounded-full text-white bg-orange-700 dark:bg-zinc-700 hover:bg-orange-600 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600 w-full sm:w-auto">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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.486L18 14"></path></svg>
<span class="sr-only">Attach File</span>
</button>
<textarea type="text" placeholder="Message #team-chat (Press Alt+Enter for new line)" class="flex-1 p-3 rounded-lg bg-orange-100 dark:bg-zinc-700 text-orange-900 dark:text-zinc-200 placeholder-orange-400 dark:placeholder-zinc-400 border border-orange-300 dark:border-zinc-600 focus:outline-none focus:border-orange-500 dark:focus:border-zinc-500 resize-none h-12 sm:h-auto min-h-[48px] max-h-[150px]"></textarea>
<button class="p-3 rounded-lg bg-burgundy dark:bg-purple-800 text-white hover:bg-brown-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-burgundy dark:focus:ring-purple-600 w-full sm:w-auto font-semibold">
<svg class="w-6 h-6 inline-block sm:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
<span class="hidden sm:inline-block">Send</span>
</button>
</div>
</div>
<style>
/* Define custom colors for better autumn scheme representation */
.bg-burgundy {
background-color: #8B0000;
}
.text-burgundy {
color: #8B0000;
}
.border-burgundy {
border-color: #8B0000;
}
.hover\:bg-burgundy-light:hover {
background-color: #A52A2A;
}
/* Dark mode variants for custom colors */
.dark .bg-burgundy {
background-color: #6a0000;
}
.dark .text-burgundy {
color: #ae4747;
}
.dark .border-burgundy {
border-color: #6a0000;
}
.dark .hover\:bg-burgundy-light:hover {
background-color: #7c0000;
}
/* Add some brown tones */
.bg-brown-700 {
background-color: #795548;
}
.dark\:bg-brown-900 {
background-color: #4e342e;
}
.border-brown-600 {
border-color: #6d4c41;
}
.dark\:border-brown-800 {
border-color: #3e2723;
}
.hover\:bg-brown-600:hover {
background-color: #6d4c41;
}
/* Adjust max-h for textarea on smaller screens */
@media (max-width: 639px) {
textarea {
max-height: 100px; /* Limit height on mobile */
}
}
</style>