Hugging Face's logo

Spaces:
nkjoy
/
music
Running

App Files Community
music / profile.html
nkjoy's picture
nkjoy
ํ”„๋กœํ•„์ˆ˜์ • ํŽ˜์ด์ง€ ๋งŒ๋“ค์–ด์ค˜ - Follow Up Deployment
6bf0ad1 verified
raw
history blame contribute delete
14.6 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>HarmonyFlow - ํ”„๋กœํ•„ ์ˆ˜์ •</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></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;700&display=swap');
body {
 font-family: 'Noto Sans KR', sans-serif;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 min-height: 100vh;
 overflow-x: hidden;
 }
.glass-panel {
 backdrop-filter: blur(10px);
 background: rgba(255, 255, 255, 0.15);
 border: 1px solid rgba(255, 255, 255, 0.2);
 box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
 }
.input-field {
 backdrop-filter: blur(10px);
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.15);
 transition: all 0.3s ease;
 }
.input-field:focus {
 background: rgba(255, 255, 255, 0.2);
 border-color: rgba(255, 255, 255, 0.3);
 outline: none;
 }
.save-btn {
 transition: all 0.3s ease;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
.save-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
 }
.cancel-btn {
 transition: all 0.3s ease;
 }
.cancel-btn:hover {
 background: rgba(255, 255, 255, 0.25);
 }
.profile-img {
 border: 3px solid white;
 box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
 }
 </style>
</head>
<body class="text-white">
 <!-- ํ—ค๋” -->
 <header class="container mx-auto px-4 py-6 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i data-feather="music" class="w-8 h-8"></i>
 <h1 class="text-2xl font-bold">HarmonyFlow</h1>
 </div>
<nav class="hidden md:flex space-x-8">
 <a href="index.html" class="font-medium hover:text-purple-200 transition">ํ™ˆ</a>
 <a href="list.html" class="font-medium hover:text-purple-200 transition">์Œ์•… ๋ฆฌ์ŠคํŠธ</a>
 <a href="player.html" class="font-medium hover:text-purple-200 transition">ํ”Œ๋ ˆ์ด์–ด</a>
 <a href="mypage.html" class="font-medium hover:text-purple-200 transition">๋งˆ์ดํŽ˜์ด์ง€</a>
 </nav>
<div class="flex items-center space-x-4">
 <button class="glass-panel px-4 py-2 rounded-full text-sm font-medium">
 <a href="login.html">๋กœ๊ทธ์ธ</a>
 </button>
 </div>
 </header>
<!-- ๋ฉ”์ธ ์ฝ˜ํ…์ธ  -->
 <main class="container mx-auto px-4 py-8">
 <div class="max-w-4xl mx-auto">
 <div class="glass-panel rounded-3xl p-8" data-aos="fade-up">
 <div class="text-center mb-8">
 <h2 class="text-3xl font-bold mb-2">ํ”„๋กœํ•„ ์ˆ˜์ •</h2>
 <p class="text-gray-200">๊ฐœ์ธ ์ •๋ณด์™€ ํ”„๋กœํ•„์„ ์—…๋ฐ์ดํŠธํ•˜์„ธ์š”</p>
 </div>
<form class="space-y-8">
 <!-- ํ”„๋กœํ•„ ์‚ฌ์ง„ -->
 <div class="flex flex-col items-center">
 <div class="relative mb-4">
 <img src="http://static.photos/people/200x200/1" alt="ํ”„๋กœํ•„ ์ด๋ฏธ์ง€" class="profile-img w-32 h-32 rounded-full object-cover">
 <button type="button" class="absolute bottom-2 right-2 glass-panel p-2 rounded-full">
 <i data-feather="camera" class="w-4 h-4"></i>
 </button>
 </div>
 <button type="button" class="text-sm text-purple-200 hover:text-white underline">
 ํ”„๋กœํ•„ ์‚ฌ์ง„ ๋ณ€๊ฒฝ
 </button>
 </div>
<!-- ๊ธฐ๋ณธ ์ •๋ณด -->
 <div>
 <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">๊ธฐ๋ณธ ์ •๋ณด</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <label class="block text-sm font-medium mb-2">์ด๋ฆ„</label>
 <input type="text" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" value="ํ™๊ธธ๋™">
 </div>
<div>
 <label class="block text-sm font-medium mb-2">์‚ฌ์šฉ์ž ์ด๋ฆ„</label>
 <input type="text" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" value="honggildong">
 </div>
<div class="md:col-span-2">
 <label class="block text-sm font-medium mb-2">์ด๋ฉ”์ผ</label>
 <input type="email" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" value="hong@example.com">
 </div>
<div class="md:col-span-2">
 <label class="block text-sm font-medium mb-2">์†Œ๊ฐœ</label>
 <textarea class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" rows="4" placeholder="๋‚˜๋ฅผ ์†Œ๊ฐœํ•ด์ฃผ์„ธ์š”...">์Œ์•…์„ ์‚ฌ๋ž‘ํ•˜๋Š” ์ผ๋ฐ˜์ธ์ž…๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ์žฅ๋ฅด์˜ ์Œ์•…์„ ์ฆ๊ธฐ๋ฉฐ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.</textarea>
 </div>
 </div>
 </div>
<!-- ๊ฐœ์ธ์ •๋ณด -->
 <div>
 <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">๊ฐœ์ธ ์ •๋ณด</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <label class="block text-sm font-medium mb-2">์„ฑ๋ณ„</label>
 <select class="input-field w-full px-4 py-3 rounded-lg text-white">
 <option>์„ ํƒ ์•ˆํ•จ</option>
 <option selected>๋‚จ์„ฑ</option>
 <option>์—ฌ์„ฑ</option>
 </select>
 </div>
<div>
 <label class="block text-sm font-medium mb-2">์ƒ๋…„์›”์ผ</label>
 <input type="date" class="input-field w-full px-4 py-3 rounded-lg text-white" value="1990-01-15">
 </div>
<div>
 <label class="block text-sm font-medium mb-2">๊ตญ๊ฐ€</label>
 <select class="input-field w-full px-4 py-3 rounded-lg text-white">
 <option>๋Œ€ํ•œ๋ฏผ๊ตญ</option>
 <option>๋ฏธ๊ตญ</option>
 <option>์ผ๋ณธ</option>
 <option>์ค‘๊ตญ</option>
 </select>
 </div>
<div>
 <label class="block text-sm font-medium mb-2">์–ธ์–ด</label>
 <select class="input-field w-full px-4 py-3 rounded-lg text-white">
 <option selected>ํ•œ๊ตญ์–ด</option>
 <option>English</option>
 <option>ๆ—ฅๆœฌ่ชž</option>
 <option>ไธญๆ–‡</option>
 </select>
 </div>
 </div>
 </div>
<!-- ์†Œ์…œ ๋ฏธ๋””์–ด -->
 <div>
 <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">์†Œ์…œ ๋ฏธ๋””์–ด</h3>
<div class="space-y-4">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3">
 <i data-feather="facebook" class="w-5 h-5"></i>
 </div>
 <input type="text" class="input-field flex-1 px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="Facebook ํ”„๋กœํ•„ URL">
 <button type="button" class="ml-2 glass-panel px-4 py-3 rounded-lg text-sm">์—ฐ๊ฒฐ</button>
 </div>
<div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-sky-500 flex items-center justify-center mr-3">
 <i data-feather="twitter" class="w-5 h-5"></i>
 </div>
 <input type="text" class="input-field flex-1 px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="Twitter ํ”„๋กœํ•„ URL">
 <button type="button" class="ml-2 glass-panel px-4 py-3 rounded-lg text-sm">์—ฐ๊ฒฐ</button>
 </div>
<div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-3">
 <i data-feather="instagram" class="w-5 h-5"></i>
 </div>
 <input type="text" class="input-field flex-1 px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="Instagram ํ”„๋กœํ•„ URL">
 <button type="button" class="ml-2 glass-panel px-4 py-3 rounded-lg text-sm">์—ฐ๊ฒฐ</button>
 </div>
 </div>
 </div>
<!-- ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝ -->
 <div>
 <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝ</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <label class="block text-sm font-medium mb-2">ํ˜„์žฌ ๋น„๋ฐ€๋ฒˆํ˜ธ</label>
 <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">
 </div>
<div>
 <label class="block text-sm font-medium mb-2">์ƒˆ ๋น„๋ฐ€๋ฒˆํ˜ธ</label>
 <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">
 </div>
<div class="md:col-span-2">
 <label class="block text-sm font-medium mb-2">์ƒˆ ๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ</label>
 <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">
 </div>
 </div>
 </div>
<!-- ๋ฒ„ํŠผ ์˜์—ญ -->
 <div class="flex flex-col sm:flex-row gap-4 pt-6">
 <button type="submit" class="save-btn flex-1 py-3 rounded-lg font-medium text-white">
 ๋ณ€๊ฒฝ์‚ฌํ•ญ ์ €์žฅ
 </button>
 <button type="button" class="cancel-btn glass-panel flex-1 py-3 rounded-lg font-medium">
 <a href="mypage.html">์ทจ์†Œ</a>
 </button>
 </div>
 </form>
 </div>
 </div>
 </main>
<!-- ํ‘ธํ„ฐ -->
 <footer class="py-12 border-t border-white border-opacity-20 mt-12">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center space-x-2 mb-6 md:mb-0">
 <i data-feather="music" class="w-6 h-6"></i>
 <h3 class="text-xl font-bold">HarmonyFlow</h3>
 </div>
<div class="flex space-x-6 mb-6 md:mb-0">
 <a href="#" class="hover:text-purple-300 transition"><i data-feather="facebook"></i></a>
 <a href="#" class="hover:text-purple-300 transition"><i data-feather="twitter"></i></a>
 <a href="#" class="hover:text-purple-300 transition"><i data-feather="instagram"></i></a>
 <a href="#" class="hover:text-purple-300 transition"><i data-feather="youtube"></i></a>
 </div>
<div class="text-gray-400 text-sm">
 ยฉ 2023 HarmonyFlow. All rights reserved.
 </div>
 </div>
 </div>
 </footer>
<script>
 AOS.init();
 feather.replace();
 </script>
</body>
</html>