analysis.html

<!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">
    <!-- Navigation -->
    <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 Content -->
    <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">
                    <!-- Results will be populated here by JavaScript -->
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <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">
                &copy; 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>