Spaces:
Running
Running
alot issues i've findout , it's responsive, first skelaton laoder to perticular blocks , after that , and the header don't have anything like floating rouded corner navbar , also it's not legitimate as it's not have centralized data.json for all data , iterally data from header to footer , components , charts , widgets , dynamic pages , in that dynamic pages linked to the header or footer , in each pages , the metadata aong with data of widgets , etc.
Browse files- analytics.html +31 -0
- components/navbar.js +137 -26
- data.json +110 -0
- index.html +19 -39
- reports.html +34 -0
- script.js +86 -8
- settings.html +37 -0
- style.css +97 -7
analytics.html
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Analytics | DataViz Pulse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
| 11 |
+
</head>
|
| 12 |
+
<body class="bg-gray-50">
|
| 13 |
+
<custom-navbar></custom-navbar>
|
| 14 |
+
|
| 15 |
+
<main class="container mx-auto px-4 py-6 mt-16">
|
| 16 |
+
<div class="flex justify-between items-center mb-8">
|
| 17 |
+
<h1 class="text-2xl font-bold text-gray-800">Analytics Dashboard</h1>
|
| 18 |
+
</div>
|
| 19 |
+
|
| 20 |
+
<div id="analytics-content" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
| 21 |
+
<!-- Will be populated by JavaScript -->
|
| 22 |
+
</div>
|
| 23 |
+
</main>
|
| 24 |
+
|
| 25 |
+
<script src="components/navbar.js"></script>
|
| 26 |
+
<script src="script.js"></script>
|
| 27 |
+
<script>
|
| 28 |
+
feather.replace();
|
| 29 |
+
</script>
|
| 30 |
+
</body>
|
| 31 |
+
</html>
|
components/navbar.js
CHANGED
|
@@ -1,56 +1,167 @@
|
|
|
|
|
| 1 |
class CustomNavbar extends HTMLElement {
|
| 2 |
-
connectedCallback() {
|
|
|
|
|
|
|
|
|
|
| 3 |
this.attachShadow({ mode: 'open' });
|
| 4 |
this.shadowRoot.innerHTML = `
|
| 5 |
<style>
|
|
|
|
|
|
|
|
|
|
| 6 |
.navbar {
|
| 7 |
transition: all 0.3s ease;
|
| 8 |
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
}
|
| 10 |
-
.
|
| 11 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 12 |
}
|
| 13 |
.search-input:focus {
|
| 14 |
outline: none;
|
| 15 |
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
|
| 16 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 17 |
.avatar {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
transition: all 0.3s ease;
|
| 19 |
}
|
| 20 |
.avatar:hover {
|
| 21 |
transform: scale(1.05);
|
| 22 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
</style>
|
| 24 |
-
<nav class="navbar
|
| 25 |
-
<div class="
|
| 26 |
-
<div class="
|
| 27 |
-
<
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
|
| 37 |
</div>
|
| 38 |
</div>
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
<
|
| 42 |
-
|
|
|
|
|
|
|
|
|
|
| 43 |
</button>
|
| 44 |
-
<div class="
|
| 45 |
-
<div class="avatar
|
| 46 |
-
|
| 47 |
-
</div>
|
| 48 |
-
<span class="hidden md:inline text-sm font-medium text-gray-700">John Doe</span>
|
| 49 |
</div>
|
| 50 |
</div>
|
| 51 |
</div>
|
| 52 |
</nav>
|
| 53 |
-
|
| 54 |
|
| 55 |
// Add scroll effect
|
| 56 |
window.addEventListener('scroll', () => {
|
|
|
|
| 1 |
+
|
| 2 |
class CustomNavbar extends HTMLElement {
|
| 3 |
+
async connectedCallback() {
|
| 4 |
+
const response = await fetch('/data.json');
|
| 5 |
+
const data = await response.json();
|
| 6 |
+
|
| 7 |
this.attachShadow({ mode: 'open' });
|
| 8 |
this.shadowRoot.innerHTML = `
|
| 9 |
<style>
|
| 10 |
+
:host {
|
| 11 |
+
display: block;
|
| 12 |
+
}
|
| 13 |
.navbar {
|
| 14 |
transition: all 0.3s ease;
|
| 15 |
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
| 16 |
+
position: fixed;
|
| 17 |
+
top: 0;
|
| 18 |
+
left: 0;
|
| 19 |
+
right: 0;
|
| 20 |
+
background: white;
|
| 21 |
+
z-index: 50;
|
| 22 |
+
border-radius: 0 0 1rem 1rem;
|
| 23 |
+
padding: 0.75rem 1.5rem;
|
| 24 |
+
}
|
| 25 |
+
.container {
|
| 26 |
+
display: flex;
|
| 27 |
+
align-items: center;
|
| 28 |
+
justify-content: space-between;
|
| 29 |
+
max-width: 100%;
|
| 30 |
+
margin: 0 auto;
|
| 31 |
+
}
|
| 32 |
+
.brand {
|
| 33 |
+
display: flex;
|
| 34 |
+
align-items: center;
|
| 35 |
+
gap: 0.5rem;
|
| 36 |
+
}
|
| 37 |
+
.brand-icon {
|
| 38 |
+
color: ${data.navbar.logoColor};
|
| 39 |
}
|
| 40 |
+
.brand-title {
|
| 41 |
+
font-size: 1.25rem;
|
| 42 |
+
font-weight: 700;
|
| 43 |
+
color: #1f2937;
|
| 44 |
+
}
|
| 45 |
+
.search-container {
|
| 46 |
+
position: relative;
|
| 47 |
+
display: none;
|
| 48 |
+
}
|
| 49 |
+
.search-input {
|
| 50 |
+
padding-left: 2.5rem;
|
| 51 |
+
padding-right: 1rem;
|
| 52 |
+
padding-top: 0.5rem;
|
| 53 |
+
padding-bottom: 0.5rem;
|
| 54 |
+
background: #f3f4f6;
|
| 55 |
+
border-radius: 9999px;
|
| 56 |
+
color: #374151;
|
| 57 |
+
width: 16rem;
|
| 58 |
+
border: none;
|
| 59 |
}
|
| 60 |
.search-input:focus {
|
| 61 |
outline: none;
|
| 62 |
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
|
| 63 |
}
|
| 64 |
+
.search-icon {
|
| 65 |
+
position: absolute;
|
| 66 |
+
left: 0.75rem;
|
| 67 |
+
top: 0.5rem;
|
| 68 |
+
color: #9ca3af;
|
| 69 |
+
}
|
| 70 |
+
.user-menu {
|
| 71 |
+
display: flex;
|
| 72 |
+
align-items: center;
|
| 73 |
+
gap: 1rem;
|
| 74 |
+
}
|
| 75 |
+
.notification-btn {
|
| 76 |
+
padding: 0.5rem;
|
| 77 |
+
border-radius: 9999px;
|
| 78 |
+
}
|
| 79 |
+
.notification-btn:hover {
|
| 80 |
+
background: #f3f4f6;
|
| 81 |
+
}
|
| 82 |
+
.user-profile {
|
| 83 |
+
display: flex;
|
| 84 |
+
align-items: center;
|
| 85 |
+
gap: 0.5rem;
|
| 86 |
+
}
|
| 87 |
.avatar {
|
| 88 |
+
width: 2rem;
|
| 89 |
+
height: 2rem;
|
| 90 |
+
border-radius: 9999px;
|
| 91 |
+
background: ${data.navbar.user.color === 'blue' ? '#3b82f6' : '#10b981'};
|
| 92 |
+
display: flex;
|
| 93 |
+
align-items: center;
|
| 94 |
+
justify-content: center;
|
| 95 |
+
color: white;
|
| 96 |
+
font-weight: 500;
|
| 97 |
transition: all 0.3s ease;
|
| 98 |
}
|
| 99 |
.avatar:hover {
|
| 100 |
transform: scale(1.05);
|
| 101 |
}
|
| 102 |
+
.username {
|
| 103 |
+
font-size: 0.875rem;
|
| 104 |
+
font-weight: 500;
|
| 105 |
+
color: #374151;
|
| 106 |
+
}
|
| 107 |
+
.nav-links {
|
| 108 |
+
display: flex;
|
| 109 |
+
gap: 1rem;
|
| 110 |
+
}
|
| 111 |
+
.nav-link {
|
| 112 |
+
display: flex;
|
| 113 |
+
align-items: center;
|
| 114 |
+
gap: 0.5rem;
|
| 115 |
+
padding: 0.5rem 1rem;
|
| 116 |
+
border-radius: 0.5rem;
|
| 117 |
+
color: #4b5563;
|
| 118 |
+
text-decoration: none;
|
| 119 |
+
}
|
| 120 |
+
.nav-link:hover {
|
| 121 |
+
background: #f3f4f6;
|
| 122 |
+
}
|
| 123 |
+
.nav-link.active {
|
| 124 |
+
background: #e5e7eb;
|
| 125 |
+
}
|
| 126 |
+
@media (min-width: 768px) {
|
| 127 |
+
.search-container {
|
| 128 |
+
display: block;
|
| 129 |
+
}
|
| 130 |
+
.username {
|
| 131 |
+
display: inline;
|
| 132 |
+
}
|
| 133 |
+
}
|
| 134 |
</style>
|
| 135 |
+
<nav class="navbar">
|
| 136 |
+
<div class="container">
|
| 137 |
+
<div class="brand">
|
| 138 |
+
<i data-feather="${data.navbar.logo}" class="brand-icon"></i>
|
| 139 |
+
<a href="/" class="brand-title">${data.navbar.title}</a>
|
| 140 |
+
<div class="nav-links">
|
| 141 |
+
${data.navbar.links.map(link => `
|
| 142 |
+
<a href="${link.href}" class="nav-link ${window.location.pathname === link.href ? 'active' : ''}">
|
| 143 |
+
<i data-feather="${link.icon}"></i>
|
| 144 |
+
<span>${link.name}</span>
|
| 145 |
+
</a>
|
| 146 |
+
`).join('')}
|
|
|
|
| 147 |
</div>
|
| 148 |
</div>
|
| 149 |
+
<div class="search-container">
|
| 150 |
+
<input type="text" placeholder="${data.navbar.searchPlaceholder}" class="search-input">
|
| 151 |
+
<i data-feather="search" class="search-icon"></i>
|
| 152 |
+
</div>
|
| 153 |
+
<div class="user-menu">
|
| 154 |
+
<button class="notification-btn">
|
| 155 |
+
<i data-feather="bell"></i>
|
| 156 |
</button>
|
| 157 |
+
<div class="user-profile">
|
| 158 |
+
<div class="avatar">${data.navbar.user.initials}</div>
|
| 159 |
+
<span class="username hidden md:inline">${data.navbar.user.name}</span>
|
|
|
|
|
|
|
| 160 |
</div>
|
| 161 |
</div>
|
| 162 |
</div>
|
| 163 |
</nav>
|
| 164 |
+
`;
|
| 165 |
|
| 166 |
// Add scroll effect
|
| 167 |
window.addEventListener('scroll', () => {
|
data.json
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
```json
|
| 2 |
+
{
|
| 3 |
+
"metadata": {
|
| 4 |
+
"title": "DataViz Pulse Dashboard",
|
| 5 |
+
"favicon": "/static/favicon.ico",
|
| 6 |
+
"description": "Interactive analytics dashboard"
|
| 7 |
+
},
|
| 8 |
+
"navbar": {
|
| 9 |
+
"title": "DataViz Pulse",
|
| 10 |
+
"logo": "activity",
|
| 11 |
+
"logoColor": "text-blue-500",
|
| 12 |
+
"searchPlaceholder": "Search...",
|
| 13 |
+
"user": {
|
| 14 |
+
"name": "John Doe",
|
| 15 |
+
"initials": "JD",
|
| 16 |
+
"color": "blue"
|
| 17 |
+
},
|
| 18 |
+
"links": [
|
| 19 |
+
{
|
| 20 |
+
"name": "Dashboard",
|
| 21 |
+
"href": "/",
|
| 22 |
+
"icon": "home"
|
| 23 |
+
},
|
| 24 |
+
{
|
| 25 |
+
"name": "Analytics",
|
| 26 |
+
"href": "/analytics.html",
|
| 27 |
+
"icon": "bar-chart-2"
|
| 28 |
+
},
|
| 29 |
+
{
|
| 30 |
+
"name": "Reports",
|
| 31 |
+
"href": "/reports.html",
|
| 32 |
+
"icon": "file-text"
|
| 33 |
+
},
|
| 34 |
+
{
|
| 35 |
+
"name": "Settings",
|
| 36 |
+
"href": "/settings.html",
|
| 37 |
+
"icon": "settings"
|
| 38 |
+
}
|
| 39 |
+
]
|
| 40 |
+
},
|
| 41 |
+
"dashboard": {
|
| 42 |
+
"cards": [
|
| 43 |
+
{
|
| 44 |
+
"title": "Total Revenue",
|
| 45 |
+
"value": "$24,780",
|
| 46 |
+
"icon": "dollar-sign",
|
| 47 |
+
"color": "blue",
|
| 48 |
+
"chartData": [2100, 3200, 2800, 3900, 3700, 4200, 5100]
|
| 49 |
+
},
|
| 50 |
+
{
|
| 51 |
+
"title": "Active Users",
|
| 52 |
+
"value": "1,429",
|
| 53 |
+
"icon": "users",
|
| 54 |
+
"color": "green",
|
| 55 |
+
"chartData": [320, 410, 380, 430, 490, 520, 560]
|
| 56 |
+
},
|
| 57 |
+
{
|
| 58 |
+
"title": "Conversion Rate",
|
| 59 |
+
"value": "3.6%",
|
| 60 |
+
"icon": "trending-up",
|
| 61 |
+
"color": "purple",
|
| 62 |
+
"chartData": [2.8, 3.2, 3.0, 3.4, 3.6, 3.5, 3.8]
|
| 63 |
+
}
|
| 64 |
+
],
|
| 65 |
+
"mainChart": {
|
| 66 |
+
"title": "Performance Overview",
|
| 67 |
+
"series": [
|
| 68 |
+
{
|
| 69 |
+
"name": "Visitors",
|
| 70 |
+
"data": [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
|
| 71 |
+
},
|
| 72 |
+
{
|
| 73 |
+
"name": "Page Views",
|
| 74 |
+
"data": [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
|
| 75 |
+
},
|
| 76 |
+
{
|
| 77 |
+
"name": "Conversions",
|
| 78 |
+
"data": [12, 18, 10, 8, 13, 9, 6, 7, 5, 11, 7, 9]
|
| 79 |
+
}
|
| 80 |
+
]
|
| 81 |
+
},
|
| 82 |
+
"activities": [
|
| 83 |
+
{
|
| 84 |
+
"type": "signup",
|
| 85 |
+
"title": "New signup",
|
| 86 |
+
"description": "John Doe registered",
|
| 87 |
+
"time": "2 mins ago",
|
| 88 |
+
"icon": "check-circle",
|
| 89 |
+
"color": "green"
|
| 90 |
+
},
|
| 91 |
+
{
|
| 92 |
+
"type": "order",
|
| 93 |
+
"title": "New order",
|
| 94 |
+
"description": "Order #12345",
|
| 95 |
+
"time": "15 mins ago",
|
| 96 |
+
"icon": "shopping-cart",
|
| 97 |
+
"color": "blue"
|
| 98 |
+
},
|
| 99 |
+
{
|
| 100 |
+
"type": "message",
|
| 101 |
+
"title": "New message",
|
| 102 |
+
"description": "From Sarah Johnson",
|
| 103 |
+
"time": "1 hour ago",
|
| 104 |
+
"icon": "message-square",
|
| 105 |
+
"color": "purple"
|
| 106 |
+
}
|
| 107 |
+
]
|
| 108 |
+
}
|
| 109 |
+
}
|
| 110 |
+
```
|
index.html
CHANGED
|
@@ -12,50 +12,30 @@
|
|
| 12 |
</head>
|
| 13 |
<body class="bg-gray-50">
|
| 14 |
<custom-navbar></custom-navbar>
|
| 15 |
-
|
| 16 |
<main class="container mx-auto px-4 py-6 mt-16">
|
| 17 |
-
<
|
| 18 |
-
|
| 19 |
-
<div class="bg-white rounded-xl shadow-md p-6">
|
| 20 |
-
<div class="
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
<h3 class="text-2xl font-bold mt-2">$24,780</h3>
|
| 24 |
-
</div>
|
| 25 |
-
<div class="bg-blue-100 p-3 rounded-full">
|
| 26 |
-
<i data-feather="dollar-sign" class="text-blue-500"></i>
|
| 27 |
-
</div>
|
| 28 |
-
</div>
|
| 29 |
-
<div id="revenue-chart" class="mt-4"></div>
|
| 30 |
</div>
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
<div class="
|
| 34 |
-
|
| 35 |
-
<p class="text-gray-500">Active Users</p>
|
| 36 |
-
<h3 class="text-2xl font-bold mt-2">1,429</h3>
|
| 37 |
-
</div>
|
| 38 |
-
<div class="bg-green-100 p-3 rounded-full">
|
| 39 |
-
<i data-feather="users" class="text-green-500"></i>
|
| 40 |
-
</div>
|
| 41 |
-
</div>
|
| 42 |
-
<div id="users-chart" class="mt-4"></div>
|
| 43 |
</div>
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
<div class="
|
| 47 |
-
|
| 48 |
-
<p class="text-gray-500">Conversion Rate</p>
|
| 49 |
-
<h3 class="text-2xl font-bold mt-2">3.6%</h3>
|
| 50 |
-
</div>
|
| 51 |
-
<div class="bg-purple-100 p-3 rounded-full">
|
| 52 |
-
<i data-feather="trending-up" class="text-purple-500"></i>
|
| 53 |
-
</div>
|
| 54 |
-
</div>
|
| 55 |
-
<div id="conversion-chart" class="mt-4"></div>
|
| 56 |
</div>
|
|
|
|
| 57 |
|
| 58 |
-
|
|
|
|
|
|
|
|
|
|
| 59 |
<div class="bg-white rounded-xl shadow-md p-6 md:col-span-2">
|
| 60 |
<div class="flex justify-between items-center mb-6">
|
| 61 |
<h2 class="text-xl font-semibold">Performance Overview</h2>
|
|
|
|
| 12 |
</head>
|
| 13 |
<body class="bg-gray-50">
|
| 14 |
<custom-navbar></custom-navbar>
|
|
|
|
| 15 |
<main class="container mx-auto px-4 py-6 mt-16">
|
| 16 |
+
<!-- Loading Skeleton -->
|
| 17 |
+
<div class="skeleton-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 18 |
+
<div class="skeleton-card bg-white rounded-xl shadow-md p-6">
|
| 19 |
+
<div class="skeleton h-6 w-1/2 mb-4"></div>
|
| 20 |
+
<div class="skeleton h-8 w-3/4 mb-6"></div>
|
| 21 |
+
<div class="skeleton h-24 w-full"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
</div>
|
| 23 |
+
<div class="skeleton-card bg-white rounded-xl shadow-md p-6">
|
| 24 |
+
<div class="skeleton h-6 w-1/2 mb-4"></div>
|
| 25 |
+
<div class="skeleton h-8 w-3/4 mb-6"></div>
|
| 26 |
+
<div class="skeleton h-24 w-full"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
</div>
|
| 28 |
+
<div class="skeleton-card bg-white rounded-xl shadow-md p-6">
|
| 29 |
+
<div class="skeleton h-6 w-1/2 mb-4"></div>
|
| 30 |
+
<div class="skeleton h-8 w-3/4 mb-6"></div>
|
| 31 |
+
<div class="skeleton h-24 w-full"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 32 |
</div>
|
| 33 |
+
</div>
|
| 34 |
|
| 35 |
+
<!-- Actual Content (hidden initially) -->
|
| 36 |
+
<div class="dashboard-content hidden">
|
| 37 |
+
<div class="cards-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
|
| 38 |
+
<!-- Main Chart -->
|
| 39 |
<div class="bg-white rounded-xl shadow-md p-6 md:col-span-2">
|
| 40 |
<div class="flex justify-between items-center mb-6">
|
| 41 |
<h2 class="text-xl font-semibold">Performance Overview</h2>
|
reports.html
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Reports | DataViz Pulse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
</head>
|
| 11 |
+
<body class="bg-gray-50">
|
| 12 |
+
<custom-navbar></custom-navbar>
|
| 13 |
+
|
| 14 |
+
<main class="container mx-auto px-4 py-6 mt-16">
|
| 15 |
+
<div class="flex justify-between items-center mb-8">
|
| 16 |
+
<h1 class="text-2xl font-bold text-gray-800">Reports</h1>
|
| 17 |
+
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
|
| 18 |
+
<i data-feather="download"></i>
|
| 19 |
+
Export
|
| 20 |
+
</button>
|
| 21 |
+
</div>
|
| 22 |
+
|
| 23 |
+
<div id="reports-content" class="bg-white rounded-xl shadow-md p-6">
|
| 24 |
+
<!-- Will be populated by JavaScript -->
|
| 25 |
+
</div>
|
| 26 |
+
</main>
|
| 27 |
+
|
| 28 |
+
<script src="components/navbar.js"></script>
|
| 29 |
+
<script src="script.js"></script>
|
| 30 |
+
<script>
|
| 31 |
+
feather.replace();
|
| 32 |
+
</script>
|
| 33 |
+
</body>
|
| 34 |
+
</html>
|
script.js
CHANGED
|
@@ -1,12 +1,90 @@
|
|
| 1 |
-
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
-
// Simulate loading with skeleton
|
| 3 |
-
setTimeout(() => {
|
| 4 |
-
// Initialize charts after skeleton loading
|
| 5 |
-
initCharts();
|
| 6 |
-
}, 1000);
|
| 7 |
|
| 8 |
-
|
| 9 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 10 |
const revenueOptions = {
|
| 11 |
series: [{
|
| 12 |
name: 'Revenue',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
|
| 2 |
+
document.addEventListener('DOMContentLoaded', async function() {
|
| 3 |
+
// Load skeleton first
|
| 4 |
+
document.body.classList.add('loading');
|
| 5 |
+
|
| 6 |
+
try {
|
| 7 |
+
// Fetch data
|
| 8 |
+
const response = await fetch('/data.json');
|
| 9 |
+
const data = await response.json();
|
| 10 |
+
|
| 11 |
+
// Initialize dashboard
|
| 12 |
+
initDashboard(data);
|
| 13 |
+
|
| 14 |
+
// Remove loading state
|
| 15 |
+
document.body.classList.remove('loading');
|
| 16 |
+
} catch (error) {
|
| 17 |
+
console.error('Error loading dashboard:', error);
|
| 18 |
+
document.body.classList.remove('loading');
|
| 19 |
+
document.body.innerHTML = `
|
| 20 |
+
<div class="error-container">
|
| 21 |
+
<h2>Failed to load dashboard</h2>
|
| 22 |
+
<p>${error.message}</p>
|
| 23 |
+
<button onclick="window.location.reload()">Retry</button>
|
| 24 |
+
</div>
|
| 25 |
+
`;
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
function initDashboard(data) {
|
| 29 |
+
// Initialize charts
|
| 30 |
+
initCharts(data.dashboard);
|
| 31 |
+
|
| 32 |
+
// Render cards
|
| 33 |
+
renderCards(data.dashboard.cards);
|
| 34 |
+
|
| 35 |
+
// Render activities
|
| 36 |
+
renderActivities(data.dashboard.activities);
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
function renderCards(cards) {
|
| 40 |
+
const cardsContainer = document.querySelector('.cards-container');
|
| 41 |
+
if (!cardsContainer) return;
|
| 42 |
+
|
| 43 |
+
cardsContainer.innerHTML = cards.map(card => `
|
| 44 |
+
<div class="card">
|
| 45 |
+
<div class="card-header">
|
| 46 |
+
<div>
|
| 47 |
+
<p>${card.title}</p>
|
| 48 |
+
<h3>${card.value}</h3>
|
| 49 |
+
</div>
|
| 50 |
+
<div class="icon-container bg-${card.color}-100">
|
| 51 |
+
<i data-feather="${card.icon}" class="text-${card.color}-500"></i>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
<div id="${card.title.toLowerCase().replace(' ', '-')}-chart" class="card-chart"></div>
|
| 55 |
+
</div>
|
| 56 |
+
`).join('');
|
| 57 |
+
|
| 58 |
+
// Initialize feather icons
|
| 59 |
+
if (window.feather) {
|
| 60 |
+
window.feather.replace();
|
| 61 |
+
}
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
function renderActivities(activities) {
|
| 65 |
+
const activitiesContainer = document.querySelector('.activities-container');
|
| 66 |
+
if (!activitiesContainer) return;
|
| 67 |
+
|
| 68 |
+
activitiesContainer.innerHTML = activities.map(activity => `
|
| 69 |
+
<div class="activity">
|
| 70 |
+
<div class="activity-icon bg-${activity.color}-100">
|
| 71 |
+
<i data-feather="${activity.icon}" class="text-${activity.color}-500"></i>
|
| 72 |
+
</div>
|
| 73 |
+
<div class="activity-details">
|
| 74 |
+
<p class="activity-title">${activity.title}</p>
|
| 75 |
+
<p class="activity-description">${activity.description}</p>
|
| 76 |
+
<p class="activity-time">${activity.time}</p>
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
`).join('');
|
| 80 |
+
|
| 81 |
+
if (window.feather) {
|
| 82 |
+
window.feather.replace();
|
| 83 |
+
}
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
+
function initCharts(dashboardData) {
|
| 87 |
+
// Revenue Chart
|
| 88 |
const revenueOptions = {
|
| 89 |
series: [{
|
| 90 |
name: 'Revenue',
|
settings.html
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Settings | DataViz Pulse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
</head>
|
| 11 |
+
<body class="bg-gray-50">
|
| 12 |
+
<custom-navbar></custom-navbar>
|
| 13 |
+
|
| 14 |
+
<main class="container mx-auto px-4 py-6 mt-16">
|
| 15 |
+
<div class="flex justify-between items-center mb-8">
|
| 16 |
+
<h1 class="text-2xl font-bold text-gray-800">Settings</h1>
|
| 17 |
+
</div>
|
| 18 |
+
|
| 19 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
| 20 |
+
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2">
|
| 21 |
+
<h2 class="text-xl font-semibold mb-4">Profile Settings</h2>
|
| 22 |
+
<!-- Profile form will be populated by JavaScript -->
|
| 23 |
+
</div>
|
| 24 |
+
<div class="bg-white rounded-xl shadow-md p-6">
|
| 25 |
+
<h2 class="text-xl font-semibold mb-4">Preferences</h2>
|
| 26 |
+
<!-- Preferences will be populated by JavaScript -->
|
| 27 |
+
</div>
|
| 28 |
+
</div>
|
| 29 |
+
</main>
|
| 30 |
+
|
| 31 |
+
<script src="components/navbar.js"></script>
|
| 32 |
+
<script src="script.js"></script>
|
| 33 |
+
<script>
|
| 34 |
+
feather.replace();
|
| 35 |
+
</script>
|
| 36 |
+
</body>
|
| 37 |
+
</html>
|
style.css
CHANGED
|
@@ -1,13 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
/* Skeleton loading animation */
|
| 2 |
@keyframes shimmer {
|
| 3 |
-
0% {
|
| 4 |
-
|
| 5 |
-
}
|
| 6 |
-
100% {
|
| 7 |
-
background-position: 468px 0;
|
| 8 |
-
}
|
| 9 |
}
|
| 10 |
-
|
| 11 |
.skeleton {
|
| 12 |
background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
|
| 13 |
background-size: 800px 104px;
|
|
@@ -15,6 +25,86 @@
|
|
| 15 |
border-radius: 4px;
|
| 16 |
}
|
| 17 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
/* Custom scrollbar */
|
| 19 |
::-webkit-scrollbar {
|
| 20 |
width: 6px;
|
|
|
|
| 1 |
+
|
| 2 |
+
/* Loading states */
|
| 3 |
+
body.loading .dashboard-content {
|
| 4 |
+
display: none;
|
| 5 |
+
}
|
| 6 |
+
body.loading .skeleton-grid {
|
| 7 |
+
display: grid;
|
| 8 |
+
}
|
| 9 |
+
body:not(.loading) .dashboard-content {
|
| 10 |
+
display: block;
|
| 11 |
+
}
|
| 12 |
+
body:not(.loading) .skeleton-grid {
|
| 13 |
+
display: none;
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
/* Skeleton loading animation */
|
| 17 |
@keyframes shimmer {
|
| 18 |
+
0% { background-position: -468px 0; }
|
| 19 |
+
100% { background-position: 468px 0; }
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
}
|
|
|
|
| 21 |
.skeleton {
|
| 22 |
background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
|
| 23 |
background-size: 800px 104px;
|
|
|
|
| 25 |
border-radius: 4px;
|
| 26 |
}
|
| 27 |
|
| 28 |
+
/* Dashboard cards */
|
| 29 |
+
.card {
|
| 30 |
+
background: white;
|
| 31 |
+
border-radius: 0.75rem;
|
| 32 |
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
| 33 |
+
padding: 1.5rem;
|
| 34 |
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
| 35 |
+
}
|
| 36 |
+
.card:hover {
|
| 37 |
+
transform: translateY(-2px);
|
| 38 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 39 |
+
}
|
| 40 |
+
.card-header {
|
| 41 |
+
display: flex;
|
| 42 |
+
justify-content: space-between;
|
| 43 |
+
align-items: center;
|
| 44 |
+
margin-bottom: 1rem;
|
| 45 |
+
}
|
| 46 |
+
.card-header p {
|
| 47 |
+
color: #6b7280;
|
| 48 |
+
font-size: 0.875rem;
|
| 49 |
+
}
|
| 50 |
+
.card-header h3 {
|
| 51 |
+
font-size: 1.5rem;
|
| 52 |
+
font-weight: 700;
|
| 53 |
+
color: #111827;
|
| 54 |
+
margin-top: 0.25rem;
|
| 55 |
+
}
|
| 56 |
+
.icon-container {
|
| 57 |
+
padding: 0.75rem;
|
| 58 |
+
border-radius: 9999px;
|
| 59 |
+
display: flex;
|
| 60 |
+
align-items: center;
|
| 61 |
+
justify-content: center;
|
| 62 |
+
}
|
| 63 |
+
.card-chart {
|
| 64 |
+
height: 100px;
|
| 65 |
+
margin-top: 1rem;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
/* Activities */
|
| 69 |
+
.activities-container {
|
| 70 |
+
display: flex;
|
| 71 |
+
flex-direction: column;
|
| 72 |
+
gap: 1rem;
|
| 73 |
+
}
|
| 74 |
+
.activity {
|
| 75 |
+
display: flex;
|
| 76 |
+
gap: 0.75rem;
|
| 77 |
+
padding: 0.75rem;
|
| 78 |
+
border-radius: 0.5rem;
|
| 79 |
+
transition: background-color 0.2s ease;
|
| 80 |
+
}
|
| 81 |
+
.activity:hover {
|
| 82 |
+
background-color: #f9fafb;
|
| 83 |
+
}
|
| 84 |
+
.activity-icon {
|
| 85 |
+
padding: 0.5rem;
|
| 86 |
+
border-radius: 9999px;
|
| 87 |
+
display: flex;
|
| 88 |
+
align-items: center;
|
| 89 |
+
justify-content: center;
|
| 90 |
+
}
|
| 91 |
+
.activity-details {
|
| 92 |
+
flex: 1;
|
| 93 |
+
}
|
| 94 |
+
.activity-title {
|
| 95 |
+
font-weight: 600;
|
| 96 |
+
color: #111827;
|
| 97 |
+
margin-bottom: 0.125rem;
|
| 98 |
+
}
|
| 99 |
+
.activity-description {
|
| 100 |
+
color: #6b7280;
|
| 101 |
+
font-size: 0.875rem;
|
| 102 |
+
}
|
| 103 |
+
.activity-time {
|
| 104 |
+
color: #9ca3af;
|
| 105 |
+
font-size: 0.75rem;
|
| 106 |
+
margin-top: 0.25rem;
|
| 107 |
+
}
|
| 108 |
/* Custom scrollbar */
|
| 109 |
::-webkit-scrollbar {
|
| 110 |
width: 6px;
|