Spaces:

nkjoy
/

coin

Running

App Files Files Community

coin / trading.html

nkjoy

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

6a0dd77 verified 7 months ago

raw

history blame contribute delete

25.8 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;
	}
	.crypto-card {
	transition: all 0.3s ease;
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(30, 41, 59, 0.5);
	backdrop-filter: blur(10px);
	}
	.crypto-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
	border-color: rgba(99, 102, 241, 0.5);
	}
	.price-up {
	color: #10b981;
	}
	.price-down {
	color: #ef4444;
	}
	.gradient-text {
	background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	.market-table tr:nth-child(even) {
	background: rgba(30, 41, 59, 0.3);
	}
	.market-table tr:hover {
	background: rgba(56, 70, 97, 0.5);
	}
	.glass-effect {
	background: rgba(30, 41, 59, 0.5);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.1);
	}
	.order-book-row {
	transition: all 0.2s ease;
	}
	.order-book-row:hover {
	background: rgba(99, 102, 241, 0.2);
	}
	.trade-history-item {
	border-left: 3px solid #8b5cf6;
	}
	.mobile-menu {
	transform: translateX(100%);
	transition: transform 0.3s ease;
	}
	.mobile-menu.active {
	transform: translateX(0);
	}
	.active-tab {
	border-bottom: 2px solid #8b5cf6;
	color: #8b5cf6;
	}
	.buy-btn {
	background: linear-gradient(90deg, #10b981, #34d399);
	}
	.sell-btn {
	background: linear-gradient(90deg, #ef4444, #f87171);
	}
	</style>
	</head>
	<body class="min-h-screen">
	<!-- 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="#" 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">
	<a href="login.html">로그인</a>
	</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">
	<a href="signup.html">회원가입</a>
	</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="#" 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>

	<!-- Trading Dashboard -->
	<section class="py-8">
	<div class="container mx-auto px-4">
	<div class="flex flex-col lg:flex-row gap-6">
	<!-- Left Column - Market Data -->
	<div class="lg:w-2/3">
	<!-- Trading Pair Selector -->
	<div class="glass-effect rounded-xl p-4 mb-6">
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center mr-3">
	<span class="text-yellow-500 font-bold">B</span>
	</div>
	<div>
	<h2 class="text-xl font-bold">BTC/KRW</h2>
	<p class="text-gray-400">비트코인 / 대한민국 원</p>
	</div>
	</div>
	<div class="text-right">
	<p class="text-2xl font-bold">₩56,780,000</p>
	<p class="price-up">+2.35% (24h)</p>
	</div>
	</div>
	</div>

	<!-- Chart and Order Book -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
	<!-- Chart Placeholder -->
	<div class="lg:col-span-2 glass-effect rounded-xl p-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-bold">차트</h3>
	<div class="flex space-x-2">
	<button class="text-xs px-2 py-1 rounded bg-slate-700">1H</button>
	<button class="text-xs px-2 py-1 rounded bg-purple-600">1D</button>
	<button class="text-xs px-2 py-1 rounded bg-slate-700">1W</button>
	<button class="text-xs px-2 py-1 rounded bg-slate-700">1M</button>
	</div>
	</div>
	<div class="h-80 flex items-center justify-center bg-slate-800/50 rounded-lg">
	<p class="text-gray-500">차트 영역</p>
	</div>
	</div>

	<!-- Order Book -->
	<div class="glass-effect rounded-xl p-4">
	<h3 class="font-bold mb-4">주문서</h3>

	<div class="mb-4">
	<h4 class="text-gray-400 text-sm mb-2">매도</h4>
	<div class="space-y-1">
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="text-gray-400">56,785,000</span>
	<span class="text-gray-400">0.425</span>
	<span class="text-gray-400">24,131,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="text-gray-400">56,783,000</span>
	<span class="text-gray-400">1.200</span>
	<span class="text-gray-400">68,140,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="text-gray-400">56,782,000</span>
	<span class="text-gray-400">0.750</span>
	<span class="text-gray-400">42,587,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="price-down">56,781,000</span>
	<span class="text-gray-400">2.100</span>
	<span class="text-gray-400">119,240,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="price-down">56,780,000</span>
	<span class="text-gray-400">0.950</span>
	<span class="text-gray-400">53,941,000</span>
	</div>
	</div>
	</div>

	<div class="text-center my-2 py-2 border-t border-b border-gray-700">
	<div class="text-lg font-bold">56,780,000</div>
	</div>

	<div>
	<h4 class="text-gray-400 text-sm mb-2">매수</h4>
	<div class="space-y-1">
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="price-up">56,779,000</span>
	<span class="text-gray-400">1.500</span>
	<span class="text-gray-400">85,169,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="price-up">56,778,000</span>
	<span class="text-gray-400">0.800</span>
	<span class="text-gray-400">45,422,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="text-gray-400">56,777,000</span>
	<span class="text-gray-400">1.250</span>
	<span class="text-gray-400">70,971,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="text-gray-400">56,776,000</span>
	<span class="text-gray-400">0.600</span>
	<span class="text-gray-400">34,066,000</span>
	</div>
	<div class="order-book-row flex justify-between p-1 rounded text-sm">
	<span class="text-gray-400">56,775,000</span>
	<span class="text-gray-400">2.000</span>
	<span class="text-gray-400">113,550,000</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Market Trades -->
	<div class="glass-effect rounded-xl p-4">
	<h3 class="font-bold mb-4">최근 거래</h3>
	<div class="overflow-x-auto">
	<table class="w-full text-sm">
	<thead>
	<tr class="text-left text-gray-400 border-b border-gray-700">
	<th class="pb-2">가격 (KRW)</th>
	<th class="pb-2">수량 (BTC)</th>
	<th class="pb-2">시간</th>
	</tr>
	</thead>
	<tbody>
	<tr class="border-b border-gray-700">
	<td class="py-2 price-up">56,780,000</td>
	<td class="py-2">0.125</td>
	<td class="py-2">14:32:15</td>
	</tr>
	<tr class="border-b border-gray-700">
	<td class="py-2 price-down">56,779,000</td>
	<td class="py-2">0.420</td>
	<td class="py-2">14:32:10</td>
	</tr>
	<tr class="border-b border-gray-700">
	<td class="py-2 price-up">56,780,000</td>
	<td class="py-2">0.080</td>
	<td class="py-2">14:32:05</td>
	</tr>
	<tr class="border-b border-gray-700">
	<td class="py-2 price-down">56,778,000</td>
	<td class="py-2">0.250</td>
	<td class="py-2">14:32:00</td>
	</tr>
	<tr>
	<td class="py-2 price-up">56,781,000</td>
	<td class="py-2">0.175</td>
	<td class="py-2">14:31:55</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- Right Column - Trading Panel -->
	<div class="lg:w-1/3">
	<!-- Trading Tabs -->
	<div class="glass-effect rounded-xl p-4 mb-6">
	<div class="flex border-b border-gray-700 mb-4">
	<button class="active-tab py-2 px-4 font-medium">매수</button>
	<button class="py-2 px-4 font-medium">매도</button>
	<button class="py-2 px-4 font-medium">거래내역</button>
	</div>

	<!-- Buy Form -->
	<div>
	<div class="mb-4">
	<label class="block text-gray-400 text-sm mb-1">가격 (KRW)</label>
	<div class="relative">
	<input type="text" value="56,780,000" class="w-full bg-slate-800 border border-gray-700 rounded-lg px-4 py-2">
	<span class="absolute right-3 top-2 text-gray-400">KRW</span>
	</div>
	</div>

	<div class="mb-4">
	<label class="block text-gray-400 text-sm mb-1">수량 (BTC)</label>
	<div class="relative">
	<input type="text" placeholder="0.00" class="w-full bg-slate-800 border border-gray-700 rounded-lg px-4 py-2">
	<span class="absolute right-3 top-2 text-gray-400">BTC</span>
	</div>
	</div>

	<div class="mb-4">
	<label class="block text-gray-400 text-sm mb-1">총액 (KRW)</label>
	<div class="relative">
	<input type="text" placeholder="0.00" class="w-full bg-slate-800 border border-gray-700 rounded-lg px-4 py-2">
	<span class="absolute right-3 top-2 text-gray-400">KRW</span>
	</div>
	</div>

	<div class="mb-6">
	<div class="flex justify-between text-sm text-gray-400 mb-2">
	<span>사용 가능</span>
	<span>₩0</span>
	</div>
	<div class="w-full bg-slate-800 rounded-full h-2">
	<div class="bg-purple-600 h-2 rounded-full" style="width: 0%"></div>
	</div>
	<div class="flex justify-between mt-1 text-xs">
	<span>0%</span>
	<span>25%</span>
	<span>50%</span>
	<span>75%</span>
	<span>100%</span>
	</div>
	</div>

	<button class="buy-btn w-full text-white py-3 rounded-lg font-bold">
	매수 (BTC)
	</button>
	</div>
	</div>

	<!-- Wallet Info -->
	<div class="glass-effect rounded-xl p-4">
	<h3 class="font-bold mb-4">자산 정보</h3>
	<div class="space-y-3">
	<div class="flex justify-between">
	<span class="text-gray-400">KRW</span>
	<span>₩0</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-400">BTC</span>
	<span>0.00000000</span>
	</div>
	<div class="flex justify-between pt-2 border-t border-gray-700">
	<span class="text-gray-400">총 자산</span>
	<span>₩0</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="glass-effect border-t border-gray-800 mt-16">
	<div class="container mx-auto px-4 py-12">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<div class="flex items-center space-x-2 mb-6">
	<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>
	<h2 class="text-2xl font-bold gradient-text">Crypto<span class="text-white">Pro</span></h2>
	</div>
	<p class="text-gray-400 mb-6">
	세계에서 가장 신뢰할 수 있는 암호화폐 거래소로 당신의 자산을 안전하게 거래하세요.
	</p>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="twitter" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="facebook" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="instagram" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i data-feather="github" class="w-5 h-5"></i>
	</a>
	</div>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">제품</h3>
	<ul class="space-y-3">
	<li><a href="#" class="text-gray-400 hover:text-white transition">스팟 거래</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">선물 거래</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">마진 거래</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">스aking</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">NFT 마켓</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">지원</h3>
	<ul class="space-y-3">
	<li><a href="#" class="text-gray-400 hover:text-white transition">고객센터</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">거래 수수료</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">API 문서</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">보안 센터</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">커뮤니티</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">회사</h3>
	<ul class="space-y-3">
	<li><a href="#" class="text-gray-400 hover:text-white transition">회사 소개</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">채용 정보</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">블로그</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">이용 약관</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">개인정보 처리방침</a></li>
	</ul>
	</div>
	</div>

	<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
	<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>