HTML 代码
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-70 backdrop-blur-sm">
<div class="relative w-full max-w-lg mx-auto overflow-hidden text-white rounded-lg shadow-xl dark:shadow-purple-glow bg-gradient-to-br from-gray-900 to-black border-2 border-purple-600 dark:border-purple-500 animate-fade-in-up">
<!-- Close Button - Top Right -->
<button class="absolute top-3 right-3 p-2 text-purple-300 hover:text-cyan-400 focus:outline-none transition-colors duration-300 z-10">
<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>
<!-- Header with animated border -->
<div class="p-6 pb-4 border-b-2 border-purple-600 relative overflow-hidden">
<h2 class="text-3xl font-bold text-center text-purple-300 dark:text-purple-400 drop-shadow-lg leading-tight">
<span class="text-cyan-400">//</span> MODULE 01: NEURAL NETWORKS <span class="text-cyan-400">//</span>
</h2>
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-scan"></div>
</div>
<!-- Content Area -->
<div class="p-6 space-y-6 md:p-8">
<p class="text-gray-300 text-lg leading-relaxed dark:text-gray-400">
Dive deep into the pulsating heart of artificial intelligence. Unravel the mysteries of perceptrons, backpropagation, and the very fabric of machine cognition.
</p>
<div class="relative w-full h-48 rounded-md overflow-hidden border border-cyan-500 shadow-lg shadow-cyan-900/50">
<img src="https://picsum.photos/600/300?random=1" alt="Course thumbnail" class="object-cover object-center w-full h-full opacity-80 group-hover:opacity-100 transition-opacity duration-300" />
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center group-hover:bg-opacity-30 transition-all duration-300">
<span class="text-xl font-semibold text-white/90 drop-shadow-md">Visualizing the Network</span>
</div>
</div>
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 py-2 border-t-2 border-b-2 border-purple-800 dark:border-purple-900 bg-gray-900/50">
<div class="flex items-center gap-3">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor Avatar" class="w-10 h-10 rounded-full border-2 border-cyan-400 shadow-md" />
<span class="text-sm text-gray-200">Lead Instructor: <span class="font-medium text-purple-300">Dr. Evelyn Reed</span></span>
</div>
<div class="flex items-center gap-4 text-sm text-gray-300">
<span class="flex items-center gap-1">
<svg class="w-4 h-4 text-cyan-400" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
60 min
</span>
<span class="flex items-center gap-1">
<svg class="w-4 h-4 text-purple-400" 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="M5 13l4 4L19 7"></path>
</svg>
Expert Level
</span>
</div>
</div>
<div class="space-y-4">
<h3 class="text-xl font-bold text-cyan-400">Key Concepts:</h3>
<ul class="list-none p-0 m-0 space-y-2">
<li class="flex items-start gap-2 text-gray-300">
<svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
Understanding Perceptrons and Activation Functions.
</li>
<li class="flex items-start gap-2 text-gray-300">
<svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
Implementing Backpropagation for Learning.
</li>
<li class="flex items-start gap-2 text-gray-300">
<svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
Exploring Convolutional and Recurrent Networks.
</li>
</ul>
</div>
</div>
<!-- Footer Buttons -->
<div class="p-6 pt-4 flex flex-col sm:flex-row justify-end gap-3 border-t-2 border-purple-600">
<button class="px-6 py-3 text-sm font-semibold rounded-md transition-all duration-300
bg-transparent border-2 border-purple-500 text-purple-300
hover:bg-purple-700 hover:border-purple-700 hover:text-white
focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900
dark:hover:bg-purple-600 dark:border-purple-600 dark:focus:ring-offset-black">
<span class="text-cyan-400 text-lg mr-1"><<</span> Back to Modules
</button>
<button class="px-8 py-3 text-sm font-bold rounded-md transition-all duration-300
bg-cyan-500 text-gray-900 border-2 border-cyan-500
shadow-lg shadow-cyan-500/50
hover:bg-cyan-400 hover:shadow-cyan-400/60
focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-gray-900
dark:bg-cyan-600 dark:hover:bg-cyan-500 dark:shadow-cyan-600/50 dark:focus:ring-offset-black">
Enroll Now <span class="text-purple-900 text-lg ml-1">//</span>
</button>
</div>
</div>
<!-- Custom CSS for animations and glows (typically in Tailwind config or external CSS) -->
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fadeIn 0.4s ease-out forwards;
}
@keyframes scan {
0% { transform: translateX(-100%); }
50% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
.animate-scan {
animation: scan 3s infinite linear;
}
.dark .dark\:shadow-purple-glow {
box-shadow: 0 0 15px rgba(168, 85, 247, 0.7), 0 0 30px rgba(168, 85, 247, 0.5);
}
</style>
</div>