BnParte / BnParte-prototype.html
Suryasticsai's picture
Update BnParte-prototype.html
7b6ceef verified
Raw
History Blame Contribute Delete
24.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>BnParte · Strategic BA Command Center | Bright Theme</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fefef7;
font-family: 'Segoe UI', 'Inter', 'Playfair Display', system-ui, serif;
padding: 32px 24px;
color: #2c3e2f;
}
.dashboard-container {
max-width: 1600px;
margin: 0 auto;
}
/* Hero header with bright empire style */
.brand {
background: linear-gradient(135deg, #ffffff, #fef7e6);
border-radius: 32px;
padding: 28px 32px;
margin-bottom: 32px;
border: 1px solid #e8dbbd;
box-shadow: 0 8px 20px rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
}
.brand::before {
content: "⚔️";
font-size: 120px;
position: absolute;
right: 20px;
bottom: -30px;
opacity: 0.05;
font-family: monospace;
}
.brand h1 {
font-size: 3rem;
font-weight: 800;
font-family: 'Playfair Display', serif;
letter-spacing: 2px;
background: linear-gradient(135deg, #b8860b, #d4af37);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
display: inline-block;
margin: 0;
}
.brand h1 small {
font-size: 1.2rem;
font-weight: 400;
color: #c9a03d;
letter-spacing: normal;
background: none;
-webkit-background-clip: unset;
color: #b8860b;
}
.brand .tagline {
font-size: 1rem;
font-style: italic;
color: #8b7355;
margin-top: 12px;
border-left: 4px solid #d4af37;
padding-left: 18px;
font-weight: 400;
}
.subhead {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
margin-top: 12px;
}
.napoleon-quote {
font-size: 0.8rem;
color: #a0896c;
font-style: italic;
border-right: 1px solid #e8dbbd;
padding-right: 16px;
}
/* KPI grid - bright cards */
.kpi-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 32px;
}
.kpi-card {
background: #ffffff;
border-radius: 24px;
padding: 18px 22px;
flex: 1 1 170px;
border-bottom: 3px solid #d4af37;
border-left: 1px solid #f0e8d8;
border-right: 1px solid #f0e8d8;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
transition: 0.2s;
}
.kpi-num {
font-size: 2.2rem;
font-weight: 800;
color: #b8860b;
font-family: monospace;
}
.kpi-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #8b7355;
margin-top: 6px;
}
/* dashboard grid - bright cards */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 24px;
margin-bottom: 48px;
}
.card {
background: #ffffff;
border-radius: 28px;
border: 1px solid #efe4d0;
overflow: hidden;
transition: all 0.2s;
box-shadow: 0 6px 14px rgba(0,0,0,0.03);
}
.card:hover {
box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
.card-header {
padding: 18px 22px 10px 22px;
border-bottom: 1px solid #f5efe2;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
.card-title {
font-weight: 700;
font-size: 1.2rem;
font-family: 'Playfair Display', serif;
display: flex;
align-items: center;
gap: 8px;
color: #2c5a4a;
}
.card-title span {
background: #fdf8ed;
border-radius: 30px;
font-size: 0.65rem;
padding: 2px 10px;
font-family: monospace;
color: #b8860b;
}
.info-icon {
color: #c9a03d;
font-size: 0.75rem;
cursor: help;
border-bottom: 1px dashed #e0cfaa;
}
.card-body {
padding: 16px 20px 22px;
}
/* insights list - bright */
.insight-list {
list-style: none;
}
.insight-list li {
padding: 10px 0;
border-bottom: 1px solid #f5efe2;
font-size: 0.85rem;
display: flex;
gap: 10px;
color: #3a5a4a;
}
.timeline-mock {
background: #fefcf7;
border-radius: 20px;
padding: 8px 0;
}
.timeline-row {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 0;
}
.timeline-date {
width: 85px;
font-size: 0.7rem;
font-weight: 600;
color: #b8860b;
}
.timeline-bar {
flex: 1;
height: 8px;
background: #efe4d0;
border-radius: 10px;
}
.bar-fill {
height: 100%;
background: #d4af37;
border-radius: 10px;
}
.kanban-row {
display: flex;
gap: 10px;
overflow-x: auto;
}
.kanban-col {
min-width: 130px;
background: #fefcf7;
border-radius: 20px;
padding: 8px;
border: 1px solid #f0e8d8;
}
.col-title {
font-size: 0.7rem;
font-weight: bold;
text-transform: uppercase;
color: #b8860b;
text-align: center;
}
.kanban-card {
background: #ffffff;
border-radius: 14px;
padding: 8px 10px;
margin-bottom: 8px;
font-size: 0.7rem;
border-left: 3px solid #d4af37;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
color: #3a5a4a;
}
.chatter-item {
padding: 8px 0;
border-bottom: 1px solid #f5efe2;
font-size: 0.8rem;
color: #3a5a4a;
}
.doc-badge {
background: #fef8ec;
border-radius: 30px;
padding: 4px 12px;
font-size: 0.7rem;
display: inline-block;
margin: 4px 4px 0 0;
color: #b8860b;
border: 1px solid #e8dbbd;
}
.query-example {
background: #fefcf7;
padding: 12px;
border-radius: 18px;
margin-top: 12px;
font-family: monospace;
font-size: 0.75rem;
border-left: 3px solid #d4af37;
color: #5a6e5a;
}
/* Documentation section bright */
.docs-section {
margin-top: 48px;
border-top: 2px solid #f0e8d8;
padding-top: 28px;
}
.section-title {
font-size: 1.6rem;
font-family: 'Playfair Display', serif;
font-weight: 700;
margin-bottom: 24px;
color: #b8860b;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.tool-card {
background: #ffffff;
border-radius: 24px;
border: 1px solid #efe4d0;
padding: 18px;
box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.tool-name {
font-weight: 800;
font-size: 1rem;
border-left: 4px solid #d4af37;
padding-left: 12px;
margin-bottom: 12px;
color: #2c5a4a;
}
.tool-desc {
color: #5a6e5a;
font-size: 0.85rem;
}
.sample-input {
background: #fefcf7;
border-radius: 16px;
padding: 10px;
font-size: 0.7rem;
font-family: monospace;
margin-top: 10px;
border: 1px solid #f0e8d8;
color: #6b7c5e;
}
footer {
text-align: center;
font-size: 0.75rem;
color: #8b9a7a;
margin-top: 60px;
border-top: 1px solid #f0e8d8;
padding-top: 28px;
}
hr {
border-color: #f0e8d8;
margin: 16px 0;
}
@media (max-width: 760px) {
body { padding: 16px; }
}
.badge-gold {
background: #fdf6e3;
border-radius: 40px;
padding: 2px 8px;
font-size: 0.65rem;
color: #b8860b;
border: 1px solid #e8dbbd;
}
button.mock {
background: none;
border: 1px solid #d4af37;
color: #b8860b;
border-radius: 30px;
padding: 4px 12px;
font-size: 0.7rem;
cursor: default;
}
</style>
</head>
<body>
<div class="dashboard-container">
<!-- BRAND with Napoleonic insignia - bright version -->
<div class="brand">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
<div>
<h1>BnParte <small>⚔️</small></h1>
<div class="tagline">“Command your strategy. Lead your stakeholders.”</div>
</div>
<div class="napoleon-quote">“Victory belongs to the most persevering.”<br>— Bonaparte</div>
</div>
<div class="subhead">
<div class="badge-gold">Strategic BA Intelligence Hub</div>
<div style="font-size:0.7rem; color:#8b9a7a;"><i>Empire-grade dashboard · Real-time analysis · RAG powered</i></div>
</div>
</div>
<!-- KPI metrics bright cards -->
<div class="kpi-grid">
<div class="kpi-card"><div class="kpi-num">54</div><div class="kpi-label">Requirements (BRS/SRS)</div></div>
<div class="kpi-card"><div class="kpi-num">21</div><div class="kpi-label">Open actions</div></div>
<div class="kpi-card"><div class="kpi-num">91%</div><div class="kpi-label">Stakeholder alignment</div></div>
<div class="kpi-card"><div class="kpi-num">7</div><div class="kpi-label">Active campaigns</div></div>
<div class="kpi-card"><div class="kpi-num">14</div><div class="kpi-label">Daily chatter feeds</div></div>
</div>
<!-- main dashboard output bright -->
<div class="dashboard-grid">
<!-- 1. analyzed points -->
<div class="card">
<div class="card-header">
<div class="card-title">🔍 Imperial Analysis <span>AI insights</span></div>
<div class="info-icon" title="Extracts risks & decisions from transcripts & leadership chats">⚜️</div>
</div>
<div class="card-body">
<ul class="insight-list">
<li>⚠️ Gap: “Payment gateway NFR missing in BRD v2.3” – flagged from leadership chat (Apr 05)</li>
<li>📈 Requirement churn +18% last sprint → risk of scope creep</li>
<li>💬 From Simran (PO): “Deadline Apr 28 is fixed – UAT must start Apr 20” → critical constraint</li>
<li>🧩 Duplicate requirement: “SSO login” in SRS and FRD (merge suggested)</li>
<li>✅ Decision log: stakeholders agreed to defer report module (source: meeting 04/03)</li>
</ul>
<div class="query-example">📡 RAG query: “Show me all Bonaparte-level decisions from last 2 weeks” → returns 3 strategic items with citations</div>
</div>
</div>
<!-- 2. timeline board -->
<div class="card">
<div class="card-header">
<div class="card-title">📅 Imperial Timeline <span>campaign milestones</span></div>
<div class="info-icon" title="Extracted from BRD + leadership inputs">🗺️</div>
</div>
<div class="card-body">
<div class="timeline-mock">
<div class="timeline-row"><div class="timeline-date">Apr 10</div><div class="timeline-bar"><div class="bar-fill" style="width: 45%;"></div></div><div class="milestone" style="color:#b8860b;">BRD signoff</div></div>
<div class="timeline-row"><div class="timeline-date">Apr 16</div><div class="timeline-bar"><div class="bar-fill" style="width: 70%; background:#d4af37;"></div></div><div class="milestone" style="color:#b8860b;">Wireframe review</div></div>
<div class="timeline-row"><div class="timeline-date">Apr 22</div><div class="timeline-bar"><div class="bar-fill" style="width: 30%; background:#d4af37;"></div></div><div class="milestone" style="color:#b8860b;">Dev handoff</div></div>
<div class="timeline-row"><div class="timeline-date">Apr 28</div><div class="timeline-bar"><div class="bar-fill" style="width: 10%; background:#e8c56e;"></div></div><div class="milestone" style="color:#b8860b;">UAT start</div></div>
</div>
<div class="query-example" style="margin-top:12px;">📌 Next: FRD review with stakeholders (Apr 09) – 3 open action items</div>
</div>
</div>
<!-- 3. dashboard & statistics -->
<div class="card">
<div class="card-header">
<div class="card-title">📈 Strategic Metrics <span>war room stats</span></div>
<div class="info-icon">📊</div>
</div>
<div class="card-body">
<div style="display: flex; gap: 16px; flex-wrap: wrap;">
<div><span style="font-weight:800;">Churn</span><br>▰▰▰▰▰▰▰▰▰▰ 18%<br><span style="font-size:0.65rem;">+4% vs last sprint</span></div>
<div><span style="font-weight:800;">Traceability</span><br>▰▰▰▰▰▰▰▰▰▰ 83%</div>
<div><span style="font-weight:800;">Test coverage</span><br>▰▰▰▰▰▰▰▰▰▰ 67%</div>
</div>
<hr>
<div><span style="font-weight:600;">🔥 Risk heatmap</span><br>🔴 High: regulatory compliance (GDPR) &nbsp;🟡 Medium: resource availability</div>
<div class="query-example" style="margin-top: 12px;">💡 AI forecast: “Project health score 82% – on track but monitor stakeholder alignment.”</div>
</div>
</div>
<!-- 4. Kanban board -->
<div class="card">
<div class="card-header">
<div class="card-title">🗂️ Corps Kanban <span>requirements lifecycle</span></div>
<div class="info-icon">🎖️</div>
</div>
<div class="card-body">
<div class="kanban-row">
<div class="kanban-col"><div class="col-title">BACKLOG</div><div class="kanban-card">Audit trail v2</div><div class="kanban-card">Bulk export</div></div>
<div class="kanban-col"><div class="col-title">ANALYSIS</div><div class="kanban-card">SSO + MFA</div><div class="kanban-card">API rate limit</div></div>
<div class="kanban-col"><div class="col-title">DEV READY</div><div class="kanban-card">Dashboard widgets</div></div>
<div class="kanban-col"><div class="col-title">UAT</div><div class="kanban-card">Login flow</div></div>
<div class="kanban-col"><div class="col-title">DONE</div><div class="kanban-card">Project scaffolding</div></div>
</div>
<div class="query-example">🎯 Draggable wireframe: status changes update traceability matrix automatically.</div>
</div>
</div>
<!-- 5. daily chatter feed -->
<div class="card">
<div class="card-header">
<div class="card-title">💬 Corps Chatter <span>daily intel</span></div>
<div class="info-icon">🗣️</div>
</div>
<div class="card-body" style="max-height: 250px; overflow-y: auto;">
<div class="chatter-item"><span style="color:#b8860b; font-weight:600;">Simran (PO):</span> “BRD amendment sent to stakeholders – approval by EOD” <span style="float:right; font-size:0.65rem;">Today 10:23</span></div>
<div class="chatter-item"><span style="color:#b8860b; font-weight:600;">Anjali (BA):</span> “SRS v4 uploaded, traceability refreshed” <span style="float:right;">Yesterday 16:12</span></div>
<div class="chatter-item"><span style="color:#b8860b; font-weight:600;">Sai (Tech Lead):</span> “Estimation complete: 5 new user stories” <span style="float:right;">Yesterday 11:45</span></div>
<div class="chatter-item"><span style="color:#b8860b; font-weight:600;">Leadership (CEO):</span> “Demo to client on Apr 15 – prepare executive summary” <span style="float:right;">Apr 04 09:20</span></div>
</div>
<div class="query-example">🔍 RAG over chatter: “What did leadership demand about deadlines?” → returns 2 critical constraints</div>
</div>
<!-- 6. RAG dataset feeder -->
<div class="card">
<div class="card-header">
<div class="card-title">📚 Archives & Feeder <span>RAG knowledge base</span></div>
<div class="info-icon">📀</div>
</div>
<div class="card-body">
<div><span style="font-weight:600;">Ingested artifacts (sample)</span></div>
<div>
<span class="doc-badge">📄 BRD_v3.pdf</span>
<span class="doc-badge">📊 Requirement_trace.xlsx</span>
<span class="doc-badge">🎙️ Meeting_20260402.txt</span>
<span class="doc-badge">💬 Leadership_Slack.json</span>
<span class="doc-badge">📆 Daily_status_Apr.csv</span>
</div>
<div class="query-example">
🧠 <strong>RAG query example</strong><br>
“Extract all Napoleon-style strategic directives from leadership chats”<br>
<span style="color:#b8860b;">→ “Apr 3: accelerate UAT, Apr 5: freeze BRD changes” (source references)</span>
</div>
<div style="margin-top: 12px; font-size:0.7rem; background:#fefcf7; border-radius: 20px; padding: 8px; border:1px solid #f0e8d8;">✅ 219 chunks indexed in ChromaDB | last sync: 2 min ago (Gist-backed)</div>
</div>
</div>
</div>
<!-- TECHNICAL + BRS DOCUMENTATION bright -->
<div class="docs-section">
<div class="section-title">📘 BnParte · Strategic Business Analysis Suite</div>
<div class="tools-grid">
<div class="tool-card">
<div class="tool-name">🔍 Imperial Analysis Engine</div>
<div class="tool-desc">LLM (Groq) + RAG extracts gaps, risks, decisions, duplicates from meeting transcripts, chats, and PDFs. Auto‑tags based on Napoleon‑style priority levels.</div>
<div class="sample-input"><strong>📥 Sample input</strong><br>Transcript: “Simran: the compliance requirement is missing. Sai: we’ll add it to BRD.” → Gap identified + linked to compliance owner.</div>
</div>
<div class="tool-card">
<div class="tool-name">📅 Campaign Timeline</div>
<div class="tool-desc">Extracts milestones from BRD, leadership messages, and meeting minutes. Gantt-like board with critical path alerts.</div>
<div class="sample-input"><strong>📥 Sample input</strong><br>Excel: “BRD signoff Apr 10, UAT start Apr 25” + email “client pushes UAT to Apr 28” → timeline adjusts automatically.</div>
</div>
<div class="tool-card">
<div class="tool-name">📊 Strategic Metrics</div>
<div class="tool-desc">Computes req churn, traceability %, test coverage, stakeholder alignment heatmap. Auto‑refreshes when new docs/chatter lands.</div>
<div class="sample-input"><strong>📥 Sample input</strong><br>Changelogs from SRS + Jira export + daily standup CSV → displays churn trend and predicts delivery confidence.</div>
</div>
<div class="tool-card">
<div class="tool-name">🗂️ Corps Kanban</div>
<div class="tool-desc">Auto‑populated from requirement status fields (Excel, SRS). Each card links to source document and stakeholder conversation.</div>
<div class="sample-input"><strong>📥 Sample input</strong><br>Excel columns: Req ID, Title, Status (Backlog/Analysis/UAT/Done) → Kanban board with drag simulation.</div>
</div>
<div class="tool-card">
<div class="tool-name">💬 Corps Chatter (Daily Feed)</div>
<div class="tool-desc">Aggregates one-line statuses from Slack, WhatsApp, daily CSV. Indexed by person, date, and sentiment. Searchable via RAG.</div>
<div class="sample-input"><strong>📥 Sample input</strong><br>WhatsApp export: “[Apr 03] Anjali: wireframes approved” + “[Apr 04] Sai: dev blocked on API” → feed with action extraction.</div>
</div>
<div class="tool-card">
<div class="tool-name">📚 Archives + RAG Feeder</div>
<div class="tool-desc">Ingest PDF, DOCX, XLSX, TXT, JSON chat logs, CSV. Auto‑chunk, embed with all‑MiniLM‑L6, store in ChromaDB. Semantic retrieval with Groq LLM.</div>
<div class="sample-input"><strong>📥 Sample input</strong><br>BRD.pdf + Leadership voice transcript + Slack JSON → query: “what are the top 3 business constraints?” → answer + paragraph reference.</div>
</div>
</div>
<hr>
<div style="background: #fefcf7; border-radius: 28px; padding: 20px; margin-top: 24px; border-left: 5px solid #d4af37; border: 1px solid #efe4d0;">
<div style="font-weight: 700; color:#2c5a4a;">⚙️ RAW INPUTS ACCEPTED (Battle-Ready Intake)</div>
<div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; color:#5a6e5a;">
<span>📄 PDF / Word (BRD, SRS)</span> <span>📊 Excel / CSV (Traceability, Requirements)</span> <span>📝 Plain text logs</span>
<span>🎙️ Meeting transcripts (TXT, VTT)</span> <span>💬 Slack/Teams/WhatsApp JSON</span> <span>📆 Daily one-liners (CSV)</span>
</div>
<div style="margin-top: 18px; font-style: italic; font-size: 0.8rem; color:#8b9a7a;">🔧 Tech stack: Gradio · ChromaDB · Groq (Llama 3.1) · GitHub Gist · Hugging Face embeddings</div>
</div>
</div>
<footer>
<div style="font-size: 0.8rem; font-weight: 500; color:#b8860b;">BnParte · Designed under the Empire aesthetic</div>
<div style="margin-top: 8px;">✨ Created with strategic intent by <strong>Sai Varakala</strong> (Techno‑Agilist · Scrum Master @ TCS) · Project started: <strong>April 2026</strong></div>
<div style="margin-top: 6px;">© 2026 Sai Varakala · MIT License · v0.1 · “Command your data, lead your stakeholders”</div>
<div style="margin-top: 10px;">🌐 Tools & references: <span style="color:#b8860b;">BnParte.io</span> (mock) · RAG · ChromaDB · Groq · Napoleon‑grade BA intelligence</div>
</footer>
</div>
</body>
</html>