wangyuan/moboos-ad-report
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: redesign with modern gradient UI and summary cards

Browse Source
This commit is contained in:
王源
2026-08-27 18:05:29 +08:00
parent 61e5e51ffa
commit 172698f6cb
1 changed files with 344 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+344 -150
View File
@@ -8,197 +8,319 @@
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f7fa;
color: #333;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #2d3748;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 30px 24px;
}
.header {
text-align: center;
padding: 30px 0 20px;
padding: 40px 0 35px;
}
.header h1 {
font-size: 24px;
color: #1a1a2e;
font-size: 28px;
font-weight: 700;
color: #fff;
letter-spacing: -0.5px;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header p {
color: #666;
color: rgba(255,255,255,0.8);
font-size: 14px;
}
/* Summary Cards */
.summary-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.summary-card {
background: #fff;
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.summary-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.summary-card .label {
font-size: 12px;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.summary-card .value {
font-size: 26px;
font-weight: 700;
color: #1e293b;
margin-top: 6px;
}
.summary-card .sub {
font-size: 12px;
color: #64748b;
margin-top: 4px;
}
/* Controls */
.controls {
max-width: 1400px;
margin: 0 auto 20px;
background: #fff;
border-radius: 16px;
padding: 16px 24px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
display: flex;
gap: 12px;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.control-group {
display: flex;
align-items: center;
gap: 8px;
}
.controls label {
font-size: 13px;
color: #555;
color: #64748b;
font-weight: 500;
}
.controls select {
padding: 6px 12px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 8px 14px;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
font-size: 13px;
background: #fff;
background: #f8fafc;
cursor: pointer;
color: #334155;
font-weight: 500;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.controls select:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
/* Charts */
.charts-grid {
max-width: 1400px;
margin: 0 auto 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.chart-card {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.chart-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.chart-card h3 {
font-size: 14px;
color: #555;
margin-bottom: 12px;
color: #475569;
margin-bottom: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.chart-card h3::before {
content: '';
display: inline-block;
width: 4px;
height: 16px;
border-radius: 2px;
background: linear-gradient(135deg, #667eea, #764ba2);
}
.chart-card canvas {
width: 100% !important;
height: 250px !important;
height: 240px !important;
}
/* Table */
.table-section {
max-width: 1400px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
overflow-x: auto;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
}
.table-section h2 {
font-size: 16px;
color: #1a1a2e;
margin-bottom: 15px;
color: #1e293b;
margin-bottom: 16px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.table-section h2::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
border-radius: 2px;
background: linear-gradient(135deg, #667eea, #764ba2);
}
.table-wrapper {
overflow-x: auto;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
font-size: 13px;
}
thead {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}
th {
background: #f0f2f5;
padding: 10px 8px;
padding: 12px 14px;
text-align: left;
font-weight: 600;
color: #555;
color: #475569;
white-space: nowrap;
position: sticky;
top: 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
border-bottom: 2px solid #e2e8f0;
}
td {
padding: 8px;
border-bottom: 1px solid #f0f2f5;
padding: 11px 14px;
border-bottom: 1px solid #f1f5f9;
white-space: nowrap;
color: #334155;
}
tr:last-child td {
border-bottom: none;
}
tr:hover td {
background: #f8f9fb;
background: #f8fafc;
}
.pkg-tag {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
background: #e8f4fd;
color: #1976d2;
font-weight: 500;
background: linear-gradient(135deg, #eef2ff, #e0e7ff);
color: #4338ca;
border: 1px solid #c7d2fe;
}
.metric-up { color: #4caf50; }
.metric-down { color: #f44336; }
@media (max-width: 900px) {
.charts-grid { grid-template-columns: 1fr; }
.num-cell {
font-variant-numeric: tabular-nums;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 12px;
}
.updated-time {
text-align: center;
color: #999;
color: rgba(255,255,255,0.7);
font-size: 12px;
margin-top: 20px;
margin-top: 24px;
padding-bottom: 20px;
}
@media (max-width: 900px) {
.charts-grid { grid-template-columns: 1fr; }
.summary-row { grid-template-columns: repeat(2, 1fr); }
.container { padding: 16px; }
.header h1 { font-size: 22px; }
}
@media (max-width: 500px) {
.summary-row { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="header">
<h1>Moboos 广告投放数据报告</h1>
<p>数据范围：每日自动更新</p>
</div>
<div class="controls">
<label>筛选广告主：</label>
<select id="pkgFilter">
<option value="all">全部</option>
</select>
<label style="margin-left:12px;">指标：</label>
<select id="metricFilter">
<option value="impressions">展示</option>
<option value="clicks">点击</option>
<option value="conversions">转化</option>
<option value="ecpm">eCPM</option>
<option value="cpc">CPC</option>
<option value="ctr">CTR</option>
<option value="ivr">IVR</option>
<option value="cvr">CVR</option>
</select>
</div>
<div class="charts-grid">
<div class="chart-card">
<h3>展示量趋势</h3>
<canvas id="chartImpressions"></canvas>
<div class="container">
<div class="header">
<h1>Moboos 广告投放数据报告</h1>
<p>数据概览与趋势分析</p>
</div>
<div class="chart-card">
<h3>点击量趋势</h3>
<canvas id="chartClicks"></canvas>
</div>
<div class="chart-card">
<h3>转化量趋势</h3>
<canvas id="chartConversions"></canvas>
</div>
<div class="chart-card">
<h3>eCPM 趋势</h3>
<canvas id="chartEcpm"></canvas>
</div>
</div>
<div class="table-section">
<h2>明细数据</h2>
<table id="dataTable">
<thead>
<tr>
<th>日期</th>
<th>广告单元</th>
<th>Pkg</th>
<th>展示</th>
<th>点击</th>
<th>转化</th>
<th>eCPM</th>
<th>CPC</th>
<th>CTR</th>
<th>IVR</th>
<th>CVR</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="summary-row" id="summaryRow"></div>
<div class="updated-time" id="updatedTime"></div>
<div class="controls">
<div class="control-group">
<label>广告主</label>
<select id="pkgFilter">
<option value="all">全部</option>
</select>
</div>
<div class="control-group">
<label>日期范围</label>
<select id="dateFilter">
<option value="all">全部日期</option>
</select>
</div>
</div>
<div class="charts-grid">
<div class="chart-card">
<h3>展示量趋势</h3>
<canvas id="chartImpressions"></canvas>
</div>
<div class="chart-card">
<h3>点击量趋势</h3>
<canvas id="chartClicks"></canvas>
</div>
<div class="chart-card">
<h3>转化量趋势</h3>
<canvas id="chartConversions"></canvas>
</div>
<div class="chart-card">
<h3>eCPM 趋势</h3>
<canvas id="chartEcpm"></canvas>
</div>
</div>
<div class="table-section">
<h2>明细数据</h2>
<div class="table-wrapper">
<table id="dataTable">
<thead>
<tr>
<th>日期</th>
<th>广告单元</th>
<th>Pkg</th>
<th>展示</th>
<th>点击</th>
<th>转化</th>
<th>eCPM</th>
<th>CPC</th>
<th>CTR</th>
<th>IVR</th>
<th>CVR</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="updated-time" id="updatedTime"></div>
</div>
<script>
const COLORS = [
'#1976d2','#e53935','#43a047','#fb8c00','#8e24aa',
'#00acc1','#6d4c41','#546e7a','#d81b60','#00897b'
'#667eea','#f56565','#48bb78','#ed8936','#9f7aea',
'#38b2ac','#e53e3e','#4299e1','#d69e2e','#ed64a6'
];
let rawData = [];
@@ -215,14 +337,14 @@
}
function init() {
populateFilter();
populateFilters();
renderAll();
document.getElementById('pkgFilter').addEventListener('change', renderAll);
document.getElementById('metricFilter').addEventListener('change', renderAll);
document.getElementById('updatedTime').textContent = '数据更新时间：' + new Date().toLocaleString('zh-CN');
document.getElementById('dateFilter').addEventListener('change', renderAll);
document.getElementById('updatedTime').textContent = '最后刷新：' + new Date().toLocaleString('zh-CN');
}
function populateFilter() {
function populateFilters() {
const pkgs = [...new Set(rawData.map(d => d.pkg))];
const sel = document.getElementById('pkgFilter');
pkgs.forEach(p => {
@@ -231,28 +353,79 @@
opt.textContent = p.split('.').pop();
sel.appendChild(opt);
});
const dates = [...new Set(rawData.map(d => d.date))].sort();
const dateSel = document.getElementById('dateFilter');
dates.forEach(d => {
const opt = document.createElement('option');
opt.value = d;
opt.textContent = d.slice(5);
dateSel.appendChild(opt);
});
}
function getFilteredData() {
let data = rawData;
const pkg = document.getElementById('pkgFilter').value;
if (pkg === 'all') return rawData;
return rawData.filter(d => d.pkg === pkg);
const date = document.getElementById('dateFilter').value;
if (pkg !== 'all') data = data.filter(d => d.pkg === pkg);
if (date !== 'all') data = data.filter(d => d.date === date);
return data;
}
function renderAll() {
const data = getFilteredData();
renderSummary(data);
renderCharts();
renderTable();
renderTable(data);
}
function renderSummary(data) {
const totalImp = data.reduce((s, d) => s + d.impressions, 0);
const totalClk = data.reduce((s, d) => s + d.clicks, 0);
const totalConv = data.reduce((s, d) => s + d.conversions, 0);
const avgEcpm = data.length ? (data.reduce((s, d) => s + d.ecpm, 0) / data.length) : 0;
const avgCtr = data.length ? (data.reduce((s, d) => s + d.ctr, 0) / data.length) : 0;
document.getElementById('summaryRow').innerHTML = `
<div class="summary-card">
<div class="label">总展示</div>
<div class="value">${totalImp.toLocaleString()}</div>
<div class="sub">${data.length} 条记录</div>
</div>
<div class="summary-card">
<div class="label">总点击</div>
<div class="value">${totalClk.toLocaleString()}</div>
<div class="sub">整体 CTR ${(totalClk/Math.max(totalImp,1)*100).toFixed(2)}%</div>
</div>
<div class="summary-card">
<div class="label">总转化</div>
<div class="value">${totalConv.toLocaleString()}</div>
<div class="sub">整体 CVR ${(totalConv/Math.max(totalClk,1)*100).toFixed(2)}%</div>
</div>
<div class="summary-card">
<div class="label">平均 eCPM</div>
<div class="value">${avgEcpm.toFixed(3)}</div>
<div class="sub">均值</div>
</div>
<div class="summary-card">
<div class="label">平均 CTR</div>
<div class="value">${(avgCtr*100).toFixed(2)}%</div>
<div class="sub">均值</div>
</div>
`;
}
function renderCharts() {
const data = getFilteredData();
const dates = [...new Set(data.map(d => d.date))].sort();
const pkgs = [...new Set(data.map(d => d.pkg))];
const pkg = document.getElementById('pkgFilter').value;
const chartData = pkg === 'all' ? rawData : rawData.filter(d => d.pkg === pkg);
const dates = [...new Set(chartData.map(d => d.date))].sort();
const pkgs = [...new Set(chartData.map(d => d.pkg))];
renderChart('chartImpressions', dates, pkgs, data, 'impressions');
renderChart('chartClicks', dates, pkgs, data, 'clicks');
renderChart('chartConversions', dates, pkgs, data, 'conversions');
renderChart('chartEcpm', dates, pkgs, data, 'ecpm');
renderChart('chartImpressions', dates, pkgs, chartData, 'impressions');
renderChart('chartClicks', dates, pkgs, chartData, 'clicks');
renderChart('chartConversions', dates, pkgs, chartData, 'conversions');
renderChart('chartEcpm', dates, pkgs, chartData, 'ecpm');
}
function renderChart(canvasId, dates, pkgs, data, metric) {
@@ -268,11 +441,14 @@
label: pkg.split('.').pop(),
data: values,
borderColor: COLORS[i % COLORS.length],
backgroundColor: COLORS[i % COLORS.length] + '20',
borderWidth: 2,
pointRadius: 3,
tension: 0.3,
fill: false
backgroundColor: COLORS[i % COLORS.length] + '15',
borderWidth: 2.5,
pointRadius: 4,
pointBackgroundColor: '#fff',
pointBorderWidth: 2,
pointHoverRadius: 6,
tension: 0.4,
fill: true
};
});
@@ -283,34 +459,52 @@
options: {
responsive: true,
maintainAspectRatio: false,
interaction: { mode: 'index', intersect: false },
plugins: {
legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } }
legend: {
position: 'bottom',
labels: { boxWidth: 10, padding: 15, font: { size: 11 }, usePointStyle: true }
},
tooltip: {
backgroundColor: 'rgba(30,41,59,0.95)',
titleFont: { size: 12 },
bodyFont: { size: 12 },
padding: 12,
cornerRadius: 8,
displayColors: true
}
},
scales: {
x: { grid: { display: false } },
y: { beginAtZero: true, grid: { color: '#f0f0f0' } }
x: {
grid: { display: false },
ticks: { font: { size: 11 }, color: '#94a3b8' }
},
y: {
beginAtZero: true,
grid: { color: '#f1f5f9', drawBorder: false },
ticks: { font: { size: 11 }, color: '#94a3b8' }
}
}
}
});
}
function renderTable() {
const data = getFilteredData();
function renderTable(data) {
const sorted = [...data].sort((a, b) => b.date.localeCompare(a.date) || a.pkg.localeCompare(b.pkg));
const tbody = document.querySelector('#dataTable tbody');
tbody.innerHTML = sorted.map(d => `
<tr>
<td>${d.date}</td>
<td>${d.ad_unit}</td>
<td><span class="pkg-tag">${d.pkg}</span></td>
<td>${d.impressions.toLocaleString()}</td>
<td>${d.clicks.toLocaleString()}</td>
<td>${d.conversions}</td>
<td>${d.ecpm.toFixed(3)}</td>
<td>${d.cpc.toFixed(3)}</td>
<td>${(d.ctr * 100).toFixed(2)}%</td>
<td>${(d.ivr * 100).toFixed(3)}%</td>
<td>${(d.cvr * 100).toFixed(2)}%</td>
<td>${d.date.slice(5)}</td>
<td style="font-weight:500">${d.ad_unit}</td>
<td><span class="pkg-tag">${d.pkg.split('.').pop()}</span></td>
<td class="num-cell">${d.impressions.toLocaleString()}</td>
<td class="num-cell">${d.clicks.toLocaleString()}</td>
<td class="num-cell">${d.conversions}</td>
<td class="num-cell">${d.ecpm.toFixed(3)}</td>
<td class="num-cell">${d.cpc.toFixed(3)}</td>
<td class="num-cell">${(d.ctr * 100).toFixed(2)}%</td>
<td class="num-cell">${(d.ivr * 100).toFixed(3)}%</td>
<td class="num-cell">${(d.cvr * 100).toFixed(2)}%</td>
</tr>
`).join('');
}