Spaces:

nkjoy
/

friend

Running

App Files Files Community

nkjoy commited on Sep 5, 2025

Commit

53fa6e8

verified ·

1 Parent(s): 1b11024

로그인 페이지도 만들어 - Initial Deployment

Browse files

Files changed (8) hide show

README.md +6 -4
chat.html +341 -0
friends.html +312 -0
index.html +403 -18
login.html +184 -0
profile.html +252 -0
prompts.txt +11 -0
signup.html +305 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Friend
-emoji: 🔥
 colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: friend
+emoji: 🐳
 colorFrom: green
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

chat.html ADDED Viewed

	@@ -0,0 +1,341 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PinkFriend - 채팅</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, #FFB6C1 0%, #FFC0CB 50%, #FF69B4 100%);
+            min-height: 100vh;
+        }
+        .shimmer-btn {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1, #FF69B4);
+            background-size: 200% 200%;
+            animation: shimmer 2s ease infinite;
+            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
+            transition: all 0.3s ease;
+        }
+        .shimmer-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
+        }
+        @keyframes shimmer {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .glow-effect {
+            box-shadow: 0 0 10px rgba(255, 182, 193, 0.5),
+                        0 0 20px rgba(255, 192, 203, 0.3),
+                        0 0 30px rgba(255, 105, 180, 0.2);
+        }
+        .chat-card {
+            transition: all 0.3s ease;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .chat-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+        }
+        .message-bubble {
+            max-width: 70%;
+            border-radius: 18px;
+            padding: 12px 16px;
+            margin: 4px 0;
+            position: relative;
+            word-wrap: break-word;
+        }
+        .message-bubble.sent {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1);
+            color: white;
+            margin-left: auto;
+            border-bottom-right-radius: 4px;
+        }
+        .message-bubble.received {
+            background: white;
+            color: #333;
+            margin-right: auto;
+            border-bottom-left-radius: 4px;
+        }
+        .chat-container {
+            height: calc(100vh - 200px);
+            overflow-y: auto;
+            padding-bottom: 80px;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 105, 180, 0.5);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 105, 180, 0.7);
+        }
+        .typing-indicator {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .typing-indicator span {
+            height: 8px;
+            width: 8px;
+            background: #FF69B4;
+            border-radius: 50%;
+            display: inline-block;
+            margin: 0 2px;
+            animation: typing 1.5s infinite;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes typing {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center sticky top-0 z-50 glow-effect">
+        <div class="flex items-center">
+            <a href="friends.html" class="mr-3 text-pink-500">
+                <i data-feather="arrow-left" class="w-5 h-5"></i>
+            </a>
+            <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center mr-3">
+                <span class="text-xl">👩</span>
+            </div>
+            <div>
+                <h1 class="text-lg font-bold text-pink-600">지현</h1>
+                <p class="text-xs text-gray-500 typing-indicator">
+                    <span></span><span></span><span></span>
+                </p>
+            </div>
+        </div>
+        <div class="flex space-x-4">
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="phone"></i>
+            </button>
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="video"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Chat Container -->
+    <main class="flex-1 container mx-auto px-4 py-4">
+        <div class="chat-container space-y-3" id="chatMessages">
+            <!-- Received Message -->
+            <div class="message-bubble received" data-aos="fade-right">
+                안녕하세요! 같이 커피 마실래요? ☕
+            </div>
+            <!-- Sent Message -->
+            <div class="message-bubble sent" data-aos="fade-left" data-aos-delay="100">
+                네, 좋아요! 어디서 만날까요? 💖
+            </div>
+            <!-- Received Message -->
+            <div class="message-bubble received" data-aos="fade-right" data-aos-delay="200">
+                스타벅스 강남점으로 오시면 될 것 같아요! 🎯
+            </div>
+            <!-- Sent Message -->
+            <div class="message-bubble sent" data-aos="fade-left" data-aos-delay="300">
+                알겠습니다! 30분 후에 만나요~ ⏰
+            </div>
+            <!-- Received Message -->
+            <div class="message-bubble received" data-aos="fade-right" data-aos-delay="400">
+                네! 기대할게요 💕
+            </div>
+        </div>
+    </main>
+    <!-- Message Input -->
+    <div class="bg-white bg-opacity-90 backdrop-blur-md py-3 px-4 sticky bottom-0 z-50 glow-effect">
+        <div class="flex items-center space-x-2">
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors" onclick="toggleEmojiPicker()">
+                <i data-feather="smile" class="w-5 h-5"></i>
+            </button>
+            <input type="text" placeholder="메시지를 입력하세요..."
+                   class="flex-1 bg-gray-100 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300" id="messageInput">
+            <button class="shimmer-btn p-3 rounded-full text-white" onclick="sendMessage()">
+                <i data-feather="send" class="w-5 h-5"></i>
+            </button>
+        </div>
+        <!-- Emoji Picker -->
+        <div id="emojiPicker" class="hidden bg-white rounded-xl p-3 mt-2 shadow-lg">
+            <div class="grid grid-cols-8 gap-2 text-xl">
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😊')">😊</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😂')">😂</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('❤️')">❤️</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('👍')">👍</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😍')">😍</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🎉')">🎉</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🙏')">🙏</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😎')">😎</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😢')">😢</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😡')">😡</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🤔')">🤔</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😴')">😴</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🥰')">🥰</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🤩')">🤩</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('😋')">😋</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🥺')">🥺</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('✨')">✨</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('💕')">💕</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🌟')">🌟</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🔥')">🔥</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('💖')">💖</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🎶')">🎶</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🌈')">🌈</span>
+                <span class="cursor-pointer hover:bg-pink-100 rounded p-1 text-center" onclick="addEmoji('🍕')">🍕</span>
+            </div>
+        </div>
+    </div>
+    <!-- Bottom Navigation -->
+    <div class="bg-white bg-opacity-90 backdrop-blur-md py-3 px-8 flex justify-around items-center sticky bottom-16 z-40 glow-effect">
+        <a href="index.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="map-pin" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">지도</span>
+        </a>
+        <a href="friends.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="users" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">친구</span>
+        </a>
+        <a href="chat.html" class="flex flex-col items-center text-pink-500">
+            <i data-feather="message-circle" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">채팅</span>
+        </a>
+        <a href="profile.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="user" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">프로필</span>
+        </a>
+    </div>
+    <script>
+        // Initialize animations
+        AOS.init({
+            duration: 800,
+            once: true,
+            offset: 50
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Auto scroll to bottom of chat
+        function scrollToBottom() {
+            const chatContainer = document.getElementById('chatMessages');
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        // Scroll to bottom on page load
+        window.addEventListener('load', scrollToBottom);
+        // Send message functionality
+        const messageInput = document.getElementById('messageInput');
+        messageInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        function sendMessage() {
+            const message = messageInput.value.trim();
+            if (message) {
+                const messageElement = document.createElement('div');
+                messageElement.className = 'message-bubble sent';
+                messageElement.innerHTML = message.replace(/\n/g, '<br>');
+                messageElement.setAttribute('data-aos', 'fade-left');
+                document.getElementById('chatMessages').appendChild(messageElement);
+                messageInput.value = '';
+                // Hide emoji picker if open
+                document.getElementById('emojiPicker').classList.add('hidden');
+                // Scroll to bottom after sending message
+                setTimeout(scrollToBottom, 100);
+                // Simulate reply after a delay
+                setTimeout(simulateReply, 1500);
+            }
+        }
+        // Emoji picker functionality
+        function toggleEmojiPicker() {
+            const emojiPicker = document.getElementById('emojiPicker');
+            emojiPicker.classList.toggle('hidden');
+        }
+        function addEmoji(emoji) {
+            const input = document.getElementById('messageInput');
+            input.value += emoji;
+            input.focus();
+        }
+        function simulateReply() {
+            const replies = [
+                "네, 알겠습니다! 👍",
+                "재미있겠네요! 🎉",
+                "좋아요! 그렇게 할게요 💕",
+                "고마워요! 기대될 것 같아요 ✨",
+                "알겠습니다! 만나서 반가워요 😊"
+            ];
+            const randomReply = replies[Math.floor(Math.random() * replies.length)];
+            const replyElement = document.createElement('div');
+            replyElement.className = 'message-bubble received';
+            replyElement.textContent = randomReply;
+            replyElement.setAttribute('data-aos', 'fade-right');
+            document.getElementById('chatMessages').appendChild(replyElement);
+            scrollToBottom();
+        }
+    </script>
+</body>
+</html>

friends.html ADDED Viewed

	@@ -0,0 +1,312 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PinkFriend - 친구 목록</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, #FFB6C1 0%, #FFC0CB 50%, #FF69B4 100%);
+            min-height: 100vh;
+        }
+        .shimmer-btn {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1, #FF69B4);
+            background-size: 200% 200%;
+            animation: shimmer 2s ease infinite;
+            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
+            transition: all 0.3s ease;
+        }
+        .shimmer-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
+        }
+        @keyframes shimmer {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .glow-effect {
+            box-shadow: 0 0 10px rgba(255, 182, 193, 0.5),
+                        0 0 20px rgba(255, 192, 203, 0.3),
+                        0 0 30px rgba(255, 105, 180, 0.2);
+        }
+        .friend-card {
+            transition: all 0.3s ease;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .friend-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 105, 180, 0.5);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 105, 180, 0.7);
+        }
+        .tab-active {
+            background: rgba(255, 255, 255, 0.9);
+            color: #FF69B4;
+            font-weight: 600;
+            box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center sticky top-0 z-50 glow-effect">
+        <div class="flex items-center">
+            <i data-feather="users" class="text-pink-500 mr-2"></i>
+            <h1 class="text-xl font-bold text-pink-600">PinkFriend</h1>
+        </div>
+        <div class="flex space-x-4">
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="search"></i>
+            </button>
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="settings"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto px-4 py-6">
+        <!-- Header Section -->
+        <section class="mb-6 text-center" data-aos="fade-down">
+            <h2 class="text-2xl font-bold text-white mb-2">내 친구 목록</h2>
+            <p class="text-white text-opacity-90">총 24명의 친구가 있습니다</p>
+        </section>
+        <!-- Tabs -->
+        <div class="flex bg-white bg-opacity-20 rounded-xl p-1 mb-6" data-aos="fade-up">
+            <button class="flex-1 py-2 px-4 rounded-xl text-white transition-all tab-active" onclick="switchTab('all')">
+                전체 친구
+            </button>
+            <button class="flex-1 py-2 px-4 rounded-xl text-white transition-all" onclick="switchTab('female')">
+                👩 여자 친구
+            </button>
+            <button class="flex-1 py-2 px-4 rounded-xl text-white transition-all" onclick="switchTab('male')">
+                👨 남자 친구
+            </button>
+        </div>
+        <!-- Friends List Section -->
+        <section data-aos="fade-up" data-aos-delay="200">
+            <div class="bg-white rounded-2xl p-4 shadow-lg">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-semibold text-pink-600">친구 목록</h3>
+                    <div class="flex space-x-2">
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="filter" class="w-4 h-4"></i>
+                        </button>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="plus" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="space-y-4 max-h-96 overflow-y-auto pr-2" id="friendsList">
+                    <!-- Friend Card - Female -->
+                    <div class="friend-card bg-pink-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-pink-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👩</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">지현</h4>
+                                <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full ml-2">온라인</span>
+                            </div>
+                            <p class="text-sm text-gray-600">함께 커피 마실 분 구해요!</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Male -->
+                    <div class="friend-card bg-blue-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👨</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">민수</h4>
+                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full ml-2">오프라인</span>
+                            </div>
+                            <p class="text-sm text-gray-600">등산 좋아하는 사람</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Female -->
+                    <div class="friend-card bg-pink-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-pink-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👩</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">수진</h4>
+                                <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full ml-2">온라인</span>
+                            </div>
+                            <p class="text-sm text-gray-600">영화 보러 갈 사람?</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Male -->
+                    <div class="friend-card bg-blue-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👨</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">현우</h4>
+                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full ml-2">온라인</span>
+                            </div>
+                            <p class="text-sm text-gray-600">게임 친구 구합니다</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Female -->
+                    <div class="friend-card bg-pink-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-pink-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👩</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">예은</h4>
+                                <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full ml-2">온라인</span>
+                            </div>
+                            <p class="text-sm text-gray-600">요리 같이 할 분!</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Male -->
+                    <div class="friend-card bg-blue-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👨</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">준호</h4>
+                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full ml-2">오프라인</span>
+                            </div>
+                            <p class="text-sm text-gray-600">축구 같이 하실 분</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Bottom Navigation -->
+    <div class="bg-white bg-opacity-90 backdrop-blur-md py-3 px-8 flex justify-around items-center sticky bottom-0 z-50 glow-effect">
+        <a href="index.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="map-pin" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">지도</span>
+        </a>
+        <a href="friends.html" class="flex flex-col items-center text-pink-500">
+            <i data-feather="users" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">친구</span>
+        </a>
+        <a href="chat.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="message-circle" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">채팅</span>
+        </a>
+        <a href="profile.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="user" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">프로필</span>
+        </a>
+    </div>
+    <script>
+        // Initialize animations
+        AOS.init({
+            duration: 800,
+            once: true,
+            offset: 50
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Tab switching function
+        function switchTab(tab) {
+            // Remove active class from all tabs
+            document.querySelectorAll('.flex-1.py-2.px-4.rounded-xl').forEach(btn => {
+                btn.classList.remove('tab-active');
+                btn.classList.add('text-white');
+            });
+            // Add active class to clicked tab
+            event.target.classList.add('tab-active');
+            event.target.classList.remove('text-white');
+            // Filter friends based on tab
+            const friendsList = document.getElementById('friendsList');
+            const allFriends = friendsList.querySelectorAll('.friend-card');
+            allFriends.forEach(friend => {
+                if (tab === 'all') {
+                    friend.style.display = 'flex';
+                } else if (tab === 'female') {
+                    if (friend.classList.contains('bg-pink-50')) {
+                        friend.style.display = 'flex';
+                    } else {
+                        friend.style.display = 'none';
+                    }
+                } else if (tab === 'male') {
+                    if (friend.classList.contains('bg-blue-50')) {
+                        friend.style.display = 'flex';
+                    } else {
+                        friend.style.display = 'none';
+                    }
+                }
+            });
+        }
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,404 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PinkFriend - 주변 친구 찾기</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, #FFB6C1 0%, #FFC0CB 50%, #FF69B4 100%);
+            min-height: 100vh;
+        }
+        .shimmer-btn {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1, #FF69B4);
+            background-size: 200% 200%;
+            animation: shimmer 2s ease infinite;
+            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
+            transition: all 0.3s ease;
+        }
+        .shimmer-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
+        }
+        @keyframes shimmer {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .glow-effect {
+            box-shadow: 0 0 10px rgba(255, 182, 193, 0.5),
+                        0 0 20px rgba(255, 192, 203, 0.3),
+                        0 0 30px rgba(255, 105, 180, 0.2);
+        }
+        .friend-card {
+            transition: all 0.3s ease;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .friend-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .map-container {
+            height: 400px;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 105, 180, 0.5);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 105, 180, 0.7);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center sticky top-0 z-50 glow-effect">
+        <div class="flex items-center">
+            <i data-feather="users" class="text-pink-500 mr-2"></i>
+            <h1 class="text-xl font-bold text-pink-600">PinkFriend</h1>
+        </div>
+        <div class="flex space-x-4">
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="map"></i>
+            </button>
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="settings"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto px-4 py-6">
+        <!-- Welcome Section -->
+        <section class="mb-8 text-center" data-aos="fade-down">
+            <h2 class="text-2xl font-bold text-white mb-2">주변 친구를 찾아보세요</h2>
+            <p class="text-white text-opacity-90">실시간으로 가까운 친구들을 발견하고 연결하세요</p>
+        </section>
+        <!-- Map Section -->
+        <section class="mb-8" data-aos="fade-up">
+            <div class="bg-white rounded-2xl p-4 shadow-lg">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-semibold text-pink-600">지도에서 친구 찾기</h3>
+                    <div class="flex space-x-2">
+                        <button class="shimmer-btn px-4 py-2 rounded-full text-white font-medium text-sm">내 위치</button>
+                        <button class="shimmer-btn px-4 py-2 rounded-full text-white font-medium text-sm" onclick="toggleFilterModal()">
+                            <i data-feather="filter" class="w-4 h-4 mr-1"></i> 필터
+                        </button>
+                    </div>
+                </div>
+                <div class="map-container bg-gray-200 rounded-xl flex items-center justify-center">
+                    <p class="text-gray-500">Google Maps가 여기에 표시됩니다</p>
+                    <!-- Google Maps will be initialized here with JavaScript -->
+                </div>
+            </div>
+        </section>
+        <!-- Friends List Section -->
+        <section data-aos="fade-up" data-aos-delay="200">
+            <div class="bg-white rounded-2xl p-4 shadow-lg">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-semibold text-pink-600">주변 친구</h3>
+                    <span class="text-sm text-gray-500">12명 발견</span>
+                </div>
+                <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
+                    <!-- Friend Card - Female -->
+                    <div class="friend-card bg-pink-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-pink-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👩</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">지현</h4>
+                                <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full ml-2">0.5km</span>
+                            </div>
+                            <p class="text-sm text-gray-600">함께 커피 마실 분 구해요!</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Male -->
+                    <div class="friend-card bg-blue-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👨</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">민수</h4>
+                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full ml-2">0.8km</span>
+                            </div>
+                            <p class="text-sm text-gray-600">등산 좋아하는 사람</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Female -->
+                    <div class="friend-card bg-pink-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-pink-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👩</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">수진</h4>
+                                <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full ml-2">1.2km</span>
+                            </div>
+                            <p class="text-sm text-gray-600">영화 보러 갈 사람?</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <!-- Friend Card - Male -->
+                    <div class="friend-card bg-blue-50 p-4 flex items-center">
+                        <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4">
+                            <span class="text-xl">👨</span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <h4 class="font-medium">현우</h4>
+                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full ml-2">1.5km</span>
+                            </div>
+                            <p class="text-sm text-gray-600">게임 친구 구합니���</p>
+                        </div>
+                        <button class="shimmer-btn px-3 py-1 rounded-full text-white text-sm">
+                            <i data-feather="message-circle" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Bottom Navigation -->
+    <div class="bg-white bg-opacity-90 backdrop-blur-md py-3 px-8 flex justify-around items-center sticky bottom-0 z-50 glow-effect">
+        <button class="flex flex-col items-center text-pink-500">
+            <i data-feather="map-pin" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">지도</span>
+        </button>
+        <a href="friends.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="users" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">친구</span>
+        </a>
+        <a href="chat.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="message-circle" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">채팅</span>
+        </a>
+        <a href="profile.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="user" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">프로필</span>
+        </a>
+    </div>
+    <!-- Filter Modal -->
+    <div id="filterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-2xl p-6 w-11/12 max-w-md">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-lg font-semibold text-pink-600">친구 필터</h3>
+                <button onclick="toggleFilterModal()">
+                    <i data-feather="x" class="w-6 h-6"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <h4 class="font-medium mb-2">성별</h4>
+                    <div class="flex space-x-3">
+                        <button class="px-4 py-2 rounded-full bg-pink-100 text-pink-600 font-medium">전체</button>
+                        <button class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 font-medium">👩 여성</button>
+                        <button class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 font-medium">👨 남성</button>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="font-medium mb-2">거리</h4>
+                    <input type="range" min="1" max="10" value="5" class="w-full h-2 bg-pink-200 rounded-lg appearance-none cursor-pointer">
+                    <div class="flex justify-between text-sm text-gray-500 mt-1">
+                        <span>1km</span>
+                        <span>5km</span>
+                        <span>10km</span>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="font-medium mb-2">관심사</h4>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="px-3 py-1 bg-pink-100 text-pink-600 rounded-full text-sm">🎬 영화</span>
+                        <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">☕ 커피</span>
+                        <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">🎵 음악</span>
+                        <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">🏃 운동</span>
+                        <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">🎮 게임</span>
+                        <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">📚 독서</span>
+                    </div>
+                </div>
+            </div>
+            <button class="shimmer-btn w-full py-3 rounded-xl text-white font-medium mt-6">적용하기</button>
+        </div>
+    </div>
+    <script>
+        // Initialize animations
+        AOS.init({
+            duration: 800,
+            once: true,
+            offset: 50
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Toggle filter modal
+        function toggleFilterModal() {
+            const modal = document.getElementById('filterModal');
+            modal.classList.toggle('hidden');
+        }
+        // Request location permission
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    console.log("위치 정보 수신:", position.coords.latitude, position.coords.longitude);
+                    // 여기에 Google Maps 초기화 코드 추가
+                },
+                function(error) {
+                    console.error("위치 정보를 가져오지 못했습니다:", error);
+                    alert("위치 정보 접근 권한이 필요합니다. 설��에서 권한을 허용해주세요.");
+                },
+                { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
+            );
+        } else {
+            alert("이 브라우저는 위치 정보 기능을 지원하지 않습니다.");
+        }
+        // Google Maps API 초기화 함수 (API 키 필요)
+        function initMap() {
+            // Google Maps API 키가 필요합니다
+            // const map = new google.maps.Map(document.querySelector('.map-container'), {
+            //     center: { lat: -34.397, lng: 150.644 },
+            //     zoom: 15,
+            //     styles: [
+            //         {
+            //             "featureType": "all",
+            //             "elementType": "geometry.fill",
+            //             "stylers": [{"weight": "2.00"}]
+            //         },
+            //         {
+            //             "featureType": "all",
+            //             "elementType": "geometry.stroke",
+            //             "stylers": [{"color": "#9c9c9c"}]
+            //         },
+            //         {
+            //             "featureType": "all",
+            //             "elementType": "labels.text",
+            //             "stylers": [{"visibility": "on"}]
+            //         },
+            //         {
+            //             "featureType": "landscape",
+            //             "elementType": "all",
+            //             "stylers": [{"color": "#f2f2f2"}]
+            //         },
+            //         {
+            //             "featureType": "landscape",
+            //             "elementType": "geometry.fill",
+            //             "stylers": [{"color": "#ffffff"}]
+            //         },
+            //         {
+            //             "featureType": "poi",
+            //             "elementType": "all",
+            //             "stylers": [{"visibility": "off"}]
+            //         },
+            //         {
+            //             "featureType": "road",
+            //             "elementType": "all",
+            //             "stylers": [{"saturation": -100}, {"lightness": 45}]
+            //         },
+            //         {
+            //             "featureType": "road",
+            //             "elementType": "geometry.fill",
+            //             "stylers": [{"color": "#eeeeee"}]
+            //         },
+            //         {
+            //             "featureType": "road",
+            //             "elementType": "labels.text.fill",
+            //             "stylers": [{"color": "#7b7b7b"}]
+            //         },
+            //         {
+            //             "featureType": "road",
+            //             "elementType": "labels.text.stroke",
+            //             "stylers": [{"color": "#ffffff"}]
+            //         },
+            //         {
+            //             "featureType": "road.highway",
+            //             "elementType": "all",
+            //             "stylers": [{"visibility": "simplified"}]
+            //         },
+            //         {
+            //             "featureType": "road.arterial",
+            //             "elementType": "labels.icon",
+            //             "stylers": [{"visibility": "off"}]
+            //         },
+            //         {
+            //             "featureType": "transit",
+            //             "elementType": "all",
+            //             "stylers": [{"visibility": "off"}]
+            //         },
+            //         {
+            //             "featureType": "water",
+            //             "elementType": "all",
+            //             "stylers": [{"color": "#FFB6C1"}, {"visibility": "on"}]
+            //         }
+            //     ]
+            // });
+        }
+        // Google Maps API 로드
+        // function loadGoogleMaps() {
+        //     const script = document.createElement('script');
+        //     script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`;
+        //     script.async = true;
+        //     script.defer = true;
+        //     document.head.appendChild(script);
+        // }
+        // DOM이 로드된 후 Google Maps 로드
+        // document.addEventListener('DOMContentLoaded', loadGoogleMaps);
+    </script>
+</body>
 </html>

	@@ -0,0 +1,184 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PinkFriend - 로그인</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, #FFB6C1 0%, #FFC0CB 50%, #FF69B4 100%);
+            min-height: 100vh;
+        }
+        .shimmer-btn {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1, #FF69B4);
+            background-size: 200% 200%;
+            animation: shimmer 2s ease infinite;
+            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
+            transition: all 0.3s ease;
+        }
+        .shimmer-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
+        }
+        @keyframes shimmer {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .glow-effect {
+            box-shadow: 0 0 10px rgba(255, 182, 193, 0.5),
+                        0 0 20px rgba(255, 192, 203, 0.3),
+                        0 0 30px rgba(255, 105, 180, 0.2);
+        }
+        .input-field {
+            background: rgba(255, 255, 255, 0.9);
+            border: 2px solid transparent;
+            transition: all 0.3s ease;
+        }
+        .input-field:focus {
+            border-color: #FF69B4;
+            box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 105, 180, 极光);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 105, 180, 0.7);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center sticky top-0 z-50 glow-effect">
+        <div class="flex items-center">
+            <a href="index.html" class="mr-3 text-pink-500">
+                <i data-feather="arrow-left" class="w-5 h-5"></i>
+            </a>
+            <i data-feather="users" class="text-pink-500 mr-2"></i>
+            <h1 class="text-xl font-bold text-pink-600">PinkFriend</h1>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto px-4 py-6">
+        <!-- Header Section -->
+        <section class="mb-8 text-center" data-aos="fade-down">
+            <h2 class="text-2xl font-bold text-white mb-2">로그인 🔐</h2>
+            <p class="text-white text-opacity-90">PinkFriend에 다시 오신 것을 환영합니다!</p>
+        </section>
+        <!-- Login Form -->
+        <section data-aos="fade-up">
+            <div class="bg-white rounded-2xl p-6 shadow-lg">
+                <form id="loginForm">
+                    <!-- Email -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-pink-600 mb-2">이메일 📧</label>
+                        <input type="email" placeholder="이메일을 입력하세요"
+                               class="w-full input-field rounded-xl px-4 py-3 focus:outline-none" required>
+                    </div>
+                    <!-- Password -->
+                    <div class="mb-6">
+                        <label class="block text-sm font-medium text-pink-600 mb-2">비밀번호 🔑</label>
+                        <input type="password" placeholder="비밀번호를 입력하세요"
+                               class="w-full input-field rounded-xl px-4 py-3 focus:outline-none" required>
+                    </div>
+                    <!-- Remember Me & Forgot Password -->
+                    <div class="flex justify-between items-center mb-6">
+                        <label class="flex items-center">
+                            <input type="checkbox" class="w-4 h-4 text-pink-600 rounded focus:ring-pink-500">
+                            <span class="ml-2 text-sm text-gray-600">로그인 상태 유지</span>
+                        </label>
+                        <a href="#" class="text-sm text-pink-600 hover:underline">비밀번호 찾기</a>
+                    </div>
+                    <!-- Submit Button -->
+                    <button type="submit" class="shimmer-btn w-full py-4 rounded-xl text-white font-bold text-lg">
+                        로그인하기 ✨
+                    </button>
+                </form>
+                <!-- Social Login -->
+                <div class="mt-6">
+                    <div class="relative flex items-center">
+                        <div class="flex-grow border-t border-gray-300"></div>
+                        <span class="flex-shrink mx-4 text-gray-600 text-sm">간편 로그인</span>
+                        <div class="flex-grow border-t border-gray-300"></div>
+                    </div>
+                    <div class="grid grid-cols-3 gap-3 mt-4">
+                        <button class="p-3 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors">
+                            <i data-feather="facebook" class="w-6 h-6 text-blue-600 mx-auto"></i>
+                        </button>
+                        <button class="p-3 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors">
+                            <i data-feather="twitter" class="w-6 h-6 text-blue-400 mx-auto"></i>
+                        </button>
+                        <button class="p-3 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors">
+                            <i data-feather="instagram" class="w-6 h-6 text-pink-500 mx-auto"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Signup Link -->
+                <div class="text-center mt-6">
+                    <p class="text-sm text-gray-600">계정이 없으신가요?
+                        <a href="signup.html" class="text-pink-600 font-medium hover:underline">회원가입하기</a>
+                    </p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script>
+        // Initialize animations
+        AOS.init({
+            duration: 800,
+            once: true,
+            offset: 50
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Form submission
+        document.getElementById('loginForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Form validation would go here in a real app
+            // Simulate successful login
+            alert('로그인 성공! 환영합니다! 🎉');
+            window.location.href = 'index.html';
+        });
+    </script>
+</body>
+</html>

profile.html ADDED Viewed

	@@ -0,0 +1,252 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PinkFriend - 프로필</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, #FFB6C1 0%, #FFC0CB 50%, #FF69B4 100%);
+            min-height: 100vh;
+        }
+        .shimmer-btn {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1, #FF69B4);
+            background-size: 200% 200%;
+            animation: shimmer 2s ease infinite;
+            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
+            transition: all 0.3s ease;
+        }
+        .shimmer-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
+        }
+        @keyframes shimmer {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .glow-effect {
+            box-shadow: 0 0 10px rgba(255, 182, 193, 0.5),
+                        0 0 20px rgba(255, 192, 203, 0.3),
+                        0 0 30px rgba(255, 105, 180, 0.2);
+        }
+        .profile-card {
+            transition: all 0.3s ease;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .profile-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 105, 180, 0.5);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 105, 180, 0.7);
+        }
+        .tab-active {
+            background: rgba(255, 255, 255, 0.9);
+            color: #FF69B4;
+            font-weight: 600;
+            box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
+        }
+        .interest-tag {
+            display: inline-block;
+            padding: 6px 12px;
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 20px;
+            margin: 4px;
+            font-size: 14px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center sticky top-0 z-50 glow-effect">
+        <div class="flex items-center">
+            <i data-feather="user" class="text-pink-500 mr-2"></i>
+            <h1 class="text-xl font-bold text-pink-600">PinkFriend</h1>
+        </div>
+        <div class="flex space-x-4">
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="edit"></i>
+            </button>
+            <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition-colors">
+                <i data-feather="settings"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto px-4 py-6">
+        <!-- Profile Header -->
+        <section class="mb-8 text-center" data-aos="fade-down">
+            <div class="relative mx-auto w-24 h-24 mb-4">
+                <div class="w-full h-full rounded-full bg-pink-200 flex items-center justify-center text-4xl">
+                    👩
+                </div>
+                <div class="absolute bottom-0 right-0 w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center text-white">
+                    <i data-feather="camera" class="w-4 h-4"></i>
+                </div>
+            </div>
+            <h2 class="text-2xl font-bold text-white mb-1">예진</h2>
+            <p class="text-white text-opacity-90">서울시 강남구 · 25세</p>
+            <div class="mt-3">
+                <span class="inline-block px-4 py-1 bg-white bg-opacity-20 text-white rounded-full text-sm">
+                    🎵 음악 · ☕ 커피 · 📚 독서
+                </span>
+            </div>
+        </section>
+        <!-- Stats Section -->
+        <section class="mb-6" data-aos="fade-up">
+            <div class="bg-white rounded-2xl p-4 shadow-lg">
+                <div class="grid grid-cols-3 gap-4 text-center">
+                    <div>
+                        <p class="text-2xl font-bold text-pink-600">24</p>
+                        <p class="text-sm text-gray-600">친구</p>
+                    </div>
+                    <div>
+                        <p class="text-2xl font-bold text-pink-600">156</p>
+                        <p class="text-sm text-gray-600">매칭</p>
+                    </div>
+                    <div>
+                        <p class="text-2xl font-bold text-pink-600">89%</p>
+                        <p class="text-sm text-gray-600">활동률</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- About Me Section -->
+        <section class="mb-6" data-aos="fade-up" data-aos-delay="100">
+            <div class="bg-white rounded-2xl p-4 shadow-lg">
+                <h3 class="font-semibold text-pink-600 mb-3">자기소개</h3>
+                <p class="text-gray-700">
+                    안녕하세요! 저는 커피와 음악을 좋아하는 예진입니다.
+                    주로 스타벅스에서 작업하거나 친구들을 만나요.
+                    새로운 사람들과의 대화를 즐기고, 다양한 경험을 나누는 것을 좋아해요! ✨
+                </p>
+            </div>
+        </section>
+        <!-- Interests Section -->
+        <section class="mb-6" data-aos="fade-up" data-aos-delay="200">
+            <div class="bg-white rounded-2xl p-4 shadow-lg">
+                <h3 class="font-semibold text-pink-600 mb-3">관심사</h3>
+                <div class="flex flex-wrap">
+                    <span class="interest-tag">🎵 음악 감상</span>
+                    <span class="interest-tag">☕ 커피</span>
+                    <span class="interest-tag">📚 독서</span>
+                    <span class="interest-tag">🎬 영화</span>
+                    <span class="interest-tag">✈️ 여행</span>
+                    <span class="interest-tag">🍳 요리</span>
+                    <span class="interest-tag">🏃‍♀️ 러닝</span>
+                    <span class="interest-tag">🎨 드로잉</span>
+                </div>
+            </div>
+        </section>
+        <!-- Settings Section -->
+        <section data-aos="fade-up" data-aos-delay="300">
+            <div class="bg-white rounded-2xl p-4 shadow-lg">
+                <h3 class="font-semibold text-pink-600 mb-3">설정</h3>
+                <div class="space-y-3">
+                    <div class="flex items-center justify-between py-2">
+                        <div class="flex items-center">
+                            <i data-feather="bell" class="w-5 h-5 text-pink-500 mr-3"></i>
+                            <span>알림 설정</span>
+                        </div>
+                        <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
+                    </div>
+                    <div class="flex items-center justify-between py-2">
+                        <div class="flex items-center">
+                            <i data-feather="shield" class="w-5 h-5 text-pink-500 mr-3"></i>
+                            <span>개인정보 보호</span>
+                        </div>
+                        <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
+                    </div>
+                    <div class="flex items-center justify-between py-2">
+                        <div class="flex items-center">
+                            <i data-feather="map-pin" class="w-5 h-5 text-pink-500 mr-3"></i>
+                            <span>위치 서비스</span>
+                        </div>
+                        <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
+                    </div>
+                    <div class="flex items-center justify-between py-2">
+                        <div class="flex items-center">
+                            <i data-feather="help-circle" class="w-5 h-5 text-pink-500 mr-3"></i>
+                            <span>도움말 및 지원</span>
+                        </div>
+                        <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Bottom Navigation -->
+    <div class="bg-white bg-opacity-90 backdrop-blur-md py-3 px-8 flex justify-around items-center sticky bottom-0 z-50 glow-effect">
+        <a href="index.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="map-pin" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">지도</span>
+        </a>
+        <a href="friends.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="users" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">친구</span>
+        </a>
+        <a href="chat.html" class="flex flex-col items-center text-gray-400">
+            <i data-feather="message-circle" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">채팅</span>
+        </a>
+        <a href="profile.html" class="flex flex-col items-center text-pink-500">
+            <i data-feather="user" class="w-6 h-6"></i>
+            <span class="text-xs mt-1">프로필</span>
+        </a>
+    </div>
+    <script>
+        // Initialize animations
+        AOS.init({
+            duration: 800,
+            once: true,
+            offset: 50
+        });
+        // Initialize feather icons
+        feather.replace();
+    </script>
+</body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,11 @@

+구글 지도기반으로 주변 친구 찾기 하자 !  디자인은 프리미엄으로 해주고 !  전반적으로 핑크빛이 돌았으면 좋겠어 ! 버튼들은 반짝이게 해주고 !  이모티콘 넣어서 이쁘게 해줘!
+모바일 전용이라 !  모바일에 최적하 되게 해줘!
+남자 :  여자 :  분리 하자 !   남자면 앞에 남자 아이콘   여자면 여자 아이콘이 닉네임 앞에 있도록 하자 !
+친구 페이지 만들어줘
+채팅 페이지 만들어줘
+채팅 보낼때 이모티콘도 보낼수 있도록 해줘!
+이번엔 프로필 페이지 만들어줘!
+회원가입 페이지 만들어줘!
+로그인 페이지도 만들어

signup.html ADDED Viewed

	@@ -0,0 +1,305 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PinkFriend - 회원가입</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, #FFB6C1 0%, #FFC0CB 50%, #FF69B4 100%);
+            min-height: 100vh;
+        }
+        .shimmer-btn {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1, #FF69B4);
+            background-size: 200% 200%;
+            animation: shimmer 2s ease infinite;
+            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
+            transition: all 0.3s ease;
+        }
+        .shimmer-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
+        }
+        @keyframes shimmer {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .glow-effect {
+            box-shadow: 0 0 10px rgba(255, 182, 193, 0.5),
+                        0 0 20px rgba(255, 192, 203, 0.3),
+                        0 0 30px rgba(255, 105, 180, 0.2);
+        }
+        .input-field {
+            background: rgba(255, 255, 255, 0.9);
+            border: 2px solid transparent;
+            transition: all 0.3s ease;
+        }
+        .input-field:focus {
+            border-color: #FF69B4;
+            box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2);
+        }
+        .gender-selector {
+            transition: all 0.3s ease;
+        }
+        .gender-selector.selected {
+            background: linear-gradient(45deg, #FF69B4, #FFB6C1);
+            color: white;
+            transform: scale(1.05);
+            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 105, 180, 0.5);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 105, 180, 0.7);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Navigation -->
+    <nav class="bg-white bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center sticky top-0 z-50 glow-effect">
+        <div class="flex items-center">
+            <a href="index.html" class="mr-3 text-pink-500">
+                <i data-feather="arrow-left" class="w-5 h-5"></i>
+            </a>
+            <i data-feather="users" class="text-pink-500 mr-2"></i>
+            <h1 class="text-xl font-bold text-pink-600">PinkFriend</h1>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto px-4 py-6">
+        <!-- Header Section -->
+        <section class="mb-8 text-center" data-aos="fade-down">
+            <h2 class="text-2xl font-bold text-white mb-2">회원가입 🎉</h2>
+            <p class="text-white text-opacity-90">PinkFriend에 오신 것을 환영합니다!</p>
+        </section>
+        <!-- Signup Form -->
+        <section data-aos="fade-up">
+            <div class="bg-white rounded-2xl p-6 shadow-lg">
+                <form id="signupForm">
+                    <!-- Profile Image -->
+                    <div class="flex justify-center mb-6">
+                        <div class="relative">
+                            <div class="w-20 h-20 rounded-full bg-pink-200 flex items-center justify-center text-3xl cursor-pointer" onclick="document.getElementById('profileImage').click()">
+                                👩
+                            </div>
+                            <input type="file" id="profileImage" class="hidden" accept="image/*">
+                            <div class="absolute bottom-0 right-0 w-6 h-6 bg-pink-500 rounded-full flex items-center justify-center text-white">
+                                <i data-feather="camera" class="w-3 h-3"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Nickname -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-pink-600 mb-2">닉네임 ✏️</label>
+                        <input type="text" placeholder="사용할 닉네임을 입력하세요"
+                               class="w-full input-field rounded-xl px-4 py-3 focus:outline-none">
+                    </div>
+                    <!-- Gender Selection -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-pink-600 mb-2">성별 🌈</label>
+                        <div class="flex space-x-4">
+                            <div class="flex-1 gender-selector rounded-xl p-4 text-center cursor-pointer border-2 border-pink-100 selected" onclick="selectGender(this, 'female')">
+                                <span class="text-2xl block mb-2">👩</span>
+                                <span class="text-sm">여성</span>
+                            </div>
+                            <div class="flex-1 gender-selector rounded-xl p-4 text-center cursor-pointer border-2 border-blue-100" onclick="selectGender(this, 'male')">
+                                <span class="text-2xl block mb-2">👨</span>
+                                <span class="text-sm">남성</span>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Age -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-pink-600 mb-2">나이 🎂</label>
+                        <input type="number" placeholder="나이를 입력하세요" min="18" max="100"
+                               class="w-full input-field rounded-xl px-4 py-3 focus:outline-none">
+                    </div>
+                    <!-- Location -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-pink-600 mb-2">위치 📍</label>
+                        <div class="flex space-x-2">
+                            <input type="text" placeholder="현재 위치"
+                                   class="flex-1 input-field rounded-xl px-4 py-3 focus:outline-none" id="locationInput">
+                            <button type="button" class="shimmer-btn px-4 py-3 rounded-xl text-white" onclick="getCurrentLocation()">
+                                <i data-feather="map-pin" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Interests -->
+                    <div class="mb-6">
+                        <label class="block text-sm font-medium text-pink-600 mb-2">관심사 🎯</label>
+                        <div class="grid grid-cols-3 gap-2">
+                            <label class="flex items-center">
+                                <input type="checkbox" class="hidden peer">
+                                <span class="flex-1 text-center py-2 bg-gray-100 rounded-lg peer-checked:bg-pink-100 peer-checked:text-pink-600 cursor-pointer">🎬 영화</span>
+                            </label>
+                            <label class="flex items-center">
+                                <input type="checkbox" class="hidden peer">
+                                <span class="flex-1 text-center py-2 bg-gray-100 rounded-lg peer-checked:bg-pink-100 peer-checked:text-pink-600 cursor-pointer">☕ 커피</span>
+                            </label>
+                            <label class="flex items-center">
+                                <input type="checkbox" class="hidden peer">
+                                <span class="flex-1 text-center py-2 bg-gray-100 rounded-lg peer-checked:bg-pink-100 peer-checked:text-pink-600 cursor-pointer">🎵 음악</span>
+                            </label>
+                            <label class="flex items-center">
+                                <input type="checkbox" class="hidden peer">
+                                <span class="flex-1 text-center py-2 bg-gray-100 rounded-lg peer-checked:bg-pink-100 peer-checked:text-pink-600 cursor-pointer">🏃 운동</span>
+                            </label>
+                            <label class="flex items-center">
+                                <input type="checkbox" class="hidden peer">
+                                <span class="flex-1 text-center py-2 bg-gray-100 rounded-lg peer-checked:bg-pink-100 peer-checked:text-pink-600 cursor-pointer">🎮 게임</span>
+                            </label>
+                            <label class="flex items-center">
+                                <input type="checkbox" class="hidden peer">
+                                <span class="flex-1 text-center py-2 bg-gray-100 rounded-lg peer-checked:bg-pink-100 peer-checked:text-pink-600 cursor-pointer">📚 독서</span>
+                            </label>
+                        </div>
+                    </div>
+                    <!-- Terms Agreement -->
+                    <div class="mb-6">
+                        <label class="flex items-center">
+                            <input type="checkbox" class="w-4 h-4 text-pink-600 rounded focus:ring-pink-500">
+                            <span class="ml-2 text-sm text-gray-600">이용약관에 동의합니다 📋</span>
+                        </label>
+                        <label class="flex items-center mt-2">
+                            <input type="checkbox" class="w-4 h-4 text-pink-600 rounded focus:ring-pink-500">
+                            <span class="ml-2 text-sm text-gray-600">개인정보 처리방침에 동의합니다 🔒</span>
+                        </label>
+                    </div>
+                    <!-- Submit Button -->
+                    <button type="submit" class="shimmer-btn w-full py-4 rounded-xl text-white font-bold text-lg">
+                        회원가입 완료하기 🎊
+                    </button>
+                </form>
+                <!-- Login Link -->
+                <div class="text-center mt-6">
+                    <p class="text-sm text-gray-600">이미 계정이 있으신가요?
+                        <a href="index.html" class="text-pink-600 font-medium hover:underline">로그인하기</a>
+                    </p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script>
+        // Initialize animations
+        AOS.init({
+            duration: 800,
+            once: true,
+            offset: 50
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Gender selection function
+        function selectGender(element, gender) {
+            // Remove selected class from all gender options
+            document.querySelectorAll('.gender-selector').forEach(el => {
+                el.classList.remove('selected');
+                if (gender === 'female') {
+                    el.classList.remove('bg-pink-100');
+                    el.classList.add('border-pink-100');
+                } else {
+                    el.classList.remove('bg-blue-100');
+                    el.classList.add('border-blue-100');
+                }
+            });
+            // Add selected class to clicked element
+            element.classList.add('selected');
+            if (gender === 'female') {
+                element.classList.remove('border-pink-100');
+                element.classList.add('bg-pink-100');
+            } else {
+                element.classList.remove('border-blue-100');
+                element.classList.add('bg-blue-100');
+            }
+        }
+        // Get current location
+        function getCurrentLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(
+                    function(position) {
+                        // In a real app, you would reverse geocode the coordinates
+                        document.getElementById('locationInput').value = "현재 위치 (자동 감지됨)";
+                    },
+                    function(error) {
+                        console.error("위치 정보를 가져오지 못했습니다:", error);
+                        alert("위치 정보 접근 권한이 필요합니다. 설정에서 권한을 허용해주세요.");
+                    }
+                );
+            } else {
+                alert("이 브라우저는 위치 정보 기능을 지원하지 않습니다.");
+            }
+        }
+        // Form submission
+        document.getElementById('signupForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Form validation would go here in a real app
+            // Simulate successful registration
+            alert('회원가입이 완료되었습니다! 🎉');
+            window.location.href = 'index.html';
+        });
+        // Interest checkbox styling
+        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+            checkbox.addEventListener('change', function() {
+                const span = this.nextElementSibling;
+                if (this.checked) {
+                    span.classList.add('bg-pink-100', 'text-pink-600');
+                    span.classList.remove('bg-gray-100');
+                } else {
+                    span.classList.remove('bg-pink-100', 'text-pink-600');
+                    span.classList.add('bg-gray-100');
+                }
+            });
+        });
+    </script>
+</body>
+</html>