Hugging Face's logo

Spaces:
nkjoy
/
aimuisc
Running

App Files Community
aimuisc / mypage.html
nkjoy's picture
nkjoy
ํƒ์ƒ‰ ํŽ˜์ด์ง€๋„ ๋งŒ๋“ค์–ด์ค˜! - Follow Up Deployment
5bad1ac verified
raw
history blame contribute delete
23.6 kB
<!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.1), rgba(255, 255, 255, 0.05))',
 'neon-glow': 'linear-gradient(45deg, #a855f7, #ec4899, #a855f7)',
 },
 boxShadow: {
 'neon': '0 0 5px #a855f7, 0 0 10px #ec4899, ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•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: #f8ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•afc;
 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 #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;
 }
.stats-card {
 background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
 backdrop-filter: blur(10px);
 }
.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);
 }
 </style>
</head>
<body class="min-h-screen">
 <!-- Navigation -->
 <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ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•">ํƒ์ƒ‰</a>
 <a href="collection.html" class="text-gray-300 hover:text-white transition">์ปฌ๋ ‰์…˜</a>
 <a href="chart.html" class="text-gray-300 hover:text-white transition">์ฐจํŠธ</a>
 </div>
<div class="flex items-center space-x-2 sm:space-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>
<div class="relative">
 <button class="w-10 h-10 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
 <i data-feather="user" class="text-white"></i>
 </button>
 </div>
<!-- Mobile menu button -->
 <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>
<!-- Mobile menu -->
 <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="#" class="text-gray-300 hover:text-white transition pyๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•-2">์ปฌ๋ ‰์…˜</a>
 <a href="#" class="text-gray-300 hover:text-white transition py-2">์ฐจํŠธ</a>
 <a href="mypage.html" class="text-gray-300 hover:text-white transition py-2">๋งˆ์ดํŽ˜์ด์ง€</a>
 </div>
 </div>
 </nav>
<!-- Profile Section -->
 <section class="pt-28 pb-8 px-4">
 <div class="container mx-auto">
 <div class="flex flex-col md:flex-row items-center md:items-start gap-6">
 <!-- Profile Image -->
 <div class="relative" data-aos="fade-right">
 <div class="w-24 h-24 md:w-32 md:h-32 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
 <img src="http://static.photos/people/200x200/501" alt="Profile" class="w-full h-full rounded-full object-cover">
 </div>
 <button class="absolute bottom-0 right-0 glass-button p-2">
 <i data-feather="edit-2" class="w-3 h-3 md:w-4 md:h-4"></i>
 </button>
 </div>
<!-- Profile Info -->
 <div class="flex-1 text-center md:text-left" data-aos="fade-left">
 <h1 class="text-2xl md:text-3xl font-bold mb-2">๊น€๋ฎค์ง</h1>
 <p class="text-gray-400 mb-4">@musiclover_ai</p>
 <p class="text-gray-300 mb-6 max-w-md">AI ์ƒ์„ฑ ์Œ์•…์„ ์‚ฌ๋ž‘ํ•˜๋Š” ํฌ๋ฆฌ์—์ดํ„ฐ์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ ์ผ๋ ‰ํŠธ๋กœ๋‹‰๊ณผ ์•ฐ๋น„์–ธํŠธ ์žฅ๋ฅด์˜ ์Œ์•…์„ ๋งŒ๋“ค๊ณ  ์žˆ์–ด์š”.</p>
<div class="flex flex-wrap justify-center md:justify-start gap-4">
 <div class="text-center">
 <div class="text-2xl font-bold text-white">24</div>
 <div class="text-gray-400 text-sm">์—…๋กœ๋“œ</div>
 </div>
 <div class="text-center">
 <div class="text-2xl font-bold text-white">1.2K</div>
 <div class="text-gray-400 text-sm">ํŒ”๋กœ์›Œ</div>
 </div>
 <div class="text-center">
 <div class="text-2xl font-bold text-white">458</div>
 <div class="text-gray-400 text-sm">ํŒ”๋กœ์ž‰</div>
 </div>
 </div>
 </div>
<!-- Action Buttons -->
 <div class="flex gap-3" data-aos="fade-left">
 <button class="glass-button px-4 py-2 text-white flex items-center space-x-2">
 <i data-feather="edit" class="w-4 h-4"></i>
 <span>ํ”„๋กœํ•„ ํŽธ์ง‘</span>
 </button>
 <button class="neon-border px-4 py-2 text-white flex items-center space-x-2">
 <i data-feather="settings" class="w-4 h-4"></i>
 <span>์„ค์ •</span>
 </button>
 </div>
 </div>
 </div>
 </section>
<!-- Stats Section -->
 <section class="py-8 px-4">
 <div class="container mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="100">
 <i data-feather="play" class="w-8 h-8 text-accent-from mx-auto mb-4"></i>
 <div class="text-3xl font-bold mb-2">45.8K</div>
 <p class="text-gray-400">์ด ์žฌ์ƒ ์ˆ˜</p>
 </div>
<div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="200">
 <i data-feather="heart" class="w-8 h-8 text-red-400 mx-auto mb-4"></i>
 <div class="text-3xl font-bold mb-2">8.7K</div>
 <p class="text-gray-400">์ข‹์•„์š” ์ˆ˜</p>
 </div>
<div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="300">
 <i data-feather="share" class="w-8 h-8 text-green-400 mx-auto mb-4"></i>
 <div class="text-3xl font-bold mb-2">2.3K</div>
 <p class="text-gray-400">๊ณต์œ  ์ˆ˜</p>
 </div>
 </div>
 </div>
 </section>
<!-- Tabs Section -->
 <section class="py-8 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-transparent hover:border-accent-from active" data-tab="my-music">
 ๋‚ด ์Œ์•…
 </button>
 <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="likes">
 ์ข‹์•„์š”ํ•œ ์Œ์•…
 </button>
 <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="playlists">
 ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ
 </button>
 </div>
<!-- My Music Tab -->
 <div id="my-music" class="tab-content active">
 <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
 <!-- Track 1 -->
 <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/601" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
 <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">Cosmic Dreams</h3>
 <p class="text-gray-400 text-sm">12K ์žฌ์ƒ ยท 3์ผ ์ „</p>
 </div>
 <div class="flex items-center justify-between mb-3">
 <div class="flex items-center space-x-2">
 <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
 <span class="text-sm">2.4K</span>
 </div>
 <button class="glass-button p-2">
 <i data-feather="more-vertical" class="w-4 h-4"></i>
 </button>
 </div>
 <input type="range" class="progress-bar w-full" value="0">
 </div>
<!-- Track 2 -->
 <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/602" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
 <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ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•" class="text-white"></i>
 </button>
 </div>
 <div class="mbๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•-3">
 <h3 class="font-semibold text-lg mb-1">Neon Pulse</h3>
 <p class="text-gray-400 text-sm">8.7K ์žฌ์ƒ ยท 1์ฃผ ์ „</p>
 </div>
 <div class="flex items-center justify-between mb-3">
 <div class="ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•flex items-center space-x-2">
 <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
 <span class="text-sm">1.8K</span>
 </div>
 <button class="glass-button p-2">
 <i data-feather="more-vertical" class="w-4 h-4"></ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•i>
 </button>
 </div>
 <input type="range" class="progress-bar w-full" value="0">
 </div>
<!-- Add more tracks as needed -->
 </div>
 </div>
<!-- Empty state for other tabs -->
 <div id="likes" class="tab-content hidden">
 <div class="text-center py-12">
 <i data-feather="heart" 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="playlists" class="tab-content hidden">
 <div class="text-center py-12">
 <i data-feather="list" 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>
<!-- Footer -->
 <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="flex items-center space-x-2 mb-4">
 <div class="w-8 h-8 rounded-full bg-gradientๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•-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-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">์ฐจํŠธ</a></li>
 <li><a href="#" class="textๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•ใ€โ€”โ€”qq:49678154โ€”โ€”ใ€‘.ๆž้€Ÿ่ต›่ฝฆๅผ€ๅฅ–ๅฎ˜็ฝ‘ๅŽ†ๅฒ่ฎฐๅฝ•-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">์ด์šฉ์•ฝ๊ด€</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">๋ฌธ์˜ํ•˜๊ธฐ</a></li>
 </ul>
 </div>
<div>
 <h3 class="font-semibold mb-4">์†Œ์…œ ๋ฏธ๋””์–ด</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"></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();
// Mobile menu functionality
 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();
 });
// Tab functionality
 const tabButtons = document.querySelectorAll('.tab-button');
 const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
 button.addEventListener('click', () => {
 const tabId = button.getAttribute('data-tab');
// Update active tab button
 tabButtons.forEach(btn => btn.classList.remove('active'));
 button.classList.add('active');
// Show active tab content
 tabContents.forEach(content => {
 content.classList.remove('active');
 content.classList.add('hidden');
 });
document.getElementById(tabId).classList.remove('hidden');
 document.getElementById(tabId).classList.add('active');
 });
 });
// Simple music player functionality
 document.querySelectorAll('.track-card button').forEach(button => {
 button.addEventListener('click', function() {
 const card = this.closest('.track-card');
 const range = card.querySelector('input[type="range"]');
// Simulate playback
 let value = 0;
 const interval = setInterval(() => {
 value += 0.5;
 range.value = value;
if (value >= 100) {
 clearInterval(interval);
 range.value = 0;
 }
 }, 100);
 });
 });
// Close mobile menu when clicking outside
 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>