|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Parixit Sutariya Analysis | Flutterfolio</title> |
|
|
<link rel="icon" type="image/x-icon" href="https://static.photos/blue/200x200/7"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #4F46E5 0%, #06B6D4 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white min-h-screen"> |
|
|
|
|
|
<nav class="py-6 px-4 sm:px-8 lg:px-16 backdrop-blur-md bg-gray-900/50 border-b border-gray-800"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="dribbble" class="text-blue-400 w-6 h-6"></i> |
|
|
<span class="text-xl font-bold gradient-text">Flutterfolio</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="index.html" class="hover:text-blue-400 transition">Home</a> |
|
|
<a href="index.html#about" class="hover:text-blue-400 transition">About</a> |
|
|
<a href="index.html#projects" class="hover:text-blue-400 transition">Projects</a> |
|
|
<a href="index.html#skills" class="hover:text-blue-400 transition">Skills</a> |
|
|
<a href="index.html#contact" class="hover:text-blue-400 transition">Contact</a> |
|
|
<a href="analysis.html" class="text-blue-400">Analysis</a> |
|
|
</div> |
|
|
<button class="md:hidden" id="menu-toggle"> |
|
|
<i data-feather="menu" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 sm:px-8 lg:px-16 py-12"> |
|
|
<div class="max-w-4xl mx-auto bg-gray-800/50 rounded-xl p-8 shadow-xl"> |
|
|
<h1 class="text-3xl font-bold mb-6 text-center gradient-text">Parixit Sutariya Analysis</h1> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<input type="text" id="search-query" |
|
|
class="flex-grow px-4 py-3 bg-gray-700/50 border border-gray-700 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" |
|
|
placeholder="Enter search query" value="Parixit Sutariya"> |
|
|
<button id="search-btn" |
|
|
class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-r-lg font-medium transition"> |
|
|
Search |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm">Enter a name or topic to analyze search results from Google.</p> |
|
|
</div> |
|
|
|
|
|
<div id="results-container" class="space-y-6 hidden"> |
|
|
<div class="border-b border-gray-700 pb-6"> |
|
|
<h2 class="text-2xl font-semibold mb-2">Analysis Results</h2> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<div class="flex-1 bg-gray-700/50 p-4 rounded-lg"> |
|
|
<h3 class="text-blue-400 mb-2">Most Common Sources</h3> |
|
|
<div id="sources-chart" class="h-48"></div> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-700/50 p-4 rounded-lg"> |
|
|
<h3 class="text-blue-400 mb-2">Sentiment Analysis</h3> |
|
|
<div id="sentiment-chart" class="h-48"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="search-results" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="py-8 px-4 sm:px-8 lg:px-16 border-t border-gray-800 mt-12"> |
|
|
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<i data-feather="dribbble" class="text-blue-400 w-5 h-5"></i> |
|
|
<span class="text-lg font-bold gradient-text">Flutterfolio</span> |
|
|
</div> |
|
|
<div class="text-gray-400 text-sm mb-4 md:mb-0"> |
|
|
© 2023 Flutterfolio. All rights reserved. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.getElementById('search-btn').addEventListener('click', function() { |
|
|
const query = document.getElementById('search-query').value.trim(); |
|
|
if (query) { |
|
|
performAnalysis(query); |
|
|
} |
|
|
}); |
|
|
|
|
|
function performAnalysis(query) { |
|
|
// Show loading state |
|
|
const resultsContainer = document.getElementById('results-container'); |
|
|
resultsContainer.innerHTML = ` |
|
|
<div class="text-center py-12"> |
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div> |
|
|
<p>Analyzing search results for "${query}"...</p> |
|
|
</div> |
|
|
`; |
|
|
resultsContainer.classList.remove('hidden'); |
|
|
|
|
|
// Simulate API call with timeout |
|
|
setTimeout(() => { |
|
|
displayResults(query); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
function displayResults(query) { |
|
|
const resultsContainer = document.getElementById('results-container'); |
|
|
const searchResults = document.getElementById('search-results'); |
|
|
|
|
|
// Mock data for demonstration |
|
|
const mockResults = [ |
|
|
{ |
|
|
title: "Parixit Sutariya - LinkedIn", |
|
|
url: "https://www.linkedin.com/in/parixitsutariya", |
|
|
snippet: "Parixit Sutariya is a professional on LinkedIn. View Parixit Sutariya's profile to see their experience, education, and connections." |
|
|
}, |
|
|
{ |
|
|
title: "Parixit Sutariya - Crunchbase Profile", |
|
|
url: "https://www.crunchbase.com/person/parixit-sutariya", |
|
|
snippet: "Parixit Sutariya is associated with several companies in the technology sector. See their investments and board memberships." |
|
|
}, |
|
|
{ |
|
|
title: "Interview with Parixit Sutariya - Tech Insights", |
|
|
url: "https://techinsights.com/interviews/parixit-sutariya", |
|
|
snippet: "In this exclusive interview, Parixit Sutariya shares insights about the future of mobile technology and Flutter development." |
|
|
} |
|
|
]; |
|
|
|
|
|
// Update results container |
|
|
resultsContainer.innerHTML = ` |
|
|
<div class="border-b border-gray-700 pb-6"> |
|
|
<h2 class="text-2xl font-semibold mb-2">Analysis Results for "${query}"</h2> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<div class="flex-1 bg-gray-700/50 p-4 rounded-lg"> |
|
|
<h3 class="text-blue-400 mb-2">Top Sources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex justify-between"> |
|
|
<span>LinkedIn</span> |
|
|
<span class="text-gray-400">35%</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span>Crunchbase</span> |
|
|
<span class="text-gray-400">25%</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span>Tech Blogs</span> |
|
|
<span class="text-gray-400">20%</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span>News Sites</span> |
|
|
<span class="text-gray-400">15%</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span>Other</span> |
|
|
<span class="text-gray-400">5%</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-700/50 p-4 rounded-lg"> |
|
|
<h3 class="text-blue-400 mb-2">Sentiment Analysis</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex justify-between"> |
|
|
<span>Positive</span> |
|
|
<span class="text-green-400">68%</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span>Neutral</span> |
|
|
<span class="text-gray-400">27%</span> |
|
|
</li> |
|
|
<li class="flex justify-between"> |
|
|
<span>Negative</span> |
|
|
<span class="text-red-400">5%</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div id="search-results" class="space-y-4"></div> |
|
|
`; |
|
|
|
|
|
// Populate search results |
|
|
const resultsElement = document.getElementById('search-results'); |
|
|
resultsElement.innerHTML = mockResults.map(result => ` |
|
|
<div class="bg-gray-700/30 p-4 rounded-lg border border-gray-800"> |
|
|
<h3 class="text-lg font-medium text-blue-400 mb-1"> |
|
|
<a href="${result.url}" target="_blank" class="hover:underline">${result.title}</a> |
|
|
</h3> |
|
|
<p class="text-gray-300 text-sm">${result.snippet}</p> |
|
|
<a href="${result.url}" target="_blank" class="text-blue-400 text-xs mt-2 inline-block hover:underline"> |
|
|
${new URL(result.url).hostname} |
|
|
</a> |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
// Mobile menu toggle |
|
|
document.getElementById('menu-toggle')?.addEventListener('click', function() { |
|
|
const navLinks = document.querySelector('.md\\:flex.space-x-8'); |
|
|
if (navLinks.style.display === 'flex') { |
|
|
navLinks.style.display = 'none'; |
|
|
} else { |
|
|
navLinks.style.display = 'flex'; |
|
|
navLinks.classList.add('flex-col', 'absolute', 'top-16', 'right-4', 'bg-gray-900', 'p-4', 'rounded-lg', 'space-y-4', 'space-x-0', 'border', 'border-gray-800'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
