├── .github └── workflows │ └── jekyll-docker.yml ├── .gitignore ├── LICENSE ├── README.md ├── css └── styles.css ├── images ├── large.png ├── medium.png ├── small.png └── vscode.png ├── index.html └── js └── scripts.js /.github/workflows/jekyll-docker.yml: -------------------------------------------------------------------------------- 1 | name: Jekyll site CI 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | 7 | pull_request: 8 | branches: [master] 9 | 10 | jobs: 11 | build: 12 | 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - name: Checkout source Git branch 17 | uses: actions/checkout@v4 18 | 19 | - name: Build the site in the jekyll/builder container 20 | run: | 21 | docker run \ 22 | -v ${{ github.workspace }}:/srv/jekyll -v ${{ github.workspace }}/_site:/srv/jekyll/_site \ 23 | jekyll/builder:latest /bin/bash -c "chmod -R 777 /srv/jekyll && jekyll build --future" 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Bob's Programming Academy 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Admin Dashboard 2 | 3 | This is a responsive admin dashboard built using **HTML 5**, **CSS 3**, and **JavaScript**. Charts were built using **ApexCharts 3**. 4 | 5 | ![plot](https://github.com/BobsProgrammingAcademy/Responsive-Admin-Dashboard/blob/master/images/large.png?raw=true) 6 | 7 | ## Table of Contents 8 | - [Prerequisites](#prerequisites) 9 | - [Running the application](#run-the-application) 10 | - [Copyright and License](#copyright-and-license) 11 | 12 | ## Prerequisites 13 | 14 | Install the following prerequisites: 15 | 16 | * [Visual Studio Code](https://code.visualstudio.com/download) with the **Live Server** extension. 17 | 18 | [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) allows us to launch a local development server that enables a live reload of our project. 19 | 20 | ## Run the application 21 | 22 | To run the application, start the **Live Server** by clicking **Go Live** in the bottom right corner of the status bar in Visual Studio Code. This action will load the website in your default web browser. 23 | 24 | ![plot](https://github.com/BobsProgrammingAcademy/Responsive-Admin-Dashboard/blob/master/images/vscode.png?raw=true) 25 | 26 | ## View the application 27 | 28 | Once the **Live Server** is up and running, go to http://127.0.0.1:5500/index.html to view the application. 29 | 30 | ## Copyright and License 31 | 32 | Copyright © 2022 Bob's Programming Academy. Code released under the MIT license. 33 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #e6e8ed; 6 | color: #666666; 7 | font-family: "Montserrat", sans-serif; 8 | } 9 | 10 | .material-icons-outlined { 11 | vertical-align: middle; 12 | line-height: 1px; 13 | } 14 | 15 | .text-primary { 16 | color: #666666; 17 | } 18 | 19 | .text-blue { 20 | color: #246dec; 21 | } 22 | 23 | .text-red { 24 | color: #cc3c43; 25 | } 26 | 27 | .text-green { 28 | color: #367952; 29 | } 30 | 31 | .text-orange { 32 | color: #f5b74f; 33 | } 34 | 35 | .font-weight-bold { 36 | font-weight: 600; 37 | } 38 | 39 | .grid-container { 40 | display: grid; 41 | grid-template-columns: 260px 1fr 1fr 1fr; 42 | grid-template-rows: 0.2fr 3fr; 43 | grid-template-areas: 44 | "sidebar header header header" 45 | "sidebar main main main"; 46 | height: 100vh; 47 | } 48 | 49 | 50 | /* ---------- HEADER ---------- */ 51 | 52 | .header { 53 | grid-area: header; 54 | height: 70px; 55 | background-color: #ffffff; 56 | display: flex; 57 | align-items: center; 58 | justify-content: space-between; 59 | padding: 0 30px 0 30px; 60 | box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2); 61 | } 62 | 63 | .menu-icon { 64 | display: none; 65 | } 66 | 67 | 68 | /* ---------- SIDEBAR ---------- */ 69 | 70 | #sidebar { 71 | grid-area: sidebar; 72 | height: 100%; 73 | background-color: #21232d; 74 | color: #9799ab; 75 | overflow-y: auto; 76 | transition: all 0.5s; 77 | -webkit-transition: all 0.5s; 78 | } 79 | 80 | .sidebar-title { 81 | display: flex; 82 | justify-content: space-between; 83 | align-items: center; 84 | padding: 20px 20px 20px 20px; 85 | margin-bottom: 30px; 86 | } 87 | 88 | .sidebar-title > span { 89 | display: none; 90 | } 91 | 92 | .sidebar-brand { 93 | margin-top: 15px; 94 | font-size: 20px; 95 | font-weight: 700; 96 | } 97 | 98 | .sidebar-list { 99 | padding: 0; 100 | margin-top: 15px; 101 | list-style-type: none; 102 | } 103 | 104 | .sidebar-list-item { 105 | padding: 20px 20px 20px 20px; 106 | } 107 | 108 | .sidebar-list-item:hover { 109 | background-color: rgba(255, 255, 255, 0.2); 110 | cursor: pointer; 111 | } 112 | 113 | .sidebar-list-item > a { 114 | text-decoration: none; 115 | color: #9799ab; 116 | } 117 | 118 | .sidebar-responsive { 119 | display: inline !important; 120 | position: absolute; 121 | /* 122 | the z-index of the ApexCharts is 11 123 | we want the z-index of the sidebar higher so that 124 | the charts are not showing over the sidebar 125 | on small screens 126 | */ 127 | z-index: 12 !important; 128 | } 129 | 130 | 131 | /* ---------- MAIN ---------- */ 132 | 133 | .main-container { 134 | grid-area: main; 135 | overflow-y: auto; 136 | padding: 20px 20px; 137 | } 138 | 139 | .main-title { 140 | display: flex; 141 | justify-content: space-between; 142 | } 143 | 144 | .main-title > p { 145 | font-size: 20px; 146 | } 147 | 148 | .main-cards { 149 | display: grid; 150 | grid-template-columns: 1fr 1fr 1fr 1fr; 151 | gap: 20px; 152 | margin: 20px 0; 153 | } 154 | 155 | .card { 156 | display: flex; 157 | flex-direction: column; 158 | justify-content: space-around; 159 | padding: 25px; 160 | background-color: #ffffff; 161 | box-sizing: border-box; 162 | border: 1px solid #d2d2d3; 163 | border-radius: 5px; 164 | box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2); 165 | } 166 | 167 | .card:first-child { 168 | border-left: 7px solid #246dec; 169 | } 170 | 171 | .card:nth-child(2) { 172 | border-left: 7px solid #f5b74f; 173 | } 174 | 175 | .card:nth-child(3) { 176 | border-left: 7px solid #367952; 177 | } 178 | 179 | .card:nth-child(4) { 180 | border-left: 7px solid #cc3c43; 181 | } 182 | 183 | .card > span { 184 | font-size: 20px; 185 | font-weight: 600; 186 | } 187 | 188 | .card-inner { 189 | display: flex; 190 | align-items: center; 191 | justify-content: space-between; 192 | } 193 | 194 | .card-inner > p { 195 | font-size: 18px; 196 | } 197 | 198 | .card-inner > span { 199 | font-size: 35px; 200 | } 201 | 202 | .charts { 203 | display: grid; 204 | grid-template-columns: 1fr 1fr; 205 | gap: 20px; 206 | } 207 | 208 | .charts-card { 209 | background-color: #ffffff; 210 | margin-bottom: 20px; 211 | padding: 25px; 212 | box-sizing: border-box; 213 | -webkit-column-break-inside: avoid; 214 | border: 1px solid #d2d2d3; 215 | border-radius: 5px; 216 | box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2); 217 | } 218 | 219 | .chart-title { 220 | display: flex; 221 | align-items: center; 222 | justify-content: center; 223 | font-size: 22px; 224 | font-weight: 600; 225 | } 226 | 227 | 228 | /* ---------- SCROLLBARS ---------- */ 229 | 230 | ::-webkit-scrollbar { 231 | width: 5px; 232 | height: 6px; 233 | } 234 | 235 | ::-webkit-scrollbar-track { 236 | box-shadow: inset 0 0 5px #a5aaad; 237 | border-radius: 10px; 238 | } 239 | 240 | ::-webkit-scrollbar-thumb { 241 | background-color: #4f35a1; 242 | border-radius: 10px; 243 | } 244 | 245 | ::-webkit-scrollbar-thumb:hover { 246 | background-color: #a5aaad; 247 | } 248 | 249 | 250 | /* ---------- MEDIA QUERIES ---------- */ 251 | 252 | 253 | /* Medium <= 992px */ 254 | @media screen and (max-width: 992px) { 255 | .grid-container { 256 | grid-template-columns: 1fr; 257 | grid-template-rows: 0.2fr 3fr; 258 | grid-template-areas: 259 | "header" 260 | "main"; 261 | } 262 | 263 | #sidebar { 264 | display: none; 265 | } 266 | 267 | .menu-icon { 268 | display: inline; 269 | } 270 | 271 | .sidebar-title > span { 272 | display: inline; 273 | } 274 | } 275 | 276 | /* Small <= 768px */ 277 | @media screen and (max-width: 768px) { 278 | .main-cards { 279 | grid-template-columns: 1fr; 280 | gap: 10px; 281 | margin-bottom: 0; 282 | } 283 | 284 | .charts { 285 | grid-template-columns: 1fr; 286 | margin-top: 30px; 287 | } 288 | } 289 | 290 | /* Extra Small <= 576px */ 291 | @media screen and (max-width: 576px) { 292 | .header-left { 293 | display: none; 294 | } 295 | } -------------------------------------------------------------------------------- /images/large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BobsProgrammingAcademy/responsive-admin-dashboard/11957a47b3beb957a574bfc878e00c60880b6dbf/images/large.png -------------------------------------------------------------------------------- /images/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BobsProgrammingAcademy/responsive-admin-dashboard/11957a47b3beb957a574bfc878e00c60880b6dbf/images/medium.png -------------------------------------------------------------------------------- /images/small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BobsProgrammingAcademy/responsive-admin-dashboard/11957a47b3beb957a574bfc878e00c60880b6dbf/images/small.png -------------------------------------------------------------------------------- /images/vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BobsProgrammingAcademy/responsive-admin-dashboard/11957a47b3beb957a574bfc878e00c60880b6dbf/images/vscode.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Admin Dashboard 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 |
22 |
23 | menu 24 |
25 |
26 | search 27 |
28 |
29 | notifications 30 | email 31 | account_circle 32 |
33 |
34 | 35 | 36 | 37 | 83 | 84 | 85 | 86 |
87 |
88 |

DASHBOARD

89 |
90 | 91 |
92 | 93 |
94 |
95 |

PRODUCTS

96 | inventory_2 97 |
98 | 249 99 |
100 | 101 |
102 |
103 |

PURCHASE ORDERS

104 | add_shopping_cart 105 |
106 | 83 107 |
108 | 109 |
110 |
111 |

SALES ORDERS

112 | shopping_cart 113 |
114 | 79 115 |
116 | 117 |
118 |
119 |

INVENTORY ALERTS

120 | notification_important 121 |
122 | 56 123 |
124 | 125 |
126 | 127 |
128 | 129 |
130 |

Top 5 Products

131 |
132 |
133 | 134 |
135 |

Purchase and Sales Orders

136 |
137 |
138 | 139 |
140 |
141 | 142 | 143 |
144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | // SIDEBAR TOGGLE 2 | 3 | let sidebarOpen = false; 4 | const sidebar = document.getElementById('sidebar'); 5 | 6 | function openSidebar() { 7 | if (!sidebarOpen) { 8 | sidebar.classList.add('sidebar-responsive'); 9 | sidebarOpen = true; 10 | } 11 | } 12 | 13 | function closeSidebar() { 14 | if (sidebarOpen) { 15 | sidebar.classList.remove('sidebar-responsive'); 16 | sidebarOpen = false; 17 | } 18 | } 19 | 20 | // ---------- CHARTS ---------- 21 | 22 | // BAR CHART 23 | const barChartOptions = { 24 | series: [ 25 | { 26 | data: [10, 8, 6, 4, 2], 27 | }, 28 | ], 29 | chart: { 30 | type: 'bar', 31 | height: 350, 32 | toolbar: { 33 | show: false, 34 | }, 35 | }, 36 | colors: ['#246dec', '#cc3c43', '#367952', '#f5b74f', '#4f35a1'], 37 | plotOptions: { 38 | bar: { 39 | distributed: true, 40 | borderRadius: 4, 41 | horizontal: false, 42 | columnWidth: '40%', 43 | }, 44 | }, 45 | dataLabels: { 46 | enabled: false, 47 | }, 48 | legend: { 49 | show: false, 50 | }, 51 | xaxis: { 52 | categories: ['Laptop', 'Phone', 'Monitor', 'Headphones', 'Camera'], 53 | }, 54 | yaxis: { 55 | title: { 56 | text: 'Count', 57 | }, 58 | }, 59 | }; 60 | 61 | const barChart = new ApexCharts( 62 | document.querySelector('#bar-chart'), 63 | barChartOptions 64 | ); 65 | barChart.render(); 66 | 67 | // AREA CHART 68 | const areaChartOptions = { 69 | series: [ 70 | { 71 | name: 'Purchase Orders', 72 | data: [31, 40, 28, 51, 42, 109, 100], 73 | }, 74 | { 75 | name: 'Sales Orders', 76 | data: [11, 32, 45, 32, 34, 52, 41], 77 | }, 78 | ], 79 | chart: { 80 | height: 350, 81 | type: 'area', 82 | toolbar: { 83 | show: false, 84 | }, 85 | }, 86 | colors: ['#4f35a1', '#246dec'], 87 | dataLabels: { 88 | enabled: false, 89 | }, 90 | stroke: { 91 | curve: 'smooth', 92 | }, 93 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 94 | markers: { 95 | size: 0, 96 | }, 97 | yaxis: [ 98 | { 99 | title: { 100 | text: 'Purchase Orders', 101 | }, 102 | }, 103 | { 104 | opposite: true, 105 | title: { 106 | text: 'Sales Orders', 107 | }, 108 | }, 109 | ], 110 | tooltip: { 111 | shared: true, 112 | intersect: false, 113 | }, 114 | }; 115 | 116 | const areaChart = new ApexCharts( 117 | document.querySelector('#area-chart'), 118 | areaChartOptions 119 | ); 120 | areaChart.render(); 121 | --------------------------------------------------------------------------------