Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Phân Tích Bảo Hiểm Bảo Việt</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
h1 {
text-align: center;
color: white;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.card {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 15px;
color: #667eea;
border-bottom: 3px solid #667eea;
padding-bottom: 10px;
}
.stat-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
margin-bottom: 10px;
}
.stat-number {
font-size: 2em;
font-weight: bold;
}
.product-list {
list-style: none;
}
.product-item {
padding: 12px;
margin: 8px 0;
background: #f8f9fa;
border-left: 4px solid #667eea;
border-radius: 5px;
transition: all 0.3s ease;
}
.product-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.product-name {
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.product-type {
font-size: 0.85em;
color: #666;
}
.chart-container {
position: relative;
height: 300px;
margin-top: 20px;
}
.large-card {
grid-column: span 2;
}
@media (max-width: 768px) {
.large-card {
grid-column: span 1;
}
h1 {
font-size: 1.8em;
}
}
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8em;
font-weight: bold;
margin-left: 10px;
}
.badge-personal {
background: #28a745;
color: white;
}
.badge-business {
background: #007bff;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>📊 Dashboard Phân Tích Bảo Hiểm Bảo Việt</h1>
<div class="dashboard-grid">
<div class="card">
<div class="card-header">📈 Tổng Quan</div>
<div class="stat-box">
<div>
<div>Tổng Sản Phẩm</div>
<div class="stat-number">12</div>
</div>
<div style="font-size: 3em;">🛡️</div>
</div>
<div class="stat-box" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<div>
<div>Phi Nhân Thọ</div>
<div class="stat-number">8</div>
</div>
<div style="font-size: 3em;">🚗</div>
</div>
<div class="stat-box" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<div>
<div>Nhân Thọ</div>
<div class="stat-number">4</div>
</div>
<div style="font-size: 3em;">👨👩👧👦</div>
</div>
</div>
<div class="card">
<div class="card-header">🏢 Bảo Hiểm Phi Nhân Thọ - Cá Nhân</div>
<ul class="product-list">
<li class="product-item">
<div class="product-name">⛳ Bảo hiểm Golf<span class="badge badge-personal">Cá nhân</span></div>
<div class="product-type">Bảo vệ cho người chơi golf</div>
</li>
<li class="product-item">
<div class="product-name">🚗 Bảo hiểm Ô tô<span class="badge badge-personal">Cá nhân</span></div>
<div class="product-type">TNDS ô tô & bảo vệ xe</div>
</li>
<li class="product-item">
<div class="product-name">👤 Bảo hiểm Kết hợp Con người<span class="badge badge-personal">Cá nhân</span></div>
<div class="product-type">Bảo vệ toàn diện</div>
</li>
<li class="product-item">
<div class="product-name">✈️ Bảo hiểm Du lịch Quốc tế<span class="badge badge-personal">Cá nhân</span></div>
<div class="product-type">Hỗ trợ du lịch nước ngoài</div>
</li>
</ul>
</div>
<div class="card">
<div class="card-header">🏭 Bảo Hiểm Phi Nhân Thọ - Doanh Nghiệp</div>
<ul class="product-list">
<li class="product-item">
<div class="product-name">📦 Bảo hiểm Hàng hóa<span class="badge badge-business">Doanh nghiệp</span></div>
<div class="product-type">Vận chuyển hàng hóa</div>
</li>
<li class="product-item">
<div class="product-name">🔧 Bảo hiểm Kỹ thuật<span class="badge badge-business">Doanh nghiệp</span></div>
<div class="product-type">Công trình & thiết bị</div>
</li>
<li class="product-item">
<div class="product-name">🏢 Bảo hiểm Tài sản<span class="badge badge-business">Doanh nghiệp</span></div>
<div class="product-type">Bảo vệ tài sản DN</div>
</li>
<li class="product-item">
<div class="product-name">🌐 Bảo hiểm Rủi ro Hỗn hợp<span class="badge badge-business">Doanh nghiệp</span></div>
<div class="product-type">Bảo vệ đa diện</div>
</li>
</ul>
</div>
<div class="card large-card">
<div class="card-header">📊 Phân Bố Sản Phẩm Theo Loại</div>
<div class="chart-container">
<canvas id="productChart"></canvas>
</div>
</div>
<div class="card">
<div class="card-header">💼 Bảo Hiểm Nhân Thọ - Sản Phẩm Chính</div>
<ul class="product-list">
<li class="product-item">
<div class="product-name">🛡️ An Phát Cát Tường</div>
<div class="product-type">Sản phẩm bảo vệ</div>
</li>
<li class="product-item">
<div class="product-name">💰 An Khang Hạnh Phúc</div>
<div class="product-type">Sản phẩm đầu tư</div>
</li>
<li class="product-item">
<div class="product-name">🎓 An Khoa Trạng Nguyên</div>
<div class="product-type">Sản phẩm tích lũy</div>
</li>
<li class="product-item">
<div class="product-name">👴 Hưu Trí Vững Nghiệp</div>
<div class="product-type">Dành cho doanh nghiệp</div>
</li>
</ul>
</div>
<div class="card">
<div class="card-header">🎯 Phân Loại Theo Đối Tượng</div>
<div class="chart-container">
<canvas id="targetChart"></canvas>
</div>
</div>
</div>
</div>
<script>
// Biểu đồ phân bố sản phẩm
const ctx1 = document.getElementById('productChart').getContext('2d');
new Chart(ctx1, {
type: 'doughnut',
data: {
labels: ['Phi Nhân Thọ - Cá Nhân', 'Phi Nhân Thọ - DN', 'Nhân Thọ'],
datasets: [{
data: [4, 4, 4],
backgroundColor: [
'#667eea',
'#764ba2',
'#f093fb'
],
borderWidth: 3,
borderColor: '#fff'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 15,
font: { size: 12 }
}
}
}
}
});
// Biểu đồ đối tượng khách hàng
const ctx2 = document.getElementById('targetChart').getContext('2d');
new Chart(ctx2, {
type: 'bar',
data: {
labels: ['Cá Nhân', 'Doanh Nghiệp'],
datasets: [{
label: 'Số lượng sản phẩm',
data: [8, 4],
backgroundColor: [
'rgba(102, 126, 234, 0.8)',
'rgba(118, 75, 162, 0.8)'
],
borderColor: [
'rgba(102, 126, 234, 1)',
'rgba(118, 75, 162, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: { stepSize: 2 }
}
},
plugins: {
legend: { display: false }
}
}
});
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
2
Domains
83KB
Transfer Size
215KB
Content Size
1,071.0ms
Dom Content Loaded
1,272.0ms
First Paint
1,071.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...