Team Ai
Apppublic

irahnarach/guidee-visual-knowledge-navigator

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
visualguide.html334 linesDownload Raw Back to root
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>