irahnarach/guidee-visual-knowledge-navigator
0
1<!DOCTYPE html>2<html lang="en" class="h-full bg-gray-50">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Visual Guide | Guidee</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: '#6366f1',17 secondary: '#8b5cf6',18 dark: '#1e293b'19 }20 }21 }22 }23 </script>24 <style>25 .sidebar-transition {26 transition: all 0.3s ease-in-out;27 }28 .guide-card:hover {29 transform: translateY(-4px);30 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);31 }32 .step-highlight {33 border-left: 4px solid #6366f1;34 }35 [contenteditable]:focus {36 outline: none;37 border-bottom: 1px dashed #8b5cf6;38 }39 </style>40</head>41<body class="h-full font-sans antialiased">42 <!-- Main Layout -->43 <div class="flex h-full">44 <!-- Collapsible Sidebar -->45 <div class="sidebar-transition bg-white w-64 border-r border-gray-200 flex-shrink-0 overflow-y-auto">46 <div class="p-4 flex items-center justify-between border-b border-gray-200">47 <h2 class="text-lg font-semibold text-gray-800">Guides</h2>48 <button class="p-1 rounded-md hover:bg-gray-100">49 <i data-feather="plus" class="w-5 h-5 text-primary"></i>50 </button>51 </div>52 <nav class="mt-2">53 <div class="px-4 py-2">54 <button class="w-full flex items-center justify-between text-gray-700 hover:text-primary">55 <span class="flex items-center">56 <i data-feather="grid" class="w-4 h-4 mr-2"></i>57 <span>All Guides</span>58 </span>59 <span class="bg-gray-100 text-xs px-2 py-1 rounded-full">42</span>60 </button>61 </div>62 <div class="px-4 py-2">63 <button class="w-full flex items-center justify-between text-gray-700 hover:text-primary">64 <span class="flex items-center">65 <i data-feather="star" class="w-4 h-4 mr-2"></i>66 <span>Favorites</span>67 </span>68 <span class="bg-gray-100 text-xs px-2 py-1 rounded-full">7</span>69 </button>70 </div>71 72 <div class="mt-6 px-4">73 <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Categories</h3>74 <div class="mt-2 space-y-1">75 <div class="group">76 <button class="w-full flex items-center justify-between text-gray-700 hover:text-primary py-1">77 <span class="flex items-center">78 <i data-feather="folder" class="w-4 h-4 mr-2 text-secondary"></i>79 <span>Web Development</span>80 </span>81 <i data-feather="chevron-down" class="w-4 h-4 transform group-aria-expanded:rotate-180"></i>82 </button>83 <div class="ml-6 mt-1 hidden group-aria-expanded:block">84 <a href="#" class="block py-1 text-sm text-gray-600 hover:text-primary">React</a>85 <a href="#" class="block py-1 text-sm text-gray-600 hover:text-primary">Vue</a>86 <a href="#" class="block py-1 text-sm text-gray-600 hover:text-primary">Tailwind</a>87 </div>88 </div>89 <div class="group">90 <button class="w-full flex items-center justify-between text-gray-700 hover:text-primary py-1">91 <span class="flex items-center">92 <i data-feather="folder" class="w-4 h-4 mr-2 text-secondary"></i>93 <span>Design</span>94 </span>95 <i data-feather="chevron-down" class="w-4 h-4 transform group-aria-expanded:rotate-180"></i>96 </button>97 </div>98 <div class="group">99 <button class="w-full flex items-center justify-between text-gray-700 hover:text-primary py-1">100 <span class="flex items-center">101 <i data-feather="folder" class="w-4 h-4 mr-2 text-secondary"></i>102 <span>DevOps</span>103 </span>104 <i data-feather="chevron-down" class="w-4 h-4 transform group-aria-expanded:rotate-180"></i>105 </button>106 </div>107 </div>108 </div>109 </nav>110 </div>111 112 <!-- Main Content -->113 <div class="flex-1 overflow-y-auto">114 <!-- Header -->115 <header class="bg-white border-b border-gray-200">116 <div class="px-6 py-4 flex items-center justify-between">117 <h1 class="text-2xl font-bold text-gray-800">Visual Guides</h1>118 <div class="flex items-center space-x-4">119 <div class="relative">120 <input type="text" placeholder="Search guides..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent w-64">121 <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>122 </div>123 <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 flex items-center">124 <i data-feather="plus" class="w-4 h-4 mr-2"></i>125 New Guide126 </button>127 </div>128 </div>129 </header>130 131 <!-- Guide Cards Grid -->132 <main class="p-6">133 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">134 <!-- Guide Card 1 -->135 <div class="guide-card bg-white rounded-xl border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-lg">136 <div class="h-40 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">137 <i data-feather="code" class="w-12 h-12 text-white"></i>138 </div>139 <div class="p-5">140 <div class="flex justify-between items-start">141 <h3 class="text-lg font-bold text-gray-800 mb-2">React Component Patterns</h3>142 <button class="text-gray-400 hover:text-yellow-400">143 <i data-feather="star" class="w-5 h-5"></i>144 </button>145 </div>146 <p class="text-gray-600 mb-4">Learn advanced React patterns to build reusable components.</p>147 148 <div class="mb-4">149 <span class="text-xs font-medium text-gray-500">Tools:</span>150 <ul class="list-disc list-inside text-sm text-gray-600 mt-1">151 <li>React 18+</li>152 <li>TypeScript</li>153 </ul>154 </div>155 156 <div class="flex flex-wrap gap-2 mb-4">157 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Components</span>158 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Patterns</span>159 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Advanced</span>160 </div>161 162 <div class="flex justify-between items-center">163 <button class="text-primary hover:text-primary-600 text-sm font-medium flex items-center">164 View Steps <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>165 </button>166 <div class="flex space-x-2">167 <button class="p-1 text-gray-400 hover:text-gray-600">168 <i data-feather="edit" class="w-4 h-4"></i>169 </button>170 <button class="p-1 text-gray-400 hover:text-red-500">171 <i data-feather="trash" class="w-4 h-4"></i>172 </button>173 </div>174 </div>175 </div>176 </div>177 178 <!-- Guide Card 2 -->179 <div class="guide-card bg-white rounded-xl border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-lg">180 <img src="http://static.photos/technology/640x360/42" alt="Guide thumbnail" class="w-full h-40 object-cover">181 <div class="p-5">182 <div class="flex justify-between items-start">183 <h3 class="text-lg font-bold text-gray-800 mb-2">Tailwind CSS Setup</h3>184 <button class="text-yellow-400">185 <i data-feather="star" class="w-5 h-5"></i>186 </button>187 </div>188 <p class="text-gray-600 mb-4">Complete guide to setting up Tailwind CSS in your project.</p>189 190 <div class="mb-4">191 <span class="text-xs font-medium text-gray-500">Requirements:</span>192 <ul class="list-disc list-inside text-sm text-gray-600 mt-1">193 <li>Node.js installed</li>194 <li>Basic npm knowledge</li>195 </ul>196 </div>197 198 <div class="flex flex-wrap gap-2 mb-4">199 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">CSS</span>200 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Frontend</span>201 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Setup</span>202 </div>203 204 <div class="flex justify-between items-center">205 <button class="text-primary hover:text-primary-600 text-sm font-medium flex items-center">206 View Steps <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>207 </button>208 <div class="flex space-x-2">209 <button class="p-1 text-gray-400 hover:text-gray-600">210 <i data-feather="edit" class="w-4 h-4"></i>211 </button>212 <button class="p-1 text-gray-400 hover:text-red-500">213 <i data-feather="trash" class="w-4 h-4"></i>214 </button>215 </div>216 </div>217 </div>218 </div>219 220 <!-- Guide Card 3 -->221 <div class="guide-card bg-white rounded-xl border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-lg">222 <div class="h-40 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">223 <i data-feather="database" class="w-12 h-12 text-white"></i>224 </div>225 <div class="p-5">226 <div class="flex justify-between items-start">227 <h3 class="text-lg font-bold text-gray-800 mb-2">MongoDB Aggregation</h3>228 <button class="text-gray-400 hover:text-yellow-400">229 <i data-feather="star" class="w-5 h-5"></i>230 </button>231 </div>232 <p class="text-gray-600 mb-4">Master MongoDB aggregation pipeline with practical examples.</p>233 234 <div class="mb-4">235 <span class="text-xs font-medium text-gray-500">Tools:</span>236 <ul class="list-disc list-inside text-sm text-gray-600 mt-1">237 <li>MongoDB 5.0+</li>238 <li>MongoDB Compass</li>239 </ul>240 </div>241 242 <div class="flex flex-wrap gap-2 mb-4">243 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Database</span>244 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">NoSQL</span>245 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Advanced</span>246 </div>247 248 <div class="flex justify-between items-center">249 <button class="text-primary hover:text-primary-600 text-sm font-medium flex items-center">250 View Steps <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>251 </button>252 <div class="flex space-x-2">253 <button class="p-1 text-gray-400 hover:text-gray-600">254 <i data-feather="edit" class="w-4 h-4"></i>255 </button>256 <button class="p-1 text-gray-400 hover:text-red-500">257 <i data-feather="trash" class="w-4 h-4"></i>258 </button>259 </div>260 </div>261 </div>262 </div>263 </div>264 </main>265 </div>266 </div>267 268 <!-- Guide Detail Modal (hidden by default) -->269 <div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" id="guideModal">270 <div class="absolute inset-0 flex items-center justify-center p-4">271 <div class="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] flex flex-col">272 <!-- Modal Header -->273 <div class="border-b border-gray-200 p-4 flex justify-between items-center">274 <h3 class="text-xl font-bold text-gray-800">Guide: React Component Patterns</h3>275 <button class="text-gray-400 hover:text-gray-600" onclick="document.getElementById('guideModal').classList.add('hidden')">276 <i data-feather="x" class="w-6 h-6"></i>277 </button>278 </div>279 280 <!-- Modal Content -->281 <div class="flex-1 overflow-y-auto">282 <div class="p-6">283 <!-- Step 1 -->284 <div class="mb-8 step-highlight pl-4">285 <div class="flex items-start">286 <div class="flex-shrink-0 mr-4">287 <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center">288 <span class="text-primary font-bold">1</span>289 </div>290 </div>291 <div class="flex-1">292 <h4 class="font-semibold text-gray-800 mb-2">Create Compound Components</h4>293 <div class="prose max-w-none text-gray-600">294 <p>Compound components are a pattern where components work together to form a complete UI. The parent component manages the state, while child components are responsible for rendering parts of the UI.</p>295 <div class="mt-4 bg-gray-50 p-4 rounded-lg">296 <pre class="text-sm"><code>function Tabs({ children }) {297 const [activeTab, setActiveTab] = useState(0);298 return React.Children.map(children, (child, index) => 299 React.cloneElement(child, { 300 isActive: index === activeTab,301 onSelect: () => setActiveTab(index)302 })303 );304}</code></pre>305 </div>306 </div>307 <div class="mt-4 flex items-center text-sm text-gray-500">308 <button class="flex items-center text-primary hover:text-primary-600 mr-4">309 <i data-feather="message-square" class="w-4 h-4 mr-1"></i> Add Note310 </button>311 <button class="flex items-center text-green-500 hover:text-green-600">312 <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> Mark Complete313 </button>314 </div>315 </div>316 </div>317 </div>318 319 <!-- Step 2 -->320 <div class="mb-8 pl-4">321 <div class="flex items-start">322 <div class="flex-shrink-0 mr-4">323 <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">324 <span class="text-gray-500 font-bold">2</span>325 </div>326 </div>327 <div class="flex-1">328 <h4 class="font-semibold text-gray-800 mb-2">Implement Render Props</h4>329 <div class="prose max-w-none text-gray-600">330 <p>Render props is a technique for sharing code between components using a prop whose value is a function. This pattern provides extreme flexibility in component composition.</p>331 <div class="mt-4">332 <img src="http://static.photos/c333</body>334</html>