Загрузка...
Neon Edge - кинематографичный дашборд. Контейнер с неоновой обводкой и уникальным цветовым сочетанием для стильных интерфейсов.
# Neon Edge | Cinematic Dashboard
container outline blend good with an off color that works
Here is a reference implementation:
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Edge | Live Sports Odds</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--cyan: #00D9FF;
--magenta: #FF006E;
--purple: #8338EC;
--dark-bg: #05060f;
}
body {
font-family: 'Space Grotesk', sans-serif;
color: #e2e8f0;
background: var(--dark-bg);
overflow-x: hidden;
}
.rajdhani {
font-family: 'Rajdhani', sans-serif;
}
.neon-border-cyan {
box-shadow: 0 0 15px rgba(0, 217, 255, 0.15), inset 0 0 8px rgba(0, 217, 255, 0.05);
border: 1px solid rgba(0, 217, 255, 0.25);
}
.neon-text-cyan {
text-shadow: 0 0 8px rgba(0, 217, 255, 0.6);
}
.glass-panel {
background: rgba(7, 10, 18, 0.82);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(148, 163, 184, 0.15);
box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.03);
}
.bet-button {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bet-button:hover {
background: rgba(0, 217, 255, 0.1);
border-color: var(--cyan);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 217, 255, 0.2);
}
.bg-city-overlay {
background:
radial-gradient(circle at 20% 30%, rgba(0, 217, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 0, 110, 0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(5, 6, 15, 0.2) 0%, rgba(5, 6, 15, 0.6) 40%, rgba(5, 6, 15, 0.98) 100%),
url('https://vgbujcuwptvheqijyjbe.supabase.co/storage/v1/object/public/hmac-uploads/uploads/5e8948a4-0124-4eda-b8dd-36ed45ef95e6/1768681479530-41e38a35/P2.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.bg-city-overlay::before {
content: "";
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: url('https://grainy-gradients.vercel.app/noise.svg');
opacity: 0.15;
pointer-events: none;
z-index: 1;
mix-blend-mode: overlay;
}
.cinematic-glow {
box-shadow: 0 0 40px rgba(0, 217, 255, 0.1), 0 0 80px rgba(131, 56, 236, 0.05);
}
@keyframes pulse-cyan {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse-cyan {
animation: pulse-cyan 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@view-transition {
navigation: auto;
}
</style>
</head>
<body>
<div class="min-h-screen bg-city-overlay relative flex flex-col cinematic-glow">
<main class="flex-grow max-w-7xl mx-auto w-full px-6 pt-20 pb-8 space-y-12 relative z-10">
<!-- Sport Selector Tabs -->
<section id="sport-selector" class="flex justify-center">
<div class="flex flex-wrap gap-2 md:gap-4 p-1 bg-black/50 backdrop-blur-md border border-slate-500/20 rounded-xl inline-flex shadow-xl shadow-black/40">
<button id="tab-nfl" class="flex items-center gap-2 px-6 py-3 rounded-lg bg-[#00D9FF] text-black font-bold transition-all shadow-[0_0_20px_rgba(0,217,255,0.3)]">
<iconify-icon icon="mdi:football" class="text-xl"></iconify-icon>
NFL
</button>
<button id="tab-nba" class="flex items-center gap-2 px-6 py-3 rounded-lg hover:bg-white/5 text-white/60 hover:text-white transition-all">
<iconify-icon icon="mdi:basketball" class="text-xl"></iconify-icon>
NBA
</button>
<button id="tab-mlb" class="flex items-center gap-2 px-6 py-3 rounded-lg hover:bg-white/5 text-white/60 hover:text-white transition-all">
<iconify-icon icon="mdi:baseball" class="text-xl"></iconify-icon>
MLB
</button>
<button id="tab-soccer" class="flex items-center gap-2 px-6 py-3 rounded-lg hover:bg-white/5 text-white/60 hover:text-white transition-all">
<iconify-icon icon="mdi:soccer" class="text-xl"></iconify-icon>
SOCCER
</button>
<div class="w-px h-8 bg-white/10 mx-2 self-center hidden sm:block"></div>
<button id="tab-filters" class="flex items-center gap-2 px-4 py-3 rounded-lg hover:bg-white/5 text-white/40 hover:text-white transition-all">
<iconify-icon icon="lucide:sliders-horizontal" class="text-xl"></iconify-icon>
ALL SPORTS
</button>
</div>
</section>
<!-- Trending Games Section -->
<section id="trending-games">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold uppercase tracking-[0.2em] rajdhani flex items-center gap-3">
<span class="flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-[#FF006E] opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-[#FF006E]"></span>
</span>
Trending Games
</h2>
<div class="flex gap-2">
<button id="prev-featured" class="p-2 rounded bg-white/5 hover:bg-white/10 transition-colors"><iconify-icon icon="lucide:chevron-left"></iconify-icon></button>
<button id="next-featured" class="p-2 rounded bg-white/5 hover:bg-white/10 transition-colors"><iconify-icon icon="lucide:chevron-right"></iconify-icon></button>
</div>
</div>
<div id="trending-carousel" class="flex gap-4 overflow-x-auto scrollbar-hide pb-4">
<!-- Featured Card 1 -->
<div class="min-w-[340px] glass-panel p-5 rounded-lg border-l-4 border-l-[#00D9FF] shadow-[inset_12px_0_25px_-12px_rgba(0,217,255,0.15)] hover:translate-y-[-4px] transition-transform cursor-pointer">
<div class="flex justify-between items-start mb-4">
<span class="bg-white/5 px-2 py-0.5 text-[10px] uppercase font-bold tracking-widest rounded">NFL • Tonight 8:15 PM</span>
<iconify-icon icon="lucide:trending-up" class="text-[#00D9FF]"></iconify-icon>
</div>
<div class="space-y-3 mb-6">
<div class="flex items-center justify-between">
<span class="text-lg font-bold">SF 49ers</span>
<span class="text-[#00D9FF] font-mono">-6.5</span>
</div>
<div class="flex items-center justify-between">
<span class="text-lg font-bold">KC Chiefs</span>
<span class="text-white/60 font-mono">+6.5</span>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-white/5">
<span class="text-xs text-white/40">Win Prob: 64%</span>
<span class="text-[#00D9FF] font-bold text-sm">Bet Now <iconify-icon icon="lucide:arrow-right" class="inline-block ml-1"></iconify-icon></span>
</div>
</div>
<!-- Featured Card 2 -->
<div class="min-w-[340px] glass-panel p-5 rounded-lg border-l-4 border-l-[#FF006E] shadow-[inset_12px_0_25px_-12px_rgba(255,0,110,0.15)] hover:translate-y-[-4px] transition-transform cursor-pointer">
<div class="flex justify-between items-start mb-4">
<span class="bg-white/5 px-2 py-0.5 text-[10px] uppercase font-bold tracking-widest rounded">NBA • Live Q3</span>
<span class="flex items-center gap-1 text-[10px] text-[#FF006E] animate-pulse">
<span class="w-1.5 h-1.5 rounded-full bg-[#FF006E]"></span> LIVE
</span>
</div>
<div class="space-y-3 mb-6">
<div class="flex items-center justify-between">
<span class="text-lg font-bold">LAL Lakers</span>
<span class="text-[#FF006E] font-mono">-210</span>
</div>
<div class="flex items-center justify-between">
<span class="text-lg font-bold">BOS Celtics</span>
<span class="text-white/60 font-mono">+180</span>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-white/5">
<span class="text-xs text-white/40">Volume: $2.4M</span>
<span class="text-[#FF006E] font-bold text-sm">Hot Bet <iconify-icon icon="lucide:flame" class="inline-block ml-1"></iconify-icon></span>
</div>
</div>
<!-- Featured Card 3 -->
<div class="min-w-[340px] glass-panel p-5 rounded-lg border-l-4 border-l-[#8338EC] shadow-[inset_12px_0_25px_-12px_rgba(131,56,236,0.15)] hover:translate-y-[-4px] transition-transform cursor-pointer">
<div class="flex justify-between items-start mb-4">
<span class="bg-white/5 px-2 py-0.5 text-[10px] uppercase font-bold tracking-widest rounded">MLB • Tomorrow</span>
<iconify-icon icon="lucide:star" class="text-[#8338EC]"></iconify-icon>
</div>
<div class="space-y-3 mb-6">
<div class="flex items-center justify-between">
<span class="text-lg font-bold">NY Yankees</span>
<span class="text-white/60 font-mono">O 8.5</span>
</div>
<div class="flex items-center justify-between">
<span class="text-lg font-bold">LA Dodgers</span>
<span class="text-[#8338EC] font-mono">U 8.5</span>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-white/5">
<span class="text-xs text-white/40">Parlay Boost +15%</span>
<span class="text-[#8338EC] font-bold text-sm">Boosted <iconify-icon icon="lucide:trending-up" class="inline-block ml-1"></iconify-icon></span>
</div>
</div>
</div>
</section>
<!-- Live Games Section -->
<section id="live-games" class="space-y-4">
<div class="flex items-center mb-4">
<h2 class="text-xl font-bold uppercase tracking-[0.2em] rajdhani flex items-center gap-3">
<span class="w-2 h-2 bg-[#00D9FF] rounded-full animate-pulse"></span>
Live Games
</h2>
</div>
<div class="grid grid-cols-12 gap-4 text-[10px] uppercase font-bold tracking-widest text-white/40 px-6 py-2">
<div class="col-span-12 md:col-span-5">Matchup</div>
<div class="hidden md:block col-span-2 text-center">Spread</div>
<div class="hidden md:block col-span-2 text-center">Moneyline</div>
<div class="hidden md:block col-span-2 text-center">Total</div>
<div class="hidden md:block col-span-1"></div>
</div>
<!-- Live Card 1 -->
<div class="group relative">
<div class="absolute -inset-0.5 bg-gradient-to-r from-[#00D9FF] to-[#8338EC] rounded-xl blur opacity-0 group-hover:opacity-10 transition duration-500"></div>
<div class="relative grid grid-cols-12 glass-panel rounded-xl overflow-hidden hover:border-white/20 transition-all">
<div class="col-span-12 md:col-span-5 p-6 border-b md:border-b-0 md:border-r border-white/5">
<div class="flex flex-col h-full justify-center space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center p-1 border border-white/10">
<img src="https://upload.wikimedia.org/wikipedia/en/7/72/Arizona_Cardinals_logo.svg" class="w-full h-full object-contain" alt="Team">
</div>
<div>
<h3 class="font-bold text-lg">AZ Cardinals</h3>
<p class="text-[10px] text-white/40 uppercase tracking-widest">4-2 (2-1 Away)</p>
</div>
</div>
<div class="text-2xl font-bold rajdhani text-white/20">17</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center p-1 border border-white/10">
<img src="https://upload.wikimedia.org/wikipedia/en/a/a2/Philadelphia_Eagles_logo.svg" class="w-full h-full object-contain" alt="Team">
</div>
<div>
<h3 class="font-bold text-lg">PHI Eagles</h3>
<p class="text-[10px] text-white/40 uppercase tracking-widest">5-1 (3-0 Home)</p>
</div>
</div>
<div class="text-2xl font-bold rajdhani text-[#00D9FF] neon-text-cyan">24</div>
</div>
<div class="pt-2 flex items-center gap-3">
<span class="text-[10px] bg-red-500/10 text-red-400 px-2 py-0.5 rounded border border-red-500/20 font-bold uppercase animate-pulse">Q4 2:14</span>
<span class="text-[10px] text-white/40">Lincoln Financial Field</span>
</div>
</div>
</div>
<div class="col-span-4 md:col-span-2 flex flex-col justify-center gap-2 p-4 border-r border-white/5">
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="live-1-spread-1">
<div class="text-[10px] text-white/40 mb-1">+6.5</div>
<div class="font-bold text-[#00D9FF]">-110</div>
</button>
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="live-1-spread-2">
<div class="text-[10px] text-white/40 mb-1">-6.5</div>
<div class="font-bold text-[#00D9FF]">-110</div>
</button>
</div>
<div class="col-span-4 md:col-span-2 flex flex-col justify-center gap-2 p-4 border-r border-white/5">
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="live-1-ml-1">
<div class="text-[10px] text-white/40 mb-1">AWAY</div>
<div class="font-bold">+240</div>
</button>
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="live-1-ml-2">
<div class="text-[10px] text-white/40 mb-1">HOME</div>
<div class="font-bold">-280</div>
</button>
</div>
<div class="col-span-4 md:col-span-2 flex flex-col justify-center gap-2 p-4">
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="live-1-total-1">
<div class="text-[10px] text-white/40 mb-1">O 44.5</div>
<div class="font-bold">-105</div>
</button>
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="live-1-total-2">
<div class="text-[10px] text-white/40 mb-1">U 44.5</div>
<div class="font-bold">-115</div>
</button>
</div>
<div class="hidden md:flex col-span-1 items-center justify-center p-4 bg-white/[0.02]">
<button class="text-white/20 hover:text-[#00D9FF] transition-colors" id="live-1-more">
<iconify-icon icon="lucide:more-vertical" class="text-2xl"></iconify-icon>
</button>
</div>
</div>
</div>
</section>
<!-- Upcoming Games Section -->
<section id="upcoming-games" class="space-y-4">
<div class="flex items-center mb-4">
<h2 class="text-xl font-bold uppercase tracking-[0.2em] rajdhani flex items-center gap-3 text-white/60">
<span class="w-2 h-2 bg-white/40 rounded-full"></span>
Upcoming Games
</h2>
</div>
<!-- Upcoming Card 1 -->
<div class="group relative">
<div class="relative grid grid-cols-12 glass-panel rounded-xl overflow-hidden hover:border-white/20 transition-all">
<div class="col-span-12 md:col-span-5 p-6 border-b md:border-b-0 md:border-r border-white/5">
<div class="flex flex-col h-full justify-center space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center p-1 border border-white/10">
<img src="https://upload.wikimedia.org/wikipedia/en/8/8e/Chicago_Bears_logo.svg" class="w-full h-full object-contain" alt="Team">
</div>
<h3 class="font-bold text-lg">CHI Bears</h3>
</div>
<div class="text-sm font-bold text-white/20 uppercase tracking-tighter">@</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center p-1 border border-white/10">
<img src="https://upload.wikimedia.org/wikipedia/en/4/44/Green_Bay_Packers_logo.svg" class="w-full h-full object-contain" alt="Team">
</div>
<h3 class="font-bold text-lg">GB Packers</h3>
</div>
</div>
<div class="pt-2 flex items-center gap-3">
<span class="text-[10px] text-white/60 bg-white/5 px-2 py-0.5 rounded border border-white/10 font-bold uppercase">SUN 1:00 PM</span>
<span class="text-[10px] text-white/30 uppercase">Lambeau Field</span>
</div>
</div>
</div>
<div class="col-span-4 md:col-span-2 flex flex-col justify-center gap-2 p-4 border-r border-white/5">
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="up-1-spread-1">
<div class="text-[10px] text-white/40 mb-1">+3.0</div>
<div class="font-bold text-[#00D9FF]">-110</div>
</button>
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="up-1-spread-2">
<div class="text-[10px] text-white/40 mb-1">-3.0</div>
<div class="font-bold text-[#00D9FF]">-110</div>
</button>
</div>
<div class="col-span-4 md:col-span-2 flex flex-col justify-center gap-2 p-4 border-r border-white/5">
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="up-1-ml-1">
<div class="text-[10px] text-white/40 mb-1">AWAY</div>
<div class="font-bold">+145</div>
</button>
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="up-1-ml-2">
<div class="text-[10px] text-white/40 mb-1">HOME</div>
<div class="font-bold">-165</div>
</button>
</div>
<div class="col-span-4 md:col-span-2 flex flex-col justify-center gap-2 p-4">
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="up-1-total-1">
<div class="text-[10px] text-white/40 mb-1">O 47.0</div>
<div class="font-bold">-110</div>
</button>
<button class="bet-button bg-white/5 border border-white/10 rounded-lg p-3 text-center" id="up-1-total-2">
<div class="text-[10px] text-white/40 mb-1">U 47.0</div>
<div class="font-bold">-110</div>
</button>
</div>
<div class="hidden md:flex col-span-1 items-center justify-center p-4 bg-white/[0.02]">
<button class="text-white/20 hover:text-[#00D9FF] transition-colors" id="up-1-bell">
<iconify-icon icon="lucide:bell" class="text-xl"></iconify-icon>
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="glass-panel border-t border-white/5 mt-12 py-12">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="col-span-1 md:col-span-2">
<div class="flex items-center gap-2 mb-4">
<span class="text-2xl font-bold tracking-tighter rajdhani">NEON<span class="text-[#00D9FF]">EDGE</span></span>
</div>
<p class="text-white/40 text-sm max-w-sm mb-6">Premium live odds tracker and data visualization for professional markets. Real-time accuracy at the edge of light.</p>
<div class="flex gap-4">
<a href="#" id="footer-twitter" class="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center hover:bg-[#00D9FF] hover:text-black transition-all"><iconify-icon icon="mdi:twitter"></iconify-icon></a>
<a href="#" id="footer-discord" class="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center hover:bg-[#8338EC] hover:text-black transition-all"><iconify-icon icon="mdi:discord"></iconify-icon></a>
</div>
</div>
<div>
<h4 class="font-bold rajdhani uppercase tracking-widest mb-4">Navigation</h4>
<ul class="space-y-2 text-sm text-white/50">
<li><a href="#" id="footer-link-1" class="hover:text-[#00D9FF]">Live Betting</a></li>
<li><a href="#" id="footer-link-2" class="hover:text-[#00D9FF]">Upcoming</a></li>
<li><a href="#" id="footer-link-3" class="hover:text-[#00D9FF]">Statistics</a></li>
</ul>
</div>
<div>
<h4 class="font-bold rajdhani uppercase tracking-widest mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-white/50">
<li><a href="#" id="footer-link-4" class="hover:text-[#00D9FF]">Privacy Policy</a></li>
<li><a href="#" id="footer-link-5" class="hover:text-[#00D9FF]">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-white/20">
<p>© 2024 NEON EDGE TECHNOLOGIES. ALL RIGHTS RESERVED.</p>
<div class="flex gap-6">
<span>SECURED BY QUANTUM-CRYPT</span>
</div>
</div>
</footer>
</div>
<script>
// Interactive Bet Selection Placeholder
document.querySelectorAll('.bet-button').forEach(button => {
button.addEventListener('click', function() {
const isActive = this.classList.contains('border-[#00D9FF]');
if (isActive) {
this.classList.remove('border-[#00D9FF]', 'bg-[#00D9FF]/10');
this.classList.add('border-white/10', 'bg-white/5');
} else {
this.classList.remove('border-white/10', 'bg-white/5');
this.classList.add('border-[#00D9FF]', 'bg-[#00D9FF]/10');
}
});
});
// Horizontal Scroll Controls for Trending
const scrollContainer = document.getElementById('trending-carousel');
document.getElementById('next-featured').addEventListener('click', () => {
scrollContainer.scrollBy({ left: 350, behavior: 'smooth' });
});
document.getElementById('prev-featured').addEventListener('click', () => {
scrollContainer.scrollBy({ left: -350, behavior: 'smooth' });
});
</script>
</body>
</html>
~~~