Spaces:

nkjoy
/

friend

Running

App Files Files Community

friend / friends.html

nkjoy

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

53fa6e8 verified 8 months ago

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>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>