Spaces:

nkjoy
/

aimuisc

Running

App Files Files Community

aimuisc / login.html

nkjoy

탐색 페이지도 만들어줘! - Follow Up Deployment

5bad1ac verified 12 months ago

Raw

History Blame Contribute Delete

8.82 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>로그인 - AI Music Hub</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<script>
	tailwind.config = {
	darkMode: 'class',
	theme: {
	extend: {
	colors: {
	navy: '#0f172a',
	charcoal: '#1e293b',
	accent: {
	from: '#a855f7',
	to: '#ec4899'
	}
	},
	backgroundImage: {
	'glass': 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
	'neon-glow': 'linear-gradient(45deg, #a855f7, #ec4899, #a855f7)',
	},
	boxShadow: {
	'neon': '0 0 5px #a855f7, 0 0 10px #ec4899, 0 0 15px #a855f7',
	'neon-hover': '0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #a855f7'
	}
	}
	}
	}
	</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;600;700&display=swap');

	body {
	font-family: 'Noto Sans KR', sans-serif;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #f8fafc;
	min-height: 100vh;
	}

	.glass-button {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	transition: all 0.3s ease;
	}

	.glass-button:hover {
	box-shadow: 0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #a855f7;
	transform: translateY(-2px);
	}

	.neon-border {
	border: 1px solid transparent;
	background: linear-gradient(#0f172a, #0f172a) padding-box,
	linear-gradient(45deg, #a855f7, #ec4899) border-box;
	}

	.form-input {
	background: rgba(30, 41, 59, 0.5);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	}

	.form-input:focus {
	box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
	border-color: transparent;
	}

	.social-login {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	}

	.social-login:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(168, 85, 247, 0.2);
	}

	.pulse {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
	100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
	}
	</style>
	</head>
	<body class="min-h-screen flex items-center justify-center px-4 py-12">
	<!-- Navigation -->
	<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
	<div class="container mx-auto px-4 py-3 flex items-center justify-between">
	<a href="index.html" class="flex items-center space-x-2">
	<div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
	<i data-feather="music" class="text-white"></i>
	</div>
	<span class="text-xl font-bold bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">AI Music Hub</span>
	</a>

	<a href="index.html" class="text-gray-300 hover:text-white transition">홈으로</a>
	<a href="mypage.html" class="text-gray-300 hover:text-white transition ml-4">마이페이지</a>
	<a href="collection.html" class="text-gray-300 hover:text-white transition ml-4">컬렉션</a>
	</div>
	</nav>

	<!-- Login Form -->
	<div class="w-full max-w-md mt-16" data-aos="fade-up">
	<div class="text-center mb-8">
	<h1 class="text-3xl font-bold mb-2">로그인</h1>
	<p class="text-gray-400">AI Music Hub에 오신 것을 환영합니다</p>
	</div>

	<div class="bg-charcoal/50 backdrop-blur-md rounded-2xl p-6 md:p-8">
	<form>
	<div class="mb-6">
	<label class="block text-sm font-medium mb-2">이메일 주소</label>
	<input type="email" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="이메일을 입력하세요" required>
	</div>

	<div class="mb-6">
	<label class="block text-sm font-medium mb-2">비밀번호</label>
	<input type="password" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="비밀번호를 입력하세요" required>
	<div class="flex justify-end mt-2">
	<a href="#" class="text-sm text-accent-from hover:text-accent-to transition">비밀번호 찾기</a>
	</div>
	</div>

	<div class="flex items-center mb-6">
	<input type="checkbox" id="remember" class="mr-2">
	<label for="remember" class="text-sm">로그인 상태 유지</label>
	</div>

	<button type="submit" class="w-full glass-button py-4 text-white font-semibold rounded-lg flex items-center justify-center space-x-2 pulse">
	<i data-feather="log-in" class="w-5 h-5"></i>
	<span>로그인</span>
	</button>
	</form>

	<div class="relative my-6">
	<div class="absolute inset-0 flex items-center">
	<div class="w-full border-t border-gray-700"></div>
	</div>
	<div class="relative flex justify-center text-sm">
	<span class="px-2 bg-charcoal/50 text-gray-400">또는</span>
	</div>
	</div>

	<!-- Social Login -->
	<div class="space-y-3">
	<button class="w-full social-login py-3 rounded-lg flex items-center justify-center space-x-2">
	<i data-feather="mail" class="w-5 h-5 text-red-400"></i>
	<span>Google로 계속하기</span>
	</button>

	<button class="w-full social-login py-3 rounded-lg flex items-center justify-center space-x-2">
	<i data-feather="github" class="w-5 h-5"></i>
	<span>GitHub로 계속하기</span>
	</button>

	<button class="w-full social-login py-3 rounded-lg flex items-center justify-center space-x-2">
	<i data-feather="facebook" class="w-5 h-5 text-blue-400"></i>
	<span>Facebook으로 계속하기</span>
	</button>
	</div>

	<div class="text-center mt-6">
	<p class="text-gray-400">
	계정이 없으신가요?
	<a href="register.html" class="text-accent-from hover:text-accent-to transition font-medium">회원가입</a>
	</p>
	</div>
	</div>
	</div>

	<script>
	AOS.init({
	duration: 800,
	easing: 'ease-in-out',
	once: true
	});

	feather.replace();

	// Form validation
	const form = document.querySelector('form');
	form.addEventListener('submit', (e) => {
	e.preventDefault();
	// Add your login logic here
	console.log('Login attempt');
	});
	</script>
	</body>
	</html>