Hugging Face's logo

Spaces:
EyeFox
/
cryptovault-wallet
Running

App Files Community
cryptovault-wallet
File size: 9,098 Bytes
d31c442
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CryptoVault Wallet</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            500: '#6366f1',
                            600: '#4f46e5',
                        },
                        secondary: {
                            500: '#8b5cf6',
                            600: '#7c3aed',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <!-- Balance Card -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 mb-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">Your Balance</h2>
                <div class="flex space-x-2">
                    <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
                        <i data-feather="eye"></i>
                    </button>
                    <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
                        <i data-feather="more-vertical"></i>
                    </button>
                </div>
            </div>
            
            <div class="mb-6">
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Balance</p>
                <p class="text-4xl font-bold">$12,345.67</p>
                <p class="text-primary-500 dark:text-primary-400 mt-2">+ 5.24%</p>
            </div>
            
            <div class="flex justify-between">
                <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-xl flex items-center">
                    <i data-feather="arrow-down" class="mr-2"></i> Receive
                </button>
                <button class="bg-secondary-500 hover:bg-secondary-600 text-white px-6 py-3 rounded-xl flex items-center">
                    <i data-feather="arrow-up" class="mr-2"></i> Send
                </button>
                <button class="bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-6 py-3 rounded-xl flex items-center">
                    <i data-feather="swap" class="mr-2"></i> Swap
                </button>
            </div>
        </div>
        
        <!-- Assets Section -->
        <div class="mb-8">
            <h2 class="text-xl font-bold mb-4">Your Assets</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- Crypto Card 1 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 flex items-center">
                    <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4">
                        <i data-feather="dollar-sign" class="text-blue-500 dark:text-blue-400"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold">Bitcoin</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">BTC</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">0.42 BTC</p>
                        <p class="text-sm text-green-500">$18,245.32</p>
                    </div>
                </div>
                
                <!-- Crypto Card 2 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 flex items-center">
                    <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-4">
                        <i data-feather="zap" class="text-purple-500 dark:text-purple-400"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold">Ethereum</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">ETH</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">3.2 ETH</p>
                        <p class="text-sm text-green-500">$8,723.91</p>
                    </div>
                </div>
                
                <!-- Crypto Card 3 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 flex items-center">
                    <div class="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-4">
                        <i data-feather="activity" class="text-red-500 dark:text-red-400"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold">Solana</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">SOL</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">24.5 SOL</p>
                        <p class="text-sm text-red-500">$1,423.67</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Transaction History -->
        <div>
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">Recent Transactions</h2>
                <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">View All</button>
            </div>
            
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden">
                <!-- Transaction 1 -->
                <div class="p-4 border-b border-gray-100 dark:border-gray-700 flex items-center">
                    <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-4">
                        <i data-feather="arrow-down" class="text-green-500 dark:text-green-400"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-medium">Received Bitcoin</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Today, 10:45 AM</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">+ 0.05 BTC</p>
                        <p class="text-sm text-green-500">$1,234.56</p>
                    </div>
                </div>
                
                <!-- Transaction 2 -->
                <div class="p-4 border-b border-gray-100 dark:border-gray-700 flex items-center">
                    <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-4">
                        <i data-feather="arrow-up" class="text-red-500 dark:text-red-400"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-medium">Sent Ethereum</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday, 3:22 PM</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">- 0.5 ETH</p>
                        <p class="text-sm text-red-500">$1,345.67</p>
                    </div>
                </div>
                
                <!-- Transaction 3 -->
                <div class="p-4 flex items-center">
                    <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4">
                        <i data-feather="refresh-cw" class="text-blue-500 dark:text-blue-400"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-medium">Swapped Tokens</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Dec 12, 2:15 PM</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">0.1 ETH → 1.5 SOL</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">$287.54</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <custom-bottom-nav></custom-bottom-nav>
    
    <script src="components/navbar.js"></script>
    <script src="components/bottom-nav.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>