Spaces:

nkjoy
/

music

Running

App Files Files Community

music / register.html

nkjoy

프로필수정 페이지 만들어줘 - Follow Up Deployment

6bf0ad1 verified 8 months ago

raw

history blame contribute delete

6.87 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HarmonyFlow - 회원가입</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, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.glass-panel {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
	}

	.input-field {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: all 0.3s ease;
	}

	.input-field:focus {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
	outline: none;
	}

	.register-btn {
	transition: all 0.3s ease;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.register-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
	}

	.social-btn {
	transition: all 0.3s ease;
	}

	.social-btn:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.25);
	}
	</style>
	</head>
	<body class="text-white">
	<div class="container mx-auto px-4">
	<div class="max-w-md mx-auto">
	<div class="glass-panel rounded-3xl p-8" data-aos="fade-up">
	<div class="text-center mb-8">
	<div class="flex items-center justify-center space-x-2 mb-4">
	<i data-feather="music" class="w-10 h-10"></i>
	<h1 class="text-3xl font-bold">HarmonyFlow</h1>
	</div>
	<p class="text-gray-200">새로운 계정을 만들어 음악의 세계를 경험하세요</p>
	</div>

	<form class="space-y-6">
	<div>
	<label class="block text-sm font-medium mb-2">이름</label>
	<input type="text" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="홍길동">
	</div>

	<div>
	<label class="block text-sm font-medium mb-2">이메일</label>
	<input type="email" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="your@email.com">
	</div>

	<div>
	<label class="block text-sm font-medium mb-2">비밀번호</label>
	<input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
	</div>

	<div>
	<label class="block text-sm font-medium mb-2">비밀번호 확인</label>
	<input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
	</div>

	<div class="flex items-start">
	<input type="checkbox" id="terms" class="mt-1 mr-2">
	<label for="terms" class="text-sm">
	<a href="#" class="text-purple-200 hover:text-white">이용약관</a>과
	<a href="#" class="text-purple-200 hover:text-white">개인정보 처리방침</a>에 동의합니다
	</label>
	</div>

	<button type="submit" class="register-btn w-full py-3 rounded-lg font-medium text-white">
	회원가입
	</button>
	</form>

	<div class="my-6 flex items-center">
	<div class="flex-1 border-t border-gray-400"></div>
	<span class="px-4 text-gray-400 text-sm">또는</span>
	<div class="flex-1 border-t border-gray-400"></div>
	</div>

	<div class="space-y-4">
	<button class="social-btn glass-panel w-full py-3 rounded-lg flex items-center justify-center space-x-2">
	<svg class="w-5 h-5" viewBox="0 0 24 24">
	<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
	<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
	<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
	<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
	</svg>
	<span>Google로 회원가입</span>
	</button>
	</div>

	<div class="mt-8 text-center">
	<p class="text-gray-300">
	이미 계정이 있으신가요?
	<a href="login.html" class="text-white font-medium hover:underline">로그인</a>
	</p>
	</div>
	</div>
	</div>
	</div>

	<script>
	AOS.init();
	feather.replace();
	</script>
	</body>
	</html>