Spaces:

nkjoy
/

coin

Running

App Files Files Community

coin / login.html

nkjoy

회원가입 페이지 만들어줘 - Follow Up Deployment

6a0dd77 verified 12 months ago

Raw

History Blame Contribute Delete

11.6 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>로그인 - CryptoPro</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>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	body {
	font-family: 'Inter', sans-serif;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #e2e8f0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	}
	.gradient-text {
	background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	.glass-effect {
	background: rgba(30, 41, 59, 0.5);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.1);
	}
	.login-btn {
	background: linear-gradient(90deg, #8b5cf6, #ec4899);
	}
	.social-btn {
	transition: all 0.3s ease;
	}
	.social-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
	}
	.input-field {
	background: rgba(30, 41, 59, 0.7);
	border: 1px solid rgba(255,255,255,0.1);
	}
	.input-field:focus {
	border-color: #8b5cf6;
	outline: none;
	}
	.mobile-menu {
	transform: translateX(100%);
	transition: transform 0.3s ease;
	}
	.mobile-menu.active {
	transform: translateX(0);
	}
	</style>
	</head>
	<body class="min-h-screen flex flex-col">
	<!-- Header -->
	<header class="sticky top-0 z-50 glass-effect">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center space-x-2">
	<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
	<i data-feather="zap" class="text-white"></i>
	</div>
	<h1 class="text-2xl font-bold gradient-text">Crypto<span class="text-white">Pro</span></h1>
	</div>

	<!-- Desktop Navigation -->
	<nav class="hidden md:flex space-x-8">
	<a href="index.html" class="font-medium hover:text-purple-400 transition">거래소</a>
	<a href="trading.html" class="font-medium hover:text-purple-400 transition">시장</a>
	<a href="wallet.html" class="font-medium hover:text-purple-400 transition">지갑</a>
	<a href="#" class="font-medium hover:text-purple-400 transition">거래내역</a>
	<a href="#" class="font-medium hover:text-purple-400 transition">지원</a>
	</nav>

	<div class="flex items-center space-x-4">
	<button class="hidden md:block bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg font-medium transition">
	로그인
	</button>
	<button class="hidden md:block bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-4 py-2 rounded-lg font-medium transition">
	회원가입
	</button>
	<button id="mobile-menu-button" class="md:hidden text-gray-300">
	<i data-feather="menu" class="w-6 h-6"></i>
	</button>
	</div>
	</div>

	<!-- Mobile Menu -->
	<div id="mobile-menu" class="mobile-menu fixed top-0 right-0 h-full w-64 glass-effect z-50 p-6">
	<div class="flex justify-between items-center mb-8">
	<h2 class="text-xl font-bold">메뉴</h2>
	<button id="close-menu" class="text-gray-400">
	<i data-feather="x" class="w-6 h-6"></i>
	</button>
	</div>
	<nav class="flex flex-col space-y-4">
	<a href="index.html" class="font-medium py-2 border-b border-gray-700">거래소</a>
	<a href="trading.html" class="font-medium py-2 border-b border-gray-700">시장</a>
	<a href="wallet.html" class="font-medium py-2 border-b border-gray-700">지갑</a>
	<a href="#" class="font-medium py-2 border-b border-gray-700">거래내역</a>
	<a href="#" class="font-medium py-2 border-b border-gray-700">지원</a>
	<a href="login.html" class="font-medium py-2 text-purple-400">로그인</a>
	<a href="signup.html" class="font-medium py-2 text-cyan-400">회원가입</a>
	</nav>
	</div>
	</header>

	<!-- Login Section -->
	<section class="flex-grow flex items-center py-12">
	<div class="container mx-auto px-4">
	<div class="max-w-md mx-auto glass-effect rounded-2xl p-8" data-aos="fade-up">
	<div class="text-center mb-8">
	<h1 class="text-3xl font-bold mb-2">환영합니다</h1>
	<p class="text-gray-400">계정에 로그인하여 거래를 시작하세요</p>
	</div>

	<form class="space-y-6">
	<div>
	<label class="block text-gray-300 mb-2">이메일</label>
	<input
	type="email"
	class="input-field w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-purple-500"
	placeholder="your@email.com"
	>
	</div>

	<div>
	<div class="flex justify-between mb-2">
	<label class="block text-gray-300">비밀번호</label>
	<a href="#" class="text-purple-400 text-sm hover:underline">비밀번호를 잊으셨나요?</a>
	</div>
	<input
	type="password"
	class="input-field w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-purple-500"
	placeholder="••••••••"
	>
	</div>

	<div class="flex items-center">
	<input
	type="checkbox"
	id="remember"
	class="w-4 h-4 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500"
	>
	<label for="remember" class="ml-2 text-gray-300">로그인 상태 유지</label>
	</div>

	<button type="submit" class="login-btn w-full text-white py-3 rounded-lg font-bold transition transform hover:scale-[1.02]">
	로그인
	</button>
	</form>

	<div class="my-6 flex items-center">
	<div class="flex-grow border-t border-gray-700"></div>
	<span class="mx-4 text-gray-500">또는</span>
	<div class="flex-grow border-t border-gray-700"></div>
	</div>

	<div class="grid grid-cols-2 gap-4">
	<button class="social-btn flex items-center justify-center bg-white/10 py-2 rounded-lg">
	<i data-feather="github" class="w-5 h-5 mr-2"></i>
	<span>GitHub</span>
	</button>
	<button class="social-btn flex items-center justify-center bg-white/10 py-2 rounded-lg">
	<i data-feather="google" class="w-5 h-5 mr-2"></i>
	<span>Google</span>
	</button>
	</div>

	<div class="mt-8 text-center">
	<p class="text-gray-400">
	계정이 없으신가요?
	<a href="signup.html" class="text-purple-400 hover:underline">회원가입</a>
	</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="glass-effect border-t border-gray-800">
	<div class="container mx-auto px-4 py-8">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="flex items-center space-x-2 mb-4 md:mb-0">
	<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
	<i data-feather="zap" class="text-white w-4 h-4"></i>
	</div>
	<h2 class="text-xl font-bold gradient-text">Crypto<span class="text-white">Pro</span></h2>
	</div>

	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="twitter" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="facebook" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="instagram" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="github" class="w-5 h-5"></i>
	</a>
	</div>
	</div>

	<div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-500 text-sm">
	<p>© 2023 CryptoPro. All rights reserved.</p>
	</div>
	</div>
	</footer>

	<script>
	AOS.init({
	duration: 800,
	once: true
	});

	feather.replace();

	// Mobile menu toggle
	const mobileMenuButton = document.getElementById('mobile-menu-button');
	const closeMenuButton = document.getElementById('close-menu');
	const mobileMenu = document.getElementById('mobile-menu');

	mobileMenuButton.addEventListener('click', () => {
	mobileMenu.classList.add('active');
	});

	closeMenuButton.addEventListener('click', () => {
	mobileMenu.classList.remove('active');
	});

	// Close menu when clicking outside
	document.addEventListener('click', (event) => {
	if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && mobileMenu.classList.contains('active')) {
	mobileMenu.classList.remove('active');
	}
	});
	</script>
	</body>
	</html>