Spaces:

nkjoy
/

friend

Running

App Files Files Community

friend / chat.html

nkjoy

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

53fa6e8 verified 6 months ago

raw

history blame contribute delete

14.8 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);
	}

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