Neon_Glow_Gaming_Layout
네온/글로우 효과와 그레이스케일 색 구성표가 있는 복잡하고 반응이 빠른 게임 레이아웃 구성 요소로 다크 모드를 지원합니다.
HTML 코드
<div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-black dark:text-gray-100 font-mono overflow-hidden">
<!-- Global Glow Background (Pseudo-elements or JS for better control, but using divs for pure HTML/CSS) -->
<div class="absolute inset-0 z-0 opacity-20">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gray-700/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow"></div>
<div class="absolute top-1/2 left-3/4 w-80 h-80 bg-gray-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-2000"></div>
<div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-gray-600/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-4000"></div>
</div>
<!-- Main Content Container with Z-index to be above glows -->
<div class="relative z-10 container mx-auto px-4 py-8 md:py-12 lg:py-16">
<!-- Header -->
<header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 border-b-2 border-gray-700 pb-4">
<h1 class="text-4xl lg:text-5xl font-extrabold tracking-in-contract text-gray-100 drop-shadow-lg [text-shadow:_0_0_10px_rgb(255_255_255_/_0.5),_0_0_20px_rgb(255_255_255_/_0.3)] mb-4 md:mb-0">
NEON NEXUS
</h1>
<nav class="flex space-x-6 text-gray-400 text-lg">
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Home
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Games
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Community
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
<a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
Profile
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
</a>
</nav>
</header>
<!-- Main Layout Grid -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Left Sidebar (Player Info / Quick Menu) -->
<aside class="lg:col-span-1 border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<div class="flex flex-col items-center mb-6">
<img class="w-24 h-24 rounded-full border-2 border-gray-700 p-1 mb-4 glow-avatar" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
<h3 class="text-2xl font-bold text-gray-100 glow-text">GamerTagX</h3>
<span class="text-sm text-gray-400">Level 99 - Elite</span>
</div>
<ul class="space-y-4 text-gray-300">
<li class="hover:text-gray-100 transition-colors duration-300">
<a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
<svg class="w-6 h-6 mr-2 glow-icon" 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.75 17L9 20l-1 1h4l-1-1 1-6M7 10h10a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8a2 2 0 012-2z"></path></svg>
My Library
</a>
</li>
<li class="hover:text-gray-100 transition-colors duration-300">
<a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
<svg class="w-6 h-6 mr-2 glow-icon" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Chat Rooms
</a>
</li>
<li class="hover:text-gray-100 transition-colors duration-300">
<a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
<svg class="w-6 h-6 mr-2 glow-icon" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Settings
</a>
</li>
</ul>
<button class="mt-8 w-full py-3 border border-gray-700 bg-gray-800/50 text-gray-200 rounded-md hover:bg-gray-700/70 transition-colors duration-300 glow-button">
Logout
</button>
</aside>
<!-- Main Content Area (Featured Games / News) -->
<main class="lg:col-span-2 space-y-8">
<!-- Featured Game Carousel (Simplified) -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Featured Warzone</h2>
<div class="relative w-full h-64 md:h-80 rounded-md overflow-hidden border border-gray-700 glow-inset">
<img class="w-full h-full object-cover object-center " src="https://picsum.photos/1200/600?random=1" alt="Featured Game 1">
<div class="absolute inset-0 bg-gradient-to-t from-gray-950 to-transparent flex items-end p-6">
<h3 class="text-2xl font-bold text-gray-50 glow-text drop-shadow-md">CYBERPUNK ARENA 2077</h3>
<button class="absolute bottom-6 right-6 px-5 py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button-play">
Play Now
</button>
</div>
</div>
<div class="flex justify-center mt-4 space-x-2">
<span class="block w-3 h-3 rounded-full bg-gray-600 glow-dot-active"></span>
<span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
<span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
</div>
</section>
<!-- Latest News/Updates -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Latest Intel & Updates</h2>
<div class="space-y-6">
<article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
<img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=2" alt="News Item 1">
<div>
<h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Patch 1.0.5 'Phantom Echoes' Released!</h3>
<p class="text-gray-400 text-sm">Major balance changes for all classes, new map 'The Void', and enhanced anti-cheat measures. Download now!</p>
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Read More →</a>
</div>
</article>
<article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
<img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=3" alt="News Item 2">
<div>
<h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Community Tournament Sign-ups Open</h3>
<p class="text-gray-400 text-sm">Compete for glory and exclusive in-game rewards! Register your team before April 30th.</p>
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Sign Up →</a>
</div>
</article>
</div>
</section>
</main>
<!-- Right Sidebar (Live Stream / Friends List) -->
<aside class="lg:col-span-1 space-y-8 flex flex-col">
<!-- Live Stream Widget -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border flex-grow">
<h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Live Missions</h2>
<div class="relative w-full aspect-video rounded-md overflow-hidden border border-gray-700 mb-4 glow-inset">
<img class="w-full h-full object-cover" src="https://picsum.photos/400/225?random=4" alt="Live Stream Placeholder">
<div class="absolute top-2 left-2 bg-red-600 text-gray-50 text-xs px-2 py-1 rounded glow-live">LIVE</div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-950/70 to-transparent flex items-end p-3">
<span class="text-xs text-gray-300 drop-shadow-sm">@StreamerProX <span class="text-gray-500">(1.2K Viewers)</span></span>
</div>
</div>
<p class="text-gray-400 text-sm mb-4">'Conquering the Wasteland' - Join me for an epic solo run!</p>
<button class="w-full py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button">
Watch Stream
</button>
</section>
<!-- Friends Online List -->
<section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
<h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Squad Online [<span class="text-green-500 drop-shadow-md [text-shadow:_0_0_5px_rgb(34_197_94_/_0.7)]">3</span>]</h2>
<ul class="space-y-3">
<li class="flex items-center text-gray-300">
<img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Friend Avatar">
<div>
<span class="font-bold glow-text">Neo_Warrior</span>
<span class="block text-xs text-gray-500">In-game: Cyberpunk Arena</span>
</div>
</li>
<li class="flex items-center text-gray-300">
<img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend Avatar">
<div>
<span class="font-bold glow-text">Byte_Crusher</span>
<span class="block text-xs text-gray-500">Online, Idle</span>
</div>
</li>
<li class="flex items-center text-gray-300">
<img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Friend Avatar">
<div>
<span class="font-bold glow-text">GhostlyGamer</span>
<span class="block text-xs text-gray-500">In-game: Warzone Rifts</span>
</div>
</li>
<li class="flex items-center text-gray-500 opacity-70">
<img class="w-10 h-10 rounded-full border-2 border-gray-700 p-0.5 mr-3" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Friend Avatar">
<div>
<span class="font-bold">Offline_Dude</span>
<span class="block text-xs text-gray-600">Offline</span>
</div>
</li>
</ul>
</section>
</aside>
</div>
<!-- Footer (simple) -->
<footer class="mt-12 text-center text-gray-600 text-sm border-t-2 border-gray-800 pt-6">
<p>© 2077 Neon Nexus. All rights reserved. <span class="text-gray-700">[Powered by Cybernetic Code]</span></p>
</footer>
</div>
<!-- Custom Tailwind CSS (for animations) -->
<style>
@keyframes pulse-slow {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.1); opacity: 0.35; }
}
@keyframes tracking-in-contract {
0% {
letter-spacing: 1em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
letter-spacing: normal;
opacity: 1;
}
}
.animate-pulse-slow {
animation: pulse-slow 6s ease-in-out infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.tracking-in-contract {
animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
.glow-line {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.glow-border {
box-shadow: 0 0 10px rgba(150, 150, 150, 0.15), 0 0 20px rgba(150, 150, 150, 0.05);
}
.dark .glow-border {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05);
}
.glow-item:hover {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.05);
}
.dark .glow-item:hover {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.08);
}
.glow-text {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
.dark .glow-text {
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.glow-card:hover {
box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), 0 0 30px rgba(150, 150, 150, 0.1);
transform: translateY(-2px);
}
.dark .glow-card:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 255, 255, 0.08);
}
.glow-button {
box-shadow: 0 0 8px rgba(150, 150, 150, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05);
}
.glow-button:hover {
box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.dark .glow-button {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.08);
}
.dark .glow-button:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.15);
}
.glow-button-play {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.0); /* softer initial glow for play button */
border: 1px solid rgba(255, 255, 255, 0.1);
}
.glow-button-play:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
.glow-live {
box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}
.glow-avatar {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
.dark .glow-avatar {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
.glow-avatar-online {
box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.glow-dot-active {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
.dark .glow-dot-active {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.glow-dot {
box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}
.dark .glow-dot {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.glow-inset {
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}
.dark .glow-inset {
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
}
.glow-image-border {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.dark .glow-image-border {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}
.glow-link:hover {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
</style>
</div>