-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
72 lines (66 loc) · 6.83 KB
/
index.html
File metadata and controls
72 lines (66 loc) · 6.83 KB
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
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Winner TAM Dashboard</title>
<link rel="stylesheet" href="/resources/css/app.css">
</head>
<body>
<div data-app-shell></div>
<div class="main-wrap" id="mainWrap">
<main class="main-content" role="main">
<section class="welcome-banner animate-in opacity-0"><h2>Welcome back, John</h2><p>Here's what's happening with your projects today.</p></section>
<section class="mb-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
<div class="animate-in opacity-0">
<div class="stat-card" style="--card-accent:#0d9488;"><div class="stat-card-header"><div class="stat-card-icon" style="background:rgba(13,148,136,0.1);color:#0d9488;"><span class="icon" data-icon="users"></span></div><span class="stat-card-badge" style="background:rgba(34,197,94,0.1);color:#16a34a;"><span class="icon text-[9px]" data-icon="arrow-up"></span> 12.5%</span></div><div class="stat-card-value">24,580</div><div class="stat-card-label">Total Users</div></div>
</div>
<div class="animate-in opacity-0">
<div class="stat-card" style="--card-accent:#06b6d4;"><div class="stat-card-header"><div class="stat-card-icon" style="background:rgba(6,182,212,0.1);color:#06b6d4;"><span class="icon" data-icon="dollar-sign"></span></div><span class="stat-card-badge" style="background:rgba(34,197,94,0.1);color:#16a34a;"><span class="icon text-[9px]" data-icon="arrow-up"></span> 8.2%</span></div><div class="stat-card-value">$89,240</div><div class="stat-card-label">Revenue</div></div>
</div>
<div class="animate-in opacity-0">
<div class="stat-card" style="--card-accent:#f59e0b;"><div class="stat-card-header"><div class="stat-card-icon" style="background:rgba(245,158,11,0.1);color:#d97706;"><span class="icon" data-icon="shopping-cart"></span></div><span class="stat-card-badge" style="background:rgba(239,68,68,0.1);color:#dc2626;"><span class="icon text-[9px]" data-icon="arrow-down"></span> 3.1%</span></div><div class="stat-card-value">1,245</div><div class="stat-card-label">Orders</div></div>
</div>
<div class="animate-in opacity-0">
<div class="stat-card" style="--card-accent:#8b5cf6;"><div class="stat-card-header"><div class="stat-card-icon" style="background:rgba(139,92,246,0.1);color:#7c3aed;"><span class="icon" data-icon="chart-pie"></span></div><span class="stat-card-badge" style="background:rgba(34,197,94,0.1);color:#16a34a;"><span class="icon text-[9px]" data-icon="arrow-up"></span> 18.7%</span></div><div class="stat-card-value">42.6%</div><div class="stat-card-label">Growth Rate</div></div>
</div>
</section>
<section class="mb-4 grid gap-3 lg:grid-cols-12">
<div class="animate-in opacity-0 lg:col-span-8">
<div class="content-card"><div class="content-card-header"><h5>Revenue Overview</h5><div class="flex gap-1.5"><button class="font-size-btn active" data-chart-range="weekly">Weekly</button><button class="font-size-btn" data-chart-range="monthly">Monthly</button></div></div><div class="content-card-body"><div class="bar-chart" id="barChart"></div></div></div>
</div>
<div class="animate-in opacity-0 lg:col-span-4">
<div class="content-card h-full"><div class="content-card-header"><h5>Project Progress</h5></div><div class="content-card-body">
<div class="progress-item"><div class="progress-item-header"><span>Website Redesign</span><strong>87%</strong></div><div class="progress-bar-custom"><div class="progress-fill w-0" data-width="87%"></div></div></div>
<div class="progress-item"><div class="progress-item-header"><span>Mobile App</span><strong>64%</strong></div><div class="progress-bar-custom"><div class="progress-fill w-0" data-width="64%"></div></div></div>
<div class="progress-item"><div class="progress-item-header"><span>API Integration</span><strong>45%</strong></div><div class="progress-bar-custom"><div class="progress-fill w-0" data-width="45%"></div></div></div>
<div class="progress-item"><div class="progress-item-header"><span>Dashboard v2</span><strong>92%</strong></div><div class="progress-bar-custom"><div class="progress-fill w-0" data-width="92%"></div></div></div>
</div></div>
</div>
</section>
<section class="mb-4 grid gap-3 lg:grid-cols-12">
<div class="animate-in opacity-0 lg:col-span-8">
<div class="content-card"><div class="content-card-header"><h5>Recent Orders</h5><a href="#" class="text-[13px] font-semibold text-accent">View All</a></div><div class="content-card-body p-0"><div class="overflow-x-auto">
<table class="data-table"><thead><tr><th>Order ID</th><th>Customer</th><th>Product</th><th>Amount</th><th>Status</th></tr></thead><tbody>
<tr><td class="font-semibold">#ORD-7291</td><td>Alice Walker</td><td>Pro Plan</td><td class="font-semibold">$299.00</td><td><span class="status-badge success">Completed</span></td></tr>
<tr><td class="font-semibold">#ORD-7290</td><td>Mark Thompson</td><td>Starter Kit</td><td class="font-semibold">$49.00</td><td><span class="status-badge pending">Pending</span></td></tr>
<tr><td class="font-semibold">#ORD-7289</td><td>Sara Lin</td><td>Enterprise</td><td class="font-semibold">$1,200.00</td><td><span class="status-badge success">Completed</span></td></tr>
<tr><td class="font-semibold">#ORD-7288</td><td>James Ortiz</td><td>Pro Plan</td><td class="font-semibold">$299.00</td><td><span class="status-badge failed">Failed</span></td></tr>
</tbody></table>
</div></div></div>
</div>
<div class="animate-in opacity-0 lg:col-span-4">
<div class="content-card h-full"><div class="content-card-header"><h5>Team Members</h5></div><div class="content-card-body">
<div class="team-member"><div class="team-avatar" style="background:linear-gradient(135deg,#f472b6,#ec4899);">SJ</div><div class="team-info"><strong>Sarah Johnson</strong><span>UI Designer</span></div><div class="online-dot"></div></div>
<div class="team-member"><div class="team-avatar" style="background:linear-gradient(135deg,#60a5fa,#3b82f6);">MC</div><div class="team-info"><strong>Mike Chen</strong><span>Backend Dev</span></div><div class="online-dot"></div></div>
<div class="team-member"><div class="team-avatar" style="background:linear-gradient(135deg,#a78bfa,#7c3aed);">ED</div><div class="team-info"><strong>Emily Davis</strong><span>Project Manager</span></div><div class="offline-dot"></div></div>
</div></div>
</div>
</section>
</main>
<footer class="main-footer" data-shell-footer></footer>
</div>
<div data-shell-offcanvas></div>
<script type="module" src="/resources/js/app.js"></script>
</body>
</html>