Strategic Intelligence Dashboard
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Strategic Intelligence Dashboard | TechCorp</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> </head> <body> <div class="dashboard-header mb-4"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-md-6"> <h1><i class="bi bi-graph-up-arrow"></i> Strategic Intelligence Dashboard</h1> <p class="mb-0">Real-time AI analysis of emerging opportunities and disruptions</p> </div> <div class="col-md-6 text-md-end"> <span class="badge bg-light text-dark me-2"><i class="bi bi-clock"></i> Updated: <span id="update-time">Just now</span></span> <button class="btn btn-outline-light btn-sm me-2"><i class="bi bi-arrow-clockwise"></i> Refresh</button> <button class="btn btn-light btn-sm"><i class="bi bi-gear"></i> Configure</button> </div> </div> </div> </div> <div class="container-fluid"> <div class="row mb-4"> <div class="col-md-3"> <div class="card metric-card"> <div class="card-body"> <h6 class="card-subtitle mb-2 text-muted">Emerging Tech Signals</h6> <h3 class="card-title">27 <span class="text-success small">+5.2% <i class="bi bi-arrow-up"></i></span></h3> <p class="card-text small">Significant signals detected in past 7 days</p> <button class="btn btn-sm btn-outline-primary">View breakdown</button> </div> </div> </div> <div class="col-md-3"> <div class="card alert-card"> <div class="card-body"> <h6 class="card-subtitle mb-2 text-muted">Competitor Anomalies</h6> <h3 class="card-title">14 <span class="text-warning small">+42% <i class="bi bi-arrow-up"></i></span></h3> <p class="card-text small">Unusual activity detected</p> <button class="btn btn-sm btn-outline-warning">Investigate</button> </div> </div> </div> <div class="col-md-3"> <div class="card opportunity-card"> <div class="card-body"> <h6 class="card-subtitle mb-2 text-muted">Market Entry Points</h6> <h3 class="card-title">8 <span class="text-success small">+2 new</span></h3> <p class="card-text small">Adjacent verticals with >70% fit</p> <button class="btn btn-sm btn-outline-success">Explore</button> </div> </div> </div> <div class="col-md-3"> <div class="card threat-card"> <div class="card-body"> <h6 class="card-subtitle mb-2 text-muted">Disruption Risks</h6> <h3 class="card-title">5 <span class="text-danger small">High risk</span></h3> <p class="card-text small">Potential disruptive innovations</p> <button class="btn btn-sm btn-outline-danger">Assess</button> </div> </div> </div> </div> <div class="row mb-4"> <div class="col-md-8"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <span>Technology Sentiment & Emerging Trends</span> <div> <select class="form-select form-select-sm" style="width: auto; display: inline-block;"> <option>Last 30 days</option> <option selected>Last 90 days</option> <option>Last 12 months</option> </select> </div> </div> <div class="card-body"> <div class="chart-container" id="trendChart"></div> <div class="mt-3"> <span class="badge badge-trend me-1">AI Agents</span> <span class="badge badge-trend me-1">Quantum Cloud</span> <span class="badge badge-trend me-1">Neuromorphic Chips</span> <span class="badge badge-success me-1">Biotech AI</span> <span class="badge badge-warning me-1">Regulatory Shifts</span> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header"> <span>Top Strategic Signals</span> </div> <div class="card-body p-0"> <div class="list-group list-group-flush"> <div class="list-group-item signal-item signal-critical"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1">Competitor stealth project in edge AI</h6> <small class="text-danger">Critical</small> </div> <p class="mb-1 small">3 patents filed + talent acquisitions suggest breakthrough in low-power AI inference</p> <small><span class="badge bg-danger">Competitor</span> <span class="badge bg-dark">AI Hardware</span></small> <button class="drilldown-btn btn-sm"><i class="bi bi-zoom-in"></i></button> </div> <div class="list-group-item signal-item signal-high"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1">Regulatory shift in EU for AI transparency</h6> <small class="text-warning">High</small> </div> <p class="mb-1 small">Draft legislation would require disclosure of training data sources</p> <small><span class="badge bg-warning text-dark">Regulatory</span> <span class="badge bg-dark">Europe</span></small> <button class="drilldown-btn btn-sm"><i class="bi bi-zoom-in"></i></button> </div> <div class="list-group-item signal-item signal-medium"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1">Startup ecosystem shift toward AI+biotech</h6> <small>Medium</small> </div> <p class="mb-1 small">32% increase in seed funding to AI-driven drug discovery platforms</p> <small><span class="badge bg-success">Opportunity</span> <span class="badge bg-dark">Biotech</span></small> <button class="drilldown-btn btn-sm"><i class="bi bi-zoom-in"></i></button> </div> <div class="list-group-item signal-item"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1">Sentiment shift for conversational AI</h6> <small>Medium</small> </div> <p class="mb-1 small">User satisfaction declining (-18%) despite capability improvements</p> <small><span class="badge bg-primary">Sentiment</span> <span class="badge bg-dark">NLP</span></small> <button class="drilldown-btn btn-sm"><i class="bi bi-zoom-in"></i></button> </div> </div> </div> </div> </div> </div> <div class="row mb-4"> <div class="col-md-6"> <div class="card"> <div class="card-header"> <span>Competitor Activity Anomalies</span> </div> <div class="card-body"> <div class="chart-container" id="competitorChart"></div> <div class="mt-3"> <div class="alert alert-warning small"> <i class="bi bi-exclamation-triangle-fill"></i> <strong>Alert:</strong> Competitor X has doubled patent filings in quantum machine learning in Q3 </div> <table class="table table-sm small"> <thead> <tr> <th>Competitor</th> <th>Anomaly Type</th> <th>Confidence</th> <th></th> </tr> </thead> <tbody> <tr> <td>Company A</td> <td>Talent acquisition spike</td> <td><div class="progress" style="height: 5px;"> <div class="progress-bar bg-warning" style="width: 87%"></div> </div></td> <td><button class="btn btn-sm btn-outline-secondary">Details</button></td> </tr> <tr> <td>Company B</td> <td>Unusual R&D investment</td> <td><div class="progress" style="height: 5px;"> <div class="progress-bar bg-warning" style="width: 76%"></div> </div></td> <td><button class="btn btn-sm btn-outline-secondary">Details</button></td> </tr> <tr> <td>Company C</td> <td>Stealth subsidiary</td> <td><div class="progress" style="height: 5px;"> <div class="progress-bar bg-danger" style="width: 92%"></div> </div></td> <td><button class="btn btn-sm btn-outline-secondary">Details</button></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-header"> <span>Market Entry Opportunity Radar</span> </div> <div class="card-body"> <div class="chart-container" id="radarChart"></div> <div class="mt-3"> <div class="alert alert-success small"> <i class="bi bi-lightbulb-fill"></i> <strong>Top Opportunity:</strong> AI-powered clinical trial matching shows 89% strategic fit with our capabilities </div> <div class="row"> <div class="col-md-6"> <div class="card mb-3"> <div class="card-body p-3"> <h6 class="card-title small">Industrial AI Safety</h6> <p class="card-text small">Growing demand for failsafe AI in manufacturing</p> <span class="badge bg-success">Fit: 82%</span> <span class="badge bg-primary">$4.2B TAM</span> </div> </div> </div> <div class="col-md-6"> <div class="card mb-3"> <div class="card-body p-3"> <h6 class="card-title small">AI Legal Assistants</h6> <p class="card-text small">Automating contract review for SMBs</p> <span class="badge bg-success">Fit: 76%</span> <span class="badge bg-primary">$1.8B TAM</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a class="nav-link active" href="#disruption" data-bs-toggle="tab">Disruption Signals</a> </li> <li class="nav-item"> <a class="nav-link" href="#sentiment" data-bs-toggle="tab">Sentiment Shifts</a> </li> <li class="nav-item"> <a class="nav-link" href="#patents" data-bs-toggle="tab">Patent Trends</a> </li> <li class="nav-item"> <a class="nav-link" href="#talent" data-bs-toggle="tab">Talent Movements</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active" id="disruption"> <div class="row"> <div class="col-md-8"> <div class="chart-container" id="disruptionChart"></div> </div> <div class="col-md-4"> <h5>Disruption Risk Assessment</h5> <div class="mb-3"> <label class="form-label">Open-source foundation models</label> <div class="progress mb-2" style="height: 10px;"> <div class="progress-bar bg-danger" style="width: 88%"></div> </div> <label class="form-label">Decentralized AI training</label> <div class="progress mb-2" style="height: 10px;"> <div class="progress-bar bg-warning" style="width: 65%"></div> </div> <label class="form-label">Biological computing</label> <div class="progress mb-2" style="height: 10px;"> <div class="progress-bar bg-warning" style="width: 72%"></div> </div> <label class="form-label">AI regulation</label> <div class="progress mb-2" style="height: 10px;"> <div class="progress-bar bg-primary" style="width: 45%"></div> </div> </div> <button class="btn btn-sm btn-outline-danger">View mitigation strategies</button> </div> </div> </div> <div class="tab-pane" id="sentiment"> <p>Sentiment analysis content would go here...</p> </div> <div class="tab-pane" id="patents"> <p>Patent trends content would go here...</p> </div> <div class="tab-pane" id="talent"> <p>Talent movement content would go here...</p> </div> </div> </div> </div> </div> </div> </div> <footer class="mt-5 py-3 text-center text-muted small"> <p>TechCorp Strategic Intelligence • AI-powered insights • Updated in real-time</p> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
CSS
:root { --primary-dark: #0a2540; --primary-light: #1a73e8; --accent: #00c4cc; --warning: #f6c609; --danger: #ff5252; --success: #4caf50; } body { font-family: 'Segoe UI', system-ui, sans-serif; background-color: #f8f9fa; color: #333; } .dashboard-header { background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)); color: white; padding: 1.5rem; border-radius: 0 0 10px 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .card { border: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.2s; height: 100%; } .card:hover { transform: translateY(-5px); } .card-header { background-color: white; border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: 600; border-radius: 10px 10px 0 0 !important; } .metric-card { border-left: 4px solid var(--accent); } .alert-card { border-left: 4px solid var(--warning); } .opportunity-card { border-left: 4px solid var(--success); } .threat-card { border-left: 4px solid var(--danger); } .nav-pills .nav-link.active { background-color: var(--primary-light); } .nav-pills .nav-link { color: var(--primary-dark); } .badge-trend { background-color: var(--accent); } .badge-warning { background-color: var(--warning); } .badge-danger { background-color: var(--danger); } .badge-success { background-color: var(--success); } .chart-container { height: 300px; width: 100%; } .signal-tag { display: inline-block; padding: 0.25rem 0.5rem; margin: 0.2rem; background-color: #e9f5ff; border-radius: 20px; font-size: 0.8rem; color: var(--primary-light); } @media (max-width: 768px) { .card { margin-bottom: 1.5rem; } } .drilldown-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8); border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--primary-dark); } .signal-item { border-left: 3px solid transparent; padding-left: 10px; margin-bottom: 10px; transition: all 0.2s; } .signal-item:hover { border-left: 3px solid var(--accent); background-color: rgba(0,196,204,0.05); } .signal-critical { border-left: 3px solid var(--danger); } .signal-high { border-left: 3px solid var(--warning); } .signal-medium { border-left: 3px solid var(--accent); }
JavaScript
// Initialize charts document.addEventListener('DOMContentLoaded', function() { // Set update time const now = new Date(); document.getElementById('update-time').textContent = now.toLocaleString(); // Trend Chart const trendChart = echarts.init(document.getElementById('trendChart')); trendChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['AI Agents', 'Quantum Computing', 'Neuromorphic Chips', 'Biotech AI', 'Regulatory Focus'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }, yAxis: { type: 'value', name: 'Signal Strength' }, series: [ { name: 'AI Agents', type: 'line', smooth: true, data: [120, 132, 145, 160, 172, 190, 210], lineStyle: { width: 3 } }, { name: 'Quantum Computing', type: 'line', smooth: true, data: [80, 92, 105, 125, 140, 158, 175], lineStyle: { width: 3 } }, { name: 'Neuromorphic Chips', type: 'line', smooth: true, data: [60, 72, 85, 100, 115, 130, 150], lineStyle: { width: 3 } }, { name: 'Biotech AI', type: 'line', smooth: true, data: [40, 52, 65, 80, 95, 110, 135], lineStyle: { width: 3 } }, { name: 'Regulatory Focus', type: 'line', smooth: true, data: [30, 42, 55, 70, 85, 100, 120], lineStyle: { width: 3 } } ] }); // Competitor Chart const competitorChart = echarts.init(document.getElementById('competitorChart')); competitorChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['Company A', 'Company B', 'Company C', 'Company D', 'Company E'] }, yAxis: { type: 'value', name: 'Anomaly Score' }, series: [ { name: 'Patent Activity', type: 'bar', data: [12, 19, 23, 8, 15], itemStyle: { color: '#FFA726' } }, { name: 'Talent Movement', type: 'bar', data: [8, 15, 12, 5, 10], itemStyle: { color: '#66BB6A' } }, { name: 'R&D Investment', type: 'bar', data: [15, 12, 18, 10, 8], itemStyle: { color: '#42A5F5' } } ] }); // Radar Chart const radarChart = echarts.init(document.getElementById('radarChart')); radarChart.setOption({ tooltip: { trigger: 'item' }, legend: { data: ['Market Attractiveness', 'Strategic Fit', 'Competitive Risk'] }, radar: { indicator: [ { name: 'Healthcare AI', max: 100 }, { name: 'Industrial IoT', max: 100 }, { name: 'AI Legal Tech', max: 100 }, { name: 'Autonomous Retail', max: 100 }, { name: 'GovTech AI', max: 100 }, { name: 'EdTech AI', max: 100 } ] }, series: [ { name: 'Market Opportunity', type: 'radar', data: [ { value: [85, 72, 68, 55, 45, 60], name: 'Market Attractiveness', areaStyle: { color: 'rgba(76, 175, 80, 0.4)' }, lineStyle: { color: '#4CAF50' } }, { value: [70, 65, 76, 60, 40, 55], name: 'Strategic Fit', areaStyle: { color: 'rgba(0, 196, 204, 0.4)' }, lineStyle: { color: '#00C4CC' } }, { value: [30, 45, 35, 50, 65, 40], name: 'Competitive Risk', areaStyle: { color: 'rgba(255, 152, 0, 0.4)' }, lineStyle: { color: '#FF9800' } } ] } ] }); // Disruption Chart const disruptionChart = echarts.init(document.getElementById('disruptionChart')); disruptionChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['Open-source AI', 'Decentralized Training', 'Bio Computing', 'Regulatory Risk'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['Q1 2022', 'Q2 2022', 'Q3 2022', 'Q4 2022', 'Q1 2023', 'Q2 2023', 'Q3 2023'] } ], yAxis: [ { type: 'value', name: 'Disruption Risk Score' } ], series: [ { name: 'Open-source AI', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [30, 42, 51, 64, 72, 83, 88], lineStyle: { width: 3 }, itemStyle: { color: '#FF5252' } }, { name: 'Decentralized Training', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [20, 28, 31, 44, 50, 58, 65], lineStyle: { width: 3 }, itemStyle: { color: '#FFA726' } }, { name: 'Bio Computing', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [15, 23, 30, 45, 55, 62, 72], lineStyle: { width: 3 }, itemStyle: { color: '#66BB6A' } }, { name: 'Regulatory Risk', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [10, 15, 25, 30, 35, 40, 45], lineStyle: { width: 3 }, itemStyle: { color: '#42A5F5' } } ] }); // Resize charts on window resize window.addEventListener('resize', function() { trendChart.resize(); competitorChart.resize(); radarChart.resize(); disruptionChart.resize(); }); });
Output Preview
Desktop
Mobile
Fullscreen