Huggin112/experthive-buzz
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Expert Details | INJ Expert Matcher</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10</head>11<body class="bg-gray-50 min-h-screen">12 <!-- Navigation -->13 <nav class="bg-white shadow-sm">14 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">15 <div class="flex justify-between h-16">16 <div class="flex items-center">17 <div class="flex-shrink-0 flex items-center">18 <i data-feather="users" class="h-8 w-8 text-indigo-600"></i>19 <span class="ml-2 text-xl font-bold text-indigo-600">INJ Expert Matcher</span>20 </div>21 </div>22 <div class="hidden sm:ml-6 sm:flex sm:items-center">23 <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">24 Sign In25 </button>26 </div>27 </div>28 </div>29 </nav>30 31 <!-- Expert Details -->32 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">33 <div class="bg-white shadow rounded-lg overflow-hidden">34 <div id="expert-details" class="p-8">35 <!-- Content will be loaded dynamically -->36 <div class="text-center py-12">37 <div class="animate-spin inline-block w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full"></div>38 <p class="mt-4 text-gray-500">Loading expert details...</p>39 </div>40 </div>41 </div>42 </div>43 44 <script>45 const API_BASE_URL = 'https://your-api-endpoint.com/api';46 47 async function loadExpertDetails() {48 const urlParams = new URLSearchParams(window.location.search);49 const expertId = urlParams.get('id');50 51 if (!expertId) {52 window.location.href = '/';53 return;54 }55 56 try {57 const response = await fetch(`${API_BASE_URL}/expert/${expertId}`);58 if (!response.ok) throw new Error('Failed to load expert details');59 60 const expert = await response.json();61 displayExpertDetails(expert);62 } catch (error) {63 console.error('Error loading expert:', error);64 document.getElementById('expert-details').innerHTML = `65 <div class="text-center py-12">66 <i data-feather="alert-triangle" class="mx-auto h-12 w-12 text-red-500"></i>67 <h3 class="mt-2 text-lg font-medium text-gray-900">Failed to load expert</h3>68 <p class="mt-1 text-sm text-gray-500">${error.message}</p>69 <button onclick="window.location.href='/'" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">70 Back to Search71 </button>72 </div>73 `;74 feather.replace();75 }76 }77 78 function displayExpertDetails(expert) {79 const detailsContainer = document.getElementById('expert-details');80 detailsContainer.innerHTML = `81 <div class="flex flex-col md:flex-row">82 <div class="md:w-1/3 text-center md:text-left mb-6 md:mb-0">83 <img class="h-32 w-32 rounded-full mx-auto md:mx-0 object-cover" src="${expert.imageUrl}" alt="${expert.name}">84 <h1 class="mt-4 text-2xl font-bold text-gray-900">${expert.name}</h1>85 <p class="text-lg text-gray-600">${expert.title} at ${expert.company}</p>86 <p class="mt-2 text-gray-500 flex items-center justify-center md:justify-start">87 <i data-feather="map-pin" class="mr-2"></i> ${expert.location}88 </p>89 <div class="mt-4 flex justify-center md:justify-start space-x-4">90 <button onclick="connectOnLinkedIn('${expert.linkedinUrl}')" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">91 <i data-feather="send" class="-ml-1 mr-2"></i> Connect92 </button>93 <button onclick="window.history.back()" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">94 <i data-feather="arrow-left" class="-ml-1 mr-2"></i> Back95 </button>96 </div>97 </div>98 <div class="md:w-2/3 md:pl-8">99 <div class="bg-gray-50 p-6 rounded-lg">100 <h2 class="text-lg font-medium text-gray-900">Expertise Summary</h2>101 <p class="mt-2 text-gray-700">${expert.summary}</p>102 </div>103 104 <div class="mt-6">105 <h2 class="text-lg font-medium text-gray-900">Skills & Specializations</h2>106 <div class="mt-2 flex flex-wrap gap-2">107 ${expert.skills.map(skill => `108 <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">109 ${skill}110 </span>111 `).join('')}112 </div>113 </div>114 115 <div class="mt-6">116 <h2 class="text-lg font-medium text-gray-900">Career Highlights</h2>117 <div class="mt-4 space-y-4">118 ${expert.experience.map(exp => `119 <div class="border-l-4 border-indigo-200 pl-4 py-1">120 <h3 class="font-medium text-gray-900">${exp.role}</h3>121 <p class="text-sm text-gray-500">${exp.company} • ${exp.duration}</p>122 ${exp.description ? `<p class="mt-1 text-gray-700">${exp.description}</p>` : ''}123 </div>124 `).join('')}125 </div>126 </div>127 </div>128 </div>129 `;130 feather.replace();131 }132 133 function connectOnLinkedIn(profileUrl) {134 window.open(`https://${profileUrl}`, '_blank');135 }136 137 document.addEventListener('DOMContentLoaded', loadExpertDetails);138 </script>139</body>140</html>