├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── apple-touch-icon.png ├── css │ └── main.css ├── favicon-16x16.png ├── favicon-32x32.png ├── forms.html ├── img │ └── justboil-logo.svg ├── index.html ├── js │ ├── chart.sample.js │ ├── chart.sample.min.js │ ├── main.js │ └── main.min.js ├── login.html ├── profile.html ├── safari-pinned-tab.svg └── tables.html ├── gulpfile.js ├── package.json ├── postcss.config.js ├── src ├── css │ ├── _app.css │ ├── _aside.css │ ├── _button.css │ ├── _card.css │ ├── _footer.css │ ├── _hero.css │ ├── _icon.css │ ├── _image.css │ ├── _modal.css │ ├── _navbar.css │ ├── _notifications.css │ ├── _progress.css │ ├── _table.css │ ├── _title-bar.css │ ├── form │ │ ├── _checkbox-radio-switch.css │ │ └── _form.css │ ├── main.css │ └── tailwind │ │ ├── _base.css │ │ ├── _components.css │ │ └── _utilities.css ├── html │ ├── forms.html │ ├── index.html │ ├── login.html │ ├── parts │ │ ├── app-close.html │ │ ├── app-open.html │ │ ├── aside.html │ │ ├── bottom-scripts-home.html │ │ ├── bottom-scripts.html │ │ ├── bottom.html │ │ ├── footer.html │ │ ├── head.html │ │ ├── hero-bar.html │ │ ├── navbar.html │ │ ├── sample-modal.html │ │ └── title-bar.html │ ├── profile.html │ └── tables.html ├── img │ └── justboil-logo.svg ├── js │ ├── chart.sample.js │ └── main.js └── tailwind-favicons │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── safari-pinned-tab.svg └── tailwind.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 4 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.{js,css,scss,yml,yaml,html,json}] 15 | indent_size = 2 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Files 2 | .DS_Store 3 | npm-debug.log 4 | package-lock.json 5 | 6 | # Folders 7 | .idea/ 8 | node_modules 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019-2022 JustBoil.me (https://justboil.me) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Admin One — Free Tailwind 3.x Admin Dashboard](https://justboil.me/tailwind-admin-templates/free-dashboard/) 2 | 3 | [![version](https://img.shields.io/github/v/release/justboil/admin-one-tailwind)](https://justboil.me/tailwind-admin-templates/free-dashboard/) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://justboil.me/tailwind-admin-templates/free-dashboard/) 4 | 5 | [![Free Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-hi-res.png)](https://justboil.github.io/admin-one-tailwind/) 6 | 7 | **Admin One** is simple, beautiful and free Tailwind CSS admin dashboard 8 | 9 | * Free under MIT License 10 | * Built with TailwindCSS v3 11 | * Pure HTML & CSS 12 | * No js framework dependencies 13 | * Ready-to-use CSS files 14 | * [Free Vue.js 3 version](https://github.com/justboil/admin-one-vue-tailwind) 15 | * [Premium Vue.js 3 version](https://justboil.me/tailwind-admin-templates/vue-dashboard) 16 | 17 | ## Table of Contents 18 | 19 | * [Other versions](#other-versions) 20 | * [Vue.js 3 TailwindCSS](#vuejs-3-tailwindcss-dashboard) 21 | * [Demo](#demo) 22 | * [Quick Start](#quick-start) 23 | * [Browser Support](#browser-support) 24 | * [Reporting Issues](#reporting-issues) 25 | * [Licensing](#licensing) 26 | * [Useful Links](#useful-links) 27 | 28 | ## Other versions 29 | 30 | ### Vue.js 3 TailwindCSS dashboard 31 | 32 | More info: https://github.com/justboil/admin-one-vue-tailwind 33 | 34 | ## Demo 35 | 36 | #### Free dashboard demo 37 | 38 | https://justboil.github.io/admin-one-tailwind/ 39 | 40 | #### Premium Vue.js 3 dashboard demo 41 | 42 | https://tailwind-vue.justboil.me/ 43 | 44 | ## Quick Start 45 | 46 | #### Get the repo 47 | 48 | * [Create new repo](https://github.com/justboil/admin-one-tailwind/generate) from this template 49 | * … or clone the repo on GitHub 50 | * … or [download .zip](https://github.com/justboil/admin-one-tailwind/archive/master.zip) from GitHub 51 | 52 | #### HTML & CSS 53 | 54 | Check `dist` directory. 55 | 56 | #### npm tools 57 | 58 | ##### Install 59 | 60 | `cd` to project's dir and run `npm install` 61 | 62 | ##### Build 63 | 64 | `npm run build` to rebuild `dist` from sources in `src` directory 65 | 66 | ## Browser Support 67 | 68 | We try to make sure Dashboard works well in the latest versions of all major browsers 69 | 70 | Chrome Firefox Edge Safari Opera 71 | 72 | ## Reporting Issues 73 | 74 | JustBoil's free items are limited to community support on GitHub. 75 | 76 | The issue list is reserved exclusively for bug reports and feature requests. That means we do not accept usage questions. If you open an issue that does not conform to the requirements, it will be closed. 77 | 78 | 1. Make sure that you are using the latest version of the Dashboard. Issues for outdated versions are irrelevant 79 | 2. Provide steps to reproduce 80 | 3. Provide an expected behavior 81 | 4. Describe what is actually happening 82 | 5. Platform, Browser & version as some issues may be browser specific 83 | 84 | ## Licensing 85 | 86 | - Copyright © 2019-2022 JustBoil.me (https://justboil.me) 87 | - Licensed under MIT 88 | 89 | ## Useful Links 90 | 91 | - [JustBoil.me](https://justboil.me/) 92 | - [TailwindCSS](https://tailwindcss.com/) 93 | -------------------------------------------------------------------------------- /dist/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justboil/admin-one-tailwind/5a033707365a7b4f290d9dfdd5d7f09ad4dd6129/dist/apple-touch-icon.png -------------------------------------------------------------------------------- /dist/css/main.css: -------------------------------------------------------------------------------- 1 | *,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}@media (min-width:1024px){.navbar,.navbar-end,.navbar-menu,.navbar-start{display:flex;align-items:stretch}}.navbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;height:3.5rem;width:100vw;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}@media (min-width:1024px){.navbar{width:auto;padding-left:15rem}}.navbar-brand{display:flex;height:3.5rem;flex:1 1 0%;align-items:stretch}.navbar-brand.is-right{flex:none}@media (min-width:1024px){.navbar-brand.is-right{display:none}}.navbar-brand .navbar-item{display:flex;align-items:center}.navbar-item,.navbar-link{display:block;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;padding-right:.75rem}.navbar-item{position:relative;flex-shrink:0;flex-grow:0}@media (min-width:1024px){.navbar-item{display:flex;align-items:center}.navbar-item.mobile-aside-button{display:none}.navbar-item.has-divider{border-right-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}}.navbar-item>.navbar-link{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}@media (min-width:1024px){.navbar-item>.navbar-link{background-color:transparent}}.navbar-item .icon+span{margin-left:.5rem}.navbar-item.has-user-avatar>.navbar-link{display:flex;align-items:center}.navbar-item.has-user-avatar .user-avatar{margin-right:.75rem;display:inline-flex;height:1.5rem;width:1.5rem}.navbar-item.dropdown{padding:0}@media (min-width:1024px){.navbar-item.dropdown{padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;padding-right:.75rem}}.navbar-item.dropdown>.navbar-link .icon:last-child{display:none}@media (min-width:1024px){.navbar-item.dropdown>.navbar-link .icon:last-child{display:inline-flex}.navbar-item.desktop-icon-only{width:4rem;justify-content:center}.navbar-item.desktop-icon-only span:last-child{display:none}}.navbar-item .input{border-width:0}.navbar-menu{max-height:calc(100vh - 3.5rem);position:absolute;top:3.5rem;left:0;display:none;width:100vw;overflow:auto;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:1024px){.navbar-menu{position:static;display:flex;flex-grow:1;overflow:visible;border-bottom-width:0;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}.navbar-menu.active{display:block}@media (min-width:1024px){.navbar-end{margin-left:auto;justify-content:flex-end}}.navbar-item .navbar-dropdown{font-size:.875rem;line-height:1.25rem}@media (min-width:1024px){.navbar-item .navbar-dropdown{position:absolute;top:100%;left:0;z-index:20;min-width:100%;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;border-top-width:2px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.navbar-item:not(.active) .navbar-dropdown{display:none}}.navbar-item.active.dropdown>.navbar-link,.navbar-item.active:not(.dropdown){--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.field:not(:last-child){margin-bottom:.75rem}.field.spaced:not(:last-child){margin-bottom:1.5rem}.field-body .field .field{margin-bottom:0}.field.addons{display:flex;justify-content:flex-start}.field.addons .control.expanded{flex-shrink:1;flex-grow:1}.field.addons .control:first-child:not(:only-child) .input,.field.addons .control:first-child:not(:only-child) .select select{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}.field.addons .control:last-child:not(:only-child) .input,.field.addons .control:last-child:not(:only-child) .select select{border-top-left-radius:0;border-bottom-left-radius:0;border-left-width:0}.field.grouped{display:flex;justify-content:flex-start}.field.grouped>.control:not(:last-child){margin-right:.75rem}.field.grouped.multiline{flex-wrap:wrap}.label{margin-bottom:.5rem;display:block;font-weight:700}.control{position:relative}.control.icons-left,.control.icons-right{position:relative}.file-cta,.file-name,.input,.select select,.textarea{border-radius:.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(156 163 175 / var(--tw-border-opacity));padding-left:.75rem;padding-right:.75rem;padding-top:.5rem;padding-bottom:.5rem}.file-cta,.file-name,.input,.select select{height:2.5rem}.input,.select select,.textarea{width:100%;max-width:100%;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.input:focus,.select select:focus,.textarea:focus{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.input[readonly]{pointer-events:none;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.textarea{height:6rem}.control.icons-left .icon,.control.icons-right .icon{position:absolute;top:0;z-index:10;height:2.5rem;width:2.5rem}.control.icons-left .input,.control.icons-left .select select{padding-left:2.5rem}.control.icons-left .icon.left{left:0}.control.icons-right .input,.control.icons-right .select select{padding-right:2.5rem}.control.icons-right .icon.right{right:0}.help{margin-top:.25rem;display:block;font-size:.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.file{position:relative;display:flex;align-items:stretch;justify-content:flex-start}.upload{display:inline-flex}.upload input[type=file]{position:absolute;top:0;left:0;z-index:-1;height:100%;width:100%;cursor:pointer;opacity:0;outline:2px solid transparent;outline-offset:2px}.mx-auto{margin-left:auto;margin-right:auto}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-48{height:12rem}.h-8{height:2rem}.w-48{width:12rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.rounded-full{border-radius:9999px}.font-black{font-weight:900}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}body{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));padding-top:3.5rem;font-size:1rem;line-height:1.5rem}@media (min-width:1024px){body{padding-left:15rem}}#app{width:100vw;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}@media (min-width:1024px){#app{width:auto}}.main-section{padding:1.5rem}.dropdown{cursor:pointer}.clipped,.clipped body{overflow:hidden}.m-clipped,.m-clipped body{overflow:hidden}@media (min-width:1024px){.m-clipped,.m-clipped body{overflow:visible}}.form-screen body{padding:0}.form-screen .main-section{display:flex;height:100vh;align-items:center;justify-content:center}.aside{position:fixed;left:-15rem;top:0;z-index:40;height:100vh;width:15rem;--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}@media (min-width:1024px){.aside{left:0}}.aside-tools{display:flex;height:3.5rem;width:100%;flex:1 1 0%;flex-direction:row;align-items:center;--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity));padding-left:.75rem;padding-right:.75rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.aside-mobile-expanded .aside{left:0}.aside-mobile-expanded .navbar{margin-left:15rem}.aside-mobile-expanded #app{margin-left:15rem}.aside-mobile-expanded,.aside-mobile-expanded body{overflow:hidden}@media (min-width:1024px){.aside-mobile-expanded,.aside-mobile-expanded body{overflow:visible}}.menu-label{padding:.75rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.menu-list li a{display:flex;padding-top:.5rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))}.menu-list li>a:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.menu-list li a .menu-item-label{flex-grow:1}.menu-list li a .icon{width:3rem;flex:none}.menu-list li.active>a{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.menu-list li ul{display:none}.menu-list li ul a{padding:.75rem;font-size:.875rem;line-height:1.25rem}.menu-list li.active ul{display:block;--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.is-title-bar{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));padding:1.5rem}.is-title-bar li{display:inline-block;padding-right:.75rem;font-size:1.5rem;line-height:2rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.is-title-bar li:not(:last-child):after{content:'/';display:inline-block;padding-left:.75rem}.is-title-bar li:last-child{padding-right:0;font-weight:900;--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.button{display:inline-flex;cursor:pointer;justify-content:center;white-space:nowrap;border-radius:.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(249 250 251 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding-left:1rem;padding-right:1rem;padding-top:.5rem;padding-bottom:.5rem;text-align:center;--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.button:hover{--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}.button:focus{outline:2px solid transparent;outline-offset:2px}.button.addon-right{border-top-right-radius:0;border-bottom-right-radius:0}.button.addon-left{border-top-left-radius:0;border-bottom-left-radius:0}.button.small{padding:.25rem;font-size:.75rem;line-height:1rem}.button.small.textual{padding-left:.75rem;padding-right:.75rem}.button.active{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.button.active:hover{--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}.button.green{--tw-border-opacity:1;border-color:rgb(34 197 94 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.button.green:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.button.red{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.button.red:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.button.blue{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.button.blue:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.button.light{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.button.light:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.buttons{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.buttons.nowrap{flex-wrap:nowrap}.buttons.right{justify-content:flex-end}.buttons .button{margin-left:.25rem;margin-right:.25rem}.is-hero-bar{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:1.5rem}.is-hero-bar h1{font-size:1.875rem;line-height:2.25rem;font-weight:600;line-height:1.25}.card{border-radius:.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.card.has-table .card-content{padding:0}.card-content{padding:1.5rem}.card-content hr{margin-top:1.5rem;margin-bottom:1.5rem;margin-left:-1.5rem;margin-right:-1.5rem}.card.empty .card-content{padding-top:3rem;padding-bottom:3rem;text-align:center;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.card-header{display:flex;align-items:stretch;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}.card-header-icon,.card-header-title{display:flex;align-items:center;padding-top:.75rem;padding-bottom:.75rem;padding-left:1rem;padding-right:1rem}.card-header-title{flex-grow:1;font-weight:700}.card-header-icon{justify-content:center}.widget-label h3{font-size:1.125rem;line-height:1.75rem;line-height:1.25;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.widget-label h1{font-size:1.875rem;line-height:2.25rem;font-weight:600;line-height:1.25}.form-screen .card{width:91.666667%;border-radius:.5rem;--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:1024px){.form-screen .card{width:41.666667%}}.icon{display:inline-flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}.icon.widget-icon{height:5rem;width:5rem}.icon.large{height:3rem;width:3rem}.icon i{display:inline-flex}table{width:100%}thead{display:none}@media (min-width:1024px){thead{display:table-header-group}}tr{position:relative;display:block;max-width:100%;border-bottom-width:4px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}@media (min-width:1024px){tr{display:table-row;border-bottom-width:0}}tr:last-child{border-bottom-width:0}@media (min-width:1024px){th{padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;padding-right:.75rem;text-align:left}}td{display:flex;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));padding-top:.75rem;padding-bottom:.75rem;padding-left:1rem;padding-right:1rem;text-align:right;vertical-align:top}@media (min-width:1024px){td{display:table-cell;border-bottom-width:0;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;padding-right:.75rem;text-align:left;vertical-align:middle}tr:nth-child(odd) td{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}}td:last-child{border-bottom-width:0}@media (min-width:1024px){tbody tr:hover td{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}}td:before{content:attr(data-label);padding-right:.75rem;text-align:left;font-weight:600}@media (min-width:1024px){td:before{display:none}td.checkbox-cell,th.checkbox-cell{width:1.25rem}}td.progress-cell progress{display:flex;width:40%;align-self:center}@media (min-width:1024px){td.progress-cell progress{width:100%}}td.image-cell{border-bottom-width:0}@media (min-width:1024px){td.image-cell{width:1.5rem}}td.actions-cell:before,td.image-cell:before{display:none}td.image-cell .image{margin-left:auto;margin-right:auto;height:6rem;width:6rem}@media (min-width:1024px){td.image-cell .image{height:1.5rem;width:1.5rem}}.table-pagination{border-top-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity));padding-left:1.5rem;padding-right:1.5rem;padding-top:.75rem;padding-bottom:.75rem}progress{height:.75rem;overflow:hidden;border-radius:9999px}progress::-webkit-progress-bar{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}progress::-webkit-progress-value{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}progress::-moz-progress-bar{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}progress::-ms-fill{border-width:0;--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.image{position:relative;display:block}.image img{display:block;height:auto;width:100%;max-width:100%}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.modal.active{display:flex}.modal-background{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgb(17 24 39 / var(--tw-bg-opacity));--tw-bg-opacity:0.8}.modal-card{max-height:calc(100vh - 160px);position:relative;display:flex;width:100%;flex-direction:column;overflow:hidden}@media (min-width:1024px){.modal-card{margin-left:auto;margin-right:auto;width:40%}}.modal-card-body{flex-shrink:1;flex-grow:1}.modal-card-body>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.modal-card-body{overflow:auto;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:1.5rem}.modal-card-foot,.modal-card-head{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:flex-start;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity));padding-left:1.5rem;padding-right:1.5rem;padding-top:1rem;padding-bottom:1rem}.modal-card-head{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-width:1px}.modal-card-foot{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;border-top-width:1px}.modal-card-foot .button:not(:last-child){margin-right:.5rem}.notification{border-radius:.25rem;padding-left:.75rem;padding-right:.75rem;padding-top:1.5rem;padding-bottom:1.5rem}.notification:not(:last-child){margin-bottom:1.5rem}.notification.blue{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.notification.green{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.notification.red{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.checkbox,.radio,.switch{position:relative;display:inline-flex;cursor:pointer;align-items:center}.checkbox input[type=checkbox],.radio input[type=radio],.switch input[type=checkbox]{position:absolute;left:0;z-index:-1;opacity:0}.checkbox input[type=checkbox]+.check,.radio input[type=radio]+.check,.switch input[type=checkbox]+.check{border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.checkbox input[type=checkbox]+.check:hover,.radio input[type=radio]+.check:hover,.switch input[type=checkbox]+.check:hover{--tw-border-opacity:1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.checkbox input[type=checkbox]+.check,.radio input[type=radio]+.check{display:block;height:1.25rem;width:1.25rem}.checkbox input[type=checkbox]+.check{border-radius:.25rem}.switch input[type=checkbox]+.check{display:flex;height:1.5rem;width:3rem;flex-shrink:0;align-items:center;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity));padding:.125rem}.radio input[type=radio]+.check,.switch input[type=checkbox]+.check,.switch input[type=checkbox]+.check:before{border-radius:9999px}.checkbox input[type=checkbox]:checked+.check,.radio input[type=radio]:checked+.check{border-width:4px;--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));background-position:center;background-repeat:no-repeat}.checkbox input[type=checkbox]:checked+.check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E")}.radio input[type=radio]:checked+.check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E")}.switch input[type=checkbox]:checked+.check{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.switch input[type=checkbox]+.check:before{content:'';display:block;height:1.25rem;width:1.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.switch input[type=checkbox]:checked+.check:before{transform:translate3d(110%,0 ,0);--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.checkbox .control-label,.radio .control-label,.switch .control-label{padding-left:.5rem}footer{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding-top:.5rem;padding-bottom:.5rem;padding-left:1.5rem;padding-right:1.5rem}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}} -------------------------------------------------------------------------------- /dist/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justboil/admin-one-tailwind/5a033707365a7b4f290d9dfdd5d7f09ad4dd6129/dist/favicon-16x16.png -------------------------------------------------------------------------------- /dist/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justboil/admin-one-tailwind/5a033707365a7b4f290d9dfdd5d7f09ad4dd6129/dist/favicon-32x32.png -------------------------------------------------------------------------------- /dist/js/chart.sample.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var randomChartData = function randomChartData(n) { 4 | var data = []; 5 | 6 | for (var i = 0; i < n; i++) { 7 | data.push(Math.round(Math.random() * 200)); 8 | } 9 | 10 | return data; 11 | }; 12 | 13 | var chartColors = { 14 | "default": { 15 | primary: '#00D1B2', 16 | info: '#209CEE', 17 | danger: '#FF3860' 18 | } 19 | }; 20 | var ctx = document.getElementById('big-line-chart').getContext('2d'); 21 | new Chart(ctx, { 22 | type: 'line', 23 | data: { 24 | datasets: [{ 25 | fill: false, 26 | borderColor: chartColors["default"].primary, 27 | borderWidth: 2, 28 | borderDash: [], 29 | borderDashOffset: 0.0, 30 | pointBackgroundColor: chartColors["default"].primary, 31 | pointBorderColor: 'rgba(255,255,255,0)', 32 | pointHoverBackgroundColor: chartColors["default"].primary, 33 | pointBorderWidth: 20, 34 | pointHoverRadius: 4, 35 | pointHoverBorderWidth: 15, 36 | pointRadius: 4, 37 | data: randomChartData(9) 38 | }, { 39 | fill: false, 40 | borderColor: chartColors["default"].info, 41 | borderWidth: 2, 42 | borderDash: [], 43 | borderDashOffset: 0.0, 44 | pointBackgroundColor: chartColors["default"].info, 45 | pointBorderColor: 'rgba(255,255,255,0)', 46 | pointHoverBackgroundColor: chartColors["default"].info, 47 | pointBorderWidth: 20, 48 | pointHoverRadius: 4, 49 | pointHoverBorderWidth: 15, 50 | pointRadius: 4, 51 | data: randomChartData(9) 52 | }, { 53 | fill: false, 54 | borderColor: chartColors["default"].danger, 55 | borderWidth: 2, 56 | borderDash: [], 57 | borderDashOffset: 0.0, 58 | pointBackgroundColor: chartColors["default"].danger, 59 | pointBorderColor: 'rgba(255,255,255,0)', 60 | pointHoverBackgroundColor: chartColors["default"].danger, 61 | pointBorderWidth: 20, 62 | pointHoverRadius: 4, 63 | pointHoverBorderWidth: 15, 64 | pointRadius: 4, 65 | data: randomChartData(9) 66 | }], 67 | labels: ['01', '02', '03', '04', '05', '06', '07', '08', '09'] 68 | }, 69 | options: { 70 | maintainAspectRatio: false, 71 | legend: { 72 | display: false 73 | }, 74 | responsive: true, 75 | tooltips: { 76 | backgroundColor: '#f5f5f5', 77 | titleFontColor: '#333', 78 | bodyFontColor: '#666', 79 | bodySpacing: 4, 80 | xPadding: 12, 81 | mode: 'nearest', 82 | intersect: 0, 83 | position: 'nearest' 84 | }, 85 | scales: { 86 | yAxes: [{ 87 | barPercentage: 1.6, 88 | gridLines: { 89 | drawBorder: false, 90 | color: 'rgba(29,140,248,0.0)', 91 | zeroLineColor: 'transparent' 92 | }, 93 | ticks: { 94 | padding: 20, 95 | fontColor: '#9a9a9a' 96 | } 97 | }], 98 | xAxes: [{ 99 | barPercentage: 1.6, 100 | gridLines: { 101 | drawBorder: false, 102 | color: 'rgba(225,78,202,0.1)', 103 | zeroLineColor: 'transparent' 104 | }, 105 | ticks: { 106 | padding: 20, 107 | fontColor: '#9a9a9a' 108 | } 109 | }] 110 | } 111 | } 112 | }); -------------------------------------------------------------------------------- /dist/js/chart.sample.min.js: -------------------------------------------------------------------------------- 1 | "use strict";var randomChartData=function(r){for(var o=[],a=0;a 2 | 3 | 4 | 5 | 6 | 7 | Login - Admin One Tailwind CSS Admin Dashboard 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 43 | 44 | 45 | 46 | 47 |
48 | 49 |
50 |
51 |
52 |

53 | 54 | Login 55 |

56 |
57 |
58 |
59 | 60 |
61 | 62 |
63 | 64 | 65 |
66 |

67 | Please enter your login 68 |

69 |
70 | 71 |
72 | 73 |

74 | 75 | 76 |

77 |

78 | Please enter your password 79 |

80 |
81 | 82 |
83 |
84 | 88 |
89 |
90 | 91 |
92 | 93 |
94 |
95 | 98 |
99 |
100 | 101 | Back 102 | 103 |
104 |
105 | 106 |
107 |
108 |
109 | 110 |
111 | 112 | 113 |
114 | 115 | 116 | 117 | 118 | 119 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /dist/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 33 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const {series, parallel, src, dest} = require('gulp') 2 | const rename = require('gulp-rename') 3 | const babel = require('gulp-babel') 4 | const concat = require('gulp-concat') 5 | const replace = require('gulp-replace') 6 | const uglify = require('gulp-uglify') 7 | const postcss = require('gulp-postcss') 8 | const cleancss = require('gulp-clean-css') 9 | 10 | /* Destination dir */ 11 | 12 | const destDir = './dist' 13 | 14 | /* JS. Transpile with babel & minify */ 15 | 16 | const processJs = (baseName, isMin) => { 17 | let r = src('src/js/' + baseName + '.js') 18 | .pipe(babel({ 19 | presets: ['@babel/env'] 20 | })) 21 | 22 | if (isMin) { 23 | r = r.pipe(uglify()).pipe(rename(baseName + '.min.js')) 24 | } 25 | 26 | return r.pipe(dest(destDir + '/js')) 27 | } 28 | 29 | const processJsMain = () => { 30 | return processJs('main') 31 | } 32 | 33 | const processJsMainMin = () => { 34 | return processJs('main', true) 35 | } 36 | 37 | const processJsChartSample = () => { 38 | return processJs('chart.sample') 39 | } 40 | 41 | const processJsChartSampleMin = () => { 42 | return processJs('chart.sample', true) 43 | } 44 | 45 | /* CSS */ 46 | 47 | const processCss = () => { 48 | return src('src/css/main.css') 49 | .pipe(postcss()) 50 | .pipe(cleancss()) 51 | .pipe(dest(destDir + '/css')) 52 | } 53 | 54 | /* HTML */ 55 | const dateNowMillis = Date.now() 56 | 57 | const concatHtml = file => { 58 | let replaceHtmlClassWith = '' 59 | const formScreenFiles = ['login'] 60 | 61 | if (formScreenFiles.indexOf(file) > -1) { 62 | replaceHtmlClassWith = 'form-screen' 63 | } 64 | 65 | const sources = [ 66 | 'src/html/parts/head.html', 67 | 'src/html/parts/app-open.html' 68 | ] 69 | 70 | if (formScreenFiles.indexOf(file) < 0) { 71 | sources.push( 72 | 'src/html/parts/navbar.html', 73 | 'src/html/parts/aside.html', 74 | 'src/html/parts/title-bar.html', 75 | 'src/html/parts/hero-bar.html' 76 | ) 77 | } 78 | 79 | sources.push(`src/html/${file}.html`) 80 | 81 | if (formScreenFiles.indexOf(file) < 0) { 82 | sources.push( 83 | 'src/html/parts/footer.html', 84 | 'src/html/parts/sample-modal.html' 85 | ) 86 | } 87 | 88 | sources.push( 89 | 'src/html/parts/app-close.html', 90 | 'src/html/parts/bottom-scripts.html' 91 | ) 92 | 93 | if (file === 'index') { 94 | sources.push('src/html/parts/bottom-scripts-home.html') 95 | } 96 | 97 | sources.push('src/html/parts/bottom.html') 98 | 99 | const titleStrings = { 100 | tables: 'Tables', 101 | index: 'Dashboard', 102 | forms: 'Forms', 103 | profile: 'Profile', 104 | login: 'Login' 105 | } 106 | 107 | const titleStringsLong = { 108 | tables: 'Responsive Tables' 109 | } 110 | 111 | const titleStringReplacement = titleStrings[file] ? titleStrings[file] : '' 112 | const titleStringLongReplacement = titleStringsLong[file] ? titleStringsLong[file] : titleStringReplacement 113 | 114 | return src(sources) 115 | .pipe(concat(`${file}.html`)) 116 | .pipe(replace('--date-now-millis', dateNowMillis.toString())) 117 | .pipe(replace('--html-class', replaceHtmlClassWith)) 118 | .pipe(replace('--stylesheet-min-path', `css/main.css?v=${dateNowMillis.toString()}`)) 119 | .pipe(replace(`--set-active-${file}-html`, 'active')) 120 | .pipe(replace(/ --set-active-[a-z-]+/gi, '')) 121 | .pipe(replace('{{ titleString }}', titleStringReplacement)) 122 | .pipe(replace('{{ titleStringLong }}', titleStringLongReplacement)) 123 | .pipe(dest(destDir)) 124 | } 125 | 126 | /* Img */ 127 | 128 | const copyImg = () => { 129 | return src('src/img/*') 130 | .pipe(dest(destDir + '/img')) 131 | } 132 | 133 | const copyTailwindFavicons = () => { 134 | return src('src/tailwind-favicons/*') 135 | .pipe(dest(destDir)) 136 | } 137 | 138 | exports.default = series( 139 | parallel( 140 | () => concatHtml('index'), 141 | () => concatHtml('tables'), 142 | () => concatHtml('forms'), 143 | () => concatHtml('profile'), 144 | () => concatHtml('login'), 145 | processJsMain, 146 | processJsMainMin, 147 | processJsChartSample, 148 | processJsChartSampleMin, 149 | copyImg, 150 | copyTailwindFavicons, 151 | ), 152 | processCss 153 | ) 154 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "admin-one-tailwind", 3 | "version": "1.1.0", 4 | "scripts": { 5 | "build:dev": "NODE_ENV=development gulp", 6 | "build": "NODE_ENV=production gulp", 7 | "deploy": "gh-pages -d dist" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.13.15", 11 | "@babel/preset-env": "^7.13.15", 12 | "autoprefixer": "^10.2.6", 13 | "gh-pages": "^4.0.0", 14 | "gulp": "^4.0.2", 15 | "gulp-babel": "^8.0.0", 16 | "gulp-clean-css": "^4.3.0", 17 | "gulp-concat": "^2.6.1", 18 | "gulp-postcss": "^9.0.0", 19 | "gulp-rename": "^2.0.0", 20 | "gulp-replace": "^1.0.0", 21 | "gulp-uglify": "^3.0.2", 22 | "postcss": "^8.3.0", 23 | "postcss-cli": "^8.3.1", 24 | "postcss-import": "^14.0.2", 25 | "tailwindcss": "^3.0.24" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('tailwindcss'), 5 | require('autoprefixer'), 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /src/css/_app.css: -------------------------------------------------------------------------------- 1 | body { 2 | @apply bg-gray-50 text-base pt-14 lg:pl-60; 3 | } 4 | 5 | #app { 6 | @apply w-screen transition-all lg:w-auto; 7 | } 8 | 9 | .main-section { 10 | @apply p-6; 11 | } 12 | 13 | .dropdown { 14 | @apply cursor-pointer; 15 | } 16 | 17 | .clipped, .clipped body { 18 | @apply overflow-hidden; 19 | } 20 | 21 | .m-clipped, .m-clipped body { 22 | @apply overflow-hidden lg:overflow-visible; 23 | } 24 | 25 | .form-screen body { 26 | @apply p-0; 27 | } 28 | 29 | .form-screen .main-section { 30 | @apply flex h-screen items-center justify-center; 31 | } 32 | -------------------------------------------------------------------------------- /src/css/_aside.css: -------------------------------------------------------------------------------- 1 | .aside { 2 | @apply w-60 -left-60 fixed top-0 z-40 h-screen bg-gray-800 transition-all lg:left-0; 3 | } 4 | 5 | .aside-tools { 6 | @apply flex flex-row w-full bg-gray-900 text-white flex-1 px-3 h-14 items-center; 7 | } 8 | 9 | .aside-mobile-expanded .aside { 10 | @apply left-0; 11 | } 12 | 13 | .aside-mobile-expanded .navbar { 14 | @apply ml-60; 15 | } 16 | 17 | .aside-mobile-expanded #app { 18 | @apply ml-60; 19 | } 20 | 21 | .aside-mobile-expanded, .aside-mobile-expanded body { 22 | @apply overflow-hidden lg:overflow-visible; 23 | } 24 | 25 | .menu-label { 26 | @apply p-3 text-xs uppercase text-gray-400; 27 | } 28 | 29 | .menu-list li a { 30 | @apply py-2 flex text-gray-300; 31 | } 32 | 33 | .menu-list li > a { 34 | @apply hover:bg-gray-700; 35 | } 36 | 37 | .menu-list li a .menu-item-label { 38 | @apply flex-grow; 39 | } 40 | 41 | .menu-list li a .icon { 42 | @apply w-12 flex-none; 43 | } 44 | 45 | .menu-list li.active > a { 46 | @apply bg-gray-700; 47 | } 48 | 49 | .menu-list li ul { 50 | @apply hidden; 51 | } 52 | 53 | .menu-list li ul a { 54 | @apply p-3 text-sm; 55 | } 56 | 57 | .menu-list li.active ul { 58 | @apply block bg-gray-600; 59 | } 60 | 61 | -------------------------------------------------------------------------------- /src/css/_button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | @apply inline-flex bg-white text-black border-gray-50 border cursor-pointer justify-center px-4 py-2 text-center 3 | whitespace-nowrap rounded 4 | hover:border-gray-500 5 | focus:outline-none; 6 | } 7 | 8 | .button.addon-right { 9 | @apply rounded-r-none; 10 | } 11 | 12 | .button.addon-left { 13 | @apply rounded-l-none; 14 | } 15 | 16 | .button.small { 17 | @apply text-xs p-1; 18 | } 19 | 20 | .button.small.textual { 21 | @apply px-3; 22 | } 23 | 24 | .button.active { 25 | @apply border-gray-300 hover:border-gray-500; 26 | } 27 | 28 | .button.green { 29 | @apply bg-green-500 border-green-500 text-white hover:bg-green-600; 30 | } 31 | 32 | .button.red { 33 | @apply bg-red-500 border-red-500 text-white hover:bg-red-600; 34 | } 35 | 36 | .button.blue { 37 | @apply bg-blue-500 border-blue-500 text-white hover:bg-blue-600; 38 | } 39 | 40 | .button.light { 41 | @apply bg-gray-100 border-gray-100 hover:bg-gray-200; 42 | } 43 | 44 | .buttons { 45 | @apply flex items-center flex-wrap justify-start; 46 | } 47 | 48 | .buttons.nowrap { 49 | @apply flex-nowrap; 50 | } 51 | 52 | .buttons.right { 53 | @apply justify-end; 54 | } 55 | 56 | .buttons .button { 57 | @apply mx-1; 58 | } 59 | -------------------------------------------------------------------------------- /src/css/_card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | @apply bg-white border border-gray-100 rounded; 3 | } 4 | 5 | .card.has-table .card-content { 6 | @apply p-0; 7 | } 8 | 9 | .card-content { 10 | @apply p-6; 11 | } 12 | 13 | .card-content hr { 14 | @apply my-6 -mx-6; 15 | } 16 | 17 | .card.empty .card-content { 18 | @apply text-center py-12 text-gray-500; 19 | } 20 | 21 | .card-header { 22 | @apply flex items-stretch border-b border-gray-100; 23 | } 24 | 25 | .card-header-title, .card-header-icon { 26 | @apply flex items-center py-3 px-4; 27 | } 28 | 29 | .card-header-title { 30 | @apply flex-grow font-bold ; 31 | } 32 | 33 | .card-header-icon { 34 | @apply justify-center; 35 | } 36 | 37 | .widget-label h3 { 38 | @apply text-lg leading-tight text-gray-500; 39 | } 40 | 41 | .widget-label h1 { 42 | @apply text-3xl leading-tight font-semibold; 43 | } 44 | 45 | .form-screen .card { 46 | @apply w-11/12 lg:w-5/12 shadow-2xl rounded-lg; 47 | } 48 | -------------------------------------------------------------------------------- /src/css/_footer.css: -------------------------------------------------------------------------------- 1 | footer { 2 | @apply bg-white py-2 px-6; 3 | } 4 | -------------------------------------------------------------------------------- /src/css/_hero.css: -------------------------------------------------------------------------------- 1 | .is-hero-bar { 2 | @apply bg-white border-b border-gray-100 p-6; 3 | } 4 | 5 | .is-hero-bar h1 { 6 | @apply text-3xl font-semibold leading-tight; 7 | } 8 | -------------------------------------------------------------------------------- /src/css/_icon.css: -------------------------------------------------------------------------------- 1 | .icon { 2 | @apply inline-flex justify-center items-center w-6 h-6; 3 | } 4 | 5 | .icon.widget-icon { 6 | @apply w-20 h-20; 7 | } 8 | 9 | .icon.large { 10 | @apply w-12 h-12; 11 | } 12 | 13 | .icon i { 14 | @apply inline-flex; 15 | } 16 | -------------------------------------------------------------------------------- /src/css/_image.css: -------------------------------------------------------------------------------- 1 | .image { 2 | @apply block relative; 3 | } 4 | 5 | .image img { 6 | @apply block h-auto w-full max-w-full; 7 | } 8 | -------------------------------------------------------------------------------- /src/css/_modal.css: -------------------------------------------------------------------------------- 1 | .modal { 2 | @apply hidden items-center flex-col justify-center overflow-hidden fixed inset-0 z-40; 3 | } 4 | 5 | .modal.active { 6 | @apply flex; 7 | } 8 | 9 | .modal-background { 10 | @apply absolute inset-0 bg-gray-900 bg-opacity-80; 11 | } 12 | 13 | .modal-card { 14 | max-height: calc(100vh - 160px); 15 | @apply w-full flex flex-col overflow-hidden relative 16 | lg:mx-auto lg:w-2/5; 17 | } 18 | 19 | .modal-card-body { 20 | @apply bg-white flex-grow flex-shrink overflow-auto p-6 space-y-2; 21 | } 22 | 23 | .modal-card-head, .modal-card-foot { 24 | @apply flex items-center flex-shrink-0 justify-start px-6 py-4 relative bg-gray-100 border-gray-200; 25 | } 26 | 27 | .modal-card-head { 28 | @apply border-b rounded-t; 29 | } 30 | 31 | .modal-card-foot { 32 | @apply border-t rounded-b; 33 | } 34 | 35 | .modal-card-foot .button:not(:last-child) { 36 | @apply mr-2; 37 | } 38 | -------------------------------------------------------------------------------- /src/css/_navbar.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .navbar, .navbar-menu, .navbar-start, .navbar-end { 3 | @apply lg:flex lg:items-stretch; 4 | } 5 | 6 | .navbar { 7 | @apply top-0 left-0 right-0 fixed flex bg-white h-14 border-b border-gray-100 z-30 w-screen transition-all 8 | lg:pl-60 lg:w-auto; 9 | } 10 | 11 | .navbar-brand { 12 | @apply flex-1 items-stretch flex h-14; 13 | } 14 | 15 | .navbar-brand.is-right { 16 | @apply flex-none lg:hidden; 17 | } 18 | 19 | .navbar-brand .navbar-item { 20 | @apply items-center flex; 21 | } 22 | 23 | .navbar-item, .navbar-link { 24 | @apply block py-2 px-3; 25 | } 26 | 27 | .navbar-item { 28 | @apply flex-grow-0 flex-shrink-0 relative lg:flex lg:items-center; 29 | } 30 | 31 | .navbar-item.mobile-aside-button { 32 | @apply lg:hidden; 33 | } 34 | 35 | .navbar-item.has-divider { 36 | @apply lg:border-r lg:border-gray-100; 37 | } 38 | 39 | .navbar-item > .navbar-link { 40 | @apply bg-gray-100 lg:bg-transparent; 41 | } 42 | 43 | .navbar-item .icon + span { 44 | @apply ml-2; 45 | } 46 | 47 | .navbar-item.has-user-avatar > .navbar-link { 48 | @apply flex items-center; 49 | } 50 | 51 | .navbar-item.has-user-avatar .user-avatar { 52 | @apply w-6 h-6 mr-3 inline-flex; 53 | } 54 | 55 | .navbar-item.dropdown { 56 | @apply p-0 lg:py-2 lg:px-3; 57 | } 58 | 59 | .navbar-item.dropdown > .navbar-link .icon:last-child { 60 | @apply hidden lg:inline-flex; 61 | } 62 | 63 | .navbar-item.desktop-icon-only { 64 | @apply lg:w-16 lg:justify-center; 65 | } 66 | 67 | .navbar-item.desktop-icon-only span:last-child { 68 | @apply lg:hidden; 69 | } 70 | 71 | .navbar-item .input { 72 | @apply border-0; 73 | } 74 | 75 | .navbar-menu { 76 | max-height: calc(100vh - 3.5rem); 77 | @apply hidden absolute w-screen top-14 left-0 bg-white border-b border-gray-100 overflow-auto shadow 78 | lg:flex lg:flex-grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none; 79 | } 80 | 81 | .navbar-menu.active { 82 | @apply block; 83 | } 84 | 85 | .navbar-end { 86 | @apply lg:justify-end lg:ml-auto; 87 | } 88 | 89 | .navbar-item .navbar-dropdown { 90 | @apply text-sm lg:border-gray-200 lg:border-t-2 91 | lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:shadow-md lg:rounded-b; 92 | } 93 | 94 | .navbar-item:not(.active) .navbar-dropdown { 95 | @apply lg:hidden; 96 | } 97 | 98 | .navbar-item.active:not(.dropdown), .navbar-item.active.dropdown > .navbar-link { 99 | @apply text-blue-500; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/css/_notifications.css: -------------------------------------------------------------------------------- 1 | .notification { 2 | @apply px-3 py-6 rounded; 3 | } 4 | 5 | .notification:not(:last-child) { 6 | @apply mb-6; 7 | } 8 | 9 | .notification.blue { 10 | @apply bg-blue-500 text-white; 11 | } 12 | 13 | .notification.green { 14 | @apply bg-green-500 text-white; 15 | } 16 | 17 | .notification.red { 18 | @apply bg-red-500 text-white; 19 | } 20 | -------------------------------------------------------------------------------- /src/css/_progress.css: -------------------------------------------------------------------------------- 1 | progress { 2 | @apply h-3 rounded-full overflow-hidden; 3 | } 4 | 5 | progress::-webkit-progress-bar { 6 | @apply bg-gray-200; 7 | } 8 | 9 | progress::-webkit-progress-value { 10 | @apply bg-blue-500; 11 | } 12 | 13 | progress::-moz-progress-bar { 14 | @apply bg-blue-500; 15 | } 16 | 17 | progress::-ms-fill { 18 | @apply bg-blue-500 border-0; 19 | } 20 | -------------------------------------------------------------------------------- /src/css/_table.css: -------------------------------------------------------------------------------- 1 | table { 2 | @apply w-full; 3 | } 4 | 5 | thead { 6 | @apply hidden lg:table-header-group; 7 | } 8 | 9 | tr { 10 | @apply max-w-full block relative border-b-4 border-gray-100 11 | lg:table-row lg:border-b-0; 12 | } 13 | 14 | tr:last-child { 15 | @apply border-b-0; 16 | } 17 | 18 | th { 19 | @apply lg:text-left lg:py-2 lg:px-3; 20 | } 21 | 22 | td { 23 | @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100 24 | lg:table-cell lg:text-left lg:py-2 lg:px-3 lg:align-middle lg:border-b-0; 25 | } 26 | 27 | tr:nth-child(odd) td { 28 | @apply lg:bg-gray-50; 29 | } 30 | 31 | td:last-child { 32 | @apply border-b-0; 33 | } 34 | 35 | tbody tr:hover td { 36 | @apply lg:bg-gray-100; 37 | } 38 | 39 | td:before { 40 | content: attr(data-label); 41 | @apply font-semibold pr-3 text-left lg:hidden; 42 | } 43 | 44 | td.checkbox-cell, th.checkbox-cell { 45 | @apply lg:w-5; 46 | } 47 | 48 | td.progress-cell progress { 49 | @apply flex w-2/5 self-center 50 | lg:w-full; 51 | } 52 | 53 | td.image-cell { 54 | @apply border-b-0 lg:w-6; 55 | } 56 | 57 | td.image-cell:before, td.actions-cell:before { 58 | @apply hidden; 59 | } 60 | 61 | td.image-cell .image { 62 | @apply w-24 h-24 mx-auto lg:w-6 lg:h-6; 63 | } 64 | 65 | .table-pagination { 66 | @apply px-6 py-3 border-t border-gray-100; 67 | } 68 | -------------------------------------------------------------------------------- /src/css/_title-bar.css: -------------------------------------------------------------------------------- 1 | .is-title-bar { 2 | @apply p-6 border-b border-gray-100; 3 | } 4 | 5 | .is-title-bar li { 6 | @apply inline-block pr-3 text-2xl text-gray-500; 7 | } 8 | 9 | .is-title-bar li:not(:last-child):after { 10 | content: '/'; 11 | @apply inline-block pl-3; 12 | } 13 | 14 | .is-title-bar li:last-child { 15 | @apply pr-0 font-black text-black; 16 | } 17 | -------------------------------------------------------------------------------- /src/css/form/_checkbox-radio-switch.css: -------------------------------------------------------------------------------- 1 | .checkbox, .radio, .switch { 2 | @apply inline-flex items-center cursor-pointer relative; 3 | } 4 | 5 | .checkbox input[type=checkbox], .radio input[type=radio], .switch input[type=checkbox] { 6 | @apply absolute left-0 opacity-0 -z-1; 7 | } 8 | 9 | .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check, .switch input[type=checkbox]+.check { 10 | @apply border-gray-300 border hover:border-gray-400; 11 | } 12 | 13 | .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check { 14 | @apply block w-5 h-5 ; 15 | } 16 | 17 | .checkbox input[type=checkbox]+.check { 18 | @apply rounded; 19 | } 20 | 21 | .switch input[type=checkbox]+.check { 22 | @apply flex items-center flex-shrink-0 w-12 h-6 p-0.5 bg-gray-200; 23 | } 24 | 25 | .radio input[type=radio]+.check, .switch input[type=checkbox]+.check, .switch input[type=checkbox]+.check:before { 26 | @apply rounded-full; 27 | } 28 | 29 | .checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check { 30 | @apply bg-no-repeat bg-center bg-blue-500 border-blue-500 border-4; 31 | } 32 | 33 | .checkbox input[type=checkbox]:checked+.check { 34 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E"); 35 | } 36 | 37 | .radio input[type=radio]:checked+.check { 38 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E"); 39 | } 40 | 41 | .switch input[type=checkbox]:checked+.check { 42 | @apply bg-blue-500 border-blue-500; 43 | } 44 | 45 | .switch input[type=checkbox]+.check:before { 46 | content: ''; 47 | @apply block w-5 h-5 bg-white border border-gray-300; 48 | } 49 | 50 | .switch input[type=checkbox]:checked+.check:before { 51 | transform: translate3d(110%, 0 ,0); 52 | @apply border-blue-500; 53 | } 54 | 55 | .checkbox .control-label, .radio .control-label, .switch .control-label { 56 | @apply pl-2; 57 | } 58 | -------------------------------------------------------------------------------- /src/css/form/_form.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .field:not(:last-child) { 3 | @apply mb-3; 4 | } 5 | 6 | .field.spaced:not(:last-child) { 7 | @apply mb-6; 8 | } 9 | 10 | .field-body .field .field { 11 | @apply mb-0; 12 | } 13 | 14 | .field.addons { 15 | @apply flex justify-start; 16 | } 17 | 18 | .field.addons .control.expanded { 19 | @apply flex-grow flex-shrink; 20 | } 21 | 22 | .field.addons .control:first-child:not(:only-child) .input, 23 | .field.addons .control:first-child:not(:only-child) .select select { 24 | @apply rounded-r-none border-r-0; 25 | } 26 | 27 | .field.addons .control:last-child:not(:only-child) .input, 28 | .field.addons .control:last-child:not(:only-child) .select select { 29 | @apply rounded-l-none border-l-0; 30 | } 31 | 32 | .field.grouped { 33 | @apply flex justify-start; 34 | } 35 | 36 | .field.grouped > .control:not(:last-child) { 37 | @apply mr-3; 38 | } 39 | 40 | .field.grouped.multiline { 41 | @apply flex-wrap; 42 | } 43 | 44 | .label { 45 | @apply block font-bold mb-2; 46 | } 47 | 48 | .control { 49 | @apply relative; 50 | } 51 | 52 | .control.icons-left, .control.icons-right { 53 | @apply relative; 54 | } 55 | 56 | .input, .textarea, .select select, .file-cta, .file-name { 57 | @apply px-3 py-2 border border-gray-400 rounded; 58 | } 59 | 60 | .input, .select select, .file-cta, .file-name { 61 | @apply h-10; 62 | } 63 | 64 | .input, .textarea, .select select { 65 | @apply w-full max-w-full focus:border-gray-100 focus:ring focus:outline-none bg-white; 66 | } 67 | 68 | .input[readonly] { 69 | @apply pointer-events-none bg-gray-100; 70 | } 71 | 72 | .textarea { 73 | @apply h-24; 74 | } 75 | 76 | .control.icons-left .icon, .control.icons-right .icon { 77 | @apply absolute top-0 z-10 w-10 h-10; 78 | } 79 | 80 | .control.icons-left .input, .control.icons-left .select select { 81 | @apply pl-10; 82 | } 83 | 84 | .control.icons-left .icon.left { 85 | @apply left-0; 86 | } 87 | 88 | .control.icons-right .input, .control.icons-right .select select { 89 | @apply pr-10; 90 | } 91 | 92 | .control.icons-right .icon.right { 93 | @apply right-0; 94 | } 95 | 96 | .help { 97 | @apply block text-xs text-gray-500 mt-1; 98 | } 99 | 100 | .file { 101 | @apply flex items-stretch justify-start relative; 102 | } 103 | 104 | .upload { 105 | @apply inline-flex; 106 | } 107 | 108 | .upload input[type=file] { 109 | @apply absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | @import "tailwind/_base.css"; 2 | @import "tailwind/_components.css"; 3 | @import "tailwind/_utilities.css"; 4 | 5 | @import "_app.css"; 6 | @import "_navbar.css"; 7 | @import "_aside.css"; 8 | @import "_title-bar.css"; 9 | @import "_button.css"; 10 | @import "_hero.css"; 11 | @import "_card.css"; 12 | @import "_icon.css"; 13 | @import "_table.css"; 14 | @import "_progress.css"; 15 | @import "_image.css"; 16 | @import "_modal.css"; 17 | @import "_notifications.css"; 18 | @import "form/_checkbox-radio-switch.css"; 19 | @import "form/_form.css"; 20 | @import "_footer.css"; 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/css/tailwind/_base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | -------------------------------------------------------------------------------- /src/css/tailwind/_components.css: -------------------------------------------------------------------------------- 1 | @tailwind components; 2 | -------------------------------------------------------------------------------- /src/css/tailwind/_utilities.css: -------------------------------------------------------------------------------- 1 | @tailwind utilities; 2 | -------------------------------------------------------------------------------- /src/html/forms.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | 6 | Forms 7 |

8 |
9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 |

Do not enter the first zero

41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 | 53 |
54 |
55 |
56 |
57 |
58 | 59 | 60 |
61 | 62 |
63 |

64 | This field is required 65 |

66 |
67 | 68 |
69 | 70 |
71 | 72 |
73 |
74 |
75 | 76 |
77 |
78 | 81 |
82 |
83 | 86 |
87 |
88 |
89 |
90 |
91 | 92 |
93 |
94 |

95 | 96 | Custom elements 97 |

98 |
99 |
100 |
101 | 102 |
103 |
104 |
105 | 109 |
110 |
111 | 115 |
116 |
117 | 121 |
122 |
123 |
124 |
125 |
126 |
127 | 128 |
129 |
130 |
131 | 136 |
137 |
138 | 143 |
144 |
145 |
146 |
147 |
148 |
149 | 150 |
151 |
152 | 157 |
158 |
159 |
160 |
161 |
162 | 163 |
164 |
165 | 171 |
172 |
173 |
174 |
175 |
176 |
177 | 178 | -------------------------------------------------------------------------------- /src/html/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |

8 | Clients 9 |

10 |

11 | 512 12 |

13 |
14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |

23 | Sales 24 |

25 |

26 | $7,770 27 |

28 |
29 | 30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |
38 |

39 | Performance 40 |

41 |

42 | 256% 43 |

44 |
45 | 46 |
47 |
48 |
49 |
50 | 51 |
52 |
53 |

54 | 55 | Performance 56 |

57 | 58 | 59 | 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 | 78 |
79 |
80 |
81 | 82 | Responsive table 83 |
84 | 85 |
86 |
87 | 88 |
89 |
90 |

91 | 92 | Clients 93 |

94 | 95 | 96 | 97 |
98 |
99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 118 | 119 | 120 | 121 | 124 | 127 | 137 | 138 | 139 | 144 | 145 | 146 | 147 | 150 | 153 | 163 | 164 | 165 | 170 | 171 | 172 | 173 | 176 | 179 | 189 | 190 | 191 | 196 | 197 | 198 | 199 | 202 | 205 | 215 | 216 | 217 | 222 | 223 | 224 | 225 | 228 | 231 | 241 | 242 | 243 | 248 | 249 | 250 | 251 | 254 | 257 | 267 | 268 | 269 | 274 | 275 | 276 | 277 | 280 | 283 | 293 | 294 | 295 | 300 | 301 | 302 | 303 | 306 | 309 | 319 | 320 | 321 | 326 | 327 | 328 | 329 | 332 | 335 | 345 | 346 | 347 | 352 | 353 | 354 | 355 | 358 | 361 | 371 | 372 | 373 |
NameCompanyCityProgressCreated
114 |
115 | 116 |
117 | 		Rebecca BauchDaugherty-DanielSouth Cory 122 | 79 123 | 125 | Oct 25, 2021 126 | 128 |
129 | 132 | 135 |
136 |
140 |
141 | 142 |
143 | 		Felicita YundtJohns-WeissnatEast Ariel 148 | 67 149 | 151 | Jan 8, 2021 152 | 154 |
155 | 158 | 161 |
162 |
166 |
167 | 168 |
169 | 		Mr. Larry Satterfield VHyatt LtdWindlerburgh 174 | 16 175 | 177 | Dec 18, 2021 178 | 180 |
181 | 184 | 187 |
188 |
192 |
193 | 194 |
195 | 		Mr. Broderick KubKshlerin, Bauch and ErnserNew Kirstenport 200 | 71 201 | 203 | Sep 13, 2021 204 | 206 |
207 | 210 | 213 |
214 |
218 |
219 | 220 |
221 | 		Barry WeberSchulist, Mosciski and HeidenreichEast Violettestad 226 | 80 227 | 229 | Jul 24, 2021 230 | 232 |
233 | 236 | 239 |
240 |
244 |
245 | 246 |
247 | 		Bert Kautzer MDGerhold and SonsMayeport 252 | 62 253 | 255 | Mar 30, 2021 256 | 258 |
259 | 262 | 265 |
266 |
270 |
271 | 272 |
273 | 		Lonzo SteuberSkiles LtdMarilouville 278 | 17 279 | 281 | Feb 12, 2021 282 | 284 |
285 | 288 | 291 |
292 |
296 |
297 | 298 |
299 | 		Jonathon HahnFlatley LtdBilliemouth 304 | 74 305 | 307 | Dec 30, 2021 308 | 310 |
311 | 314 | 317 |
318 |
322 |
323 | 324 |
325 | 		Ryley WuckertHeller-LittleEmeraldtown 330 | 54 331 | 333 | Jun 28, 2021 334 | 336 |
337 | 340 | 343 |
344 |
348 |
349 | 350 |
351 | 		Sienna HayesConn, Jerde and DouglasJonathanfort 356 | 55 357 | 359 | Mar 7, 2021 360 | 362 |
363 | 366 | 369 |
370 |
374 |
375 |
376 |
377 | 378 | 379 | 380 |
381 | Page 1 of 3 382 |
383 |
384 |
385 |
386 |
387 | -------------------------------------------------------------------------------- /src/html/login.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | 6 | Login 7 |

8 |
9 |
10 |
11 | 12 |
13 | 14 |
15 | 16 | 17 |
18 |

19 | Please enter your login 20 |

21 |
22 | 23 |
24 | 25 |

26 | 27 | 28 |

29 |

30 | Please enter your password 31 |

32 |
33 | 34 |
35 |
36 | 40 |
41 |
42 | 43 |
44 | 45 |
46 |
47 | 50 |
51 |
52 | 53 | Back 54 | 55 |
56 |
57 | 58 |
59 |
60 |
61 | 62 |
63 | 64 | -------------------------------------------------------------------------------- /src/html/parts/app-close.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/html/parts/app-open.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /src/html/parts/aside.html: -------------------------------------------------------------------------------- 1 | 80 | -------------------------------------------------------------------------------- /src/html/parts/bottom-scripts-home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/html/parts/bottom-scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/html/parts/bottom.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/html/parts/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ titleString }} - Admin One Tailwind CSS Admin Dashboard 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/html/parts/hero-bar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | {{ titleStringLong }} 5 |

6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /src/html/parts/navbar.html: -------------------------------------------------------------------------------- 1 | 88 | -------------------------------------------------------------------------------- /src/html/parts/sample-modal.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 34 | -------------------------------------------------------------------------------- /src/html/parts/title-bar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
    4 |
  • Admin
    • 5 |
  • {{ titleString }}
    • 6 |
7 | 8 | 9 | GitHub 10 | 11 |
12 |
13 | -------------------------------------------------------------------------------- /src/html/profile.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

6 | 7 | Edit Profile 8 |

9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 | 32 |
33 |

Required. Your name

34 |
35 |
36 |
37 |
38 | 39 |
40 |
41 |
42 | 43 |
44 |

Required. Your e-mail

45 |
46 |
47 |
48 |
49 |
50 |
51 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |

62 | 63 | Profile 64 |

65 |
66 |
67 |
68 | John Doe 69 |
70 |
71 |
72 | 73 |
74 | 75 |
76 |
77 |
78 |
79 | 80 |
81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |

90 | 91 | Change Password 92 |

93 |
94 |
95 |
96 |
97 | 98 |
99 | 100 |
101 |

Required. Your current password

102 |
103 |
104 |
105 | 106 |
107 | 108 |
109 |

Required. New password

110 |
111 |
112 | 113 |
114 | 115 |
116 |

Required. New password one more time

117 |
118 |
119 |
120 |
121 | 124 |
125 |
126 |
127 |
128 |
129 |
130 | -------------------------------------------------------------------------------- /src/html/tables.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | Responsive table 7 |
8 | 9 |
10 |
11 |
12 |
13 |

14 | 15 | Clients 16 |

17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 25 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 48 | 53 | 54 | 55 | 56 | 59 | 62 | 72 | 73 | 74 | 80 | 85 | 86 | 87 | 88 | 91 | 94 | 104 | 105 | 106 | 112 | 117 | 118 | 119 | 120 | 123 | 126 | 136 | 137 | 138 | 144 | 149 | 150 | 151 | 152 | 155 | 158 | 168 | 169 | 170 | 176 | 181 | 182 | 183 | 184 | 187 | 190 | 200 | 201 | 202 | 208 | 213 | 214 | 215 | 216 | 219 | 222 | 232 | 233 | 234 | 240 | 245 | 246 | 247 | 248 | 251 | 254 | 264 | 265 | 266 | 272 | 277 | 278 | 279 | 280 | 283 | 286 | 296 | 297 | 298 | 304 | 309 | 310 | 311 | 312 | 315 | 318 | 328 | 329 | 330 | 336 | 341 | 342 | 343 | 344 | 347 | 350 | 360 | 361 | 362 |
26 | 30 | NameCompanyCityProgressCreated
43 | 47 | 49 |
50 | 51 |
52 | 		Rebecca BauchDaugherty-DanielSouth Cory 57 | 79 58 | 60 | Oct 25, 2021 61 | 63 |
64 | 67 | 70 |
71 |
75 | 79 | 81 |
82 | 83 |
84 | 		Felicita YundtJohns-WeissnatEast Ariel 89 | 67 90 | 92 | Jan 8, 2021 93 | 95 |
96 | 99 | 102 |
103 |
107 | 111 | 113 |
114 | 115 |
116 | 		Mr. Larry Satterfield VHyatt LtdWindlerburgh 121 | 16 122 | 124 | Dec 18, 2021 125 | 127 |
128 | 131 | 134 |
135 |
139 | 143 | 145 |
146 | 147 |
148 | 		Mr. Broderick KubKshlerin, Bauch and ErnserNew Kirstenport 153 | 71 154 | 156 | Sep 13, 2021 157 | 159 |
160 | 163 | 166 |
167 |
171 | 175 | 177 |
178 | 179 |
180 | 		Barry WeberSchulist, Mosciski and HeidenreichEast Violettestad 185 | 80 186 | 188 | Jul 24, 2021 189 | 191 |
192 | 195 | 198 |
199 |
203 | 207 | 209 |
210 | 211 |
212 | 		Bert Kautzer MDGerhold and SonsMayeport 217 | 62 218 | 220 | Mar 30, 2021 221 | 223 |
224 | 227 | 230 |
231 |
235 | 239 | 241 |
242 | 243 |
244 | 		Lonzo SteuberSkiles LtdMarilouville 249 | 17 250 | 252 | Feb 12, 2021 253 | 255 |
256 | 259 | 262 |
263 |
267 | 271 | 273 |
274 | 275 |
276 | 		Jonathon HahnFlatley LtdBilliemouth 281 | 74 282 | 284 | Dec 30, 2021 285 | 287 |
288 | 291 | 294 |
295 |
299 | 303 | 305 |
306 | 307 |
308 | 		Ryley WuckertHeller-LittleEmeraldtown 313 | 54 314 | 316 | Jun 28, 2021 317 | 319 |
320 | 323 | 326 |
327 |
331 | 335 | 337 |
338 | 339 |
340 | 		Sienna HayesConn, Jerde and DouglasJonathanfort 345 | 55 346 | 348 | Mar 7, 2021 349 | 351 |
352 | 355 | 358 |
359 |
363 |
364 |
365 |
366 | 367 | 368 | 369 |
370 | Page 1 of 3 371 |
372 |
373 |
374 |
375 |
376 | 377 |
378 |
379 |
380 |
381 | 382 | Tightly wrapped. Table header becomes card header 383 |
384 | 385 |
386 |
387 | 388 |
389 |
390 | 391 | 392 | 393 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 416 | 421 | 422 | 423 | 424 | 427 | 430 | 440 | 441 | 442 | 448 | 453 | 454 | 455 | 456 | 459 | 462 | 472 | 473 | 474 | 480 | 485 | 486 | 487 | 488 | 491 | 494 | 504 | 505 | 506 | 512 | 517 | 518 | 519 | 520 | 523 | 526 | 536 | 537 | 538 | 544 | 549 | 550 | 551 | 552 | 555 | 558 | 568 | 569 | 570 | 576 | 581 | 582 | 583 | 584 | 587 | 590 | 600 | 601 | 602 | 608 | 613 | 614 | 615 | 616 | 619 | 622 | 632 | 633 | 634 | 640 | 645 | 646 | 647 | 648 | 651 | 654 | 664 | 665 | 666 | 672 | 677 | 678 | 679 | 680 | 683 | 686 | 696 | 697 | 698 | 704 | 709 | 710 | 711 | 712 | 715 | 718 | 728 | 729 | 730 |
394 | 398 | NameCompanyCityProgressCreated
411 | 415 | 417 |
418 | 419 |
420 | 		Rebecca BauchDaugherty-DanielSouth Cory 425 | 79 426 | 428 | Oct 25, 2021 429 | 431 |
432 | 435 | 438 |
439 |
443 | 447 | 449 |
450 | 451 |
452 | 		Felicita YundtJohns-WeissnatEast Ariel 457 | 67 458 | 460 | Jan 8, 2021 461 | 463 |
464 | 467 | 470 |
471 |
475 | 479 | 481 |
482 | 483 |
484 | 		Mr. Larry Satterfield VHyatt LtdWindlerburgh 489 | 16 490 | 492 | Dec 18, 2021 493 | 495 |
496 | 499 | 502 |
503 |
507 | 511 | 513 |
514 | 515 |
516 | 		Mr. Broderick KubKshlerin, Bauch and ErnserNew Kirstenport 521 | 71 522 | 524 | Sep 13, 2021 525 | 527 |
528 | 531 | 534 |
535 |
539 | 543 | 545 |
546 | 547 |
548 | 		Barry WeberSchulist, Mosciski and HeidenreichEast Violettestad 553 | 80 554 | 556 | Jul 24, 2021 557 | 559 |
560 | 563 | 566 |
567 |
571 | 575 | 577 |
578 | 579 |
580 | 		Bert Kautzer MDGerhold and SonsMayeport 585 | 62 586 | 588 | Mar 30, 2021 589 | 591 |
592 | 595 | 598 |
599 |
603 | 607 | 609 |
610 | 611 |
612 | 		Lonzo SteuberSkiles LtdMarilouville 617 | 17 618 | 620 | Feb 12, 2021 621 | 623 |
624 | 627 | 630 |
631 |
635 | 639 | 641 |
642 | 643 |
644 | 		Jonathon HahnFlatley LtdBilliemouth 649 | 74 650 | 652 | Dec 30, 2021 653 | 655 |
656 | 659 | 662 |
663 |
667 | 671 | 673 |
674 | 675 |
676 | 		Ryley WuckertHeller-LittleEmeraldtown 681 | 54 682 | 684 | Jun 28, 2021 685 | 687 |
688 | 691 | 694 |
695 |
699 | 703 | 705 |
706 | 707 |
708 | 		Sienna HayesConn, Jerde and DouglasJonathanfort 713 | 55 714 | 716 | Mar 7, 2021 717 | 719 |
720 | 723 | 726 |
727 |
731 |
732 |
733 |
734 | 735 | 736 | 737 |
738 | Page 1 of 3 739 |
740 |
741 |
742 |
743 |
744 | 745 |
746 |
747 |
748 |
749 | 750 | Empty table. 751 |
752 | 753 |
754 |
755 | 756 |
757 |
758 |
759 | 760 |
761 |

Nothing's here…

762 |
763 |
764 |
765 | -------------------------------------------------------------------------------- /src/img/justboil-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/js/chart.sample.js: -------------------------------------------------------------------------------- 1 | const randomChartData = n => { 2 | let data = [] 3 | 4 | for (let i = 0; i < n; i++) { 5 | data.push(Math.round(Math.random() * 200)) 6 | } 7 | 8 | return data 9 | } 10 | 11 | const chartColors = { 12 | default: { 13 | primary: '#00D1B2', 14 | info: '#209CEE', 15 | danger: '#FF3860' 16 | } 17 | } 18 | 19 | const ctx = document.getElementById('big-line-chart').getContext('2d'); 20 | 21 | new Chart(ctx, { 22 | type: 'line', 23 | data: { 24 | datasets: [ 25 | { 26 | fill: false, 27 | borderColor: chartColors.default.primary, 28 | borderWidth: 2, 29 | borderDash: [], 30 | borderDashOffset: 0.0, 31 | pointBackgroundColor: chartColors.default.primary, 32 | pointBorderColor: 'rgba(255,255,255,0)', 33 | pointHoverBackgroundColor: chartColors.default.primary, 34 | pointBorderWidth: 20, 35 | pointHoverRadius: 4, 36 | pointHoverBorderWidth: 15, 37 | pointRadius: 4, 38 | data: randomChartData(9) 39 | }, 40 | { 41 | fill: false, 42 | borderColor: chartColors.default.info, 43 | borderWidth: 2, 44 | borderDash: [], 45 | borderDashOffset: 0.0, 46 | pointBackgroundColor: chartColors.default.info, 47 | pointBorderColor: 'rgba(255,255,255,0)', 48 | pointHoverBackgroundColor: chartColors.default.info, 49 | pointBorderWidth: 20, 50 | pointHoverRadius: 4, 51 | pointHoverBorderWidth: 15, 52 | pointRadius: 4, 53 | data: randomChartData(9) 54 | }, 55 | { 56 | fill: false, 57 | borderColor: chartColors.default.danger, 58 | borderWidth: 2, 59 | borderDash: [], 60 | borderDashOffset: 0.0, 61 | pointBackgroundColor: chartColors.default.danger, 62 | pointBorderColor: 'rgba(255,255,255,0)', 63 | pointHoverBackgroundColor: chartColors.default.danger, 64 | pointBorderWidth: 20, 65 | pointHoverRadius: 4, 66 | pointHoverBorderWidth: 15, 67 | pointRadius: 4, 68 | data: randomChartData(9) 69 | } 70 | ], 71 | labels: ['01', '02', '03', '04', '05', '06', '07', '08', '09'] 72 | }, 73 | options: { 74 | maintainAspectRatio: false, 75 | legend: { 76 | display: false 77 | }, 78 | responsive: true, 79 | tooltips: { 80 | backgroundColor: '#f5f5f5', 81 | titleFontColor: '#333', 82 | bodyFontColor: '#666', 83 | bodySpacing: 4, 84 | xPadding: 12, 85 | mode: 'nearest', 86 | intersect: 0, 87 | position: 'nearest' 88 | }, 89 | scales: { 90 | yAxes: [{ 91 | barPercentage: 1.6, 92 | gridLines: { 93 | drawBorder: false, 94 | color: 'rgba(29,140,248,0.0)', 95 | zeroLineColor: 'transparent' 96 | }, 97 | ticks: { 98 | padding: 20, 99 | fontColor: '#9a9a9a' 100 | } 101 | }], 102 | 103 | xAxes: [{ 104 | barPercentage: 1.6, 105 | gridLines: { 106 | drawBorder: false, 107 | color: 'rgba(225,78,202,0.1)', 108 | zeroLineColor: 'transparent' 109 | }, 110 | ticks: { 111 | padding: 20, 112 | fontColor: '#9a9a9a' 113 | } 114 | }] 115 | } 116 | } 117 | }) 118 | 119 | 120 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | /* Aside & Navbar: dropdowns */ 2 | 3 | Array.from(document.getElementsByClassName('dropdown')).forEach(elA => { 4 | elA.addEventListener('click', e => { 5 | if (e.currentTarget.classList.contains('navbar-item')) { 6 | e.currentTarget.classList.toggle('active') 7 | } else { 8 | const dropdownIcon = e.currentTarget.getElementsByClassName('mdi')[1] 9 | 10 | e.currentTarget.parentNode.classList.toggle('active') 11 | dropdownIcon.classList.toggle('mdi-plus') 12 | dropdownIcon.classList.toggle('mdi-minus') 13 | } 14 | }) 15 | }) 16 | 17 | /* Aside Mobile toggle */ 18 | 19 | Array.from(document.getElementsByClassName('mobile-aside-button')).forEach(el => { 20 | el.addEventListener('click', e => { 21 | const dropdownIcon = e.currentTarget 22 | .getElementsByClassName('icon')[0] 23 | .getElementsByClassName('mdi')[0] 24 | 25 | document.documentElement.classList.toggle('aside-mobile-expanded') 26 | dropdownIcon.classList.toggle('mdi-forwardburger') 27 | dropdownIcon.classList.toggle('mdi-backburger') 28 | }) 29 | }) 30 | 31 | /* NavBar menu mobile toggle */ 32 | 33 | Array.from(document.getElementsByClassName('--jb-navbar-menu-toggle')).forEach(el => { 34 | el.addEventListener('click', e => { 35 | const dropdownIcon = e.currentTarget 36 | .getElementsByClassName('icon')[0] 37 | .getElementsByClassName('mdi')[0] 38 | 39 | document.getElementById(e.currentTarget.getAttribute('data-target')).classList.toggle('active') 40 | dropdownIcon.classList.toggle('mdi-dots-vertical') 41 | dropdownIcon.classList.toggle('mdi-close') 42 | }) 43 | }) 44 | 45 | /* Modal: open */ 46 | 47 | Array.from(document.getElementsByClassName('--jb-modal')).forEach(el => { 48 | el.addEventListener('click', e => { 49 | const modalTarget = e.currentTarget.getAttribute('data-target') 50 | 51 | document.getElementById(modalTarget).classList.add('active') 52 | document.documentElement.classList.add('clipped') 53 | }) 54 | }); 55 | 56 | /* Modal: close */ 57 | 58 | Array.from(document.getElementsByClassName('--jb-modal-close')).forEach(el => { 59 | el.addEventListener('click', e => { 60 | e.currentTarget.closest('.modal').classList.remove('active') 61 | document.documentElement.classList.remove('is-clipped') 62 | }) 63 | }) 64 | 65 | /* Notification dismiss */ 66 | 67 | Array.from(document.getElementsByClassName('--jb-notification-dismiss')).forEach(el => { 68 | el.addEventListener('click', e => { 69 | e.currentTarget.closest('.notification').classList.add('hidden') 70 | }) 71 | }) 72 | -------------------------------------------------------------------------------- /src/tailwind-favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justboil/admin-one-tailwind/5a033707365a7b4f290d9dfdd5d7f09ad4dd6129/src/tailwind-favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /src/tailwind-favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justboil/admin-one-tailwind/5a033707365a7b4f290d9dfdd5d7f09ad4dd6129/src/tailwind-favicons/favicon-16x16.png -------------------------------------------------------------------------------- /src/tailwind-favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justboil/admin-one-tailwind/5a033707365a7b4f290d9dfdd5d7f09ad4dd6129/src/tailwind-favicons/favicon-32x32.png -------------------------------------------------------------------------------- /src/tailwind-favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 33 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | './src/**/*.html', 4 | './src/**/*.js', 5 | ], 6 | theme: { 7 | extend: { 8 | zIndex: { 9 | '-1': '-1', 10 | }, 11 | flexGrow: { 12 | '5' : '5' 13 | } 14 | }, 15 | }, 16 | variants: { 17 | extend: {}, 18 | }, 19 | plugins: [], 20 | } 21 | --------------------------------------------------------------------------------