caoxiaoqi/EG-Nagwa-daily-report
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure summary: highlight spend/install + budget row, move Daily Detail up

Browse Source
This commit is contained in:
SHAREit
2026-09-09 15:33:55 +08:00
parent be8689eee6
commit b0fc373219
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+24 -14
View File
@@ -11,8 +11,12 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
.container { max-width: 1200px; margin: 0 auto; }
h1 { font-size: 22px; color: #1a1a2e; margin-bottom: 4px; }
.subtitle { color: #666; font-size: 13px; margin-bottom: 24px; }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.summary-cards.primary { margin-bottom: 14px; }
.summary-cards.secondary { margin-bottom: 28px; }
.card { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.card.key { background: linear-gradient(135deg, #fff 0%, #f5f7ff 100%); box-shadow: 0 2px 10px rgba(59,130,246,0.15); border: 1px solid #e5ecff; }
.card.key .value { font-size: 26px; }
.card .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.card .value { font-size: 20px; font-weight: 700; margin-top: 4px; }
.card .value.blue { color: #3b82f6; }
@@ -38,7 +42,15 @@ tr:hover td { background: #f5f9ff; }
<div class="container">
<h1>EG Nagwa Daily Report</h1>
<p class="subtitle">Egypt &middot; August 2026 &middot; Install / Enroll Session / Revenue</p>
<div class="summary-cards" id="summary"></div>
<div class="summary-cards primary" id="summaryPrimary"></div>
<div class="summary-cards secondary" id="summarySecondary"></div>
<div class="table-wrap">
<h3>Daily Detail</h3>
<table>
<thead><tr><th>Date</th><th>Install</th><th>Spend</th><th>Enroll Session</th><th>Enroll %</th></tr></thead>
<tbody id="tbody"></tbody>
</table>
</div>
<div class="charts">
<div class="chart-box full">
<h3>Daily Install vs Enroll Session</h3>
@@ -53,13 +65,6 @@ tr:hover td { background: #f5f9ff; }
<canvas id="chartSpend" height="90"></canvas>
</div>
</div>
<div class="table-wrap">
<h3>Daily Detail</h3>
<table>
<thead><tr><th>Date</th><th>Install</th><th>Spend</th><th>Enroll Session</th><th>Enroll %</th></tr></thead>
<tbody id="tbody"></tbody>
</table>
</div>
<p class="footer" id="foot"></p>
</div>
<script>
@@ -85,14 +90,19 @@ fetch('data.json?t='+Date.now()).then(r=>r.json()).then(({meta, daily})=>{
if (sub) sub.innerHTML = 'Egypt &middot; ' + title + ' &middot; Install / Enroll Session / Revenue';
}
document.getElementById('summary').innerHTML = `
<div class="card"><div class="label">Total Install (MTD)</div><div class="value blue">${totalInstall.toLocaleString()}</div></div>
<div class="card"><div class="label">Total Enroll Session</div><div class="value green">${totalEnroll.toLocaleString()}</div></div>
<div class="card"><div class="label">Avg Enroll Rate</div><div class="value orange">${avgRate}%</div></div>
<div class="card"><div class="label">Total Spend</div><div class="value purple">$${totalSpend.toFixed(2)}</div></div>
// 第一行：重点指标 —— Total Spend / Total Install + 预算相关
document.getElementById('summaryPrimary').innerHTML = `
<div class="card key"><div class="label">Total Spend</div><div class="value purple">$${totalSpend.toFixed(2)}</div></div>
<div class="card key"><div class="label">Total Install (MTD)</div><div class="value blue">${totalInstall.toLocaleString()}</div></div>
<div class="card"><div class="label">Budget</div><div class="value">$${fmt(budget)}</div></div>
<div class="card"><div class="label">Budget Left</div><div class="value green">$${fmt(meta.left)}</div></div>
<div class="card"><div class="label">Budget Used</div><div class="value orange">${meta.spend_pct||'-'}</div></div>
`;
// 第二行：事件率、推荐日安装、总注册会话
document.getElementById('summarySecondary').innerHTML = `
<div class="card"><div class="label">Total Enroll Session</div><div class="value green">${totalEnroll.toLocaleString()}</div></div>
<div class="card"><div class="label">Avg Enroll Rate</div><div class="value orange">${avgRate}%</div></div>
<div class="card"><div class="label">Rec. Daily Install</div><div class="value blue">${fmt(meta.rec_daily_install)}</div></div>
`;