| <!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> |
