Hugging Face's logo

Spaces:
LTTEAM
/
toolbox-haven
Running

App Files Community
LTTEAM commited on
Commit
c5b5d68
·
verified ·
1 Parent(s): b81acae

thêm phần bán tài khoản nữa, các công cụ hiện có, listens

Browse files
Files changed (1) hide show
  1. account.html +242 -0
account.html ADDED
@@ -0,0 +1,242 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Account - Toolbox Haven</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
13
+ </head>
14
+ <body class="bg-gray-900 text-white">
15
+ <div id="vanta-bg" class="vanta-bg"></div>
16
+
17
+ <div class="container mx-auto px-4 py-8">
18
+ <!-- Header -->
19
+ <header class="flex justify-between items-center mb-12">
20
+ <div class="flex items-center space-x-3">
21
+ <a href="index.html">
22
+ <i data-feather="tool" class="w-8 h-8 text-blue-400"></i>
23
+ </a>
24
+ <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Toolbox Haven</h1>
25
+ </div>
26
+ <nav class="hidden md:flex space-x-6">
27
+ <a href="index.html" class="hover:text-blue-400 transition">Dashboard</a>
28
+ <a href="tool-python.html" class="hover:text-blue-400 transition">Tools</a>
29
+ <a href="account.html" class="text-blue-400 transition">Account</a>
30
+ <a href="#" class="hover:text-blue-400 transition">Docs</a>
31
+ </nav>
32
+ <button class="md:hidden">
33
+ <i data-feather="menu" class="w-6 h-6"></i>
34
+ </button>
35
+ </header>
36
+
37
+ <!-- Main Content -->
38
+ <main>
39
+ <!-- Account Header -->
40
+ <div class="glass-card rounded-xl p-6 mb-8">
41
+ <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
42
+ <div class="flex items-center space-x-4 mb-4 md:mb-0">
43
+ <div class="w-20 h-20 bg-gray-700 rounded-full flex items-center justify-center">
44
+ <i data-feather="user" class="w-10 h-10 text-gray-400"></i>
45
+ </div>
46
+ <div>
47
+ <h2 class="text-2xl font-bold">John Doe</h2>
48
+ <p class="text-gray-300">Premium Member</p>
49
+ </div>
50
+ </div>
51
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
52
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
53
+ <p class="text-gray-400 text-sm">Tools</p>
54
+ <p class="text-xl font-bold">12</p>
55
+ </div>
56
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
57
+ <p class="text-gray-400 text-sm">Listings</p>
58
+ <p class="text-xl font-bold">5</p>
59
+ </div>
60
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
61
+ <p class="text-gray-400 text-sm">Rating</p>
62
+ <p class="text-xl font-bold">4.8</p>
63
+ </div>
64
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
65
+ <p class="text-gray-400 text-sm">Member Since</p>
66
+ <p class="text-xl font-bold">2022</p>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Tools and Listings -->
73
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
74
+ <!-- Your Tools Section -->
75
+ <div class="glass-card rounded-xl p-6">
76
+ <div class="flex justify-between items-center mb-6">
77
+ <h3 class="text-xl font-bold">Your Tools</h3>
78
+ <button class="text-blue-400 text-sm font-medium flex items-center">
79
+ View All <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
80
+ </button>
81
+ </div>
82
+ <div class="space-y-4">
83
+ <!-- Tool 1 -->
84
+ <div class="flex items-center p-3 bg-gray-800 rounded-lg">
85
+ <div class="bg-blue-500 bg-opacity-20 p-2 rounded-lg mr-3">
86
+ <i data-feather="code" class="w-5 h-5 text-blue-400"></i>
87
+ </div>
88
+ <div class="flex-grow">
89
+ <h4 class="font-medium">Code Analyzer</h4>
90
+ <p class="text-gray-400 text-sm">Last used 2 days ago</p>
91
+ </div>
92
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
93
+ </div>
94
+ <!-- Tool 2 -->
95
+ <div class="flex items-center p-3 bg-gray-800 rounded-lg">
96
+ <div class="bg-green-500 bg-opacity-20 p-2 rounded-lg mr-3">
97
+ <i data-feather="database" class="w-5 h-5 text-green-400"></i>
98
+ </div>
99
+ <div class="flex-grow">
100
+ <h4 class="font-medium">Query Builder</h4>
101
+ <p class="text-gray-400 text-sm">Last used 1 day ago</p>
102
+ </div>
103
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
104
+ </div>
105
+ <!-- Tool 3 -->
106
+ <div class="flex items-center p-3 bg-gray-800 rounded-lg">
107
+ <div class="bg-purple-500 bg-opacity-20 p-2 rounded-lg mr-3">
108
+ <i data-feather="bar-chart-2" class="w-5 h-5 text-purple-400"></i>
109
+ </div>
110
+ <div class="flex-grow">
111
+ <h4 class="font-medium">Data Visualizer</h4>
112
+ <p class="text-gray-400 text-sm">Last used 1 week ago</p>
113
+ </div>
114
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Your Listings Section -->
120
+ <div class="glass-card rounded-xl p-6">
121
+ <div class="flex justify-between items-center mb-6">
122
+ <h3 class="text-xl font-bold">Your Listings</h3>
123
+ <button class="text-blue-400 text-sm font-medium flex items-center">
124
+ View All <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
125
+ </button>
126
+ </div>
127
+ <div class="space-y-4">
128
+ <!-- Listing 1 -->
129
+ <div class="flex items-center p-3 bg-gray-800 rounded-lg">
130
+ <div class="bg-yellow-500 bg-opacity-20 p-2 rounded-lg mr-3">
131
+ <i data-feather="dollar-sign" class="w-5 h-5 text-yellow-400"></i>
132
+ </div>
133
+ <div class="flex-grow">
134
+ <h4 class="font-medium">Premium Tool Access</h4>
135
+ <p class="text-gray-400 text-sm">2 active purchases</p>
136
+ </div>
137
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
138
+ </div>
139
+ <!-- Listing 2 -->
140
+ <div class="flex items-center p-3 bg-gray-800 rounded-lg">
141
+ <div class="bg-red-500 bg-opacity-20 p-2 rounded-lg mr-3">
142
+ <i data-feather="key" class="w-5 h-5 text-red-400"></i>
143
+ </div>
144
+ <div class="flex-grow">
145
+ <h4 class="font-medium">Account API Keys</h4>
146
+ <p class="text-gray-400 text-sm">Limited edition</p>
147
+ </div>
148
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
149
+ </div>
150
+ <!-- Listing 3 -->
151
+ <div class="flex items-center p-3 bg-gray-800 rounded-lg">
152
+ <div class="bg-green-500 bg-opacity-20 p-2 rounded-lg mr-3">
153
+ <i data-feather="cpu" class="w-5 h-5 text-green-400"></i>
154
+ </div>
155
+ <div class="flex-grow">
156
+ <h4 class="font-medium">AI Model Package</h4>
157
+ <p class="text-gray-400 text-sm">5 remaining</p>
158
+ </div>
159
+ <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Recent Activity -->
166
+ <div class="glass-card rounded-xl p-6 mb-8">
167
+ <h3 class="text-xl font-bold mb-6">Recent Activity</h3>
168
+ <div class="space-y-4">
169
+ <!-- Activity 1 -->
170
+ <div class="flex items-start">
171
+ <div class="bg-blue-500 bg-opacity-20 p-2 rounded-full mr-3">
172
+ <i data-feather="shopping-bag" class="w-5 h-5 text-blue-400"></i>
173
+ </div>
174
+ <div class="flex-grow">
175
+ <p class="font-medium">New purchase: Premium Tool Access</p>
176
+ <p class="text-gray-400 text-sm">2 hours ago - $29.99</p>
177
+ </div>
178
+ <span class="text-green-400 text-sm">Completed</span>
179
+ </div>
180
+ <!-- Activity 2 -->
181
+ <div class="flex items-start">
182
+ <div class="bg-purple-500 bg-opacity-20 p-2 rounded-full mr-3">
183
+ <i data-feather="tool" class="w-5 h-5 text-purple-400"></i>
184
+ </div>
185
+ <div class="flex-grow">
186
+ <p class="font-medium">Used: Data Visualizer</p>
187
+ <p class="text-gray-400 text-sm">Yesterday - 45 mins runtime</p>
188
+ </div>
189
+ <span class="text-gray-400 text-sm">Processed</span>
190
+ </div>
191
+ <!-- Activity 3 -->
192
+ <div class="flex items-start">
193
+ <div class="bg-yellow-500 bg-opacity-20 p-2 rounded-full mr-3">
194
+ <i data-feather="alert-circle" class="w-5 h-5 text-yellow-400"></i>
195
+ </div>
196
+ <div class="flex-grow">
197
+ <p class="font-medium">Payment issue detected</p>
198
+ <p class="text-gray-400 text-sm">3 days ago - Subscription renewal</p>
199
+ </div>
200
+ <span class="text-red-400 text-sm">Pending</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </main>
205
+
206
+ <!-- Footer -->
207
+ <footer class="mt-16 py-6 border-t border-gray-800">
208
+ <div class="flex flex-col md:flex-row justify-between items-center">
209
+ <p class="text-gray-400 text-sm">© 2023 Toolbox Haven. All rights reserved.</p>
210
+ <div class="flex space-x-6 mt-4 md:mt-0">
211
+ <a href="#" class="text-gray-400 hover:text-white transition">
212
+ <i data-feather="github" class="w-5 h-5"></i>
213
+ </a>
214
+ <a href="#" class="text-gray-400 hover:text-white transition">
215
+ <i data-feather="twitter" class="w-5 h-5"></i>
216
+ </a>
217
+ </div>
218
+ </div>
219
+ </footer>
220
+ </div>
221
+
222
+ <script>
223
+ // Initialize Vanta.js globe background
224
+ VANTA.GLOBE({
225
+ el: "#vanta-bg",
226
+ mouseControls: true,
227
+ touchControls: true,
228
+ gyroControls: false,
229
+ minHeight: 200.00,
230
+ minWidth: 200.00,
231
+ scale: 1.00,
232
+ scaleMobile: 1.00,
233
+ color: 0x3a86ff,
234
+ backgroundColor: 0x111827,
235
+ size: 0.8
236
+ });
237
+
238
+ // Initialize feather icons
239
+ feather.replace();
240
+ </script>
241
+ </body>
242
+ </html>