ethox/markdowncmsaurus-rex
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>MarkdownCMSaurus - Admin</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 100: '#f0f9ff',17 500: '#0ea5e9',18 900: '#082f49'19 },20 secondary: {21 100: '#ecfdf5',22 500: '#10b981',23 900: '#064e3b'24 }25 }26 }27 }28 }29 </script>30 <style>31 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');32 body {33 font-family: 'Inter', sans-serif;34 }35 </style>36</head>37<body class="bg-gray-100 min-h-screen">38 <div id="app">39 <!-- Sidebar Navigation -->40 <div class="flex h-screen overflow-hidden">41 <div class="hidden md:flex md:flex-shrink-0">42 <div class="flex flex-col w-64 bg-white border-r border-gray-200">43 <div class="h-0 flex-1 flex flex-col pt-5 pb-4">44 <div class="flex items-center flex-shrink-0 px-4">45 <i data-feather="file-text" class="text-secondary-500 h-6 w-6"></i>46 <span class="ml-2 text-xl font-bold text-gray-900">CMSaurus</span>47 </div>48 <nav class="mt-5 flex-1 px-2 bg-white space-y-1">49 <a href="#" class="bg-primary-100 text-primary-500 group flex items-center px-2 py-2 text-sm font-medium rounded-md">50 <i data-feather="home" class="text-primary-500 mr-3 h-5 w-5"></i>51 Dashboard52 </a>53 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">54 <i data-feather="file-text" class="text-gray-400 group-hover:text-gray-500 mr-3 h-5 w-5"></i>55 Posts56 </a>57 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">58 <i data-feather="tag" class="text-gray-400 group-hover:text-gray-500 mr-3 h-5 w-5"></i>59 Tags60 </a>61 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">62 <i data-feather="folder" class="text-gray-400 group-hover:text-gray-500 mr-3 h-5 w-5"></i>63 Categories64 </a>65 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">66 <i data-feather="image" class="text-gray-400 group-hover:text-gray-500 mr-3 h-5 w-5"></i>67 Media68 </a>69 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">70 <i data-feather="settings" class="text-gray-400 group-hover:text-gray-500 mr-3 h-5 w-5"></i>71 Settings72 </a>73 </nav>74 </div>75 <div class="flex-shrink-0 flex border-t border-gray-200 p-4">76 <div class="flex items-center">77 <div>78 <img class="inline-block h-9 w-9 rounded-full" src="http://static.photos/people/200x200/42" alt="Admin">79 </div>80 <div class="ml-3">81 <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">Admin User</p>82 <a href="#" class="text-xs font-medium text-primary-500 group-hover:text-primary-700">View profile</a>83 </div>84 </div>85 </div>86 </div>87 </div>88 89 <!-- Main Content -->90 <div class="flex-1 overflow-auto focus:outline-none">91 <!-- Top Navigation -->92 <div class="bg-white shadow-sm">93 <div class="px-4 sm:px-6 lg:px-8">94 <div class="flex justify-between h-16">95 <div class="flex-1 flex">96 <div class="flex-shrink-0 flex items-center md:hidden">97 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">98 <i data-feather="menu" class="h-6 w-6"></i>99 </button>100 </div>101 <div class="flex-1 flex justify-center md:justify-end">102 <div class="w-full max-w-lg lg:max-w-xs">103 <div class="relative text-gray-400 focus-within:text-gray-600">104 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">105 <i data-feather="search" class="h-5 w-5"></i>106 </div>107 <input id="search" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Search" type="search">108 </div>109 </div>110 </div>111 </div>112 <div class="flex items-center">113 <button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">114 <i data-feather="bell" class="h-6 w-6"></i>115 </button>116 <div class="ml-3 relative md:hidden">117 <div>118 <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" id="user-menu-button">119 <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="Admin">120 </button>121 </div>122 </div>123 </div>124 </div>125 </div>126 </div>127 128 <!-- Main Content Area -->129 <main class="flex-1">130 <div class="py-6">131 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">132 <h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>133 </div>134 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">135 <div class="py-4">136 <!-- Stats Cards -->137 <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">138 <!-- Total Posts -->139 <div class="bg-white overflow-hidden shadow rounded-lg">140 <div class="px-4 py-5 sm:p-6">141 <div class="flex items-center">142 <div class="flex-shrink-0 bg-primary-500 rounded-md p-3">143 <i data-feather="file-text" class="text-white h-6 w-6"></i>144 </div>145 <div class="ml-5 w-0 flex-1">146 <dl>147 <dt class="text-sm font-medium text-gray-500 truncate">Total Posts</dt>148 <dd class="flex items-baseline">149 <div class="text-2xl font-semibold text-gray-900">24</div>150 </dd>151 </dl>152 </div>153 </div>154 </div>155 </div>156 157 <!-- Published Posts -->158 <div class="bg-white overflow-hidden shadow rounded-lg">159 <div class="px-4 py-5 sm:p-6">160 <div class="flex items-center">161 <div class="flex-shrink-0 bg-green-500 rounded-md p-3">162 <i data-feather="check-circle" class="text-white h-6 w-6"></i>163 </div>164 <div class="ml-5 w-0 flex-1">165 <dl>166 <dt class="text-sm font-medium text-gray-500 truncate">Published</dt>167 <dd class="flex items-baseline">168 <div class="text-2xl font-semibold text-gray-900">18</div>169 </dd>170 </dl>171 </div>172 </div>173 </div>174 </div>175 176 <!-- Drafts -->177 <div class="bg-white overflow-hidden shadow rounded-lg">178 <div class="px-4 py-5 sm:p-6">179 <div class="flex items-center">180 <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">181 <i data-feather="edit-2" class="text-white h-6 w-6"></i>182 </div>183 <div class="ml-5 w-0 flex-1">184 <dl>185 <dt class="text-sm font-medium text-gray-500 truncate">Drafts</dt>186 <dd class="flex items-baseline">187 <div class="text-2xl font-semibold text-gray-900">6</div>188 </dd>189 </dl>190 </div>191 </div>192 </div>193 </div>194 195 <!-- Tags -->196 <div class="bg-white overflow-hidden shadow rounded-lg">197 <div class="px-4 py-5 sm:p-6">198 <div class="flex items-center">199 <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">200 <i data-feather="tag" class="text-white h-6 w-6"></i>201 </div>202 <div class="ml-5 w-0 flex-1">203 <dl>204 <dt class="text-sm font-medium text-gray-500 truncate">Tags</dt>205 <dd class="flex items-baseline">206 <div class="text-2xl font-semibold text-gray-900">15</div>207 </dd>208 </dl>209 </div>210 </div>211 </div>212 </div>213 </div>214 215 <!-- Recent Posts -->216 <div class="mt-8">217 <div class="bg-white shadow overflow-hidden sm:rounded-lg">218 <div class="px-4 py-5 sm:px-6 border-b border-gray-200">219 <div class="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">220 <div class="ml-4 mt-4">221 <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Posts</h3>222 </div>223 <div class="ml-4 mt-4 flex-shrink-0">224 <button type="button" class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">225 <i data-feather="plus" class="-ml-1 mr-2 h-4 w-4"></i>226 New Post227 </button>228 </div>229 </div>230 </div>231 <div class="bg-white overflow-hidden">232 <table class="min-w-full divide-y divide-gray-200">233 <thead class="bg-gray-50">234 <tr>235 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">236 Title237 </th>238 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">239 Status240 </th>241 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">242 Tags243 </th>244 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">245 Last Updated246 </th>247 <th scope="col" class="relative px-6 py-3">248 <span class="sr-only">Edit</span>249 </th>250 </tr>251 </thead>252 <tbody class="bg-white divide-y divide-gray-200">253 <tr>254 <td class="px-6 py-4 whitespace-nowrap">255 <div class="flex items-center">256 <div class="flex-shrink-0 h-10 w-10">257 <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/1" alt="">258 </div>259 <div class="ml-4">260 <div class="text-sm font-medium text-gray-900">261 Getting Started with MarkdownCMSaurus262 </div>263 <div class="text-sm text-gray-500">264 tutorial265 </div>266 </div>267 </div>268 </td>269 <td class="px-6 py-4 whitespace-nowrap">270 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">271 Published272 </span>273 </td>274 <td class="px-6 py-4 whitespace-nowrap">275 <div class="flex flex-wrap gap-1">276 <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">CMS</span>277 <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Tutorial</span>278 </div>279 </td>280 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">281 2 days ago282 </td>283 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">284 <a href="#" class="text-primary-500 hover:text-primary-700">Edit</a>285 </td>286 </tr>287 <tr>288 <td class="px-6 py-4 whitespace-nowrap">289 <div class="flex items-center">290 <div class="flex-shrink-0 h-10 w-10">291 <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/2" alt="">292 </div>293 <div class="ml-4">294 <div class="text-sm font-medium text-gray-900">295 Advanced Content Workflows296 </div>297 <div class="text-sm text-gray-500">298 guide299 </div>300 </div>301 </div>302 </td>303 <td class="px-6 py-4 whitespace-nowrap">304 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">305 Draft306 </span>307 </td>308 <td class="px-6 py-4 whitespace-nowrap">309 <div class="flex flex-wrap gap-1">310 <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Workflow</span>311 <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Guide</span>312 </div>313 </td>314 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">315 1 week ago316 </td>317 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">318 <a href="#" class="text-primary-500 hover:text-primary-700">Edit</a>319 </td>320 </tr>321 <tr>322 <td class="px-6 py-4 whitespace-nowrap">323 <div class="flex items-center">324 <div class="flex-shrink-0 h-10 w-10">325 <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/3" alt="">326 </div>327 <div class="ml-4">328 <div class="text-sm font-medium text-gray-900">329 Migrating from WordPress330 </div>331 <div class="text-sm text-gray-500">332 migration333 </div>334 </div>335 </div>336 </td>337 <td class="px-6 py-4 whitespace-nowrap">338 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">339 Published340 </span>341 </td>342 <td class="px-6 py-4 whitespace-nowrap">343 <div class="flex flex-wrap gap-1">344 <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Migration</span>345 <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">WordPress</span>346 </div>347 </td>348 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">349 3 weeks ago350 </td>351 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">352 <a href="#" class="text-primary-500 hover:text-primary-700">Edit</a>353 </td>354 </tr>355 </tbody>356 </table>357 </div>358 </div>359 </div>360 </div>361 </div>362 </div>363 </main>364 </div>365 </div>366 </div>367 368 <script>369 feather.replace();370 </script>371</body>372</html>373