会话超时警报组件 - 水彩/艺术

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85 font-sans">
  <div class="relative w-full max-w-md p-6 overflow-hidden rounded-3xl shadow-2xl backdrop-blur-sm dark:shadow-purple-900/50 transform transition-all duration-300 ease-in-out scale-100 opacity-100
      bg-gradient-to-br from-purple-200 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-blue-800 dark:to-green-800
      border border-purple-300 dark:border-purple-700
      flex flex-col items-center text-center
      " style="background-image: url('https://picsum.photos/seed/watercolor_bg/800/600?blur=1'); background-size: cover; background-position: center; border-radius: 2rem;">

        <!-- Artistic Overlay / Texture -->
        <div class="absolute inset-0 bg-gradient-to-br from-red-500/20 via-yellow-500/20 to-blue-500/20 opacity-70 dark:opacity-50" style="mask-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'noiseFilter\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.5\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feComposite operator=\'in\' in2=\'SourceGraphic\' result=\'comp\'></feComposite></filter><rect width=\'100%\' height=\'100%\' filter=\'url(#noiseFilter)\'/></svg>'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; z-index: 0; border-radius: 2rem;"></div>

        <!-- Content Wrapper with internal padding -->
        <div class="relative z-10 p-4 sm:p-6 lg:p-8 ">
            <div class="relative mb-6 w-24 h-24 sm:w-28 sm:h-28 mx-auto -mt-16 sm:-mt-20 lg:-mt-24 rounded-full p-2
                        bg-gradient-to-br from-red-400 via-orange-400 to-yellow-400 dark:from-red-600 dark:via-orange-600 dark:to-yellow-600
                        shadow-lg ring-4 ring-white dark:ring-gray-800 transform rotate-3 hover:rotate-0 transition-transform duration-300">
                <svg class="h-full w-full text-white dark:text-gray-200 p-2" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Zm0 13a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm0-8a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1Z"/>
                </svg>
            </div>

            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                       bg-clip-text text-transparent
                       bg-gradient-to-r from-purple-700 via-pink-500 to-red-500
                       dark:from-blue-400 dark:via-green-300 dark:to-yellow-200 line-clamp-2">
                Session Ending Soon!
            </h2>

            <p class="text-base sm:text-lg lg:text-xl text-gray-700 dark:text-gray-200 mb-6 font-medium leading-relaxed max-w-prose mx-auto">
                Your session is about to expire. Would you like to stay logged in or log out?
            </p>

            <div class="flex flex-col sm:flex-row justify-center gap-4 w-full">
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-gradient-to-br from-blue-400 via-teal-400 to-green-400 text-white shadow-md
                                hover:from-blue-500 hover:via-teal-500 hover:to-green-500
                                focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75
                                dark:from-blue-600 dark:via-teal-600 dark:to-green-600 dark:hover:from-blue-700 dark:hover:via-teal-700 border border-blue-500 dark:border-blue-700">
                    Extend Session
                </button>
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-white text-gray-800 shadow-md border border-gray-300
                                hover:bg-gray-100 hover:text-gray-900
                                focus:outline-none focus:ring-4 focus:ring-gray-300 focus:ring-opacity-75
                                dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white">
                    Log Out
                </button>
            </div>

            <div class="mt-8 text-sm sm:text-base text-gray-500 dark:text-gray-400">
                <p class="mb-2"><span class="font-semibold">Automatic logout in:</span> <span class="text-purple-600 dark:text-blue-400 font-bold text-lg">02:30</span></p>
                <p>Enjoy your shopping experience!</p>
            </div>

            <!-- Artistic Footer Element -->
            <div class="mt-8 h-2 w-3/4 mx-auto rounded-full
                        bg-gradient-to-r from-red-300 via-purple-300 to-blue-300
                        dark:from-red-600 dark:via-purple-600 dark:to-blue-600
                        shadow-inner opacity-80"></div>
        </div>
    </div>
</div>