Scribd
Upload
6 views13 pages

Demo 2

The document outlines the structure and design of a web-based dashboard, featuring a header with user information and various metric cards displaying key performance indicators such as Monthly Recurring Revenue, Active Users, and Conversion Rate. It includes charts for visualizing trends in revenue and user growth, as well as customer acquisition and feature usage. The dashboard is styled with modern CSS techniques and utilizes Chart.js for dynamic data visualization.

Uploaded by

gawobes335
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views13 pages

Demo 2

The document outlines the structure and design of a web-based dashboard, featuring a header with user information and various metric cards displaying key performance indicators such as Monthly Recurring Revenue, Active Users, and Conversion Rate. It includes charts for visualizing trends in revenue and user growth, as well as customer acquisition and feature usage. The dashboard is styled with modern CSS techniques and utilizes Chart.js for dynamic data visualization.

Uploaded by

gawobes335
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<script
src="[Link]
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
min-height: 100vh;
color: #1e293b;
}

.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
padding: 1rem 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
position: sticky;
top: 0;
z-index: 100;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}

.logo {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.user-info {
display: flex;
align-items: center;
gap: 1rem;
}

.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
}

.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}

.dashboard-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin-bottom: 2rem;
}

.metric-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0,
0, 0, 0.06);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.metric-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent-color, linear-gradient(90deg, #3b82f6,
#8b5cf6));
}

.metric-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px
rgba(0, 0, 0, 0.04);
}

.metric-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.metric-title {
font-size: 0.875rem;
font-weight: 500;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.metric-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}

.metric-value {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.metric-change {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
}

.change-positive {
color: #059669;
}

.change-negative {
color: #dc2626;
}

.chart-container {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0,
0, 0, 0.06);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 1.5rem;
}

.chart-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: #1e293b;
}

.charts-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}

.chart-canvas {
position: relative;
height: 400px;
width: 100%;
}

@media (max-width: 768px) {


.charts-grid {
grid-template-columns: 1fr;
}

.container {
padding: 1rem;
}

.header {
padding: 1rem;
}
}

.pulse {
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}

.revenue-icon { background: linear-gradient(135deg, #10b981, #059669);


color: white; }
.users-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color:
white; }
.conversion-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white; }
.retention-icon { background: linear-gradient(135deg, #f59e0b, #d97706);
color: white; }
.churn-icon { background: linear-gradient(135deg, #ef4444, #dc2626); color:
white; }
.growth-icon { background: linear-gradient(135deg, #06b6d4, #0891b2);
color: white; }
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">Dashboard Pro</div>
<div class="user-info">
<span>Welcome back, Sarah</span>
<div class="avatar">S</div>
</div>
</div>
</header>

<div class="container">
<div class="dashboard-grid">
<div class="metric-card" style="--accent-color: linear-gradient(90deg,
#10b981, #059669);">
<div class="metric-header">
<div class="metric-title">Monthly Recurring Revenue</div>
<div class="metric-icon revenue-icon">💰</div>
</div>
<div class="metric-value">$847,392</div>
<div class="metric-change change-positive">
▲ +12.4% from last month
</div>
</div>

<div class="metric-card" style="--accent-color: linear-gradient(90deg,


#3b82f6, #1d4ed8);">
<div class="metric-header">
<div class="metric-title">Active Users</div>
<div class="metric-icon users-icon">👥</div>
</div>
<div class="metric-value">24,891</div>
<div class="metric-change change-positive">
▲ +8.2% from last month
</div>
</div>

<div class="metric-card" style="--accent-color: linear-gradient(90deg,


#8b5cf6, #7c3aed);">
<div class="metric-header">
<div class="metric-title">Conversion Rate</div>
<div class="metric-icon conversion-icon">📈</div>
</div>
<div class="metric-value">3.47%</div>
<div class="metric-change change-positive">
▲ +0.23% from last month
</div>
</div>

<div class="metric-card" style="--accent-color: linear-gradient(90deg,


#f59e0b, #d97706);">
<div class="metric-header">
<div class="metric-title">Customer Retention</div>
<div class="metric-icon retention-icon">🔄</div>
</div>
<div class="metric-value">94.2%</div>
<div class="metric-change change-positive">
▲ +1.1% from last month
</div>
</div>

<div class="metric-card" style="--accent-color: linear-gradient(90deg,


#ef4444, #dc2626);">
<div class="metric-header">
<div class="metric-title">Churn Rate</div>
<div class="metric-icon churn-icon">📉</div>
</div>
<div class="metric-value">2.1%</div>
<div class="metric-change change-negative">
▼ -0.4% from last month
</div>
</div>

<div class="metric-card" style="--accent-color: linear-gradient(90deg,


#06b6d4, #0891b2);">
<div class="metric-header">
<div class="metric-title">Growth Rate</div>
<div class="metric-icon growth-icon">🚀</div>
</div>
<div class="metric-value">18.5%</div>
<div class="metric-change change-positive">
▲ +2.3% from last month
</div>
</div>
</div>

<div class="charts-grid">
<div class="chart-container">
<h3 class="chart-title">Revenue & User Growth Trend</h3>
<div class="chart-canvas">
<canvas id="revenueChart"></canvas>
</div>
</div>

<div class="chart-container">
<h3 class="chart-title">Traffic Sources</h3>
<div class="chart-canvas">
<canvas id="trafficChart"></canvas>
</div>
</div>
</div>

<div class="charts-grid">
<div class="chart-container">
<h3 class="chart-title">Customer Acquisition Funnel</h3>
<div class="chart-canvas">
<canvas id="funnelChart"></canvas>
</div>
</div>

<div class="chart-container">
<h3 class="chart-title">Feature Usage Distribution</h3>
<div class="chart-canvas">
<canvas id="featureChart"></canvas>
</div>
</div>
</div>

<div class="chart-container">
<h3 class="chart-title">Monthly Performance Overview</h3>
<div class="chart-canvas">
<canvas id="performanceChart"></canvas>
</div>
</div>
</div>

<script>
[Link]('load', function() {
// Revenue & User Growth Chart
const revenueCtx = [Link]('revenueChart');
if (revenueCtx) {
const historicalMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const predictedMonths = ['Jan (Pred)', 'Feb (Pred)', 'Mar (Pred)'];
// Next 3 months
const allMonths = [Link](predictedMonths);

const historicalRevenue = [680000, 720000, 750000, 780000, 820000,


790000, 830000, 860000, 820000, 840000, 870000, 847392];
// More realistic predictions: continued growth but with
fluctuations and slightly less aggressive slope
const predictedRevenueData = [865000, 875000, 890000]; // Example:
Q1 Next Year
const predictedRevenue = new Array([Link] -
1).fill(null).concat([historicalRevenue[[Link]-1]],
predictedRevenueData);

const historicalUsers = [18000, 19200, 20100, 21300, 22100, 21800,


22900, 23400, 23100, 23800, 24200, 24891];
// More realistic predictions: continued growth, some variation,
tapering slightly
const predictedUsersData = [25300, 25650, 25900]; // Example: Q1
Next Year
const predictedUsers = new Array([Link]-
1).fill(null).concat([historicalUsers[[Link]-1]],
predictedUsersData);

new Chart(revenueCtx, {
type: 'line',
data: {
labels: allMonths,
datasets: [{
label: 'Revenue ($) - Historical',
data: historicalRevenue,
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 3,
fill: false,
tension: 0.4,
pointBackgroundColor: '#3b82f6',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 6
}, {
label: 'Revenue ($) - Predicted',
data: predictedRevenue,
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.05)',
borderWidth: 3,
borderDash: [5, 5],
fill: true,
tension: 0.4,
pointBackgroundColor: '#3b82f6',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 6,
pointStyle: 'dash'
}, {
label: 'Active Users - Historical',
data: historicalUsers,
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
borderWidth: 3,
fill: false,
tension: 0.4,
pointBackgroundColor: '#10b981',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 6,
yAxisID: 'y1'
}, {
label: 'Active Users - Predicted',
data: predictedUsers,
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.05)',
borderWidth: 3,
borderDash: [5, 5],
fill: true,
tension: 0.4,
pointBackgroundColor: '#10b981',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 6,
pointStyle: 'dash',
yAxisID: 'y1'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
intersect: false,
mode: 'index'
},
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
},
tooltip: {
callbacks: {
label: function(context) {
let label = [Link] || '';
if (label) {
label += ': ';
}
if ([Link].y !== null) {
if ([Link] === 0 ||
[Link] === 1) { // Revenue
label += new [Link]('en-
US', { style: 'currency', currency: 'USD', minimumFractionDigits:
0 }).format([Link].y);
} else { // Users
label += new
[Link]('en-US').format([Link].y);
}
}
return label;
}
}
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
grid: {
color: 'rgba(226, 232, 240, 0.5)'
},
ticks: {
callback: function(value) {
return '$' + (value / 1000).toFixed(0) +
'K';
}
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
grid: {
drawOnChartArea: false,
},
ticks: {
callback: function(value) {
return (value / 1000).toFixed(0) + 'K';
}
}
},
x: {
grid: {
color: 'rgba(226, 232, 240, 0.5)'
}
}
}
}
});
}

// Traffic Sources Doughnut Chart


const trafficCtx = [Link]('trafficChart');
if (trafficCtx) {
new Chart(trafficCtx, {
type: 'doughnut',
data: {
labels: ['Organic Search', 'Direct', 'Social Media', 'Paid
Ads', 'Email', 'Referral'],
datasets: [{
data: [35, 25, 15, 12, 8, 5],
backgroundColor: [
'#3b82f6',
'#10b981',
'#8b5cf6',
'#f59e0b',
'#ef4444',
'#06b6d4'
],
borderWidth: 0,
hoverOffset: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20,
usePointStyle: true
}
}
},
cutout: '60%'
}
});
}

// Customer Acquisition Funnel


const funnelCtx = [Link]('funnelChart');
if (funnelCtx) {
new Chart(funnelCtx, {
type: 'bar',
data: {
labels: ['Visitors', 'Sign-ups', 'Trial Users', 'Paid
Users', 'Premium'],
datasets: [{
label: 'Conversion Funnel',
data: [125000, 8750, 4375, 1531, 459],
backgroundColor: [
'rgba(59, 130, 246, 0.8)',
'rgba(16, 185, 129, 0.8)',
'rgba(139, 92, 246, 0.8)',
'rgba(245, 158, 11, 0.8)',
'rgba(239, 68, 68, 0.8)'
],
borderColor: [
'#3b82f6',
'#10b981',
'#8b5cf6',
'#f59e0b',
'#ef4444'
],
borderWidth: 2,
borderRadius: 8,
borderSkipped: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(226, 232, 240, 0.5)'
},
ticks: {
callback: function(value) {
return (value / 1000).toFixed(0) + 'K';
}
}
},
x: {
grid: {
display: false
}
}
}
}
});
}

// Feature Usage Polar Area Chart


const featureCtx = [Link]('featureChart');
if (featureCtx) {
new Chart(featureCtx, {
type: 'polarArea',
data: {
labels: ['Analytics', 'Automation', 'Integrations',
'Reporting', 'Collaboration', 'API Access'],
datasets: [{
data: [85, 72, 68, 91, 56, 43],
backgroundColor: [
'rgba(59, 130, 246, 0.7)',
'rgba(16, 185, 129, 0.7)',
'rgba(139, 92, 246, 0.7)',
'rgba(245, 158, 11, 0.7)',
'rgba(239, 68, 68, 0.7)',
'rgba(6, 182, 212, 0.7)'
],
borderColor: [
'#3b82f6',
'#10b981',
'#8b5cf6',
'#f59e0b',
'#ef4444',
'#06b6d4'
],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 10,
usePointStyle: true
}
}
},
scales: {
r: {
beginAtZero: true,
max: 100,
grid: {
color: 'rgba(226, 232, 240, 0.5)'
}
}
}
}
});
}

// Performance Overview Chart


const performanceCtx = [Link]('performanceChart');
if (performanceCtx) {
new Chart(performanceCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'New Customers',
data: [450, 520, 480, 610, 580, 540, 620, 680, 590,
640, 720, 780],
backgroundColor: 'rgba(59, 130, 246, 0.8)',
borderColor: '#3b82f6',
borderWidth: 2,
borderRadius: 8
}, {
label: 'Churned Customers',
data: [120, 140, 110, 160, 150, 130, 145, 135, 125,
140, 155, 165],
backgroundColor: 'rgba(239, 68, 68, 0.8)',
borderColor: '#ef4444',
borderWidth: 2,
borderRadius: 8
}, {
label: 'Net Growth',
data: [330, 380, 370, 450, 430, 410, 475, 545, 465,
500, 565, 615],
backgroundColor: 'rgba(16, 185, 129, 0.8)',
borderColor: '#10b981',
borderWidth: 2,
borderRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(226, 232, 240, 0.5)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
}

// Add interactive animations


[Link]('.metric-value').forEach(element => {
[Link]('pulse');
});

// Simulate real-time updates


setInterval(() => {
const metrics = [Link]('.metric-value');
if ([Link] > 0) {
const randomMetric = metrics[[Link]([Link]() *
[Link])];
[Link] = 'scale(1.05)';
[Link] = 'transform 0.2s ease';
setTimeout(() => {
[Link] = 'scale(1)';
}, 200);
}
}, 5000);
});
</script>
</body>
</html>

You might also like