Hugging Face's logo

Spaces:
llmz
/
whatever
Running

App Files Community
llmz commited on
Commit
dd2fa53
·
verified ·
1 Parent(s): d65afb9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +275 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Whatever
3
- emoji: 📊
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: whatever
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,275 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Interactive Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that need more precise styling */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
13
+ }
14
+ .card-hover {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .card-hover:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
20
+ }
21
+ .chart-container {
22
+ position: relative;
23
+ height: 300px;
24
+ }
25
+ .sidebar {
26
+ transition: all 0.3s ease;
27
+ overflow: hidden;
28
+ }
29
+ .sidebar-collapsed {
30
+ width: 5rem !important;
31
+ }
32
+ .sidebar-expanded {
33
+ width: 16rem !important;
34
+ }
35
+ .sidebar-item-text {
36
+ transition: opacity 0.3s ease;
37
+ }
38
+ .sidebar-collapsed .sidebar-item-text {
39
+ opacity: 0;
40
+ width: 0;
41
+ display: none;
42
+ }
43
+ .sidebar-collapsed .sidebar-badge {
44
+ display: none;
45
+ }
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; transform: translateY(20px); }
48
+ to { opacity: 1; transform: translateY(0); }
49
+ }
50
+ .animate-fadeIn {
51
+ animation: fadeIn 0.5s ease-out forwards;
52
+ }
53
+ .toggle-btn {
54
+ transition: all 0.3s ease;
55
+ }
56
+ .toggle-btn:hover {
57
+ transform: scale(1.1);
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-gray-100 font-sans">
62
+ <div class="flex h-screen overflow-hidden">
63
+ <!-- Sidebar -->
64
+ <div id="sidebar" class="sidebar bg-white w-64 sidebar-expanded flex-shrink-0 shadow-lg relative">
65
+ <div class="p-4 flex items-center justify-between">
66
+ <span class="text-xl font-bold text-purple-600 sidebar-item-text">DashboardPro</span>
67
+ <button id="toggleSidebar" class="toggle-btn text-gray-500 hover:text-purple-600">
68
+ <i class="fas fa-bars"></i>
69
+ </button>
70
+ </div>
71
+ <nav class="mt-6">
72
+ <div class="px-4">
73
+ <div class="py-2 px-3 flex items-center rounded-lg bg-purple-50 text-purple-600 mb-2">
74
+ <i class="fas fa-home mr-3"></i>
75
+ <span class="sidebar-item-text">Dashboard</span>
76
+ </div>
77
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-purple-50 text-gray-600 hover:text-purple-600 mb-2">
78
+ <i class="fas fa-chart-line mr-3"></i>
79
+ <span class="sidebar-item-text">Analytics</span>
80
+ </div>
81
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-purple-50 text-gray-600 hover:text-purple-600 mb-2">
82
+ <i class="fas fa-envelope mr-3"></i>
83
+ <span class="sidebar-item-text">Messages</span>
84
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full sidebar-badge">5</span>
85
+ </div>
86
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-purple-50 text-gray-600 hover:text-purple-600 mb-2">
87
+ <i class="fas fa-calendar mr-3"></i>
88
+ <span class="sidebar-item-text">Calendar</span>
89
+ </div>
90
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-purple-50 text-gray-600 hover:text-purple-600 mb-2">
91
+ <i class="fas fa-cog mr-3"></i>
92
+ <span class="sidebar-item-text">Settings</span>
93
+ </div>
94
+ </div>
95
+ </nav>
96
+ <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
97
+ <div class="flex items-center">
98
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full">
99
+ <div class="ml-3 sidebar-item-text">
100
+ <p class="text-sm font-medium text-gray-800">Sarah Johnson</p>
101
+ <p class="text-xs text-gray-500">Admin</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Main Content -->
108
+ <div class="flex-1 overflow-auto">
109
+ <!-- Top Navigation -->
110
+ <header class="bg-white shadow-sm">
111
+ <div class="flex items-center justify-between px-6 py-4">
112
+ <div class="flex items-center">
113
+ <button id="mobileToggleSidebar" class="mr-4 text-gray-500 md:hidden">
114
+ <i class="fas fa-bars"></i>
115
+ </button>
116
+ <h1 class="text-2xl font-semibold text-gray-800">Dashboard Overview</h1>
117
+ </div>
118
+ <div class="flex items-center space-x-4">
119
+ <div class="relative">
120
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
121
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
122
+ </div>
123
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
124
+ <i class="fas fa-bell"></i>
125
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
126
+ </button>
127
+ <div class="flex items-center">
128
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full">
129
+ <span class="ml-2 hidden md:inline">Sarah Johnson</span>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </header>
134
+
135
+ <!-- Main Content Area -->
136
+ <main class="p-6">
137
+ <!-- Stats Cards -->
138
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
139
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover animate-fadeIn" style="animation-delay: 0.1s;">
140
+ <div class="flex items-center">
141
+ <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
142
+ <i class="fas fa-users text-xl"></i>
143
+ </div>
144
+ <div class="ml-4">
145
+ <p class="text-sm font-medium text-gray-500">Total Users</p>
146
+ <p class="text-2xl font-semibold text-gray-800">2,453</p>
147
+ </div>
148
+ </div>
149
+ <div class="mt-4">
150
+ <span class="text-green-500 text-sm font-medium">+12% from last month</span>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover animate-fadeIn" style="animation-delay: 0.2s;">
155
+ <div class="flex items-center">
156
+ <div class="p-3 rounded-lg bg-purple-100 text-purple-600">
157
+ <i class="fas fa-shopping-cart text-xl"></i>
158
+ </div>
159
+ <div class="ml-4">
160
+ <p class="text-sm font-medium text-gray-500">Total Orders</p>
161
+ <p class="text-2xl font-semibold text-gray-800">1,287</p>
162
+ </div>
163
+ </div>
164
+ <div class="mt-4">
165
+ <span class="text-green-500 text-sm font-medium">+8% from last month</span>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover animate-fadeIn" style="animation-delay: 0.3s;">
170
+ <div class="flex items-center">
171
+ <div class="p-3 rounded-lg bg-green-100 text-green-600">
172
+ <i class="fas fa-dollar-sign text-xl"></i>
173
+ </div>
174
+ <div class="ml-4">
175
+ <p class="text-sm font-medium text-gray-500">Revenue</p>
176
+ <p class="text-2xl font-semibold text-gray-800">$34,546</p>
177
+ </div>
178
+ </div>
179
+ <div class="mt-4">
180
+ <span class="text-red-500 text-sm font-medium">-3% from last month</span>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover animate-fadeIn" style="animation-delay: 0.4s;">
185
+ <div class="flex items-center">
186
+ <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600">
187
+ <i class="fas fa-chart-pie text-xl"></i>
188
+ </div>
189
+ <div class="ml-4">
190
+ <p class="text-sm font-medium text-gray-500">Conversion Rate</p>
191
+ <p class="text-2xl font-semibold text-gray-800">3.6%</p>
192
+ </div>
193
+ </div>
194
+ <div class="mt-4">
195
+ <span class="text-green-500 text-sm font-medium">+1.2% from last month</span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Charts Section -->
201
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
202
+ <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
203
+ <div class="flex items-center justify-between mb-6">
204
+ <h2 class="text-lg font-semibold text-gray-800">Sales Overview</h2>
205
+ <div class="flex space-x-2">
206
+ <button class="px-3 py-1 text-sm bg-purple-100 text-purple-600 rounded-lg">Month</button>
207
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-lg">Week</button>
208
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-lg">Day</button>
209
+ </div>
210
+ </div>
211
+ <div class="chart-container">
212
+ <canvas id="salesChart"></canvas>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="bg-white rounded-xl shadow-sm p-6">
217
+ <h2 class="text-lg font-semibold text-gray-800 mb-6">Traffic Sources</h2>
218
+ <div class="chart-container">
219
+ <canvas id="trafficChart"></canvas>
220
+ </div>
221
+ <div class="mt-4 grid grid-cols-2 gap-4">
222
+ <div class="flex items-center">
223
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
224
+ <span class="text-sm text-gray-600">Direct</span>
225
+ </div>
226
+ <div class="flex items-center">
227
+ <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
228
+ <span class="text-sm text-gray-600">Organic</span>
229
+ </div>
230
+ <div class="flex items-center">
231
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
232
+ <span class="text-sm text-gray-600">Referral</span>
233
+ </div>
234
+ <div class="flex items-center">
235
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
236
+ <span class="text-sm text-gray-600">Social</span>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Recent Orders and Activity Feed -->
243
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
244
+ <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
245
+ <h2 class="text-lg font-semibold text-gray-800 mb-6">Recent Orders</h2>
246
+ <div class="overflow-x-auto">
247
+ <table class="min-w-full divide-y divide-gray-200">
248
+ <thead>
249
+ <tr>
250
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
251
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
252
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
253
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
254
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
255
+ </tr>
256
+ </thead>
257
+ <tbody class="bg-white divide-y divide-gray-200">
258
+ <tr>
259
+ <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0001</td>
260
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">John Smith</td>
261
+ <td class="px-4 py-4 whitespace-nowrap">
262
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span>
263
+ </td>
264
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$245.00</td>
265
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
266
+ </tr>
267
+ <tr>
268
+ <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0002</td>
269
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Emma Johnson</td>
270
+ <td class="px-4 py-4 whitespace-nowrap">
271
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Processing</span>
272
+ </td>
273
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$189.00</td>
274
+ <td class="px-4 py-4 whites
275
+ </html>