Hugging Face's logo

Spaces:
nkjoy
/
coin
Running

App Files Community
coin / wallet.html
nkjoy's picture
nkjoy
ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๋งŒ๋“ค์–ด์ค˜ - Follow Up Deployment
6a0dd77 verified
raw
history blame contribute delete
26.1 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);
}
.deposit-card {
background: linear-gradient(135deg, #3b82f6, #6366f1);
}
.withdraw-card {
background: linear-gradient(135deg, #8b5cf6, #ec4899);
}
</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="trading.html" class="font-medium hover:text-purple-400 transition">์‹œ์žฅ</a>
<a href="wallet.html" class="font-medium hover:text-purple-400 transition active">์ง€๊ฐ‘</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="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 active">์ง€๊ฐ‘</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>
<!-- Wallet Dashboard -->
<section class="py-8">
<div class="container mx-auto px-4">
<h1 class="text-3xl font-bold mb-8">์ง€๊ฐ‘</h1>
<!-- Wallet Summary -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="glass-effect rounded-xl p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-400 text-sm mb-1">์ด ์ž์‚ฐ</h3>
<p class="text-2xl font-bold">โ‚ฉ12,450,000</p>
</div>
<div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center">
<i data-feather="pie-chart" class="text-purple-500 w-6 h-6"></i>
</div>
</div>
</div>
<div class="glass-effect rounded-xl p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-400 text-sm mb-1">๋ณด์œ  KRW</h3>
<p class="text-2xl font-bold">โ‚ฉ8,200,000</p>
</div>
<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
<i data-feather="credit-card" class="text-green-500 w-6 h-6"></i>
</div>
</div>
</div>
<div class="glass-effect rounded-xl p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-400 text-sm mb-1">๋ณด์œ  ์•”ํ˜ธํ™”ํ</h3>
<p class="text-2xl font-bold">โ‚ฉ4,250,000</p>
</div>
<div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
<i data-feather="database" class="text-blue-500 w-6 h-6"></i>
</div>
</div>
</div>
</div>
<!-- Action Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="deposit-card rounded-xl p-6 text-white">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold mb-2">์ž…๊ธˆ</h3>
<p class="mb-4">๊ณ„์ขŒ์— ์ž๊ธˆ์„ ์ž…๊ธˆํ•˜์„ธ์š”</p>
<button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium">
์ž…๊ธˆํ•˜๊ธฐ
</button>
</div>
<i data-feather="download" class="w-10 h-10"></i>
</div>
</div>
<div class="withdraw-card rounded-xl p-6 text-white">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold mb-2">์ถœ๊ธˆ</h3>
<p class="mb-4">์ž๊ธˆ์„ ์ถœ๊ธˆํ•˜์„ธ์š”</p>
<button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium">
์ถœ๊ธˆํ•˜๊ธฐ
</button>
</div>
<i data-feather="upload" class="w-10 h-10"></i>
</div>
</div>
</div>
<!-- Assets and Transactions -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Asset List -->
<div class="glass-effect rounded-xl p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold">๋ณด์œ  ์ž์‚ฐ</h2>
<button class="text-purple-400">
<i data-feather="refresh-ccw" class="w-5 h-5"></i>
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="text-left text-gray-400 border-b border-gray-700">
<th class="pb-3">์ž์‚ฐ</th>
<th class="pb-3">๋ณด์œ ๋Ÿ‰</th>
<th class="pb-3">๊ฐ€์น˜ (KRW)</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700">
<td class="py-4">
<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 text-sm">B</span>
</div>
<div>
<div class="font-medium">๋น„ํŠธ์ฝ”์ธ</div>
<div class="text-gray-400 text-sm">BTC</div>
</div>
</div>
</td>
<td class="py-4">0.12500000</td>
<td class="py-4">โ‚ฉ7,097,500</td>
</tr>
<tr class="border-b border-gray-700">
<td class="py-4">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
<span class="text-purple-500 font-bold text-sm">E</span>
</div>
<div>
<div class="font-medium">์ด๋”๋ฆฌ์›€</div>
<div class="text-gray-400 text-sm">ETH</div>
</div>
</div>
</td>
<td class="py-4">2.50000000</td>
<td class="py-4">โ‚ฉ3,900,000</td>
</tr>
<tr class="border-b border-gray-700">
<td class="py-4">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-3">
<span class="text-blue-500 font-bold text-sm">X</span>
</div>
<div>
<div class="font-medium">๋ฆฌํ”Œ</div>
<div class="text-gray-400 text-sm">XRP</div>
</div>
</div>
</td>
<td class="py-4">5,000.000000</td>
<td class="py-4">โ‚ฉ350,000</td>
</tr>
<tr>
<td class="py-4">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-3">
<span class="text-green-500 font-bold text-sm">S</span>
</div>
<div>
<div class="font-medium">์†”๋ผ๋‚˜</div>
<div class="text-gray-400 text-sm">SOL</div>
</div>
</div>
</td>
<td class="py-4">15.00000000</td>
<td class="py-4">โ‚ฉ1,002,500</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Transaction History -->
<div class="glass-effect rounded-xl p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold">๊ฑฐ๋ž˜ ๋‚ด์—ญ</h2>
<button class="text-purple-400">
<i data-feather="filter" class="w-5 h-5"></i>
</button>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center p-4 glass-effect rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-3">
<i data-feather="download" class="text-green-500 w-5 h-5"></i>
</div>
<div>
<div class="font-medium">์ž…๊ธˆ</div>
<div class="text-gray-400 text-sm">2023-06-15 14:30</div>
</div>
</div>
<div class="text-right">
<div class="font-medium">โ‚ฉ5,000,000</div>
<div class="text-green-500 text-sm">์™„๋ฃŒ</div>
</div>
</div>
<div class="flex justify-between items-center p-4 glass-effect rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
<i data-feather="trending-up" class="text-purple-500 w-5 h-5"></i>
</div>
<div>
<div class="font-medium">๋งค์ˆ˜</div>
<div class="text-gray-400 text-sm">2023-06-14 09:15</div>
</div>
</div>
<div class="text-right">
<div class="font-medium">0.05 BTC</div>
<div class="text-purple-500 text-sm">โ‚ฉ2,839,000</div>
</div>
</div>
<div class="flex justify-between items-center p-4 glass-effect rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center mr-3">
<i data-feather="upload" class="text-red-500 w-5 h-5"></i>
</div>
<div>
<div class="font-medium">์ถœ๊ธˆ</div>
<div class="text-gray-400 text-sm">2023-06-12 16:45</div>
</div>
</div>
<div class="text-right">
<div class="font-medium">โ‚ฉ1,500,000</div>
<div class="text-red-500 text-sm">์™„๋ฃŒ</div>
</div>
</div>
<div class="flex justify-between items-center p-4 glass-effect rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-3">
<i data-feather="trending-down" class="text-blue-500 w-5 h-5"></i>
</div>
<div>
<div class="font-medium">๋งค๋„</div>
<div class="text-gray-400 text-sm">2023-06-10 11:20</div>
</div>
</div>
<div class="text-right">
<div class="font-medium">1.2 ETH</div>
<div class="text-blue-500 text-sm">โ‚ฉ1,872,000</div>
</div>
</div>
<div class="flex justify-between items-center p-4 glass-effect rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center mr-3">
<i data-feather="download" class="text-yellow-500 w-5 h-5"></i>
</div>
<div>
<div class="font-medium">์ž…๊ธˆ</div>
<div class="text-gray-400 text-sm">2023-06-08 13:10</div>
</div>
</div>
<div class="text-right">
<div class="font-medium">โ‚ฉ3,000,000</div>
<div class="text-green-500 text-sm">์™„๋ฃŒ</div>
</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>