|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PoliScan AI | Political Analytics Dashboard</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
.network-node { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.network-node:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); |
|
|
} |
|
|
.chatbot-message { |
|
|
max-width: 80%; |
|
|
animation: fadeIn 0.3s ease; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
.knowledge-graph { |
|
|
background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 font-sans"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-blue-500 text-white p-2 rounded-lg"> |
|
|
<i class="fas fa-chart-line text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold text-blue-600">Nagara Institute <span class="text-blue-400"></span></h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="hidden md:flex items-center space-x-1 text-sm"> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">Live Data</span> |
|
|
<span class="text-gray-500">Last updated: 2 min ago</span> |
|
|
</div> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition"> |
|
|
<i class="fas fa-download mr-1"></i> Export Report |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 container mx-auto px-4 py-6"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-1 bg-white rounded-xl shadow-sm p-4"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="font-semibold text-gray-700 mb-3">Political Focus</h2> |
|
|
<div class="space-y-2"> |
|
|
<button class="w-full text-left px-3 py-2 bg-blue-50 text-blue-600 rounded-lg font-medium flex items-center justify-between"> |
|
|
<span>Presidential Race</span> |
|
|
<i class="fas fa-chevron-right text-sm"></i> |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50 rounded-lg font-medium flex items-center justify-between"> |
|
|
<span>Congressional</span> |
|
|
<i class="fas fa-chevron-right text-sm"></i> |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50 rounded-lg font-medium flex items-center justify-between"> |
|
|
<span>State Elections</span> |
|
|
<i class="fas fa-chevron-right text-sm"></i> |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 hover:bg-gray-50 rounded-lg font-medium flex items-center justify-between"> |
|
|
<span>Policy Issues</span> |
|
|
<i class="fas fa-chevron-right text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="font-semibold text-gray-700 mb-3">Time Frame</h2> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg">24h</button> |
|
|
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-sm rounded-lg">7d</button> |
|
|
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-sm rounded-lg">30d</button> |
|
|
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-sm rounded-lg">Custom</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="font-semibold text-gray-700 mb-3">Key Metrics</h2> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-600">Engagement Score</span> |
|
|
<span class="text-sm font-medium text-green-600">+12%</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-600">Sentiment Ratio</span> |
|
|
<span class="text-sm font-medium text-blue-600">3.2:1</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-600">Influence Reach</span> |
|
|
<span class="text-sm font-medium text-purple-600">2.4M</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-600">Topic Velocity</span> |
|
|
<span class="text-sm font-medium text-orange-600">High</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-3 bg-blue-50 rounded-lg"> |
|
|
<h3 class="text-sm font-medium text-blue-800 mb-1">AI Insight</h3> |
|
|
<p class="text-xs text-blue-700">Our models detect rising interest in healthcare policy among undecided voters in swing states.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-3 space-y-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
|
|
<div class="bg-white p-4 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Total Mentions</p> |
|
|
<h3 class="text-2xl font-bold">24,892</h3> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-comment-dots text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-green-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 14% from yesterday</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Positive Sentiment</p> |
|
|
<h3 class="text-2xl font-bold">68%</h3> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-smile text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-blue-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 5% from yesterday</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Key Influencers</p> |
|
|
<h3 class="text-2xl font-bold">142</h3> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-user-tie text-purple-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-purple-600 mt-2">Engaging 82% of audience</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Opponent Ratio</p> |
|
|
<h3 class="text-2xl font-bold">1.8:1</h3> |
|
|
</div> |
|
|
<div class="bg-red-100 p-3 rounded-full"> |
|
|
<i class="fas fa-balance-scale-right text-red-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-red-600 mt-2"><i class="fas fa-arrow-down mr-1"></i> 0.3 from last week</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-5 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="font-semibold text-lg">Sentiment Analysis</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-sm rounded-lg">By Region</button> |
|
|
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-sm rounded-lg">By Demographics</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="sentimentChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-5 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="font-semibold text-lg">Influence Network</h2> |
|
|
<div class="text-sm text-gray-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> Size indicates reach, color indicates sentiment |
|
|
</div> |
|
|
</div> |
|
|
<div class="knowledge-graph h-64 rounded-lg relative overflow-hidden flex items-center justify-center"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="w-48 h-48 rounded-full bg-blue-100 opacity-30"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="network-node absolute w-12 h-12 bg-green-400 rounded-full flex items-center justify-center shadow-md cursor-pointer" style="top: 30%; left: 20%"> |
|
|
<i class="fas fa-user text-white"></i> |
|
|
</div> |
|
|
<div class="network-node absolute w-16 h-16 bg-blue-400 rounded-full flex items-center justify-center shadow-md cursor-pointer" style="top: 40%; left: 50%"> |
|
|
<i class="fas fa-user-tie text-white"></i> |
|
|
</div> |
|
|
<div class="network-node absolute w-14 h-14 bg-yellow-400 rounded-full flex items-center justify-center shadow-md cursor-pointer" style="top: 60%; left: 30%"> |
|
|
<i class="fas fa-user-graduate text-white"></i> |
|
|
</div> |
|
|
<div class="network-node absolute w-10 h-10 bg-red-400 rounded-full flex items-center justify-center shadow-md cursor-pointer" style="top: 25%; left: 70%"> |
|
|
<i class="fas fa-user-shield text-white"></i> |
|
|
</div> |
|
|
<div class="network-node absolute w-8 h-8 bg-purple-400 rounded-full flex items-center justify-center shadow-md cursor-pointer" style="top: 70%; left: 70%"> |
|
|
<i class="fas fa-user-md text-white"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<svg class="absolute inset-0 w-full h-full" style="z-index: 0;"> |
|
|
<line x1="20%" y1="30%" x2="50%" y2="40%" stroke="#93c5fd" stroke-width="2" stroke-dasharray="5,5" /> |
|
|
<line x1="50%" y1="40%" x2="30%" y2="60%" stroke="#93c5fd" stroke-width="2" stroke-dasharray="5,5" /> |
|
|
<line x1="50%" y1="40%" x2="70%" y2="25%" stroke="#93c5fd" stroke-width="2" stroke-dasharray="5,5" /> |
|
|
<line x1="50%" y1="40%" x2="70%" y2="70%" stroke="#93c5fd" stroke-width="2" stroke-dasharray="5,5" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="mt-4 grid grid-cols-2 md:grid-cols-5 gap-2 text-xs"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-green-400 rounded-full mr-1"></div> |
|
|
<span>Strong Supporters</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-blue-400 rounded-full mr-1"></div> |
|
|
<span>Key Influencers</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-yellow-400 rounded-full mr-1"></div> |
|
|
<span>Neutral Voices</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-red-400 rounded-full mr-1"></div> |
|
|
<span>Opposition</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-purple-400 rounded-full mr-1"></div> |
|
|
<span>Media</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-5 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="font-semibold text-lg">Indonesian Political Profiles</h2> |
|
|
<div class="text-sm text-gray-500"> |
|
|
<i class="fas fa-user-tag mr-1"></i> Latent Profile Analysis |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div class="border rounded-lg p-3 text-center"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-landmark text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Democratic Reformists</h3> |
|
|
<p class="text-xs text-gray-500">23% of population</p> |
|
|
<div class="mt-2 text-xs"> |
|
|
<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded">Progressive</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-3 text-center"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-mosque text-green-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Muslim Socialists</h3> |
|
|
<p class="text-xs text-gray-500">18% of population</p> |
|
|
<div class="mt-2 text-xs"> |
|
|
<span class="inline-block bg-green-100 text-green-800 px-2 py-1 rounded">Religious</span> |
|
|
<span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-1 rounded ml-1">Economic Left</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-3 text-center"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-university text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Technocratic Centrists</h3> |
|
|
<p class="text-xs text-gray-500">31% of population</p> |
|
|
<div class="mt-2 text-xs"> |
|
|
<span class="inline-block bg-purple-100 text-purple-800 px-2 py-1 rounded">Moderate</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-3 text-center"> |
|
|
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-shield-alt text-red-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">National Conservatives</h3> |
|
|
<p class="text-xs text-gray-500">28% of population</p> |
|
|
<div class="mt-2 text-xs"> |
|
|
<span class="inline-block bg-red-100 text-red-800 px-2 py-1 rounded">Traditional</span> |
|
|
<span class="inline-block bg-gray-100 text-gray-800 px-2 py-1 rounded ml-1">Patriotic</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 text-xs text-gray-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> Profiles derived from AI analysis of 1.2M social media profiles and survey responses |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-5 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="font-semibold text-lg">Trending Topics</h2> |
|
|
<div class="text-sm text-blue-600"> |
|
|
<i class="fas fa-bolt mr-1"></i> Rising Fast |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium mr-3 mt-1">1</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Healthcare Reform</h3> |
|
|
<p class="text-xs text-gray-500">+42% mentions in last 6h</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium mr-3 mt-1">2</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Tax Policy</h3> |
|
|
<p class="text-xs text-gray-500">+28% mentions in last 6h</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium mr-3 mt-1">3</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Climate Change</h3> |
|
|
<p class="text-xs text-gray-500">+19% mentions in last 6h</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs font-medium mr-3 mt-1">4</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Education</h3> |
|
|
<p class="text-xs text-gray-500">+12% mentions in last 6h</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs font-medium mr-3 mt-1">5</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Immigration</h3> |
|
|
<p class="text-xs text-gray-500">+8% mentions in last 6h</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-5 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="font-semibold text-lg">Top Influencers</h2> |
|
|
<div class="text-sm text-gray-500"> |
|
|
<i class="fas fa-star mr-1 text-yellow-500"></i> Impact Score |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">@PoliticalAnalyst</h3> |
|
|
<p class="text-xs text-gray-500">Engagement: 92% • Reach: 1.2M</p> |
|
|
</div> |
|
|
<div class="text-sm font-medium text-green-600">9.8</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-user-tie"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">@NewsAnchor</h3> |
|
|
<p class="text-xs text-gray-500">Engagement: 87% • Reach: 950K</p> |
|
|
</div> |
|
|
<div class="text-sm font-medium text-green-600">9.2</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-user-graduate"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">@PolicyWonk</h3> |
|
|
<p class="text-xs text-gray-500">Engagement: 84% • Reach: 780K</p> |
|
|
</div> |
|
|
<div class="text-sm font-medium text-green-600">8.9</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-user-md"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">@EconProfessor</h3> |
|
|
<p class="text-xs text-gray-500">Engagement: 79% • Reach: 650K</p> |
|
|
</div> |
|
|
<div class="text-sm font-medium text-blue-600">8.3</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-user-shield"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">@OppositionVoice</h3> |
|
|
<p class="text-xs text-gray-500">Engagement: 72% • Reach: 1.1M</p> |
|
|
</div> |
|
|
<div class="text-sm font-medium text-blue-600">8.1</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6 z-50"> |
|
|
<div class="relative"> |
|
|
|
|
|
<button id="chatbotToggle" class="w-14 h-14 bg-blue-600 rounded-full shadow-lg flex items-center justify-center text-white hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-robot text-xl"></i> |
|
|
<span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-xs pulse">AI</span> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div id="chatbotWindow" class="hidden absolute bottom-16 right-0 w-80 bg-white rounded-t-xl rounded-bl-xl shadow-xl overflow-hidden flex flex-col" style="height: 400px;"> |
|
|
|
|
|
<div class="bg-blue-600 text-white p-3 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> |
|
|
<span class="font-medium">PoliScan AI Assistant</span> |
|
|
</div> |
|
|
<button id="closeChatbot" class="text-white hover:text-blue-200"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatbotMessages" class="flex-1 p-4 overflow-y-auto space-y-3"> |
|
|
<div class="chatbot-message bg-blue-50 text-blue-800 p-3 rounded-lg rounded-tl-none"> |
|
|
<p>Hello! I'm your PoliScan AI assistant. How can I help you analyze today's political landscape?</p> |
|
|
</div> |
|
|
<div class="chatbot-message bg-blue-50 text-blue-800 p-3 rounded-lg rounded-tl-none"> |
|
|
<p>You can ask me things like:<br> |
|
|
- "What's the sentiment on healthcare policy?"<br> |
|
|
- "Show me key influencers in the Midwest"<br> |
|
|
- "What topics are trending among young voters?"</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-3 border-t"> |
|
|
<div class="flex"> |
|
|
<input id="chatbotInput" type="text" placeholder="Ask about the data..." class="flex-1 border rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"> |
|
|
<button id="sendMessage" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">AI-powered political insights</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const sentimentCtx = document.getElementById('sentimentChart').getContext('2d'); |
|
|
const sentimentChart = new Chart(sentimentCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Healthcare', 'Economy', 'Education', 'Immigration', 'Climate', 'Foreign Policy'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Positive', |
|
|
data: [65, 58, 42, 38, 72, 55], |
|
|
backgroundColor: '#4ade80', |
|
|
borderRadius: 4 |
|
|
}, |
|
|
{ |
|
|
label: 'Neutral', |
|
|
data: [20, 25, 35, 30, 15, 25], |
|
|
backgroundColor: '#93c5fd', |
|
|
borderRadius: 4 |
|
|
}, |
|
|
{ |
|
|
label: 'Negative', |
|
|
data: [15, 17, 23, 32, 13, 20], |
|
|
backgroundColor: '#f87171', |
|
|
borderRadius: 4 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
x: { |
|
|
stacked: true, |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
stacked: true, |
|
|
beginAtZero: true, |
|
|
max: 100, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value + '%'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
return context.dataset.label + ': ' + context.raw + '%'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const chatbotToggle = document.getElementById('chatbotToggle'); |
|
|
const chatbotWindow = document.getElementById('chatbotWindow'); |
|
|
const closeChatbot = document.getElementById('closeChatbot'); |
|
|
const chatbotMessages = document.getElementById('chatbotMessages'); |
|
|
const chatbotInput = document.getElementById('chatbotInput'); |
|
|
const sendMessage = document.getElementById('sendMessage'); |
|
|
|
|
|
chatbotToggle.addEventListener('click', function() { |
|
|
chatbotWindow.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
closeChatbot.addEventListener('click', function() { |
|
|
chatbotWindow.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
function addBotMessage(message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'chatbot-message bg-blue-50 text-blue-800 p-3 rounded-lg rounded-tl-none'; |
|
|
messageDiv.innerHTML = `<p>${message}</p>`; |
|
|
chatbotMessages.appendChild(messageDiv); |
|
|
chatbotMessages.scrollTop = chatbotMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
function addUserMessage(message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'chatbot-message ml-auto bg-gray-100 text-gray-800 p-3 rounded-lg rounded-tr-none'; |
|
|
messageDiv.innerHTML = `<p>${message}</p>`; |
|
|
chatbotMessages.appendChild(messageDiv); |
|
|
chatbotMessages.scrollTop = chatbotMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
sendMessage.addEventListener('click', function() { |
|
|
const message = chatbotInput.value.trim(); |
|
|
if (message) { |
|
|
addUserMessage(message); |
|
|
chatbotInput.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const responses = [ |
|
|
"Our sentiment analysis shows 68% positive mentions about healthcare policy in swing states.", |
|
|
"The top 3 influencers discussing this topic are @PoliticalAnalyst, @NewsAnchor, and @PolicyWonk.", |
|
|
"Healthcare mentions have increased by 42% in the last 6 hours, primarily among voters aged 35-54.", |
|
|
"Our network analysis identifies 12 key nodes amplifying this message with a combined reach of 4.2M.", |
|
|
"Would you like me to generate a detailed report on this trend?" |
|
|
]; |
|
|
addBotMessage(responses[Math.floor(Math.random() * responses.length)]); |
|
|
}, 800); |
|
|
} |
|
|
}); |
|
|
|
|
|
chatbotInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const networkNodes = document.querySelectorAll('.network-node'); |
|
|
networkNodes.forEach(node => { |
|
|
node.addEventListener('click', function() { |
|
|
const tooltip = document.createElement('div'); |
|
|
tooltip.className = 'absolute bg-white p-2 rounded shadow-lg text-xs z-50'; |
|
|
tooltip.style.top = '-40px'; |
|
|
tooltip.style.left = '50%'; |
|
|
tooltip.style.transform = 'translateX(-50%)'; |
|
|
tooltip.innerHTML = 'Influence Score: 8.7<br>Reach: 1.1M'; |
|
|
|
|
|
|
|
|
const existingTooltip = this.querySelector('.tooltip'); |
|
|
if (existingTooltip) { |
|
|
existingTooltip.remove(); |
|
|
} |
|
|
|
|
|
tooltip.classList.add('tooltip'); |
|
|
this.appendChild(tooltip); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
tooltip.remove(); |
|
|
}, 3000); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=daffafrs/nagara-institute-prototype" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
