basecoat-showcase.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Basecoat CSS Framework - Complete Demo</title> 8 <!-- https://github.com/exponentlabshq/basecoat-demo --> 9 <script src="vendor/tailwind.source.js"></script> 10 <script src="vendor/tailwind.config.js"></script> 11 <link rel="stylesheet" href="theme.css" /> 12 <script src="https://unpkg.com/htmx.org@1.9.10"></script> 13 <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> 14 </head> 15 16 <body class="bg-background text-foreground dark:bg-background dark:text-foreground"> 17 <!-- Dark Mode Toggle --> 18 <button 19 class="fixed top-4 right-4 inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-background dark:hover:bg-accent dark:hover:text-accent-foreground h-10 px-4 py-2 rounded-md" 20 onclick="toggleDarkMode()"> 21 <i data-lucide="moon"></i> 22 </button> 23 24 <!-- Attribution Header --> 25 <div class="bg-muted/30 border-b border-border"> 26 <div class="max-w-7xl mx-auto px-6 py-3"> 27 <div class="text-center"> 28 <p class="text-sm text-muted-foreground"> 29 <span class="font-medium">BaseCoatUI</span> created by 30 <a href="https://www.ronanberder.com" target="_blank" 31 class="text-primary hover:text-primary/80 underline-offset-4 hover:underline transition-colors">Ronan 32 Berder</a> 33 <span class="mx-2">|</span> 34 Demo by 35 <span class="font-medium">Michael Jagdeo</span> 36 <span class="text-muted-foreground">Exponent Labs LLC</span> 37 </p> 38 </div> 39 </div> 40 </div> 41 42 <!-- Main Container --> 43 <div class="max-w-7xl mx-auto p-6"> 44 <header class="text-center mb-8"> 45 <h1 class="text-4xl font-bold mb-4 text-foreground dark:text-foreground">Basecoat CSS Framework</h1> 46 <p class="text-muted-foreground text-lg dark:text-muted-foreground">Complete component showcase with HTMX 47 interactions</p> 48 </header> 49 50 <!-- Color System Demo --> 51 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 52 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">Color System & Design Tokens</h2> 53 54 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 55 <div 56 class="rounded-lg border border-border bg-card text-card-foreground shadow-sm dark:bg-card dark:text-card-foreground dark:border-border"> 57 <div class="flex flex-col space-y-1.5 p-6"> 58 <h3 class="text-lg font-semibold">Primary Colors</h3> 59 </div> 60 <div class="p-6 pt-0"> 61 <div class="space-y-3"> 62 <div class="flex items-center gap-3"> 63 <div class="w-8 h-8 rounded bg-primary dark:bg-primary"></div> 64 <span>Primary</span> 65 </div> 66 <div class="flex items-center gap-3"> 67 <div class="w-8 h-8 rounded bg-secondary dark:bg-secondary"></div> 68 <span>Secondary</span> 69 </div> 70 <div class="flex items-center gap-3"> 71 <div class="w-8 h-8 rounded bg-muted dark:bg-muted"></div> 72 <span>Muted</span> 73 </div> 74 <div class="flex items-center gap-3"> 75 <div class="w-8 h-8 rounded bg-accent dark:bg-accent"></div> 76 <span>Accent</span> 77 </div> 78 <div class="flex items-center gap-3"> 79 <div class="w-8 h-8 rounded bg-destructive dark:bg-destructive"></div> 80 <span>Destructive</span> 81 </div> 82 </div> 83 </div> 84 </div> 85 86 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 87 <div class="flex flex-col space-y-1.5 p-6"> 88 <h3 class="text-lg font-semibold">Chart Colors</h3> 89 </div> 90 <div class="p-6 pt-0"> 91 <div class="grid grid-cols-5 gap-2"> 92 <div 93 class="h-16 rounded bg-chart-1 flex items-center justify-center text-white text-xs font-bold"> 94 1</div> 95 <div 96 class="h-16 rounded bg-chart-2 flex items-center justify-center text-white text-xs font-bold"> 97 2</div> 98 <div 99 class="h-16 rounded bg-chart-3 flex items-center justify-center text-white text-xs font-bold"> 100 3</div> 101 <div 102 class="h-16 rounded bg-chart-4 flex items-center justify-center text-white text-xs font-bold"> 103 4</div> 104 <div 105 class="h-16 rounded bg-chart-5 flex items-center justify-center text-white text-xs font-bold"> 106 5</div> 107 </div> 108 </div> 109 </div> 110 111 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 112 <div class="flex flex-col space-y-1.5 p-6"> 113 <h3 class="text-lg font-semibold">Border Radius</h3> 114 </div> 115 <div class="p-6 pt-0"> 116 <div class="space-y-3"> 117 <div class="flex items-center gap-3"> 118 <div class="w-8 h-8 bg-primary rounded-sm"></div> 119 <span>Small (--radius-sm)</span> 120 </div> 121 <div class="flex items-center gap-3"> 122 <div class="w-8 h-8 bg-primary rounded-md"></div> 123 <span>Medium (--radius-md)</span> 124 </div> 125 <div class="flex items-center gap-3"> 126 <div class="w-8 h-8 bg-primary rounded-lg"></div> 127 <span>Large (--radius-lg)</span> 128 </div> 129 <div class="flex items-center gap-3"> 130 <div class="w-8 h-8 bg-primary rounded-xl"></div> 131 <span>Extra Large (--radius-xl)</span> 132 </div> 133 </div> 134 </div> 135 </div> 136 </div> 137 </div> 138 139 <!-- Alert Components --> 140 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 141 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">Alert Components</h2> 142 <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> 143 <div 144 class="relative w-full rounded-lg border p-4 text-sm grid grid-cols-[calc(1rem*4)_1fr] gap-x-3 gap-y-0.5 items-start"> 145 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" 146 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 147 class="size-4 translate-y-0.5 text-current"> 148 <circle cx="12" cy="12" r="10"></circle> 149 <path d="M12 16v-4"></path> 150 <path d="M12 8h.01"></path> 151 </svg> 152 <div class="text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm"> 153 <h2 class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">Information Alert</h2> 154 <p class="leading-relaxed">This is an informational alert with an icon and description.</p> 155 </div> 156 </div> 157 158 <div 159 class="relative w-full rounded-lg border p-4 text-sm grid grid-cols-[calc(1rem*4)_1fr] gap-x-3 gap-y-0.5 items-start text-destructive bg-card"> 160 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" 161 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 162 class="size-4 translate-y-0.5 text-current"> 163 <circle cx="12" cy="12" r="10"></circle> 164 <line x1="15" y1="9" x2="9" y2="15"></line> 165 <line x1="9" y1="9" x2="15" y2="15"></line> 166 </svg> 167 <div class="text-destructive col-start-2 grid justify-items-start gap-1 text-sm"> 168 <h2 class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">Error Alert</h2> 169 <p class="leading-relaxed">This is a destructive alert for errors and warnings.</p> 170 </div> 171 </div> 172 </div> 173 </div> 174 175 <!-- Button Components --> 176 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 177 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">Button Components</h2> 178 179 <div class="space-y-6"> 180 <div> 181 <h3 class="text-lg font-semibold mb-3">Button Variants</h3> 182 <div class="flex flex-wrap gap-3"> 183 <button 184 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 rounded-md">Primary</button> 185 <button 186 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 rounded-md">Secondary</button> 187 <button 188 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 rounded-md">Outline</button> 189 <button 190 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 rounded-md">Ghost</button> 191 <button 192 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline h-10 px-4 py-2 rounded-md">Link</button> 193 <button 194 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-white hover:bg-destructive/90 h-10 px-4 py-2 rounded-md">Destructive</button> 195 </div> 196 </div> 197 198 <div> 199 <h3 class="text-lg font-semibold mb-3">Button Sizes</h3> 200 <div class="flex flex-wrap items-center gap-3"> 201 <button 202 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-3 rounded-md">Small</button> 203 <button 204 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 rounded-md">Default</button> 205 <button 206 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8 rounded-md">Large</button> 207 </div> 208 </div> 209 210 <div> 211 <h3 class="text-lg font-semibold mb-3">Icon Buttons</h3> 212 <div class="flex flex-wrap gap-3"> 213 <button 214 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 w-10 rounded-md"> 215 <i data-lucide="plus"></i> 216 </button> 217 <button 218 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 w-10 rounded-md"> 219 <i data-lucide="edit"></i> 220 </button> 221 <button 222 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10 rounded-md"> 223 <i data-lucide="trash-2"></i> 224 </button> 225 <button 226 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 rounded-md"> 227 <i data-lucide="heart"></i> 228 </button> 229 <button 230 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-white hover:bg-destructive/90 h-10 w-10 rounded-md"> 231 <i data-lucide="x"></i> 232 </button> 233 </div> 234 </div> 235 </div> 236 </div> 237 238 <!-- Badge Components --> 239 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 240 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">Badge Components</h2> 241 <div class="flex flex-wrap gap-3"> 242 <span 243 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-primary text-primary-foreground">Primary</span> 244 <span 245 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-secondary text-secondary-foreground">Secondary</span> 246 <span 247 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-destructive text-white">Destructive</span> 248 <span 249 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 text-foreground">Outline</span> 250 <span 251 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-primary text-primary-foreground flex items-center gap-1"> 252 <i data-lucide="star" class="w-3 h-3"></i> 253 With Icon 254 </span> 255 </div> 256 </div> 257 258 <!-- Card Components --> 259 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 260 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">Card Components</h2> 261 <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> 262 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 263 <div class="flex flex-col space-y-1.5 p-6"> 264 <h3 class="text-lg font-semibold">Basic Card</h3> 265 <p class="text-sm text-muted-foreground">This is a basic card with header, content, and footer. 266 </p> 267 </div> 268 <div class="p-6 pt-0"> 269 <p>Card content goes here. This demonstrates the card component structure with proper spacing 270 and styling.</p> 271 </div> 272 <div class="flex items-center p-6 pt-0"> 273 <button 274 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 rounded-md">Action</button> 275 <button 276 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 rounded-md ml-2">Cancel</button> 277 </div> 278 </div> 279 280 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 281 <div class="flex flex-col space-y-1.5 p-6"> 282 <h3 class="text-lg font-semibold">Card with Border</h3> 283 <p class="text-sm text-muted-foreground">This card has a border separator.</p> 284 </div> 285 <div class="p-6 pt-0 border-b"> 286 <p>Content with border separator below.</p> 287 </div> 288 <div class="flex items-center p-6 pt-0"> 289 <button 290 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 rounded-md">Learn 291 More</button> 292 </div> 293 </div> 294 </div> 295 </div> 296 297 <!-- Form Controls --> 298 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 299 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">Form Controls</h2> 300 301 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 302 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 303 <div class="flex flex-col space-y-1.5 p-6"> 304 <h3 class="text-lg font-semibold">Input Fields</h3> 305 </div> 306 <div class="p-6 pt-0"> 307 <form class="space-y-4"> 308 <div> 309 <label 310 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Text 311 Input</label> 312 <input type="text" 313 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1" 314 placeholder="Enter text"> 315 </div> 316 <div> 317 <label 318 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Email 319 Input</label> 320 <input type="email" 321 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1" 322 placeholder="Enter email"> 323 </div> 324 <div> 325 <label 326 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Password 327 Input</label> 328 <input type="password" 329 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1" 330 placeholder="Enter password"> 331 </div> 332 </form> 333 </div> 334 </div> 335 336 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 337 <div class="flex flex-col space-y-1.5 p-6"> 338 <h3 class="text-lg font-semibold">Checkboxes & Radio</h3> 339 </div> 340 <div class="p-6 pt-0"> 341 <form class="space-y-4"> 342 <div class="flex items-center gap-2"> 343 <input type="checkbox" id="checkbox1" class="rounded"> 344 <label for="checkbox1" 345 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Checkbox 346 Option 1</label> 347 </div> 348 <div class="flex items-center gap-2"> 349 <input type="checkbox" id="checkbox2" class="rounded" checked> 350 <label for="checkbox2" 351 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Checkbox 352 Option 2 (checked)</label> 353 </div> 354 <div class="flex items-center gap-2"> 355 <input type="radio" id="radio1" name="radio-group" class="rounded-full"> 356 <label for="radio1" 357 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Radio 358 Option 1</label> 359 </div> 360 <div class="flex items-center gap-2"> 361 <input type="radio" id="radio2" name="radio-group" class="rounded-full" checked> 362 <label for="radio2" 363 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Radio 364 Option 2 (checked)</label> 365 </div> 366 </form> 367 </div> 368 </div> 369 370 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 371 <div class="flex flex-col space-y-1.5 p-6"> 372 <h3 class="text-lg font-semibold">Select & Textarea</h3> 373 </div> 374 <div class="p-6 pt-0"> 375 <form class="space-y-4"> 376 <div> 377 <label 378 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Select 379 Dropdown</label> 380 <select 381 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1"> 382 <option>Option 1</option> 383 <option>Option 2</option> 384 <option>Option 3</option> 385 </select> 386 </div> 387 <div> 388 <label 389 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Range 390 Slider</label> 391 <input type="range" class="w-full mt-1" min="0" max="100" value="50"> 392 </div> 393 <div> 394 <label 395 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Textarea</label> 396 <textarea 397 class="flex min-h-16 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1" 398 placeholder="Enter your message here..."></textarea> 399 </div> 400 </form> 401 </div> 402 </div> 403 </div> 404 </div> 405 406 <!-- Tables --> 407 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 408 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">Table Component</h2> 409 <div class="w-full caption-bottom text-sm"> 410 <table class="w-full"> 411 <thead> 412 <tr class="border-b"> 413 <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground"> 414 <input type="checkbox" class="rounded"> 415 </th> 416 <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th> 417 <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th> 418 <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Role</th> 419 <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th> 420 </tr> 421 </thead> 422 <tbody> 423 <tr class="border-b transition-colors hover:bg-muted/50"> 424 <td class="p-4 align-middle"> 425 <input type="checkbox" class="rounded"> 426 </td> 427 <td class="p-4 align-middle">John Doe</td> 428 <td class="p-4 align-middle">john@example.com</td> 429 <td class="p-4 align-middle">Admin</td> 430 <td class="p-4 align-middle"> 431 <span 432 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-primary text-primary-foreground">Active</span> 433 </td> 434 </tr> 435 <tr class="border-b transition-colors hover:bg-muted/50"> 436 <td class="p-4 align-middle"> 437 <input type="checkbox" class="rounded"> 438 </td> 439 <td class="p-4 align-middle">Jane Smith</td> 440 <td class="p-4 align-middle">jane@example.com</td> 441 <td class="p-4 align-middle">User</td> 442 <td class="p-4 align-middle"> 443 <span 444 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-secondary text-secondary-foreground">Inactive</span> 445 </td> 446 </tr> 447 <tr class="border-b transition-colors hover:bg-muted/50"> 448 <td class="p-4 align-middle"> 449 <input type="checkbox" class="rounded"> 450 </td> 451 <td class="p-4 align-middle">Bob Johnson</td> 452 <td class="p-4 align-middle">bob@example.com</td> 453 <td class="p-4 align-middle">Moderator</td> 454 <td class="p-4 align-middle"> 455 <span 456 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-destructive text-white">Suspended</span> 457 </td> 458 </tr> 459 </tbody> 460 </table> 461 </div> 462 </div> 463 464 <!-- HTMX Interactive Demo --> 465 <div class="mb-12 p-8 border border-border rounded-lg bg-card"> 466 <h2 class="text-2xl font-bold mb-6 border-b-2 border-primary pb-2">HTMX Interactive Components</h2> 467 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 468 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 469 <div class="flex flex-col space-y-1.5 p-6"> 470 <h3 class="text-lg font-semibold">Dynamic Content Loading</h3> 471 </div> 472 <div class="p-6 pt-0"> 473 <button 474 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 rounded-md" 475 hx-get="/api/content" hx-target="#dynamic-content" hx-indicator="#loading"> 476 Load Content 477 </button> 478 <div id="loading" class="htmx-indicator mt-2"> 479 <span 480 class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 border-transparent bg-secondary text-secondary-foreground">Loading...</span> 481 </div> 482 <div id="dynamic-content" class="mt-4"> 483 <p class="text-muted-foreground">Click the button to load content via HTMX</p> 484 </div> 485 </div> 486 </div> 487 488 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 489 <div class="flex flex-col space-y-1.5 p-6"> 490 <h3 class="text-lg font-semibold">Form Submission</h3> 491 </div> 492 <div class="p-6 pt-0"> 493 <form hx-post="/api/submit" hx-target="#form-result"> 494 <div class="space-y-3"> 495 <div> 496 <label 497 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Name</label> 498 <input type="text" name="name" 499 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1" 500 required> 501 </div> 502 <div> 503 <label 504 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Email</label> 505 <input type="email" name="email" 506 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1" 507 required> 508 </div> 509 <button type="submit" 510 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 rounded-md">Submit</button> 511 </div> 512 </form> 513 <div id="form-result" class="mt-4"></div> 514 </div> 515 </div> 516 517 <div class="rounded-lg border bg-card text-card-foreground shadow-sm"> 518 <div class="flex flex-col space-y-1.5 p-6"> 519 <h3 class="text-lg font-semibold">Counter with HTMX</h3> 520 </div> 521 <div class="p-6 pt-0"> 522 <div class="flex items-center gap-4"> 523 <button 524 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 rounded-md" 525 hx-post="/api/counter" hx-target="#counter" hx-vals='{"action": "decrement"}'> 526 - 527 </button> 528 <span id="counter" class="text-2xl font-bold">0</span> 529 <button 530 class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 rounded-md" 531 hx-post="/api/counter" hx-target="#counter" hx-vals='{"action": "increment"}'> 532 + 533 </button> 534 </div> 535 </div> 536 </div> 537 </div> 538 </div> 539 </div> 540 541 <script> 542 // Initialize Lucide icons 543 lucide.createIcons(); 544 545 // Dark mode toggle 546 function toggleDarkMode() { 547 document.body.classList.toggle('dark'); 548 const icon = document.querySelector('button i'); 549 if (document.body.classList.contains('dark')) { 550 icon.setAttribute('data-lucide', 'sun'); 551 } else { 552 icon.setAttribute('data-lucide', 'moon'); 553 } 554 lucide.createIcons(); 555 } 556 557 // Mock HTMX endpoints for demo 558 document.addEventListener('htmx:beforeRequest', function (event) { 559 if (event.detail.pathInfo.requestPath === '/api/content') { 560 event.preventDefault(); 561 setTimeout(() => { 562 document.getElementById('dynamic-content').innerHTML = ` 563 <div class="relative w-full rounded-lg border p-4 text-sm grid grid-cols-[calc(1rem*4)_1fr] gap-x-3 gap-y-0.5 items-start"> 564 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 translate-y-0.5 text-current"> 565 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline> 566 </svg> 567 <div class="text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm"> 568 <h2 class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">Content Loaded!</h2> 569 <p class="leading-relaxed">This content was loaded via HTMX. The request was intercepted and mocked for this demo.</p> 570 </div> 571 </div> 572 `; 573 }, 1000); 574 } else if (event.detail.pathInfo.requestPath === '/api/submit') { 575 event.preventDefault(); 576 const formData = new FormData(event.detail.elt); 577 setTimeout(() => { 578 document.getElementById('form-result').innerHTML = ` 579 <div class="relative w-full rounded-lg border p-4 text-sm grid grid-cols-[calc(1rem*4)_1fr] gap-x-3 gap-y-0.5 items-start"> 580 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 translate-y-0.5 text-current"> 581 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline> 582 </svg> 583 <div class="text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm"> 584 <h2 class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">Form Submitted!</h2> 585 <p class="leading-relaxed">Name: ${formData.get('name')}</p> 586 <p class="leading-relaxed">Email: ${formData.get('email')}</p> 587 </div> 588 </div> 589 `; 590 }, 500); 591 } else if (event.detail.pathInfo.requestPath === '/api/counter') { 592 event.preventDefault(); 593 const currentValue = parseInt(document.getElementById('counter').textContent) || 0; 594 const action = event.detail.parameters.action; 595 const newValue = action === 'increment' ? currentValue + 1 : currentValue - 1; 596 setTimeout(() => { 597 document.getElementById('counter').textContent = newValue; 598 }, 200); 599 } 600 }); 601 </script> 602 603 <!-- Advanced Form Components Section --> 604 <section class="py-16 bg-muted/50"> 605 <div class="container mx-auto px-4"> 606 <h2 class="text-3xl font-bold text-center mb-12">Advanced Form Components</h2> 607 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 608 <!-- File Upload --> 609 <div class="card p-6"> 610 <h3 class="text-xl font-semibold mb-4">File Upload</h3> 611 <div class="space-y-4"> 612 <div 613 class="border-2 border-dashed border-border rounded-lg p-8 text-center hover:border-primary transition-colors"> 614 <i data-lucide="upload" class="w-8 h-8 mx-auto mb-2 text-muted-foreground"></i> 615 <p class="text-sm text-muted-foreground">Drag and drop files here or click to browse</p> 616 <input type="file" class="hidden" multiple> 617 </div> 618 <div class="flex items-center space-x-2"> 619 <div class="w-2 h-2 bg-green-500 rounded-full"></div> 620 <span class="text-sm text-muted-foreground">File uploaded successfully</span> 621 </div> 622 </div> 623 </div> 624 625 <!-- Multi-step Form --> 626 <div class="card p-6"> 627 <h3 class="text-xl font-semibold mb-4">Multi-step Form</h3> 628 <div class="space-y-4"> 629 <div class="flex items-center space-x-2"> 630 <div 631 class="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-sm font-medium"> 632 1</div> 633 <span class="text-sm">Personal Information</span> 634 </div> 635 <div class="flex items-center space-x-2"> 636 <div 637 class="w-8 h-8 bg-muted text-muted-foreground rounded-full flex items-center justify-center text-sm font-medium"> 638 2</div> 639 <span class="text-sm text-muted-foreground">Contact Details</span> 640 </div> 641 <div class="flex items-center space-x-2"> 642 <div 643 class="w-8 h-8 bg-muted text-muted-foreground rounded-full flex items-center justify-center text-sm font-medium"> 644 3</div> 645 <span class="text-sm text-muted-foreground">Preferences</span> 646 </div> 647 </div> 648 </div> 649 650 <!-- Form Validation --> 651 <div class="card p-6"> 652 <h3 class="text-xl font-semibold mb-4">Form Validation</h3> 653 <div class="space-y-4"> 654 <div> 655 <label class="block text-sm font-medium mb-2">Email Address</label> 656 <input type="email" class="input w-full" placeholder="Enter your email"> 657 <p class="text-sm text-destructive mt-1">Please enter a valid email address</p> 658 </div> 659 <div> 660 <label class="block text-sm font-medium mb-2">Password</label> 661 <input type="password" class="input w-full" placeholder="Enter your password"> 662 <div class="mt-2 space-y-1"> 663 <div class="flex items-center space-x-2"> 664 <div class="w-2 h-2 bg-green-500 rounded-full"></div> 665 <span class="text-sm text-green-600">At least 8 characters</span> 666 </div> 667 <div class="flex items-center space-x-2"> 668 <div class="w-2 h-2 bg-green-500 rounded-full"></div> 669 <span class="text-sm text-green-600">Contains uppercase letter</span> 670 </div> 671 <div class="flex items-center space-x-2"> 672 <div class="w-2 h-2 bg-destructive rounded-full"></div> 673 <span class="text-sm text-destructive">Contains number</span> 674 </div> 675 </div> 676 </div> 677 </div> 678 </div> 679 </div> 680 </div> 681 </section> 682 683 <!-- Data Visualization Section --> 684 <section class="py-16"> 685 <div class="container mx-auto px-4"> 686 <h2 class="text-3xl font-bold text-center mb-12">Data Visualization</h2> 687 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> 688 <!-- Charts --> 689 <div class="card p-6"> 690 <h3 class="text-xl font-semibold mb-4">Charts & Graphs</h3> 691 <div class="space-y-6"> 692 <!-- Bar Chart --> 693 <div> 694 <h4 class="text-lg font-medium mb-3">Sales Performance</h4> 695 <div class="space-y-2"> 696 <div class="flex items-center justify-between"> 697 <span class="text-sm">Q1</span> 698 <div class="w-32 bg-muted rounded-full h-2"> 699 <div class="bg-chart-1 h-2 rounded-full" style="width: 75%"></div> 700 </div> 701 <span class="text-sm font-medium">75%</span> 702 </div> 703 <div class="flex items-center justify-between"> 704 <span class="text-sm">Q2</span> 705 <div class="w-32 bg-muted rounded-full h-2"> 706 <div class="bg-chart-2 h-2 rounded-full" style="width: 60%"></div> 707 </div> 708 <span class="text-sm font-medium">60%</span> 709 </div> 710 <div class="flex items-center justify-between"> 711 <span class="text-sm">Q3</span> 712 <div class="w-32 bg-muted rounded-full h-2"> 713 <div class="bg-chart-3 h-2 rounded-full" style="width: 90%"></div> 714 </div> 715 <span class="text-sm font-medium">90%</span> 716 </div> 717 <div class="flex items-center justify-between"> 718 <span class="text-sm">Q4</span> 719 <div class="w-32 bg-muted rounded-full h-2"> 720 <div class="bg-chart-4 h-2 rounded-full" style="width: 85%"></div> 721 </div> 722 <span class="text-sm font-medium">85%</span> 723 </div> 724 </div> 725 </div> 726 727 <!-- Pie Chart --> 728 <div> 729 <h4 class="text-lg font-medium mb-3">Market Share</h4> 730 <div class="flex items-center justify-center"> 731 <div 732 class="w-32 h-32 rounded-full bg-gradient-to-r from-chart-1 via-chart-2 to-chart-3 relative"> 733 <div class="absolute inset-0 rounded-full bg-muted"></div> 734 <div class="absolute inset-0 rounded-full bg-gradient-to-r from-chart-1 via-chart-2 to-chart-3" 735 style="clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%)"> 736 </div> 737 </div> 738 </div> 739 <div class="mt-4 space-y-2"> 740 <div class="flex items-center space-x-2"> 741 <div class="w-3 h-3 bg-chart-1 rounded-full"></div> 742 <span class="text-sm">Product A (40%)</span> 743 </div> 744 <div class="flex items-center space-x-2"> 745 <div class="w-3 h-3 bg-chart-2 rounded-full"></div> 746 <span class="text-sm">Product B (35%)</span> 747 </div> 748 <div class="flex items-center space-x-2"> 749 <div class="w-3 h-3 bg-chart-3 rounded-full"></div> 750 <span class="text-sm">Product C (25%)</span> 751 </div> 752 </div> 753 </div> 754 </div> 755 </div> 756 757 <!-- Data Tables --> 758 <div class="card p-6"> 759 <h3 class="text-xl font-semibold mb-4">Data Tables</h3> 760 <div class="overflow-x-auto"> 761 <table class="w-full"> 762 <thead> 763 <tr class="border-b"> 764 <th class="text-left py-2 px-3">Name</th> 765 <th class="text-left py-2 px-3">Status</th> 766 <th class="text-left py-2 px-3">Progress</th> 767 <th class="text-left py-2 px-3">Actions</th> 768 </tr> 769 </thead> 770 <tbody> 771 <tr class="border-b"> 772 <td class="py-2 px-3">John Doe</td> 773 <td class="py-2 px-3"> 774 <span class="badge badge-success">Active</span> 775 </td> 776 <td class="py-2 px-3"> 777 <div class="w-20 bg-muted rounded-full h-2"> 778 <div class="bg-chart-1 h-2 rounded-full" style="width: 80%"></div> 779 </div> 780 </td> 781 <td class="py-2 px-3"> 782 <button class="btn btn-sm btn-outline">Edit</button> 783 </td> 784 </tr> 785 <tr class="border-b"> 786 <td class="py-2 px-3">Jane Smith</td> 787 <td class="py-2 px-3"> 788 <span class="badge badge-warning">Pending</span> 789 </td> 790 <td class="py-2 px-3"> 791 <div class="w-20 bg-muted rounded-full h-2"> 792 <div class="bg-chart-2 h-2 rounded-full" style="width: 45%"></div> 793 </div> 794 </td> 795 <td class="py-2 px-3"> 796 <button class="btn btn-sm btn-outline">Edit</button> 797 </td> 798 </tr> 799 <tr class="border-b"> 800 <td class="py-2 px-3">Bob Johnson</td> 801 <td class="py-2 px-3"> 802 <span class="badge badge-destructive">Inactive</span> 803 </td> 804 <td class="py-2 px-3"> 805 <div class="w-20 bg-muted rounded-full h-2"> 806 <div class="bg-chart-3 h-2 rounded-full" style="width: 20%"></div> 807 </div> 808 </td> 809 <td class="py-2 px-3"> 810 <button class="btn btn-sm btn-outline">Edit</button> 811 </td> 812 </tr> 813 </tbody> 814 </table> 815 </div> 816 </div> 817 </div> 818 </div> 819 </section> 820 821 <!-- Navigation Components Section --> 822 <section class="py-16 bg-muted/50"> 823 <div class="container mx-auto px-4"> 824 <h2 class="text-3xl font-bold text-center mb-12">Navigation Components</h2> 825 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> 826 <!-- Breadcrumbs --> 827 <div class="card p-6"> 828 <h3 class="text-xl font-semibold mb-4">Breadcrumbs</h3> 829 <nav class="flex items-center space-x-2 text-sm"> 830 <a href="#" class="text-muted-foreground hover:text-foreground">Home</a> 831 <i data-lucide="chevron-right" class="w-4 h-4 text-muted-foreground"></i> 832 <a href="#" class="text-muted-foreground hover:text-foreground">Products</a> 833 <i data-lucide="chevron-right" class="w-4 h-4 text-muted-foreground"></i> 834 <a href="#" class="text-muted-foreground hover:text-foreground">Electronics</a> 835 <i data-lucide="chevron-right" class="w-4 h-4 text-muted-foreground"></i> 836 <span class="text-foreground font-medium">Smartphones</span> 837 </nav> 838 </div> 839 840 <!-- Pagination --> 841 <div class="card p-6"> 842 <h3 class="text-xl font-semibold mb-4">Pagination</h3> 843 <div class="flex items-center justify-center space-x-2"> 844 <button class="btn btn-outline btn-sm"> 845 <i data-lucide="chevron-left" class="w-4 h-4"></i> 846 </button> 847 <button class="btn btn-outline btn-sm">1</button> 848 <button class="btn btn-primary btn-sm">2</button> 849 <button class="btn btn-outline btn-sm">3</button> 850 <button class="btn btn-outline btn-sm">4</button> 851 <button class="btn btn-outline btn-sm">5</button> 852 <button class="btn btn-outline btn-sm"> 853 <i data-lucide="chevron-right" class="w-4 h-4"></i> 854 </button> 855 </div> 856 </div> 857 858 <!-- Tabs --> 859 <div class="card p-6"> 860 <h3 class="text-xl font-semibold mb-4">Tabs</h3> 861 <div class="space-y-4"> 862 <div class="flex border-b"> 863 <button 864 class="px-4 py-2 border-b-2 border-primary text-primary font-medium">Overview</button> 865 <button class="px-4 py-2 text-muted-foreground hover:text-foreground">Details</button> 866 <button class="px-4 py-2 text-muted-foreground hover:text-foreground">Reviews</button> 867 <button class="px-4 py-2 text-muted-foreground hover:text-foreground">Settings</button> 868 </div> 869 <div class="p-4"> 870 <p class="text-muted-foreground">This is the overview tab content. It contains general 871 information about the current section.</p> 872 </div> 873 </div> 874 </div> 875 876 <!-- Sidebar Navigation --> 877 <div class="card p-6"> 878 <h3 class="text-xl font-semibold mb-4">Sidebar Navigation</h3> 879 <nav class="space-y-2"> 880 <a href="#" 881 class="flex items-center space-x-3 px-3 py-2 rounded-md bg-accent text-accent-foreground"> 882 <i data-lucide="home" class="w-4 h-4"></i> 883 <span>Dashboard</span> 884 </a> 885 <a href="#" 886 class="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground"> 887 <i data-lucide="users" class="w-4 h-4"></i> 888 <span>Users</span> 889 </a> 890 <a href="#" 891 class="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground"> 892 <i data-lucide="settings" class="w-4 h-4"></i> 893 <span>Settings</span> 894 </a> 895 <a href="#" 896 class="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-accent hover:text-accent-foreground"> 897 <i data-lucide="help-circle" class="w-4 h-4"></i> 898 <span>Help</span> 899 </a> 900 </nav> 901 </div> 902 </div> 903 </div> 904 </section> 905 906 <!-- Layout Components Section --> 907 <section class="py-16"> 908 <div class="container mx-auto px-4"> 909 <h2 class="text-3xl font-bold text-center mb-12">Layout Components</h2> 910 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> 911 <!-- Grid System --> 912 <div class="card p-6"> 913 <h3 class="text-xl font-semibold mb-4">Grid System</h3> 914 <div class="grid grid-cols-12 gap-4"> 915 <div class="col-span-6 bg-primary/10 p-4 rounded text-center text-sm">6 cols</div> 916 <div class="col-span-6 bg-secondary/10 p-4 rounded text-center text-sm">6 cols</div> 917 <div class="col-span-4 bg-accent/10 p-4 rounded text-center text-sm">4 cols</div> 918 <div class="col-span-4 bg-muted/10 p-4 rounded text-center text-sm">4 cols</div> 919 <div class="col-span-4 bg-primary/10 p-4 rounded text-center text-sm">4 cols</div> 920 <div class="col-span-3 bg-secondary/10 p-4 rounded text-center text-sm">3 cols</div> 921 <div class="col-span-3 bg-accent/10 p-4 rounded text-center text-sm">3 cols</div> 922 <div class="col-span-3 bg-muted/10 p-4 rounded text-center text-sm">3 cols</div> 923 <div class="col-span-3 bg-primary/10 p-4 rounded text-center text-sm">3 cols</div> 924 </div> 925 </div> 926 927 <!-- Flexbox Utilities --> 928 <div class="card p-6"> 929 <h3 class="text-xl font-semibold mb-4">Flexbox Utilities</h3> 930 <div class="space-y-4"> 931 <div class="flex justify-between items-center p-4 bg-muted/50 rounded"> 932 <span class="text-sm">Justify Between</span> 933 <button class="btn btn-sm">Action</button> 934 </div> 935 <div class="flex justify-center items-center p-4 bg-muted/50 rounded"> 936 <span class="text-sm">Justify Center</span> 937 </div> 938 <div class="flex justify-end items-center p-4 bg-muted/50 rounded"> 939 <span class="text-sm">Justify End</span> 940 <button class="btn btn-sm">Action</button> 941 </div> 942 </div> 943 </div> 944 945 <!-- Spacing System --> 946 <div class="card p-6"> 947 <h3 class="text-xl font-semibold mb-4">Spacing System</h3> 948 <div class="space-y-4"> 949 <div class="space-y-2"> 950 <div class="bg-primary/10 p-2 rounded text-sm">p-2 (0.5rem)</div> 951 <div class="bg-primary/10 p-4 rounded text-sm">p-4 (1rem)</div> 952 <div class="bg-primary/10 p-6 rounded text-sm">p-6 (1.5rem)</div> 953 <div class="bg-primary/10 p-8 rounded text-sm">p-8 (2rem)</div> 954 </div> 955 </div> 956 </div> 957 958 <!-- Responsive Design --> 959 <div class="card p-6"> 960 <h3 class="text-xl font-semibold mb-4">Responsive Design</h3> 961 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> 962 <div class="bg-primary/10 p-4 rounded text-center text-sm">Mobile</div> 963 <div class="bg-secondary/10 p-4 rounded text-center text-sm">Tablet</div> 964 <div class="bg-accent/10 p-4 rounded text-center text-sm">Desktop</div> 965 </div> 966 </div> 967 </div> 968 </div> 969 </section> 970 971 <!-- Interactive Components Section --> 972 <section class="py-16 bg-muted/50"> 973 <div class="container mx-auto px-4"> 974 <h2 class="text-3xl font-bold text-center mb-12">Interactive Components</h2> 975 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 976 <!-- Tooltips --> 977 <div class="card p-6"> 978 <h3 class="text-xl font-semibold mb-4">Tooltips</h3> 979 <div class="space-y-4"> 980 <button class="btn btn-outline relative group"> 981 Hover for tooltip 982 <div 983 class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity"> 984 This is a tooltip 985 <div 986 class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-popover"> 987 </div> 988 </div> 989 </button> 990 </div> 991 </div> 992 993 <!-- Dropdowns --> 994 <div class="card p-6"> 995 <h3 class="text-xl font-semibold mb-4">Dropdowns</h3> 996 <div class="space-y-4"> 997 <div class="relative"> 998 <button class="btn btn-outline w-full justify-between"> 999 Select option 1000 <i data-lucide="chevron-down" class="w-4 h-4"></i> 1001 </button> 1002 <div 1003 class="absolute top-full left-0 right-0 mt-1 bg-popover border rounded-md shadow-lg z-10"> 1004 <div class="p-2"> 1005 <div 1006 class="px-3 py-2 hover:bg-accent hover:text-accent-foreground rounded cursor-pointer"> 1007 Option 1</div> 1008 <div 1009 class="px-3 py-2 hover:bg-accent hover:text-accent-foreground rounded cursor-pointer"> 1010 Option 2</div> 1011 <div 1012 class="px-3 py-2 hover:bg-accent hover:text-accent-foreground rounded cursor-pointer"> 1013 Option 3</div> 1014 </div> 1015 </div> 1016 </div> 1017 </div> 1018 </div> 1019 1020 <!-- Accordions --> 1021 <div class="card p-6"> 1022 <h3 class="text-xl font-semibold mb-4">Accordions</h3> 1023 <div class="space-y-2"> 1024 <div class="border rounded"> 1025 <button 1026 class="w-full px-4 py-3 text-left flex items-center justify-between hover:bg-accent"> 1027 <span>What is Basecoat?</span> 1028 <i data-lucide="chevron-down" class="w-4 h-4"></i> 1029 </button> 1030 <div class="px-4 pb-3 text-sm text-muted-foreground"> 1031 Basecoat is a modern CSS framework built with Tailwind CSS that provides a comprehensive 1032 design system. 1033 </div> 1034 </div> 1035 <div class="border rounded"> 1036 <button 1037 class="w-full px-4 py-3 text-left flex items-center justify-between hover:bg-accent"> 1038 <span>How do I use it?</span> 1039 <i data-lucide="chevron-down" class="w-4 h-4"></i> 1040 </button> 1041 </div> 1042 </div> 1043 </div> 1044 1045 <!-- Carousels --> 1046 <div class="card p-6"> 1047 <h3 class="text-xl font-semibold mb-4">Carousels</h3> 1048 <div class="relative"> 1049 <div class="overflow-hidden rounded-lg"> 1050 <div class="flex transition-transform duration-300"> 1051 <div class="w-full flex-shrink-0 bg-primary/10 p-8 text-center"> 1052 <h4 class="text-lg font-semibold mb-2">Slide 1</h4> 1053 <p class="text-muted-foreground">This is the first slide content.</p> 1054 </div> 1055 </div> 1056 </div> 1057 <div class="flex justify-center space-x-2 mt-4"> 1058 <button class="w-2 h-2 bg-primary rounded-full"></button> 1059 <button class="w-2 h-2 bg-muted rounded-full"></button> 1060 <button class="w-2 h-2 bg-muted rounded-full"></button> 1061 </div> 1062 </div> 1063 </div> 1064 1065 <!-- Progress Indicators --> 1066 <div class="card p-6"> 1067 <h3 class="text-xl font-semibold mb-4">Progress Indicators</h3> 1068 <div class="space-y-4"> 1069 <div> 1070 <div class="flex justify-between text-sm mb-2"> 1071 <span>Loading...</span> 1072 <span>75%</span> 1073 </div> 1074 <div class="w-full bg-muted rounded-full h-2"> 1075 <div class="bg-primary h-2 rounded-full" style="width: 75%"></div> 1076 </div> 1077 </div> 1078 <div> 1079 <div class="flex justify-between text-sm mb-2"> 1080 <span>Uploading...</span> 1081 <span>45%</span> 1082 </div> 1083 <div class="w-full bg-muted rounded-full h-2"> 1084 <div class="bg-chart-2 h-2 rounded-full" style="width: 45%"></div> 1085 </div> 1086 </div> 1087 </div> 1088 </div> 1089 1090 <!-- Loading States --> 1091 <div class="card p-6"> 1092 <h3 class="text-xl font-semibold mb-4">Loading States</h3> 1093 <div class="space-y-4"> 1094 <div class="flex items-center space-x-2"> 1095 <div class="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"> 1096 </div> 1097 <span class="text-sm">Loading...</span> 1098 </div> 1099 <div class="flex items-center space-x-2"> 1100 <div 1101 class="w-4 h-4 border-2 border-secondary border-t-transparent rounded-full animate-spin"> 1102 </div> 1103 <span class="text-sm">Processing...</span> 1104 </div> 1105 <div class="flex items-center space-x-2"> 1106 <div class="w-4 h-4 border-2 border-accent border-t-transparent rounded-full animate-spin"> 1107 </div> 1108 <span class="text-sm">Saving...</span> 1109 </div> 1110 </div> 1111 </div> 1112 </div> 1113 </div> 1114 </section> 1115 1116 <!-- Advanced UI Patterns Section --> 1117 <section class="py-16"> 1118 <div class="container mx-auto px-4"> 1119 <h2 class="text-3xl font-bold text-center mb-12">Advanced UI Patterns</h2> 1120 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> 1121 <!-- Command Palette --> 1122 <div class="card p-6"> 1123 <h3 class="text-xl font-semibold mb-4">Command Palette</h3> 1124 <div class="space-y-4"> 1125 <div class="relative"> 1126 <input type="text" placeholder="Type a command or search..." class="input w-full pl-10"> 1127 <i data-lucide="search" 1128 class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground"></i> 1129 </div> 1130 <div class="space-y-1"> 1131 <div class="flex items-center space-x-3 px-3 py-2 hover:bg-accent rounded cursor-pointer"> 1132 <i data-lucide="file" class="w-4 h-4 text-muted-foreground"></i> 1133 <span class="text-sm">Create new file</span> 1134 <span class="text-xs text-muted-foreground ml-auto">⌘N</span> 1135 </div> 1136 <div class="flex items-center space-x-3 px-3 py-2 hover:bg-accent rounded cursor-pointer"> 1137 <i data-lucide="folder" class="w-4 h-4 text-muted-foreground"></i> 1138 <span class="text-sm">Open folder</span> 1139 <span class="text-xs text-muted-foreground ml-auto">⌘O</span> 1140 </div> 1141 <div class="flex items-center space-x-3 px-3 py-2 hover:bg-accent rounded cursor-pointer"> 1142 <i data-lucide="settings" class="w-4 h-4 text-muted-foreground"></i> 1143 <span class="text-sm">Open settings</span> 1144 <span class="text-xs text-muted-foreground ml-auto">⌘,</span> 1145 </div> 1146 </div> 1147 </div> 1148 </div> 1149 1150 <!-- Kanban Board --> 1151 <div class="card p-6"> 1152 <h3 class="text-xl font-semibold mb-4">Kanban Board</h3> 1153 <div class="grid grid-cols-3 gap-4"> 1154 <div class="space-y-3"> 1155 <h4 class="text-sm font-medium text-muted-foreground">To Do</h4> 1156 <div class="space-y-2"> 1157 <div class="bg-card border rounded p-3"> 1158 <h5 class="text-sm font-medium">Design new feature</h5> 1159 <p class="text-xs text-muted-foreground mt-1">Create wireframes and mockups</p> 1160 </div> 1161 <div class="bg-card border rounded p-3"> 1162 <h5 class="text-sm font-medium">Review code</h5> 1163 <p class="text-xs text-muted-foreground mt-1">Check pull request #123</p> 1164 </div> 1165 </div> 1166 </div> 1167 <div class="space-y-3"> 1168 <h4 class="text-sm font-medium text-muted-foreground">In Progress</h4> 1169 <div class="space-y-2"> 1170 <div class="bg-card border rounded p-3"> 1171 <h5 class="text-sm font-medium">Implement API</h5> 1172 <p class="text-xs text-muted-foreground mt-1">Backend development</p> 1173 </div> 1174 </div> 1175 </div> 1176 <div class="space-y-3"> 1177 <h4 class="text-sm font-medium text-muted-foreground">Done</h4> 1178 <div class="space-y-2"> 1179 <div class="bg-card border rounded p-3"> 1180 <h5 class="text-sm font-medium">Fix bug #456</h5> 1181 <p class="text-xs text-muted-foreground mt-1">Resolved login issue</p> 1182 </div> 1183 </div> 1184 </div> 1185 </div> 1186 </div> 1187 1188 <!-- Timeline --> 1189 <div class="card p-6"> 1190 <h3 class="text-xl font-semibold mb-4">Timeline</h3> 1191 <div class="space-y-4"> 1192 <div class="flex items-start space-x-3"> 1193 <div class="w-2 h-2 bg-primary rounded-full mt-2"></div> 1194 <div> 1195 <h5 class="text-sm font-medium">Project started</h5> 1196 <p class="text-xs text-muted-foreground">2 hours ago</p> 1197 </div> 1198 </div> 1199 <div class="flex items-start space-x-3"> 1200 <div class="w-2 h-2 bg-secondary rounded-full mt-2"></div> 1201 <div> 1202 <h5 class="text-sm font-medium">First milestone reached</h5> 1203 <p class="text-xs text-muted-foreground">1 hour ago</p> 1204 </div> 1205 </div> 1206 <div class="flex items-start space-x-3"> 1207 <div class="w-2 h-2 bg-accent rounded-full mt-2"></div> 1208 <div> 1209 <h5 class="text-sm font-medium">Code review completed</h5> 1210 <p class="text-xs text-muted-foreground">30 minutes ago</p> 1211 </div> 1212 </div> 1213 </div> 1214 </div> 1215 1216 <!-- User Profile Card --> 1217 <div class="card p-6"> 1218 <h3 class="text-xl font-semibold mb-4">User Profile Card</h3> 1219 <div class="flex items-center space-x-4"> 1220 <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center"> 1221 <span class="text-primary-foreground font-medium">JD</span> 1222 </div> 1223 <div class="flex-1"> 1224 <h5 class="font-medium">John Doe</h5> 1225 <p class="text-sm text-muted-foreground">Software Engineer</p> 1226 <div class="flex items-center space-x-2 mt-1"> 1227 <div class="w-2 h-2 bg-green-500 rounded-full"></div> 1228 <span class="text-xs text-muted-foreground">Online</span> 1229 </div> 1230 </div> 1231 <button class="btn btn-sm btn-outline">Follow</button> 1232 </div> 1233 </div> 1234 </div> 1235 </div> 1236 </section> 1237 1238 <!-- Footer --> 1239 <footer class="bg-muted text-muted-foreground py-8"> 1240 <div class="container mx-auto px-4 text-center"> 1241 <p>© 2024 Basecoat Demo. All rights reserved.</p> 1242 </div> 1243 </footer> 1244 </body> 1245 1246 </html>