|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en" class="scroll-smooth"> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="UTF-8"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | + <title>Forge Kernel - Building Admin Panels & Dashboards</title> |
| 8 | + <script src="https://cdn.tailwindcss.com"></script> |
| 9 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> |
| 10 | + <script |
| 11 | + src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
| 12 | + <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet"> |
| 13 | + <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
| 14 | + <link rel="stylesheet" href="assets/css/docs.css"> |
| 15 | +</head> |
| 16 | + |
| 17 | +<body class="bg-gray-50 text-gray-900"> |
| 18 | + <!-- Navigation --> |
| 19 | + <nav class="bg-white shadow-sm border-b"> |
| 20 | + <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| 21 | + <div class="flex justify-between h-16"> |
| 22 | + <div class="flex items-center"> |
| 23 | + <div class="flex-shrink-0"> |
| 24 | + <h1 class="text-xl font-bold text-gray-900"> |
| 25 | + Forge Kernel |
| 26 | + </h1> |
| 27 | + </div> |
| 28 | + <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
| 29 | + <a href="index.html" |
| 30 | + class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600"> |
| 31 | + Home |
| 32 | + </a> |
| 33 | + <a href="getting-started.html" |
| 34 | + class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600"> |
| 35 | + Getting Started |
| 36 | + </a> |
| 37 | + <a href="core-concepts.html" |
| 38 | + class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600"> |
| 39 | + Core Concepts |
| 40 | + </a> |
| 41 | + <a href="modules.html" |
| 42 | + class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600"> |
| 43 | + Capabilities |
| 44 | + </a> |
| 45 | + <a href="api-reference.html" |
| 46 | + class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600"> |
| 47 | + API Reference |
| 48 | + </a> |
| 49 | + <a href="tutorial.html" |
| 50 | + class="text-blue-600 inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 border-blue-600"> |
| 51 | + Tutorials |
| 52 | + </a> |
| 53 | + </div> |
| 54 | + </div> |
| 55 | + <!-- Mobile menu button --> |
| 56 | + <div class="flex items-center sm:hidden"> |
| 57 | + <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 p-2"> |
| 58 | + <i class="fas fa-bars text-xl"></i> |
| 59 | + </button> |
| 60 | + </div> |
| 61 | + </div> |
| 62 | + </div> |
| 63 | + |
| 64 | + <!-- Mobile menu --> |
| 65 | + <div id="mobile-menu" class="sm:hidden hidden bg-white border-t border-gray-200"> |
| 66 | + <div class="px-2 pt-2 pb-3 space-y-1"> |
| 67 | + <a href="index.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Home</a> |
| 68 | + <a href="getting-started.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Getting Started</a> |
| 69 | + <a href="core-concepts.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Core Concepts</a> |
| 70 | + <a href="modules.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Capabilities</a> |
| 71 | + <a href="api-reference.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">API Reference</a> |
| 72 | + <a href="tutorial.html" class="block px-3 py-2 text-blue-600 font-medium">Tutorials</a> |
| 73 | + </div> |
| 74 | + </div> |
| 75 | + </nav> |
| 76 | + |
| 77 | + <!-- Main Content --> |
| 78 | + <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| 79 | + <!-- Breadcrumb Navigation --> |
| 80 | + <nav class="mb-6" aria-label="Breadcrumb"> |
| 81 | + <ol class="flex items-center space-x-2 text-sm text-gray-500"> |
| 82 | + <li><a href="index.html" class="hover:text-blue-600">Home</a></li> |
| 83 | + <li><i class="fas fa-chevron-right text-xs"></i></li> |
| 84 | + <li><a href="tutorial.html" class="hover:text-blue-600">Tutorials</a></li> |
| 85 | + <li><i class="fas fa-chevron-right text-xs"></i></li> |
| 86 | + <li class="text-gray-900 font-medium">Building Admin Panels & Dashboards</li> |
| 87 | + </ol> |
| 88 | + </nav> |
| 89 | + |
| 90 | + <div class="flex flex-col lg:flex-row gap-8"> |
| 91 | + <!-- Sidebar Navigation --> |
| 92 | + <div id="sidebar-nav" class="lg:w-1/4"> |
| 93 | + <div class="bg-white rounded-lg shadow-sm p-6 sticky top-8 max-h-[calc(100vh-4rem)] overflow-y-auto"> |
| 94 | + <h3 class="text-lg font-semibold text-gray-900 mb-4">Tutorial</h3> |
| 95 | + <nav class="space-y-2"> |
| 96 | + <a href="#introduction" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Introduction</a> |
| 97 | + </nav> |
| 98 | + </div> |
| 99 | + </div> |
| 100 | + |
| 101 | + <!-- Main Content --> |
| 102 | + <div class="lg:w-3/4"> |
| 103 | + <div class="bg-white rounded-lg shadow-sm p-8"> |
| 104 | + <div class="flex items-center mb-4"> |
| 105 | + <span class="bg-yellow-100 text-yellow-800 text-sm font-semibold px-3 py-1 rounded-full mr-3">Intermediate</span> |
| 106 | + <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 2-3 hours</span> |
| 107 | + </div> |
| 108 | + <h1 class="text-4xl font-bold text-gray-900 mb-4">Building Admin Panels & Dashboards</h1> |
| 109 | + <p class="text-xl text-gray-600 mb-8"> |
| 110 | + Create a comprehensive admin panel with dashboards, data tables, charts, and management interfaces using Forge Kernel modules. |
| 111 | + </p> |
| 112 | + |
| 113 | + <!-- Coming Soon --> |
| 114 | + <section id="introduction" class="section-anchor mb-12"> |
| 115 | + <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded"> |
| 116 | + <div class="flex items-center mb-4"> |
| 117 | + <i class="fas fa-info-circle text-yellow-600 text-2xl mr-3"></i> |
| 118 | + <h2 class="text-2xl font-bold text-gray-900">Coming Soon</h2> |
| 119 | + </div> |
| 120 | + <p class="text-gray-700 mb-4"> |
| 121 | + This tutorial is currently under development. It will cover: |
| 122 | + </p> |
| 123 | + <ul class="list-disc list-inside space-y-2 text-gray-700 mb-4"> |
| 124 | + <li>Admin panel architecture</li> |
| 125 | + <li>Dashboard design and data visualization</li> |
| 126 | + <li>Data tables with filtering and pagination</li> |
| 127 | + <li>Role-based access control</li> |
| 128 | + <li>Admin-specific routes and middleware</li> |
| 129 | + <li>Bulk operations</li> |
| 130 | + <li>Admin UI components</li> |
| 131 | + </ul> |
| 132 | + <p class="text-gray-700"> |
| 133 | + Check back soon for the complete tutorial! |
| 134 | + </p> |
| 135 | + </div> |
| 136 | + </section> |
| 137 | + </div> |
| 138 | + </div> |
| 139 | + </div> |
| 140 | + </div> |
| 141 | + |
| 142 | + <script> |
| 143 | + // Mobile menu toggle |
| 144 | + document.getElementById('mobile-menu-button')?.addEventListener('click', function () { |
| 145 | + const menu = document.getElementById('mobile-menu'); |
| 146 | + menu?.classList.toggle('hidden'); |
| 147 | + }); |
| 148 | + </script> |
| 149 | +</body> |
| 150 | + |
| 151 | +</html> |
| 152 | + |
0 commit comments