네온 대시보드 모달
네온/글로우 효과가 있는 복잡하고 반응이 빠른 대시보드 모달로, 가을 색상, 다크 모드 지원 및 대화형 요소를 사용합니다. 데이터 시각화 및 제어판을 위해 설계되었습니다.
HTML 코드
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 backdrop-blur-sm dark:bg-black dark:bg-opacity-85">
<div class="relative w-full max-w-4xl p-8 overflow-hidden rounded-lg shadow-xl bg-gradient-to-br from-orange-800 to-red-900 ring-4 ring-orange-400/50 dark:from-orange-900 dark:to-red-950 dark:ring-red-700/60 transition-all duration-300 transform scale-95 opacity-0 animate-scale-in glow-effect-container">
<style>
@keyframes scale-in {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.animate-scale-in {
animation: scale-in 0.3s ease-out forwards;
}
.glow-effect-container::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 12px; /* Slightly larger than element's border-radius */
background: conic-gradient(from var(--angle), #fb923c, #f97316, #ea580c, #c2410c, #b45309, #fb923c);
background-size: 200% 200%;
filter: blur(15px);
z-index: -1;
animation: rotate 4s linear infinite;
opacity: 0.7;
}
.dark .glow-effect-container::before {
background: conic-gradient(from var(--angle), #ef4444, #dc2626, #b91c1c, #991b1b, #7f1d1d, #ef4444);
}
@keyframes rotate {
to { --angle: 360deg; }
}
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
</style>
<button class="absolute top-4 right-4 text-orange-200 hover:text-orange-100 dark:text-red-300 dark:hover:text-red-200 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-red-400 rounded-full p-2">
<svg class="w-8 h-8" 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>
<h2 class="mb-6 text-4xl font-extrabold text-orange-100 drop-shadow-lg text-center dark:text-red-100 sm:text-5xl">
Dashboard Insights <span class="text-orange-300 dark:text-red-200">Overview</span>
</h2>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Card 1: Sales Performance -->
<div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Sales Performance</h3>
<svg class="w-10 h-10 text-orange-300 dark:text-red-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="M13 7h8m0 0v8m0-8L13 17.5M4 16l3-3m0 0l3-3m-3 3l-3 3M17 14l-3-3m0 0l-3-3m3 3l-3 3"></path></svg>
</div>
<p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">$15.2K</p>
<p class="text-orange-300 dark:text-red-400">+12% from last month</p>
<div class="w-full h-2 mt-4 rounded-full bg-orange-600 dark:bg-red-800 overflow-hidden">
<div class="h-full rounded-full bg-orange-300 dark:bg-red-500 w-3/4"></div>
</div>
</div>
<!-- Card 2: User Engagement -->
<div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">User Engagement</h3>
<svg class="w-10 h-10 text-orange-300 dark:text-red-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="M17 20h5v-5a3 3 0 00-3-3H6a3 3 0 00-3 3v5h5M7 13v-3a2 2 0 012-2h4a2 2 0 012 2v3m7 0l2 2m-2-2l-2-2m2 2L13 9.5"></path></svg>
</div>
<p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">2.8K</p>
<p class="text-orange-300 dark:text-red-400">+5% new sign-ups</p>
<div class="flex items-center mt-4">
<img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
<img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User 2">
<img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User 3">
<span class="ml-2 text-orange-200 dark:text-red-300">+15 more</span>
</div>
</div>
<!-- Card 3: Traffic Sources -->
<div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Traffic Sources</h3>
<svg class="w-10 h-10 text-orange-300 dark:text-red-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="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path></svg>
</div>
<ul class="text-orange-200 dark:text-red-300 space-y-2 text-lg">
<li class="flex justify-between">Direct <span class="font-semibold">40%</span></li>
<li class="flex justify-between">Search <span class="font-semibold">30%</span></li>
<li class="flex justify-between">Referral <span class="font-semibold">20%</span></li>
<li class="flex justify-between">Social <span class="font-semibold">10%</span></li>
</ul>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row justify-end mt-8 gap-4">
<button class="px-8 py-3 rounded-full font-bold text-lg text-orange-100 bg-orange-600 hover:bg-orange-700 ring-2 ring-orange-400 hover:ring-orange-300 dark:bg-red-800 dark:hover:bg-red-900 dark:ring-red-700 dark:hover:ring-red-600 transition-all duration-300 shadow-lg neon-button">
View Full Report
</button>
<button class="px-8 py-3 rounded-full font-bold text-lg text-orange-900 bg-orange-300 hover:bg-orange-200 ring-2 ring-orange-200 hover:ring-orange-100 dark:text-red-900 dark:bg-red-400 dark:hover:bg-red-300 dark:ring-red-300 dark:hover:ring-red-200 transition-all duration-300 shadow-lg neon-button">
Customize Dashboard
</button>
<style>
.neon-button {
box-shadow: 0 0 5px rgba(251, 146, 60, 0.7), 0 0 15px rgba(251, 146, 60, 0.5), 0 0 30px rgba(251, 146, 60, 0.3);
}
.dark .neon-button {
box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), 0 0 15px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
}
.neon-button:hover {
transform: scale(1.03);
box-shadow: 0 0 8px rgba(251, 146, 60, 0.9), 0 0 20px rgba(251, 146, 60, 0.7), 0 0 40px rgba(251, 146, 60, 0.5);
}
.dark .neon-button:hover {
box-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 0 0 20px rgba(239, 68, 68, 0.7), 0 0 40px rgba(239, 68, 68, 0.5);
}
</style>
</div>
</div>
</div>관련 구성 요소
Corporate_Professional_Forum_Modal
포럼/커뮤니티 플랫폼을 위한 복잡하고 반응이 빠르며 전문적인 모달 구성 요소로, 유사한 색 구성표와 다크 모드를 지원합니다.
Modal 구성 요소
전자 상거래를 위한 복잡하고 반응이 빠른 대화형 모달 구성 요소로, 사용자 참여를 위한 보색 구성표와 마이크로 인터랙션이 있습니다. 어두운 테마를 지원합니다.
스큐어모픽 모달 컴포넌트(Skeuomorphic Modal Component)
전자 상거래를 위한 보색이 있는 스큐어모픽 디자인으로 스타일링된 복잡한 반응형 모달 구성 요소입니다.