Hugging Face's logo

Spaces:
adnandi
/
trend-summarizer
Configuration error

App Files Community
trend-summarizer / dashboard_app /static /executive_brief.html
adnandi's picture
adnandi
Deploy
7136657
Raw
History Blame Contribute Delete
16.2 kB
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>TrendAI - Weekly Industry Intelligence Report</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Hanken+Grotesk:wght@600;700&amp;family=JetBrains+Mono:wght@500&amp;display=swap" rel="stylesheet"/>
<!-- Icons -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="/static/style.css" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"sustainability-green": "#22C55E",
"error": "#ba1a1a",
"on-secondary": "#ffffff",
"tertiary-container": "#002113",
"text-muted": "#64748B",
"on-tertiary-fixed-variant": "#005236",
"on-primary-fixed-variant": "#3f465c",
"secondary-container": "#39b8fd",
"primary-container": "#131b2e",
"surface-variant": "#e0e3e5",
"on-error": "#ffffff",
"error-container": "#ffdad6",
"on-background": "#191c1e",
"secondary-fixed-dim": "#89ceff",
"primary-fixed-dim": "#bec6e0",
"on-secondary-container": "#004666",
"on-tertiary": "#ffffff",
"surface-container-highest": "#e0e3e5",
"inverse-primary": "#bec6e0",
"secondary-fixed": "#c9e6ff",
"on-primary-container": "#7c839b",
"on-error-container": "#93000a",
"surface-container-low": "#f2f4f6",
"secondary": "#006591",
"tertiary-fixed": "#6ffbbe",
"behavior-orange": "#F59E0B",
"on-primary": "#ffffff",
"surface-dim": "#d8dadc",
"inverse-surface": "#2d3133",
"background": "#f7f9fb",
"primary": "#000000",
"on-secondary-fixed-variant": "#004c6e",
"tertiary": "#000000",
"on-surface": "#191c1e",
"surface-container-lowest": "#ffffff",
"on-surface-variant": "#45464d",
"on-primary-fixed": "#131b2e",
"border-subtle": "#E2E8F0",
"marketing-purple": "#8B5CF6",
"on-tertiary-container": "#009668",
"inverse-on-surface": "#eff1f3",
"surface-tint": "#565e74",
"outline-variant": "#c6c6cd",
"tertiary-fixed-dim": "#4edea3",
"primary-fixed": "#dae2fd",
"surface-container-high": "#e6e8ea",
"surface-bright": "#f7f9fb",
"surface": "#f7f9fb",
"outline": "#76777d",
"surface-container": "#eceef0",
"on-tertiary-fixed": "#002113",
"on-secondary-fixed": "#001e2f"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"card-padding": "24px",
"stack-md": "16px",
"container-max": "1440px",
"stack-lg": "32px",
"stack-sm": "8px",
"gutter": "24px",
"margin-page": "40px"
},
"fontFamily": {
"headline-md": ["Hanken Grotesk"],
"label-md": ["JetBrains Mono"],
"body-sm": ["Inter"],
"body-lg": ["Inter"],
"body-md": ["Inter"],
"display-lg": ["Hanken Grotesk"],
"headline-lg-mobile": ["Hanken Grotesk"],
"label-sm": ["JetBrains Mono"],
"headline-lg": ["Hanken Grotesk"]
},
"fontSize": {
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "fontWeight": "500"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"label-sm": ["10px", {"lineHeight": "14px", "fontWeight": "500"}],
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}]
}
}
}
}
</script>
<style>
@media print {
.no-print { display: none !important; }
body { background: white !important; }
.a4-card {
box-shadow: none !important;
border: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.executive-accent {
border-left: 4px solid #006591;
}
.a4-card {
width: 210mm;
min-height: 297mm;
margin: 2rem auto;
background: #ffffff;
box-shadow: 0 0 40px rgba(0,0,0,0.05);
padding: 40px;
}
.chart-fade {
background: linear-gradient(180deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0) 100%);
}
</style>
</head>
<body class="bg-background text-on-background font-body-md">
<!-- Sidebar Navigation -->
<nav class="bg-surface-container-lowest dark:bg-primary-container h-screen w-64 fixed left-0 top-0 border-r border-border-subtle dark:border-outline-variant flex flex-col h-full p-stack-md no-print">
<div class="mb-stack-lg">
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed">TrendAI</h1>
<p class="font-body-md text-body-md text-text-muted">Executive Briefing</p>
</div>
<div class="flex-1 space-y-2">
<a class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface-container-low dark:hover:bg-surface-variant transition-colors text-text-muted dark:text-on-surface-variant font-body-md" href="/dashboard.html">
<span class="material-symbols-outlined">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface-container-low dark:hover:bg-surface-variant transition-colors text-text-muted dark:text-on-surface-variant font-body-md" href="/trend_discovery.html">
<span class="material-symbols-outlined">explore</span>
Trend Discovery
</a>
<a class="flex items-center gap-3 p-3 rounded-lg bg-surface-container-low dark:bg-surface-variant text-secondary dark:text-secondary-fixed font-bold font-body-md" href="/executive_brief.html">
<span class="material-symbols-outlined text-xl">description</span>
<span class="font-body-md">Executive Briefs</span>
</a>
<a class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface-container-low dark:hover:bg-surface-variant transition-colors text-text-muted dark:text-on-surface-variant font-body-md" href="/news_management.html">
<span class="material-symbols-outlined text-xl">newspaper</span>
<span class="font-body-md">Manajemen Berita</span>
</a>
<a id="nav-settings" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface-container-low dark:hover:bg-surface-variant transition-colors text-text-muted dark:text-on-surface-variant font-body-md" href="javascript:void(0)">
<span class="material-symbols-outlined text-xl">settings</span>
<span class="font-body-md">Settings</span>
</a>
</div>
</nav>
<!-- Main Content Area -->
<main class="ml-64 min-h-screen pb-stack-lg">
<!-- Top Navbar -->
<header class="bg-surface dark:bg-background border-b border-border-subtle dark:border-outline-variant flex justify-between items-center h-16 px-margin-page no-print sticky top-0 z-10">
<div class="flex items-center gap-4">
<h2 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed">TrendAI Summarizer</h2>
<div class="relative ml-4">
<select id="project-selector-brief" class="project-selector appearance-none bg-surface-container-low border border-border-subtle rounded-lg pl-4 pr-10 py-1.5 font-label-md text-label-md text-primary outline-none focus:ring-2 focus:ring-secondary transition-all">
<!-- Populated by JS -->
</select>
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-text-muted">expand_more</span>
</div>
</div>
<div class="flex items-center gap-6">
<button class="flex items-center gap-2 px-4 py-2 bg-secondary text-on-secondary rounded font-body-sm transition-transform active:scale-95 focus:ring-2 focus:ring-secondary" onclick="window.print()">
<span class="material-symbols-outlined text-[18px]">download</span>
Export PDF
</button>
</div>
</header>
<!-- Report Container (A4 Card) -->
<div class="a4-card border border-border-subtle relative overflow-hidden">
<!-- Decorative Branding Element -->
<div class="absolute top-0 right-0 w-32 h-32 opacity-5 pointer-events-none">
</div>
<!-- Report Header -->
<div class="flex justify-between items-start mb-12">
<div>
<span class="font-label-sm text-label-sm uppercase tracking-widest text-secondary block mb-2">Laporan Ringkasan Tren Industri</span>
<h1 class="font-display-lg text-display-lg text-primary leading-tight">Laporan Ringkasan Tren Industri</h1>
<div class="flex items-center gap-4 mt-4">
<div class="flex items-center gap-1 text-text-muted">
<span class="material-symbols-outlined text-[16px]">calendar_today</span>
<span id="report-period-dates" class="font-body-sm text-body-sm">Memuat periode data...</span>
</div>
<div class="flex items-center gap-1 text-text-muted">
<span class="material-symbols-outlined text-[16px]">verified</span>
<span class="font-body-sm text-body-sm">Dihasilkan oleh TrendAI</span>
</div>
</div>
</div>
<div class="text-right">
<p class="font-label-md text-label-md font-bold text-primary">LAPORAN RINGKASAN</p>
<p id="report-id-badge" class="font-label-sm text-label-sm text-text-muted">Memuat data...</p>
</div>
</div>
<!-- Summary Section -->
<section class="mb-stack-lg">
<div class="flex items-center gap-2 mb-stack-md border-b border-border-subtle pb-2">
<span class="material-symbols-outlined text-secondary">analytics</span>
<h2 class="font-headline-md text-headline-md text-primary">Ringkasan Tren Utama</h2>
</div>
<div class="grid grid-cols-3 gap-gutter mb-stack-md">
<div class="p-stack-md border border-border-subtle bg-surface-container-low rounded-lg">
<p class="font-label-sm text-label-sm text-text-muted uppercase mb-1">KATA KUNCI TERIDENTIFIKASI</p>
<p id="brief-sentiment-shift" class="font-headline-md text-headline-md text-sustainability-green">-</p>
<p id="brief-sentiment-desc" class="font-body-sm text-body-sm mt-2 text-on-surface-variant">Data dari seluruh artikel terproses.</p>
</div>
<div class="p-stack-md border border-border-subtle bg-surface-container-low rounded-lg">
<p class="font-label-sm text-label-sm text-text-muted uppercase mb-1">KATEGORI TREN</p>
<p id="brief-competitive-noise" class="font-headline-md text-headline-md text-behavior-orange">-</p>
<p id="brief-noise-desc" class="font-body-sm text-body-sm mt-2 text-on-surface-variant">Klaster AI yang terdeteksi.</p>
</div>
<div class="p-stack-md border border-border-subtle bg-surface-container-low rounded-lg">
<p class="font-label-sm text-label-sm text-text-muted uppercase mb-1">TOTAL ARTIKEL</p>
<p id="brief-market-volatility" class="font-headline-md text-headline-md text-primary">-</p>
<p id="brief-volatility-desc" class="font-body-sm text-body-sm mt-2 text-on-surface-variant">Semua sumber berita terindeks.</p>
</div>
</div>
<div id="brief-narrative-container" class="executive-accent p-stack-md bg-surface-container-lowest">
<p class="font-body-lg text-body-lg text-on-surface leading-relaxed">
Loading trend summaries...
</p>
</div>
</section>
<!-- Strategic Insights -->
<section class="mb-stack-lg">
<div class="flex items-center gap-2 mb-stack-md border-b border-border-subtle pb-2">
<span class="material-symbols-outlined text-secondary">psychology</span>
<h2 class="font-headline-md text-headline-md text-primary">Wawasan Strategis</h2>
</div>
<div id="brief-insights-list" class="space-y-stack-md">
<!-- Populated by JS -->
</div>
</section>
<!-- Recommendations -->
<section>
<div class="flex items-center gap-2 mb-stack-md border-b border-border-subtle pb-2">
<span class="material-symbols-outlined text-secondary">assignment_turned_in</span>
<h2 class="font-headline-md text-headline-md text-primary">Rekomendasi Strategis</h2>
</div>
<div class="grid grid-cols-12 gap-gutter">
<div id="brief-recommendations-list" class="col-span-7 space-y-4">
<!-- Populated by JS -->
</div>
<div class="col-span-5 bg-surface-container-low p-stack-md rounded-lg border border-border-subtle self-start">
<h4 class="font-label-md text-label-md font-bold mb-stack-md flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">trending_up</span>
DISTRIBUSI ARTIKEL PER KATEGORI
</h4>
<div id="brief-performance-chart-container" class="w-full relative">
<!-- SVG dynamically drawn -->
</div>
<div class="flex justify-between mt-3 font-label-sm text-label-sm text-text-muted border-t border-slate-200/50 pt-2">
<span>Kategori Tren</span>
<span>Distribusi</span>
<span>Artikel</span>
</div>
</div>
</div>
</section>
<!-- Footer for the A4 card -->
<div class="mt-20 pt-stack-md border-t border-border-subtle flex justify-between items-end">
<div>
<p class="font-label-sm text-label-sm text-text-muted">TrendAI Platform Analisis Tren</p>
<p class="font-label-sm text-label-sm text-text-muted">© <span id="copyright-year">2024</span> TrendAI Analytics. All Rights Reserved.</p>
</div>
<div class="text-right">
<p class="font-label-sm text-label-sm text-primary font-bold">LAPORAN DIGITAL</p>
<p class="font-label-sm text-label-sm text-text-muted">Dihasilkan oleh TrendAI</p>
</div>
</div>
</div>
<!-- External Footer (JSON defined) -->
</main>
<script src="/static/common.js?v=1.0.1"></script>
<script src="/static/executive_brief.js?v=1.0.1"></script>
</body></html>