セッション タイムアウト警告コンポーネント
魅力的なアニメーションをトリガーするセッションタイムアウトアラートコンポーネント。レスポンシブデザインが特徴で、パステルカラーの配色とダークテーマのサポートを備えたダッシュボードに適しています。これにはインタラクティブな要素が含まれており、ユーザーはセッションを延長したりログアウトしたりできます。
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>関連コンポーネント
セッション タイムアウト警告コンポーネント
レスポンシブでダークテーマと互換性のあるセッションタイムアウトアラートコンポーネントで、Glassmorphismスタイル、アーストーン、Tailwind CSSを使用した複雑なレイアウトを備えています。すりガラス効果、ぼかし、ポートフォリオに適した複数のインタラクティブ要素を備えています。
セッション タイムアウト アラート
ダークテーマをサポートするレスポンシブセッションタイムアウトアラートコンポーネントで、パステルカラーを使用したミニマリスト/フラットな美学で設計されています。ダッシュボード環境に適した、明確なタイポグラフィとユーザーインタラクションのための微妙な視覚的な手がかりを備えたすっきりとしたレイアウトが特徴です。
セッション タイムアウト警告コンポーネント
glassmorphism スタイルで設計され、ダークテーマに適したレスポンシブセッションタイムアウトアラートコンポーネント。パステルカラーの配色、ぼかし効果のあるすりガラスのような半透明の要素、カウントダウンタイマーやアクションボタンなどのインタラクティブ機能が特徴です。