├── README.md
├── LICENSE
├── admin-style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | ## Admin-Dashboard-UI
2 | ### Bulit Using HTML CSS JavaScript
3 | ### [Live Demo](https://arjuncvinod.github.io/Admin-Panel-UI/)
4 | #### Screenshots :
5 | ![image](https://github.com/arjuncvinod/Admin-Panel-UI/assets/68469520/3601d3c5-8c50-4b68-9c6d-2ba64f31a77d)
6 | ![image](https://github.com/arjuncvinod/Admin-Panel-UI/assets/68469520/bd33c7b4-0a28-4b7a-9d80-9c1ec24a70c9)
7 | 
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Arjun C Vinod
 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 | 


--------------------------------------------------------------------------------
/admin-style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --uiclr: #009d84;
  3 |   --white: #e4e9fd;
  4 |   --black: #040c0e;
  5 |   --light-black: rgb(53, 50, 50);
  6 | }
  7 | * {
  8 |   margin: 0;
  9 |   padding: 0;
 10 |   font-family: Arial;
 11 | }
 12 | nav {
 13 |   background-color: white;
 14 |   height: 70px;
 15 |   width: 100%;
 16 |   display: flex;
 17 |   justify-content: space-between;
 18 |   align-items: center;
 19 | }
 20 | .logo {
 21 |   width: 10%;
 22 |   font-size: 2rem;
 23 |   font-weight: bold;
 24 |   color: var(--uiclr);
 25 |   margin-left: 10px;
 26 | }
 27 | .nav-items {
 28 |   width: 30%;
 29 | }
 30 | .nav-items ul {
 31 |   display: flex;
 32 |   justify-content: space-between;
 33 |   flex-direction: row;
 34 | }
 35 | .nav-items ul li {
 36 |   list-style: none;
 37 |   width: 90%;
 38 |   display: flex;
 39 |   justify-content: end;
 40 | }
 41 | .nav-items ul li a {
 42 |   text-decoration: none;
 43 |   color: var(--uiclr);
 44 |   font-size: 1.08rem;
 45 |   text-align: end;
 46 | }
 47 | /* ------------------------------------------------------------- */
 48 | body {
 49 |   background-color: rgba(128, 128, 128, 0.114);
 50 |   height: 100vh;
 51 | }
 52 | main {
 53 |   display: flex;
 54 |   flex-direction: row;
 55 |   height: 86%;
 56 |   justify-content: space-around;
 57 | }
 58 | .controls-container {
 59 |   margin-top: 2%;
 60 |   height: 100%;
 61 |   background-color: white;
 62 |   width: 20%;
 63 |   border-radius: 8px;
 64 | }
 65 | .content-container {
 66 |   border-radius: 8px;
 67 |   margin-top: 2%;
 68 |   height: 100%;
 69 |   /* background-color: rgb(255, 255, 255); */
 70 |   width: 75%;
 71 | }
 72 | .d-board-text {
 73 |   background-color: var(--uiclr);
 74 |   padding: 10px;
 75 |   color: white;
 76 |   font-size: 1.25rem;
 77 |   border-radius: 8px;
 78 | }
 79 | .controls {
 80 |   margin-top: 2%;
 81 |   display: flex;
 82 |   flex-direction: column;
 83 |   padding: 10px 0;
 84 |   gap: 10px;
 85 |   background-color: #ccebe6;
 86 |   border-radius: 8px;
 87 | }
 88 | .controls button {
 89 |   padding: 10px;
 90 |   background-color: #ccebe6;
 91 |   font-size: 1rem;
 92 |   border: none;
 93 |   text-align: start;
 94 |   cursor: pointer;
 95 |   border-radius: 8px;
 96 | }
 97 | .controls button:hover {
 98 |   background-color: var(--uiclr);
 99 |   color: white;
100 | }
101 | .stats-container {
102 |   display: flex;
103 |   flex-direction: row;
104 |   justify-content: space-around;
105 |   width: 100%;
106 |   margin-bottom: 3%;
107 | }
108 | .stat-box {
109 |   width: 300px;
110 |   height: 120px;
111 |   background-color: #dc3745;
112 |   border-radius: 15px;
113 |   display: flex;
114 |   flex-direction: row;
115 |   align-items: center;
116 |   justify-content: center;
117 |   gap: 10%;
118 |   color: white;
119 |   box-shadow: 0px 5px 10px rgb(198, 194, 194);
120 | }
121 | .stat-box:nth-child(2) {
122 |   background-color: var(--uiclr);
123 | }
124 | .stat-box:nth-child(3) {
125 |   background-color: #0a67c4;
126 | }
127 | .stat-box div {
128 |   display: flex;
129 |   flex-direction: column;
130 |   align-items: center;
131 |   justify-content: space-between;
132 | }
133 | .stat-box div h1 {
134 |   margin-bottom: 5px;
135 | }
136 | .stat-box p {
137 |   font-size: 3rem;
138 |   display: flex;
139 |   justify-content: center;
140 | }
141 | .posts-container {
142 |   width: 100%;
143 |   background-color: white;
144 |   height: 74%;
145 |   border-radius: 10px;
146 |   padding: 5px 0;
147 | }
148 | .posts-container h1 {
149 |   margin: 5px 20px;
150 | }
151 | .posts {
152 |   width: 100%;
153 |   display: flex;
154 |   justify-content: center;
155 |   padding: 10px 0;
156 |   height: 88%;
157 |   overflow-y: scroll;
158 | }
159 | table {
160 |   text-align: center;
161 |   width: 95%;
162 |   font-size: 1.1rem;
163 |   border-radius: 10px;
164 |   border-collapse: collapse;
165 |   border-color: rgb(255, 0, 0);
166 |   border: none;
167 |   
168 | }
169 | tr:nth-child(odd) {
170 |   background-color: #f2f2f2;
171 | }
172 | tr:hover{
173 |   background-color:rgba(0, 157, 131, 0.1);
174 |   cursor: pointer;
175 | }
176 | td,
177 | th {
178 |   border-right: 1px solid rgb(216, 213, 213);
179 |   /* border-bottom: 1px solid rgb(216, 213, 213); */
180 | }
181 | td{
182 | padding: 10px;
183 | }
184 | td:last-child,
185 | th:last-child {
186 |   border-right: none;
187 |   /* border-bottom: 2px solid rgb(216, 213, 213); */
188 | }
189 | td img {
190 |   width: 100px;
191 | }
192 | th {
193 |   height: 40px;
194 |   background-color: var(--uiclr);
195 |   color: white;
196 | }
197 | th:first-child{
198 |   border-top-left-radius: 8px;
199 | }
200 | th:last-child{
201 |   border-top-right-radius: 8px;
202 | }
203 | td p {
204 |   text-align: start;
205 |   margin: 0 5px;
206 | }
207 | td a {
208 |   text-decoration: none;
209 |   padding: 5px 12px;
210 |   border-radius: 5px;
211 |   color: white;
212 |   font-size: 0.9rem;
213 | }
214 | td a:hover {
215 |   opacity: 0.8;
216 | }
217 | .edit-tbn {
218 |   background-color: green;
219 | }
220 | .delete-btn {
221 |   background-color: red;
222 | }
223 | 
224 | .user-container{
225 |   height: 70%;
226 |   background-color: white;
227 |   padding: 20px;
228 |   border-radius: 8px;
229 |    overflow-y: hidden;
230 | }
231 | .user-container h1{
232 |   margin-bottom: 5px;
233 | }
234 | .users{
235 |   display: flex;
236 |   flex-wrap: wrap;
237 |   justify-content:start;
238 |   gap: 19px;
239 |   overflow-y: scroll;
240 |   height: 90%;
241 |   padding-left: 5px;
242 | }
243 | 
244 | .user {
245 |   height: 200px;
246 |   width: 200px;
247 |   background-color:white;
248 |   text-align: center;
249 |   border-radius: 8px;
250 |   box-shadow: 0px 0px 5px rgb(215, 212, 212);
251 | }
252 | .image-container{
253 |   width: 100%;
254 |   height: 80%;
255 |   display: flex;
256 |   justify-content: center;
257 |   padding-top:2px;
258 |   overflow: hidden;
259 | }
260 | .image-container div{
261 |   overflow: hidden;
262 |   height: 100%;
263 |   width: 98%;
264 |   border-radius: 8px;
265 | }
266 | .image-container img {
267 |   width: 100%;
268 |   height: 100%;
269 |   object-fit: cover;
270 |   overflow: hidden;
271 |   transition: 1s;
272 | }
273 | .image-container img:hover{
274 |   transition: 6s ease-in-out;
275 | }
276 | .image-container img:hover{
277 |   cursor:zoom-in;
278 |   scale: 2;
279 |   border-radius: 8px;
280 | } 
281 | .username{
282 |   display: flex;
283 |   justify-content: space-around;
284 |   align-items: center;
285 |   height: 22%;
286 | }
287 | .username h1{
288 |   font-size: 1.2rem;
289 |   vertical-align: center  ;
290 | }
291 | .username p a{
292 |   text-decoration: none;
293 |   color: black;
294 | }
295 | .username p a:hover{
296 |   color:red;
297 | }
298 | .selected{
299 |   background-color: var(--uiclr);
300 |   color: white;
301 | }
302 | #style-2::-webkit-scrollbar-track
303 | {
304 | 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
305 | 	border-radius: 10px;
306 | 	background-color: #F5F5F5;
307 | }
308 | 
309 | #style-2::-webkit-scrollbar
310 | {
311 | 	width: 12px;
312 | 	background-color: #F5F5F5;
313 | }
314 | 
315 | #style-2::-webkit-scrollbar-thumb
316 | {
317 | 	border-radius: 10px;
318 | 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
319 | 	background-color:var(--uiclr);
320 | }
321 | #style-2::-webkit-scrollbar {
322 |   display: none;
323 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Admin</title>
  8 |     <link rel="stylesheet" href="admin-style.css" />
  9 |     <script
 10 |       src="https://kit.fontawesome.com/eabac940d1.js"
 11 |       crossorigin="anonymous"
 12 |     ></script>
 13 |   </head>
 14 |   <body onload="posts()">
 15 |     <nav>
 16 |       <div class="logo">myBlog</div>
 17 |       <div class="nav-items">
 18 |         <ul>
 19 |           <!-- <li><a href=""> Home</a></li>
 20 |           <li><a href="">Dashboard</a></li> -->
 21 |           <li>
 22 |             <a href=""><i class="fa-solid fa-right-from-bracket"></i> Logout</a>
 23 |           </li>
 24 |         </ul>
 25 |       </div>
 26 |     </nav>
 27 |     <main>
 28 |       <div class="controls-container">
 29 |         <p class="d-board-text">Dashboard</p>
 30 |         <div class="controls">
 31 |             <button onclick="posts()" id="posts-btn"><i class="fa-solid fa-newspaper"></i> Manage Posts</button>
 32 |             <button onclick="user()" id="user-btn"><i class="fa-solid fa-user"></i> Manage Users</button>
 33 |         </div>
 34 |       </div>
 35 |       <div class="content-container">
 36 |         <div class="stats-container">
 37 |             <div class="stat-box">
 38 |                 <div>
 39 |                 <h1>765</h1>
 40 |                 <h2>Total Visits</h2>
 41 |                 </div>
 42 |                 <p><i class="fa-solid fa-eye"></i></p>
 43 |             </div>
 44 |             <div class="stat-box">
 45 |                 <div>
 46 |                 <h1>62</h1>
 47 |                 <h2>Total Posts</h2>
 48 |                 </div>
 49 |                 <p><i class="fa-solid fa-newspaper"></i></p>
 50 |             </div>
 51 |             <div class="stat-box">
 52 |                 <div>
 53 |                 <h1>12</h1>
 54 |                 <h2>Total Users</h2>
 55 |                 </div>
 56 |                 <p><i class="fa-solid fa-user"></i></p>
 57 |             </div>
 58 |            
 59 |         </div>
 60 | 
 61 |         <div class="posts-container" id="posts">
 62 |             <h1>Recent Articles</h1>
 63 |             <div class="posts" id="style-2">
 64 |                 <table>
 65 |                     <tr>
 66 |                         <th>No</th>
 67 |                         <th>Image</th>
 68 |                         <th>Title</th>
 69 |                         <th>Author</th>
 70 |                         <th>Edit</th>
 71 |                         <th>Delete</th>
 72 |                     </tr>
 73 |                     
 74 |                     <tr>
 75 |                         <td>1</td>
 76 |                         <td><img src="stan lee.webp" alt=""></td>
 77 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
 78 |                         <td>Tony stark</td>
 79 |                         <td><a href="" class="edit-tbn">Edit</a></td>
 80 |                         <td><a href="" class="delete-btn">Delete</a></td>
 81 |                     </tr>
 82 |                     <tr>
 83 |                         <td>1</td>
 84 |                         <td><img src="stan lee.webp" alt=""></td>
 85 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
 86 |                         <td>Tony stark</td>
 87 |                         <td><a href="" class="edit-tbn">Edit</a></td>
 88 |                         <td><a href="" class="delete-btn">Delete</a></td>
 89 |                     </tr>
 90 |                     <tr>
 91 |                         <td>1</td>
 92 |                         <td><img src="stan lee.webp" alt=""></td>
 93 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
 94 |                         <td>Tony stark</td>
 95 |                         <td><a href="" class="edit-tbn">Edit</a></td>
 96 |                         <td><a href="" class="delete-btn">Delete</a></td>
 97 |                     </tr>
 98 |                     <tr>
 99 |                         <td>1</td>
100 |                         <td><img src="stan lee.webp" alt=""></td>
101 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
102 |                         <td>Tony stark</td>
103 |                         <td><a href="" class="edit-tbn">Edit</a></td>
104 |                         <td><a href="" class="delete-btn">Delete</a></td>
105 |                     </tr>
106 |                     <tr>
107 |                         <td>1</td>
108 |                         <td><img src="stan lee.webp" alt=""></td>
109 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
110 |                         <td>Tony stark</td>
111 |                         <td><a href="" class="edit-tbn">Edit</a></td>
112 |                         <td><a href="" class="delete-btn">Delete</a></td>
113 |                     </tr>
114 |                     <tr>
115 |                         <td>1</td>
116 |                         <td><img src="stan lee.webp" alt=""></td>
117 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
118 |                         <td>Tony stark</td>
119 |                         <td><a href="" class="edit-tbn">Edit</a></td>
120 |                         <td><a href="" class="delete-btn">Delete</a></td>
121 |                     </tr>
122 |                     <tr>
123 |                         <td>1</td>
124 |                         <td><img src="stan lee.webp" alt=""></td>
125 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
126 |                         <td>Tony stark</td>
127 |                         <td><a href="" class="edit-tbn">Edit</a></td>
128 |                         <td><a href="" class="delete-btn">Delete</a></td>
129 |                     </tr>
130 |                     <tr>
131 |                         <td>1</td>
132 |                         <td><img src="stan lee.webp" alt=""></td>
133 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
134 |                         <td>Tony stark</td>
135 |                         <td><a href="" class="edit-tbn">Edit</a></td>
136 |                         <td><a href="" class="delete-btn">Delete</a></td>
137 |                     </tr>
138 |                     <tr>
139 |                         <td>1</td>
140 |                         <td><img src="stan lee.webp" alt=""></td>
141 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
142 |                         <td>Tony stark</td>
143 |                         <td><a href="" class="edit-tbn">Edit</a></td>
144 |                         <td><a href="" class="delete-btn">Delete</a></td>
145 |                     </tr>
146 |                     <tr>
147 |                         <td>1</td>
148 |                         <td><img src="stan lee.webp" alt=""></td>
149 |                         <td><p>Who Really Created the Marvel Universe?</p></td>
150 |                         <td>Tony stark</td>
151 |                         <td><a href="" class="edit-tbn">Edit</a></td>
152 |                         <td><a href="" class="delete-btn">Delete</a></td>
153 |                     </tr>
154 |                     
155 |                 </table>
156 |             </div>
157 |         </div>
158 |         
159 | 
160 |         <div class="user-container"  id="user">
161 |           <h1>Users</h1>
162 |           <div class="users" id="style-2">
163 |             <div class="user">
164 |               <div class="image-container">
165 |                 <div>
166 |                 <img src="stan lee.webp" alt="">
167 |               </div>
168 |               </div>
169 |               <div class="username">
170 |               <h1>Tony Stark</h1>
171 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
172 |               </div>
173 |             </div>
174 |             <div class="user">
175 |               <div class="image-container">
176 |                 <div>
177 |                 <img src="stan lee.webp" alt="">
178 |               </div>
179 |               </div>
180 |               <div class="username">
181 |               <h1>Tony Stark</h1>
182 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
183 |               </div>
184 |             </div>
185 |             <div class="user">
186 |               <div class="image-container">
187 |                 <div>
188 |                 <img src="stan lee.webp" alt="">
189 |               </div>
190 |               </div>
191 |               <div class="username">
192 |               <h1>Tony Stark</h1>
193 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
194 |               </div>
195 |             </div>
196 |             <div class="user">
197 |               <div class="image-container">
198 |                 <div>
199 |                 <img src="stan lee.webp" alt="">
200 |               </div>
201 |               </div>
202 |               <div class="username">
203 |               <h1>Tony Stark</h1>
204 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
205 |               </div>
206 |             </div>
207 |             <div class="user">
208 |               <div class="image-container">
209 |                 <div>
210 |                 <img src="stan lee.webp" alt="">
211 |               </div>
212 |               </div>
213 |               <div class="username">
214 |               <h1>Tony Stark</h1>
215 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
216 |               </div>
217 |             </div>
218 |             <div class="user">
219 |               <div class="image-container">
220 |                 <div>
221 |                 <img src="stan lee.webp" alt="">
222 |               </div>
223 |               </div>
224 |               <div class="username">
225 |               <h1>Tony Stark</h1>
226 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
227 |               </div>
228 |             </div>
229 |             <div class="user">
230 |               <div class="image-container">
231 |                 <div>
232 |                 <img src="stan lee.webp" alt="">
233 |               </div>
234 |               </div>
235 |               <div class="username">
236 |               <h1>Tony Stark</h1>
237 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
238 |               </div>
239 |             </div>
240 |             <div class="user">
241 |               <div class="image-container">
242 |                 <div>
243 |                 <img src="stan lee.webp" alt="">
244 |               </div>
245 |               </div>
246 |               <div class="username">
247 |               <h1>Tony Stark</h1>
248 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
249 |               </div>
250 |             </div>
251 |             <div class="user">
252 |               <div class="image-container">
253 |                 <div>
254 |                 <img src="stan lee.webp" alt="">
255 |               </div>
256 |               </div>
257 |               <div class="username">
258 |               <h1>Tony Stark</h1>
259 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
260 |               </div>
261 |             </div>
262 |             <div class="user">
263 |               <div class="image-container">
264 |                 <div>
265 |                 <img src="stan lee.webp" alt="">
266 |               </div>
267 |               </div>
268 |               <div class="username">
269 |               <h1>Tony Stark</h1>
270 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
271 |               </div>
272 |             </div>
273 |             <div class="user">
274 |               <div class="image-container">
275 |                 <div>
276 |                 <img src="stan lee.webp" alt="">
277 |               </div>
278 |               </div>
279 |               <div class="username">
280 |               <h1>Tony Stark</h1>
281 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
282 |               </div>
283 |             </div>
284 |             <div class="user">
285 |               <div class="image-container">
286 |                 <div>
287 |                 <img src="stan lee.webp" alt="">
288 |               </div>
289 |               </div>
290 |               <div class="username">
291 |               <h1>Tony Stark</h1>
292 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
293 |               </div>
294 |             </div>
295 |             <div class="user">
296 |               <div class="image-container">
297 |                 <div>
298 |                 <img src="stan lee.webp" alt="">
299 |               </div>
300 |               </div>
301 |               <div class="username">
302 |               <h1>Tony Stark</h1>
303 |               <p><a href=""><i class="fa-solid fa-trash"></i></a></p>
304 |               </div>
305 |             </div>
306 |           </div>
307 |         </div>
308 |       </div>
309 |     </main>
310 |     <script>
311 |       function user(){
312 |         document.getElementById("posts").style.display="none";
313 |         document.getElementById("user").style.display="block";
314 |         document.getElementById("user-btn").style.backgroundColor="var(--uiclr)";
315 |         document.getElementById("posts-btn").style.backgroundColor="";
316 |         document.getElementById("user-btn").classList.add("selected");
317 |         document.getElementById("posts-btn").classList.remove("selected");
318 | 
319 |         
320 |         
321 |       }
322 |       function posts(){
323 |          document.getElementById("user").style.display="none";
324 |         document.getElementById("posts").style.display="block";
325 |         document.getElementById("posts-btn").style.backgroundColor="var(--uiclr)";
326 |         document.getElementById("user-btn").style.backgroundColor="";
327 |         document.getElementById("posts-btn").classList.add("selected");
328 |         document.getElementById("user-btn").classList.remove("selected");
329 | 
330 |       }
331 |     </script>
332 |   </body>
333 | </html>
334 | 


--------------------------------------------------------------------------------