セッション タイムアウト警告コンポーネント
魅力的なアニメーションをトリガーするセッションタイムアウトアラートコンポーネント。レスポンシブデザインが特徴で、パステルカラーの配色とダークテーマのサポートを備えたダッシュボードに適しています。これにはインタラクティブな要素が含まれており、ユーザーはセッションを延長したりログアウトしたりできます。
HTMLコード
<div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
<div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
<div class="flex justify-around mt-4">
<button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
<button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
</div>
</div>
<div class="absolute bottom-2 right-2">
<img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
</div>
</div>関連コンポーネント
セッション タイムアウト アラート コンポーネント - アールデコ調のキャンディー テーマ
アールデコ調のデザインで、明るいキャンディーカラーを使用したシンプルで応答性の高いセッションタイムアウトアラートコンポーネント。ドキュメント/Wikiサイト向けに最適化されており、ダークモードがサポートされています。
セッション タイムアウト アラート
Session Timeout Alert Component は、Microinteractions スタイル、レスポンシブエフェクト、ダークテーマのサポートを備えています。
Skeuomorphic セッション タイムアウト アラート
ブログ/コンテンツサイト向けに設計された、グレースケールカラーのシンプルなSkeuomorphicスタイルのセッションタイムアウトアラートコンポーネント。レスポンシブデザインとダークモードのサポートが含まれています。