Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MarketScope - Real-time Market Analysis</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%); | |
| } | |
| .opportunity-card { | |
| transition: all 0.3s ease; | |
| } | |
| .opportunity-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); | |
| } | |
| } | |
| .loader { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #3498db; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .data-source-badge { | |
| font-size: 0.7rem; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| background-color: #e5e7eb; | |
| color: #4b5563; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h1 class="text-3xl md:text-4xl font-bold">MarketScope Pro</h1> | |
| <p class="mt-2 opacity-90">Real-time product market intelligence powered by AI</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="hidden md:block text-sm opacity-80">Analyzing 50M+ products daily</span> | |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Search Section --> | |
| <section class="mb-12"> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Analyze Any Product Market</h2> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="flex-grow relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" id="productInput" | |
| class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500" | |
| placeholder="Enter product category (e.g. thermostats, wireless earbuds)"> | |
| </div> | |
| <button id="analyzeBtn" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors pulse flex items-center justify-center min-w-[120px]"> | |
| <span id="analyzeText">Analyze</span> | |
| <span id="analyzeSpinner" class="hidden ml-2"> | |
| <div class="loader" style="width: 20px; height: 20px; border-width: 2px;"></div> | |
| </span> | |
| </button> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-500">Examples: air fryers, robot vacuums, smart watches, yoga mats</p> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="data-source-badge"><i class="fas fa-shopping-cart mr-1"></i> Amazon</span> | |
| <span class="data-source-badge"><i class="fas fa-store mr-1"></i> Walmart</span> | |
| <span class="data-source-badge"><i class="fas fa-search mr-1"></i> Google Trends</span> | |
| <span class="data-source-badge"><i class="fas fa-chart-line mr-1"></i> Statista</span> | |
| <span class="data-source-badge"><i class="fas fa-globe mr-1"></i> SimilarWeb</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Data Collection Progress (Initially Hidden) --> | |
| <section id="progressSection" class="hidden max-w-3xl mx-auto mb-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Gathering Market Intelligence</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <p class="text-sm font-medium">Identifying product category</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-spinner fa-spin"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <p class="text-sm font-medium">Analyzing competitor landscape</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 45%" id="competitorProgress"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center mr-4"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <p class="text-sm font-medium">Calculating price distribution</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center mr-4"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <p class="text-sm font-medium">Estimating market growth</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section (Initially Hidden) --> | |
| <section id="resultsSection" class="hidden"> | |
| <!-- Data Sources Info --> | |
| <div class="bg-blue-50 rounded-lg p-4 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Data Sources</h3> | |
| <p class="text-sm text-gray-600" id="dataSources">Aggregated from 12 sources including Amazon, Walmart, Google Trends, and Statista. Last updated: <span id="dynamicUpdateTime"></span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market Overview --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div> | |
| <h2 class="text-2xl font-semibold text-gray-800" id="productTitle">Smart Thermostats Market Analysis</h2> | |
| <p class="text-gray-600 mt-1">Comprehensive market intelligence report</p> | |
| </div> | |
| <button class="mt-2 md:mt-0 px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Export Report | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6"> | |
| <div class="bg-blue-50 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-store text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Competitors Analyzed</p> | |
| <h3 class="text-2xl font-bold" id="competitorCount">24</h3> | |
| <p class="text-xs text-gray-500 mt-1"><span id="topBrands">Nest, Ecobee, Honeywell</span> lead market</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-dollar-sign text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Price Range</p> | |
| <h3 class="text-2xl font-bold" id="avgPrice">$89 - $349</h3> | |
| <p class="text-xs text-gray-500 mt-1">Avg: <span id="exactAvgPrice">$189</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-chart-bar text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Global Market Size</p> | |
| <h3 class="text-2xl font-bold" id="marketSize">$4.2B</h3> | |
| <p class="text-xs text-gray-500 mt-1"><span id="growthRate">12.4%</span> annual growth</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Opportunity Rating --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">Market Opportunity Score</h3> | |
| <p class="text-sm text-gray-500 mt-1">AI-powered assessment of market potential</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center mb-6"> | |
| <div class="relative w-48 h-48"> | |
| <canvas id="opportunityGauge"></canvas> | |
| <div class="absolute inset-0 flex items-center justify-center flex-col"> | |
| <span class="text-4xl font-bold" id="opportunityScore">72</span> | |
| <span class="text-gray-500">/100</span> | |
| <span class="text-sm mt-1" id="opportunityText">Strong Opportunity</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Competition Density</span> | |
| <span class="text-sm font-medium" id="competitionScore">Medium (6.2/10)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 62%" id="competitionBar"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Growth Potential</span> | |
| <span class="text-sm font-medium" id="growthScore">High (8.5/10)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%" id="growthBar"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Entry Barrier</span> | |
| <span class="text-sm font-medium" id="barrierScore">Medium (5.5/10)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-500 h-2.5 rounded-full" style="width: 55%" id="barrierBar"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Profit Potential</span> | |
| <span class="text-sm font-medium" id="profitScore">High (7.8/10)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 78%" id="profitBar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">Market Coverage Strategy</h3> | |
| <p class="text-sm text-gray-500 mt-1">Optimal SKU count for market penetration</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <canvas id="skuChart"></canvas> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center p-3 bg-blue-50 rounded-lg"> | |
| <div> | |
| <span class="font-medium">25% Coverage</span> | |
| <p class="text-sm text-gray-500">Basic market presence</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-bold" id="sku25">8-12</span> | |
| <p class="text-xs text-gray-500">$<span id="sku25Cost">12K</span> estimated cost</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-blue-100 rounded-lg"> | |
| <div> | |
| <span class="font-medium">50% Coverage</span> | |
| <p class="text-sm text-gray-500">Competitive position</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-bold" id="sku50">18-24</span> | |
| <p class="text-xs text-gray-500">$<span id="sku50Cost">35K</span> estimated cost</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-blue-200 rounded-lg"> | |
| <div> | |
| <span class="font-medium">75% Coverage</span> | |
| <p class="text-sm text-gray-500">Market leadership</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-bold" id="sku75">30-40</span> | |
| <p class="text-xs text-gray-500">$<span id="sku75Cost">68K</span> estimated cost</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-3 bg-yellow-50 rounded-lg"> | |
| <p class="text-sm text-gray-700"><i class="fas fa-lightbulb text-yellow-500 mr-2"></i> <span id="skuStrategy">Focus on 12-15 core SKUs initially, then expand based on performance.</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Competitors and Features --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">Competitor Landscape</h3> | |
| <p class="text-sm text-gray-500 mt-1">Market share and price positioning</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg">Market Share</button> | |
| <button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-lg">Price Range</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <canvas id="competitorChart"></canvas> | |
| <div class="mt-4 flex justify-between items-center text-sm text-gray-500"> | |
| <span>Data source: <span class="font-medium">Amazon Best Sellers</span></span> | |
| <span>Updated: <span id="competitorUpdate">Today</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">Feature Adoption Analysis</h3> | |
| <p class="text-sm text-gray-500 mt-1">Key differentiators in the market</p> | |
| </div> | |
| <div class="p-6"> | |
| <canvas id="featuresChart"></canvas> | |
| <div class="mt-4"> | |
| <h4 class="font-medium mb-2">Emerging Features</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">AI Energy Optimization (+120%)</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Matter Support (+85%)</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Air Quality Sensors (+62%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Geographic Distribution --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">Global Market Distribution</h3> | |
| <p class="text-sm text-gray-500 mt-1">Revenue by country/region</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <canvas id="geoChart"></canvas> | |
| </div> | |
| <div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">North America</span> | |
| <span class="text-sm font-medium" id="naPercent">42%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 42%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">$<span id="naValue">1.76B</span> | <span id="naGrowth">+10.2%</span> YoY</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Europe</span> | |
| <span class="text-sm font-medium" id="euPercent">31%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 31%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">$<span id="euValue">1.30B</span> | <span id="euGrowth">+14.5%</span> YoY</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Asia Pacific</span> | |
| <span class="text-sm font-medium" id="apPercent">18%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 18%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">$<span id="apValue">756M</span> | <span id="apGrowth">+18.7%</span> YoY</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Rest of World</span> | |
| <span class="text-sm font-medium" id="rowPercent">9%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 9%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">$<span id="rowValue">378M</span> | <span id="rowGrowth">+22.3%</span> YoY</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium mb-2">Fastest Growing Markets</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">India (+28%)</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Brazil (+22%)</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Mexico (+19%)</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Indonesia (+17%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Price Distribution --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">Price Segmentation</h3> | |
| <p class="text-sm text-gray-500 mt-1">Current market price distribution</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <canvas id="priceChart"></canvas> | |
| </div> | |
| <div> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-medium mb-2">Price Segments</h4> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="bg-blue-50 p-3 rounded-lg text-center"> | |
| <p class="text-sm text-gray-500">Budget</p> | |
| <p class="font-bold" id="budgetRange">$50-$120</p> | |
| <p class="text-xs text-gray-500 mt-1" id="budgetPercent">15% of market</p> | |
| <p class="text-xs mt-1"><span id="budgetGrowth">+5%</span> YoY</p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg text-center"> | |
| <p class="text-sm text-gray-500">Mid-Range</p> | |
| <p class="font-bold" id="midRange">$120-$250</p> | |
| <p class="text-xs text-gray-500 mt-1" id="midPercent">65% of market</p> | |
| <p class="text-xs mt-1"><span id="midGrowth">+14%</span> YoY</p> | |
| </div> | |
| <div class="bg-purple-50 p-3 rounded-lg text-center"> | |
| <p class="text-sm text-gray-500">Premium</p> | |
| <p class="font-bold" id="premiumRange">$250-$500+</p> | |
| <p class="text-xs text-gray-500 mt-1" id="premiumPercent">20% of market</p> | |
| <p class="text-xs mt-1"><span id="premiumGrowth">+8%</span> YoY</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-2">AI-Powered Pricing Strategy</h4> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <p class="text-sm" id="pricingStrategy">Target the mid-range segment with premium features at $199-$229 price point to differentiate from budget options while undercutting premium brands.</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-2">Price Elasticity Analysis</h4> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-700"><i class="fas fa-chart-line text-blue-500 mr-2"></i> Optimal price sensitivity detected at <span class="font-medium">$179-$219</span> range with 3.2x conversion lift.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Growth Projection --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">Market Growth Forecast</h3> | |
| <p class="text-sm text-gray-500 mt-1">5-year projection with key drivers</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <canvas id="growthChart"></canvas> | |
| </div> | |
| <div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Projected CAGR</h4> | |
| <p class="text-2xl font-bold text-blue-600" id="cagr">12.4%</p> | |
| <p class="text-sm text-gray-500">Compound Annual Growth Rate (2023-2028)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Market Size 2028</h4> | |
| <p class="text-2xl font-bold text-green-600" id="futureMarket">$7.5B</p> | |
| <p class="text-sm text-gray-500">Estimated total market value in 5 years</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Key Growth Drivers</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600 space-y-1"> | |
| <li>Increasing smart home adoption (32% annual growth)</li> | |
| <li>Energy efficiency regulations (45% of new installations)</li> | |
| <li>AI-powered features (78% of premium models)</li> | |
| <li>Utility company partnerships (15% market subsidy)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Potential Risks</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600 space-y-1"> | |
| <li>Economic downturn sensitivity (β=1.2)</li> | |
| <li>Technology standardization risks (Matter 2.0 pending)</li> | |
| <li>Supply chain constraints (12% lead time increase)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mt-8"> | |
| <div class="p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-purple-50"> | |
| <h3 class="text-xl font-semibold text-gray-800">Strategic Recommendations</h3> | |
| <p class="text-sm text-gray-500 mt-1">AI-generated market entry strategy</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-box"></i> | |
| </div> | |
| <h4 class="font-medium">Product Strategy</h4> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Focus on mid-range ($150-$250) with premium features</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Prioritize energy reporting and AI optimization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Ensure Matter protocol compatibility</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-tag"></i> | |
| </div> | |
| <h4 class="font-medium">Pricing Strategy</h4> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Launch at $199 with periodic promotions to $179</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Bundle with installation service (+$99)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Offer subscription for advanced analytics ($5/month)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <h4 class="font-medium">Go-To-Market</h4> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Target North America first (42% of market)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Partner with utility companies for rebates</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Focus on Amazon (67% of online sales)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-medium mb-2"><i class="fas fa-robot text-blue-600 mr-2"></i> AI Estimate</h4> | |
| <p class="text-sm">Based on similar product launches, estimated <span class="font-medium">18-24 months</span> to reach profitability with <span class="font-medium">$500K</span> initial marketing budget and <span class="font-medium">15%</span> market share target.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold">MarketScope Pro</h2> | |
| <p class="text-gray-400 mt-1">Powered by real-time market intelligence</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-6 pt-6 text-sm text-gray-400"> | |
| <p>© 2023 MarketScope Analytics. Data sources include Amazon, Walmart, Google Trends, Statista, and other public market data.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // DOM elements | |
| const productInput = document.getElementById('productInput'); | |
| const analyzeBtn = document.getElementById('analyzeBtn'); | |
| const analyzeText = document.getElementById('analyzeText'); | |
| const analyzeSpinner = document.getElementById('analyzeSpinner'); | |
| const progressSection = document.getElementById('progressSection'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const competitorProgress = document.getElementById('competitorProgress'); | |
| const dynamicUpdateTime = document.getElementById('dynamicUpdateTime'); | |
| // Event listeners | |
| analyzeBtn.addEventListener('click', analyzeMarket); | |
| productInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') analyzeMarket(); | |
| }); | |
| // Main analysis function | |
| async function analyzeMarket() { | |
| const product = productInput.value.trim().toLowerCase(); | |
| if (!product) { | |
| alert('Please enter a product category'); | |
| return; | |
| } | |
| // Show loading state | |
| analyzeText.textContent = 'Analyzing'; | |
| analyzeSpinner.classList.remove('hidden'); | |
| progressSection.classList.remove('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| // Update progress bar animation | |
| let progress = 0; | |
| const progressInterval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress > 100) progress = 100; | |
| competitorProgress.style.width = `${progress}%`; | |
| }, 300); | |
| // Simulate API calls (in a real app, these would be actual API calls) | |
| try { | |
| // Get current time for "last updated" display | |
| const now = new Date(); | |
| const options = { month: 'long', year: 'numeric' }; | |
| dynamicUpdateTime.textContent = now.toLocaleDateString('en-US', options); | |
| // Simulate data fetching delay | |
| await new Promise(resolve => setTimeout(resolve, 2500)); | |
| // Clear loading state | |
| clearInterval(progressInterval); | |
| analyzeText.textContent = 'Analyze'; | |
| analyzeSpinner.classList.add('hidden'); | |
| progressSection.classList.add('hidden'); | |
| // Show results with the appropriate data | |
| showMarketAnalysis(product); | |
| // Scroll to results | |
| setTimeout(() => { | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 100); | |
| } catch (error) { | |
| console.error('Analysis error:', error); | |
| alert('Error analyzing market. Please try again.'); | |
| analyzeText.textContent = 'Analyze'; | |
| analyzeSpinner.classList.add('hidden'); | |
| progressSection.classList.add('hidden'); | |
| clearInterval(progressInterval); | |
| } | |
| } | |
| // Function to show market analysis with fetched data | |
| function showMarketAnalysis(product) { | |
| // In a real implementation, this would use actual API data | |
| // For this demo, we'll use sample data that simulates API responses | |
| // Sample data structure that would come from APIs | |
| const apiData = { | |
| "smart thermostats": getThermostatData(), | |
| "wireless earbuds": getEarbudsData(), | |
| "air fryers": getAirFryerData(), | |
| // Default case | |
| "default": getDefaultData(product) | |
| }; | |
| const data = apiData[product] || apiData["default"]; | |
| // Update all UI elements with the data | |
| updateUI(data); | |
| // Create all charts | |
| createCharts(data); | |
| // Show results section | |
| resultsSection.classList.remove('hidden'); | |
| } | |
| // Sample API data generators (simulating real API responses) | |
| function getThermostatData() { | |
| return { | |
| productName: "Smart Thermostats", | |
| competitors: 28, | |
| priceRange: "$89-$349", | |
| exactAvgPrice: "$189", | |
| marketSize: "4.2B", | |
| growthRate: "12.4%", | |
| topBrands: "Nest, Ecobee, Honeywell", | |
| opportunityScore: 72, | |
| opportunityText: "Strong Opportunity", | |
| competitionScore: "Medium (6.2/10)", | |
| competitionValue: 62, | |
| growthScore: "High (8.5/10)", | |
| growthValue: 85, | |
| barrierScore: "Medium (5.5/10)", | |
| barrierValue: 55, | |
| profitScore: "High (7.8/10)", | |
| profitValue: 78, | |
| sku25: "8-12", | |
| sku50: "18-24", | |
| sku75: "30-40", | |
| sku25Cost: "12K", | |
| sku50Cost: "35K", | |
| sku75Cost: "68K", | |
| skuStrategy: "Focus on 12-15 core SKUs initially, then expand based on performance.", | |
| geoData: { | |
| na: 42, | |
| eu: 31, | |
| ap: 18, | |
| row: 9, | |
| naValue: "1.76B", | |
| euValue: "1.30B", | |
| apValue: "756M", | |
| rowValue: "378M", | |
| naGrowth: "+10.2%", | |
| euGrowth: "+14.5%", | |
| apGrowth: "+18.7%", | |
| rowGrowth: "+22.3%" | |
| }, | |
| priceSegments: { | |
| budget: { range: "$50-$120", percent: "15%", growth: "+5%" }, | |
| mid: { range: "$120-$250", percent: "65%", growth: "+14%" }, | |
| premium: { range: "$250-$500+", percent: "20%", growth: "+8%" } | |
| }, | |
| pricingStrategy: "Target the mid-range segment with premium features at $199-$229 price point to differentiate from budget options while undercutting premium brands.", | |
| cagr: "12.4%", | |
| futureMarket: "$7.5B", | |
| lastUpdated: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) | |
| }; | |
| } | |
| function getEarbudsData() { | |
| return { | |
| productName: "Wireless Earbuds", | |
| competitors: 42, | |
| priceRange: "$29-$299", | |
| exactAvgPrice: "$89", | |
| marketSize: "15.8B", | |
| growthRate: "8.7%", | |
| topBrands: "Apple, Samsung, Sony", | |
| opportunityScore: 58, | |
| opportunityText: "Moderate Opportunity", | |
| competitionScore: "High (8.2/10)", | |
| competitionValue: 82, | |
| growthScore: "Medium (6.5/10)", | |
| growthValue: 65, | |
| barrierScore: "Low (3.5/10)", | |
| barrierValue: 35, | |
| profitScore: "Medium (5.8/10)", | |
| profitValue: 58, | |
| sku25: "12-15", | |
| sku50: "25-30", | |
| sku75: "45-55", | |
| sku25Cost: "18K", | |
| sku50Cost: "42K", | |
| sku75Cost: "85K", | |
| skuStrategy: "Consider a narrow SKU range focusing on 2-3 models with color variations.", | |
| geoData: { | |
| na: 35, | |
| eu: 28, | |
| ap: 30, | |
| row: 7, | |
| naValue: "5.53B", | |
| euValue: "4.42B", | |
| apValue: "4.74B", | |
| rowValue: "1.11B", | |
| naGrowth: "+7.2%", | |
| euGrowth: "+9.5%", | |
| apGrowth: "+12.7%", | |
| rowGrowth: "+15.3%" | |
| }, | |
| priceSegments: { | |
| budget: { range: "$20-$60", percent: "40%", growth: "+12%" }, | |
| mid: { range: "$60-$150", percent: "45%", growth: "+6%" }, | |
| premium: { range: "$150-$300+", percent: "15%", growth: "+3%" } | |
| }, | |
| pricingStrategy: "Consider a budget-friendly model with decent quality at $49-$59 to compete with Chinese brands, plus a premium model with ANC at $129.", | |
| cagr: "8.7%", | |
| futureMarket: "$24.2B", | |
| lastUpdated: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) | |
| }; | |
| } | |
| function getAirFryerData() { | |
| return { | |
| productName: "Air Fryers", | |
| competitors: 19, | |
| priceRange: "$59-$399", | |
| exactAvgPrice: "$129", | |
| marketSize: "5.3B", | |
| growthRate: "14.2%", | |
| topBrands: "Ninja, Instant Pot, Cosori", | |
| opportunityScore: 81, | |
| opportunityText: "Excellent Opportunity", | |
| competitionScore: "Low (4.2/10)", | |
| competitionValue: 42, | |
| growthScore: "High (9.2/10)", | |
| growthValue: 92, | |
| barrierScore: "Medium (5.8/10)", | |
| barrierValue: 58, | |
| profitScore: "High (8.2/10)", | |
| profitValue: 82, | |
| sku25: "5-8", | |
| sku50: "10-15", | |
| sku75: "20-25", | |
| sku25Cost: "8K", | |
| sku50Cost: "22K", | |
| sku75Cost: "45K", | |
| skuStrategy: "Focus on the $99-$149 range with smart features and larger capacity.", | |
| geoData: { | |
| na: 45, | |
| eu: 33, | |
| ap: 15, | |
| row: 7, | |
| naValue: "2.39B", | |
| euValue: "1.75B", | |
| apValue: "795M", | |
| rowValue: "371M", | |
| naGrowth: "+15.2%", | |
| euGrowth: "+18.5%", | |
| apGrowth: "+22.7%", | |
| rowGrowth: "+25.3%" | |
| }, | |
| priceSegments: { | |
| budget: { range: "$50-$100", percent: "30%", growth: "+18%" }, | |
| mid: { range: "$100-$200", percent: "55%", growth: "+22%" }, | |
| premium: { range: "$200-$400+", percent: "15%", growth: "+8%" } | |
| }, | |
| pricingStrategy: "Focus on the $99-$149 range with smart features and larger capacity to appeal to families and tech-savvy consumers.", | |
| cagr: "14.2%", | |
| futureMarket: "$10.3B", | |
| lastUpdated: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) | |
| }; | |
| } | |
| function getDefaultData(product) { | |
| return { | |
| productName: product.charAt(0).toUpperCase() + product.slice(1), | |
| competitors: Math.floor(Math.random() * 30) + 10, | |
| priceRange: `$${Math.floor(Math.random() * 50) + 50}-$${Math.floor(Math.random() * 300) + 200}`, | |
| exactAvgPrice: `$${Math.floor(Math.random() * 150) + 50}`, | |
| marketSize: `${(Math.random() * 10).toFixed(1)}B`, | |
| growthRate: `${(Math.random() * 10 + 5).toFixed(1)}%`, | |
| topBrands: "Leading brands", | |
| opportunityScore: Math.floor(Math.random() * 40) + 50, | |
| opportunityText: ["Strong", "Moderate", "Good", "Limited"][Math.floor(Math.random() * 4)] + " Opportunity", | |
| competitionScore: ["Low", "Medium", "High"][Math.floor(Math.random() * 3)] + ` (${(Math.random() * 5 + 3).toFixed(1)}/10)`, | |
| competitionValue: Math.floor(Math.random() * 40) + 40, | |
| growthScore: ["Low", "Medium", "High"][Math.floor(Math.random() * 3)] + ` (${(Math.random() * 5 + 5).toFixed(1)}/10)`, | |
| growthValue: Math.floor(Math.random() * 40) + 50, | |
| barrierScore: ["Low", "Medium", "High"][Math.floor(Math.random() * 3)] + ` (${(Math.random() * 5 + 3).toFixed(1)}/10)`, | |
| barrierValue: Math.floor(Math.random() * 40) + 30, | |
| profitScore: ["Low", "Medium", "High"][Math.floor(Math.random() * 3)] + ` (${(Math.random() * 5 + 4).toFixed(1)}/10)`, | |
| profitValue: Math.floor(Math.random() * 40) + 40, | |
| sku25: `${Math.floor(Math.random() * 5) + 5}-${Math.floor(Math.random() * 5) + 8}`, | |
| sku50: `${Math.floor(Math.random() * 10) + 10}-${Math.floor(Math.random() * 10) + 15}`, | |
| sku75: `${Math.floor(Math.random() * 15) + 15}-${Math.floor(Math.random() * 15) + 20}`, | |
| sku25Cost: `${Math.floor(Math.random() * 10) + 5}K`, | |
| sku50Cost: `${Math.floor(Math.random() * 20) + 20}K`, | |
| sku75Cost: `${Math.floor(Math.random() * 30) + 40}K`, | |
| skuStrategy: "Focus on core SKUs initially, then expand based on market performance.", | |
| geoData: { | |
| na: Math.floor(Math.random() * 30) + 30, | |
| eu: Math.floor(Math.random() * 30) + 20, | |
| ap: Math.floor(Math.random() * 30) + 10, | |
| row: Math.floor(Math.random() * 10) + 5, | |
| naValue: `${(Math.random() * 3 + 1).toFixed(2)}B`, | |
| euValue: `${(Math.random() * 2 + 0.5).toFixed(2)}B`, | |
| apValue: `${(Math.random() * 2).toFixed(2)}B`, | |
| rowValue: `${(Math.random() * 1).toFixed(2)}B`, | |
| naGrowth: `+${(Math.random() * 10 + 5).toFixed(1)}%`, | |
| euGrowth: `+${(Math.random() * 10 + 5).toFixed(1)}%`, | |
| apGrowth: `+${(Math.random() * 15 + 10).toFixed(1)}%`, | |
| rowGrowth: `+${(Math.random() * 15 + 10).toFixed(1)}%` | |
| }, | |
| priceSegments: { | |
| budget: { | |
| range: `$${Math.floor(Math.random() * 50) + 20}-$${Math.floor(Math.random() * 50) + 70}`, | |
| percent: `${Math.floor(Math.random() * 20) + 15}%`, | |
| growth: `+${Math.floor(Math.random() * 10) + 5}%` | |
| }, | |
| mid: { | |
| range: `$${Math.floor(Math.random() * 50) + 70}-$${Math.floor(Math.random() * 100) + 150}`, | |
| percent: `${Math.floor(Math.random() * 30) + 40}%`, | |
| growth: `+${Math.floor(Math.random() * 15) + 5}%` | |
| }, | |
| premium: { | |
| range: `$${Math.floor(Math.random() * 100) + 150}-$${Math.floor(Math.random() * 200) + 300}+`, | |
| percent: `${Math.floor(Math.random() * 20) + 10}%`, | |
| growth: `+${Math.floor(Math.random() * 10) + 5}%` | |
| } | |
| }, | |
| pricingStrategy: "Target the mid-range segment with differentiating features at competitive price points.", | |
| cagr: `${(Math.random() * 10 + 5).toFixed(1)}%`, | |
| futureMarket: `$${(Math.random() * 15 + 5).toFixed(1)}B`, | |
| lastUpdated: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) | |
| }; | |
| } | |
| // Function to update all UI elements with data | |
| function updateUI(data) { | |
| document.getElementById('productTitle').textContent = `${data.productName} Market Analysis`; | |
| document.getElementById('competitorCount').textContent = data.competitors; | |
| document.getElementById('avgPrice').textContent = data.priceRange; | |
| document.getElementById('exactAvgPrice').textContent = data.exactAvgPrice; | |
| document.getElementById('marketSize').textContent = `$${data.marketSize}`; | |
| document.getElementById('growthRate').textContent = data.growthRate; | |
| document.getElementById('topBrands').textContent = data.topBrands; | |
| document.getElementById('opportunityScore').textContent = data.opportunityScore; | |
| document.getElementById('opportunityText').textContent = data.opportunityText; | |
| document.getElementById('competitionScore').textContent = data.competitionScore; | |
| document.getElementById('growthScore').textContent = data.growthScore; | |
| document.getElementById('barrierScore').textContent = data.barrierScore; | |
| document.getElementById('profitScore').textContent = data.profitScore; | |
| document.getElementById('competitionBar').style.width = `${data.competitionValue}%`; | |
| document.getElementById('growthBar').style.width = `${data.growthValue}%`; | |
| document.getElementById('barrierBar').style.width = `${data.barrierValue}%`; | |
| document.getElementById('profitBar').style.width = `${data.profitValue}%`; | |
| document.getElementById('sku25').textContent = data.sku25; | |
| document.getElementById('sku50').textContent = data.sku50; | |
| document.getElementById('sku75').textContent = data.sku75; | |
| document.getElementById('sku25Cost').textContent = data.sku25Cost; | |
| document.getElementById('sku50Cost').textContent = data.sku50Cost; | |
| document.getElementById('sku75Cost').textContent = data.sku75Cost; | |
| document.getElementById('skuStrategy').textContent = data.skuStrategy; | |
| document.getElementById('naPercent').textContent = `${data.geoData.na}%`; | |
| document.getElementById('euPercent').textContent = `${data.geoData.eu}%`; | |
| document.getElementById('apPercent').textContent = `${data.geoData.ap}%`; | |
| document.getElementById('rowPercent').textContent = `${data.geoData.row}%`; | |
| document.getElementById('naValue').textContent = data.geoData.naValue; | |
| document.getElementById('euValue').textContent = data.geoData.euValue; | |
| document.getElementById('apValue').textContent = data.geoData.apValue; | |
| document.getElementById('rowValue').textContent = data.geoData.rowValue; | |
| document.getElementById('naGrowth').textContent = data.geoData.naGrowth; | |
| document.getElementById('euGrowth').textContent = data.geoData.euGrowth; | |
| document.getElementById('apGrowth').textContent = data.geoData.apGrowth; | |
| document.getElementById('rowGrowth').textContent = data.geoData.rowGrowth; | |
| document.getElementById('budgetRange').textContent = data.priceSegments.budget.range; | |
| document.getElementById('midRange').textContent = data.priceSegments.mid.range; | |
| document.getElementById('premiumRange').textContent = data.priceSegments.premium.range; | |
| document.getElementById('budgetPercent').textContent = `${data.priceSegments.budget.percent} of market`; | |
| document.getElementById('midPercent').textContent = `${data.priceSegments.mid.percent} of market`; | |
| document.getElementById('premiumPercent').textContent = `${data.priceSegments.premium.percent} of market`; | |
| document.getElementById('budgetGrowth').textContent = data.priceSegments.budget.growth; | |
| document.getElementById('midGrowth').textContent = data.priceSegments.mid.growth; | |
| document.getElementById('premiumGrowth').textContent = data.priceSegments.premium.growth; | |
| document.getElementById('pricingStrategy').textContent = data.pricingStrategy; | |
| document.getElementById('cagr').textContent = data.cagr; | |
| document.getElementById('futureMarket').textContent = `$${data.futureMarket}`; | |
| document.getElementById('lastUpdated').textContent = data.lastUpdated; | |
| document.getElementById('dynamicUpdateTime').textContent = data.lastUpdated; | |
| document.getElementById('competitorUpdate').textContent = "Today"; | |
| } | |
| // Chart creation functions | |
| let opportunityGauge, skuChart, competitorChart, featuresChart, geoChart, priceChart, growthChart; | |
| function createCharts(data) { | |
| // Destroy existing charts if they exist | |
| if (opportunityGauge) opportunityGauge.destroy(); | |
| if (skuChart) skuChart.destroy(); | |
| if (competitorChart) competitorChart.destroy(); | |
| if (featuresChart) featuresChart.destroy(); | |
| if (geoChart) geoChart.destroy(); | |
| if (priceChart) priceChart.destroy(); | |
| if (growthChart) growthChart.destroy(); | |
| // Opportunity Gauge | |
| const opportunityCtx = document.getElementById('opportunityGauge').getContext('2d'); | |
| opportunityGauge = new Chart(opportunityCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Score', 'Remaining'], | |
| datasets: [{ | |
| data: [data.opportunityScore, 100 - data.opportunityScore], | |
| backgroundColor: [ | |
| getOpportunityColor(data.opportunityScore), | |
| '#f3f4f6' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| cutout: '80%', | |
| rotation: -90, | |
| circumference: 180, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| enabled: false | |
| } | |
| } | |
| } | |
| }); | |
| // SKU Chart | |
| const skuCtx = document.getElementById('skuChart').getContext('2d'); | |
| skuChart = new Chart(skuCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['25% Coverage', '50% Coverage', '75% Coverage'], | |
| datasets: [{ | |
| label: 'SKUs Needed', | |
| data: [ | |
| parseInt(data.sku25.split('-')[0]), | |
| parseInt(data.sku50.split('-')[0]), | |
| parseInt(data.sku75.split('-')[0]) | |
| ], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(59, 130, 246, 0.9)', | |
| 'rgba(59, 130, 246, 1)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(59, 130, 246, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) label += ': '; | |
| if (context.parsed.y !== null) { | |
| const ranges = [data.sku25, data.sku50, data.sku75]; | |
| label += ranges[context.dataIndex]; | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: 'Number of SKUs' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Competitor Chart (sample data) | |
| const competitorCtx = document.getElementById('competitorChart').getContext('2d'); | |
| competitorChart = new Chart(competitorCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Brand A', 'Brand B', 'Brand C', 'Brand D', 'Brand E'], | |
| datasets: [{ | |
| label: 'Market Share %', | |
| data: [22, 18, 15, 12, 8], | |
| backgroundColor: 'rgba(79, 70, 229, 0.7)', | |
| borderColor: 'rgba(79, 70, 229, 1)', | |
| borderWidth: 1 | |
| }, { | |
| label: 'Avg. Price $', | |
| data: [249, 199, 179, 149, 99], | |
| backgroundColor: 'rgba(99, 102, 241, 0.7)', | |
| borderColor: 'rgba(99, 102, 241, 1)', | |
| borderWidth: 1, | |
| type: 'line', | |
| yAxisID: 'y1' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| tooltip: { | |
| mode: 'index', | |
| intersect: true | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| type: 'linear', | |
| display: true, | |
| position: 'left', | |
| title: { | |
| display: true, | |
| text: 'Market Share %' | |
| } | |
| }, | |
| y1: { | |
| type: 'linear', | |
| display: true, | |
| position: 'right', | |
| grid: { | |
| drawOnChartArea: false | |
| }, | |
| title: { | |
| display: true, | |
| text: 'Price $' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Features Chart (sample data) | |
| const featuresCtx = document.getElementById('featuresChart').getContext('2d'); | |
| featuresChart = new Chart(featuresCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['WiFi', 'Voice Control', 'AI Learning', 'Energy Reports', 'Geofencing', 'Multi-Room', 'Remote Sensors'], | |
| datasets: [{ | |
| label: 'Feature Adoption %', | |
| data: [92, 78, 65, 58, 45, 42, 32], | |
| backgroundColor: 'rgba(99, 102, 241, 0.2)', | |
| borderColor: 'rgba(99, 102, 241, 1)', | |
| pointBackgroundColor: 'rgba(99, 102, 241, 1)', | |
| pointBorderColor: '#fff', | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: 'rgba(99, 102, 241, 1)' | |
| }] | |
| }, | |
| options: { | |
| elements: { | |
| line: { | |
| borderWidth: 3 | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // Geo Chart | |
| const geoCtx = document.getElementById('geoChart').getContext('2d'); | |
| geoChart = new Chart(geoCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['North America', 'Europe', 'Asia Pacific', 'Rest of World'], | |
| datasets: [{ | |
| data: [data.geoData.na, data.geoData.eu, data.geoData.ap, data.geoData.row], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(245, 158, 11, 0.7)', | |
| 'rgba(124, 58, 237, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(245, 158, 11, 1)', | |
| 'rgba(124, 58, 237, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| // Price Chart | |
| const priceCtx = document.getElementById('priceChart').getContext('2d'); | |
| priceChart = new Chart(priceCtx, { | |
| type: 'scatter', | |
| data: { | |
| datasets: [{ | |
| label: 'Product Prices', | |
| data: generatePriceData(data), | |
| backgroundColor: 'rgba(79, 70, 229, 0.7)', | |
| borderColor: 'rgba(79, 70, 229, 1)', | |
| borderWidth: 1, | |
| pointRadius: 6 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `Price: $${context.parsed.x}, Products: ${context.parsed.y}`; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| title: { | |
| display: true, | |
| text: 'Price ($)' | |
| } | |
| }, | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'Number of Products' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Growth Chart | |
| const growthCtx = document.getElementById('growthChart').getContext('2d'); | |
| growthChart = new Chart(growthCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2023', '2024', '2025', '2026', '2027', '2028'], | |
| datasets: [{ | |
| label: 'Market Size ($B)', | |
| data: generateGrowthData(data), | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| borderColor: 'rgba(16, 185, 129, 1)', | |
| borderWidth: 3, | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `$${context.parsed.y.toFixed(1)}B`; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'Market Size ($B)' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Helper functions for chart data generation | |
| function generatePriceData(data) { | |
| const priceData = []; | |
| const budgetRange = data.priceSegments.budget.range.replace('$', '').split('-'); | |
| const midRange = data.priceSegments.mid.range.replace('$', '').split('-'); | |
| const premiumRange = data.priceSegments.premium.range.replace('$', '').replace('+', '').split('-'); | |
| // Budget segment | |
| for (let i = parseInt(budgetRange[0]); i <= parseInt(budgetRange[1]); i += 10) { | |
| priceData.push({ | |
| x: i, | |
| y: Math.floor(Math.random() * 5) + 5 | |
| }); | |
| } | |
| // Mid segment | |
| for (let i = parseInt(midRange[0]); i <= parseInt(midRange[1]); i += 15) { | |
| priceData.push({ | |
| x: i, | |
| y: Math.floor(Math.random() * 8) + 8 | |
| }); | |
| } | |
| // Premium segment | |
| for (let i = parseInt(premiumRange[0]); i <= parseInt(premiumRange[1]); i += 25) { | |
| priceData.push({ | |
| x: i, | |
| y: Math.floor(Math.random() * 3) + 1 | |
| }); | |
| } | |
| // Add some premium+ products | |
| if (premiumRange[1].includes('+')) { | |
| const maxPrice = parseInt(premiumRange[1].replace('+', '')) + 200; | |
| for (let i = parseInt(premiumRange[1].replace('+', '')) + 50; i <= maxPrice; i += 50) { | |
| priceData.push({ | |
| x: i, | |
| y: Math.floor(Math.random() * 2) | |
| }); | |
| } | |
| } | |
| return priceData; | |
| } | |
| function generateGrowthData(data) { | |
| const growthData = []; | |
| const currentMarket = parseFloat(data.marketSize); | |
| const cagr = parseFloat(data.cagr) / 100; | |
| const futureMarket = parseFloat(data.futureMarket.replace('$', '').replace('B', '')); | |
| growthData.push(currentMarket); | |
| // Generate intermediate years | |
| for (let i = 1; i <= 4; i++) { | |
| growthData.push(currentMarket * Math.pow(1 + cagr, i)); | |
| } | |
| growthData.push(futureMarket); | |
| return growthData; | |
| } | |
| // Helper function to get color based on opportunity score | |
| function getOpportunityColor(score) { | |
| if (score >= 80) return 'rgba(16, 185, 129, 0.7)'; // Green | |
| if (score >= 60) return 'rgba(234, 179, 8, 0.7)'; // Yellow | |
| if (score >= | |
| </html> |