vjkrishn/linkedin-post-explorer
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>LinkedIn Post Explorer</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 <style>11 .post-card {12 transition: all 0.3s ease;13 }14 .post-card:hover {15 transform: translateY(-5px);16 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);17 }18 .gradient-bg {19 background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%);20 }21 </style>22</head>23<body class="bg-gray-50">24 <!-- Navigation -->25 <nav class="gradient-bg text-white shadow-lg">26 <div class="container mx-auto px-6 py-4">27 <div class="flex items-center justify-between">28 <div class="flex items-center space-x-4">29 <i data-feather="linkedin" class="w-8 h-8"></i>30 <span class="font-bold text-xl">LinkedIn Post Explorer</span>31 </div>32 <div class="hidden md:flex items-center space-x-8">33 <a href="#" class="hover:text-blue-200">Dashboard</a>34 <a href="#" class="hover:text-blue-200">Analytics</a>35 <a href="#" class="hover:text-blue-200">Settings</a>36 </div>37 <button class="md:hidden focus:outline-none">38 <i data-feather="menu" class="w-6 h-6"></i>39 </button>40 </div>41 </div>42 </nav>43 44 <!-- Hero Section -->45 <header class="gradient-bg text-white py-20">46 <div class="container mx-auto px-6 text-center">47 <h1 class="text-4xl md:text-6xl font-bold mb-6">Explore Your Published Posts</h1>48 <p class="text-xl md:text-2xl mb-8">Discover insights from your LinkedIn company page content</p>49 <button class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-blue-50 transition duration-300">50 Connect Your Account51 </button>52 </div>53 </header>54 55 <!-- Main Content -->56 <main class="container mx-auto px-6 py-12">57 <!-- Filters -->58 <div class="mb-12 bg-white rounded-xl shadow-md p-6">59 <h2 class="text-2xl font-bold mb-6 text-gray-800">Filter Posts</h2>60 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">61 <div>62 <label class="block text-gray-700 mb-2">Date Range</label>63 <select class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">64 <option>Last 30 days</option>65 <option>Last 3 months</option>66 <option>Last 6 months</option>67 <option>Last year</option>68 </select>69 </div>70 <div>71 <label class="block text-gray-700 mb-2">Post Type</label>72 <select class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">73 <option>All Posts</option>74 <option>Articles</option>75 <option>Images</option>76 <option>Videos</option>77 </select>78 </div>79 <div>80 <label class="block text-gray-700 mb-2">Engagement</label>81 <select class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">82 <option>All Engagement</option>83 <option>High Engagement</option>84 <option>Medium Engagement</option>85 <option>Low Engagement</option>86 </select>87 </div>88 <div class="flex items-end">89 <button class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-300">90 Apply Filters91 </button>92 </div>93 </div>94 </div>95 96 <!-- Posts Grid -->97 <div class="mb-12">98 <div class="flex justify-between items-center mb-6">99 <h2 class="text-2xl font-bold text-gray-800">Published Posts</h2>100 <div class="flex space-x-2">101 <button class="p-2 rounded-full hover:bg-gray-200">102 <i data-feather="grid"></i>103 </button>104 <button class="p-2 rounded-full hover:bg-gray-200">105 <i data-feather="list"></i>106 </button>107 </div>108 </div>109 110 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">111 <!-- Post Card 1 -->112 <div class="post-card bg-white rounded-xl shadow-md overflow-hidden">113 <img src="http://static.photos/technology/640x360/1" alt="Post image" class="w-full h-48 object-cover">114 <div class="p-6">115 <div class="flex items-center mb-2">116 <span class="text-sm text-gray-500">3 days ago</span>117 <span class="mx-2 text-gray-400">•</span>118 <span class="text-sm text-blue-600 font-medium">Article</span>119 </div>120 <h3 class="text-xl font-bold mb-3 text-gray-800">The Future of AI in Business</h3>121 <p class="text-gray-600 mb-4">Exploring how artificial intelligence is transforming modern business operations and decision-making processes.</p>122 <div class="flex justify-between text-gray-500">123 <span class="flex items-center">124 <i data-feather="eye" class="w-4 h-4 mr-1"></i> 1.2K125 </span>126 <span class="flex items-center">127 <i data-feather="thumbs-up" class="w-4 h-4 mr-1"></i> 245128 </span>129 <span class="flex items-center">130 <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 42131 </span>132 <span class="flex items-center">133 <i data-feather="share-2" class="w-4 h-4 mr-1"></i> 18134 </span>135 </div>136 </div>137 </div>138 139 <!-- Post Card 2 -->140 <div class="post-card bg-white rounded-xl shadow-md overflow-hidden">141 <img src="http://static.photos/office/640x360/2" alt="Post image" class="w-full h-48 object-cover">142 <div class="p-6">143 <div class="flex items-center mb-2">144 <span class="text-sm text-gray-500">1 week ago</span>145 <span class="mx-2 text-gray-400">•</span>146 <span class="text-sm text-blue-600 font-medium">Image</span>147 </div>148 <h3 class="text-xl font-bold mb-3 text-gray-800">Team Building Workshop</h3>149 <p class="text-gray-600 mb-4">Highlights from our recent team building activities that helped strengthen collaboration across departments.</p>150 <div class="flex justify-between text-gray-500">151 <span class="flex items-center">152 <i data-feather="eye" class="w-4 h-4 mr-1"></i> 856153 </span>154 <span class="flex items-center">155 <i data-feather="thumbs-up" class="w-4 h-4 mr-1"></i> 189156 </span>157 <span class="flex items-center">158 <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 31159 </span>160 <span class="flex items-center">161 <i data-feather="share-2" class="w-4 h-4 mr-1"></i> 12162 </span>163 </div>164 </div>165 </div>166 167 <!-- Post Card 3 -->168 <div class="post-card bg-white rounded-xl shadow-md overflow-hidden">169 <img src="http://static.photos/people/640x360/3" alt="Post image" class="w-full h-48 object-cover">170 <div class="p-6">171 <div class="flex items-center mb-2">172 <span class="text-sm text-gray-500">2 weeks ago</span>173 <span class="mx-2 text-gray-400">•</span>174 <span class="text-sm text-blue-600 font-medium">Video</span>175 </div>176 <h3 class="text-xl font-bold mb-3 text-gray-800">Customer Success Stories</h3>177 <p class="text-gray-600 mb-4">Hear directly from our customers about how our solutions helped them achieve their business goals.</p>178 <div class="flex justify-between text-gray-500">179 <span class="flex items-center">180 <i data-feather="eye" class="w-4 h-4 mr-1"></i> 1.5K181 </span>182 <span class="flex items-center">183 <i data-feather="thumbs-up" class="w-4 h-4 mr-1"></i> 312184 </span>185 <span class="flex items-center">186 <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 78187 </span>188 <span class="flex items-center">189 <i data-feather="share-2" class="w-4 h-4 mr-1"></i> 45190 </span>191 </div>192 </div>193 </div>194 </div>195 196 <!-- Pagination -->197 <div class="flex justify-center mt-12">198 <nav class="inline-flex rounded-md shadow">199 <a href="#" class="px-4 py-2 rounded-l-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">200 <i data-feather="chevron-left" class="w-5 h-5"></i>201 </a>202 <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">203 1204 </a>205 <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">206 2207 </a>208 <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">209 3210 </a>211 <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">212 ...213 </a>214 <a href="#" class="px-4 py-2 rounded-r-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">215 <i data-feather="chevron-right" class="w-5 h-5"></i>216 </a>217 </nav>218 </div>219 </div>220 </main>221 222 <!-- Footer -->223 <footer class="gradient-bg text-white py-12">224 <div class="container mx-auto px-6">225 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">226 <div>227 <h3 class="text-xl font-bold mb-4">LinkedIn Post Explorer</h3>228 <p class="text-blue-100">Gain valuable insights from your LinkedIn company page content to optimize your social media strategy.</p>229 </div>230 <div>231 <h4 class="font-semibold mb-4">Features</h4>232 <ul class="space-y-2">233 <li><a href="#" class="text-blue-100 hover:text-white">Post Analytics</a></li>234 <li><a href="#" class="text-blue-100 hover:text-white">Engagement Metrics</a></li>235 <li><a href="#" class="text-blue-100 hover:text-white">Content Calendar</a></li>236 <li><a href="#" class="text-blue-100 hover:text-white">Competitor Analysis</a></li>237 </ul>238 </div>239 <div>240 <h4 class="font-semibold mb-4">Resources</h4>241 <ul class="space-y-2">242 <li><a href="#" class="text-blue-100 hover:text-white">Blog</a></li>243 <li><a href="#" class="text-blue-100 hover:text-white">Documentation</a></li>244 <li><a href="#" class="text-blue-100 hover:text-white">API</a></li>245 <li><a href="#" class="text-blue-100 hover:text-white">Support</a></li>246 </ul>247 </div>248 <div>249 <h4 class="font-semibold mb-4">Connect</h4>250 <div class="flex space-x-4">251 <a href="#"><i data-feather="twitter" class="w-6 h-6 text-blue-100 hover:text-white"></i></a>252 <a href="#"><i data-feather="facebook" class="w-6 h-6 text-blue-100 hover:text-white"></i></a>253 <a href="#"><i data-feather="instagram" class="w-6 h-6 text-blue-100 hover:text-white"></i></a>254 <a href="#"><i data-feather="linkedin" class="w-6 h-6 text-blue-100 hover:text-white"></i></a>255 </div>256 </div>257 </div>258 <div class="border-t border-blue-400 mt-12 pt-8 text-center text-blue-100">259 <p>© 2023 LinkedIn Post Explorer. All rights reserved.</p>260 </div>261 </div>262 </footer>263 264 <script>265 feather.replace();266 267 // Animation for post cards on hover268 document.querySelectorAll('.post-card').forEach(card => {269 card.addEventListener('mouseenter', () => {270 card.style.transform = 'translateY(-5px)';271 card.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)';272 });273 card.addEventListener('mouseleave', () => {274 card.style.transform = '';275 card.style.boxShadow = '';276 });277 });278 </script>279</body>280</html>281