| | <!DOCTYPE html> |
| | <html lang="ko"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>음악 차트 - AI Music Hub</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script> |
| | tailwind.config = { |
| | darkMode: 'class', |
| | theme: { |
| | extend: { |
| | colors: { |
| | navy: '#0f172a', |
| | charcoal: '#1e293b', |
| | accent: { |
| | from: '#a855f7', |
| | to: '#ec4899' |
| | } |
| | }, |
| | backgroundImage: { |
| | 'glass': 'linear-gradient(135deg, rgba(255, 255, 255, 0.极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录1), rgba(255, 255, 255, 0.05))', |
| | 'neon-glow': 'linear-gradient(45deg, #a855f7, #ec4899, #a855f7)', |
| | }, |
| | boxShadow: { |
| | 'neon': '0 0 5px #a855极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录f7, 0 0 10px #ec4899, 0 0 15px #a855f7', |
| | 'neon-hover': '0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #a855f7' |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Noto Sans KR', sans-serif; |
| | background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
| | color: #f8fafc; |
| | min-height: 100vh; |
| | } |
| | |
| | .glass-button { |
| | background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); |
| | backdrop-filter: blur(10px); |
| | border: 1px solid rgba(255, 255, 255, 0.1); |
| | border-radius: 12px; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .glass-button:hover { |
| | box-shadow: 0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #极速赛车开奖官网历史记录【——极速赛车开奖官网历史记录qq:49678154——】.极速赛车开奖官网历史记录a855f7; |
| | transform: translateY(-2px); |
| | } |
| | |
| | .neon-border { |
| | border: 1px solid transparent; |
| | background: linear-gradient(#0f172a, #0f172a) padding-box, |
| | linear-gradient(45deg, #a855f7, #ec4899) border-box; |
| | } |
| | |
| | .track-card { |
| | transition: all 0.3s ease; |
| | background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8)); |
| | backdrop-filter: blur(10px); |
| | } |
| | |
| | .track-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2); |
| | } |
| | |
| | .progress-bar { |
| | appearance: none; |
| | height: 4px; |
| | border-radius: 2px; |
| | background: #334155; |
| | outline: none; |
| | } |
| | |
| | .progress-bar::-webkit-slider-thumb { |
| | appearance: none; |
| | width: 12px; |
| | height: 12px; |
| | border-radius: 50%; |
| | background: linear-gradient(45deg, #a855f7, #ec4899); |
| | cursor: pointer; |
| | box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899; |
| | } |
| | |
| | .chart-badge { |
| | background: linear-gradient(45deg, #a855f7, #ec4899); |
| | box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); |
| | } |
| | |
| | .tab-button { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .tab-button.active { |
| | background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2)); |
| | box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); |
| | } |
| | |
| | .rank-number { |
| | width: 32px; |
| | height: 32px; |
| | border-radius: 8px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-weight: bold; |
| | font-size: 16px; |
| | background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8)); |
| | } |
| | |
| | .rank-1 { |
| | background: linear-gradient(45deg, #FFD700, #FFA500); |
| | color: #0f172a; |
| | } |
| | |
| | .rank-2 { |
| | background: linear-gradient(45deg, #C0C0C0, #A9A9A9); |
| | color: #0f172a; |
| | } |
| | |
| | .rank-3 { |
| | background: linear-gradient(45deg, #CD7F32, #8C6B46); |
| | color: #0f172a; |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen"> |
| | |
| | <nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800"> |
| | <div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
| | <a href="index.html" class="flex items-center space-x-2"> |
| | <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center"> |
| | <i data-feather="music" class="text-white"></i> |
| | </div> |
| | <span class="text-xl font-bold bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">AI Music Hub</span> |
| | </a> |
| | |
| | <div class="hidden md:flex items-center space-x-6"> |
| | <a href="index.html" class="text-gray-300 hover:text-white transition">홈</a> |
| | <a href="#" class="text-gray-300 hover:text-white transition">탐색</a> |
| | <a href="chart.html" class="text-accent-from font-medium transition">차트</a> |
| | <a href="collection.html" class="text-gray-300 hover:text-white transition">컬렉션</a> |
| | </div> |
| | |
| | <div class="flex items-center space-x-2 sm:space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-x-4"> |
| | <a href="upload.html" class="glass-button px-3 py-2 sm:px-4 text-white flex items-center space-x-1 sm:space-x-2"> |
| | <i data-feather="plus" class="w-4 h-4"></i> |
| | <span class="hidden xs:block">업로드</span> |
| | </a> |
| | |
| | <a href="login.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2"> |
| | <i data-feather="log-in" class="w-4极速赛车开奖官网极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 h-4"></i> |
| | <span class="hidden xs:block">로그인</span> |
| | </a> |
| | |
| | <a href="mypage.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2"> |
| | <i data-feather="user" class="w-4 h-4"></i> |
| | <span class="hidden xs:block">마이페이지</span> |
| | </a> |
| | |
| | |
| | <button class="md:hidden glass-button p-2" id="mobile-menu-button"> |
| | <i data-feather="menu" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu"> |
| | <div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> |
| | <a href="index.html" class="text-gray-300 hover:text-white transition py-2">홈</a> |
| | <a href="#" class="text-gray-300 hover:text-white transition py-2">탐색</a> |
| | <a href="chart.html" class="text-accent-from font-medium transition py-2">차트</a> |
| | <a href="collection.html" class="text-gray-300 hover:text-white transition py-2">컬렉션</a> |
| | <div class="relative block sm:hidden pt-2"> |
| | <input type="text" placeholder="음악 검색..." class="search-input w-full py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent"> |
| | <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="pt-28 pb-8 px-4"> |
| | <div class="container mx-auto text-center" data-aos="fade-up"> |
| | <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">AI 음악 차트</h1> |
| | <p class="text-lg text-gray-300 max-w-2xl mx-auto">가장 인기 있는 AI 생성 음악들을 확인해보세요. 실시간으로 업데이트되는 인기 차트입니다.</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-6 px-4"> |
| | <div class="container mx-auto"> |
| | <div class="flex border-b border-gray-800 mb-8 overflow-x-auto"> |
| | <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-accent-from active" data-tab="daily"> |
| | 일간 차트 |
| | </button> |
| | <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="weekly"> |
| | 주간 차트 |
| | </button> |
| | <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="monthly"> |
| | 월간 차트 |
| | </button> |
| | <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="genres"> |
| | 장르별 |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-6 px-4"> |
| | <div class="container mx-auto"> |
| | <div id="daily" class="tab-content active"> |
| | <div class="grid grid-cols-1 gap-4"> |
| | |
| | <div class="track-card rounded-2xl p-4 flex items-center space-x-4" data-aos="fade-up"> |
| | <div class="rank-number rank-1">1</div> |
| | <img src="http://static.photos/abstract/80x80/701" alt="Cover" class="w-16 h-16 rounded-xl object-cover"> |
| | <div class="flex-1 min-w-0"> |
| | <h3 class="font-semibold text-lg mb-1">Cosmic Dreams</h3> |
| | <p class="text-gray-400 text-sm">Soundful AI · 45.8K 재생</p> |
| | </div> |
| | <div class="hidden sm:flex items-center space-x-4"> |
| | <div class="flex items-center space-x-1 text-gray-400"> |
| | <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i> |
| | <span>+3</span> |
| | </div> |
| | <div class="flex items-center space-x-1"> |
| | <i data-feather="heart" class="w-4 h-4 text-red-400"></i> |
| | <span class="text-sm">12.4K</span> |
| | </div> |
| | </div> |
| | <button class="glass-button p-3"> |
| | <i data-feather="play" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="track-card rounded-2xl p-4 flex items-center space-x-4" data-aos="fade-up" data-aos-delay="100"> |
| | <div class="rank-number rank-2">2</div> |
| | <img src="http://static.photos/abstract/80x80/702" alt="Cover" class="w-16 h-16 rounded-xl object-cover"> |
| | <div class="flex-1 min-w-0"> |
| | <h3 class="font-semibold text-lg mb-1">Neon Pulse</h3> |
| | <p class="text-gray-400 text-sm">AIVA · 38.2K 재생</p> |
| | </div> |
| | <div class="hidden sm:flex items-center space-x-4"> |
| | <div class="flex items-center space-x-1 text-gray-400"> |
| | <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i> |
| | <span>+1</span> |
| | </div> |
| | <div class="flex items-center space-x-1"> |
| | <i data-feather="heart" class="w-4 h-4 text-red-400"></i> |
| | <span class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="text-sm">9.8K</span> |
| | </div> |
| | </div> |
| | <button class="glass-button p-3"> |
| | <i data-feather="play" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="track-card rounded-2xl p-4 flex items-center space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-x-4" data-aos="fade-up" data-aos-delay="200"> |
| | <div class="rank-number rank-3">3</div> |
| | <img src="http://static.photos/abstract/80x80/703" alt="Cover" class="w-16 h-16 rounded-xl object-cover"> |
| | <div class="flex-1 min-w-0"> |
| | <h3 class="font-semibold text-lg mb-1">Digital Ocean</h3> |
| | <p class="text-gray-400 text-sm">Amper Music · 32.5K 재생</p> |
| | </div> |
| | <div class="hidden sm:flex items-center space-x-4"> |
| | <div class="flex items-center space-x-1 text-gray-400"> |
| | <i data-feather="trending-down" class="w-4 h-4 text-red-400"></i> |
| | <span>-2</span> |
| | </div> |
| | <div class="flex items-center space-x-1"> |
| | <i data-feather="heart" class="w-4 h-4 text-red-400"></i> |
| | <span class="text-sm">8.3K</span> |
| | </div> |
| | </div> |
| | <button class="glass-button p-3"> |
| | <i data-feather="play" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="track-card rounded-2xl p-4 flex items-center space-x-4" data-aos="fade-up" data-aos-delay="300"> |
| | <div class="rank-number">4</div> |
| | <img src="http://static.photos/abstract/80x80/704" alt="Cover" class="w-16 h-16 rounded-xl object-cover"> |
| | <div class="flex-1 min-w-0"> |
| | <h3 class="font-semibold text-lg mb-1">Synthwave Memories</h3> |
| | <p class="text-gray-400 text-sm">OpenAI MuseNet · 28.7K 재생</p> |
| | </div> |
| | <div class="hidden sm:flex items-center space-x-4"> |
| | <div class="flex items-center space-x-1 text-gray-400"> |
| | <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i> |
| | <span>+5</span> |
| | </div> |
| | <div class="flex items-center space-x-1"> |
| | <i data-feather="heart" class="w-4 h-4 text-red-400"></i> |
| | <span class="text-sm">7.2K</span> |
| | </div> |
| | </div> |
| | <button class="glass-button p-3"> |
| | <i data-feather="play" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="weekly" class="tab-content hidden"> |
| | <div class="text-center py-12"> |
| | <i data-feather="bar-chart-2" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i> |
| | <h3 class="text-xl font-semibold mb-2">주간 차트 데이터 준비 중</h3> |
| | <p class="text-gray-400">곧 업데이트될 예정입니다</p> |
| | </div> |
| | </div> |
| | |
| | <div id="monthly" class="tab-content hidden"> |
| | <div class="text-center py-12"> |
| | <i data-feather="bar-chart-2" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i> |
| | <h3 class="text-xl font-semibold mb-2">월간 차트 데이터 준비 중</h3> |
| | <p class="text-gray-400">곧 업데이트될 예정입니다</p> |
| | </div> |
| | </div> |
| | |
| | <div id="genres" class="tab-content hidden"> |
| | <div class="text-center py-12"> |
| | <i data-feather="bar-chart-2" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i> |
| | <h3 class="text-xl font-semibold mb-2">장르별 차트 데이터 준비 중</h3> |
| | <p class="text-gray-400">곧 업데이트될 예정입니다</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-12 px-4"> |
| | <div class="container mx-auto"> |
| | <h2 class="text-2xl font-bold mb-6" data-aos="fade-right">지금 뜨는 음악</h2> |
| | |
| | <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6"> |
| | |
| | <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="100"> |
| | <div class="relative mb-4"> |
| | <img src="http://static.photos/abstract/320x320/801" alt="Cover" class="w-full rounded-xl aspect-square object-cover"> |
| | <div class="absolute top-2 left-2"> |
| | <span class="chart-badge text-xs px-2 py-1 rounded-full">Hot</span> |
| | </div> |
| | <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition"> |
| | <i data-feather="play" class="text-white"></i> |
| | </button> |
| | </div> |
| | <div class="mb-3"> |
| | <h3 class="font-semibold text-lg mb-1">Quantum Echo</h3> |
| | <p class="text-gray-400 text-sm">Jukebox AI · 15K 재생</p> |
| | </div> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center space-x-2"> |
| | <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i> |
| | <span class="text-sm">+124%</span> |
| | </div> |
| | <button class="glass-button p-2"> |
| | <i data-feather="heart" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="200"> |
| | <div class="relative mb-4"> |
| | <img src="http://static.photos/abstract/320x320/802" alt="Cover" class="w-full rounded-xl aspect-square object-cover"> |
| | <div class="absolute top-2 left-2"> |
| | <span class="chart-badge text-xs px-2 py-1 rounded-full">New</span> |
| | </div> |
| | <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录/50 flex items-center justify-center hover:bg-accent-from transition"> |
| | <i data-feather="play" class="text-white"></i> |
| | </button> |
| | </div> |
| | <div class="mb-3"> |
| | <h3 class="font-semib极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录old text-lg mb-1">Neural Dawn</h3> |
| | <p class="text-gray-400 text-sm">Amadeus Code · 8.7K 재생</p> |
| | </div> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center space-x-2"> |
| | <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i> |
| | <span class="text-sm">+89%</span> |
| | </div> |
| | <button class="glass-button p-2"> |
| | <极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i data-feather="heart" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="py-12 px-4 border-t border-gray-800 mt-12"> |
| | <div class="container mx-auto"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <div class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="flex items-center space-x-2 mb-4"> |
| | <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center"> |
| | <i data-feather="music" class="text-white"></i> |
| | </div> |
| | <span class="text-xl font-bold">AI Music Hub</span> |
| | </div> |
| | <p class="text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p> |
| | </div> |
| | |
| | <div> |
| | <h3 class="font-semibold mb-4">서비스</h3> |
| | <ul class="space-y极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">탐색</a></li> |
| | <li><a href="chart.html" class="text-gray-400 hover:text-white transition">차트</a></li> |
| | <li><a href="collection.html" class="text-gray-400 hover:text-white transition">컬렉션</a></li> |
| | <li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="font-semibold mb-4">지원</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">고객센터</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">이용약관</极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录></a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a></li> |
| | <li><a href="#" class="text-gray极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录官网历史记录-400 hover:text-white transition">문의하기</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="font-semibold mb-4">极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录소셜 미디어</h3> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="glass-button p-2"> |
| | <i data-feather="facebook" class="w-4 h-4"></i> |
| | </a> |
| | <a href="#" class="glass-button p-2"> |
| | <i data-feather="twitter" class="w-4 h-4"></极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i> |
| | </a> |
| | <a href="#" class="glass-button p-2"> |
| | <i data-feather="instagram" class="w-4 h-4"></i> |
| | </a> |
| | <a href="#" class="glass-button p-2"> |
| | <i data-feather="youtube" class="w-4 h-4"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| | <p>© 2023 AI Music Hub. All rights reserved.</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | AOS.init({ |
| | duration: 800, |
| | easing: 'ease-in-out', |
| | once: true |
| | }); |
| | |
| | feather.replace(); |
| | |
| | |
| | const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| | const mobileMenu = document.getElementById('mobile-menu'); |
| | |
| | mobileMenuButton.addEventListener('click', () => { |
| | mobileMenu.classList.toggle('hidden'); |
| | const icon = mobileMenuButton.querySelector('i'); |
| | if (mobileMenu.classList.contains('hidden')) { |
| | icon.setAttribute('data-feather', 'menu'); |
| | } else { |
| | icon.setAttribute('data-feather', 'x'); |
| | } |
| | feather.replace(); |
| | }); |
| | |
| | |
| | const tabButtons = document.querySelectorAll('.tab-button'); |
| | const tabContents = document.querySelectorAll('.tab-content'); |
| | |
| | tabButtons.forEach(button => { |
| | button.addEventListener('click', () => { |
| | const tabId = button.getAttribute('data-tab'); |
| | |
| | |
| | tabButtons.forEach(btn => btn.classList.remove('active')); |
| | button.classList.add('active'); |
| | |
| | |
| | tabContents.forEach(content => { |
| | content.classList.remove('active'); |
| | content.classList.add('hidden'); |
| | }); |
| | |
| | document.getElementById(tabId).classList.remove('hidden'); |
| | document.getElementById(tabId).classList.add('active'); |
| | }); |
| | }); |
| | |
| | |
| | document.addEventListener('click', (e) => { |
| | if (!mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target) && !mobileMenu.classList.contains('hidden')) { |
| | mobileMenu.classList.add('hidden'); |
| | const icon = mobileMenuButton.querySelector('i'); |
| | icon.setAttribute('data-feather', 'menu'); |
| | feather.replace(); |
| | } |
| | }); |
| | </script> |
| | </body> |
| | </html> |
